Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET Javascript jQuery , +
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
 
    <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").show();
            $("#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);
        });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
            <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>
            <div style="padding:10px 10px 10px 10px;">
                <asp:Label ID="AbstractText" runat="server" style="direction:rtl;"
                    Text="Some text are here"></asp:Label>
            </div>
            <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>
            </div>
        </div>
    </form>
</body>
</html>

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

1 solution

Rate this: bad
good
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[^]
  Permalink  
Comments
Abolfazl Beigi at 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 at 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 at 4-Sep-12 8:08am
   
Difficult to comment then. Try Javascript DEBUGGING and see how the execution flow goes.
Abolfazl Beigi at 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 at 4-Sep-12 8:13am
   
Whatever it is, your debugging should help. Further, look for any logs if you see anything.
Abolfazl Beigi at 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
0 Sergey Alexandrovich Kryukov 6,725
1 OriginalGriff 6,696
2 CPallini 5,315
3 George Jonsson 3,589
4 Gihan Liyanage 2,650


Advertise | Privacy | Mobile
Web03 | 2.8.140922.1 | Last Updated 4 Sep 2012
Copyright © CodeProject, 1999-2014
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