I have been trying to change some things with the Flexslider v2 to fit my needs.
I have been trying to use jQuery to target the parent li of the img class="active" because i want to give it a class of selected but I have not been very successful
<ol class="foo">
<li>
<img src="bar.png" class="active"> <-- This class changes img elements depending on the active slide
</li>
<li>
<img src="bar.png">
</li>
<li>
<img src="bar.png">
</li>
</ol>
I came up with something like this:
$(document).ready(function() {
$('.foo li').children().each(function(index, value) {
if($(value).hasClass('active')) {
$(this).parent('li').addClass('selected');
} else {
$(this).parent('li').removeClass('selected');
}
});
});
and it works in the console, but it does nothing within my main.js file.
LIVE DEMO
Simple like one line:
$('.foo li').find('img.active').closest('li').addClass('selected');
Or if you really need it:
LIVE DEMO
$('.foo li').find('img').each(function(index, el) {
if($(el).hasClass('active')) {
$(el).closest('li').addClass('selected');
} else {
$(el).closest('li').removeClass('selected');
}
});
jQuery API Documentation - Closest
Wrap it i document.ready like this in your main.js and then it should work as expected.
You got it worked in console because all elements are loaded when you runt the script.
$(function(){
$('.foo li').children().each(function(index, value) {
if($(value).hasClass('active')) {
$(this).parent('li').addClass('selected');
} else {
$(this).parent('li').removeClass('selected');
}
});
});
Use closest():
$(this).closest('li'),addClass('selected');
Add $(document).ready(function(){
$(document).ready(function(){
$('.foo li').children().each(function(index, value) {
if($(value).hasClass('active')) {
$(this).parent('li').addClass('selected');
} else {
$(this).parent('li').removeClass('selected');
}
});
});
Check the similar question HERE
$('.foo > li').removeClass('selected').each(function() {
if($(this).find('img').hasClass('active')) {
$(this).addClass('selected');
}
});
Why use .each() ? When we can achieve our goal without it.
$(".foo li img.active").parent().addClass("selected");
Related
Using Bootstrap
<ul class="nav nav-pills nav-stacked col-sm-2 hidden" id="menu">
<li role="presentation" id="LiNewsFeed">News Feed</li>
<li role="presentation" id="LiStatusUpdate">Update Status</li>
<li role="presentation" id="LiWriteWall">Post On Wall</li>
<li role="presentation" id="LiNotifications">Notifications</li>
<li role="presentation" id="LiLogOut">Logout</li>
</ul>
In Javascript, I am disabling some of the <li> like the following:
$('#LiNewsFeed').addClass('disabled');
The Item in the List actually LOOKS disabled, when when I click on it, it actually calls the javascript function, therefore, what I need is to disable the <a href> not just the <li>
I tried adding this after $(document).ready:
$(".nav li.disabled a").click(function () {
return false;
});
But it's not really doing anything.
What I need is to disable the <a href> directly after disabling <li> in my Js code, and not to depend on a click event...
Seems like there is no way to disable an <a href>, so I need a way around it
Any help would be appreciated.
use below code. check working example JSFIDDLE
$(".nav li.disabled a").each(function(){
$(this).attr('href','javascript:void(0);');
});
As you are disabling LI in javascript (runtime), you should use .on to bind events on disabled links:
$(".nav").on('click', 'li.disabled a', function () {
return false;
});
I would check on every link click if the parent has the disabled class.
$('.nav li a').click(function () {
if($(this).parent('li').hasClass('disabled')) {
return false;
}
return true;
});
EDIT, following more info from OP I would suggest the following:
$('.nav li a').each(function() {
var $this = $(this);
// store reference of 'href' attr in case link is re-enabled
$this.data('href', $this.attr('href'));
if ($this.parent('li').hasClass('disabled')) {
// remove href attribute disabling click
$this.removeAttr('href');
} else {
// restore href
$this.attr('href', this.data('href'));
}
});
This code should be run after you add/remove the disabled class on li elements.
EDIT 2 - Rather than you calling functions from the href of <a> links, you could do something like the following:
var events = {
'#LiNewsFeed': 'GetNewsFeed',
'#LiStatusUpdate': 'StatusUpdate'
'#LiWriteWall': 'WriteOnWall',
'#LiNotifications': 'GetNotifications',
'#LiLogOut': 'LogOut'
};
for (var selector in events) {
if (events.hasOwnProperty(selector)) {
try {
$(selector).click(function () {
// assuming function is global
if (typeof window[events[selector]] === 'function') {
// call function
window[events[selector]]();
}
// this is needed if the a element still has a href attr
return false;
});
} catch (e) {
console.log('Invalid Selector');
}
}
}
This way you can control the calling of the function, and check whether it should be called without altering the element, perhaps stick an
if (!$(this).parent('li').hasClass('disabled')) {
...
}
around the function call.
can you convert the a into span?
(code not tested)
$(".nav li.disabled a").replaceWith(function() { return "<span>" + this.innerHTML + "</span>"; });
I am trying to toggle an image when a class is clicked. So far I have this (below) and it works to change my 'plus.png' to my 'minus.png' but I need it to change back to my 'plus.png' if the class is clicked again.
I have the following jQuery:
<script type="text/javascript">
$(document).ready(function () {
$('label.tree-toggler, .yellow').click(function () {
$(this).parent().children('.yellow').attr('src', 'img/minus.png');
});
});
</script>
HTML
<li><label class="tree-toggler nav-header">Saftey and Emissions</label><img class="yellow" src="img/plus.png"><hr></hr>
<ul class="nav nav-list tree">
<li>link<img class="yellow" src="img/chevron-right.png"><hr></hr></li>
<li>link<img class="yellow" src="img/chevron-right.png"><hr></hr></li>
</ul>
</li>
Is someone could help me out by adding to what I have, it would greatly be appreciated!
You can add/remove a class to keep track of which image src you are using. Something like this:
$('label.tree-toggler, .yellow').click(function () {
if ( $(this).parent().children('.yellow').hasClass('minus') ) {
$(this).parent().children('.yellow').attr('src', 'img/plus.png').removeClass('minus');
} else {
$(this).parent().children('.yellow').attr('src', 'img/minus.png').addClass('minus');
}
});
You could also use a data attribute and do something similar:
$('label.tree-toggler, .yellow').click(function () {
if ( $(this).parent().children('.yellow').data('current_src') == 'minus') {
$(this).parent().children('.yellow').attr('src', 'img/plus.png').data('current_src', 'plus');
} else {
$(this).parent().children('.yellow').attr('src', 'img/minus.png').data('current_src', 'minus');
}
});
Using the data attribute would require initially setting data-current_src='minus' on the element.
the way i will do it is...
$(document).ready(
function() {
$(".className").click(
var imgPath = $("img").attr('src');
if(imgPath === "+.png") { // check against current path
// change the path to -
} else {
// change the path to +
}
); } );
i didn't test it, but that's the idea
I would recommend adding another class like .active or .shown through JQuery when you switch the image around. That way you could check the current state of the object you're querying.
The Jquery would probably look something like
$('label.tree-toggler, .yellow').click(function () {
// If the active class is NOT applied
if( !( $(this).parent().children('.yellow').hasClass('active') ) ) {
// Apply it and change the image
$(this).parent().children('.yellow').addClass('active').attr('src','img/minus.png');
}
else
$(this).parent().children('.yellow').removeClass('active').attr('src', 'img/plus.png');
});
What's happening here is the active class is being used to determine the state of the image displayed. When you click it, you'll change the image and apply the flag.
After every click the flag is checked and behaves accordingly. Hope that helps! I'm still new to S.O. =.="
If you want to do it in JS, I suggest you to put :
your initial image in src
your alternative image in data-alternative
Like this :
<li>
<label class="tree-toggler nav-header">Saftey and Emissions</label>
<img class="yellow" src="img/plus.png" data-alternative="img/minus.png"><hr></hr>
<ul class="nav nav-list tree">
<li>link<img class="yellow" src="img/chevron-right.png"><hr></hr></li>
<li>link<img class="yellow" src="img/chevron-right.png"><hr></hr></li>
</ul>
</li>
And the JS :
<script type="text/javascript">
$(document).ready(function () {
$('label.tree-toggler, .yellow').click(function () {
var yellow = $(this).parent().children('.yellow').first();
var alternative = yellow.data('alternative');
yellow.data('alternative', yellow.attr('src'))
.attr('src', alternative );
});
});
</script>
Did you see the toggle function of Jquery?
http://api.jquery.com/toggle/
im trying to check if one of the DIV's has class "visible" which is being add by a jquery plugin, it seems not to work.
it works when i check the first element, but if i want to check next div, it doenst finds it.
help is appreciated.
My DIV
<div class="swiper-slide welcome" id="welcome"></div>
2nd DIV
<div class="swiper-slide intro-early-life" id="intro-early-life"></div>
MY JQUERY
<script type="text/javascript">
$(document).ready(function() {
if ($('.welcome').hasClass('swiper-slide-visible')) {
alert("working");
}
});
</script>
Im not using same ID, maybe it was my bad explanation. I can use the class as well, no difference.
$(document).ready(function() {
if ($('#welcome').hasClass('swiper-slide') && $('#welcome').hasClass('visible')) {
alert("working");
}
});
if ($('#welcome').is(":visible") && $('#welcome').hasClass("swiper-slide")) {
alert("Yeah!");
}
Perhaps that would work better?
Edit: Also swiper-slide-visible class doesn't exist on the page - perhaps this is the issue...?
You can use also as
$(document).ready(function() {
if ($('#welcome').hasClasses(['swiper-slide', 'visible']);) {
alert("working");
}
});
$.fn.extend({
hasClasses: function (selectors) {
var self = this;
for (var i in selectors) {
if ($(self).hasClass(selectors[i]))
return true;
}
return false;
}
});
Use .is()
if ($('#welcome').is('.swiper-slide, .visible'){
Id Must Be unique you can use classes instaed
Two HTML elements with same id attribute: How bad is it really?
You could use .is() instead:
$(document).ready(function() {
if ($('.welcome').is('.swiper-slide.visible')) {
alert("working");
}
});
In Jquery or JavaScript have a function like .hasNext(). I have the code:
function showArrowClick() {
var activeContact = $('.contact.white_bg');
activeContact.removeClass('white_bg');
activeContact.next().addClass('white_bg');
}
and parent div is
<div class="list">
<div class="contact white_bg all_contacts">All</div>
<div class="contact">Contact1</div>
<div class="contact">Contact2</div>
</div>
After click last div need to do something. How can I do it?
You'll probably want :last-child.
$('a').click(function() {
$('.list .contact:last-child').doSomething();
});
Edit:
Or if you meant clicking the last child itself...
$('.list .contact:last-child').click(function() {
$(this).doSomething();
});
You should verify if there is any element when you're trying to select it:
function showArrowClick() {
var activeContact = $('.contact.white_bg');
if(activeContact.next('div.contact').length > 0) {
activeContact.removeClass('white_bg');
activeContact.next().addClass('white_bg');
}
}
Try Something Like
$('.list').find("div.contact:last").addClass('white_bg');
Second
$('.list .contact:last-child').addClass('white_bg');
Have you looked at $.fn.nextAll()?
Use the:last-child selector
$(".list div:last-child").on('click', function(){
//Do something
});
function showArrowClick() {
var activeContact = $('.contact.white_bg');
var index = activeContact.index();
if (index === $(".contact.white_bg").children().length - 1) {
// Current seleceted is the last div
}
activeContact.removeClass('white_bg');
activeContact.next().addClass('white_bg');
}
You can try .next() to check. read more. Use it with the .length method to get to check if there are any more item on the DOM.
Sample code
alert($('div.contact').next().length);
Example HTML (for the sake of clarity):
<nav>
<ul>
<li class="top-navbar-channels">
<div class="dropdown-menu">BLAH, BLAH, BLAH!</div>
</li>
<li class="top-navbar-about">
<div class="dropdown-menu-about">BLAH, BLAH, BLAH!</div>
</li>
<li class="top-navbar-search">
<div class="dropdown-menu-search">BLAH, BLAH, BLAH!</div>
</li>
</ul>
</nav>
Example jQuery code:
jQuery(document).ready(function($){
$('.dropdown-menu').on('show', function () {
$('.top-navbar-channels > a').addClass('selected');
});
$('.dropdown-menu').on('hide', function () {
$('.top-navbar-channels > a').removeClass('selected');
});
$('.dropdown-menu-about').on('show', function () {
$('.top-navbar-about > a').addClass('selected');
});
$('.dropdown-menu-about').on('hide', function () {
$('.top-navbar-about > a').removeClass('selected');
});
$('.dropdown-menu-search').on('show', function () {
$('.top-navbar-search > a').addClass('selected');
});
$('.dropdown-menu-search').on('hide', function () {
$('.top-navbar-search > a').removeClass('selected');
});
});
For those who are curious... the jQuery code adds a new class selected to the active menu item's link. In my case it's Twitter Bootstrap-based collapsible menu, where active means, the menu item is not collapsed i.e. open.
Now, the question is, can the jQuery code be optimized (i.e. same functionality with less code)? If so, how?
Add a common class to common main elements so you can use that single class as the selector. You can also combine the events into one on() call and use toggleClass() on the link. on() allows for multiple space separated events
Example
<div class="dropdown-menu menu_content">
Then for jQuery:
$('.menu_content').on('show hide', function () {
$(this).siblings("a").toggleClass('selected');
});
Perhaps, this code:
jQuery(document).ready(function($){
var $menus = $('.dropdown-menu, .dropdown-menu-search, .dropdown-menu-about');
$menus.on('show', function () {
$(this).siblings("a").addClass('selected'); // or alternatively, $(this).prev("a")
});
$menus.on('hide', function () {
$(this).siblings("a").removeClass('selected'); // idem as above
});
});
This is a little shorter then Matthias... not very much shorter
$(function(){
$('.dropdown-menu, .dropdown-menu-search, .dropdown-menu-about').on('show',function(){
$(this).siblings('a').addClass('selected');
}).on('hide',function(){
$(this).siblings('a').removeClass('selected');
});
});