I have the following two JavaScript function:
JS 1
$( ".show-more" ).click(function() {
event.preventDefault();
$( this ).next().slideToggle( "fast", function() {
});
$( this ).toggleClass("show-more-rotate");
});
JS 2
$( ".show-more-section" ).click(function() {
event.preventDefault();
$( this ).next().slideToggle( "fast", function() {
});
$( this ).toggleClass("show-more-section-rotate");
});
Is there a way to concatenate the two functions into one? I tried the following, but the functionality seems to only be working for the last listed element:
JS - Failed attemp at concatenating
$( ".show-more, .show-more-section" ).click(function() {
event.preventDefault();
$( this ).next().slideToggle( "fast", function() {
});
$( this ).toggleClass("show-more-rotate, show-more-section-rotate");
});
See comments inline:
// bind event on both the elements
$(".show-more, .show-more-section").on('click', function (event) {
// ^^^^^^ Add this
event.preventDefault();
$(this).next().slideToggle("fast", function () {});
$(this).toggleClass("show-more-rotate show-more-section-rotate");
// Remove `,` from toggleClass
});
EDIT
You can also chain the methods as:
$(this).toggleClass("show-more-rotate show-more-section-rotate")
.next().slideToggle("fast", function () {});
Update
If you want to toggle class after slideToggle is completed:
var $this = $(this);
$this.next().slideToggle("fast", function () {
$this.toggleClass("show-more-rotate show-more-section-rotate")
});
try this:-
$(".show-more, .show-more-section").on('click', function (event) {
event.preventDefault();
$(this).next().slideToggle("fast", function () {});
if($(this).is('.show-more'))
{
$(this).toggleClass("show-more-rotate");
}else
{
$(this).toggleClass("show-more-section-rotate");
}
});
Demo
You can create the handler function and can reuse it in the click handler
$( ".show-more" ).click(showMoreClickHandler);
$( ".show-more-section" ).click(showMoreClickHandler);
function showMoreClickHandler(e) {
e.preventDefault();
$( this ).next().slideToggle( "fast", function() {});
$( this ).toggleClass("");
}
For toggle class, you can add data-toggle-class attribute in HTML and can read the value and perform toggling.
I hope, show-more-rotate and show-more-section-rotate should be applied on it's respective element not on the other.
Remove the comma in the toggleClass:
$(".show-more, .show-more-section").on('click', function (event) {
event.preventDefault();
$(this).next().slideToggle("fast", function () {
});
$(this).toggleClass("show-more-rotate show-more-section-rotate");
});
Related
Is it possible listen click and change for one code?
$(document).on("click", "button.options_buy",function(event) {
// same code
}
$(document).on("change", "select.options_buy",function(event) {
// same code
}
I try this
$(document).on("click change", "button.options_buy,select.options_buy",function(event) { }
It works but I want 'click' only for 'button.options_buy' and 'change' for 'select.options_buy'
is it possible?
Best way to do it is to have two event handlers as you have, but only have a common function that is called from each:
$(document).on("click", "button.options_buy",function(event) {
commonFunction();
})
$(document).on("change", "select.options_buy",function(event) {
commonFunction();
})
function commonFunction(){
//common function code
}
I would like to extend your code.
$(document).on("click change", "button.options_buy,select.options_buy",function(event) {
if(event.type=="click"){
someFunction();
} else if(event.type=="change"){
someFunction();
}
}
You can use .on() to bind a function to multiple events:
$('#foo').on('keypress click change', function(e) {
//
});
OR declare a function and call it for each event
$('#foo')
.change(myFunction)
.click(myFunction)
.blur(myFunction)
jQuery .bind()
$( "#foo" ).bind({
click: function() {
// Do something on click
},
mouseenter: function() {
// Do something on mouseenter
}
});
OR
$( "#foo" ).bind( "mouseenter mouseleave", function() {
$( this ).toggleClass( "entered" );
});
I used OnClick drop down text with JavaScript and HTML code to make the dropdown hidden div project.
But the problems are:
1 - It won't open divs separatelly, all of the "projects" are open at once;
2 - I won't come back up once I click it again.
I made another line of code to make it go up:
$(function() {
$(".project").on('click', function() {
$(this).parent().find('.details').slideDown();
});
$(".project").on('click', function() {
$(this).parent().find('.details').slideUp();
});
});
$(function() {
$(".project2").on('click', function() {
$(this).parent().find('.details').slideDown();
});
$(".project2").on('click', function() {
$(this).parent().find('.details').slideUp();
});
});
And so on... and it goes up as soon as I click it only once, like an animation. It won't stay down and THEN on the next click it goes back up. AND it still gets both down instead of each one separately.
You shouldn't use document.ready to often if isn't needed.
// Shorthand for $( document ).ready()
$(function() {
});
If you bind two events to an element, .. it will be executed if you don't stopPropergation or making "cases".
So you can check the visibility and decide what to do:
$( function () {
$("[class^='project']").on( 'click', function () {
var $details = $( this ).parent().find( '.details' );
if ($details.is(':visible'))
$( this ).parent().find( '.details' ).slideUp();
else
$( this ).parent().find( '.details' ).slideDown();
});
} );
https://jsfiddle.net/3738Lnmf/
edit:
slideToggle is more elegant :) #Diego López
$( function () {
$("[class^='project']").on( 'click', function () {
$(this).parent().find('.details').slideToggle();
});
} );
https://jsfiddle.net/3738Lnmf/1/
Use .slideToggle() if you want to toggle between show and hide the div elements
$(function() {
$(".project").on('click', function() {
$(this).parent().find('.details').slideToggle();
});
$(".project2").on('click', function() {
$(this).parent().find('.details').slideToggle();
});
});
I am trying to apply a new Style to my Submit-Button if its focused.So if its focused, the Style changes, but i cant get rid of it.Means that i cant lose focus on my Button.The other Problem is, that when focused the button moves like 2-3pixel down.
$(document).ready(function(){
$(".login").hover(function() {
$(this).toggleClass("hoverbutton");
});
$(".login").focus(function(){
$(this).toggleClass("focusbutton");
return false;
});
});
Hope someone can help me out with this :)
try this
$(document).ready(function () {
$(".login").hover(function () {
$(this).toggleClass("hoverbutton");
}, function () {
$(this).toggleClass("Normalbutton");
});
});
OR
$(document).ready(function () {
$(".login").hover(function () {
$(this)
.removeClass("normalbtn")
.addClass("hover_btn");
}, function() {
$(this)
.removeClass("hover_btn")
.addClass("normalbtn");
});
});
Refer Here
According to the jQuery API (http://api.jquery.com/hover/), hover accepts two functions:
$( ".login" ).hover(
function() {
// This part is called on Mouse over
$( this ).addClass( "hoverbutton" );
}, function() {
// This part is called on Mouse out
$( this ).removeClass( "hoverbutton" );
}
);
$(".login").blur(function(){
$(this).removeClass("focusbutton");
return false;
});
Added this after .focus() and works fine for me
You are looking for wrong events,
Look at jQuery API: http://api.jquery.com/blur/
Here is my code. Please help me
$(document).ready(function(){
$(document).delegate(".view","click",function(){
var id = $(this).attr("id");
alert(id);
$("#"+id).popover({
html : true,
content: function() {
return $("#"+id+"tt").html();
},
title: function() {
return $('#popoverTitle').html();
}
});
alert("thisa");
});
});
Try replacing the function .delegate() by .on(), this function has been superseded in the last versions of Jquery.
jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
jQuery 1.7+
$( elements ).on( events, selector, data, handler );
The code would be:
$(document).ready(function(){
$(document).on("click",".view",function(){
var id = $(this).attr("id");
alert(id);
$("#"+id).popover({
html : true,
content: function() {
return $("#"+id+"tt").html();
},
title: function() {
return $('#popoverTitle').html();
}
});
alert("thisa");
});
});
Try doing this way..
$('.view')
.popover({trigger: 'manual'})
.click(function() {
if($(this).hasClass('pop')) {
$(this)
.popover('hide')
.removeClass('pop');
} else {
var id = $(this).attr("id");
var title = $('#popoverTitle').html();
var response = $("#"+id+"tt").html();
$(this)
.attr({'title': title, 'data-content': response})
.popover('show')
.addClass('pop');
}
});
I'm changing my codes to be compatible with jQuery 1.8 and I'm stuck with this hover which doesn't work. When I used then same thing with a click it worked. Here is my code, can anyone tell me where I'm going wrong?
$(document).on('hover', '.top-level', function (event) {
$(this).find('.actionfcnt').show();
$(this).find('.dropfcnt').show();
}, function () {
$(this).find('.dropfcnt').hide('blind', function () {
$('.actionfcnt').hide();
});
});
Deprecated as of jQuery 1.8: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.
Source: http://api.jquery.com/on/#additional-notes
That pretty much says it all, you cant use "hover" for that:
$(document).on('mouseenter','.top-level', function (event) {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
}).on('mouseleave','.top-level', function(){
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});
there is no "hover" event.
there is .hover() function that takes 2 callbacks (as in your example).
Try:
$(".top-level").on({
mouseenter: function (event) {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
},
mouseleave: function (event) {
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
}
});
OR
$(".top_level").on("hover", function(event) {
if(event.type == "mouseenter") {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
}
else if (event.type == "mouseleave") {
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
}
});
.on function has only 3 parameters : http://api.jquery.com/on/
If you don't need your handlers be bound to dynamically added elements as well, then you may use the good old hover function with 2 event handlers.
$('.top-level').hover(function (event) {
$(this).find('.actionfcnt').show();
$(this).find('.dropfcnt').show();
}, function (event) {
$(this).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});
By the way, $(selector).hover(handlerIn, handlerOut) is shorthand for $(selector).mouseenter(handlerIn).mouseleave(handlerOut);.
If you need to, then use on for mouseenter and mouseleave events:
$(document).on('mouseenter', '.top-level', function (event) {
$(this).find('.actionfcnt').show();
$(this).find('.dropfcnt').show();
}).on('mouseleave', '.top-level', function (event) {
$(this).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});
Try
$('.top-level').hover(function (event) {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
}, function(){
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});