How to call javascript function from different<div> ?

I`v made the following code:

Expand|Select|Wrap|Line Numbers

 <div id="Panels" style="width: 28%;">

            <asp:Panel ID="one" runat="server" CssClass="Panel">

                <div id="Head" onclick="doToggle();">

                    HEADER

                </div>

            </asp:Panel>

            <asp:Panel ID="two" runat="server" CssClass="Content">

                    abcdefghijklmnopqrstuvwxyz

           </asp:Panel>

            <cc1:CollapsiblePanelExtender ID="cpe" runat="server"  TargetControlID="two"></cc1:CollapsiblePanelExtender>

</div>

and the function doToggle() is:

Expand|Select|Wrap|Line Numbers

 <script type="text/javascript">

        function doToggle()

        {

            var cpe = $find("cpe");

            //cpe._toggle();

            if (cpe.get_Collapsed()) 

            {   

                cpe._doOpen();

            } 

            else

            {

                cpe._doClose();

            }

        }

    </script>

But the problem is the if i want to have more div tags but use this same function for all just by calling it by giving the appropriate id?

Oct 1 '08 #1

Follow Post Reply

19884

acoder

16,027

Expert Mod 8TB

Yes, just pass the ID as a parameter to the function:

Expand|Select|Wrap|Line Numbers

 function doToggle(id) {

            var cpe = $find(id);

PS. please use code tags when posting code.

Oct 1 '08 #2

saadkhan

but how will i call it?
plz tell me this as well

Oct 1 '08 #3

acoder

16,027

Expert Mod 8TB

Pass the ID to the function when calling:

Expand|Select|Wrap|Line Numbers

onclick="doToggle('cpe')"

Oct 1 '08 #4

saadkhan

I`v made the following code:

Expand|Select|Wrap|Line Numbers

 <div id="Panels" style="width: 28%;"> 

            <asp:Panel ID="one" runat="server" CssClass="Panel"> 

                <div id="Head" onclick="doToggle();"> 

                    HEADER 

                </div> 

            </asp:Panel> 

            <asp:Panel ID="two" runat="server" CssClass="Content"> 

                    abcdefghijklmnopqrstuvwxyz 

           </asp:Panel> 

            <cc1:CollapsiblePanelExtender ID="cpe" runat="server"  TargetControlID="two"></cc1:CollapsiblePanelExtender> 

</div>

and the function doToggle() is:

Expand|Select|Wrap|Line Numbers

 <script type="text/javascript"> 

        function doToggle() 

        { 

            var cpe = $find("cpe"); 
 
            if (cpe.get_Collapsed())  

            {    

                cpe._doOpen(); 

            }  

            else 

            { 

                cpe._doClose(); 

            } 

        } 

    </script>

Actually i want to use single 'CollapsiblePanelExtender' for many <div> tags, that is i just need to specify in function the targetId of div tags to act on everytime from where the function is called....

Oct 2 '08 #5

Dormilich

8,658

Expert Mod 8TB

if you use element.addEventListener() / element.attachEvent() you can refer to the element's id with this.id

regards

Oct 2 '08 #6

gits

5,390

Expert Mod 4TB

threads merged - please don't double post threads and keep all questions regarding one issue in one thread.

kind regards
MOD

Oct 2 '08 #7

acoder

16,027

Expert Mod 8TB

If the previous answers don't help solve the problem, post the client-side version of your code, i.e. how it appears in the browser (view source).

PS. please use code tags when posting code.

PPS. don't use the report link when you only mean to reply. Reply is on the right.

Oct 2 '08 #8

saadkhan

[HTML]<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Panel.aspx.cs" Inherits="Default2" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<!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>Welcome</title>
<link href="UserStyleSheet.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
function doToggle()
{
var cpe = $find("cpe");
cpe._animation._fps = 30;
cpe._animation._duration = 0.20;

if (cpe.get_Collapsed())
{
cpe._doOpen();
}
else
{
cpe._doClose();
}
}
</script>
</head>

<body>
<form id="form1" runat="server">


<asp:ScriptManager ID="ScriptManager" runat="server">
</asp:ScriptManager>


<div id="Panels" style="width: 28%;">

<div id="Head1" onclick="doToggle();">
HEADER <asp:Label ID="lbl1" runat="server"></asp:Label>
</div>
<asp:Panel ID="Panel1" runat="server" CssClass="Content">
ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
more interactive and highly-personalized Web experiences that work across all the
most popular browsers.
</asp:Panel>



<div id="Head2" onclick="doToggle();">
HEADER <asp:Label ID="lbl2" runat="server"></asp:Label>
</div>
<asp:Panel ID="Panel2" runat="server" CssClass="Content">
saadASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
more interactive and highly-personalized Web experiences that work across all the
most popular browsers.
</asp:Panel>

</div>
<cc1:CollapsiblePanelExtender ID="cpe" runat="server"
TargetControlID="Panel1" CollapsedSize="0" SuppressPostBack="True"
CollapsedText="↓" ExpandedText="↑" TextLabelID="lbl"></cc1:CollapsiblePanelExtender>


</form>
</body>

</html>[/HTML]

well heres my code, i want both div tags to call doToggle() onclick event which is working fine. But the target TargetControlID of CollapsiblePanelExtender remains same, which is causing only one div (Head1) to get slided.

Oct 3 '08 #9

Rsmastermind

You can give same name to all divs.But different ids.Now call this function on onclick of every div as oncllick="doToggle(this);" This is more than enough.Now you do not not need to call independant function for each div

Expand|Select|Wrap|Line Numbers

 
function doToggle(that){
 
var divName=document.getElementsByName('Name of the div');

var divLength=divName.length;
 
for(i=0;i<divLength;i++)
 
    {
 
    if(divName[i].id==that){alert('Hi Friend');}

    else{alert('Bye Friend');}

    }

}

Hope this could be easy and efficient for you.

Oct 3 '08 #10

How to call javascript function from different<div> ?

Post your reply

Similar topics