?
Solved

Rollover lists -  50% opacity, rollover = 100% visible

Posted on 2010-01-12
13
Medium Priority
?
1,029 Views
Last Modified: 2012-05-08
Hi experts,

First off, thank you in advance for anyone that is able to provide a little insight on this mater.

I have a 3 column UL with each LI containing titles, an image and a paragraph of text on my homepage. I am hoping to have these appear as shown in the sample image and then as the user rolls over the next LI the opacity changes to reflect the users hover state using jQuery.

This may be a little unclear so I've attached some sample images to help highlight what I am talking about.

The main goal though is that on page load, the first column is fully visible while the other columns are 50% transparent (or covered with a png with opacity) and then the user rolls over the next li to have the effect change to reveal that one.

I am also hoping to have this with fadein/fadeout effects.

I am sure this has been done before as I have seen it in several instances, I just can't find any support on achieving this.

The link to the site I am doing this on is http://www.nextcode.com.au/temptest/

Any help or suggestions on this would be greatly appreciated.

Richard.
sample.jpg
0
Comment
Question by:NextCode
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
13 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 26301034
0
 
LVL 10

Expert Comment

by:Terry_focus
ID: 26312799
Hi,

I did this using your id's and works in a test, you may want to alter it to your needs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
	li{
		height:100px;
		width:100px;
		background:red;
	}
</style>
<script type="text/javascript">
$(function(){
	 $("#layout-index-cols li").hover(function(){//One mouseover
	 	var $li = $(this);//Stored for later
	 	$li
		.parent()//Get the parent ul
		.find("li")//Find all sibling li's
		.removeClass("selected")//Remove selected indicator from all
		.stop()//Stop any current animations
		.fadeTo(200,1,function(){//Fade all back to 100%
			$li//When the animation has finished, go back out original li
			.addClass("selected")//Add out indictor class
			.parent()//Get the ul
			.find("li")//Get all the li's
			.not(".selected")//Not our selected ones
			.fadeTo(500,0.5);//Fade them out
		});
	 },
	 function(){//On mouse out
	 	$(this).parent().find("li")//Get sibling li's
		.stop()//Stop any running animations
		.removeClass("selected")//remove indicator class
		.fadeTo(200,1);//Fade back up to 100%
	 });
});
</script>
</head>
<body>
	<ul id="layout-index-cols">
		<li>Li 1</li>
		<li>Li 2</li>
		<li>Li 3</li>
	</ul>
</body>
</html>

Open in new window

0
 

Author Comment

by:NextCode
ID: 26313216
Hi Terry,

Thank you so much for your reply, that is almost 100% what I am trying to achieve and seems to be coded beautifully however there is one modification I am trying to make to that code with very little success.

I am trying to make the first LI 100% visible while leaving the other LI's dimmed out on page load.

Effectively my goal is to have LI (col 1) completely visible, all other LI's dimmed and at any point in time, only one LI is 100% visible.

I have been trying to do this myself but my jQuery skills are very weak I'm afraid.

Thank you so much for taking the time to knock this up for me, it was far more than I was expecting and the comments are a great help.

Thank you again.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 10

Accepted Solution

by:
Terry_focus earned 2000 total points
ID: 26313474
Hi,

I think I understand what you need. I have added a 'selected' to one li in the mark up and broke the rendering into a separate function so it can be called on the page load. Hope this helps
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
	li{
		height:100px;
		width:100px;
		background:red;
	}
</style>
<script type="text/javascript">
$(function(){
	 $("#layout-index-cols li").hover(function(){//One mouseover
	 	$(this)//Stored for later
	 	.addClass("selected")//Add our selector class
		.parent()//Get the parent ul
		.find("li")//Get our sibling li's
		.not(this)//but not this one
		.removeClass("selected")//Remove selected indicator from all others
		renderList();//render the list
	 });
	 renderList();//Render list on page load
});

function renderList(){
	$("#layout-index-cols li")//Look at our list items
	.stop()//Stop any animations
	.filter(".selected")//Get our selected one
	.fadeTo(10,1)//Set to full
	.end()//Go back to original selections
	.not(".selected")//Exclude selected
	.fadeTo(500,0.5);//Fade them out
}
</script>
</head>
<body>
	<ul id="layout-index-cols">
		<li class="selected">Li 1</li>
		<li>Li 2</li>
		<li>Li 3</li>
	</ul>
</body>
</html>

Open in new window

0
 
LVL 10

Expert Comment

by:Terry_focus
ID: 26313492
slight correction for completeness
$("#layout-index-cols li").hover(
//should read
$("#layout-index-cols li").mouseover(

Open in new window

0
 

Author Comment

by:NextCode
ID: 26313731
AWESOME!!!!

Thank you so much Terry, that is 100% what I was looking achieve and more importantly, I can see exactly how you've done it so hopefully I can learn a little from this.

Thank you again Terry, so much more than I was hoping for.

Best regards,
Richard.
0
 

Author Closing Comment

by:NextCode
ID: 31676395
Great support, easy to follow and most importantly, commented perfectly so I can learn from the solution provided.

Very much appreciated.
0
 

Author Comment

by:NextCode
ID: 26313760
Hi Terry,

I think I may have miss marked one of the radio buttons in the feedback box (not checked at all)... If this negatively affects you in any way, please let me know how I can resolve this as you deserve full marks for such a complete solution.

I apologise for the error and am happy to do whatever it takes to rectify this if it does negatively impact your status as a expert on this site.

Richard.
0
 
LVL 10

Expert Comment

by:Terry_focus
ID: 26313846
Richard,

All the points have gone through and I am glad you liked the solution. Like you said it's important for people to follow and I hope you'll come back with any other questions

Regards

Terry
0
 
LVL 10

Expert Comment

by:Terry_focus
ID: 26321543
Hi Richard,

Can you show me where you got your menu slider plugin? Another user needs something similar

Thanks
0
 

Author Comment

by:NextCode
ID: 26321933
Hi Terry,

It is a variant of the lavalamp plugin found here: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

I hope this helps you and the other person in need of your expertise.
0
 

Author Comment

by:NextCode
ID: 26321935
I can send you a basic menu using the script if it makes things easier for you?
0
 
LVL 10

Expert Comment

by:Terry_focus
ID: 26322017
Thanks for that Richard,

I would rather help them through so they can learn. What they describe is very close to what you have, so the link is fine.
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

771 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