How Enable RIGHT CLICK contextmenu when it is disabled on HTML PAGES USING jQuery

Enable RIGHT CLICK contextmenu when it is disabled on HTML PAGES USING jQuery

Goto main javascript file and search for CONTEXTMENU -- and delete this code block

window.addEventListener("contextmenu",(function(e){e.preventDefault()}),!1),

Huge Collections of Musical Instrument codes in Javascript

Huge collections of MIDI sequeners & instruments javascript codes for your references

Check Here

Keyborad, Organ, Acostic Guitar, EDM Javascript Code

Hey I found this code for all javascript nerds for Keyboard, Organ, Acostic Guita and EDM script Created by Keith William Horwood for your here

Javascript Code for Muslical Instruments

DJ Deck Controller using JAVASCRIPT, CSS, HTML

this is complete working script for DJ Controller on browser that allows you to select 2 tracks for DJing

Check this link in CODE PEN --- DJ Controller

onchecked Multiple checkbox elements adding / deducting to total amount in plain javascript

This is a very simple example of how to deal when you have MULTIPLE CHECKBOX with an AMOUNT to be ADDED to the GRAND TOTAL. Also to be displayed on right table rows

There is a CATCH --> users might CHECK & UN-CHECK in such case there is a need to ADD & SUBSTRACT functionality as well as updating TABLE on-the-right with description.

HTML Code

<style type="text/css"> #rfare { width: 100%; } #rfare td { width: 50%; padding: 6px; border-bottom: #000 1px dashed; } #ytotal { border-top: red 1px solid !important; border-bottom: red 1px double !important; } </style> <div id="ldiv"> <label>Base Fare : </label> <input type="text" name="ifare" id="ifare" value="102.5"><br> <label>Tips : </label> <input type="text" name="tips" id="tips" value="20.25"><br> <h3>Additional Charges for Special Rides</h3> <input type="checkbox" name="ostation" id="ostation" value="200" onclick='handleChange(this);' data-chk="Out Station Ride Fees"> Out of State Pickup & Drop-Off Fees - $200+<br> <input type="checkbox" name="sevent" id="sevent" value="50" onclick='handleChange(this);' data-chk="Sporting Event Pickup / Drop-Off Fee" > Sports Stadium Pickup / Drop-Off - $50 Fees<br> <input type="checkbox" data-chk="Wedding Party Ride Fee" name="wevent" id="wevent" value="50" onclick='handleChange(this);' > Wedding Party Pickup or Drop-Off Fees - $50<br> <input type="checkbox" name="ometro" id="ometro" data-chk="Out of DFW Metroplex Pickup / Drop-Off Fee" value="40" onclick='handleChange(this);' > Out of DFW Metroplex Pickup / Drop-Off Fees - $40<br><br> </div> <div id="ldiv"> <table id="rfare"> <tr><td colspan="2"></td></tr> <tr id="tkt" style="font-size: 18px; font-weight: bold;"> <td>Type of Fleet</td> <td align="right"><?php echo strtoupper($booknow["cftype"]); ?></td> </tr> <tr id="tkt" style="font-size: 18px; font-weight: bold;"> <td>Fare</td> <td align="right">$ <?php echo number_format($booknow["ifare"],2); ?></td> </tr> <tr id="ytips"></tr> <tr id="yostation"></tr> <tr id="ysevent"></tr> <tr id="ywevent"></tr> <tr id="yometro"></tr> <tr id="ytotal"></tr> <tr> <td>Approx Distance</td> <td align="right"><?php echo $booknow["imiles"]; ?> Miles</td> </tr> <tr></tr> </table> </div>

JAVASCRIPT - CODE

