homepage Welcome to WebmasterWorld Guest from 54.166.116.36
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
jQuery problems.
change classes and .load
xboxingman



 
Msg#: 4479215 posted 8:33 pm on Jul 26, 2012 (gmt 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

 

xboxingman



 
Msg#: 4479215 posted 6:25 am on Jul 27, 2012 (gmt 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

xboxingman



 
Msg#: 4479215 posted 2:36 am on Jul 30, 2012 (gmt 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

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4479215 posted 1:48 pm on Jul 30, 2012 (gmt 0)

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);
});
};

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4479215 posted 1:53 pm on Jul 30, 2012 (gmt 0)

For some reason, the formatting is getting lost on the HTML portion. :(

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4479215 posted 2:09 pm on Jul 30, 2012 (gmt 0)

Side note, menus are usually best represented as unordered lists (<ul>/<li>) as opposed to the generic, non-semantic <div>.

daveVk

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4479215 posted 6:45 am on Jul 31, 2012 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved