A Custom shortcode example for your Video Background

add_shortcode('video-bg', function($attr){
	$shortcode_atts = shortcode_atts( array(
		'url' => '/wp-content/uploads/Welcome-to-Paia-Inn-1080p.mp4',
		'poster' => 'https://mlmo7tmmvaed.i.optimole.com/w:auto/h:auto/q:mauto/f:avif/https://shimion.com/wp-content/uploads/hero-image-1.jpg',
		'logo' => 'https://mlmo7tmmvaed.i.optimole.com/w:auto/h:auto/q:mauto/f:avif/https://shimion.com/wp-content/uploads/Paia-Inn-Logo-Alternate.png',
		'title'	=> 'Where Surf & Sand Meet Sophistication Maui, Hawaii',
		'book_now_url'	=> 'https://paiainn.client.innroad.com/',
	), $atts );
	$html = '<div class="ld-video_wapper">
		

<div id="video_background_img" class="video_background" style="background-image:url('.$shortcode_atts['poster'].');"></div><!-- The video -->
<video autoplay="" muted="" id="myVideo">
  <source src="'.$shortcode_atts['url'].'" type="video/mp4">
</video>
<div class="video-itro-section"  onclick="playPause()">
			<div class="video-itro-section-inner">
				<img width="1424" height="1261" src="'.$shortcode_atts['logo'].'" class="attachment-full size-full" alt="" style="max-width: 350px;">								
				<h2 class="elementor-heading-title elementor-size-default">'.$shortcode_atts['title'].'</h2>
				<div class="elementor-button-wrapper">
			<a href="'.$shortcode_atts['book_now_url'].'" class="elementor-button-link elementor-button elementor-size-sm" role="button" id="readmore-button">
						<span class="elementor-button-content-wrapper">
						<span class="elementor-button-text">Book Now</span>
		</span>
					</a>
		</div>
			</div>
		</div>
		
<div class="video_overlay"></div>
<div id="video_instructio">Click to play/pause video</div>
</div>
<style>
	.ld-video_wapper{
		position: relative;
		min-height: 100%;
		min-width: 100%;
		width: 100%;
    	height: 100vh;
		    cursor: pointer;
}
	/* Style the video: 100% width and height to cover the entire window */
#myVideo {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 100%;
  min-height: 100%;
}


.video_background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: top left;
    /* min-width: 100%; */
    /* min-height: 100%; */
    /* z-index: 9999999999; */
}

.video_overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: top left;
    background-color: #00000042;
}


.video-itro-section {
    z-index: 9999;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
}

.video-itro-section-inner {
    min-width: 0;
    min-height: 0;
    margin: auto;
    display: inline;
    text-align: center;
    max-width: 767px;
}

.video-itro-section-inner h2 {
    font-family: "Lato", Sans-serif;
    font-size: 35px;
    font-weight: 700;
    text-transform: uppercase;
    font-style: normal;
    text-decoration: none;
    color: #fff;
}

#video_instructio {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #afdbd6;
    font-weight: bold;
    display: none;
}

.ld-video_wapper:hover #video_instructio {
    display: block;
}

@media(max-width: 768px){
	.hide-on-mobile{
		display: none;
	}
}


	</style><script>
var video = document.getElementById("myVideo");
video.muted = false;
console.log(video);
video.onended = function() {
  video.style.display = "none";
  document.getElementById("video_background_img").display = "block";
  document.getElementById("video_instructio").style.display = "none";
};
function playPause() { 
  if (video.paused) 
    video.play(); 
  else 
    video.pause(); 
} 
</script>';

return $html;
	
});

Create Object Oriented Classes In JQuery

Create an object oriented style with jQuery. Make use of the constructor() method and access public and private methods from within the class scope.

/*
* myClass
*/
var myClass = function(options){

/*
* Variables accessible
* in the class
*/
var vars = {
myVar : 'original Value'
};

/*
* Can access this.method
* inside other methods using
* root.method()
*/
var root = this;

/*
* Constructor
*/
this.construct = function(options){
$.extend(vars , options);
};

/*
* Public method
* Can be called outside class
*/
this.myPublicMethod = function(){
console.log(vars.myVar);

myPrivateMethod();
};

/*
* Private method
* Can only be called inside class
*/
var myPrivateMethod = function() {
console.log('accessed private method');
};

/*
* Pass options when class instantiated
*/
this.construct(options);

};

/*
* USAGE
*/

/*
* Set variable myVar to new value
*/
var newMyClass = new myClass({ myVar : 'new Value' });

/*
* Call myMethod inside myClass
*/
newMyClass.myPublicMethod();

JavaScript forEach Array method

Quick Usage

For this quick usage consider that var awesomeArray = [1, 2, 3, 4, 5];.awesomeArray.forEach(function(element, index) { });

Details

Javascript’s ES5 forEach() Array method is a fast way to iterate through all elements of an array. It executes the provided function for each element of the array, passing down the current element and index.

  • Full syntax example

    var awesomeArray = [1, 2, 3, 4, 5];
    var thisValue = window;

    awesomeArray.forEach(function(element, index, array) {
    /* do something */
    }, thisValue);

  • Paramenters

    • function(element, index, array)

      Function passing the current element, current index and the full arrayas paramenters.

    • thisValue

      The context on which the function is running. Defaults to undefined.

  • Return Value

    This method returns undefined.

  • Support

    All browsers.

