jquery mouseenter and mouseleave not working correctly - javascript

I have a button that is hidden when my page is loaded, and on mouseenter I want it to show, then hide again on mouseleave.
HTML
<div id = "t" style='position:absolute; top:0; left:50%;'>
<button id="toggle" type="button" class="btn btn-default" >Toggle Arrows</button>
</div>
Enter / Leave
$( '#toggle' ).mouseenter(function(){
$('#toggle').show();
})
$( '#toggle' ).mouseleave(function(){
$('#toggle').hide();
})
I changed my button to not hide to test this, and the only things that works is that the button hides, but it does so when I actually click it, rather than when I hover over it. The other problem is that I can't figure out any way to get the button to show again. I tried to use .hover(function(){}) but did not get that to work either. Any suggestions?
Closest
$( '#t' ).hover(function(){
$('#toggle').css("opacity",1);
},function(){
$('#toggle').css("opacity",0);
})
Above is the closest I got to my answer but it does not work on hover, instead it works when I click the button and off the button.

jfiddle
$( '#toggle' ).mouseenter(function(){
$('#toggle').css("opacity",1)
})
$( '#toggle' ).mouseleave(function(){
$('#toggle').css("opacity",0)
})
better be invisible to eye , but as a DOM it should exist.

You can do something like this using container div of button:
$( '#t' ).mouseenter(function(){
$('#toggle').show();
})
$( '#t' ).mouseleave(function(){
$('#toggle').hide();
})
Fiddle DEMO

Please find the code provided at the following link for JSFIDDLE
You need to apply the mouse enter and mouse leave on container not on the button. If that is being put on the button then it creates a problem that when you leave the button then the display goes none and then you cannot fire the reenter option again as the DOM element doesnot exist.
HTML Code:
<div class="" id="targetContainer">
<button id="toggle" type="button" class="btn btn-default" >Toggle Arrows</button>
</div>
JS Code:
$("#targetContainer").mouseenter(function(e){
$("#toggle").show();
}).mouseleave(function(e){
$("#toggle").hide();
});
CSS Code:
#targetContainer{
border:1px solid;
padding: 10px;
}
#targetContainer #toggle{
display:none;
}

I finally got this to work with the follow HTML and Javascript. My biggest problem was that when I hid the element, I could not get it back but no answers worked for me but this one (thanks to all who tried).
HTML
<div id = "t" style='position:absolute; top:0; right:0;' onmouseover="showButton()" onmouseout="hideButton()">
<button id="toggle" type="button" class="btn btn-default" >Toggle Arrows</button>
</div>
Javascript
function showButton(){
document.getElementById('toggle').style.visibility ='visible';
}
function hideButton(){
document.getElementById('toggle').style.visibility ='hidden';
}

Related

If button enabled, then do this onclick event

