• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 442
  • Last Modified:

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?
0
LZ1
Asked:
LZ1
2 Solutions
 
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
 
Michel PlungjanIT ExpertCommented:
Tomorrow
0
Technology Partners: 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!

 
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
 
Michel PlungjanIT 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
 
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
 
Maximus5684Commented:
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

Featured Post

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!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now