Search jQuery

jQuery Forum

Using jQuery

lounn.ent..

Enable/disable "select" style in < li > menu

in Using jQuery • 9 years ago

Hi people,

i have a new jquery enigma :D,

i have a < li > menu and works perfectly, all the functions, but i can enable / disable a "selected" style, here is te jquery code for the function of the menu:

function enabledTools() {
$('#bullet').bind('click', bulletClick);
$('#mynotes').bind('click', myNoteClick);
$('#note').bind('click', addNoteClick);
$('#alert').bind('click', notificationClick);
$('#friends').bind('click', friendsClick);
$('#favorites').bind('click', favoritesClick);
//$('#message').bind('click', messagesClick);
$('#misil').bind('click', misilClick);
$("#profile").live("click", profileClick);
$('#LKCredits').bind('click', lkCreditsClick);
$('#hold').bind('click', holdClick);
$('#corpuser').live("click", corporateClick);
$('#membership').live("click", membershipClick);
$('#likopter').live("click", likopterClick);
$('#preferences').live('click', preferencesClick);
$('a.btn-close').live('click', Likter.Shared.HideShowPanel);
}

function disabledTools() {
$('#bullet').unbind('click', bulletClick);
$('#mynotes').unbind('click', myNoteClick);
$('#note').unbind('click', addNoteClick);
$('#alert').unbind('click', notificationClick);
$('#friends').unbind('click', friendsClick);
$('#corpuser').die("click", corporateClick);
$('#membership').die("click", membershipClick);
$('#favorites').unbind('click', favoritesClick);
//$('#message').unbind('click', messagesClick);
$("#profile").die("click", profileClick);
$('#misil').unbind('click', misilClick);
$('#LKCredits').unbind('click', lkCreditsClick);
$('#hold').unbind('click', holdClick);
$('#likopter').die("click", likopterClick);
$('#preferences').die('click');
$('a.btn-close').die('click', Likter.Shared.HideShowPanel);
}

here the code that change the style:

function ToolBarChangePanel() {
var jThis = $(this);

if (!jThis.hasClass('disabled')) {
//Roll Panel...

jThis.parent().find('a').removeClass('selected');
jThis.addClass('selected');

var index = jThis.parent().children().index(this);
index = (index * 73);

_toolBar.find('ul').css('margin-top', '-' + index + 'px');
}
return false;
}

and here is the CSS code:

