I have two function which have same property. But I don't know how to merge in a one consolidate function and I tired to google it but don't know what exactly the keyword for this
$test = $('.slider .pager li.slide1 a'),
$test1 = $('.slider .pagination li a')
$test.bind('click', function(e) {
e.preventDefault();
sliderHandler.slideFirst();
alert("1");
});
$test1.bind('click', function(e) {
e.preventDefault();
sliderHandler.slideFirst();
});
Its working fine for me. But I just want to make it more smaller and nice.
Why don't try?
$test = $('.slider .pager li.slide1 a,.slider .pagination li a'),
$test.bind('click', function(e) {
e.preventDefault();
sliderHandler.slideFirst();
alert("1");
});
In your case, just update the selector to select all elements that you need to apply the same logic.
Update:
If they are global variables already, we can try merging them:
$.merge( $.merge( [], $test), $test1).bind('click', function(e) {
e.preventDefault();
sliderHandler.slideFirst();
});
As pointed out by #doubleswirve in the answer below, we could also use add instead of merge: $test.add($test1).bind('click'
What about using the jQuery .add method (similar to #Khanh TO's answer):
// Assuming these have already been declared
$test = $('.slider .pager li.slide1 a');
$test1 = $('.slider .pagination li a');
$test.add($test1).bind('click', function(e) {
e.preventDefault();
sliderHandler.slideFirst();
alert("1");
});
Here's a CodePen demonstrating a similar example.
$test = $('.slider li a');
$test.click(function(e) {
e.preventDefault();
sliderHandler.slideFirst();
if ($(this).parent().hasClass('slide1'))
alert("1");
});
Related
I have five anchor elements in my navigation. I want to get index of clicked element with jQuery. I tried this code.
$('.navigation ul li a').click(function(e) {
e.preventDefault();
var el = $(this).index();
console.log(el);
})
But every time I get zero in console.
https://jsfiddle.net/2hg2fkda/ fiddle is here.
Any help will be appreciated. Thanks,
try this:
$('.navigation ul li').click(function(e) {
e.preventDefault();
var el = $(this).index();
console.log(el);
})
Index can be fetched if its list .
Replace your code here -
var el = $(this).parent().index();
LIVE https://jsfiddle.net/mailmerohit5/hg0dqnxb/
you can try this one:
$('.navigation ul li ').click(function (e) {
alert($(this).index());
});
DEMO
you can also try this!!
var el = $(this).closest('li').index();
Demo
How can I do so that even "toggle_cart" is clickable in the same way as "clickerHeader"
but retains its hover effect (see arrow)?
please see http://jsfiddle.net/realitylab/STE48/3
$('.eventMenu > ul').toggleClass('no-js js');
$('.eventMenu .js ul').hide();
$(document).on("click", function(e) {
var $elem = $(e.target);
if ($elem.hasClass('clickerHeader')) {
$('.eventMenu .js ul').not($elem.next('ul')).hide();
$elem.next("ul").slideToggle();
} else if (!$($elem).parents('.contentHolderHeader').length) {
//} else {
$('.eventMenu .js ul').hide();
}
});
Just wrap both elements in a div ..
http://jsfiddle.net/STE48/5/
.
In the CSS add:
.eventMenu:hover .no-js .contentHolderHeader {
display: block;
}
Also add a display: none to div.eventMenu .contentHolderHeader.
Replace the JS with:
$('.eventMenu > ul').toggleClass('no-js js');
$(".toggle_cart").click(function(e){
$(".contentHolderHeader").slideToggle();
e.stopPropagation();
});
$(".eventMenu").click(function(e){
e.stopPropagation();
});
$(document).click(function(){
$(".contentHolderHeader").slideUp();
});
Remove the inner ul in the HTML.
Tested with/without JS: http://jsfiddle.net/vuF9n/2/
A minimal change to your existing code is to add the following two lines after the first line of your click function:
if ($elem.hasClass('toggle_cart'))
$elem = $elem.next();
In other words, if the span with the arrow is clicked, pretend that actually the anchor element was clicked. In context:
$(document).on("click", function(e) {
var $elem = $(e.target);
if ($elem.hasClass('toggle_cart'))
$elem = $elem.next();
if ($elem.hasClass('clickerHeader')) {
// etc.
Demo: http://jsfiddle.net/STE48/6/
I have some code that uses jquery:
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
And I converted it to use mootools
window.addEvent('domready', function() {
$$('#tabs div').hide();
$$('#tabs div:first').show();
$$('#tabs ul li:first').addClass('active');
$$('#tabs ul li a').addEvent('click', function(event) {
$$('#tabs ul li').removeClass('active');
$$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$$('#tabs div').hide();
$$(currentTab).show();
return false;
});
});
But I get an error: $$(this).parent is not a function
How do I fix it?
this is quite poor. many bad practices and api differences.
window.addEvent('domready', function() {
// cache what we will reuse into vars
var tabs = document.id('tabs'),
divs = tabs.getElements('div'),
// for loop
len = divs.length,
ii = 1;
// hide all but the first one w/o extra lookups.
for (;ii < len;++ii)
divs[ii].hide();
// first match
tabs.getElement('ul li').addClass('active');
// attach the events to all links
tabs.getElements('ul li a').addEvent('click', function(event) {
event && event.stop();
tabs.getElement('ul li').removeClass('active');
this.getParent().addClass('active');
tabs.getElement(this.get('href')).show();
return false;
});
});
basically, a few practices you need to consider:
cache your selectors, esp repetitive stuff
avoid going to dom and work from memory
use normal js array looping or methods to avoid an extra selector like :first or :last, you already have the data
stop the event directly, don't return false
.getElement() will return the first match
avoid storing stuff into variables that you won't reuse
consider using event delegation and attaching a click handler once to the ul rather than to all child A's - eg, tabs.getElement('ul').addEvent('click:relay(li a)', fn) will achieve the same but only create a single event handler
there is no parent method in mootools, instead, the method name is getParent.it is not difficulty to convert from jquery to mootools. it is helpful having a look on docs.
I've got a very basic jQuery tab setup. Everything worked fine, but I needed a hash in the URL to dictate the active tab, so I added a condition to check for the hash. Now when the page loads, it's actually activating the anchor and shifting the page down. Why isn't the "return false;" working?
$(document).ready( function() {
$(".tabs a").click(function() {
$(".tabs a").removeClass("active");
$(".tabs a").addClass("button secondary");
$(this).attr("class","button active");
var href = $(this).attr("href");
$(href).parent().find("> .active").removeClass("active");
$(href).addClass("active");
return false;
});
if(window.location.hash) {
$(".tabs a[href$='"+window.location.hash+"']").click();
} else {
$(".tabs a:eq(0)").click(); //default to first tab
}
});
**
Here are some updates:
**
If I simply enter the actual hash value instead of pull it from window.location.hash, it works perfectly.
$(".tabs a[href$='#Contact2']").click();
Clicking the different tabs DOES NOT shift the page, only when the page loads and automatically clicks the tab based on the hash value.
If I place a conditional and then automatically click without using a a variable within the jquery selector, it works fine, assuming the location hash does not match the hash I'm clicking (strange, I know...)
if(window.location.hash === "#Contact2") {
$(".tabs a[href$='#Contact4']").triggerHandler("click");
} else {
$(".tabs a:eq(0)").click(); //default to first tab
}
This really doesn't make much sense to me. It seems that the only issue is using the window.location.hash within the jquery selector...
Maybe also this code should make your work:
$(".tabs a").click(function(){
// your code
return false;
});
The other way is:
$(".tabs a").click(function(e) {
e.preventDefault();
// your code
});
Your approach is very recursive. Try to avoid running a collection across a collection.
Here are a few snippets from a jQuery 1.7+ implementation that might do what you need.
... initialization
$(body).on("click", ".tabs a", { }, _selectTab);
... some function
_selectTab : function(event) {
$(".tabs a").removeClass(selected); // clear all matches.
$(event.currentTarget).addClass(selected); // something like that.
}
Try preventDefault() instead. Don't forget the e inside .click(function(e).
$(document).ready( function() {
$(".tabs a").each(function() {
$(this).click(function(e) {
e.preventDefault();
$(".tabs a").removeClass("button secondary active");
$(".tabs a").addClass("button secondary");
$(this).attr("class","button active");
var href = $(this).attr("href");
$(href).parent().find("> .active").removeClass("active");
$(href).addClass("active");
});
});
if(window.location.hash) {
$(".tabs a[href$='"+window.location.hash+"']").click();
} else {
$(".tabs a:eq(0)").click(); //default to first tab
}
});
And then chaining some things together...
$(document).ready( function() {
$(".tabs a").each(function() {
$(this).click(function(e) {
e.preventDefault();
$(".tabs a").removeClass("button secondary active").addClass("button secondary");
$(this).attr("class","button active");
var href = $(this).attr("href");
$(href).parent().find("> .active").removeClass("active")
$(href).addClass("active");
});
});
if(window.location.hash) {
$(".tabs a[href$='"+window.location.hash+"']").click();
} else {
$(".tabs a:eq(0)").click(); //default to first tab
}
});
I'm not sure what you're doing here...
$(".tabs a").removeClass("button secondary active")
$(".tabs a").addClass("button secondary");
The second line instantly adds two classes you removed with the first line.
Instead of .click() use .triggerHandler("click")
Also, your click handler needs an e event parameter and you need to call e.preventDefault() instead of the old-school return false.
Lastly, instead of if(window.location.hash) use if(window.location.hash.length > 0)
Pure Javascript Solution to stop all hash default click
var a_tag = document.getElementsByTagName('a');
for (var i = 0; i < a_tag.length; i++) {
a_tag[i].addEventListener('click', function (e) {
var lastChar = this.href.substr(this.href.length - 1);
if (lastChar == "#") {
e.preventDefault();
}
}, false);
}
I'm new to Dojo (quite experienced in jQuery) for a project, and am working on adding/removing some classes that will change styles for main navigation links and drop-downs.
Here is the code I've written:
dojo.addOnLoad(function() {
dojo.query('#primary-nav > ul > li > div').forEach(function(container) {
var hoverToggles = dojo.query('> a, > ul', container),
link = dojo.query('> a', container);
dojo.connect(link, 'onmouseover', function() {
dojo.addClass(hoverToggles, 'hover');
});
dojo.connect(link, 'onmouseout', function() {
dojo.removeClass(hoverToggles, 'hover');
});
});
});
No code placed into the event handlers is run (console.log, alert). Values for link and hoverToggles are correct.
Am I doing something wrong here?
Side question: Is there a more Dojo-idiomatic way of doing this?
dojo.query() returns a NodeList. dojo.addClass() and the rest work with DOM nodes.
Try something like that:
dojo.addOnLoad(function() {
dojo.query('#primary-nav > ul > li > div').forEach(function(container) {
var hoverToggles = dojo.query('> a, > ul', container),
link = dojo.query('> a', container);
link.onmouseover(function() {
hoverToggles.addClass('hover');
});
link.onmouseout(function() {
hoverToggles.removeClass('hover');
});
});
});