Why $('a.current').removeClass('current'); is not working? - javascript

Why $('a.current').removeClass('current'); is not working for this jquery tabs?
http://jsfiddle.net/laukstein/ytnw9/8/
//full JS in http://jsfiddle.net/laukstein/ytnw9/8/
$(function(){
var list=$('#list'),
elementsPerRow=-1,
loop=true,
// find first image y-offset to find the number of images per row
topOffset=list.find('a:eq(0)').offset().top,
numTabs=list.find('li').length-1,
current,newCurrent;
function changeTab(diff){
// a.current set by jQuery Tools tab plugin
$('li.current').removeClass('current');
current=list.find('a.current').parent('li').addClass('current').index();
newCurrent=(loop)?(current+diff+numTabs+1)%(numTabs+1):current+diff;
if(loop){
if(newCurrent>numTabs){newCurrent=0;}
if(newCurrent<0){newCurrent=numTabs;}
}else{
if(newCurrent>numTabs){newCurrent=numTabs;}
if(newCurrent<0){newCurrent=0;}
}
// don't trigger change if tab hasn't changed (for non-looping mode)
if (current!=newCurrent){
list.find('li').eq(current).removeClass('current');
list.find('li').eq(newCurrent).addClass('current').find('a').trigger('click'); // trigger click on tab
}
}
list
// set up tabs
.tabs("#content",{effect:'ajax',history:true, xonBeforeClick:function(){changeTab(0)}})
// find number of images on first row
.find('a').each(function(i){
if(elementsPerRow<0&&$(this).offset().top>topOffset){
elementsPerRow=i;
}
});
//$('a').filter('.current').parent('li').addClass('current'); // Why does not work?
//$('a.current').parent('li').addClass('current'); // Why does not work?
$('ul#list li').click(function(){$('li.current').removeClass('current');$(this).addClass('current')});
$('a.current').removeClass('current'); // Why does not work?
});
HTML:
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="content"></div>​

