Click here to Skip to main content
13,298,361 members (77,431 online)
Rate this:
Please Sign up or sign in to vote.
Hello my friends.
I have a page here that include a js file and it works fine, i used it for make an animated div for its size dynamically. but the problem is when i make a user control it doesn't work, means my jquery codes becomes unusable and cant animate related Div.
Thanks for your attention. this is code of my page:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ArticelCtrl.aspx.cs" Inherits="ArticelCtrl" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
    <link href="App_Themes/Theme1/91-05-16/CSS/StyleSheet.css" rel="stylesheet" type="text/css" />
    <script src="App_Themes/Theme1/91-05-16/Script/jquery-1.6.js" type="text/javascript"></script>
<script type="text/javascript" >
    $(document).ready(function () {
        var h = ($("#AbstractText").innerHeight() + 50) + "px";
        var p = $("#AbstractText").innerHeight();
        p > 400 ? p = p + 600 : p = p + 400;
        $("#OpenCloseButton").toggle(function () {
            $("#OpenCloseButton").attr("src", "App_Themes/Theme1/91-05-16/Images/Icons/Close.png");
            $("#OpenCloseButton").attr("title", "Close");
            $("#DotDiv").animate({ opacity: "0" }, 100);
            $("#AnimatedArticleDiv").animate({ height: h }, p);
        }, function () {
            $("#OpenCloseButton").attr("src", "App_Themes/Theme1/91-05-16/Images/Icons/Open.png");
            $("#OpenCloseButton").attr("title", "More");
            $("#AnimatedArticleDiv").animate({ height: "66px" }, p);
            $("#DotDiv").animate({ opacity: "1" }, 1000);
        $("#OpenCloseButton").mouseenter(function () {
            $("#OpenCloseButton").animate({ width: "22px", height: "22px" }, 100);
        $("#OpenCloseButton").mouseleave(function () {
            $("#OpenCloseButton").animate({ width: "20px", height: "20px" }, 150);
    <form id="form1" runat="server">
            <div id="AnimatedArticleDiv" class="AnimatedArticleDiv">
            <div style="margin-removed-6px;">
                <asp:Label ID="AbstractHeader" runat="server" Text="Article title" style="direction:rtl;"></asp:Label>
            <div style="padding:10px 10px 10px 10px;">
                <asp:Label ID="AbstractText" runat="server" style="direction:rtl;"
                    Text="Some text are here"></asp:Label>
            <asp:ImageButton ID="OpenCloseButton" runat="server" 
                style="position:absolute; left:13px; bottom:2px;z-index:900;" 
                ImageUrl="~/App_Themes/Theme1/91-05-16/Images/Icons/Open.png" ToolTip="More" />
                <div id="DotDiv" style="removed:absolute; removed8px;removed0;background-color: #DFFFEA;color: #003300;padding: 0 2px 5px 30px;">. . . .</div>

how can i make it a user control without any problem?
Posted 3-Sep-12 23:50pm

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

Ok. So, if I understand correctly, your Javascript/jQuery code does not work when you convert the existing working code into a user control, right?

If so, it might be because of bad reference. JavaScript files might not be at the location you define in your usercontrol.
2 options:
1. Correct the relative URL to point at correct location
2. Specify an absolute path.

Option 1 is what is suggested and generally preferred. For it, I would suggest you to use this Tip and resolve the path correctly before setting the source of the file: Resolving Paths in a Multi-Folder WebSite[^]
Abolfazl Beigi 4-Sep-12 7:14am
Thanks for your answer.
i moved all items in the root of my project but the result was same. i'm boring to think about this.i'm working in this part all day long and my brain is so heavy.
Abolfazl Beigi 4-Sep-12 8:06am
I tested every thing else like css and images, they are included without any problem, js file is like them included but dose not work in user control.
Sandeep Mewara 4-Sep-12 8:08am
Difficult to comment then. Try Javascript DEBUGGING and see how the execution flow goes.
Abolfazl Beigi 4-Sep-12 8:09am
I'm sure the problem is not for js path, i added my control to the page that have some code exactly like user control code but my simple code works fine and user control no.
Sandeep Mewara 4-Sep-12 8:13am
Whatever it is, your debugging should help. Further, look for any logs if you see anything.
Abolfazl Beigi 4-Sep-12 8:14am
OK i'll test it.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy |
Web01 | 2.8.171207.1 | Last Updated 4 Sep 2012
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100