9 replies [Last post]
argyrism
argyrism's picture
Offline
newbie
Cyprus
Last seen: 8 years 45 weeks ago
Cyprus
Timezone: GMT+3
Joined: 2010-06-06
Posts: 6
Points: 7

hi to all, i need to make the current link to show highlighted in a jquery collapsing menu.
the menu is online at http://tigicy.com/products.php at the right. Whenever you click a link from the li at the right , the catid is passed as a passing parameter.

the css used is :

ul#menu, ul#menu ul {
font-size:11px;
list-style-type:none;
margin: 0;
padding: 0;
width: 17em;

}

ul#menu a {
display: block;
text-decoration: none;
}

ul#menu li {
margin-top: 1px;
}

ul#menu li a {
background: #85c1dd;
color: #fff;
padding: 0.5em;
}

ul#menu li a:hover {
background:#0099CC;
}

ul#menu li ul li a {
background:#EAF7FB;
color:#095B88;
padding-left: 20px;
}

ul#menu li ul li a:hover {
background: #fefffc;
border-left: 5px #85c1dd solid;
padding-left: 15px;
}

ul#menu li a:active {
background:#1CA8EC;
border-left: 5px #85c1dd solid;
padding-left: 15px;
}

.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 { padding-left: 1em; }
.indent2 { padding-left: 2em; }

the mennu is initialised using the following code:

