• Skip to main content
  • Skip to primary sidebar

WordPress, Genesis Framework and Storefront customization tutorials

  • Archive
    • Free
    • Premium
  • Blog
  • About
  • Contact
  • Newsletter
  • Membership
  • Login
Home » jQuery

jQuery

jQuery Modal without Bootstrap

// =============================================================
// ENQUEUE SCRIPTS FOR MODAL
// =============================================================
function storefront_enqueue_style() {
    wp_enqueue_style('modal_css', '//cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css', false);
}
add_action( 'wp_enqueue_scripts', 'storefront_enqueue_style' );
 
function storefront_enqueue_script() {
    wp_enqueue_script('modal_jquery', '//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js', false);
    wp_enqueue_script('modal_js', '//cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js', false);
}
add_action( 'wp_enqueue_scripts', 'storefront_enqueue_script' );

HTML

<!--HTML EMBEDDED INTO THE DOCUMENT-->
<div id="modal1" class="modal">
  <h2>Hello World</h2>
  <a href="#" rel="modal:close">Close</a>
</div>

<!--LINK TO OPEN THE MODAL-->

<p><a href="#modal1" rel="modal:open">Open Modal</a></p>

Filed Under: Free Tagged With: jQuery

How to select “Add to cart” button with jQuery

jQuery(document).ready(function() {
jQuery(‘body’).on(‘click’, ‘.add_to_cart_button’, function() {
jQuery(this)
alert(“HELLO”);
});
});

Filed Under: Free Tagged With: jQuery, WooCommerce

jQuery – Do something if checkbox is checked

const $pdfs = $('a[href$=".pdf"]');
$pdfs.on('click', function(event){
  //check if checkbox has been checked 
  //if zero checkboxes are checked 
  if ($(':checked').length === 0){
    //prevent download of document 
    event.preventDefault();
    //alert the user 
    alert('Please check the box to allow PDF downloads.');
  }
});

Filed Under: Free Tagged With: jQuery

jQuery Changing Element Styles and Classes

//Select every second link
const $odd = $('a:odd');

//Select all secure links
const $secureLinks = $('a[href^="https://"]');

//Select all links that ends with .pdf
const $pdfs = $('a[href$=".pdf"]');

//Add target blank attribute to every secure link
$secureLinks.attr('target', '_blank');

//Make downloadable pdf-s instead of open it in the browser
$pdfs.attr('download', true);

Filed Under: Free Tagged With: jQuery

jQuery Switcher .hide() .show()

HTML

<div class="switch-wrapper">
                    <label class="switch">
                      <input id="map-switcher" type="checkbox" checked>
                      <span class="slider round"></span>
                    </label>
                    <div class="switch-map">
                        Térkép
                    </div>
               </div>

CSS

/*SWITCH*/
.switch-wrapper {
	width: 60px;
	display: block;
	margin: auto;
	margin-top: -20px;
}
.switch-map {
	width: 60px;
    margin-top: 20px;
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
    transform: rotate(90deg);
}


.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #28122E;
}

input:focus + .slider {
  box-shadow: 0 0 1px #28122E;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.switch-wrapper {
	position: absolute;
	left: 0;
	right: 0;
}

JS

jQuery('#map-switcher').change(function(){
    if ($(this).is(':checked')) {
    jQuery(".hide-with-switch").show();
  } else {
    jQuery(".hide-with-switch").hide();
  }
});

Filed Under: Free Tagged With: jQuery

jQuery Horizontal Carousel/Tabs

CodePen

Filed Under: Free Tagged With: jQuery

jQuery Custom Events – click event- add / remove classes

Example

<div class="room" id="kitchen">
    <div class="lightbulb on"></div>
    <div class="switch"></div>
    <div class="switch"></div>
    <div class="clapper"></div>
</div>
$( ".switch, .clapper" ).click(function() {
    var light = $( this ).closest( ".room" ).find( ".lightbulb" );
    if ( light.is( ".on" ) ) {
        light.removeClass( "on" ).addClass( "off" );
    } else {
        light.removeClass( "off" ).addClass( "on" );
    }
});
$( ".lightbulb" ).on( "light:toggle", function( event ) {
    var light = $( this );
    if ( light.is( ".on" ) ) {
        light.removeClass( "on" ).addClass( "off" );
    } else {
        light.removeClass( "off" ).addClass( "on" );
    }
});
 
$( ".switch, .clapper" ).click(function() {
    var room = $( this ).closest( ".room" );
    room.find( ".lightbulb" ).trigger( "light:toggle" );
});

Filed Under: Free Tagged With: jQuery

Primary Sidebar

Gabor Flamich

Hi! I'm Gabor.
I write tutorials on WordPress and WooCommerce.

MacBook

12 Essential Snippets for Genesis Developers

Subscribe to my Newsletter to view my basic collection of Genesis snippets that I use for my projects!

Sign Up for Free
  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube
UpdraftPlus Premium

Tags

ACF Ajax Analytics API Bootstrap Breadcrumb category CPT CSS fetch Genesis Google Maps Gutenberg HTML Isotope JavaScript jQuery loop Map Menu Parallax PHP SASS SEO SQL Storefront SVG tab tag manager tags Taxonomy Tool upsell Webpack Wholesale WooCommerce WordPress WPML

Disclosure: Some of the links in this site are affiliate links. I will be paid a commission if you use this link to make a purchase.

  • Privacy Policy / Terms of Service
© 2023 WP Flames - All Right Reserved