Welcome to WebmasterWorld Guest from 54.226.238.178

Forum Moderators: open

Message Too Old, No Replies

jQuery problems.

change classes and .load

     
8:33 pm on Jul 26, 2012 (gmt 0)

New User

5+ Year Member

joined:Sept 25, 2011
posts: 28
votes: 0


I am working on a navigation. Some of it works great and some does things it shouldn't. This is a time sensitive project so any help as soon as possible would be greatly appreciated. I will be continuing to work on it in hopes to clean the code down to something that works and post any updates I make.

What is happening is I have a side menu, when a link is clicked another menu slides out underneath and one more when a link is clicked on that list. the problem is the classes don't change properly and sometimes the pages don't even load.

I believe this code is more then I need but it's what I had to do to get it right. When you click a link the class changes. It works fine on the m1 & m3 but on m2 where it could be either class a or b depending if there is a menu3, the pages() function, it doesn't load the new class on this, but if you click another link on the menu it loads the class that should have been on the previous link on the current link. I hope that makes sense.


HEAD JAVASCRIPT:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script>
$(document).ready(function() {
$(".m_item").click(function () {
$(".menu2").show("slide", { direction: "left" }, 500);
$(".menu2").removeClass("menu2 hide").addClass("menu2");
$(".m_item_active").removeClass("m_item_active").addClass("m_item");
$(this).removeClass("m_item").addClass("m_item_active");
$(".menu3").hide("slide", { direction: "left" }, 100);
$(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item"); $(".m3_item_active").removeClass("m3_item_active").addClass("m3_item"); $(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
});
$(".m3_item").click(function () { $(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
$(this).removeClass("m3_item").addClass("m3_item_active");
});
});
function loadPage(divID, pagetoload){
$('#' + divID).hide().load(pagetoload, function() {
$(this).show(100);
}); };

/* FROM HERE ON IS WHERE THE MALFUNCTIONING CODE IS */

function pages(amount){
if(amount>2) {
$(".menu3").show("slide", { direction: "left" }, 500);
$(".menu3").removeClass("menu3 hide").addClass("menu3");
$(".m2_item").click(function () {
$(".m2_item_active").removeClass("m2_item_active").addClass("m2_item"); $(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item"); $(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
$(this).removeClass().addClass("m2_item_activeb");
});
}else if(amount<2) {
$(".menu3").addClass("hide");
$(".m2_item").click(function () {
$(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item"); $(".m2_item_active").removeClass("m2_item_active").addClass("m2_item"); $(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
$(this).removeClass().addClass("m2_item_active");
});
}
};
</script>


BODY:

<div class="menu1">LOGO HERE
<div id="m1_1" class="m_item"><span class="m1n">01.</span> <a id="main1" href="javascript:loadPage('contentDiv','content/blank.html');">Main 1</a></div>
<div id="m1_2" class="m_item"><span class="m1n">02.</span> <a id="main2" href="javascript:loadPage('contentDiv','content/blank.html');">Main 3</a></div>
<div id="m1_5" class="m_item"><span class="m1n">03.</span> <a id="main3" href="javascript:loadPage('contentDiv','content/blank.html');">Main 3</a></div>
<div id="m1_6" class="m_item"><span class="m1n">04.</span> <a id="main4" href="javascript:loadPage('contentDiv','content/blank.html');">Main 4</a></div>
<div id="m1_8" class="m_item"><span class="m1n">05.</span> <a id="main5" href="javascript:loadPage('contentDiv','content/blank.html');">Main 5</a></div>
<div class="footer"> 2012 Dream Huge Design</div>
</div><!--menu level 1-->
<div class="menu2 hide">
<div class="topbox"></div>
<div id="m2_2_1" class="m2_item"><a id="m2_sub1" href="javascript:loadPage('contentDiv','content/page1.html'); pages(1);"><span class="link2">Link 1</span></a></div>
<div id="m2_2_2" class="m2_item"><a id="m2_sub2" href="javascript:loadPage('contentDiv','content/page2.html'); pages(1);"><span class="link2">Link 2</span></a></div>
<div id="m2_2_3" class="m2_item"><a id="m2_sub3" href="javascript:loadPage('contentDiv','content/page3.html'); pages(3);"><span class="link2">Link 3</span></a></div>
<div id="m2_2_4" class="m2_item"><a id="m2_sub4" href="javascript:loadPage('contentDiv','content/page4.html'); pages(3);"><span class="link2">Link 4</span></a></div>
</div><!--menu level 2-->
<div class="menu3 hide">
<div class="topbox"></div>
<div id="m2_3_1" class="m3_item"><a id="m3_sub1" href="javascript:loadPage('contentDiv','content/blank.html');"><span class="link2">Link A</span></a></div>
<div id="m2_3_2" class="m3_item"><a id="m3_sub2" href="javascript:loadPage('contentDiv','content/blank.html');"><span class="link2">Link B</span></a></div>
<div id="m2_3_3" class="m3_item"><a id="m3_sub3" href="javascript:loadPage('contentDiv','content/blank.html');"><span class="link2">Link C</span></a></div>
<div id="m2_3_4" class="m3_item"><a id="m3_sub4" href="javascript:loadPage('contentDiv','content/blank.html');"><span class="link2">Link D</span></a></div>
</div><!--menu level 3-->

<div id="contentDiv"></div>


Thank you very much,
Mike
6:25 am on July 27, 2012 (gmt 0)

New User

5+ Year Member

joined:Sept 25, 2011
posts: 28
votes: 0


I have changed the javascript up some.


$(document).ready(function() {
$(".m_item").click(function () {
var currentId = $(this).attr('id');
if(currentId != "m1_3") {
$(".menu2").show("slide", { direction: "left" }, 500);
$(".menu2").removeClass("menu2 hide").addClass("menu2");
$(".m_item_active").removeClass("m_item_active").addClass("m_item");
$(".m_item_activeb").removeClass("m_item_activeb").addClass("m_item");
$(this).removeClass("m_item").addClass("m_item_active");
$(".menu3").hide("slide", { direction: "left" }, 100);
$(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item");
$(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
$(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
} else if(currentId == "m1_3") {
$(".menu2").hide("slide", { direction: "left" }, 100);
$(".menu2").addClass("hide");
$(".m_item_active").removeClass("m_item_active").addClass("m_item");
$(".m_item_activeb").removeClass("m_item_activeb").addClass("m_item");
$(this).removeClass("m_item").addClass("m_item_activeb");
$(".menu3").hide("slide", { direction: "left" }, 100);
$(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item");
$(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
$(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
}
});
$(".m3_item").click(function () {
$(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
$(this).removeClass("m3_item").addClass("m3_item_active");
});
$(".m2_item").click(function () {
var currentId = $(this).attr('id');
if(currentId != "m2_2_2") {
$(".menu3").show("slide", { direction: "left" }, 500);
$(".menu3").removeClass("menu3 hide").addClass("menu3");
$(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
$(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item");
$(this).removeClass("m2_item").addClass("m2_item_active");
$(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");;
} else if(currentId == "m2_2_2") {
$(".menu3").hide("slide", { direction: "left" }, 100);
$(".menu3").addClass("hide");
$(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
$(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item");
$(this).removeClass("m2_item").addClass("m2_item_activeb");
$(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
}
});

});
function loadPage(divID, pagetoload){
$('#' + divID).hide().load(pagetoload, function() {
$(this).show(100);
}); };


I removed the pages() function, the first function for m_item works flawlessly, however, the same function for m2_item doesn't work at all. The div doesn't show as instructed and none of the classes change. Is there an error in my syntax somewhere?
thank you,
Mike
2:36 am on July 30, 2012 (gmt 0)

New User

5+ Year Member

joined:Sept 25, 2011
posts: 28
votes: 0


I could really use some help if anyone is able to point me in the right path to finding a solution to this.

THANK YOU
1:48 pm on July 30, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4988
votes: 12


I suspect you've not gotten any replies yet for 2 reasons:
1. The code is not easy to read as you've put it in the forum
2. The code is hard to follow along with

To help you out, I'm posting your original code and your revised code, but I've run it through jsbeautifier [jsbeautifier.org], and I've wrapped it in quote/pre/code forum tags to preserve indentation, etc. Hopefully, that will make it easier for someone to help.

Original Script:

$(document).ready(function () {
$(".m_item").click(function () {
$(".menu2").show("slide", {
direction: "left"
}, 500);
$(".menu2").removeClass("menu2 hide").addClass("menu2");
$(".m_item_active").removeClass("m_item_active").addClass("m_item");
$(this).removeClass("m_item").addClass("m_item_active");
$(".menu3").hide("slide", {
direction: "left"
}, 100);
$(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item");
$(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
$(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
});
$(".m3_item").click(function () {
$(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
$(this).removeClass("m3_item").addClass("m3_item_active");
});
});

function loadPage(divID, pagetoload) {
$('#' + divID).hide().load(pagetoload, function () {
$(this).show(100);
});
};

/* FROM HERE ON IS WHERE THE MALFUNCTIONING CODE IS */

function pages(amount) {
if (amount > 2) {
$(".menu3").show("slide", {
direction: "left"
}, 500);
$(".menu3").removeClass("menu3 hide").addClass("menu3");
$(".m2_item").click(function () {
$(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
$(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item");
$(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
$(this).removeClass().addClass("m2_item_activeb");
});
} else if (amount < 2) {
$(".menu3").addClass("hide");
$(".m2_item").click(function () {
$(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item");
$(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
$(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
$(this).removeClass().addClass("m2_item_active");
});
}
};


Original Markup:

<div class="menu1">LOGO HERE
<div id="m1_1" class="m_item">
<span class="m1n">01.</span> <a id="main1" href="javascript:loadPage('contentDiv','content/blank.html');">Main 1</a>
</div>
<div id="m1_2" class="m_item">
<span class="m1n">02.</span> <a id="main2" href="javascript:loadPage('contentDiv','content/blank.html');">Main 3</a>
</div>
<div id="m1_5" class="m_item">
<span class="m1n">03.</span> <a id="main3" href="javascript:loadPage('contentDiv','content/blank.html');">Main 3</a>
</div>
<div id="m1_6" class="m_item">
<span class="m1n">04.</span> <a id="main4" href="javascript:loadPage('contentDiv','content/blank.html');">Main 4</a>
</div>
<div id="m1_8" class="m_item">
<span class="m1n">05.</span> <a id="main5" href="javascript:loadPage('contentDiv','content/blank.html');">Main 5</a>
</div>
<div class="footer"> 2012 Dream Huge Design</div>
</div><!--menu level 1-->
<div class="menu2 hide">
<div class="topbox"></div>
<div id="m2_2_1" class="m2_item">
<a id="m2_sub1" href="javascript:loadPage('contentDiv','content/page1.html'); pages(1);"><span class="link2">Link 1</span></a>
</div>
<div id="m2_2_2" class="m2_item">
<a id="m2_sub2" href="javascript:loadPage('contentDiv','content/page2.html'); pages(1);"><span class="link2">Link 2</span></a>
</div>
<div id="m2_2_3" class="m2_item">
<a id="m2_sub3" href="javascript:loadPage('contentDiv','content/page3.html'); pages(3);"><span class="link2">Link 3</span></a>
</div>
<div id="m2_2_4" class="m2_item">
<a id="m2_sub4" href="javascript:loadPage('contentDiv','content/page4.html'); pages(3);"><span class="link2">Link 4</span></a>
</div>
</div><!--menu level 2-->
<div class="menu3 hide">
<div class="topbox"></div>
<div id="m2_3_1" class="m3_item">
<a id="m3_sub1" href="javascript:loadPage('contentDiv','content/blank.html');"><span class="link2">Link A</span></a>
</div>
<div id="m2_3_2" class="m3_item">
<a id="m3_sub2" href="javascript:loadPage('contentDiv','content/blank.html');"><span class="link2">Link B</span></a>
</div>
<div id="m2_3_3" class="m3_item">
<a id="m3_sub3" href="javascript:loadPage('contentDiv','content/blank.html');"><span class="link2">Link C</span></a>
</div>
<div id="m2_3_4" class="m3_item">
<a id="m3_sub4" href="javascript:loadPage('contentDiv','content/blank.html');"><span class="link2">Link D</span></a>
</div>
</div><!--menu level 3-->

<div id="contentDiv"></div>


Revised JavaScript:

$(document).ready(function () {
$(".m_item").click(function () {
var currentId = $(this).attr('id');
if (currentId != "m1_3") {
$(".menu2").show("slide", {
direction: "left"
}, 500);
$(".menu2").removeClass("menu2 hide").addClass("menu2");
$(".m_item_active").removeClass("m_item_active").addClass("m_item");
$(".m_item_activeb").removeClass("m_item_activeb").addClass("m_item");
$(this).removeClass("m_item").addClass("m_item_active");
$(".menu3").hide("slide", {
direction: "left"
}, 100);
$(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item");
$(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
$(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
} else if (currentId == "m1_3") {
$(".menu2").hide("slide", {
direction: "left"
}, 100);
$(".menu2").addClass("hide");
$(".m_item_active").removeClass("m_item_active").addClass("m_item");
$(".m_item_activeb").removeClass("m_item_activeb").addClass("m_item");
$(this).removeClass("m_item").addClass("m_item_activeb");
$(".menu3").hide("slide", {
direction: "left"
}, 100);
$(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item");
$(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
$(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
}
});
$(".m3_item").click(function () {
$(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
$(this).removeClass("m3_item").addClass("m3_item_active");
});
$(".m2_item").click(function () {
var currentId = $(this).attr('id');
if (currentId != "m2_2_2") {
$(".menu3").show("slide", {
direction: "left"
}, 500);
$(".menu3").removeClass("menu3 hide").addClass("menu3");
$(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
$(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item");
$(this).removeClass("m2_item").addClass("m2_item_active");
$(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");;
} else if (currentId == "m2_2_2") {
$(".menu3").hide("slide", {
direction: "left"
}, 100);
$(".menu3").addClass("hide");
$(".m2_item_active").removeClass("m2_item_active").addClass("m2_item");
$(".m2_item_activeb").removeClass("m2_item_activeb").addClass("m2_item");
$(this).removeClass("m2_item").addClass("m2_item_activeb");
$(".m3_item_active").removeClass("m3_item_active").addClass("m3_item");
}
});

});

function loadPage(divID, pagetoload) {
$('#' + divID).hide().load(pagetoload, function () {
$(this).show(100);
});
};
1:53 pm on July 30, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4988
votes: 12


For some reason, the formatting is getting lost on the HTML portion. :(
2:09 pm on July 30, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4988
votes: 12


Side note, menus are usually best represented as unordered lists (<ul>/<li>) as opposed to the generic, non-semantic <div>.
6:45 am on July 31, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


$(".menu3").removeClass("menu3 hide").addClass("menu3");

reduces to

$(".menu3").removeClass("hide");

in the same if/else block a lot of code is the same in both part, move common code out of if/else.

using toggleClass instead of addClass and removeClass will reveal more common code eg

$(".menu3").toggleClass("hide");

Indenting helps but hard to follow logic.