Solved

Duplicate Jquery functionality

Posted on 2011-03-13
11
438 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
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

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Call a VB.net function in Javascript 6 44
Horizontal Full Calendar using php 5 37
Ajax success not firing alert 6 35
Drag & Drop Error 5 24
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

738 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