Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jan 2010
    Posts
    35
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Post Smooth Navigation Menu

    Right now, I am trying to figure out how to get this affect. I want to start out with four thumbnails with different images in them, as shown in this image:
    http://gds.parkland.edu/student/fall...sh-initial.jpg

    Then, I want the thumbnails to all expand at once to a designated length as I hover over each thumbnail. For each of the corresponding images being hovered over, the images in the other thumbnails will change images. For example, the second thumbnail (the closest one to the top on the right side) will be hovered, all of the images will then change to a specific background to the corresponding thumbnail I pick once I create the images.
    http://gds.parkland.edu/student/fall...edoverlink.jpg

    Here is what I have so far.
    http://abrielshipley.com

    I am still messing with it a bit.

    If anyone needs further explanation, please let me know!

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,791
    Thanks
    8
    Thanked 131 Times in 129 Posts
    well this is a start. it's a little jerky. i think the stop() s need to be re-looked at as the animating can get jerky if you mouse through them to quickly. Maybe someone else can give that a try.

    Code:
    <!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=ISO-8859-1" />
    <title>box do-hicky</title>
    <style type="text/css">
    body{
    font: normal 12px/18px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
    color: #333;
    padding: 0;
    margin: 0;
    }
    
    .box1, .box2, .box3, .box4 {
    position: absolute;
    width: 140px;
    height: 140px;
    }
    
    
    .box1 {
    background-color: #de9;
    top: 20px;
    left: 200px;
    }
    
    .box2 {
    background-color: #36c;
    top: 180px;
    left: 600px;
    }
    
    .box3 {
    background-color: #ed3;
    top: 340px;
    left: 200px;
    }
    
    .box4 {
    background-color: #6dd;
    top: 500px;
    left: 600px;
    }
    
    </style>
    
    </head>
    <body>
    <div class="box box1"><div></div></div>
    <div class="box box2"><div></div></div>
    <div class="box box3"><div></div></div>
    <div class="box box4"><div></div></div>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    
    <script type="text/javascript">
    /* functions */
    $(function() {
    	$('.box').each(function() {
    		var $this = $(this);
    		$.data(this, 'css', { 
    			top: $this.css('top'), 
    			left: $this.css('left'),
    			width: $this.css('width'),
    			background: $this.css('background-color') 
    		});
    	});
    });
    
    function restore() {
    	$('.box').each(function() {
    		var orig = $.data(this, 'css');
    		$(this).animate({
    			top: orig.top, 
    			left: orig.left, 
    			width: orig.width, 
    			backgroundColor: orig.background
    		});
    	});
    }
    
    /* box 1 */
    function boxHover(){
    		$('.box1').stop().animate({'top' : '20px', 'left' : '100px', 'width' : '600px'});
    		$('.box2').stop().animate({'top' : '180px', 'left' : '100px', 'width' : '600px'});
    		$('.box3').stop().animate({'top' : '340px', 'left' : '100px', 'width' : '600px'});
    		$('.box4').stop().animate({'top' : '500px', 'left' : '100px', 'width' : '600px'});
    }
    
    function box1master(){
    		$('.box').animate({backgroundColor: '#de9'});
    }
    function box2master(){
    		$('.box').animate({backgroundColor: '#36c'});
    }
    function box3master(){
    		$('.box').animate({backgroundColor: '#ed3'});
    }
    function box4master(){
    		$('.box').animate({backgroundColor: '#6dd'});
    }
    
    
    $(document).ready(function(){
    
    	$('.box1').hover(function(){
    		boxHover();
    		box1master();
    	}, function(){ 		
    		restore();
    	});
    	
    	$('.box2').hover(function(){
    		boxHover();
    		box2master();		
    	}, function(){ 		
    		restore();
    	});
    	
    	$('.box3').hover(function(){
    		boxHover();
    		box3master();
    	}, function(){ 		
    		restore();
    	});
    
    	$('.box4').hover(function(){
    		boxHover();
    		box4master();
    	}, function(){ 		
    		restore();
    	});
    
    });
    </script>
    </body>
    </html>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New Coder
    Join Date
    Jan 2010
    Posts
    35
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Thumbs up

    I will definitely retake a look at the stop() function (and if someone else would like to help fix that little glitch). Otherwise, it seems to work exactly the way I want it to! I never would've thought about using divs!

    I was wondering if I could simply take this and center it within a div? Also, for replacing the images, I believe I have to go within each boxmaster() function to change each box?

    I haven't experimented very much with JQuery but it has been really easy for me to pick up thus far.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,791
    Thanks
    8
    Thanked 131 Times in 129 Posts
    okay, this works better

    Code:
    <!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=ISO-8859-1" />
    <title>box do-hicky</title>
    <style type="text/css">
    body{
    font: normal 12px/18px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
    color: #333;
    padding: 0;
    margin: 0;
    text-align: center;
    }
    
    #container {
    width: 600px;
    border: 1px solid #ddd;
    position: relative;
    margin: 20px auto;
    text-align: left;
    overflow: hidden;
    }
    
    .box1, .box2, .box3, .box4 {
    width: 140px;
    height: 140px;
    }
    
    .box1 {
    background-color: #de9;
    margin-bottom: 20px;
    float: left;
    clear: both;
    }
    
    .box2 {
    background-color: #36c;
    margin-bottom: 20px;
    float: right;
    clear: both;
    }
    
    .box3 {
    background-color: #ed3;
    margin-bottom: 20px;
    float: left;
    clear: both;
    }
    
    .box4 {
    background-color: #6dd;
    float: right;
    clear: both;
    }
    
    </style>
    
    </head>
    <body>
    
    <div id="container">
    	<div class="box box1"><div></div></div>
    	<div class="box box2"><div></div></div>
    	<div class="box box3"><div></div></div>
    	<div class="box box4"><div></div></div>
    </div>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    
    <script type="text/javascript">
    /* functions */
    $(function() {
    	$('.box').each(function() {
    		var $this = $(this);
    		$.data(this, 'css', { 
    			width: $this.css('width'),
    			background: $this.css('background-color') 
    		});
    	});
    });
    
    function restore() {
    	$('.box').each(function() {
    		var orig = $.data(this, 'css');
    		$(this).animate({
    			width: orig.width
    		},{queue:false});
    		$(this).css({backgroundColor: orig.background});
    	});
    }
    
    /* box 1 */
    function boxHover(){
    		$('.box').stop().animate({'width' : '600px'},{queue:false});
    }
    
    function box1master(){
    		$('.box').css({backgroundColor: '#de9'});
    }
    function box2master(){
    		$('.box').css({backgroundColor: '#36c'});
    }
    function box3master(){
    		$('.box').css({backgroundColor: '#ed3'});
    }
    function box4master(){
    		$('.box').css({backgroundColor: '#6dd'});
    }
    
    
    $(document).ready(function(){
    
    	$('.box1').hover(function(){
    		boxHover();
    		box1master();
    	}, function(){ 		
    		restore();
    	});
    	
    	$('.box2').hover(function(){
    		boxHover();
    		box2master();		
    	}, function(){ 		
    		restore();
    	});
    	
    	$('.box3').hover(function(){
    		boxHover();
    		box3master();
    	}, function(){ 		
    		restore();
    	});
    
    	$('.box4').hover(function(){
    		boxHover();
    		box4master();
    	}, function(){ 		
    		restore();
    	});
    
    });
    </script>
    </body>
    </html>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    Abbster22 (10-07-2010)

  • #5
    New Coder
    Join Date
    Jan 2010
    Posts
    35
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you so much for all the help you've been giving me!

    I've been messing with the previous code you gave me and it's been working great so far! My only issue is when I try to get the images to change, they don't change back to the original background and the top picture when scrolled on top disappears. Here is what I've gotten so far:
    www.abrielshipley.com/template/index4

    How can I apply the changes to the code in what I have right now?

    I removed the old file that I was messing with, which is now at
    www.abrielshipley.com/demo

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,791
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Here's the changes I made:

    removed:
    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    That was used for animating the color background transitions and it's not need this time around.


    i changed:
    Code:
    function restore() {
    	$('.box').each(function() {
    		var orig = $.data(this, 'css');
    		$(this).animate({
    			left: orig.left, 
    			width: orig.width, 
    			background: orig.background
    		});
    	});
    }
    to this:
    Code:
    function restore() {
    	$('.box').each(function() {
    		var orig = $.data(this, 'css');
    		$(this).animate({
    			left: orig.left, 
    			width: orig.width
    		});
    		$(this).css({background: orig.background});
    	});
    }
    Notice how the background-image was inside the animate function. It can't animate images like that. That's why the images were not changing back.

    Changed:
    Code:
    function boxHover(){
    		$('.box1').stop().animate({'width' : '596px'});
    		$('.box2').stop().animate({'left' : '0px', 'width' : '596px'});
    		$('.box3').stop().animate({'width' : '596px'});
    		$('.box4').stop().animate({'left' : '0px', 'width' : '596px'});
    }
    to:
    Code:
    function boxHover(){
    		$('.box1').stop().animate({'left' : '0px', 'width' : '596px'},{queue:false});
    		$('.box2').stop().animate({'left' : '0px', 'width' : '596px'},{queue:false});
    		$('.box3').stop().animate({'width' : '596px'},{queue:false});
    		$('.box4').stop().animate({'left' : '0px', 'width' : '596px'},{queue:false});
    }
    the "queue: false" I just learned today actually It clears the animating queue so that quickly rolling back and forth doesn't leave your divs sliding after you stop.

    And this part took me a minute. The first image disappearing.

    in your CSS you have:
    Code:
    .box1 {
    background-image: url(images/zatgun-link.jpg);
    /*top: 20px;
    left: 200px;*/
    }
    in your function you had:
    Code:
    function box1master(){
    		$('.box1').css({'background-image' : 'url(images/zatgun_link.jpg)'});
    		$('.box2').css({'background-image' : 'url(images/zatgun_midtop.jpg)'});
    		$('.box3').css({'background-image' : 'url(images/zatgun_midbottom.jpg)'});
    		$('.box4').css({'background-image' : 'url(images/zatgun_bottom.jpg)'});
    }
    I totally missed this. You have an underscore in the image name where as the CSS is calling the image with a hyphen.

    So it's been changed to:
    Code:
    function box1master(){
    		$('.box1').css({'background-image' : 'url(images/zatgun-link.jpg)'});
    		$('.box2').css({'background-image' : 'url(images/zatgun_midtop.jpg)'});
    		$('.box3').css({'background-image' : 'url(images/zatgun_midbottom.jpg)'});
    		$('.box4').css({'background-image' : 'url(images/zatgun_bottom.jpg)'});
    }
    so here's those edits to your page:

    Code:
    <!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=ISO-8859-1" />
    <title>box do-hicky</title>
    <base href="http://www.abrielshipley.com/template/" />
    <link href="reset.css" rel="stylesheet" type="text/css" />
    <link href="font.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body{
    font: normal 12px/18px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
    color: #333;
    padding: 0;
    margin: 0;
    }
    
    #navigation {
    	width: 596px;
    	height: 460px;
    	margin: 0 auto;
    }
    
    .box1, .box2, .box3, .box4 {
    position: relative;
    width: 85px;
    height: 66px;
    margin-bottom: 66px;
    }
    
    
    .box1 {
    background-image: url(images/zatgun-link.jpg);
    /*top: 20px;
    left: 200px;*/
    }
    
    .box2 {
    background-image: url(images/bryan_link.jpg);
    /*margin-top: 85px;*/
    left: 511px;
    }
    
    .box3 {
    background-image: url(images/galleries_link.jpg);
    /*margin-top: 170px;
    left: 200px;*/
    }
    
    .box4 {
    background-image: url(images/contact_link.jpg);
    left: 511px;
    /*margin-top: 170px;
    margin-left: 511px;*/
    }
    
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="navigation">
    <div class="box box1"><div></div></div>
    <div class="box box2"><div></div></div>
    <div class="box box3"><div></div></div>
    
    <div class="box box4"><div></div></div>
    </div>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    
    <script type="text/javascript">
    /* functions */
    $(function() {
    	$('.box').each(function() {
    		var $this = $(this);
    		$.data(this, 'css', {  
    			left: $this.css('left'),
    			width: $this.css('width'),
    			background: $this.css('background-image') 
    		});
    	});
    });
    
    function restore() {
    	$('.box').each(function() {
    		var orig = $.data(this, 'css');
    		$(this).animate({
    			left: orig.left, 
    			width: orig.width
    		});
    		$(this).css({background: orig.background});
    	});
    }
    
    /* box 1 */
    function boxHover(){
    		$('.box1').stop().animate({'left' : '0px', 'width' : '596px'},{queue:false});
    		$('.box2').stop().animate({'left' : '0px', 'width' : '596px'},{queue:false});
    		$('.box3').stop().animate({'width' : '596px'},{queue:false});
    		$('.box4').stop().animate({'left' : '0px', 'width' : '596px'},{queue:false});
    }
    
    function box1master(){
    		$('.box1').css({'background-image' : 'url(images/zatgun-link.jpg)'});
    		$('.box2').css({'background-image' : 'url(images/zatgun_midtop.jpg)'});
    		$('.box3').css({'background-image' : 'url(images/zatgun_midbottom.jpg)'});
    		$('.box4').css({'background-image' : 'url(images/zatgun_bottom.jpg)'});
    }
    function box2master(){
    		$('.box1').css({'background-image' : 'url(images/bryan_top.jpg)'});
    		$('.box2').css({'background-image' : 'url(images/bryan_link.jpg)'});
    		$('.box3').css({'background-image' : 'url(images/bryan_midbottom.jpg)'});
    		$('.box4').css({'background-image' : 'url(images/bryan_bottom.jpg)'});
    }
    function box3master(){
    		$('.box1').css({'background-image' : 'url(images/galleries_top.jpg)'});
    		$('.box2').css({'background-image' : 'url(images/galleries_midtop.jpg)'});
    		$('.box3').css({'background-image' : 'url(images/galleries_link.jpg)'});
    		$('.box4').css({'background-image' : 'url(images/galleries_bottom.jpg)'});
    }
    function box4master(){
    		$('.box1').css({'background-image' : 'url(images/contact_top.jpg)'});
    		$('.box2').css({'background-image' : 'url(images/contact_midtop.jpg)'});
    		$('.box3').css({'background-image' : 'url(images/contact_midbottom.jpg)'});
    		$('.box4').css({'background-image' : 'url(images/contact_link.jpg)'});
    }
    
    $(document).ready(function(){
    
    	$('.box1').hover(function(){
    		boxHover();
    		box1master();
    	}, function(){ 		
    		restore();
    	});
    	
    	$('.box2').hover(function(){
    		boxHover();
    		box2master();		
    	}, function(){ 		
    		restore();
    	});
    	
    	$('.box3').hover(function(){
    		boxHover();
    		box3master();
    	}, function(){ 		
    		restore();
    	});
    
    	$('.box4').hover(function(){
    		boxHover();
    		box4master();
    	}, function(){ 		
    		restore();
    	});
    	
    });
    </script>
    </body>
    </html>
    p.s. your link is wrong, you forgot the ".html" so it should be:

    http://www.abrielshipley.com/template/index4.html

    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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