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

LVL 1
doramail05Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Göran AnderssonCommented:
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.
0
safiintCommented:
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

0
doramail05Author Commented:
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.. >
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

safiintCommented:
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
0
Göran AnderssonCommented:
Just remove class="active" from the div with id="panel" to make it hidden from start.

The article is using an anchor tag with a background image as button:

<a href="#" class="btn-slide">Slide Panel</a>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
doramail05Author Commented:
missing the btnslide class and the image to linkbutton i guess
0
safiintCommented:
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...
0
doramail05Author Commented:
removed class="active" from div panel, but it still firstly load up the panel b4 clicking the button.
0
safiintCommented:
just add this attribute to the div:

style="display:none;"
0
Göran AnderssonCommented:
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

0
doramail05Author Commented:
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

0
safiintCommented:
you have to add folder with name: images
and put the images in this folder
0
doramail05Author Commented:
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
0
safiintCommented:
the folder images, you have to create it in this path:
App_Themes\Modal\

I mean in the same place with css files
0
doramail05Author Commented:
with this help :
<a href="#" class="btn-slide">Slide Panel</a>
0
Göran AnderssonCommented:
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

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.