homepage Welcome to WebmasterWorld Guest from 54.198.94.76
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 problem
Noddegamra




msg:4453181
 10:55 am on May 14, 2012 (gmt 0)

Hi there!

There's a lot of talented web developers on here and I was wondering if anyone could help me with this problem I'm having?

I have a menu that works using list items. With the CSS I've got it setup so they appear in the sidebar. When a parent list item is clicked, it shows the child items.

Now, I can get them to stay highlighted, but when I click a child item, the parent goes un-highlighted. I've tried everything I can think of and nothing seems to work. Does anyone here have any ideas?

I need the functionality to be similar to the icloud help site (check the help link in the footer).

Here is the code below (responsible for the highlighting):

<script type="text/javascript">
$(document).ready(function () {

jQuery.fx.off = true;

$('#nav li a').click(function(){
$(this).next().slideToggle("fast");
$('#nav li ul li').removeClass( "selected" );
$('#nav li a').removeClass( "selected" );
/*$(this).addClass( "selected" );*/

if($(this).hasClass('selected')){
$(this).removeClass('selected');
}else{
$(this).addClass('selected');
}


});

$( "#nav li ul li a" ).click( function() {
$( this ).parent( "li" )
.addClass( "selected" )
.siblings( ".selected" )
.removeClass( "selected" );

});

});
</script>




And here is the actual page code in full:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-gb" xml:lang="en-gb">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="EN-GB" />
<meta name="country" content="United Kingdom" />
<meta name="geo.country" content="GB" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="7 days" />
<meta name="document-type" content="Public" />
<meta name="document-rating" content="Safe for Kids" />
<meta name="document-distribution" content="Global" />

<link rel="stylesheet" type="text/css" href="../css/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>

<title>Home | Schools</title>



<script type="text/javascript">
$(document).ready(function () {

jQuery.fx.off = true;

$('#nav li a').click(function(){
$(this).next().slideToggle("fast");
$('#nav li ul li').removeClass( "selected" );
$('#nav li a').removeClass( "selected" );
/*$(this).addClass( "selected" );*/

if($(this).hasClass('selected')){
$(this).removeClass('selected');
}else{
$(this).addClass('selected');
}


});

$( "#nav li ul li a" ).click( function() {
$( this ).parent( "li" )
.addClass( "selected" )
.siblings( ".selected" )
.removeClass( "selected" );

});

});
</script>

<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- &#65533; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>


</head>

<body>


<!-- search -->
<div id="search_top">
<div id="search_box">
<form name="search" method="post" action="search.php">
<input name="q" type="text" value="Search" onclick="this.value='';" />
</form>
</div>
</div>
<!-- /search -->



<!-- container -->
<div id="container">

<!-- menu -->
<div id="menu">
<ul id="nav">
<li><a id="nav_home" href="javascript:ajaxpage('home.php', 'content');">Home</a></li>
<li><a id="nav_administration" href="#">Administration</a>


<ul>

<li>
<a href="javascript:ajaxpage('/school/administration/calendar-management.php', 'content');">Calendar Management</a>

</li>

<li>
<a href="javascript:ajaxpage('/school/administration/people-management.php', 'content');">People Management</a>

</li>

<li>
<a href="javascript:ajaxpage('/school/administration/staff-permissions.php', 'content');">Staff Permissions</a>

</li>

<li>
<a href="javascript:ajaxpage('/school/administration/group-management.php', 'content');">Group Management</a>

</li>

<li>
<a href="javascript:ajaxpage('/school/administration/data-management.php', 'content');">Data Management</a>

</li>

<li>
<a href="javascript:ajaxpage('/school/administration/community-reports.php', 'content');">Community Reports</a>

</li>

<li>
<a href="javascript:ajaxpage('/school/administration/my-community.php', 'content');">My Community</a>

</li>

<li>
<a href="javascript:ajaxpage('/school/administration/my-account.php', 'content');">My Account</a>

</li>

</ul>

</li>
<li><a id="nav_resources" href="#">Resources</a>


<ul>

<li>
<a href="javascript:ajaxpage('/school/resources/posters.php', 'content');">Posters</a>

</li>

<li>
<a href="javascript:ajaxpage('/school/resources/web-banners.php', 'content');">Web Banners</a>

</li>

<li>
<a href="javascript:ajaxpage('/school/resources/logos.php', 'content');">Logos</a>

</li>

<li>
<a href="javascript:ajaxpage('/school/resources/popup-banners.php', 'content');">Pop-up Desktop Banners</a>

</li>

<li>
<a href="javascript:ajaxpage('/school/resources/email-assets.php', 'content');">Email Assets</a>

</li>

</ul>

</li>
<li><a id="nav_contact_us" href="javascript:ajaxpage('contact-us.php', 'content');">Contact Us</a></li>
</ul>
</div>
<!-- /menu -->


<!-- content -->
<div id="content">

<h1>Introduction</h1>
<p>Page text goes here...</p>
</div>
<!-- /content -->


</div> <!-- /container -->

</body>
</html>



Thanks in advance to anyone willing to help.

 

g1smd




msg:4453193
 11:21 am on May 14, 2012 (gmt 0)

You should not link to home as "home.php".

Link to
href="/" and set DirectoryIndex home.php in the site configuration.

You could also take this opportunity to change to extensionless URLs for your other pages. A simple RewriteRule then connects a request for
href="/page" to the page.php file on the server that will deliver the content.


<meta name="keywords" content="" />
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="7 days" />
At least those three should be dumped.


Always avoid the .. notation in links:
href="../css/style.css"
Start the URL with a leading slash and include the full path:
href="/css/style.css"
Noddegamra




msg:4453225
 12:45 pm on May 14, 2012 (gmt 0)

Hi g1smd,

Thank you for your comments. The way this site works is a bit weird, granted (as the main file is index and I'm using ajax to pull in the content), but do you have any suggestions on how to get the jQuery working the way I need..?


EDIT: I have fixed it.

enigma1




msg:4453698
 12:13 pm on May 15, 2012 (gmt 0)

I think the problem it's because you need to highlight the parent li not just the parent of the clicked element. See here:

$( "#nav li ul li a" ).click( function() {
$( this ).parent( "li" )
.addClass( "selected" )
.siblings( ".selected" )
.removeClass( "selected" );

You need to also highlight this part here:
#nav li
you need another parent level as at the moment you highlight only
#nav li ul li

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