DevNotes – Page 8 – Code is fun

Iframe no scroll

&lt;iframe src="link.html" width="700px" height="1400px" scrolling="no">&lt;/iframe>

Table scrollbar customize

/* width */
*::-webkit-scrollbar {
  width: 10px;
}

/* Track */
*::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
*::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
*::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

Toggle menu JS

jQuery( document ).ready( function( $ ) {
	var $browserWidth = $( window ).width();
	var $masthead = $( '#page' );

	$.fn.smallMenu = function() {
		$( $masthead ).find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
		$( $masthead ).find( '.site-navigation h1' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );

		$( '.menu-toggle' ).click( function () {
			$( $masthead ).find( '.menu' ).toggle();
			$( this ).toggleClass( 'toggled-on' );
		});
	}

	$(window).resize(function() {
		var $browserWidth = $( window ).width();

		if ( $browserWidth < 800 ) {
			$.fn.smallMenu();
		} else {
			$( $masthead ).find( '.site-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' );
			$( $masthead ).find( '.site-navigation h1' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' );
			$( $masthead ).find( '.menu' ).removeAttr( 'style' );
		}
	});

} );

WPSO Step 5 – Fixing google web fonts

Install Swap Google Fonts Display

WPSO Step 4 – Enable jquery to the latest version

Install jQuery Manager for WordPress and enable latest version of jquery.

WPSO Step 3 – Enable WebP images

Enable WebP Express and save settings.

WPSO Step 2 – Configure Cpanel

Upgrade PHP to the latest version from Cpanel
- Must enable zip extension from PHP configuration.
- Enable Imagick and gd
- Form options tab increase memory limit
Enable Gzip compression
- Go to optimization website
- Enable compress all content

WPSO Step 1 – Basic setup

Install WP Server Health Stats To see the server configuration.
Install Regenerate Thumbnails To generate thumbnails size
Install Smush – Lazy Load Images, Optimize & Compress Images To compress images. Please Don’t activate lazyload from the smush plugin.
Install WP Reset – Most Advanced WordPress Reset Tool to reset and take snapshots.

Add cookie on click JavaScript

    function setCookie(key, value, expiry) {
        var expires = new Date();
        expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000));
        document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
    }

    function getCookie(key) {
        var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
        return keyValue ? keyValue[2] : null;
    }

    function eraseCookie(key) {
        var keyValue = getCookie(key);
        setCookie(key, keyValue, '-1');
    }
jQuery(document).on('click', '#mycookiebtn', function(event){
      setCookie('test','1','1'); // key,value,expiry in days
      
    });

var mycookier = getCookie('test');

// if ( mycookier == true ) {

// window.location = "http://healthsurance.bklstaging.com/hospital-patient/";
//   }

This code needs to put different template as cookie available hole site.


if ( mycookier == true ) {

 window.location = "http://healthsurance.bklstaging.com/hospital-patient/";  }

Creating Playful Effects With CSS Text Shadows

