Category: Javascript

Categories
Code Snippets Javascript JQuery SquareSpace Wordpress

SquareSpace | WordPress | CMS Friendly | Scroll to Top Button

In this tutorial, we’ll be adding a Scroll to Top button to the website. These steps will work for SquareSpace, WordPress and any other CMS.

See it in action here: https://billmuirhead.com

First, let’s add the button to the body of the page.

Get the identifier on your header element, it may be on the <nav> element on something similar which lives on the top of each page.

In this case we’re using #site-header where we have a div with id = site-header.

Be sure to add the code below to the body element in such a way that it will show on each page such as the header or footer.

<a class="to-the-top" href="#site-header">
    <span class="to-the-top-long">
    To the top <span class="arrow" aria-hidden="true">↑</span>
    </span><!-- .to-the-top-long -->
    <span class="to-the-top-short">
        Up <span class="arrow" aria-hidden="true">↑</span>
    </span><!-- .to-the-top-short -->
</a>

Next, let’s add the javascript/ Jquery to add the scroll to top functionality to the button. It will the button when we’re already at the top!

First, add the following Jquery script tag to the Footer section to make sure Jquery is enabled:

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>

Following that, add the Scroll to Top javascript code also to the Footer section immediately after the Jquery script above.

jQuery( document ).ready(function() {
    
            
    jQuery(window).bind('scroll', function() {
            
            wrap = jQuery('body');
            scrollTop = jQuery(window).scrollTop();
        
            distance = 50;
            console.log("slide height!");
                                     
            if (scrollTop > distance)	{
                wrap.addClass("fixed");
                jQuery( ".to-the-top" ).show();
            } else {
                wrap.removeClass("fixed");
                jQuery( ".to-the-top" ).hide();
            }		
        
    });	
    
    
    jQuery( ".to-the-top" ).click(function() {
        
        document.body.scrollTop = 0; // For Safari
  		document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
        
    });
    
});

Video explanation for implementing on SquareSpace :

Categories
Code Snippets CSS Javascript JQuery SquareSpace

SquareSpace | How to Add an (FAQ) Accordian

HTML====
<button class="accordian">
  Section 1
</button>
<div class="panel">
  <p>
    Lorem ipsum....
  </p>  
</div>
<button class="accordian">
  Section 2
</button>
<div class="panel">
  <p>
    Lorem ipsum....
  </p>  
</div>
<button class="accordian">
  Section 3
</button>
<div class="panel">
  <p>
    Lorem ipsum....
  </p>  
</div>

CSS====
<style>
  
  .accordian {
           background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        text-align: left;
        border: none;
        outline: none;
        transition: 0.4s;
  }
  
  .panel {
       padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
  }
  
  .active, .accordian:hover {
           background-color: #ccc; 
  }
  
  .accordian:after {
           content: '\02795';
        font-size: 13px;
        color: #777;
        float: right;
        margin-left: 5px;
  }
  
  .accordian.active:after {
           content: '\02796'; 
  }

</style>

Javascript====
<script>
    var acc = document.getElementsByClassName("accordian");
      var i;
  
      for (i = 0; i < acc.length; i++) {
         acc[i].addEventListener("click", function() {
              this.classList.toggle("active");
              var panel = this.nextElementSibling;
          
              if(panel.style.display === "block") {
                 panel.style.display = "none"; 
            }
              else {
                 panel.style.display = "block"; 
            }
        });
    }

</script>

 

Categories
Code Snippets CSS Javascript JQuery

Add a Class to your Header on Scroll

jQuery( document ).ready(function() {
            
    jQuery(window).bind('scroll', function() {
            
            wrap = jQuery('body');
            scrollTop = jQuery(window).scrollTop();
        
            distance = 50;
                                 
            if (scrollTop > distance)	{
                wrap.addClass("fixed");
            } else {
                wrap.removeClass("fixed");
            }		
        
    });

});

 

Categories
Code Snippets CSS Javascript

Load CSS File Dynamically with Javascript

var cssId = 'myCss';  // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
    var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'https://kimberleydurrant.com/test.css';
    link.media = 'all';
    head.appendChild(link);
}

 

Categories
Javascript JQuery

Trigger Child Link when Parent is Clicked

Use the code below. Simply change “.parent” to match the parent’s class.

jQuery('.parent').click(function() {

    window.location = jQuery(this).find("a").first().attr("href");

});

 
Also, add a hover effect to the parent element using css so that users know its clickable.

.parent:hover {
    cursor: pointer;
}
Categories
Blog Code Snippets Javascript JQuery

Woocommerce – Prevent the Product Image from Opening in New Window

You’ve got your woocommerce site up and running but there’s this really annoying thing happening when users click on the product image. The image opens in the same window, navigating away from the product page.

Here’s a quick fix using jquery. If you’re not familiar with child themes, download the Custom CSS/JS plugin and drop this into a javascript file!

jQuery(document).ready(function( $ ){
  if ( $(".woocommerce-product-gallery__image").length ) {    //make sure the link element exists on the page
    $( ".woocommerce-product-gallery__image a" ).click(function( event ) {
      event.preventDefault();     //cancel the onclick action
    });
  }
});