Forums

blackbookdesign

Hi,
I am new to javascript and would like to get the menufader to reveal multiple divs

<script type=\"text/javascript\">
		$(document).ready(function(){
			//each click on a button will be intercepted
			$(\"#header div.button\").click(function(){
				
				//we store the reference here to avoid doing $(this) each time we need and spare some processing
				$clicked = $(this);
				
				// if the button is not already \"transformed\" AND is not animated
				if($clicked.css(\"opacity\") != \"1\" && $clicked.is(\":not(animated)\"))
				{
					//we animate it (remember the reference for optimisation ?)
					$clicked.animate({
						opacity: 1,
						borderWidth: 5
					}, 600 );
					
					//we \"calculate\" the id to shown (each button div MUST have a \"xx-button\" and the target div must have an id \"xx\" )
					//yet again the reference
					var idToLoad = $clicked.attr(\"id\").split('-');
					//we search trough the content for the visible div and we fade it out
					$(\"#content\").find(\"div:visible\").fadeOut(\"fast\", function(){
						//once the fade out is completed, we start to fade in the right div
						$(this).parent().find(\"#\"+idToLoad[0]).fadeIn();
					})
				}
				
				//we reset the other buttons to default style
				$clicked.siblings().animate({
					opacity: 0.5,
					borderWidth: 1
				}, 600 );
				
			});
		});
	</script>

Now it only make visible a div and not the childs\class of these last one.

If somebody has a clu that would lead me somewhere, ike a tutorial on multiple function for javascript, that would be awesome.

Cheers

blackbookdesign

oh maybe it's easier. It affects all inside divs to display none.
If it can only affect the top div and not the childs that would solve it.

blackbookdesign

well i guess i solved it. maybe a bit dirt but it works

if added:

$(this).parent().find(\"MYDIV\").fadeIn();

after this one

$(\"#content\").find(\"div:visible\").fadeOut(\"fast\", function(){
						//once the fade out is completed, we start to fade in the right div
						$(this).parent().find(\"#\"+idToLoad[0]).fadeIn();

If somebody as a better trick let me know :)

blackbookdesign

well all was going fine until I tested freaking IE. even 7 breaks on me.

Trying to figure things out again:P

here's my latest code. If somebody knows the trick let me know :)


<script type=\"text/javascript\">
		$(document).ready(function(){
			$(\"#menu .button\").click(function(){
				$clicked = $(this);
				if($clicked.css(\"opacity\") != \"1\" && $clicked.is(\":not(animated)\"))
				{$clicked.animate({opacity: 1}, 600 ); var idToLoad = $clicked.attr(\"id\").split('-');
					$(\"#content\").find(\"div:visible\").fadeOut(\"fast\", function(){
					$(this).parent().find(\"#\"+idToLoad[0]).fadeIn();
$(this).parent().find(\".entry\").fadeIn();$(this).parent().find(\"#cft\").fadeIn();$(this).parent().find(\".name\").fadeIn();$(this).parent().find(\".sellers\").fadeIn();$(this).parent().find(\".soundcloud\").fadeIn();$(this).parent().find(\".bpm\").fadeIn();$(this).parent().find(\".producers\").fadeIn();$(this).parent().find(\".commentsctf\").fadeIn();$(this).parent().find(\"#comment_name\").fadeIn();$(this).parent().find(\"small\").fadeIn();$(this).parent().find(\"#comment_info\").fadeIn();$(this).parent().find(\"ol\").fadeIn();$(this).parent().find(\"ol li\").fadeIn();$(this).parent().find(\"#comment_content\").fadeIn();$(this).parent().find(\"#comments_content\").fadeIn();$(this).parent().find(\"cite\").fadeIn();$(this).parent().find(\".title\").fadeIn();$(this).parent().find(\"#reply\").fadeIn();$(this).parent().find(\"#usercomments_md\").fadeIn();$(this).parent().find(\"#userinfos\").fadeIn();$(this).parent().find(\"#comments_content_container\").fadeIn();$(this).parent().find(\"#comments_content\").fadeIn();$(this).parent().find(\".view\").fadeIn();$(this).parent().find(\".viewtunes\").fadeIn();
					})
				}
				
				//we reset the other buttons to default style
				$clicked.siblings(\".bouton\").animate({
					opacity: 0.5
				}, 600 );
				
			});
		});
	</script>

ikthius

sorry no one has been here to help dude, but hopefully someone with jQuery knowledge can help

treehouse : what would you like to learn today?

Forums

MenuFader revealing multiple divs