div expand with jquery

Hi,

I'm kind of stuck with jquery for the moment.

I'm trying to get my div to expand when some I click on a blockdiv...which works, but!
When I click it it expands but jumps after a while, so it loses it smoothness :)

Also what I would like is the div to hover above the website So website doesnt lower itself.

Can someone help me on this?

Also as you may notice in my css code I have an image of like 20px height.
How can I make sure when the button is not clicked it stays at the very top of the browser and moves down with div?

Here is my code


ASP:
-----------------------------------

<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="css/style.css"  rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript"> 
        $(document).ready(function(){
        	
	        $(".user").hide();
         
	        $("h2.login_button").toggle(function(){
		        $(this).addClass("active"); 
		        }, function () {
		        $(this).removeClass("active");
	        });
        	
	        $("h2.login_button").click(function(){
		        $(this).next(".user").slideToggle("slow,");
	        });
         
        });
    </script>  
</head>
<body>    
    <form id="form1" runat="server">
    <div>
        <div id="wrapper">
            <div id="header">
            <h2 class="login_button"><a href="#">Login</a></h2>
                <div class="user">
                <div class="block">
                    TEST<br />
                    test<br />
                    test
                    <asp:ContentPlaceHolder ID="UserPlaceHolder" runat="server">
                            
                    </asp:ContentPlaceHolder>
                </div>
                </div>
                
                <div id="logo">Escopia</div>
            </div>
            <div id="content">
            .............

CSS:
-----------------------------------

#header {background: url(../images/top_bar.jpg) no-repeat #212121;}
#logo { float:left; padding:0; margin:0; width:250px; font:bold 55px Veranda;}
.user {overflow: hidden; clear:both; margin: 0; padding: 0;}

Open in new window

LVL 3
MutsopAsked:
Who is Participating?
 
Steve KrileConnect With a Mentor Commented:
I've made some tweaks.  I added a new style rule that hides your .user class by default (display:none;) and changed the reference to the user in your jquery to access it directly - you were using .next() syntax that I don't think would work.  I changed it to div.user.


<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

	<style>
#wrapper {margin:0 auto; width:900px; overflow: hidden; background-color: #212121;}