&lt;!DOCTYPE html>
&lt;html lang="en">
  &lt;head>
    &lt;meta charset="UTF-8" />
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" />
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" />
    &lt;title>Document&lt;/title>
    &lt;style>
      .playful span {
        position: relative;
        color: #5362f6;
        text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8,
          0.75px 0.75px #e485f8, 1px 1px #e485f8, 1.25px 1.25px #e485f8,
          1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8, 2px 2px #e485f8,
          2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,
          3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8,
          3.75px 3.75px #e485f8, 4px 4px #e485f8, 4.25px 4.25px #e485f8,
          4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8, 5px 5px #e485f8,
          5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,
          6px 6px #e485f8;
        animation: scatter 1.75s infinite;
      }

      .playful span:nth-child(2n) {
        color: #ed625c;
        text-shadow: 0.25px 0.25px #f2a063, 0.5px 0.5px #f2a063,
          0.75px 0.75px #f2a063, 1px 1px #f2a063, 1.25px 1.25px #f2a063,
          1.5px 1.5px #f2a063, 1.75px 1.75px #f2a063, 2px 2px #f2a063,
          2.25px 2.25px #f2a063, 2.5px 2.5px #f2a063, 2.75px 2.75px #f2a063,
          3px 3px #f2a063, 3.25px 3.25px #f2a063, 3.5px 3.5px #f2a063,
          3.75px 3.75px #f2a063, 4px 4px #f2a063, 4.25px 4.25px #f2a063,
          4.5px 4.5px #f2a063, 4.75px 4.75px #f2a063, 5px 5px #f2a063,
          5.25px 5.25px #f2a063, 5.5px 5.5px #f2a063, 5.75px 5.75px #f2a063,
          6px 6px #f2a063;
        animation-delay: 0.3s;
      }

      .playful span:nth-child(3n) {
        color: #ffd913;
        text-shadow: 0.25px 0.25px #6ec0a9, 0.5px 0.5px #6ec0a9,
          0.75px 0.75px #6ec0a9, 1px 1px #6ec0a9, 1.25px 1.25px #6ec0a9,
          1.5px 1.5px #6ec0a9, 1.75px 1.75px #6ec0a9, 2px 2px #6ec0a9,
          2.25px 2.25px #6ec0a9, 2.5px 2.5px #6ec0a9, 2.75px 2.75px #6ec0a9,
          3px 3px #6ec0a9, 3.25px 3.25px #6ec0a9, 3.5px 3.5px #6ec0a9,
          3.75px 3.75px #6ec0a9, 4px 4px #6ec0a9, 4.25px 4.25px #6ec0a9,
          4.5px 4.5px #6ec0a9, 4.75px 4.75px #6ec0a9, 5px 5px #6ec0a9,
          5.25px 5.25px #6ec0a9, 5.5px 5.5px #6ec0a9, 5.75px 5.75px #6ec0a9,
          6px 6px #6ec0a9;
        animation-delay: 0.15s;
      }

      .playful span:nth-child(5n) {
        color: #555bff;
        text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8,
          0.75px 0.75px #e485f8, 1px 1px #e485f8, 1.25px 1.25px #e485f8,
          1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8, 2px 2px #e485f8,
          2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,
          3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8,
          3.75px 3.75px #e485f8, 4px 4px #e485f8, 4.25px 4.25px #e485f8,
          4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8, 5px 5px #e485f8,
          5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,
          6px 6px #e485f8;
        animation-delay: 0.4s;
      }

      .playful span:nth-child(7n),
      .playful span:nth-child(11n) {
        color: #ff9c55;
        text-shadow: 0.25px 0.25px #ff5555, 0.5px 0.5px #ff5555,
          0.75px 0.75px #ff5555, 1px 1px #ff5555, 1.25px 1.25px #ff5555,
          1.5px 1.5px #ff5555, 1.75px 1.75px #ff5555, 2px 2px #ff5555,
          2.25px 2.25px #ff5555, 2.5px 2.5px #ff5555, 2.75px 2.75px #ff5555,
          3px 3px #ff5555, 3.25px 3.25px #ff5555, 3.5px 3.5px #ff5555,
          3.75px 3.75px #ff5555, 4px 4px #ff5555, 4.25px 4.25px #ff5555,
          4.5px 4.5px #ff5555, 4.75px 4.75px #ff5555, 5px 5px #ff5555,
          5.25px 5.25px #ff5555, 5.5px 5.5px #ff5555, 5.75px 5.75px #ff5555,
          6px 6px #ff5555;
        animation-delay: 0.25s;
      }

      @keyframes scatter {
        0% {
          top: 0;
        }
        50% {
          top: -10px;
        }
        100% {
          top: 0;
        }
      }
      body {
        background-color: #e4fff7;
      }

      h1 {
        font-size: 65px;
        text-transform: uppercase;
        font-family: "Archivo Black", "Archivo", sans-serif;
        font-weight: normal;
        display: block;
        width: 666px;
        max-width: 80vw;
        min-height: 90px;
        height: auto;
        text-align: center;
        margin: 10rem auto;
        margin: calc(50vh - 5rem) auto;
      }
    &lt;/style>
  &lt;/head>
  &lt;body>
    &lt;h1 class="playful" aria-label="Wash your hands">
      &lt;span aria-hidden="true">W&lt;/span>&lt;span aria-hidden="true">a&lt;/span
      >&lt;span aria-hidden="true">s&lt;/span>&lt;span aria-hidden="true">h&lt;/span
      >&lt;span aria-hidden="true"> &lt;/span>&lt;span aria-hidden="true">y&lt;/span
      >&lt;span aria-hidden="true">o&lt;/span>&lt;span aria-hidden="true">u&lt;/span
      >&lt;span aria-hidden="true">r&lt;/span>&lt;span aria-hidden="true"> &lt;/span
      >&lt;span aria-hidden="true">h&lt;/span>&lt;span aria-hidden="true">a&lt;/span
      >&lt;span aria-hidden="true">n&lt;/span>&lt;span aria-hidden="true">d&lt;/span
      >&lt;span aria-hidden="true">s&lt;/span>&lt;span aria-hidden="true">!&lt;/span>
    &lt;/h1>
  &lt;/body>
&lt;/html>