function initMenu() {
$('#menu ul').hide();

$('#menu ul:first').show();

$('#menu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});

The li is created using php:

echo '

echo '

  • '.$cat.'
      ';
  • in other words every li has the id=aCAT_ID_NUMBER

    my question is how to make the current li to show and appear in a different color whenever someone clicks on the li link(the page will refresh with passing parameter - method get the catid)

    im new to css - i only know how to code well in php/mysql. any help would be appreciated.
    Thank you!

    argyrism
    argyrism's picture
    Offline
    newbie
    Cyprus
    Last seen: 8 years 45 weeks ago
    Cyprus
    Timezone: GMT+3
    Joined: 2010-06-06
    Posts: 6
    Points: 7

    my apologies for the messy

    my apologies for the messy code, here is the code structure of the

  • Deuce
    Deuce's picture
    Offline
    Guru
    Somewhere, USA
    Last seen: 1 year 40 weeks ago
    Somewhere, USA
    Timezone: GMT-5
    Joined: 2005-11-20
    Posts: 4424
    Points: 1843

    Strictly speaking, this is a

    Strictly speaking, this is a CSS forum, not jQuery. You might be better off asking a jQuery forum. But, none-the-less you can try the code below and see if it does the trick. Just style for a.current_page

    Add

    $.urlParam = function(name){
    	var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    	return results[1] || 0;
    }
    to your DOM ready function.

    Then

    var currentID = $.urlParam('catid');
    $("#menu").children().each(function(){
    if($(this).attr("href") == "products.php?catid="+currentID){
    $(this).addClass("current_page");
    }
    });

    all » http://dictionary.reference.com/browse/all

    Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

    Verschwindende
    Verschwindende's picture
    Offline
    Guru
    Last seen: 3 weeks 6 hours ago
    Timezone: GMT-4
    Joined: 2009-10-09
    Posts: 2040
    Points: 2262

    Deuce wrote:Strictly

    Deuce wrote:

    Strictly speaking, this is a CSS forum, not jQuery. You might be better off asking a jQuery forum. But, none-the-less you can try the code below and see if it does the trick. Just style for a.current_page

    Add

    $.urlParam = function(name){
    	var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    	return results[1] || 0;
    }
    to your DOM ready function.

    Then

    var currentID = $.urlParam('catid');
    $("#menu").children().each(function(){
    if($(this).attr("href") == "products.php?catid="+currentID){
    $(this).addClass("current_page");
    }
    });

    That's nice work. Smile

    I usually try to set my menu's current state on the server side since it is generated there anyway but it's half-dozen of one, six of the other. Smile

    argyrism
    argyrism's picture
    Offline
    newbie
    Cyprus
    Last seen: 8 years 45 weeks ago
    Cyprus
    Timezone: GMT+3
    Joined: 2010-06-06
    Posts: 6
    Points: 7

    Verschwindende wrote: Deuce

    Verschwindende wrote:
    Deuce wrote:

    Strictly speaking, this is a CSS forum, not jQuery. You might be better off asking a jQuery forum. But, none-the-less you can try the code below and see if it does the trick. Just style for a.current_page

    Add

    $.urlParam = function(name){
    	var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    	return results[1] || 0;
    }
    to your DOM ready function.

    Then

    var currentID = $.urlParam('catid');
    $("#menu").children().each(function(){
    if($(this).attr("href") == "products.php?catid="+currentID){
    $(this).addClass("current_page");
    }
    });

    That's nice work. Smile

    I usually try to set my menu's current state on the server side since it is generated there anyway but it's half-dozen of one, six of the other. Smile

    very good indeed. I think i did not state well what i need to do and i confused you.
    i use the following code:

     $("#menu").children().each(function(){
    if($(this).attr("href") == "products.php?catid="+<?php echo $catid; ?>){
    $(this).addClass("current_page");
    }
    });

    please note that all the li links have an id of the form a123 where 123 is the catid
    what i need to do is first to make the collapse menu to show that link - the "acitve" - the "current" ? link. We can find out which one is the current link using the $catid php variable.
    what i cannot do is to make the collapse menu to show it.

    for example when you click on a link the following code executes:

    $('#menu li a').click(
     function() {
     var checkElement = $(this).next();
     if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
     return false;
     }
     if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
     $('#menu ul:visible').slideUp('normal');
     checkElement.slideDown('normal');
     return false;
     }
     }
     );
     }
     $(document).ready(function() {initMenu();});

    Deuce
    Deuce's picture
    Offline
    Guru
    Somewhere, USA
    Last seen: 1 year 40 weeks ago
    Somewhere, USA
    Timezone: GMT-5
    Joined: 2005-11-20
    Posts: 4424
    Points: 1843

    The first chunk of code reads

    The first chunk of code reads the URL and grabs the data after the ? and splits it with the & (if you had multiple values in the URL.
    Then in teh second chunk, it sets a variable

    var currentID = $.urlParam('catid');
    of the catid from the URL.
    Then the rest of the code, goes through all of the Anchor HREF tags in the side menu and finds one with the URL that matches products.php?catid="+currentID

    Did you even try my code? What doesn't work with it?

    all » http://dictionary.reference.com/browse/all

    Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

    argyrism
    argyrism's picture
    Offline
    newbie
    Cyprus
    Last seen: 8 years 45 weeks ago
    Cyprus
    Timezone: GMT+3
    Joined: 2010-06-06
    Posts: 6
    Points: 7

    Deuce wrote: The first chunk

    Deuce wrote:

    The first chunk of code reads the URL and grabs the data after the ? and splits it with the & (if you had multiple values in the URL.
    Then in teh second chunk, it sets a variable

    var currentID = $.urlParam('catid');
    of the catid from the URL.
    Then the rest of the code, goes through all of the Anchor HREF tags in the side menu and finds one with the URL that matches products.php?catid="+currentID

    Did you even try my code? What doesn't work with it?

    i did not know where to put this code:

    $.urlParam = function(name){
    	var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    	return results[1] || 0;
    }

    for that reason i grabed the passing parameter data using php, will your code show the current link?

    thank you so much for your help!

    argyrism
    argyrism's picture
    Offline
    newbie
    Cyprus
    Last seen: 8 years 45 weeks ago
    Cyprus
    Timezone: GMT+3
    Joined: 2010-06-06
    Posts: 6
    Points: 7

    i figured out how to show the

    i figured out how to show the current li's css using php, the solution was to compare whether the id of the li - and the link is the current and if so echo current class. The only thing left now it is how to make the current li to slide up, note that all the li's have an id ("a"+catid). Thank you for your help.

    the code that slides up the li is:

    $('#menu ul:first').show(); //to show the first list  
     
     $('#menu li a').click( //to slide up the clicked list
     function() {
     var checkElement = $(this).next();
     if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
     return false;
     }
     if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
     $('#menu ul:visible').slideUp('normal');
     checkElement.slideDown('normal');
     return false;
     }
     }
     );
     }

    goodnfl
    goodnfl's picture
    Offline
    newbie
    Last seen: 8 years 45 weeks ago
    Timezone: GMT+8
    Joined: 2010-06-09
    Posts: 1
    Points: 1

    soryy I don't know

    soryy I don't know

    argyrism
    argyrism's picture
    Offline
    newbie
    Cyprus
    Last seen: 8 years 45 weeks ago
    Cyprus
    Timezone: GMT+3
    Joined: 2010-06-06
    Posts: 6
    Points: 7

    Guys i have solved the issue,

    Guys i have solved the issue, you can see it online at www.maskcy.com/products.php - just click on the menu at the right.
    Thank you for your help!