I want to show a popup on click of "add to cart button" (but only when the button is active!) so i think i can use the a div that wraps the button which change class from "disabled" to "enabled" i used jquery but it is not so important if it is jquery or pure javascipt.
I made it work on codepen, but doesn't work on my website?
See codepen: https://codepen.io/Molin449/pen/mYXPXv
Any idea of what im doing wrong?
$('.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled .single_add_to_cart_button').click(function(){
$("#CartPopup").css("display", "block");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--The popup div-->
<div id="CartPopup" class="CartPopup"></div>
<!--This is the div that changes between disabled and enabled-->
<div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-enabled">
<!--The button where i want the onclick event (only when active)-->
<button type="submit" class="single_add_to_cart_button">Tilføj til kurv</button> Se kurv</div>
Updated
On Wordpress/Wooccommerce you need first to use explicitely jQuery() ready event (embedding the shortand $)…
Now on Woocommerce, you can use the disabled class (as #RoryMcCrossan suggested in his comment), so when your button will not have the class disabled, it will be able to show the lightbow.
jQuery( function($){
$('.single_add_to_cart_button').click(function(){
if( ! $(this).hasClass('disabled') ) {
$("#CartPopup").css("display", "block");
}
});
});
#CartPopup{
display:none;
background: rgba(0, 0, 0, 0.7);
position: fixed;
height:100%;
width:100%;
top:0px;
left:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!--The popup div-->
<div id="CartPopup" class="CartPopup"></div>
<!--This is the div that changes between disabled and enabled-->
<div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-enabled">
<!--The button where i want the onclick event (only when active)-->
<button type="submit" class="single_add_to_cart_button">Tilføj til kurv</button> <a href="https://www.profiltech.dk/kurv/" class="added_to_cart wc-forward" title="Se kurv">Se kurv</button></div>
And will not work if your button is like:
<button type="submit" class="single_add_to_cart_button disabled">Tilføj til kurv</button>

Change class group of buttons

I have three buttons and each one has a CSS class. At click of one of them, i would like remove the class and add a new CSS class only for the clicked element. Furthermore, I need to keep pressed the selected button.
I searched some examples and I found that is possible do something like this:
$(".class").removeClass("choice").addClass("active");
This works for all buttons, but not only for one. I try to change this in
$(this).removeClass("choice").addClass("active");
but this didn't work.
I make a fiddle for more compreansion: https://jsfiddle.net/90u6b3tj/3/
EDIT
I need the same behavior when i press a second time
Sorry for the basic problem.
Thanks in advance
Regards
I've updated your jsfiddle for a working solution:
https://jsfiddle.net/90u6b3tj/10/
Here's the javascript part:
$(function() {
$("button").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
});
});
as you are adding your click events like so:-
<button id="hourly" class="choice" onclick="change()">Orario</button>
you could use event.target:-
function change(){
event.preventDefault();
$(event.target).removeClass("choice").addClass("active");
}
OR, change your event and pass in this:-
<button id="hourly" class="choice" onclick="change(this)">Orario</button>
so you can do:-
function change(element){
event.preventDefault();
$(element).removeClass("choice").addClass("active");
}
OR better still:-
$('.choice').click(function(e){
e.preventDefault();
$(this).removeClass("choice").addClass("active");
});
and remove the inline click event.
You can use the following code instead.
$(".class").click(function(){
$(".class").addClass("choice");
$(".class").removeClass("active");
$(this).removeClass("choice").addClass("active");
});
Here, the "choice" class is removed only from the clicked class. Not from the others. Also the "active" class is added to the clicked one.
You may use change(this) in your button markup and refer to that element in your change() function, as shown in this fiddle.
function change(event){
event.preventDefault();
//$(".choice").removeClass("choice").addClass("active");
$(event.target).removeClass("choice").addClass("active");
}
<div>
<button id="hourly" class="choice" onclick="change(event)">Orario</button>
</div>
<div>
<button id="daily" class="choice" onclick="change(event)">Giornaliero</button>
</div>
<div>
<button id="monthly" class="choice" onclick="change(event)">Mensile</button>
</div>
Should it possible so select more than one item as active?
If not, checkout this:
Markup
<div>
<button id="hourly" class="choice">Orario</button>
</div>
<div>
<button id="daily" class="choice">Giornaliero</button>
</div>
<div>
<button id="monthly" class="choice">Mensile</button>
</div>
CSS
.active {
background-color: #A60076;
color: #FF0000;
}
.choice {
background-color: #000000;
color: #FFFFFF;
}
JS
$(document).ready(function() {
$('button').click(function(e) {
$("button").addClass('choice').removeClass('active');
$(this).removeClass('choice').addClass('active');
});
});
Here is a sample fiddle with the above code working.

Showing a div on button click

I'm simply trying to toggle() <div class="reveal"> when the button is pushed.
I'll have multiple buttons and corresponding <div>'s on the page, so I just want to toggle() the next instance on the page using $(this).next("div.reveal").toggle();
Nothing happens and there are no errors. What did I do wrong?
HTML:
<article class="customerQuotes">
<blockquote>Blah
<cite><b>Name</b> - Company</cite>
</blockquote>
<button class="button right">More</button>
</article>
<div class="reveal">
<div class="right">
//stuff here
</div>
</div>
JS:
$(".button").click(function() {
$(this).next("div.reveal").toggle();
});
CSS:
.reveal{
display: none;
float: left;
clear: both;
}
You need to call .next on the parent element, since .reveal is its sibling.
$(".button").click(function() {
$(this).parent().next("div.reveal").toggle();
});
Thats because $(this).next("div.reveal") is undefined. There is no div.reveal next to a button element.
You would need to restructure your html like this:
<article class="customerQuotes">
<blockquote>Blah
<cite><b>Name</b> - Company</cite>
</blockquote>
<button class="button right">More</button>
<!-- Note here that div.reveal is sibling to a button so
.next() will find this element -->
<div class="reveal">
<div class="right">
//stuff here
</div>
</div>
</article>
or change your selector for JQuery to grab next reveal from the parent element like this:
$(".button").click(function() {
$(this).parent().next("div.reveal").toggle();
});
Like others said you forgot to use the next() method on the parent().
However, any time you change the structure of your HTML this code will break! Better reference the elements to be revealed explicitly. One simple way is to save the target as data on the button:
<button data-target="#reveal1" class="button right">More</button>
...
<div id="reveal1"></div>
Your JS would then look like this:
$(".button").click(function() {
$( $(this).data("target") ).toggle();
});
This will work regardless of where you place your button and div.

How to move the cursor into a input text box by clicking on html button?

Hi Can anybody tell me How to move the cursor into a input text box by clicking on html button ?
Try this:
document.getElementById("textbox").focus();
HTML:
<input type="text" id="my_textbox" value="My Text" />
<button id="my_button">Focus</button>
JS:
document.getElementById('my_button').onclick = function() {
document.getElementById('my_textbox').focus();
};
Example:
http://jsfiddle.net/GeoForce/ZnVH7/
You can just do it by using jQuery as follows:
Include jquery in HTML HEAD section then
$( "#button" ).click(function() {
$( "#targetinput" ).focus();
});
Or without jquery you can do it using
getElementByID("targetinput").focus();

hasClass('disabled') not working after .addClass('disabled')

With selected the hasClass validation works correctly.
<div class="row dis">
<input class="contact button selected" value="Contact Us">
</div>
However if i remove the selected through jquery:
<div class="row dis">
<input class="contact button" value="Contact Us">
</div>
if (!$('.dis > .contact').hasClass('disabled')) {
$("input.contact").click(function() {
alert('---');
$('.contact').addClass('disabled');
});
}
the hasClass still not find the disabled class after $('.contact').addClass('disabled');.
So, i only want the first alert.
Demo:
http://jsfiddle.net/dWGNJ/2/
You could do it like this..
$('input.contact').on('click',function(){
if( !$(this).hasClass('disabled') )
{
alert('---');
$(this).addClass('disabled');
}
});
Basically, when input.contact is clicked, check if it has the class .disabled - if it doesn't then trigger the alert and add the class .disabled - which in turn prevents it from triggering the second time it's clicked
Or you could have a slightly more elegant way of doing it:
$('.dis').on('click','input.contact:not(.disabled)',function(){
alert('---');
$('.contact').addClass('disabled');
});
Same concept.
There's no .disabled element when your JS runs, so, no .contact is binded with click().

Categories

Resources