Well, I wanted to add class to all of li's of my ul, yet I don't know why it won't work.
My CSS code:
.vnav-menu li.selected {
background:#fff;
}
here's my html code for it.
<ul class="vnav-menu"> <!-- Initiates Showing/Hiding Dashboard Containers -->
<li onclick="vnav_function('current_offer');" id="current_offer_li" class="selected"> <a> CURRENT OFFERS </a></li>
<li onclick="vnav_function('draft_offer');" id="draft_offer_li"> <a> DRAFT OFFERS </a></li>
<li onclick="vnav_function('expired_offer');" id="expired_offer_li"> <a> EXPIRED OFFERS </a></li>
<li onclick="vnav_function('offer_code');" id="offer_code_li"> <a> OFFER CODE </a></li>
<li onclick="vnav_function('title');" id="title_li"> <a> TITLE </a></li>
<li onclick="vnav_function('schedule');" id="schedule_li"> <a> SCHEDULE </a></li>
<li onclick="vnav_function('offer_type');" id="offer_type_li"> <a> OFFER TYPE </a></li>
</ul>
And here is my code for the function vnav_function()
function vnav_function(data) { //Showing/Hiding Dashboard Containers
$('.vnav-menu li').each(function(i)
{
$(this).attr('id').addClass("selected");
});
}
Well, for some reason it won't work though. any ideas for this stuff?
.attr('id') returns a string. I think that you want to use the ID for comparison:
if ($(this).attr('id') == $(data.target).attr('id') {
$(this).addClass('selected');
}
However, it would be much easier to just do
function vnav_function(data) {
$(this).addClass('selected');
}
...and it would be even easier to do
<ul class="vnav-menu"> <!-- Initiates Showing/Hiding Dashboard Containers -->
<li id="current_offer_li" class="selected"> <a> CURRENT OFFERS </a></li>
<li id="draft_offer_li"> <a> DRAFT OFFERS </a></li>
<li id="expired_offer_li"> <a> EXPIRED OFFERS </a></li>
<li id="offer_code_li"> <a> OFFER CODE </a></li>
<li id="title_li"> <a> TITLE </a></li>
<li id="schedule_li"> <a> SCHEDULE </a></li>
<li id="offer_type_li"> <a> OFFER TYPE </a></li>
</ul>
$(".vnav-menu li").on('click', function () {
$(this).addClass('selected');
});
You may even want to do:
$(".vnav-menu li").on('click', function () {
$(".vnav-menu").removeClass('selected');
$(this).addClass('selected');
});
You are trying to invoke the addClass method on the string returned by $(this).attr('id'). Try using the addClass method on the jQuery collection returned by $(this):
$(this).addClass("selected");
No jQuery:
function getElementsByCSSSelector(s) {
return Array.prototype.slice.call(document.querySelectorAll(s));
}
getElementsByCSSSelector('.vnav-menu li').forEach(function(li) {
li.classList.add("selected");
});
function vnav_function(data) { //Showing/Hiding Dashboard Containers
$('.vnav-menu li').each(function()
{
$(this).addClass("selected");
});
}
Or just:
function vnav_function(data) { //Showing/Hiding Dashboard Containers
$('.vnav-menu li').addClass('extra');
}
Well no need to use .each instead $('.vnav-menu li').addClass('extra'); this can add class to every li inside ul.vnav-menu
Related
I'm rather new to coding and my understanding is limited.
But I'm using Slicknav for mobile screen sizes, however according to the author of the plug in.
"SlickNav menu items are created Dynamically" so I need to use delegated click events or attach event handlers after SlickNav is created.
My SlickNav post
I need some help with this. According to This, I tried making a delegated events.
Here is the original code which is a " direct" event handler (I think)
menuitem.eq(0).on('click', function(){
status = 1;
clearBox();
statusCheck();
});
BTW all my code is trying to do is 1. Clear out a Container which is a display window for content. And 2. Append the correct content to that window based on the menu item that is clicked.
Here is my attempt at a delegated event:
$('#navMenu').on('click',menuitem.eq(0), function(){
status = 1;
clearBox();
statusCheck();
});
Also tried replacing .on() with .delegate(), no dice.
For completeness ill including the functions that the cick events are calling
function clearBox(){
$("#display_box").children().fadeOut(1000).appendTo(".holding");
};
function statusCheck(){
if (status == 1){
displaycontent.eq(0).fadeIn(1000).appendTo("#display_box");
displaycontent.eq(0).removeClass("hide");
$("#display_box").animate({scrollTop:0},500);
} else{}
if (status == 2){
displaycontent.eq(25).fadeIn(1000).appendTo("#display_box");
displaycontent.eq(25).removeClass("hide");
$("#display_box").animate({scrollTop:0},500);
} else{}
// Etc Etc Etc
Edit: Provided HTML for the Menu
<div class ="menu_wrap">
<nav id = "navMenu">
<ul class ="clearfix menu">
<li>General
<ul class="subMenu1">
<li class ="menu_item">Introduction</li>
<li class ="menu_item"> What you need</li>
<li class ="menu_item">House Rules</li>
<li class ="menu_item">Running the Game</li>
<li class ="menu_item">Survival</li>
<li class ="menu_item">Encounters</li>
</ul>
</li>
<li>The World
<ul class ="subMenu1">
<li class ="menu_item">Nol</li>
<li class ="menu_item">Wol</li>
<li class ="menu_item">Sol</li>
<li class ="menu_item">Eol</li>
</ul>
</li>
<li>Locations and Maps</li>
<li>Races and Cultures
<ul class ="subMenu1">
<li> <a class="allow_default" href="index_npcs.html" target="blank">NPC Creatures</a></li>
<li class ="menu_item"> Voran Kingdom</li>
<li class ="menu_item">Doval Empire</li>
<li class ="menu_item">Salatai Sultanate</li>
<li class ="menu_item">Gamoran Republic</li>
<li class ="menu_item">Elandel</li>
<li class ="menu_item">Kingdom of Night</li>
<li class ="menu_item">Halflings</li>
<li class ="menu_item">Aiur' Dun</li>
<li class ="menu_item">Half-Elves</li>
<li class ="menu_item">Half-Orcs</li>
<li class ="menu_item">Dryads</li>
</ul>
</li>
<li> Organizations
<ul class ="subMenu1">
<li class="menu_item">Information</li>
<li class ="menu_item">The Green Wardens</li>
<li class ="menu_item">The Temple of Light</li>
<li class ="menu_item">The Black Hand</li>
<li class ="menu_item">The Stone Priests</li>
<li class ="menu_item">The Golden Company</li>
<li class ="menu_item">The Dread Guards</li>
</ul>
</li>
<li class ="menu_item">Character Creation
<ul class ="subMenu1">
<li class ="menu_item"> <a class="allow_default" href="index_personality_test.html" target="blank">Creation Test</a></li>
</ul>
</li>
</ul>
</nav>
</div>
Try something like this:
<nav id="navMenu">
<ul class="clearfix menu">
<li>General
<ul class="subMenu1">
<li class="menu_item" data-item="intro">Introduction</li>
<li class="menu_item" data-item="requirements">What you need</li>
<li class="menu_item" data-item="rules">House Rules</li>
...
And this for the JavaScript:
$('#navMenu, .slicknav_menu').on('click', '.menu_item', function() {
clearBox();
switch($(this).attr('data-item')) {
case 'intro': {
// Do something here.
break;
}
case 'requirements': {
// Do something here.
break;
}
case 'rules': {
// Do something here.
break;
}
// More cases...
}
});
It appears the cloned menu created by SlickNav is placed directly under the <body> element, so you cannot call .on() only on your #navMenu element. You could call it on the body element, but the code above calls it on both the #navMenu and .slicknav_menu elements. The <ul> element generated by SlickNav has the slicknav_menu class on it.
As written, the code above has to be called after you call .slicknav() since it requires the cloned menu exist when it is called. Otherwise, you would have to change to $('body').on(....
As for the rest, the selector '.menu_item' identifies all the menu item elements, so the click-event handler will execute for all of them. But each menu item element has a different value for the data-item attribute. That way you can do something different for each one.
jsfiddle
I have a portfolio site set up and I have my portfolio set up to shuffle through by selecting certain filters. What I want to do is set some header text, based upon which filter they choose.
The issues is when I select a link, let's say advertising, Advertising will show up as my header text. However if I select something else, say branding, it doesn't change, it stays at advertising.
here is my html
<div id="portfolio-filter-container">
<h2 class="workFilterSelect">FILTER OPTIONS: <span class="currentFilter">ALL</span></h2>
</div>
<ul id="portfolio-filter">
<!--<li class="workFilterSelect">FILTER OPTIONS:</li>-->
<li class="workFilterButtons">All</li>
<li class="workFilterButtons">Advertising</li>
<li class="workFilterButtons">Branding</li>
<li class="workFilterButtons">Catalog</li>
<li class="workFilterButtons">Corporate ID</li>
<li class="workFilterButtons">Consumer Relations</li>
<li class="workFilterButtons">Incentive/Loyalty</li>
<li class="workFilterButtons">Packaging</li>
<li class="workFilterButtons">Product Launch</li>
<li class="workFilterButtons">Promotion</li>
<li class="workFilterButtons">Public Relations</li>
<li class="workFilterButtons">Sales Support</li>
<li class="workFilterButtons">Social Media</li>
<li class="workFilterButtons">Tradeshows</li>
<li class="workFilterButtons">Web/Mobile</li>
</ul>
<div id="bottomWrapper">
and here is my script
$(document).ready(function(){
$(".workFilterButtons a").click(function(){
$(".currentFilter").replaceWith($(this).append());
});
});
by default the page is set to "ALL" when loaded, but as you can see I am trying to gett he dynamic text to work within the .currentFilter span
Any help would be greatly appreciated.
If you only want text you use text() method to both get and set. Also you don't want to replace the element or it won't be found again because it will no longer exist
Try
$(".workFilterButtons a").click(function(){
$(".currentFilter").text($(this).text());
});
You don't need to replace the element with the clicked <a> element (unless you really want to), all you need to do is update the text:
$(document).ready(function () {
$(".workFilterButtons a").click(function () {
// selecting the element with the class
// of 'currentFilter', and setting its
// text (using the text() method) to
// the textContent of the clicked <a>
// element:
$(".currentFilter").text(this.textContent);
});
});
$(document).ready(function() {
$(".workFilterButtons a").click(function() {
$(".currentFilter").text(this.textContent);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="portfolio-filter-container">
<h2 class="workFilterSelect">FILTER OPTIONS: <span class="currentFilter">ALL</span></h2>
</div>
<ul id="portfolio-filter">
<!--<li class="workFilterSelect">FILTER OPTIONS:</li>-->
<li class="workFilterButtons">All
</li>
<li class="workFilterButtons">Advertising
</li>
<li class="workFilterButtons">Branding
</li>
<li class="workFilterButtons">Catalog
</li>
<li class="workFilterButtons">Corporate ID
</li>
<li class="workFilterButtons">Consumer Relations
</li>
<li class="workFilterButtons">Incentive/Loyalty
</li>
<li class="workFilterButtons">Packaging
</li>
<li class="workFilterButtons">Product Launch
</li>
<li class="workFilterButtons">Promotion
</li>
<li class="workFilterButtons">Public Relations
</li>
<li class="workFilterButtons">Sales Support
</li>
<li class="workFilterButtons">Social Media
</li>
<li class="workFilterButtons">Tradeshows
</li>
<li class="workFilterButtons">Web/Mobile
</li>
</ul>
<div id="bottomWrapper"></div>
JS Fiddle demo.
Incidentally, the reason your original code didn't work, and couldn't work, is because of this line:
$(".currentFilter").replaceWith($(this).append());
This replaced the selected element(s) with the clicked <a> element, which meant that, in future, the there was no .currentFilter element to replace or update.
On the other hand, if you want to put the clicked <a> element into the .currentFilter span-element, then you could try the following approach:
$(document).ready(function () {
$(".workFilterButtons a").click(function () {
// finding those <li> elements whose text, when trimmed
// (removing leading and trailing white-space) is equal
// to an empty string (''):
var emptyLi = $('.workFilterButtons').filter(function () {
return $(this).text().trim() === '';
}),
// caching the '.currentFilter' element(s):
currentFilter = $('.currentFilter'),
// checking for those elements in the
// currentFilter jQuery object that have
// a descendant <a> element, and finding
// length of that collection, and then
// checking that it's greater than 0:
hasA = currentFilter.has('a').length > 0;
// appending the contents of the currentFilter
// element into the found emptyLi element:
emptyLi.append(currentFilter.contents());
// if there are no <a> elements in the
// currentFilter element(s):
if (!hasA) {
// we replace the contents (textNode 'all')
// with the clicked <a> element:
currentFilter.contents().replaceWith(this);
} else {
// otherwise we append the clicked link to
// the currentFilter; this works because
// once we get to this stage the <a> element
// if it exists has already been moved back
// to the empty <li>, therefore we can't
// use '.contents().replace()' because
// there are no contents remaining by this point
// (and yes, this was incredibly counter-intuitive
// to me for quite a long time, which is why this
// update took a while):
currentFilter.append(this);
}
});
});
$(document).ready(function() {
$(".workFilterButtons a").click(function() {
var emptyLi = $('.workFilterButtons').filter(function() {
return $(this).text().trim() === '';
}),
currentFilter = $('.currentFilter'),
hasA = currentFilter.has('a').length > 0;
emptyLi.append(currentFilter.contents());
if (!hasA) {
currentFilter.contents().replaceWith(this);
} else {
currentFilter.append(this);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="portfolio-filter-container">
<h2 class="workFilterSelect">FILTER OPTIONS: <span class="currentFilter">ALL</span></h2>
</div>
<ul id="portfolio-filter">
<!--<li class="workFilterSelect">FILTER OPTIONS:</li>-->
<li class="workFilterButtons">All
</li>
<li class="workFilterButtons">Advertising
</li>
<li class="workFilterButtons">Branding
</li>
<li class="workFilterButtons">Catalog
</li>
<li class="workFilterButtons">Corporate ID
</li>
<li class="workFilterButtons">Consumer Relations
</li>
<li class="workFilterButtons">Incentive/Loyalty
</li>
<li class="workFilterButtons">Packaging
</li>
<li class="workFilterButtons">Product Launch
</li>
<li class="workFilterButtons">Promotion
</li>
<li class="workFilterButtons">Public Relations
</li>
<li class="workFilterButtons">Sales Support
</li>
<li class="workFilterButtons">Social Media
</li>
<li class="workFilterButtons">Tradeshows
</li>
<li class="workFilterButtons">Web/Mobile
</li>
</ul>
<div id="bottomWrapper"></div>
JS Fiddle demo.
References:
JavaScript:
Node.textContent.
String.prototype.trim().
jQuery:
append().
click().
contents().
filter().
has().
replaceWith().
text().
I changed your class="currentFilter" to id="currentFilter" so now you won't need a .each() to do what you want to do, the selector selects only 1 element and not an array of 1 element.
Also changed replaceWith() with text(), and likewise append() replaced with text().
Here's a fiddle if you want to see it in action
https://jsfiddle.net/s6bpwycn/
I would like to show the active tab's name (text) in a span .active-class.
Example:
<ul class="tabs">
<li class="feinleinen active">feinleinen</li>
<li class="glatt">glatt</li>
</ul >
<span class="active-class">*Active_Tab_Name_Here (i.e. feinleinen) *</span>
What you want is either to have a click event each time a link is clicked and put the text in there?
Javascript:
function changeSpan(var newText){
document.getElementByClassName('active-class').innterHTML(newText);
}
When the above you need to initialise the function. this can be done in the anchor within the list item.
<li><a href='#' onclick='changeSpan("new item name!");'>
Don't forget the hash (#) within the href! This stops the default action, in layman's terms.
With jQuery this can be a bit simpler
$('a','ul.tabs>li').click(function(){//a classname would be a better selector
$('.active-class').appendTo($(this).innerHTML());//can also use $(this).text();
return false;//also stops default action
});
FIDDLE:
HTML
<ul class="tabs">
<li class="feinleinen active">feinleinen
</li>
<li class="glatt">glatt
</li>
</ul>
<span class="active-class">active tab name here</span>
SCRIPT
$('.active-class').text($('.tabs .active').find('a').text());
I guess you want this on click , therefore bit updation to my above code here :-
$('.tabs a').click(function () {
$('.tabs li').removeClass('active');
$(this).parent('li').addClass('active');
$('.active-class').text($(this).text());
});
fiddle: http://jsfiddle.net/x97g8sc7/
$(".active-class").text($(".tabs .active").text());
I have some extensive HTML element in the following (simplified) format:
<div id="firstdiv" class="container">
<ul>
<li id="4"> <a title="ID:4">Tree</a>
<ul>
<li id="005"> <a title="ID:005">Leaf Tree</a>
<ul>
<li id="10"> <a title="ID:10">Fruit Tree</a>
<ul>
<li id="0050338"> <a title="ID:0050338">Apple Tree</a>
<ul>
<li id="399"> <a title="ID:399">Green Apple Tree</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="005"> <a title="ID:005">Conifer</a>
<ul>
<li id="10"> <a title="ID:10">Pine Tree</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I want to access the value of the title attributes of all a-tags inside the div-container with the id="firstdiv" on click.
I tried the following jQuery function but it didn't work:
$("#firstdiv").children("a").on('click', function () { /*some code here*/ });
Any ideas what I'm doing wrong?
children() only goes one deep try find()
$("#firstdiv").on('click', function () {
$(this).find('a').each(function(){
console.log($(this).attr('title'))
})
});
will get all a tags titles when the #first_div is clicked
$("#firstdiv a").on('click', function () {
console.log($(this).attr('title'))
});
will get the title of the a tag you clicked on
children() does what it says, looks at child nodes only - not descendant nodes also. For that, you need find(). However, you need neither in your case, just a change to your selector.
$('#firstdiv a')
As with CSS, a space in the selector denotes a child OR descendant.
According to the jQuery documentation
The .children() method differs from .find() in that .children() only
travels a single level down the DOM tree while .find() can traverse
down multiple levels to select descendant elements (grandchildren,
etc.) as well
So change your selector to:
$("#firstdiv").find("a").on("click", function () {});
This will search everything beneath #firstdiv in your DOM tree.
Or even:
$('#firstdiv a').click(function(){
... do stuff
});
That will select all 'a' elements within #firstdiv
Try this http://jsfiddle.net/ApfJz/22/
$("#firstdiv a").on('click', function () { alert($(this).attr('title')); });
Demo
$(document).ready(function() {
$('#firstdiv a').click(function(){
alert($(this).attr('title'))
});
});
$("#firstdiv").find("a").on('click', function () {
});
I was kindly helped by Jonathan over here simple javascript question-linking button state to image swap?
The problem is that this makes the "active" class the same class for both list items.
Each list item needs to toggle its own active and its own inactive class (each is a button with its own css styling and background image).
Can you please help me modify the script so that I can do that?
Here is Jonathans provided code:
<li class="transcript">
<a id="transcriptionhorbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this);"></a>
</li>
<li class="transcript">
<a id="transcriptionvertbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback);make_active(this);"></a>
</li>
<script>
var buttons = [ document.getElementById("transcriptionvertbutton"),
document.getElementById("transcriptionhorbutton")];
function make_active(el) {
deactivate_buttons();
el.setAttribute("class","active");
}
function deactivate_buttons() {
buttons[0].setAttribute("class","inactive");
buttons[1].setAttribute("class","inactive");
}
</script>
I understand that the problem is here:
function make_active(el) {
deactivate_buttons();
el.setAttribute("class","active");
}
but I don't know enough to separate that into two different classes.
Just add an extra parameter to the function:
function make_active(el, classname) {
deactivate_buttons();
el.setAttribute("class",classname);
}
Then change your calls just a bit. Here is the completed code. Note I changed all calls of setAttribute to .className instead. This was just so you don't run into any trouble with IE6:
<li class="transcript">
<a id="transcriptionhorbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this,'active_class_1');"></a>
</li>
<li class="transcript">
<a id="transcriptionvertbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback);make_active(this,'active_class_2');"></a>
</li>
<script>
var buttons = [ document.getElementById("transcriptionvertbutton"),
document.getElementById("transcriptionhorbutton")];
function make_active(el, classname) {
deactivate_buttons();
el.className = classname;
}
function deactivate_buttons() {
buttons[0].className = "inactive_class_1";
buttons[1].className = "inactive_class_2";
}
</script>