Javascript empty an existing array

A couple methods on how to empty an array in Javascript

Consider var my_array = [1, 2, 3]; and var other_array = my_array;

  • New empty array references remain unchanged

    Be aware that if you had any references to my_array they’ll remain unchanged as you would be pointing my_array to a newly created one.

    my_array = []; // other_array is still [1, 2, 3]

  • Setting array.length to 0

    Be aware that as we’re updating the value, all references to my_array will still point to the same changed array.

    my_array.length = 0; // other_array is now empty []

  • Array splice() method

    Be aware that as we’re updating the value, all references to my_array will still point to the same changed array.

    my_array.splice(0, my_array.length);
    // other_array is now empty []

  • Lodash’s remove() method

    Be aware that as we’re updating the value, all references to my_array will still point to the same changed array.

    _.remove(my_array, undefined);
    // other_array is now empty []

Javascript string contains substring with performance comparison

I’ve rounded up and tested few performant Javascript methods for checking if a string contains a substring.

For all examples please consider var string = “Hello World”; and var substring = “World”;

  • Javascript ES5 indexOf() method – FASTEST

    string.indexOf(substring);

  • Javascript Lodash library includes() method – 90% slower

    _.includes(string, substring);

  • Javascript ES6 includes() method – 94% slower

    string.includes(substring);

  • Javascript ES5 match() method – 99% slower

    string.match(new RegExp(substring));

  • Javascript ES5 test() method – 99% slower

    new RegExp(substring).test(string);

For benchmarking I’ve used this JSPERF test setup.

Show hidden files on Windows 10

For showing or hidding hidden files and folders on Windows 10 just do the following:

  • Locate the search box on the Taskbar
  • Type Folder on the search box
  • Select Show hidden files and folders from the search results
  • Locate the Advanced settings section
  • Select Show hidden files, folders, and drives
  • Click on Ok to confirm it

Show hidden files on macOS and mac OSX

The fast path using Finder

Since the release of macOS Sierra it is possible to use the following:

  • Open the Finder application
  • Press CMD + SHIFT + .

The long path using the Terminal

For older versions of the mac OSX use the following:

  • Open the Terminal application
  • Paste the following code into the Terminaldefaults write com.apple.finder AppleShowAllFiles YES
  • Press the return key

GetElementById Javascript DOM Method

The javascript Document method getElementById(String) is a fast way of returning an HTML Element Object representing the element that matches the specified idstring parameter.

Quick Usage

var element = getElementById("html-tag-id-attribute");

Method Details

  • Syntax

    var element = getElementById(id);

  • Paramenter

    The id parameter is a string with the html element id attribute to be searched.

  • Return Value

    HTML Element Object or NULL.

  • Support

    All browsers.

  • More References

Performance Comparison

Consider the following HTML setup. The goal of this test is to select the section‘s first div element

<section>
<div class="class-selector-0 general" id="id-selector-0"></div>
<div class="class-selector-1 general" id="id-selector-1"></div>
<div class="class-selector-2 general" id="id-selector-2"></div>
</section>

  • DOM getElementById( ) – 386.44 – FASTEST

    var element = document.getElementById("id-selector-0");

  • DOM getElementsByClassName( ) – 141.60

    var element = document.getElementsByClassName("class-selector-0")[0];

  • DOM querySelector( ) by id – 140.65

    var element = document.querySelector('#id-selector-0');

  • DOM getElementsByTagName( ) – 139.91

    var element = document.getElementsByTagName("div")[0];

  • jQuery( ) id selector – 24.52

    var element = $("#id-selector-0").get(0);

  • jQuery( ) class selector – 8.94

    var element = $("#id-selector-0").get(0);

  • DOM querySelector( ) by class name – 2.77

    var element = document.querySelector('.class-selector-0');

  • DOM querySelectorAll( ) by tag name – 2.10

    var element = document.querySelectorAll('div')[0];

  • DOM querySelectorAll( ) by class name – 1.93

    var element = document.querySelectorAll('.general')[0];

  • DOM querySelector( ) by tag name – 1.46

    var element = document.querySelector('div:nth-child(0)');

  • DOM querySelector( ) by composed tag – 1.40

    var element = document.querySelector('section &gt; div:nth-child(0)');

Javascript clone object

How to do a shallow or deep clone of an Javascript Object using JS ES5, JS ES6 or Lodash. Please note that in the shallow copy the nested properties are just copied by reference.

  • Javascript ES5 JSON.stringify()Deep Clone

    Be aware that you can’t use JSON.stringify to clone Functions and that Date objects will be stringified in the process.

    var clone = JSON.parse(JSON.stringify(obj));

  • Lodash’s deep cloneDeep()Deep Clone

    var clone = _.cloneDeep(obj, true);

  • Javascript ES6 Object.assign()Shallow CloneFASTEST

    const clone = Object.assign({}, obj);

  • Javascript ES6 spread operatorShallow Clone

    const clone = {...obj};

  • Lodash’s clone()Shallow Clone

    var clone = _.clone(obj, true);

For benchmarking I’ve used this JSPERF test setup.

© 2020 Shimion.com. All rights reserved Privacy Policy | Terms of Use