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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

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
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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
Steve KrileCommented:
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

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
MutsopAuthor Commented:
Well it works like a charm thanks
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
CSS

From novice to tech pro — start learning today.