• 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 ยป JavaScript

JavaScript

Tab Panel with JavaScript

Filed Under: Free Tagged With: JavaScript

Hamburger menu for WordPress custom theme

View Demo

Filed Under: Free Tagged With: CSS, JavaScript, PHP

Accordion for ACF Repeater Field

PHP

JS

SCSS

Filed Under: Free Tagged With: JavaScript, PHP, SASS

How to enqueue JavaScript Asynchronously in WordPress?

functions.php

Filed Under: Free Tagged With: JavaScript

Hide If Empty WooCommerce Notification on Cart Page

Filed Under: Free Tagged With: JavaScript

Redirect after MailPoet subscription

This snippet will redirect the visitor after three seconds to a specific thank you page.

const submit = document.querySelector('.wysija-submit');
submit.addEventListener('click', () => {
    setTimeout(() => window.location.replace("YOUR_CUSTOM_URL"), 3000);
});

Filed Under: Free Tagged With: JavaScript

Receive data from external API (Chuck Norris jokes)

View Demo

Generate Chuck Norris jokes asynchronously from external API of Internet Chuck Norris Database.

https://api.icndb.com/jokes/random/

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" />
  <link rel="icon" href="#">
  <title>Chuck Norris API</title>
  <style>
      .imgBx img{
          border-radius: 50%;
          display: block;
          margin: auto;
          max-width: 200px;
      }
      button{
          display: block;
          margin: 30px auto;
      }
      .text-center{
          text-align: center;
          margin-top: 20px;
      }
      form input{
          display: block;
          margin: auto;
      }
      form label{
          text-align: center;
      }
  </style>
</head>
<body>
    <div class="container">
        <div class="imgBx">
            <img src="norris.jpg" alt="Chuck Norris">
        </div>
        <div class="txtBx">
            <h1 class="text-center">Chuck Norris API</h1>
        </div>
        <form>
            <div>
                <label for="number">Number of jokes</label>
                <input type="number" id="number">
            </div>
        </form>
        <button id="button">Get Jokes</button>

        <ul class="jokes"></ul>
    </div>

  <script src="app.js"></script>
</body>
</html>

JavaScript

document.getElementById('button').addEventListener('click', getJokes);

function getJokes(e) {
    const number = document.querySelector('input[type="number"]').value;

    const xhr = new XMLHttpRequest();

    xhr.open('GET', `http://api.icndb.com/jokes/random/${number}`, true);

    xhr.onload = function(){
        if(this.status === 200){

            const response = JSON.parse(this.responseText);

            let output = '';

            if(response.type === 'success'){
                response.value.forEach(function(joke){
                    output += `
                        <li>${joke.joke}</li>
                    `;
                });

            } else{
                output += '<li>Something went wrong</li>';
            }

            document.querySelector('ul.jokes').innerHTML = output;
        }
    }
    xhr.send();

    e.preventDefault();
}

Filed Under: Free Tagged With: Ajax, JavaScript

Receive data from JSON file with Ajax

View Demo
document.getElementById('button1').addEventListener('click', loadCustomer);
document.getElementById('button2').addEventListener('click', loadCustomers);

// Load Single Customer
// Create a function named LoadCustomer and passing the Event Object 
function loadCustomer(e){
    const xhr = new XMLHttpRequest();

    xhr.open('GET', 'customer.json', true);

    xhr.onreadystatechange = function(){

        if(this.readyState === 4 && this.status === 200){

            const customer = JSON.parse(this.responseText);

            const output = `
                <ul>
                    <li>ID: ${customer.id}</li>
                    <li>Name: ${customer.name}</li>
                    <li>Company: ${customer.company}</li>
                    <li>Phone: ${customer.phone}</li>
                </ul>
            `;

            document.getElementById('customer').innerHTML = output;
        }
    }

    xhr.send();

    e.preventDefault();
}

// Load Customers
function loadCustomers(e){
    const xhr = new XMLHttpRequest();

    xhr.open('GET', 'customers.json', true);

    xhr.onreadystatechange = function(){

        if(this.readyState === 4 && this.status === 200){

            const customers = JSON.parse(this.responseText);

            let output = '';

            // We can't just output the data, we need to loop through

            customers.forEach(function(customer)  {

                output += `
                <ul>
                    <li>ID: ${customer.id}</li>
                    <li>Name: ${customer.name}</li>
                    <li>Company: ${customer.company}</li>
                    <li>Phone: ${customer.phone}</li>
                </ul>
            `;  
            });

            document.getElementById('customers').innerHTML = output;
        }
    }

    xhr.send();

    e.preventDefault();
}

Filed Under: Free Tagged With: Ajax, JavaScript

Book List Application with JavaScript ES6

View Demo

HTML

JavaScript

Filed Under: Free Tagged With: JavaScript