let ifare = document.getElementById("ifare").value; let gtips = document.getElementById("tips").value; let tot =(+ifare + +gtips); let ostn; let lbl; document.getElementById("ytips").innerHTML = '<td style="font-size: 16px; font-weight: bold;">Driver Gratuity</td><td align="right" style="font-size: 16px; font-weight: bold;">$ ' + gtips + '</td>'; function handleChange(chkbox){ if(chkbox.checked == true){ ostn = chkbox.value; tot += +ostn; //alert('this value $' + tot); lbl = chkbox.getAttribute('data-chk'); qname = 'y' + chkbox.name; document.getElementById(qname).innerHTML = '<td style="font-size: 16px; font-weight: bold;">' + lbl + '</td><td align="right" style="font-size: 16px; font-weight: bold;">$ ' + ostn + '</td>'; document.getElementById('ytotal').innerHTML = '<td style="font-size: 16px; font-weight: bold;">Total Fare</td><td align="right" style="font-size: 16px; font-weight: bold;">$ ' + tot + '</td>'; //alert(lbl + ' : ' + qname + ' ===== $' + ostn); }else{ //document.getElementById("submit").setAttribute("disabled", "disabled"); // ostn = 0; ostn = chkbox.value; qname = 'y' + chkbox.name; tot += -ostn; //alert('this value $' + tot); document.getElementById(qname).innerHTML = ''; document.getElementById('ytotal').innerHTML = '<td style="font-size: 16px; font-weight: bold;">Total Fare</td><td align="right" style="font-size: 16px; font-weight: bold;">$ ' + tot + '</td>'; } } document.getElementById('ytotal').innerHTML = '<td style="font-size: 16px; font-weight: bold;">Total Fare</td><td align="right" style="font-size: 16px; font-weight: bold;">$ ' + tot + '</td>';

AddEventListener for SELECT Element HTML5 JavaScript

If you are wondering would ADDEVENTLISTENER for SELECT ELEMENT, then check this

<select name="cfleet" id="cfleet"> <option value="sedan">Sedan (3 PAX)</option> <option value="SUV">SUV (6 PAX)</option> <option value="Passenger Van">Passenger Van (10 PAX)</option> <option value="Towncar Stretch Limo">Towncar Stretch Limo (10 PAX)</option> <option value="Hummer Stretch Limo">Hummer Stretch Limo (19 PAX)</option> </select> <script> document.getElementById("cfleet").addEventListener("change",function(){ alert('item changed!!!'); }); </script>

FETCH an IMAGE with ASYNC and AWAIT in Javascript

I want to fetch an IMAGE from the application and display. Here is a simple code

<img src="" id="rainbow" width="480" /> <script> console.log('about to fetch an image'); catchRainbow() .then(response => { console.log('DONE!!! iMAGE IS RENDERED ON THE PAGE'); }) .catch(error =>{ console.log('error while fetching an error'); console.error(error); }); // here goes catchRainbow() function with async and await async function catchRainbow(){ const response = await fetch('rainbow.jpg'); const img123 = await response.blob(); // image datatype is BLOB document.getElementById('rainbow').src = URL.createObjectURL(img123); } </script>

Courtesy --- Full Youtube Video

More Excercises to play with TEXT & DATA are here

Disable nice-select on dropdown SELECT element

How to disable nice-select applied on SELECT element

$('#cstime').niceSelect('destroy');

Swiper Sliders Pure Javascript and jQuery for Web and Reach - FREE

This is mindblowing collection of API by Vladimir Kharlampidi for everyone who are looking for lightweight SLIDERS for Websites and ReactJS

SWIPER SLIDER

• Library Agnostic
• 1:1 Touch movement
• Mutation Observer
• Rich API
• Full True RTL Support
• Multi Row Slides Layout
• Transition Effects
• Two-way Control
• Full Navigation Control
• Flexbox Layout
• Most Flexible Slides Layout Grid
• Parallax Transitions
• Images Lazy Loading
• Virtual Slides

Get Device Current Position without Button Click - Geolocation HTML5

This is strictly for BEGINNERS & pros can refer it too.

Get User / Device Current Position Lattitude & Longitude without clicking button using HTML5 GEOLOCATION

// GET LATITUDE AND LONGITUDE using HTML5 GEOLOCATION without button click <input type="text" name="latlng" id="latlng"> <script> if(!navigator.geolocation) { status.textContent = 'Geolocation is not supported by your browser'; } else { navigator.geolocation.getCurrentPosition(success, error); } function success(position) { const latitude = position.coords.latitude; const longitude = position.coords.longitude; var ltlng = position.coords.latitude + ',' + position.coords.longitude; return document.getElementById('latlng').value = ltlng; } function error() { status.textContent = 'Unable to retrieve your location'; } </script>

How to Store an Array in LocalStorage - [SOLVED]

localStorage only supports strings. Use JSON.stringify() and JSON.parse().

place array inside onDeviceReady and asign the json array to localStorage

onDeviceReady: function() { this.receivedEvent('deviceready'); var xarr = { comp_name : 'my company name', phone: '408-543-9351', email: 'info@mycompwebsite.com',logo: 'img/mycomp-logo.png' } localStorage.setItem("arr", JSON.stringify(xarr)); },

On Page parse values stored in localStorage array into another json array for implimentation

// create div / span elements with respective IDs to display values var zarr = JSON.parse(localStorage.getItem("arr")); document.getElementById('xlogo').src = zarr.logo; document.getElementById('xflt').src = zarr.fleet; document.getElementById('xphone').innerHTML = zarr.phone; document.getElementById('xcomp').innerHTML = zarr.comp_name;

Wait for 5 Seconds and Redirect Page - Javascript or PHP

Piece of Cake. Here is how you can REDIRECT PAGE after waiting for 5 Seconds in PHP or Javascript

Redirect after 5 seconds in Javascript

<script> window.setTimeout(function(){ window.location.href = "https://www.google.co.in"; }, 5000); </script>

Redirect after 5 seconds in PHP

<php header("Refresh: 10; url=" . $url . "http://localhost/mylookout/paypal_redirect.php?xno=" . $prno); ?>

Javascript not Adding two values from dropdown and input element - solved

prepend "+" to value
use canary : (+waiting_charge + +ifare)
check the example

<div id="dfare"><input type="text" id="ifare" name="ifare" value="125.86554215"></div> <select name="wait" id="wait" onchange="getwait()" > <option value="0">--- Waiting Time ---</option> <option value="30">30 Mins</option> <option value="60">1 Hour</option> <option value="90">1 Hour 30 Mins</option> <option value="120">2 Hour</option> <option value="150">2 Hour 30 Mins</option> <option value="180">3 Hour</option> <option value="210">3 Hour 30 Mins</option> <option value="240">4 Hour</option> <option value="270">4 Hour 30 Mins</option> <option value="300">5 Hour</option> <option value="330">5 Hour 30 Mins</option> <option value="360">6 Hour</option> <option value="390">6 Hour 30 Mins</option> </select> <script type="text/javascript"> function getwait(){ var ifare = document.getElementById('ifare').value; var k = document.getElementById('wait'); var waiting = k.options[k.selectedIndex].value; var tfare = (+waiting + +ifare); //document.getElementById("dfare").innerHTML += '<Br>Base Fare : $ ' + parseFloat(ifare).toFixed(2) + '<br>'; //document.getElementById("dfare").innerHTML += '<Br>Waiting Charge : $ ' + parseFloat(waiting,2) + '<br>'; document.getElementById("dfare").innerHTML += '<br>Total Fare : ' + parseFloat(tfare).toFixed(2) + '<br>'; document.getElementById("dfare").innerHTML += '<input type="text" name="tfare" id="tfare" value="' + parseFloat(tfare).toFixed(2) + '" />'; } </script>

XDSoft DateTimePicker - Previous Dates Only & Future Days

XDSoft Date & Time Picker is my favorite script & have been using for very longtime.

Its a simple Method, check the samples

<script> jQuery.noConflict(); (function( $ ) { $(function() { // ONLY FUTURE DATES $('#fdate').datetimepicker({ timepicker:false, format:'m/d/Y', minDate: "1", }); // ONLY PREVIOUS DATES $('#pdate').datetimepicker({ timepicker:false, format:'m/d/Y', startDate: '<?php date("m/d/Y", strtotime("-3 months")); ?>', maxDate:"1", }); }); })(jQuery); </script>

Add Multiple Checkbox and Dropdown to Total - Javascript

Very Simple, Try this...


<html> <head> </head> <body> <div id="container"><h1>Add-ons</h1> <input type="checkbox" name="ch1" value="10" id="qr1" />Add-on Number 1 - 10 QR <br /> <input type="checkbox" name="ch1" value="20" id="qr1" />Add-on Number 2 - 20 QR <br /> <input type="checkbox" name="ch1" value="40" id="qr1" />Add-on Number 3 - 40 QR <br /> <input type="checkbox" name="ch1" value="60" id="qr1" />Add-on Number 4 - 60 QR <br /> </div> <div> I want more add-ons <select id="more" name="more"> <option value="0">0</option> <option value="30">1</option> <option value="50">2</option> <option value="100">3</option> </select><br><br> <span id="span"></span><br><br> User total usage: <span id="usertotal"> </span> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> function displayVals() { calcUsage(); var singleValues = $("#more").val(); $("#span").html("<b>more addons:</b> " + singleValues + ' QR'); } var $cbs = $('input[name="ch1"]'); function calcUsage() { var total = $("#more").val(); $cbs.each(function() { if (this.checked) total = parseInt(total) + parseInt(this.value); }); $("#usertotal").text(total + ' QR'); } $("select").change(displayVals); displayVals(); //For checkboxes $cbs.click(calcUsage); </script> </body> </html>​

Calculate Total Multiple Checkbox and Input Javascript

Very Simple...

<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> function totalIt() { var input = document.getElementsByName("product"); var ifare = document.getElementById('ifare').value; //document.getElementById("tfare").value = "$" + ifare.toFixed(2); var total = 0; for (var i = 0; i < input.length; i++) { if (input[i].checked) { total += parseFloat(input[i].value); var tfare = (parseFloat(ifare) + parseFloat(total)); document.getElementById("tfare").value = "$" + tfare.toFixed(2); //alert('ifare : $ ' + tfare); } } document.getElementById("total").value = "$" + total.toFixed(2); var tfare = ifare + document.getElementById("total").value; } </script> </head> <body> <form action="" id="theForm"> Based Fare : <input type="text" name="ifare" id="ifare" value="142.18" /><br> <fieldset> <legend> Fare Details </legend> <label> <input name="product" value="12.95" type="checkbox" id="p1" onclick="totalIt()"/> Toddler Seats $12.95 </label> <label> <input name="product" value="5.99" type="checkbox" id="p2" onclick="totalIt()"/> Airport Toll $5.99 </label> <label> <input name="product" value="1.99" type="checkbox" id="p3" onclick="totalIt()"/> Tax $1.99 </label> <label> <input name="product" value="19.99" type="checkbox" id="p4" onclick="totalIt()"/> Driver Tips $19.99 </label> <label> <input name="product" value="41.99" type="checkbox" id="p5" onclick="totalIt()"/> Fuel Surcharge $41.99 </label> <label> Total <input value="$0.00" readonly="readonly" type="text" id="total"/> <input value="$0.00" readonly="readonly" type="text" id="tfare"/> </label> </fieldset> <input value="Submit" type="submit"/> <input value="Reset" type="reset"/> </form> </body> </html>​

Password & Confirm Password AJAX Javascript - Solved

Simple AJAX...

<form> <input type="password" name="pxwd" id="pxwd" maxlength="10" /> <input type="password" name="rtpwd" id="rtpwd" maxlength="10" /> <div id="divCheckPasswordMatch" style="color:red;"></div> </form> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $('#rtpwd').on('keyup', function () { if ($(this).val() == $('#pxwd').val()) { $('#divCheckPasswordMatch').html('matching').css('color', 'green'); } else $('#divCheckPasswordMatch').html('not matching').css('color', 'red'); }); </script>

Best Datepicker and Timepicker ever

If you are looking for BEST DATEPICKER and TIMEPICKER...

Check this one : Javascript Date and Time Picker

<script> (function($){ jQuery('#csdate').datetimepicker({ timepicker:false, format:'m/d/Y' }); })(jQuery); </script>

Javascript Year in Reverse Order Dropdown - Resolved

Unlike any other scripts like PHP or ASP.NET, Javascript reverse order is quite different.

Check here...

<select id="selectElementId"></select> <script> var max = 2016, min = 1970, select = document.getElementById('selectElementId'); for (var i = max - 1; i >=min; i--){ var opt = document.createElement('option'); opt.value = i; opt.innerHTML = i; select.appendChild(opt); } </script>

Our latest Deliver - MSP Airport Limo

Find Javascript events fired on an element in Chrome Web Developer?

Try this in Google Chrome to view all javascripts fired by an event

- Hit F12 to open Dev Tools
- Click the Sources tab
- On right-hand side, scroll down to "Event Listener Breakpoints", and expand tree
- Click on the events you want to listen for.
- Interact with the target element, if they fire you will get a break point in the debugger

Look for the SCRIPT OF THE EVENT under "MOUSEDOWN" EVENT

PIECE-OF-CAKE, Eh???? Latest Delivery