Duplicate Jquery functionality

Hey Experts!!

I want to duplicate the menu functionality found here:  http://rdsrc.us/oRS0rE

I've searched through Jquery plugins, but I can't seem to find any plugin that will work. I thought the Jquery ScrollTo plugin would work, but it doesn't support the fade.  

Any suggestions?
LVL 30
LZ1Asked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
This was the code I meant
$(document).ready(function() {
	
	
	
	var section;
	var $navholder = $('ul#nav li a');
	var $slideholder = $('#slideholder');
	var sliderStarted = false;

	// detect address change
	$.address.change(function(event) {
		pathNames = $.address.pathNames();
		section = pathNames[0];
		if (section == undefined) {
			section = "home";
		}
		changeSlide(section);		
    });
	
	
	// initiate slider fuction
	function iSlide(initialSlide) {
		$slideholder.cycle({
			fx: 'fade',
			speed: 700,
			timeout: 0,
		    delay: -700,
			before: function() { sliderStarted = true; },
			startingSlide: initialSlide
		});
	};
	
	// pick slide/page
	function changeSlide (section) {
		
		switch (section) {
			
			case 'home':
			  	if (sliderStarted == false) {
					iSlide("0");
					$('#home').hide();
					writeHomeFlash();
					setTimeout('showInitialDialog()', 6000);
				} else {
					$('#homeflash').hide();
					$('#home').show();
					$slideholder.cycle(0);
				}
				$navholder.removeClass('active');
				$('#nav-home a').addClass('active');
				dcsMultiTrack('DCS.dcsuri','ChooseDeVry: Home','WT.ti','ChooseDeVry: Home');
			  break;
			
			case 'whydevry':
			  	if (sliderStarted == false) {
					iSlide("1");
				} else {
					$slideholder.cycle(1);
				}
				$navholder.removeClass('active');
				$('#nav-whydevry a').addClass('active');
				dcsMultiTrack('DCS.dcsuri','ChooseDeVry: Why DeVry','WT.ti','ChooseDeVry: Why DeVry');			  	
			  break;
			
			case 'programs':
			  	if (sliderStarted == false) {
					iSlide("2");
				} else {
					$slideholder.cycle(2);
				}
			   	$navholder.removeClass('active');
				$('#nav-programs a').addClass('active');
				dcsMultiTrack('DCS.dcsuri','ChooseDeVry: Programs','WT.ti','ChooseDeVry: Programs');
			  break;
			
			case 'locations':
			  	if (sliderStarted == false) {
					iSlide("3");
				} else {
					$slideholder.cycle(3);
				}
				$navholder.removeClass('active');
				$('#nav-locations a').addClass('active');
				dcsMultiTrack('DCS.dcsuri','ChooseDeVry: Locations','WT.ti','ChooseDeVry: Locations');
			  break;
			
			case 'onlineoptions':
			  	if (sliderStarted == false) {
					iSlide("4");
				} else {
					$slideholder.cycle(4);
				}
				$navholder.removeClass('active');
				$('#nav-onlineoptions a').addClass('active');
				dcsMultiTrack('DCS.dcsuri','ChooseDeVry: Online Options','WT.ti','ChooseDeVry: Online Options');
			  break;
			
			case 'financialaid':
			  	if (sliderStarted == false) {
					iSlide("5");
				} else {
					$slideholder.cycle(5);
				}
				$navholder.removeClass('active');
				$('#nav-financialaid a').addClass('active');
				dcsMultiTrack('DCS.dcsuri','ChooseDeVry: Financial Aid','WT.ti','ChooseDeVry: Financial Aid');
			  break;
			
			default:
			  return;
		}
	}; // end changeSlide

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
All the jQuery needed is in the second half of

http://www.devry.edu/choose-devry/js/choosedevry.js
0
 
LZ1Author Commented:
@mplungian: Could you be a little more specific?  Not sure which section you mean.  I'm still learning javascript and jquery myself.
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Michel PlungjanIT ExpertCommented:
Tomorrow
0
 
Bhavesh ShahLead AnalysistCommented:
Hi,

can you explain more about your requirement..?

- Bhavesh
0
 
Michel PlungjanIT ExpertCommented:
Oops will look later
0
 
LZ1Author Commented:
Basically I've almost got it now.  Except for the fact that the background image is expanding.  All I want it to do is fade in and out with each AJAX call.  Hopefully we can just modify the existing script because I've put a lot of time into it thus far and it's almost working exactly how I want it.

The page I'm working with is below:
http://rdsrc.us/5QaExp
0
 
LZ1Author Commented:
I'm tempted to open a new question, but I'll attempt to salvage this one.  Since I've already gotten the Jquery code I'm going to use, the sample code above does me no good.  

However, I have one last problem.  When the background image is changing, it will show the previous background image and then just pop in the new one.  If you see it in action, you'll understand a little more.

http://rdsrc.us/ohFy1f 

I think it has to do with preloading the images, but I'm not sure.  
0
 
Maximus5684Connect With a Mentor Commented:
It looks like there are a couple of problems here. One is that, when the page loads, a second #slide-container div is being created inside the first #slide-container div so the jQuery doesn't know which one to act upon. Open the site with FireBug or Chrome Dev Tools and inspect the slide image to see what I'm talking about. I'm assuming it's because you have an extra <div> tag around each of the ajax-loaded HTML snippets.

Second, the hideLoader() function isn't being called by anything. I'd guess that "popping" animation is being done in place of that function actually being run.

Finally, this doesn't need to be so complicated. I would suggest using the code suggested above rather than trying to fix the code you've implemented.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.