I am writing this code, first toggle function is working but second toggle isn't. Why is that?
<script type="text/javascript">
$(document).ready(function(){
$( ".navicon" ).click(function() {
$( "#menu" ).slideToggle( "medium", function() {
// Animation complete.
});
});
});
$(document).ready(function(){
$('.navicon').toggle(function () {
$("body").css({"overflow": "hidden !important"});
$("#mobile_menu").css({"width": "100% !important"});
});
});
</script>
The toggle() method was deprecated, you need to use an alternative, such as a flag to depict the 'toggled' state.
A loose example:
$('.myclass').click(function() {
if ($(this).hasClass('toggle')) {
doThis;
$(this).removeClass('toggle');
} else {
doThis;
$(this).addClass('toggle');
}
});
And encase all of your functions with $(document).ready() rather than doing it for each individual one.
Related
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");
});
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/
On mouseover event i want to call function which will do somethig when the mouse will be over on images but i dont know how to write code for it.
function reload(){
$("img.lazy").lazyload({
effect : "fadeIn",
event:"mouseover"
});
}
eg:-
function reload(){
$("img.lazy").lazyload({
effect : "fadeIn",
event:function(moueover)
{
//do somthing here
}
});
}
You want to use mouseenter:
$('.test').on('mouseenter', function() {
alert( 'mouse is over here' );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Hover here</div>
Let's see if this works for you
$(function() {
$("img.lazy")
.mouseover(function() {
console.log("Mouseover");
});
});
You can d like this
jQuery('#youdomid').hover(function(){
// do your stuff here
//, your mouse has entered
alert(2);
},
function (){
// your mose leave the element
// do the stuff what you want
alert("leaved");
}
)
You can also use .hover function
$( "img.lazy" ).hover(function() {
$( this ).fadeOut( 100 );
$( this ).fadeIn( 500 );
});
$(document).ready(function(){
$("img.lazy").lazyload({effect : "fadeIn"}, function() {
mousehover();
});
}
function mousehover(){
//do something mousehover stuff on here
}
You can just use the event mouseenter below:
$('.lazy').on('mouseenter', function() {
console.log('foo');
});
I wrote two javascripts to write my own modal system because the bootstrap one has so many issues. However when you click it the first time it will work correctly it will fade in, and when you click close it will fade out, but the next time you click show modal and then close modal it will animate 2 times on the fade in and 2 times on the fade out, then I click it a third time and the same thing will happen except it will animate 3 times. and so on. I supposed its how i wrapped my functions but im not quite sure. I'm still noob to javascript. No error is returned in console or debugger.
$(document).ready(function(){
$('#helppage').hide();
});
function displayHelp(){
$(document).click(function(){
$( "#helppage" ).fadeIn( "medium", function() {
});
});
}
function hideHelp(){
$(document).click(function(){
$( "#helppage" ).fadeOut( "medium", function() {
});
});
}
SPOKE TO SOON ..
function toggleHelp(){
$(document).click(function(){
if ($('#helppage').is(":visible")) {
$( "#helppage" ).fadeOut( "medium", function() {
});
} else {
$( "#helppage" ).fadeIn( "medium", function() {
});
}
});
}
The Real Working Code
**$(function toggleHelp() {
$(document).on('click', function() {
$('#helppage').fadeToggle('medium', function() {
});
});
});**
You are adding click events to the document each time the user clicks on the document. So each subsequent click and another instance to be triggered when the user clicks. So the firsat time its once, the second time it fires twice, etc.
I recommend putting the click on another element instead. Having said that, you could try something like this:
$(function() {
$(document).on('click', function() {
$('#helppage').fadeToggle('medium', function() {
// code here
});
});
});
Based on my comment above, without changing your code:
function toggleHelp(){
$(document).click(function(){
if ($('#helppage').is(":visible")) {
$( "#helppage" ).fadeOut( "medium", function() {
});
} else {
$( "#helppage" ).fadeIn( "medium", function() {
});
}
});
}