asked on

ASP.NET with Jquery slide down panel

i try to follow the article below :
http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

to perform 'simple slide panel'

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jqueryslidepanel.aspx.cs" Inherits="modalpopup.jqueryslidepanel" %>

<!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>
    <script type='text/javascript'
src='script/jquery.js'>
</script>
    <script type="text/javascript">
    
      function pageLoad() {
      }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
     <script type="text/javascript">
         $(document).ready(function() {

             $(".btnslide").click(function() {
                 $("#panel").slideToggle("slow");
                 $(this).toggleClass("active");
             });

         });
     
     
     </script>
     <div id="panel" class="active">
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <br />
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <br />
            <asp:Button ID="Button1" runat="server" Text="Button" />
            <br />
        </div>
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        
        
    </div>
  <p>
       <asp:Button ID="btnslide" Text="Slide" runat="server" />
    </p>
    </form>
    
</body>
</html>

Open in new window

Göran Andersson

You are trying to target an element with ID="btnslide" using the selector ".btnslide". You either need to use CssClass="btnslide" to match the selector, or use the selector "#btnSlide" to match the ID.

safiint

hi
you have to do this:

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

    <script type="text/javascript">
     $(document).ready(function() {
     var btnslide = document.getElementById('btnslide.ClientID');
     $(btnslide).click(function() {
     $("#panel").slideToggle("slow");
     $(this).toggleClass("active");
     });
     });
    </script>

    <div id="panel" class="active">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <br />
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <br />
    </div>
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
    </div>
    <p>
        <asp:Button ID="btnslide" Text="Slide" runat="server" OnClientClick="return false;" />
    </p>
    </form>
</body>

Open in new window

doramail05

ASKER

ok, while page load, the panel is showing.
i try to hide the panel first b4 it is being clicked

and would like to use btn-slide.gif (same as the article) instead of <asp:button id=btnslide.. >

safiint

OK now I understood you.

try this html and images

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

    <script type="text/javascript">
         $(document).ready(function() {
                
             $('.btnslide').click(function() {
                 $("#panel").slideToggle("slow");
                 $(this).toggleClass("active"); return false;
             });

         });
     
     
    </script>

    <div id="panel" class="" style="display:none;">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <br />
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <br />
    </div>
    <p class="slide-btn-parent">
        <asp:LinkButton ID="btnslide" CssClass="btnslide" Text="Slide" runat="server"></asp:LinkButton>
    </p>
    </form>
</body>

Open in new window

closed.gif
opened.gif

ASKER CERTIFIED SOLUTION

Göran Andersson

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

doramail05

ASKER

missing the btnslide class and the image to linkbutton i guess

safiint

sorry
I forgot adding css style, here is the style:

.slide-btn-parent{text-align:center;}

.slide-btn-parent a{display:block;padding-top:5px;width:154px;height:35px; text-decoration:none;background:url(images/opened.gif) no-repeat center;color:#fff;}

.slide-btn-parent a.active{background-image:url(images/closed.gif);}

//make sure the path of two images is right...

doramail05

ASKER

removed class="active" from div panel, but it still firstly load up the panel b4 clicking the button.

safiint

just add this attribute to the div:

style="display:none;"

Göran Andersson

The code in the article has this in the CSS, giving it a background color and height for when it's visible, and making it hidden until the jQuery code shows it:

#panel {
	background: #754c24;
	height: 200px;
	display: none;
}

Open in new window

doramail05

ASKER

i placed my css in App_Theme / Modal / Styles.css

but still didnt show the open.gif and closed.gif

<%@ Page Language="C#" AutoEventWireup="true" Theme="Modal" CodeBehind="jqueryslidepanel.aspx.cs" Inherits="modalpopup.jqueryslidepanel" %>

<!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 rel="Stylesheet" type="text/css" href="App_Themes/Modal/Styles.css" />
    <script type='text/javascript'
src='script/jquery.js'>
</script>
    

    <script type="text/javascript">
    
      function pageLoad() {
      }

//      function myFunction() {
//          document.getElementById('panel').style.visibility = 'hidden'; 
//      }
    
    </script>
</head>
<%--<body onload="myFunction()">--%>
 <body>
    <form id="form1" runat="server"> 
 
    <script type="text/javascript">
        $(document).ready(function() {
        var btnslide = document.getElementById('btnslide.ClientID');

        $(btnslide).click(function() {

        $("#panel").slideToggle("slow");
        $(this).toggleClass("active");
           
             
            
            
            
           
         });
     });

     
    </script> 
    <table>
    <tr><td><div id="panel" style="display:none;"
> 
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
        <br /> 
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> 
        <br />
        <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox> 
        <br /> 
        <asp:Button ID="Button1" runat="server" Text="Button" /> 
        <br />
        <br /> 
    </div> </td>
    </tr>
   
    <tr><td>
    <%--<asp:Button ID="btnslide" Text="Slide" runat="server" OnClientClick="return false;" />
    
    
     </td>--%>
    <p class="slide-btn-parent"> 
        
       <asp:LinkButton ID="btnslide" CssClass="Modal" Text="Slide" runat="server"></asp:LinkButton> 

    </p> 
    </td>
    </tr>
    
    </table>
 
 
    
    
    <div> 
        <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
    </div> 
    <p> 
        
        
    </p> 
    </form> 
</body>
</html>

Open in new window

safiint

you have to add folder with name: images
and put the images in this folder

doramail05

ASKER

ok, while clicking on the 'slide' a href, the page seems to post / refresh, and cannot really show slide effect.
effect only show while clicking on the white space on top of the 'slide' a href

safiint

the folder images, you have to create it in this path:
App_Themes\Modal\

I mean in the same place with css files

doramail05

ASKER

with this help :
<a href="#" class="btn-slide">Slide Panel</a>

Göran Andersson

You would want the link from being activated, by calling the preventDefault method in the click event.

Another reason for the code not working is that you are using "document.getElementById('btnslide.ClientID')", that won't give you a reference to the element. The ClientID is a server side property for the control, it won't work in client script, and certainly not when it's just part of a string, not even code.

You can use the class of the parent element to taret the link using the selector ".slide-btn-parent a", alternatively you can use the class of the link using the selector ".Modal", if that's not used anywhere else.

$(function() {
   $('.slide-btn-parent a').click(function(e) {
      $("#panel").slideToggle("slow");
      $(this).toggleClass("active");
      e.preventDefault();
   });
});

Open in new window