/* HEADER */
#header {overflow: hidden;}
.user {overflow: hidden; clear:both; margin: 0; padding: 0;display:none;color:#fff;}
.user p {padding: 10px;}
.top_bar {height: 30px; background: url(../images/top_bar.jpg) no-repeat #212121;}
#logo {float: left; width: 250px;}

.login_button {float: right; margin: -25px 0 0 0; background-color: #ed1bba; width:100px; height: 40px; line-height: 40px;}
.login_button a {display: block; text-decoration: none; color: #fff;}

	</style>
</head>
        <div id="wrapper">
            <div id="header">
                <div class="user">
                    <p>User login</p>
                    <asp:ContentPlaceHolder ID="UserPlaceHolder" runat="server">

                    </asp:ContentPlaceHolder>
                </div>
                <div class="top_bar"></div>
                <h2 class="login_button"><a href="#">Login</a></h2>
                <div id="logo">Escopia</div>
            </div>

	<SCRIPT type="text/javascript">


	       // $("h2.login_button").toggle(function(){
		   //     $(this).addClass("active");
		   //     }, function () {
		   //     $(this).removeClass("active");
	       // });

	       $(document).ready(function(){
				$("h2.login_button").click(function(){
					$("div.user").slideToggle("slow,");
				});
			});



	</SCRIPT>


</body></html>

Open in new window

0
 
mayne171Commented:
So it jumps after a while? What do you mean? Are you crazily making it grow and shrink? Or just a random open and close it will lose its "smoothness"?

0
 
MutsopAuthor Commented:
Well if you click on the expand button it smoothly opens up the div for like 50px, and the last 20px or so it jumps to the end.
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
mayne171Commented:
Well obviously your slidetoggle works initially but sounds like then another function/action is being called. I have seen some really corky things with jQuery where functions fire prematurely for some reason. Try putting your .next(.user) as a callback function to slidetoggle and see if same thing happens (hey, sometimes I have to do this).

Sorry not much help, unless able to get my hands dirty...I can only give bro-telligence.
0
 
Steve KrileCommented:
Well, you didn't give me all the style info I needed, but I think I have a fix on what your issue is.  I've noticed the the slideToggle gets jumpy if things are "relatively" positioned.  Also, if you want the login to go "over" other content is MUST be absolutely positioned.  So, I've mocked up a working example.  It's likely you will have to adapt it a bit, but the key points are to position your header ABSOLUTELY.

You can put it in a relatively positioned element if things are supposed to float around, but for smooth sliding and overlap, absolute is the only way to go.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript"></script>

<style>
	#header {background: url(../images/top_bar.jpg) no-repeat #212121;position:absolute;z-index:100;clear:both;}
	#logo { float:left; padding:0; margin:0; width:250px; font:bold 55px Veranda;}
	.user {overflow: hidden; clear:both; margin: 0; padding: 0;}
</style>

</head>


<body>

    <div>
        <div id="wrapper">
            <div id="header">
            	<h2 class="login_button"><a href="#">Login</a></h2>
                <div class="user">
					<div class="block">
						TEST<br />
						test<br />
						test
						<asp:ContentPlaceHolder ID="UserPlaceHolder" runat="server">

						</asp:ContentPlaceHolder>
					</div>
                </div>

                <div id="logo">Escopia</div>
            </div>
            <div id="content" style="clear:both;top:150px;position:absolute;">
            	This is my real site content
            </div>
        </div>
    </div>
</body>

<script>

	$(document).ready(function(){
	$(".user").hide();

		        $("h2.login_button").toggle(function(){
			        $(this).addClass("active");
			        }, function () {
			        $(this).removeClass("active");
		        });

		        $("h2.login_button").click(function(){
			        $(this).next(".user").slideToggle("slow,");
		        });

		});



</script>

</html>

Open in new window

0
 
MutsopAuthor Commented:
Okay this works perfectly...
But to fix my other problems I had to put the toggle button underneath the user div.

The problem is that the script doesn't work.
It only works when the toggle div is set above the user div (not the way around).

How can this be fixed without changing the position?
0
 
Steve KrileCommented:
Can you post the portion of you HTML and style rule and jquery that is not working?
0
 
MutsopAuthor Commented:
I still need to add teh position absolute thing though
but I'm still testing out other code before :)

there you go:
HTML
-------------------------
    <link href="css/style.css"  rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript"> 
        $(document).ready(function(){
        	
	        //$(".user").hide();
         
	        $("h2.login_button").toggle(function(){
		        $(this).addClass("active"); 
		        }, function () {
		        $(this).removeClass("active");
	        });
        	
	        $("h2.login_button").click(function(){
		        $(this).next(".user").slideToggle("slow,");
	        });
         
        });
    </script>  
</head>
<body>    
    <form id="form1" runat="server">
        <div id="wrapper">
            <div id="header">
                <div class="user">
                    <p>User login</p>
                    <asp:ContentPlaceHolder ID="UserPlaceHolder" runat="server">
                            
                    </asp:ContentPlaceHolder>
                </div>
                <div class="top_bar"></div>
                <h2 class="login_button"><a href="#">Login</a></h2>
                <div id="logo">Escopia</div>
            </div>
 
-------------------------
CSS
-------------------------
#wrapper {margin:0 auto; width:900px; overflow: hidden; background-color: #212121;}

/* HEADER */
#header {overflow: hidden;}
.user {overflow: hidden; clear:both; margin: 0; padding: 0;}
.user p {padding: 10px;}
.top_bar {height: 30px; background: url(../images/top_bar.jpg) no-repeat #212121;}
#logo {float: left; width: 250px;}

.login_button {float: right; margin: -25px 0 0 0; background-color: #ed1bba; width:100px; height: 40px; line-height: 40px;}
.login_button a {display: block; text-decoration: none; color: #fff;}

Open in new window

0
 
Shinesh PremrajanEngineering ManagerCommented:
Give a try on these

hope this helps
$(this).next(".user").fadesliderToggle({
    speed:300,
    easing : "swing"
  })

Open in new window

0
 
Shinesh PremrajanEngineering ManagerCommented:
also you can try this the 900 can be replaced with any numerals suiting you

 $(this).next(".user").slideToggle("900,");

Hope this helps
0
 
MutsopAuthor Commented:
Hey shinug, thanks for the reply,
But there is another problem I was talking about.

quote :"Okay this works perfectly...
But to fix my other problems I had to put the toggle button underneath the user div.

The problem is that the script doesn't work.
It only works when the toggle div is set above the user div (not the way around).

How can this be fixed without changing the position?"
0
 
MutsopAuthor Commented:
Well it works like a charm thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.