Welcome to WebmasterWorld Guest from 54.211.17.91

Forum Moderators: open

Message Too Old, No Replies

jQuery problem

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

5+ Year Member



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.
11:21 am on May 14, 2012 (gmt 0)

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



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"
12:45 pm on May 14, 2012 (gmt 0)

5+ Year Member



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.
12:13 pm on May 15, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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
 

Featured Threads

Hot Threads This Week

Hot Threads This Month