Solved

Duplicate Jquery functionality

Posted on 2011-03-13
11
439 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 
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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

705 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