As far as I can tell (I don't yet have a working page running your code), but it appears that the "current" class is only applied to "li" elements.
I think your $("a.current") will always contain 0 elements.

it doesn't work because you haven't any <a> in your page with the class .current
You can check it out by yourself :
alert($('a.current').length);
will return you 0...

Your .removeClass() call is working does clear the class, but then this line in your history plugin:
links.eq(0).trigger("history", [h]);
Is triggering your it to load the first link as in the <iframe> as the default...which is selecting that link again, adding the class back, it's ultimately the tab plugin selecting the first tab and at this line:
tab.addClass(conf.current);
Adding the class back to the anchor (the anchor is tab at that point).
Here's your fiddle updated with an alert to see what's happening a bit easier.

Related

Jquery. Hide other elements, except this

I‘m using Pollate Template for creating polls. There is a list of user's created Polls, after clicking 3 dots (menu icon), the dropdown list shows up with the option to delete this poll. If the submenu is shown and you click anywhere on the screen it hiding.
But I found a bug, that if you clicking on another sub-menu icon it not hiding other sub-menus (look at the image below).
It should be hidden when clicking anywhere, even if it's a sub-menu icon of another entry.
There is HTML structure:
<div class="pl-options">
<ul class="dropdown"></ul>
</div>
<div class="pl-options">
<ul class="dropdown"></ul>
</div>
After clicking a - dropdown shows up.
There is JQuery:
$.puerto_droped = function( prtclick, prtlist = "ul.dropdown" ){
$(prtclick).livequery('click', function(){
var ul = $(this).parent();
if( ul.find(prtlist).hasClass('open') ){
ul.find(prtlist).removeClass('open');
$(this).removeClass('active');
if(prtclick == ".pl-mobile-menu") $('body').removeClass('active');
} else {
ul.find(prtlist).addClass('open');
$(this).addClass('active');
if(prtclick == ".pl-mobile-menu") $('body').addClass('active');
}
return false;
});
$("html, body").livequery('click', function(){
$(prtclick).parent().find(prtlist).removeClass('open');
$(prtclick).removeClass('active');
if(prtclick == ".pl-mobile-menu") $('body').removeClass('active');
});
}
prtclick -> .pl-user-options
I think that this function $("html, body").livequery('click', function(){... should be edited, but can't achieve it successfully. I've tried in many ways but failed.
One of my tries was:
$(prtclick).click(function(evt){
$(prtclick).find(prtlist).removeClass('open');
$(prtclick).removeClass('active');
if(prtclick == ".pl-mobile-menu") $('body').removeClass('active');
});
But now it not showing sub-menu at all. I need to make an exception for the current entry. Have you any ideas? Thank you.
Before you check for .open class, you can toggle off all other ul.dropdowns.
$(this).closest('.row').siblings('.row').removeClass('active')
.find('ul.dropdown').removeClass('open');
Get current clicked a main parent which has 'row' class,
get its siblings, remove 'active' class of them,
get all ul.dropdowns inside those siblings and remove 'open' class of those uls

hide/show div based on url doesn't work at the first load of the multi html pages

I already check here on stackoverlow and I didn't find what I need.
I'm trying to hide and show some DIV based on the #url and It's almost done but the first time you enter in that html page (it's a three different page website) the function doesn't work.
here the function I use:
/***************
HIDE BANDS DEPENDING ON THE URL
***************/
// Bind the event.
window.onhashchange = updatebands;
function updatebands() {
if (location.href.match(/projectos.html#bandOne/)){
$('#bandOne').css("display", "block");
$('#bandTwo').css("display", "none");
$('#bandThree').css("display", "none");
}
if (location.href.match(/projectos.html#bandTwo/)){
$('#bandOne').css("display", "none");
$('#bandTwo').css("display", "block");
$('#bandThree').css("display", "none");
}
if (location.href.match(/projectos.html#bandThree/)){
$('#bandOne').css("display", "none");
$('#bandTwo').css("display", "none");
$('#bandThree').css("display", "block");
}
};
I've tried also to complement the CSS file with the code below but when enter for the first time I have the same problem (this time it all hides instead of all shown)
.section {
display: none;
}
I think it's because I load the html and the function doesn't work, how can I solve this problem?
Here my repo with the live page link written in it:
https://github.com/sebalaini/costanzo
When you enter the page for the first time the window.onhashchange isn't getting triggered, so nothing there will run.
If you want - you can also use the window.onload function (or better use the window.addEventListener to make sure you don't override anything and no script will override your function):
window.addEventListener("load", function(event) {
updatebands()
});
Note that you still need to keep the hashchange event:
window.addEventListener("hashchange", function(event) {
updatebands()
});
Using only CSS :target pseudo-class:
p{ display:none; } /*- hide all paragraphs initially */
:target{ display:block; } /* only shows the one which the "hash" is pointing at */
<ol>
<li>Show part 1</li>
<li>Show part 2</li>
<li>Show part 3</li>
</ol>
<p id="p1">Part 1</p>
<p id="p2">Part 2 is this one</p>
<p id="p3">This is part 3</p>
when the URL contains the hash part which matches an id id a paragraph, only that paragraph will be displayed. no javascript used.

jQuery Sortable not working on nested link

I'm using Bootstrap Tab and applying the Drag effect of jQuery Sortable. So far it's working fine on the first level including the Bootstrap Tab. But when it goes to the level 3 of nested level, drag effect is not working properly.
Also the Bootstrap Tab view on the 2nd and 3rd level, each of it's link is not loading the corresponding div view (the one with .tab-pane and reference id), but the first level is working fine. I created a click function of each links to remove the parent 'active' class which displays the links view div upon clicked but seems nothing to work.
var nestedList = $("ul.nested_with_switch li ul").children("li");
nestedList.click(function(){
$(this).data('clicked', true);
})
nestedList.click(function(){
if($(this).data('clicked') === true){
nestedList.parents("ul li").removeClass("active");
nestedList.find("li").removeClass("active");
}
})
Here's the Code.
Start with removing what seems to be code that does nothing... replace:
nestedList.click(function(){
$(this).data('clicked', true);
})
nestedList.click(function(){
if($(this).data('clicked') === true){
nestedList.parents("ul li").removeClass("active");
nestedList.find("li").removeClass("active");
}
})
with:
nestedList.click(function(){
nestedList.parents("li").removeClass("active");
nestedList.find("li").removeClass("active");
})
Next, you probably want to use .children("li") instead of .find("li"), but I'm not 100% sure what you're trying to accomplish with your code.

javascript: swap DOM nodes

What i want to do is swapping two HTML DOM nodes.
Let's take the following HTML list and the swap button below:
<ul class="center-text">
<li>0</li>
<li>1</li>
<li>2</li>
</ul>
<form class="center-text">
<button id="swapButton">Swap</button>
</form>
And here is my JS code:
// the "ready" method is the only jQuery method used in the code
$(document).ready(function(){
document.getElementById("swapButton").onclick = function() {
var ul = document.getElementsByTagName("ul")[0];
// pseudo-swapping: insert "child2" before "child0"
// (indexes are 1 and 5 because of the TextNodes between list nodes)
ul.insertBefore(ul.childNodes.item(5), ul.childNodes.item(1));
}
});
So here is what happens when clicking the swap button:
The items are swaped indeed. But Somehow after (let's say 1/4) seconds they are restored to their original position, i.e. swaped back automatically.
My question is: WHY?
PS: the code is merely for educational purposes and i only try to understand what's going on behind the doors, so please do NOT post any alternative jQuery method.
$(document).ready(function(){
document.getElementById("swapButton").onclick = function(e) {
e.preventDefault();
var ul = document.getElementsByTagName("ul")[0];
ul.insertBefore(ul.childNodes.item(5), ul.childNodes.item(1));
}
});
This is because button redirects the page to same page. And reverts all. You need to prevent the default behaviour of button.

How to toggle every jQuery element except the clicked?

So I'm trying to achieve something seemingly very basic in jQuery. I have a number of "headers," and when I click on a header I want the info beneath that header to slide down, and all other header info to slide up (so that only one header is showing info at a time).
Here's sudo code of what I want to happen:
$('.more-info-header:not(.jquery-processed)').addClass('jquery-processed').click(function(e) {
$(this).children('.game-info-text').slideToggle("Slow");
[all other ('.game-info-text')].slideUp(fast)
});
For the life of me though, I can't figure out how to code that second line ([all other ('.game-info-text')]). Any help is much appreciated!
(I'm implementing this as a drupal behavior, which is why I have the "jquery-processed" class being added)
Something like:
$('.more-info-header:not(.jquery-processed)').addClass('jquery-processed').click(function(e) {
$(this).children('.game-info-text').slideToggle("Slow");
$('.more-info-header').not(this).children('.game-info-text').slideUp(fast);
// ^-- removes the clicked element from all `.more-info-header`
});
Reference: .not()
Sounds like you're after the jQuery UI Accordion plugin.
$('.more-info-header:not(.jquery-processed)')
.addClass('jquery-processed').click( function(e) {
var these = $(this).children('.game-info-text').slideToggle("slow");
$('.game-info-text').not(these).slideUp("fast");
});
With the not() function you can exclude the already selected elements.
Like this?
$('.more-info-header').click(function(e){
var target = e.target || e.srcElement;
$(this).children().not(target).find('.game-info-text').slideUp('fast');
$('.game-info-text', target).slideToggle("slow");
});

Categories