SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    May 2009
    Location
    Los Angeles
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery .slideToggle Issue

    Hi All,

    I'm new to jquery and love it. I've been using it wherever I can.

    Recently I've been using a .slideToggle script to show big images when thumbnails are clicked.

    However, the <div> that is revealed does not Toggle Up when multiple thumbs are clicked, so I'm left with a bunch of open <div>s on the page.

    I'm not sure what to do -- I think it has something to do with the siblings of the class "largeexamples" but I'm not sure. I've also been reading about eq, but I'm not there yet.

    Thank you all in advance.
    Max.

    live:
    ianscheller.com/thumbnail-menu/example-index.html

    Code:
    	<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
    
    	<script src="js/jquery.corner.js" type="text/javascript"></script>
    	
    	<script type="text/javascript">
    		$(document).ready(function() {
    		
    		// rounded corner jquery
    		$("#examplethumbscontainer").corner("rounded 12px");
    		$(".thumbexampleonea").corner("rounded 12px");
    		$(".thumbexampleoneb").corner("rounded 12px");
    		$(".thumbexampleonec").corner("rounded 12px");
    		$(".thumbexampleoned").corner("rounded 12px");
    		$(".thumbexampleonee").corner("rounded 12px");
    		$(".thumbexampleonef").corner("rounded 12px");			
    		
    		// set 1, example 1
    		
    		$('.thumbexampleonea').hide();
    		$('a#showthumbexampleonea').click(function() {
    		$('.thumbexampleonea').slideToggle('slow');
    		return false;
    		});
    		
    		// set 1, example 2
    		$('.thumbexampleoneb').hide();
    		$('a#showthumbexampleoneb').click(function() {
    		$('.thumbexampleoneb').slideToggle('slow');
    		return false;
    		});
    		
    		// set 1, example 3
    		$('.thumbexampleonec').hide();
    		$('a#showthumbexampleonec').click(function() {
    		$('.thumbexampleonec').slideToggle('slow');
    		return false;
    		});
    		
    		// set 1, example 4
    		$('.thumbexampleoned').hide();	
    		$('a#showthumbexampleoned').click(function() {
    		$('.thumbexampleoned').slideToggle('slow');
    		return false;
    		});
    		
    		// set 1, example 5
    		$('.thumbexampleonee').hide();
    		$('a#showthumbexampleonee').click(function() {
    		$('.thumbexampleonee').slideToggle('slow');
    		return false;
    		});
    		
    		// set 1, example 6
    		$('.thumbexampleonef').hide();
    		$('a#showthumbexampleonef').click(function() {
    		$('.thumbexampleonef').slideToggle('slow');
    		return false;
    		});
    	
    		});
    	</script>
    	
    	<style type="text/css">
    	
    	body{background-color: #fff; font-family: Tahoma; padding: 0em; margin: 0em;}
    	
    	img{border: none;}
    	
    	a {border: none; outline: none; text-decoration: none;}
    	a:link{border: none; outline: none; text-decoration: none;}
    	a:visited{border: none; outline: none; text-decoration: none;}
    	a:hover{border: none; outline: none; text-decoration: none;}
    	
    	h1{border: none; font-size: 3.5em; font-weight: normal; letter-spacing: normal; margin: 0em; padding: 0em;}
    	h2{color: gray; font-size: 1.2em; font-weight: normal; margin: 0em; padding: 0em;}
    	h3{color: gray; font-size: 1em; font-weight: bold; margin: 1em 0em .5em 1.5em; padding: 0em;}
    
    	p {font-size: .9em; line-height: 1.2em; text-align: left;}
    	
    	.fullsize{border: none; margin: 5em auto 5em auto; padding: 0em auto 0em auto; width: 500px; height: 500px;}
    	
    	/*container one*/
    	#examplethumbscontainer{background-image: url('images/thumbcontainerbg.gif'); margin: 5em auto 1em auto; padding: 0em auto 0em auto; width: 910px; height: 170px;}
    	#examplethumbscontainer ul{border: none; margin: 0em auto 0em auto; padding: 0em; width: 900px; height: 100px;}
    	#examplethumbscontainer li{border: none; background: url('images/example-thumbs/thumb-drop-shadow.png') no-repeat 0 0; display: inline; float: left; line-height: 0em; list-style: none; padding: 4px 7px 18px 5px; margin: 0em 0em 0em .95em;  width: 120px; height: 90px;}
    	
    	.thumbexampleonea{border: none; background-color: gray; margin: 0em auto 1em auto; padding: 0em auto 0em auto; width: 910px; text-align: center;}
    	#showthumbexampleonea{border: none;}
    	
    	.thumbexampleoneb{border: none; background-color: gray; margin: 0em auto 1em auto; padding: 0em auto 0em auto; width: 910px; text-align: center;}
    	#showthumbexampleoneb{border: none;}
    	
    	.thumbexampleonec{border: none; background-color: gray; margin: 0em auto 1em auto; padding: 0em auto 0em auto; width: 910px; text-align: center;}
    	#showthumbexampleonec{border: none;}
    	
    	.thumbexampleoned{border: none; background-color: gray; margin: 0em auto 1em auto; padding: 0em auto 0em auto; width: 910px; text-align: center;}
    	#showthumbexampleoned{border: none;}
    	
    	.thumbexampleonee{border: none; background-color: gray; margin: 0em auto 1em auto; padding: 0em auto 0em auto; width: 910px; text-align: center;}
    	#showthumbexampleonee{border: none;}
    	
    	.thumbexampleonef{border: none; background-color: gray; margin: 0em auto 1em auto; padding: 0em auto 0em auto; width: 910px; text-align: center;}
    	#showthumbexampleonef{border: none;}
    	
    	</style>
    
    </head>
    
    <body>
    
    <div id="bigdiv">
    	
    	<!-- example container -->
    
    	
    	<div id="examplethumbscontainer">
    		<h3>Example Thumbs</h3>
    			<ul>
    				<li><a href="#" id="showthumbexampleonea"><img src="images/example-thumbs/1.jpg" alt="Image 1"></a></li>
    				<li><a href="#" id="showthumbexampleoneb"><img src="images/example-thumbs/2.jpg" alt="Image 2"></a></li>
    				<li><a href="#" id="showthumbexampleonec"><img src="images/example-thumbs/3.jpg" alt="Image 3"></a></li>
    				<li><a href="#" id="showthumbexampleoned"><img src="images/example-thumbs/4.jpg" alt="Image 4"></a></li>
    				<li><a href="#" id="showthumbexampleonee"><img src="images/example-thumbs/5.jpg" alt="Image 5"></a></li>
    
    				<li><a href="#" id="showthumbexampleonef"><img src="images/example-thumbs/6.jpg" alt="Image 6"></a></li>
    			</ul>
    	</div>
    	
    	<div class="largeexamples">
    		<div class="thumbexampleonea">
    		<img src="images/example-fullsize/1.jpg" alt="Image 1 Full Size" class="fullsize">
    		</div>
    		
    		<div class="thumbexampleoneb">
    		<img src="images/example-fullsize/2.jpg" alt="Image 2 Full Size" class="fullsize">
    
    		</div>
    		
    		<div class="thumbexampleonec">
    		<img src="images/example-fullsize/3.jpg" alt="Image 3 Full Size" class="fullsize">
    		</div>
    		
    		<div class="thumbexampleoned">
    		<img src="images/example-fullsize/4.jpg" alt="Image 4 Full Size" class="fullsize">
    		</div>
    		
    		<div class="thumbexampleonee">
    		<img src="images/example-fullsize/5.jpg" alt="Image 5 Full Size" class="fullsize">
    
    		</div>
    		
    		<div class="thumbexampleonef">
    		<img src="images/example-fullsize/6.jpg" alt="Image 6 Full Size" class="fullsize">
    		</div>
    	</div>
    	
    	<!-- end example container and example div -->
    
    </div>
    
    </body>
    </html>

  2. #2
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got rid of the js corners and replaced with the border radius for the more advanced browsers
    Code HTML4Strict:
    <!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>
    		<!-- Testing -->
    		<base href="http://ianscheller.com/thumbnail-menu/" />
     
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<meta name="keywords" content="" />
    		<meta name="description" content="" />
    		<title>Test Thumb Menu</title>
     
    		<link rel="stylesheet" href="portfolio-resume.css" media="screen" />
    		<style type="text/css">
    		<!--
    			html, body, div, h1, h2, h3, ul, li { 
    				margin: 0;
    				padding: 0;
    			}
    			body { 
    				background: #fff; 
    				font-family: Tahoma, sans-serif; 
    				letter-spacing: 0; 
    			}
    			img { 
    				border: none; 
    				vertical-align: bottom;
    			}
    			a {
    				outline: none; 
    				text-decoration: none;
    			}
    			li { list-style: none; }
    			h1, h2, h3 { font-weight: normal; }
    			h1 { font-size: 3.5em; }
    			h2, h3 { color: gray; }
    			h2 { font-size: 1.2em; }
    			h3 {
    				margin: 1em 0 .5em 1.5em;
    				font-size: 1em; 
    				font-weight: bold; 
    			}
    			p {
    				font-size: .9em; 
    				line-height: 1.2; 
    			}
    			.fullsize { 
    				margin: 5em auto; 
    				width: 500px; 
    				height: 500px;
    			}
    			#examplethumbscontainer {
    				background: url("images/thumbcontainerbg.gif"); 
    				margin: 5em auto 1em;
    				padding: 5px 0 0;
    				width: 910px; 
    				height: 165px;
    			}
    			#examplethumbscontainer, .largeexamples div {
    				-moz-border-radius: 12px;
    				-webkit-border-radius: 12px;
    				border-radius: 12px;
    			}
    			#examplethumbscontainer ul {
    				margin: 0 auto;
    				width: 900px; 
    				height: 100px;
    			}
    			#examplethumbscontainer li {
    				float: left; 
    				display: inline; 
    				margin-left: .95em;  
    				padding: 4px 7px 18px 5px; 
    				width: 120px; 
    				height: 90px;
    				background: url("images/example-thumbs/thumb-drop-shadow.png") no-repeat; 
    			}
    			.largeexamples div { 
    				display: none;
    				margin: 0 auto 1em; 
    				width: 910px;
    				background: gray; 
    				text-align: center;
    			}
    		-->
    		</style>
     
    		<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
    		<script type="text/javascript">
    		<!--
    			$(function() {
    				$("li a").click(function() {
    					var item = $(this).attr("id");
    					var replace = "." + item.replace("show","");
    					$(replace).slideToggle('slow');
    					$(".largeexamples div").not(replace).hide();
     
    					return false;
    				});
    			});
    		-->
    		</script>
    	</head>
     
    	<body>
     
    		<div id="examplethumbscontainer">
    			<h3>Example Thumbs</h3>
    			<ul>
    				<li><a href="#" id="showthumbexampleonea"><img src="images/example-thumbs/1.jpg" alt="Image 1" /></a></li>
    				<li><a href="#" id="showthumbexampleoneb"><img src="images/example-thumbs/2.jpg" alt="Image 2" /></a></li>
    				<li><a href="#" id="showthumbexampleonec"><img src="images/example-thumbs/3.jpg" alt="Image 3" /></a></li>
    				<li><a href="#" id="showthumbexampleoned"><img src="images/example-thumbs/4.jpg" alt="Image 4" /></a></li>
    				<li><a href="#" id="showthumbexampleonee"><img src="images/example-thumbs/5.jpg" alt="Image 5" /></a></li>
    				<li><a href="#" id="showthumbexampleonef"><img src="images/example-thumbs/6.jpg" alt="Image 6" /></a></li>
    			</ul>
    		</div>
     
    		<div class="largeexamples">
    			<div class="thumbexampleonea"><img src="images/example-fullsize/1.jpg" alt="Image 1 Full Size" class="fullsize" /></div>
    			<div class="thumbexampleoneb"><img src="images/example-fullsize/2.jpg" alt="Image 2 Full Size" class="fullsize" /></div>
    			<div class="thumbexampleonec"><img src="images/example-fullsize/3.jpg" alt="Image 3 Full Size" class="fullsize" /></div>
    			<div class="thumbexampleoned"><img src="images/example-fullsize/4.jpg" alt="Image 4 Full Size" class="fullsize" /></div>
    			<div class="thumbexampleonee"><img src="images/example-fullsize/5.jpg" alt="Image 5 Full Size" class="fullsize" /></div>
    			<div class="thumbexampleonef"><img src="images/example-fullsize/6.jpg" alt="Image 6 Full Size" class="fullsize" /></div>
    		</div>
     
    	</body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    May 2009
    Location
    Los Angeles
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Cooper,

    Thanks for your added help with the corners. I actually just solved this -- after reading jquery forums and posts for the past three days, I just came up with a really simple solution:

    I just tell jquery to close all the other <divs> once it has opened up the new one. A portion of the final code looks like this:

    $('a#showthumbexampleonea').click(function() {
    $('.thumbexampleonea').slideToggle('slow');
    $('.thumbexampleoneb').slideUp();
    $('.thumbexampleonec').slideUp();
    $('.thumbexampleoned').slideUp();
    $('.thumbexampleonee').slideUp();
    $('.thumbexampleonef').slideUp();
    return false;
    });

    It is a bit long winded, but for now it is working in FF, Safari and once Active X is allowed in IE 7, it is working there too!

    Now just need some more styling, and I'll be all set.

    MSolaris

  4. #4
    SitePoint Member
    Join Date
    May 2009
    Location
    Los Angeles
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Just demoed your code Cooper, and it is much more compact. In the long-winded version I worked out, the scroll does not completely remove, so the page does not jump with the removal and addition of the scroll bar. Just a lucky code on my part.

    Really appreciate your suggestion.

    Thanks!

  5. #5
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the scroll does not completely remove, so the page does not jump with the removal and addition of the scroll bar.
    Code CSS:
    html {
        margin: 0 0 1px;
        height: 100%;
    }
    Great Ref:
    http://visualjquery.com/
    Last edited by cooper.semantics; May 11, 2009 at 21:24.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •