Load JavaScript with extra tags for example data-shr-siteid or data-sumo-site-id

Load Load JavaScript with extra tags for example data-shr-siteid or data-sumo-site-id

You can use below code.

<script>
 var loadScript = function(location, callback){
   var fileRef = document.createElement('script');
   fileRef.setAttribute('type','text/javascript');

   if (callback) {
     if (fileRef.readyState) {  // IE
       fileRef.onreadystatechange = function() {
         if (fileRef.readyState == 'loaded' || fileRef.readyState == 'complete') {
           fileRef.onreadystatechange = null;
           callback();
         }
       };
     } else {  // Non-IE
       fileRef.onload = function(){
         callback();
       };
     }
   }

   fileRef.setAttribute('src', location);
   fileRef.setAttribute('data-shr-siteid', '<?php echo $api_key; ?>');
   fileRef.async = true;
   document.head.appendChild(fileRef);
 };

function doss() {
    var surl='<?php echo ShareaholicUtilities::asset_url('assets/pub/shareaholic.js') ?>';
 loadScript(surl, function() {
   // CALLBACK - code that does something with the data returned by loading the script
 });
}
setTimeout("doss();",6000);
</script>
 

Fore more, continue here...

load javascript with callback script

How to load JavaScript with callback script

Sometime you needed to write a javascript that load and after load immediately call other it's related javascript code. It is called load javascript with callback script.

How to achieve it?
It is simple. below is the few lines of code.

<script type="text/javascript">
function loadmyScript(url, callback){
    var sc = document.createElement("script")
    sc.type = "text/javascript";

    if (sc.readyState){  //IE
        sc.onreadystatechange = function(){
            if (sc.readyState == "loaded" ||
                    sc.readyState == "complete"){
                sc.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        sc.onload = function(){
            callback();
        };
    }

    sc.src = url;
    document.getElementsByTagName("head")[0].appendChild(sc);
}

function aa(){
loadmyScript("//www.com/javascript.js", function(){
// add here callback javascript code

});
}
aa();
</script>


below is one line of JavaScript code that check your system internet connect On of OFF.

Fore more, continue here...

How to remove jQuery migrate from WordPress.

It is important to preserve jquery_migrate file in Admin section. 
You can remove it from client section if it is not creating any issues, because it load unnecessary in client section.
 
Below are the only 4 lines of code which you needed to paste in your theme's function.php file.




<?php

add_filter( 'wp_default_scripts', 'dequeue_jquery_migrate' );
function dequeue_jquery_migrate( &$scripts){
if(!is_admin()){ $scripts->remove( 'jquery');
 $scripts->add( 'jquery', false, array( 'jquery-core' ), '1.10.2' ); } } 


?>

Fore more, continue here...

Java Script Handle name in WordPress

Here listed below most common Javascript handle name with path.

Handle	Path in WordPress
utils	/wp-includes/js/utils.js
common	/wp-admin/js/common.js
sack	/wp-includes/js/tw-sack.js
quicktags	/wp-includes/js/quicktags.js
colorpicker	/wp-includes/js/colorpicker.js
editor	/wp-admin/js/editor.js
wp-fullscreen	/wp-admin/js/wp-fullscreen.js
wp-ajax-response	/wp-includes/js/wp-ajax-response.js
wp-pointer	/wp-includes/js/wp-pointer.js
autosave	/wp-includes/js/autosave.js
heartbeat	/wp-includes/js/heartbeat.js
wp-auth-check	/wp-includes/js/wp-auth-check.js
wp-lists	/wp-includes/js/wp-lists.js
prototype	external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js
scriptaculous-root	external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js
scriptaculous-builder	external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/builder.js
scriptaculous-dragdrop	external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/dragdrop.js
scriptaculous-effects	external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/effects.js
scriptaculous-slider	external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/slider.js
scriptaculous-sound	external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/sound.js
scriptaculous-controls	external: //ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/controls.js
scriptaculous	scriptaculous-dragdrop, scriptaculous-slider, scriptaculous-controls
cropper	/wp-includes/js/crop/cropper.js
jquery (v1.10.2 as of WP 3.8)	jquery-core, jquery-migrate
jquery-core	/wp-includes/js/jquery/jquery.js
jquery-migrate	/wp-includes/js/jquery/jquery-migrate.js (v1.10.2 as of WP 3.8)
jquery-ui-core	/wp-includes/js/jquery/ui/jquery.ui.core.min.js
jquery-effects-core	/wp-includes/js/jquery/ui/jquery.ui.effect.min.js
jquery-effects-blind	/wp-includes/js/jquery/ui/jquery.ui.effect-blind.min.js
jquery-effects-bounce	/wp-includes/js/jquery/ui/jquery.ui.effect-bounce.min.js
jquery-effects-clip	/wp-includes/js/jquery/ui/jquery.ui.effect-clip.min.js
jquery-effects-drop	/wp-includes/js/jquery/ui/jquery.ui.effect-drop.min.js
jquery-effects-explode	/wp-includes/js/jquery/ui/jquery.ui.effect-explode.min.js
jquery-effects-fade	/wp-includes/js/jquery/ui/jquery.ui.effect-fade.min.js
jquery-effects-fold	/wp-includes/js/jquery/ui/jquery.ui.effect-fold.min.js
jquery-effects-highlight	/wp-includes/js/jquery/ui/jquery.ui.effect-highlight.min.js
jquery-effects-pulsate	/wp-includes/js/jquery/ui/jquery.ui.effect-pulsate.min.js
jquery-effects-scale	/wp-includes/js/jquery/ui/jquery.ui.effect-scale.min.js
jquery-effects-shake	/wp-includes/js/jquery/ui/jquery.ui.effect-shake.min.js
jquery-effects-slide	/wp-includes/js/jquery/ui/jquery.ui.effect-slide.min.js
jquery-effects-transfer	/wp-includes/js/jquery/ui/jquery.ui.effect-transfer.min.js
jquery-ui-accordion	/wp-includes/js/jquery/ui/jquery.ui.accordion.min.js
jquery-ui-autocomplete	/wp-includes/js/jquery/ui/jquery.ui.autocomplete.min.js
jquery-ui-button	/wp-includes/js/jquery/ui/jquery.ui.button.min.js
jquery-ui-datepicker	/wp-includes/js/jquery/ui/jquery.ui.datepicker.min.js
jquery-ui-dialog	/wp-includes/js/jquery/ui/jquery.ui.dialog.min.js
jquery-ui-draggable	/wp-includes/js/jquery/ui/jquery.ui.draggable.min.js
jquery-ui-droppable	/wp-includes/js/jquery/ui/jquery.ui.droppable.min.js
jquery-ui-menu	/wp-includes/js/jquery/ui/jquery.ui.menu.min.js
jquery-ui-mouse	/wp-includes/js/jquery/ui/jquery.ui.mouse.min.js
jquery-ui-position	/wp-includes/js/jquery/ui/jquery.ui.position.min.js
jquery-ui-progressbar	/wp-includes/js/jquery/ui/jquery.ui.progressbar.min.js
jquery-ui-resizable	/wp-includes/js/jquery/ui/jquery.ui.resizable.min.js
jquery-ui-selectable	/wp-includes/js/jquery/ui/jquery.ui.selectable.min.js
jquery-ui-slider	/wp-includes/js/jquery/ui/jquery.ui.slider.min.js
jquery-ui-sortable	/wp-includes/js/jquery/ui/jquery.ui.sortable.min.js
jquery-ui-spinner	/wp-includes/js/jquery/ui/jquery.ui.spinner.min.js
jquery-ui-tabs	/wp-includes/js/jquery/ui/jquery.ui.tabs.min.js
jquery-ui-tooltip	/wp-includes/js/jquery/ui/jquery.ui.tooltip.min.js
jquery-ui-widget	/wp-includes/js/jquery/ui/jquery.ui.widget.min.js
jquery-form	/wp-includes/js/jquery/jquery.form.js
jquery-color	/wp-includes/js/jquery/jquery.color.min.js
suggest	/wp-includes/js/jquery/suggest.js
schedule	/wp-includes/js/jquery/jquery.schedule.js
jquery-query	/wp-includes/js/jquery/jquery.query.js
jquery-serialize-object	/wp-includes/js/jquery/jquery.serialize-object.js
jquery-hotkeys	/wp-includes/js/jquery/jquery.hotkeys.js
jquery-table-hotkeys	/wp-includes/js/jquery/jquery.table-hotkeys.js
jquery-touch-punch	/wp-includes/js/jquery/jquery.ui.touch-punch.js
jquery-masonry	/wp-includes/js/jquery/jquery.masonry.min.js
thickbox	/wp-includes/js/thickbox/thickbox.js
jcrop	/wp-includes/js/jcrop/jquery.Jcrop.js
swfobject	/wp-includes/js/swfobject.js
plupload	/wp-includes/js/plupload/plupload.js
plupload-html5	wp-includes/js/plupload/plupload.html5.js
plupload-flash	/wp-includes/js/plupload/plupload.flash.js“
plupload-silverlight	/wp-includes/js/plupload/plupload.silverlight.js
plupload-html4	/wp-includes/js/plupload/plupload.html4.js
plupload-all	plupload, plupload-html5, plupload-flash, plupload-silverlight, plupload-html4
plupload-handlers	/wp-includes/js/plupload/handlers.js
wp-plupload	/wp-includes/js/plupload/wp-plupload.js
swfupload	/wp-includes/js/swfupload/swfupload.js
swfupload-swfobject	/wp-includes/js/swfupload/plugins/swfupload.swfobject.js
swfupload-queue	/wp-includes/js/swfupload/plugins/swfupload.queue.js
swfupload-speed	/wp-includes/js/swfupload/plugins/swfupload.speed.js
swfupload-all	/wp-includes/js/swfupload/swfupload-all.js
swfupload-handlers	/wp-includes/js/swfupload/handlers.js
comment-reply	/wp-includes/js/comment-reply.js
json2	/wp-includes/js/json2.js
underscore	/wp-includes/js/underscore.min.js
backbone	/wp-includes/js/backbone.min.js
wp-util	/wp-includes/js/wp-util.js
wp-backbone	/wp-includes/js/wp-backbone.js
revisions	/wp-admin/js/revisions.js
imgareaselect	/wp-includes/js/imgareaselect/jquery.imgareaselect.js
mediaelement	/wp-includes/js/mediaelement/mediaelement-and-player.min.js
wp-mediaelement	/wp-includes/js/mediaelement/wp-mediaelement.js
zxcvbn-async	/wp-includes/js/zxcvbn-async.js
password-strength-meter	/wp-admin/js/password-strength-meter.js
user-profile	/wp-admin/js/user-profile.js
user-suggest	/wp-admin/js/user-suggest.js
admin-bar	/wp-includes/js/admin-bar.js
wplink	/wp-includes/js/wplink.js
wpdialogs	/wp-includes/js/tinymce/plugins/wpdialogs/js/wpdialog.js
wpdialogs-popup	/wp-includes/js/tinymce/plugins/wpdialogs/js/popup.js
word-count	/wp-admin/js/word-count.js
media-upload	/wp-admin/js/media-upload.js
hoverIntent	/wp-includes/js/hoverIntent.js
customize-base	/wp-includes/js/customize-base.js
customize-loader
customize-preview
customize-controls
accordion
shortcode
media-models
media-views
media-editor
mce-view
admin-tags
admin-comments
xfn
postbox
post
link
comment
admin-gallery
admin-widgets
theme
theme-install
inline-edit-post
inline-edit-tax
plugin-install
farbtastic
iris
wp-color-picker
dashboard
list-revisions
media
image-edit
set-post-thumbnail
nav-menu
custom-header
custom-background
media-gallery
svg-painter

Fore more, continue here...

How to install Pure Chat

If you want to use chat in your web application then Pure chat can help you. it is easy to use. To use Pure Chat just signup and click on "Account" menu (Top Position)

Then click on "Websites". You will find a page with heading 
Step 1: Install Pure Chat on Your Website
Just Copy and paste the given code snippet

<script type='text/javascript' data-cfasync='false'>window.purechatApi = { l: [], t: [], on: function () { this.l.push(arguments); } }; (function () { var done = false; var script = document.createElement('script'); script.async = true; script.type = 'text/javascript'; script.src = 'https://app.purechat.com/VisitorWidget/WidgetScript'; document.getElementsByTagName('HEAD').item(0).appendChild(script); script.onreadystatechange = script.onload = function (e) { if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) { var w = new PCWidget({c: 'xxxxxxxx-xxxxxxxxx-xxxx-xxxxxxxxxxxx', f: true }); done = true; } }; })();</script>

Fore more, continue here...

How to avoid conflict with other JavaScript

To avoid conflict with other javascript code we should use closure. 
Example is listed below:

 (function(){
    //  Paste here JavaScript here
    })();

 

Fore more, continue here...

How to load JavaScript file from assets folder in Shopify

We all already know that Shopify assets folder's path is random and unique name for each Shopify store holders. If you upload some graphics files or JavaScript files or any other files in your Shopify store's assets folder, then how can you identify it's real pah?

For this situation we can use "asset_url" keyword.

For image:

<img src="{{ 'myjavascript.jpg' | asset_url }}" />

For javascript file:
<script type="text/javascript" src="{{ 'myjs.js' | asset_url }}"> </script>


if you want to load only JavaScript file then you can also use this alternative
{{ 'filename.js' | asset_url | script_tag }}

 
So now we can say for other files we can modify the above code as per our requirements with keyword "{{ 'filename' | asset_url }}".

Fore more, continue here...

FTP problem in Reliance Jio sim internet

How to fix FTP problem in Reliance Jio sim internet.

When Reliance Jio 4G LTE Network scheme is a very good scheme for Digital India. We should give thanks to Reliance and Mukesh ambani that he gave us free Internet and voice pack for 6 months. Hope he will extend it for 1 year.

I am a Software developer and I am very happy with Jio 4G LTE Network internet speed. But when I connected FTP then My FTP FileZilla software stuck and not connected with FTP server.

So I was not able to download a file and upload coding files when using Reliance Jio 4G LTE Network internet server.

When I faced this problem I have changed my FTP setting in my system and it worked.
Listed below attached image; wher you can find the solution.

You need to change General setting FTP client while creating FTP connection  in below section.
Encryption to "Only use plain FTP(insecure)"

For better understanding  please see below image:

FTP problem in Reliance Jio sim internet

Fore more, continue here...

load images using JavaScript

Another way to load images using JavaScript

When you write code in JavaScriputer system.
Below is the another way to load images from JavaScript code.

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://www.mysite.com/media/t1.png">
 
function initS() {
    var myimg = document.getElementsByTagName('img');
    for (var i=0; i<myimg.length; i++) {
        if(myimg[i].getAttribute('data-src')) {
            myimg[i].setAttribute('src',myimg[i].getAttribute('data-src'));
        }
    }
}
setTimeout("initS();", 20000);
</script> 


connect On of OFF.

Fore more, continue here...

$(...).flexslider is not a function jquery flexslider not working

Are you facing JavaScript flexslider error "$(...).flexslider is not a function" or jquery flexslider not working?

If jquery flexslider is not working or showing error in console ""$(...).flexslider is not a function". 

If you do not want to see this error "$(...).flexslider is not a function" then use one instance of jquery.js file and keep in mind do not use defer or async keyword in below 3 files:

1- jquery.js

2- jquery.flexslider-min.js

3- jquery.prettyPhoto.js --> *if you are also using this file.

Fore more, continue here...

add comment in shopify

How to add comment in shopify

Using comment and endcomment tag you can add any one line multiple lines comments in Shopify code. below is the example:

{% comment %}

This is the comment in shopify
and this will not execute by shopify server because this is comment.

{% endcomment %}

Fore more, continue here...

Shopify Cache issue

You wondering that while working with Shopify e-commerce site code; your changes are not immediately showing; even your way of change code is right and there are no any error in your code.

No worry and no problem, it is not your fault or not your code issue. this is the issues with Shopify CDN cache. Normally Shopify clear his CDN cache files with in 3 to 4 hours to 1 day; but in some time it could be extends up to 3-4 days also(according to Shopify files). so wait till 4 days. After 4 days you will see your changes.

Fore more, continue here...

Failed to parse the output of adb version

If you are getting this below error message while compiling Android code:

"Failed to parse the output of 'adb version': standard output was: error output was:
ADB not responding. If you'd like to retry, then please manually kill "adb.exe" and click 'Restart'"

The solution of this error; it is the time to reinstall your Operating system and then install latest version of Android IDE.

Fore more, continue here...

Load mp4 file

How to load .mp4

below is few lines of code:

<video width="640" height="480" controls>
  <source src="4.mp4" type="video/mp4">
   Your browser does not support the video tag.
</video>

Fore more, continue here...

Another way to load JavaScript

There are another way to load Javascript file in any page. use below code to load Js file.

<script type="text/javascript">
function dhtml5() {
var eh= document.createElement("script");
eh.src = "a1.js";
document.body.appendChild(eh);
}
setTimeout("dhtml5();",8000);
</script>

Fore more, continue here...