.lkr-toolbar.toolbar-read-mode ul li{background-color: #586678; background-image:none}
.lkr-toolbar.toolbar-read-mode ul li:hover{background-color: #175898;}
.lkr-toolbar.toolbar-read-mode ul li:active{background-color:#C60000;}
.lkr-toolbar.toolbar-read-mode ul li:selected{background-color:#C60000;}
.lkr-toolbar.toolbar-read-mode ul li a{background-color: transparent;}

Replies(6)

dsvick

Re: Enable/disable "select" style in < li > menu

9 years ago

The add and removeClass methods take a class name as the parameter. In the css you posted, there is no class named "selected". The css selector :selected is pseudo class, not a real class name.

I dont see where your ToolBarChangePanel class is being called from so I can't really give you an alternative, although you could always remove the selected pseudo class definition from the style and jsut create a selected class that you specifically add and remove.
The other option that would change the background color would be to use jquery to unselect the element in question.

Hope that helps

Dave

lounn.ent..

Re: Enable/disable "select" style in < li > menu

9 years ago

your absolutly right dave.

im not the autor of the script, i just have to modify, so, i have to create a new segment of code, to sentence this behavior,

i create now the .select class, and i add this code, but doesnt work, what i miss ?

.lkr-toolbar.toolbar-read-mode ul li a.select{background-color:transparent;}
.lkr-toolbar.toolbar-read-mode ul li a.active{background-color:#C60000;}

and this is the Jquery:

$("#bullet, #mynotes, #notes, #alert, #friends, #corpuser, #membership, #favorites, #profile, #misil, #LKCredits, #hold, #likopter, #preferences").bind("click") ; (
function()
{
$(currentPage).removeClass('select');
$(this).addClass('select');
},
function()
{
$(this).addClass('active');
$(currentPage).addClass('active');
}
);

dsvick

Re: Enable/disable "select" style in < li > menu

9 years ago

They way you have them defined those classes will only apply to a very specific set of elements. Can you just make the new classes top level, instead of all of this:
.lkr-toolbar.toolbar-read-mode ul li a.select
just use:
.select

If not then can you post your mark up so we can see the structure as well?

lounn.ent..

Re: Enable/disable "select" style in < li > menu

9 years ago

this is the file when i try the insert the code ( just a part ):

the color part. its that i try to work it, but i think that my mistaque is the way that i insert de code.

f function EnabledTools(status) {
if(status) {
disabledTools();
enabledTools();
}
else {
disabledTools();
}
}

function enabledTools() {
$('#bullet').bind('click', bulletClick);
$('#mynotes').bind('click', myNoteClick);
$('#note').bind('click', addNoteClick);
$('#alert').bind('click', notificationClick);
$('#friends').bind('click', friendsClick);
$('#favorites').bind('click', favoritesClick);
//$('#message').bind('click', messagesClick);
$('#misil').bind('click', misilClick);
$("#profile").live("click", profileClick);
$('#LKCredits').bind('click', lkCreditsClick);
$('#hold').bind('click', holdClick);
$('#corpuser').live("click", corporateClick);
$('#membership').live("click", membershipClick);
$('#likopter').live("click", likopterClick);
$('#preferences').live('click', preferencesClick);
$('a.btn-close').live('click', Likter.Shared.HideShowPanel);
}

function disabledTools() {
$('#bullet').unbind('click', bulletClick);
$('#mynotes').unbind('click', myNoteClick);
$('#note').unbind('click', addNoteClick);
$('#alert').unbind('click', notificationClick);
$('#friends').unbind('click', friendsClick);
$('#corpuser').die("click", corporateClick);
$('#membership').die("click", membershipClick);
$('#favorites').unbind('click', favoritesClick);
//$('#message').unbind('click', messagesClick);
$("#profile").die("click", profileClick);
$('#misil').unbind('click', misilClick);
$('#LKCredits').unbind('click', lkCreditsClick);
$('#hold').unbind('click', holdClick);
$('#likopter').die("click", likopterClick);
$('#preferences').die('click');
$('a.btn-close').die('click', Likter.Shared.HideShowPanel);
}
function addClass () {
$(".bullet, .mynotes, .notes, .alert, .friends, .corpuser, .membership, .avorites, .profile, .misil, .LKCredits, .hold,.likopter").bind('click', changeClass);
}
function changeClass() {
$(enabledTools).removeClass('select');
$(this).addClass('select');
}

dsvick

Re: Enable/disable "select" style in < li > menu

9 years ago

Can you post some of the markup, the html, so we can see the structure of the dom?

lounn.ent..

Re: Enable/disable "select" style in < li > menu

9 years ago

HTML code:

i delete the < li > content, but basically its the part where i want apply the script.

<div class="lkr-toolbar toolbar-read-mode">
<ul class="sortable ui-sortable">
<li class="bullet " id="tool_9">
<li class="addnote " id="tool_1">
<li class="mynotes " id="tool_10">
<li class="favorite " id="tool_5">
<li class="friend " id="tool_2">
<li class="hold " id="tool_8">
<li class="likopter " id="tool_6">
<li class="credits " id="tool_13">
<li class="misil " id="tool_7">
<li class="profile " id="tool_3">
<li class="notifications " id="tool_4">
<li class="preference " id="tool_14">
</ul>
<div class="clear"/>
<div class="lkr-tool-instructions">

Top Reply

Response title

Attachments

jQuery Forum

Enable/disable "select" style in < li > menu

Replies(6)

Re: Enable/disable "select" style in < li > menu

Re: Enable/disable "select" style in < li > menu

Re: Enable/disable "select" style in < li > menu

Re: Enable/disable "select" style in < li > menu

Re: Enable/disable "select" style in < li > menu

Re: Enable/disable "select" style in < li > menu

Statistics

Tags

Actions