Book List Application with JavaScript ES5

View Demo

I have created a simple book list application with JavaScript ES5.

HTML

JavaScript

Filed Under: Free Tagged With: JavaScript

Number Guesser JavaScript app with Skeleton UI

View Demo

HTML

JavaScript

Filed Under: Free Tagged With: JavaScript

Simple Calculator with Vanilla JavaScript

View Demo

Loan calculator with Bootstrap UI

HTML

JavaScript

[Read more…] about Simple Calculator with Vanilla JavaScript

Filed Under: Free Tagged With: JavaScript

Task List Application with Vanilla JavaScript

View Demo

HTML

JavaScript

[Read more…] about Task List Application with Vanilla JavaScript

Filed Under: Free Tagged With: JavaScript

Swiper Plugin for WordPress

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

 
 
Forgot Password

Filed Under: Premium Tagged With: JavaScript

Simple Bar – Scroll Bar

DEMO

funtcions.php

// =========================================================================
// SIMPLE BAR 
// =========================================================================
function simple_bar() {  
    if(is_front_page()){
        wp_enqueue_style('simple_bar_css', 'https://unpkg.com/simplebar@latest/dist/simplebar.min.css');
        wp_enqueue_script('simple_bar_js', 'https://unpkg.com/simplebar@latest/dist/simplebar.js', array(), '4.1.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'simple_bar' );

HTML

<div class="demo1" data-simplebar>
      <h2>Scroll me!</h2>
      <p>Some more content</p>
      <p class="odd">Some content</p>
      <p>Some more content</p>
      <p class="odd">Some content</p>
      <p>Some more content</p>
      <p class="odd">Some content</p>
      <p>Some more content</p>
      <p class="odd">Scroll me!</p>
      <p>Some more content</p>
      <p class="odd">Some content</p>
      <p>Some more content</p>
      <p class="odd">Some content</p>
      <p>Some more content</p>
      <p class="odd">Some content</p>
      <p>Some more content</p>
      <p class="odd">Scroll me!</p>
      <p>Some more content</p>
      <p class="odd">Some content</p>
      <p>Some more content</p>
      <p class="odd">Some content</p>
      <p>Some more content</p>
      <p class="odd">Some content</p>
      <p>Some more content</p>
      <p class="odd">Some content</p>
      <p>Some more content</p>
      <p class="odd">Some content</p>
      <p>Some more content</p>
</div>

CSS

.demo1 {
  height: 376px;
  max-width: 100%;
}

Filed Under: Free Tagged With: JavaScript

Get videos from channel by YouTube Data API

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium Tagged With: API, JavaScript

Hide header when scrolling down, show it when scrolling up in Genesis

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium Tagged With: JavaScript

Remove only the clicked list item from unordered list – parentNode

const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const descriptionInput = document.querySelector('input.description');
const descriptionP = document.querySelector('p.description');
const descriptionButton = document.querySelector('button.description');
const listUl = listDiv.querySelector('ul');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');

listUl.addEventListener('click', (event) => {
  if (event.target.tagName == 'BUTTON') {
    let li = event.target.parentNode;
    let ul = li.parentNode;
    ul.removeChild(li);
  }
});

toggleList.addEventListener('click', () => {
  if (listDiv.style.display == 'none') {
    toggleList.textContent = 'Hide list';
    listDiv.style.display = 'block';
  } else {
    toggleList.textContent = 'Show list';                        
    listDiv.style.display = 'none';
  }                         
});

descriptionButton.addEventListener('click', () => {
  descriptionP.innerHTML = descriptionInput.value + ':';
  descriptionInput.value = '';
});

addItemButton.addEventListener('click', () => {
  let ul = document.getElementsByTagName('ul')[0];
  let li = document.createElement('li');
  li.textContent = addItemInput.value;
  ul.appendChild(li);
  addItemInput.value = '';
});
  
  
  
  

Filed Under: Free Tagged With: JavaScript

Add class only to clicked element with JS

jQuery(document).on('click', function() {
    jQuery('.collapse').removeClass("show");
});

jQuery(".collapse").click(function(event) {
    // remove classes from all
    jQuery('.show').removeClass('show');
    // add class to the one we clicked
    jQuery('.collapse', this).addBack(this).addClass("show");
    event.stopPropagation();
});     

Filed Under: Free Tagged With: JavaScript

Redirect Contact Form 7 to thank you page

</pre>
//Redirect Contact Form 7 to custom thank you page
add_action( 'wp_footer', 'redirect_cf7' );

function redirect_cf7() {

echo '<script type="text/javascript">
document.addEventListener( "wpcf7mailsent", function( event ) {
if ( "form_id" == event.detail.contactFormId ) {
location = "link";
}
}, false );
</script>';
}
<pre>

Filed Under: Free Tagged With: JavaScript

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