Solved

Duplicate Jquery functionality

Posted on 2011-03-13
11
437 Views
Last Modified: 2012-05-11
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
Comment
Question by:LZ1
11 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35128241
All the jQuery needed is in the second half of

http://www.devry.edu/choose-devry/js/choosedevry.js
0
 
LVL 30

Author Comment

by:LZ1
ID: 35130834
@mplungian: Could you be a little more specific?  Not sure which section you mean.  I'm still learning javascript and jquery myself.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35131404
Tomorrow
0
Independent Software Vendors: 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!

 
LVL 19

Expert Comment

by:Bhavesh Shah
ID: 35186449
Hi,

can you explain more about your requirement..?

- Bhavesh
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35186657
Oops will look later
0
 
LVL 30

Author Comment

by:LZ1
ID: 35189485
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 250 total points
ID: 35192194
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
 
LVL 30

Author Comment

by:LZ1
ID: 35198724
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
 
LVL 3

Assisted Solution

by:Maximus5684
Maximus5684 earned 250 total points
ID: 35210926
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

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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

680 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question