Solved

Looking for hover triggered side flyout panel

Posted on 2009-05-13
3
2,231 Views
Last Modified: 2012-05-06
I have gone through google, jquery, and everything I know trying to find a script for a right to left flyout panel that is triggered on hover. I have found plenty of drop down panels but I don't know how to modify them to go right to tleft and to do it on hover.

I am creating a help section that sits on the right side of a lightbox popup. When they hover over a bar on the right side of the box it will flyin a panel containing help options.

I am already using jQuery so to stick with that would be nice.

Any help is appreciated!

Thanks!!!
0
Comment
Question by:the_hero
  • 2
3 Comments
 
LVL 12

Accepted Solution

by:
alien109 earned 500 total points
ID: 24377303
something like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<meta http-equiv="Content-Language" content="en-us" />
 

<title></title>
 

<style type="text/css">
 

#container {

	width:200px;

	height:200px;

	position:relative;

	overflow:hidden;

	background-color:#eee;

	border:1px solid #000;

}
 

#panel {

	position:absolute;

	left:180px;

	clear:both;

	width:200px;

}
 

#handle {

	width:20px;

	height:200px;

	background-color:#999;

	float:left;

	border-right:1px solid #000;

}
 

#content {

	background-color:#ccc;

	width:180px;

	height:200px;

	float:left;

}
 

</style>
 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

$(function() {

	$("#panel").hover(function() {

		$(this).stop().animate({left:"0px"}, 300);

	},

	function() {

		$(this).stop().animate({left:"180px"}, 300);

	});

});
 

</script>
 

</head>

<body>
 
 
 

<div id="container">

	<div id="panel">

		<div id="handle"></div>

		<div id="content"></div>

	</div>

</div>
 

</body>
 

</html>

Open in new window

0
 
LVL 1

Author Closing Comment

by:the_hero
ID: 31581171
Perfect! Thanks! I had to make one small adjustment. The one pixel border wasn't accounted for in the width of the panel which caused the float:left on its two child divs to stack instead of sitting side by side. So increasing that to 201px fixed it.

Thanks again! Genius!
0
 
LVL 1

Author Comment

by:the_hero
ID: 24378407
Good to see you again!

I had to make one small adjustment. The one pixel border wasn't accounted for in the width of the panel which caused the float:left on its two child divs to stack instead of sitting side by side. So increasing that to 201px fixed it. Great script!
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now