I'm trying to make this persistant cart that lets you add products to cart without redirecting to a new page. It works perfectly, but the only problem is that it can not be closed when you click on the exit button in the corner. Live version here by clicking on cart. Make sure to add a product to see it work, else you won't see anything.
I have tried this:
<script type="text/javascript">
$(document).ready(function(){
$('.cart-show').click(function(){
$("#cart").hide();
});
});
</script>
Aswell as cartToggle with is a feature in the Shopify theme Timber.
The class .cart-show is adding to your [X] element later, so you should use event delegation:
$(document).ready(function() {
$('body').on('click', '.cart-show', function (e) {
$("#cart").hide();
});
});
Try this:
$(document).ready(function(){
$(document).on('click', '.cart-show', function (event) {
event.preventDefault();
$("#cart").hide();
});
1.) You should use event delegation,
2.) If you have id for element you should use id as selector
$(document).ready(function() {
$('body').on('click', '#exit', function () {
$("#cart").hide();
});
});
Related
I have a link with a script in that opens a view of products. I don't have access to the html, and I need to have this view open on default. Until the behavior is fixed the correct way, which will take long time unfortunaly, I want to automatically make the link click on pageload.
I tried with the script below first - but since the link itself triggers a pageload, this obviously just keeps firing over and over again.
So how do I do this with jquery or vaniall JS, is this even possible?
Script:
$(document).ready(function () {
$('.action')[0].click();
});
My link:
Toon alle
$(document).ready(function () {
$('.action:first').trigger("click");
});
to manually trigger an event u need to use trigger() ,click is to only assign a handler
$(document).ready(function () {
$('a.action').click(function(){
... handler code
});
$('a.action').trigger("click");
});
The click() method triggers the click event.
Syntax :
Trigger the click event for the selected elements:
$(selector).click();
http://www.w3schools.com/jquery/event_click.asp (example)
In your case :
$(document).ready(function() {
$('.action:first').click();
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Toon alle
Edit :
If you don't want to trigger in a specific page. do like this.
$(document).ready(function () {
if (!location.href.indexOf("someurl") > -1)
$('.action:first').click();
});
Can you tell me why you add [0], if you need to add it for first element then use following code :-
$(document).ready(function () {
$('.action:first').trigger("click");
});
otherwise you can directly use these :-
$(document).ready(function () {
$('.action').trigger("click");
});
Change your link tag with following :-
Toon alle
I have a module that was built using a Handlebars.js template, I orignally had it opening and closing perfectly, but the information wasn't updated, this can be seen here.
Now I have it so it updates the info, but the toggleClass won't fire when clicking either the 'x' or .overlay. This can be seen here.
Here is my jQuery functions to activate the modal.
$(document).on('click', "a.btn", function (e) {
$(e.target).parents('.image-container').prev('.modal').toggleClass('modal--show');
});
$(document).on('click', '.overlay', function (e) {
$(e.target).prev('.modal').toggleClass('modal--show');
});
$(document).on('click', '.modal__close', function () {
$('.modal').toggleClass('modal--show');
});
How can I make it so this modal will both Open and Close, as well as display the correct information?
Some things I've tried...
replacing: $(e.target) with $(this)
The problem with your code is that you are trying to toggle class of all .modal divs. But you need to toggle the class of only .modal.modal--show.
Also in case of overlay, you need to find the parent div not the sibling div. So use .closest() in place of .prev()
So if you modify your code as
$(document).on('click', '.overlay', function (e) {
$(e.target).closest('.modal.modal--show').toggleClass('modal--show');
});
$(document).on('click', '.modal__close', function () {
$('.modal.modal--show').toggleClass('modal--show');
});
CODE:
<script type="text/javascript">
$(document).ready(function() {
$("#clicker").click(function() {
$(".show_this").show();
e.preventDefault();
});
});
</script>
Using the script above I am able to show .show_this on clicking #clicker but on clicking #clicker again i want to hide it. How can I tweak my code to do that?
I did some research and it seemed that by using e.preventDefault(); I would be able to achieve that but it didn't work.
You can use toggle();
$(".show_this").toggle();
This will toggle every time, so if it is hidden it will show it and vice versa
Api Documentation: http://api.jquery.com/toggle
Also event.preventDefault(); will not be able to do this, though it is useful if the .show-this is a anchor tag because it will prevent the default action and that is to follow the link.
Use .toggle() instead.
$(document).ready(function() {
$("#clicker").click(function(e) {
$(".show_this").toggle();
e.preventDefault();
});
});
jsFiddle example
You can do this using the .toggle() method like:
$(document).ready(function() {
$("#clicker").click(function(e) { // call the event variable 'e' first here
e.preventDefault();
$(".show_this").toggle();
});
});
I have an overlay div that fades in when I click on a DOM element. I would like to be able to close it when I click anywhere on the page ( except the div itself) but it does not work..
Here is my code:
//Script for showing the DIV called overlay.
<script>
$(function() {
$('#loginfooter').click(function(){
$('#overlay').fadeIn(200,function(){
$('#box').animate({'top':'20px'},'slow');
});
return false;
});
$('#boxclose').click(function(){
$('#box').animate({'top':'-800px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});
</script>
//Script for hiding the div after clicking anywhere..
<script>
$(document).ready(function(){
$('#overlay').on('click',function(ev){
var myID = ev.target.id;
if(myID!=='overlay'){
$('#box').animate({'top':'-800px'},500,function(){
$('#overlay').fadeOut('fast');
});
}
});
});
</script>
Just replace this:
$('#overlay').on('click', function (ev) {
with this
$(document).on('click', function (ev) {
and try again....
Actually, when you are clicking on the overlay element, the myID variable value is always == 'overlay'. Hence, it never goes inside the if statement.
DEMO 1
$(document).on('click',function(e){
if(!$(e.target).closest('#overlay').length)
$('#overlay').hide();
});
Other possibility without using any delegate event:
DEMO 2
$('#overlay').on('blur', function (e) {
$(this).hide();
});
Even you'll see most people using the first method, using the second one will avoid to have to use any delegate event which is better IMO. You just have to set focus on overlay when open it or when added to DOM, depending your specific case.
Would this work for you: jsfiddle?
I changed this:
if(myID!=='overlay'){
to this
if(myID=='overlay'){
so that you target the overlay instead of the box.
I'm trying to make a page scroll to top when a link is clicked.
Heres what I got so far.
<script>
jQuery(document).ready(function () {
jQuery("ul.pager a").click(function() {
scroll(0,0);
return false;
});
});
<script>
Problem with that code is that it works only on first click.
How to make it work every time I click on a link?
Maybe you could use internal links (href="#top") instead of binding events with jQuery.
jQuery(document).ready(function () {
jQuery("ul.pager a").live("click", function() {
scroll(0,0);
return false;
});
});
try this