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>
Related
<div id="mydiv"><div>
<button style="visibility:hidden; float:left"></button>
I wanna make the hidden button as is clicked when someone click the div "mydiv".
As AndrewL said, you don't need a button for this. But if you want to use a button anyways, simply assign a eventListener to your div that simulates a click on the button:
document.querySelector('#mydiv').addEventListener('click', () => {
document.querySelector('button').click();
});
Example
(I added some CSS rules and an extra function for visualization.)
document.querySelector('#mydiv').addEventListener('click', () => { // Listen for clicks on the div
document.querySelector('button').click(); // Simulate a click on the button
});
function test() { // This function gets called when clicking the button
console.log("Click!");
}
<div id="mydiv" style="height: 100px; width: 100px; background-color: red;">
<div>
<button style=" visibility:hidden; float:left; " onclick="test()"></button>
</div>
</div>
You dont need a hidden button for this. Just assign a click listener to the div itself using js like this:
const btn = document.getElementById('mydiv');
function doSomething(){
//run your script here when div is clicked
}
btn.addEventListener('click', doSomething);
You don't really need the hidden button to catch the click event. But if you really need it:
<div id="mydiv" onclick="document.getElementById('btn').click()">click on me<div>
<button id="btn" style="display:none;" ></button>
With jQuery, you can do something like this:
$('#div_id').click(function(){$('#btn_id').trigger('click');});
$('#btn_id').click(function(){//Business logic here on btn click
});
I built a checkout page and there's a form to get user data.
The form goes like this:
<form method="post" action="purchase" name="checkout"></form
When user clicks on "confirm order", they are being directed to the confirmation.jsp as supposed.
Inside of that form I added buttons to be used as toggling effect to hide and show a given section of the form.
The problem:
When I click on > + < the given section shows and when I click on > - < the given section hides but then the confirmation.jsp page loads up as if the buttons acted as link to that page, just like the "confirmation order button". I tried to add normal buttons, same event happens. Every button put on that form seems to automatically be formatted to act as a "confirm order button", no matter what I try.
The buttons go like this:
<button id="show" class="toggle_button" value=$("#show").click action=$("#show").click >+</button>
<button id="hide" class="toggle_button" value=$("#hide").click action=$("#hide").click>-</button>
And the scripts in the header:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
Thanks for your help!
try this:
<input type="button" id="show" class="toggle_button" onclick="doAction('show')" value="+" />
<input type="button" id="hide" class="toggle_button" onclick="doAction('hide')" value="-" />
<script>
$("#show").click(function( event ) {
event.preventDefault();
});
$("#hide").click(function( event ) {
event.preventDefault();
});
function doAction(action) {
if(action=="hide") {
$("p").hide();
} else {
$("p").show();
}
}
</script>
The default type for a button in a form is type="submit".
Try to add 'type="button"' on each of them.
<button type="button" id="show" class="toggle_button" value=$("#show").click action=$("#show").click >+</button>
<button type="button" id="hide" class="toggle_button" value=$("#hide").click action=$("#hide").click>-</button>
hope this helps.
Try this CSS:
.btn {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0px;
font-family: Arial;
color: #000;
font-size: 60px;
background: #ffffff;
padding: 0px 0px 0px 0px;
text-decoration: none;
}
And the HTML:
<button id="show" class="toggle_button btn" value=$("#show").click action=$("#show").click >+</button>
<button id="hide" class="toggle_button btn" value=$("#hide").click action=$("#hide").click>-</button>
The issue is that when you put a button in a form it's default type is submit unless you explicitly set it to button.
You are therefore submitting the form unintentionally
Change to
<button type="button"></button>
Alternatively in javascript you can also use event.preventDefault() within click handlers
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';
}
Here is my code --
<div id="div1">
this is div 1
<form class="thisformtobeaddeverytime">
<!-- this form to be add on click #btn1 -->
</form>
</div>
<div id="div2">
this is div 2
<form class="thisformtobeaddeverytime">
<!-- this form to be add on click #btn2 -->
</form>
</div>
<div id="showtheaddedform">
//here my form will be push on click to button
</div>
<button type="button" id="btn1">Add the form1</button>
<button type="button" id="btn2">Add the form2</button>
// the click function in my js file are as -
$(document).on("click","#btn1",function(){
$("#showtheaddedform").append($("#div1").html());
});
$(document).on("click","#btn2",function(){
$("#showtheaddedform").append($("#div2").html());
});
now the problem is --
On click #bun1 it's adding the content of #div1 into #showtheaddedform (i.e. the form attribute and all element inside form), like
<div id="showtheaddedform">
<form class="thisformtobeaddeverytime">
<!-- this form to be add on click #btn1 -->
</form>
</div>
but when I'm clicking #btn2 it's adding only the element inside the form , like
<div id="showtheaddedform">
<!-- this form to be add on click #btn2 -->
</div>
[ NOTE : I've not written any kind of remove query ]
..any idea , how it's removing !!!
Both your buttons have the same id. Also there is a syntax mistake in
$(document).on("click","#btn1",function(){
$("#showtheaddedform").append($("#div1").html());
}
add
); to it
DEMO
Actually Form tag is getting append to the div on second button's click. But in the UI it will not be shown as it doesnt have any tags or text in it. Try giving some text or tag in it. It will work
EDIT
Updated Fiddle
Your second button appears to have the wrong ID.
<button type="button" id="btn1">Add the form2</button>
Change to
<button type="button" id="btn2">Add the form2</button>
Try Below code in java script tag and also change your button id to btn1 and btn2
$(document).ready(function(){
//alert("hi");
$("#btn1").click( function()
{
$("#showtheaddedform").empty();
$("#showtheaddedform").append($("#div1").html());
});
$("#btn2").click( function()
{
$("#showtheaddedform").empty();
$("#showtheaddedform").append($("#div2").html());
});
});
<script type="text/javascript">
$(document).ready(function(){
$("#click").click(function () {
$("#info").slideToggle('slow');
});
});
</script>
this is the html code
<h4 class="rsvpTitle">
<span class="arrow"></span>RSVP
</h4>
<div id="info" class="expandContent">
<form id="formmail method="post" action="form_handler.php">
<label class="response" for="response">Will you be joining us?</label><br>
<span style="margin-left:121px;">
<input type="radio" name="response" value="I'll be there with bells on!" id="response">I'll be there with bells on!</span>
<br>
I have this code for a toggle effect. However, the toggle does not remain close, I want the toggle to remain close until someone clicks on the button to release the toggle. any ideas? is the code well written?
u have to add display: none; to #info and e.preventDefault() to your js
examples:
http://jsbin.com/oxuqus/2/ OR
http://jsfiddle.net/kB2fc/
CSS:
#info {
display: none;
}
JS:
$(document).ready(function(){
$("#click").on("click", function(e) {
$("#info").slideToggle('slow');
e.preventDefault();
});
});
Just add this in your CSS
#info {
display : none;
}
Working Example
(jsFiddle)
Explanation
The element is not hidden at the document load event. You must hide it with display:none; in your CSS to ensure it is not visible without user interaction.
Solution
Add the following to your CSS:
#info
{
display:none;
}
NOTE
You are not closing your input and span elements ! Add the closing tags:
<input type="radio" name="response" value="I'll be there with bells on!" id="response">I'll be there with bells on!
</input>
</span>