JQuery Toggle & Image - javascript

I have a + icon and a - icon. When someone clicks the + icon a box appears and the icon changes to a - icon. If they click again the box disappears and the icon changes to a + icon.
Here is the code I tried but its not working...
$("#box").toggle(function(e){
$("#icon").attr ("src","/images/icon_expand.png")
},
function(e) {
$("#icon").attr("src","/images/icon_retract.png")
}
);
Any ideas?
Thank you!

The .toggle() function attaches click handlers to the element, not event handlers for then an element is toggled visible, it should be attached to #icon, like this:
$("#icon").toggle(function(){
$("#box").hide();
this.src = "/images/icon_expand.png";
}, function() {
$("#box").show();
this.src = "/images/icon_retract.png";
});

$.togle () toggles the visibility of the matched element(s). So you are using it completely wrong.
You'll have to do something like this:
$( '#icon' ).click ( function () {
var $this = $( this );
var $box = $( '#box' );
$box.toggle ();
if ( $box.is ( ':visible' ) === true ) {
$this.attr ( "src", "/images/icon_retract.png" );
} else {
$this.attr ( "src", "/images/icon_expand.png" );
}
} );

i think, there will be a correction in Nick code and then it will work fine.
you have to first show the box and on second click you have to hide it, if is it so,
then try this
$("#icon").toggle(function(){
$("#box").show();
this.src = "/images/icon_expand.png";
}, function() {
$("#box").hide();
this.src = "/images/icon_retract.png";
});

Related

Hide Row when other Toggled - Wordpress Javascript

I am trying to show/hide rows on WpBakery when an image is clicked. When the first image is clicked I would like a row to toggle. When the second image is clicked I would like first row to hide and then the second row to show. I would like to do this with 10 different images. I have adapted the following code which I found online:
add_action( 'wp_footer', function() { ?>
<script>
( function( $ ) {
'use strict';
$( document ).ready( function() {
var $trigger = $( '.open-stan' );
var $hiddenRow = $( '.stan' );
var $trigger1 = $( '.open-test' );
var $hiddenRow1 = $( '.test' );
if ( $hiddenRow.length ) {
$trigger.click( function() {
$hiddenRow.toggle();
$hiddenRow1.hide();
return false;
} );
}
else if ( $hiddenRow1.length ) {
$trigger1.click( function() {
$hiddenRow1.toggle();
$hiddenRow.hide();
return false;
} );
}
} );
} ( jQuery ) );
</script>
To test if it is working hiddenRow1 is shown when I open the page as I have not hidden it using CSS, if you click on the first image (trigger) this hides hiddenRow1 and displays hiddenRow. However when you click on the second image nothing happens.
Any help would be appreciated
Use similar like this...
$(".row_class").click(function(){
$(".row_class").not(this).removeClass('show');
$(this).addClass('show');
});

Drop Down text won't come back up and won't recognize other instances

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();
});
});

Jquery .focus()-loop?

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/

Disable click on an element during animation

I want to prevent clicking on an element, while it performs some animations and then enable it later. I have tried to use unbind and then bind, but clicking remains permanently disabled.
Is there any other way to do it?
$("something").on("click", function() {
$("selected").unbind("click");
$("selected").animate({...}, function() {
$("selected").unbind("click");
});
basically, i don't want someone to click on the selected div while the animation is in progress, as clicking on it will start another set of animations which i don't want to start in between.
Try this, using a flag variable to store the info if the animation is happening:
var animating = false;
$("something").on("click", function () {
animating = true;
$("selected").animate({...
}, 1000, function () {
animating = false;
});
});
$("selected").click(function(){
if (animating) return false;
});
Use on and off this way you can "bind" the function foo to a click event on a particular element, switch it off and on again, as many times as you like. Have fun ;-)
DEMO: http://jsfiddle.net/4yBbb/2/
var foo = function() {
// Code to handle some kind of event
};
// ... Now foo will be called when paragraphs are clicked ...
$( "p" ).on( "click", foo );
// ... Foo will no longer be called.
$( "p" ).off( "click", foo );
edit: updated answer, my example used delegation and this was not necessary.
applied to your example it would look like this:
$("something").on("click", function() {
$("selected").off( "click", foo );
$("selected").animate({...}, function() {
$("selected").on( "click", foo );
});
clicking remains permanently disabled.
Because when never bind the "click" again to $("something"). Try:
$("something").on("click", function animate() {
var _this = $(this);
_this.off("click");
$("selected").animate({...}, function() {
_this.on("click",animate);
});
Here I use named function to make it easy to refer to the function again.
How about adding a check in your click function to perform the animation only when the clicked element is not animating?
$("something").on("click", function() {
$("selected").animate({...});
});
$("selected").on("click",function(){
if(!$(this).is("selected:animated")){
//Start other animation
}
});
Demo fiddle
Use .on() & .off() event of jquery. here is the example Jquery API
you need to do somthing like as follows:
function flash() {
// do your stuff here
}
$("something").on("click", function() {
$( "body" ).off( "click", "Your Div Selector", flash );
});
$("something").on("click", function() {
$( "body" ).on( "click", "Your Div Selector", flash );
});

how to close an overlay by clicking the page

I've javascript file like this :
var $overlay_wrapper;
var $overlay_panel;
function show_overlay() {
if ( !$overlay_wrapper ) append_overlay();
$overlay_wrapper.fadeIn(700);
$overlay_panel.fadeIn(700);
}
function hide_overlay() {
$overlay_wrapper.fadeOut(500);
$overlay_panel.fadeOut(500);
}
function append_overlay() {
$overlay_wrapper = $('<div id="overlay"></div>').appendTo( $('BODY') );
$overlay_panel = $('<div id="overlay-panel"></div>').appendTo( $('BODY') );
$overlay_panel.html(
'<p>This is the overlay content</p>X Close'
);
attach_overlay_events();
}
function attach_overlay_events() {
$('A.hide-overlay', $overlay_panel).click( function(ev) {
ev.preventDefault();
hide_overlay();
});
}
$(function() {
$('A.show-overlay').click( function(ev) {
ev.preventDefault();
show_overlay();
});
});
but the overlay just closed if I click the "X Close" link . I want an overlay also closed if I click in the page that's transparant(outside the content).
how can I do about that? please for help and suggest.
thank you.
When you append the overlay to the body, attach a click event listener:
$('#overlay').click(function(){
$('.hide-overlay').trigger('click');
});
When this div is clicked it will trigger the "x close" click handler;

Categories

Resources