Forums

b-rad

Hi.

I'm having some trouble with a jQuery powered dropdown menu I have on my website. I've tried and tried and can't seem to figure out a working solution. Any help would be greatly appreciated. Thank you in advance!

You can either watch the video I made on youtube describing the issue: http://www.youtube.com/watch?v=42E_rzwdUMY

or keep reading.

The website is http://www.orangepeeltransportation.com

When you go to the website, try to view an interior page with the top left menu, like 'ABOUT', 'RESERVATIONS', 'SERVICES' or one of the others, you will then be required to 'Please Select a Location to Continue'. Once you select a location, either 'Hampton Roads, VA' or 'Savannah, GA' will load their appropriate stylesheet (and content). However, it also initiates the JQuery powered toggle function that makes the drop down location menu appear, which is not correct. The drop down location menu should only appear if someone selects the 'Change Location' button link at the top right of the website.

Here is the .js code:


/**
* Styleswitch stylesheet switcher built on jQuery
* Under an Attribution, Share Alike License
* By Kelvin Luck ( http://www.kelvinluck.com/ )
**/

// Take content in a div with id=\"defer-xyz\" and move it to a div with id=\"xyz\"
function relocateDeferredContent() {
	var divs=document.getElementsByTagName(\"div\");
	var replacements=new Array();
	for(var i2=0;i2<divs.length;i2++){
		var deferredContent = divs[i2];
		if (deferredContent.id.indexOf(\"defer-\") == 0) {
			var placeHolder = document.getElementById(deferredContent.id.slice(6));
			replacements.push([deferredContent, placeHolder]);
		}
	}
	for(i=0;i2<replacements.length;i2++){
		replacements[i2][0].parentNode.removeChild(replacements[i2][0]);
		replacements[i2][1].parentNode.replaceChild(replacements[i2][0], replacements[i2][1]);
		replacements[i2][0].style.display = \"block\";
	}
	return true;
}


$(document).ready(function() {
	setTimeout('relocateDeferredContent()',50);
	
	$(\"#themeTable a\").click(function(){
		switchStylestyle(this.getAttribute(\"rel\"));
		var themeText = $(this).text();
		$(\"#themeChangeText span\").text(themeText);
		$(\"#themeChangeOverlay\").show();
		$(\"#themeChangeText\").show();
		setTimeout ( \"themeTime()\", 3500 );
		$(\"#themeTable a\").removeClass('activeTheme');
		$(this).addClass('activeTheme');
		return false;
	});
	

	$(\"#locationsTable a\").click(function(){
		switchStylestyle(this.getAttribute(\"rel\"));
		var themeText = $(this).text();
		$(\"#themeChangeText span\").text(themeText);
		$(\"#themeChangeOverlay\").show();
		$(\"#themeChangeText\").show();
		setTimeout ( \"themeTime()\", 3500 );
		$(\"#locationsTable a\").removeClass('activeTheme');
		return false;
	});	

	
    $(\".portItemWrap\").hover(
      function () {
		$(this).find(\"a span\").animate({opacity: 1}, 300);
      }, 
      function () {
        $(this).find(\"a span\").animate({opacity: 0}, 300);
      }
    );
	
    $(\".mainShowWrap a\").hover(
      function () {
        $(this).children(\"div\").fadeIn(200);
      }, 
      function () {
         $(this).children(\"div\").fadeOut(200);
      }
    );
	

	var c = readCookie('style');
	if (c) switchStylestyle(c);

		 animateUp = function () {
			 $(\"#changeThemeWrap\").animate({ 
					marginTop: \"-180px\"
				}, 1200 );
			 $(\"#toggleTheme span\").text(\"CHANGE LOCATION\");
		 };
		 
		 animateDown = function () {
			 $(\"#changeThemeWrap\").animate({ 
					marginTop: \"0px\"
				}, 1200 );
			 $(\"#toggleTheme span\").text(\"LEAVE IT AS IS\");
		 };
		$(\"#toggleTheme\").toggle(animateDown, animateUp);

});

function themeTime() {
	$(\"#themeChangeOverlay, #themeChangeText\").fadeOut();
	$('#toggleTheme').click();
}

function switchStylestyle(styleName)
{
	$('link[@rel*=style][@title]').each(function(i) 
	{
		this.disabled = true;
		if (this.getAttribute('title') == styleName) this.disabled = false;
	});
	createCookie('style', styleName, 365);
	
}

// cookie functions http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days)
{
	if (days)
	{
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = \"; expires=\"+date.toGMTString();
	}
	else var expires = \"\";
	document.cookie = name+\"=\"+value+expires+\"; path=/\";
}
function readCookie(name)
{
	var nameEQ = name + \"=\";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++)
	{
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
function eraseCookie(name)
{
	createCookie(name,\"\",-1);
}
// /cookie functions

Here is the page.php code:


			<div class=\"tagline\" id=\"selectyourlocation\">
				<div id=\"selectLocation\">
					<img src=\"/images/selectyourlocation.png\" width=\"1000\" height=\"42\" border=\"0\" alt=\"Please Select Your Location to Continue\" title=\"Please Select Your Location to Continue\">
				</div> <!-- #selectLocation -->

				<div id=\"locationsTable\" summary=\"Options to change themes\">
				     <a href=\"/styles.php?style=va\" rel=\"va\" id=\"vaTheme\" title=\"Hampton Roads, Virginia\" class=\" styleswitch\">Hampton Roads, VA</a>&nbsp;&nbsp;or&nbsp;&nbsp;<a href=\"/styles.php?style=ga\" rel=\"ga\" id=\"gaTheme\" title=\"Savannah, Georgia\" class=\" styleswitch\">Savannah, GA</a>
				</div> <!-- #locationsTable -->
				
			</div>

jamy_za

Try this:

$(\"#changeThemeWrap\").css(\"marginTop\", \"-180px\")

       animateUp = function () {
          $(\"#changeThemeWrap\").animate({
               marginTop: \"-180px\"
               etc....

b-rad

Hi,

Thanks but that didn't work.

I tried adding:


$(\"#changeThemeWrap\").css(\"marginTop\", \"-180px\")

above:


       animateUp = function () {
          $(\"#changeThemeWrap\").animate({
               marginTop: \"-180px\"
               etc....

in the .js file but it still continues to initiate the animateDown function on the #changeThemeWrap div when a location (either Hampton Roads or Savannah) is selected from within the page.php. What I think the problem is the styleswitch function is triggering the animateDown and animateUp functions in the dropdown. Which works great when the user changes their location from the 'Change Location' dropdown because we want it to animateUp after they make their selection. However, when visitors use the other 'Please Select a Location' link in the page.php file, because it uses the same styleswitch function that is triggering the animate sequence, it's causing a problem by triggering an animateDown with the 'Change Location' (#changeThemeWrap) menu. Figuring out the best way to have the styleswitch function change the website theme (or location) with only triggering the animateUp and animateDown function if they use the 'Change Location' menu is where I'm having trouble deciding how to make it work.

Thanks again for your help and input.

doobie

Hi b-rad,

Not sure if you noticed, but you're loading jQuery multiple times. This causes all kinds of problems. It's being called once in your header and again in the body.

Check out this article http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/.

Give that a try and let us know if it resolves the problem.

-Jacob

treehouse : what would you like to learn today?

Forums

JQuery Conflict with Link Selection and Menu Initiation