Posts

Showing posts with the label jquery

How to read query string value with JavaScript?

To read query string value from the current url with javascript you need to add a function in your head or body section. function getQueryStringValue ( key ) { return decodeURIComponent ( window . location . search . replace ( new RegExp ( "^(?:.*[&\\?]" + encodeURIComponent ( key ). replace ( /[\.\+\*]/ g , "\\$&" ) + "(?:\\=([^&]*))?)?.*$" , "i" ), "$1" )); } Then you can alert or console the value of your query string. Like you have this url in your query string www.example.com/word/?key=value now you can get the value of key string like this. console . log ( getQueryStringValue ( "key" )); or you can alert this alert( getQueryStringValue ( "key" ) );

What is WebSockets in HTML5?

WebSockets in HTML5 Web Sockets is a next-generation communication technology for web applications by which you can send or receive data from server like ajax get post method. You have already used like this type of code in jQuery $.post() Or $.get() or $.ajax() etc What these function do? These function used for send and receive data from server to client or client to server. Same as WebSockets works. Syntax: var Socket = new WebSocket(url, [protocal] ); Example: <script type="text/javascript"> function WebSocketCheck() { if("WebSocket" in window) { alert("WebSocket is supported by your Browser!"); // Lets open a web socket var ws = new WebSocket("www.url.com/para"); ws.onopen = function() { // Web Socket is connected now, send data using send() Method ws.send("Message to send server"); alert("Message is sent now."); }; ws.onmessage = function (evt) { var received_msg = evt.data; alert(&

How to call a function on mouse scroll wheel via jquery?

How to call a function on mouse scroll wheel via jquery? Simple copy and paste this code and follow the steps. <script> function handle(delta) {         if (delta < 0)         {         functionscrolldown(); // You can change here the function event according to your need on mouse wheel down         }         else         {         functionscrollup(); // You can change here the function event according to your need on mouse wheel up         } }  /** Event handler for mouse wheel event.  */  /* here mouse wheel event stop from the browser */ $(document).on("click", '.fancybox-close', function(e) { // you also need to stop the Mouse wheel function event on a certain evernt of mouse click so you need to change the ".fancybox-close" class accoding to your click button window.removeEventListener('DOMMouseScroll', wheel, false); window.removeEventListener('mousewheel', wheel, false); });  /* here mouse wheel event will start for the

How to checked all checkbox by on click on one checkbox via jquery?

How to checked all checkbox by on click on one checkbox via jquery? download jquery file from http://jquery.com/ and save into your folder. Note: Do not give online path of on your file otherwise this code will not work,  download jquery file form server and save it in your folder Now simple copy and paste this code in your file <script src="yourSiteUrl/js/jquery.min.js"></script> // Change this yourSiteUrl from your site url <script> function markall() { var AllDay = $("#select_all").is(":checked") ? "true" : "false";     if(AllDay=='true')     {         $('.clsNoborder').attr('checked',true);     } else {         $('.clsNoborder').attr('checked',false);     } }; </script> <div> <input type="checkbox" id="select_all" name="select_all" onclick="markall();"/>: check all </div> <div>  <input typ

How to compare two dates via javascript?

How to compare two dates via java-script or how to check two dates that which one is greater and smaller? here is a code where you can check that which date is greater then other or same as vice verse. Simply copy and paste below code in your html file and run the file and change variable according to your need. Note: date format can be in two format one  2012-12-26 00:00:00  or 2012/12/26 00:00:00 Date compare <script> var s_date1 = "2012-12-26 00:00:00"; var en_date1 = "2012-12-26 00:00:00"; var s_date1_new=s_date1.replace(/-/g,"/"); // this line is for if date format is in hyphen like  2013-12-12 00:00:00 var en_date1_new=en_date1.replace(/-/g,"/"); // this line is for if date format is in hyphen like  2013-12-12 00:00:00 var date_ini = new Date(s_date1_new).getTime(); var date_end = new Date(en_date1_new).getTime(); if(isNaN(date_ini)) { alert("Start date format is wrong!"); return false; } if(isNaN(

How to add jQuery email validation in my site?

Image
I want to add jQuery email validation in my site which is good looking also simply copy and paste this code for add jQuery email validation for your site <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.7.1"); </script> <script type="text/javascript">     $(document).ready(function(){         try {         var domains =['hotmail.co.uk','yahoo.co.uk','yahoo.com.tw','yahoo.com.au','yahoo.com.mx','gmail.com','hotmail.com','yahoo.com','aol.com','comcast.net','msn.com','seznam.cz','sbcglobal.net','live.com','bellsouth.net','hotmail.fr','verizon.net','mail.ru','btinternet.com','cox.net','yahoo.com.br','bigpond.com','att.net',

How to add a text counter in textarea or Setting a maxlength on a textarea?

if you want to add text counter your textarea and set the Setting a maxlength on a textarea. so simply add this code in file and run the file in your browser <form name="textcount" id="textcount"> <textarea cols="60"  rows="12" class="input_compose_textarea" id="description" name="description" onkeypress="textCounter(this,this.form.counter,500);" onblur="textCounter(this,this.form.counter,500);"></textarea> <br/> Max length - <input    type="text" readonly="readonly"    name="counter"    maxlength="3"    size="3"    value="500"    onblur="textCounter(this.form.counter,this,500);"> char remaining. </form> <script type="application/javascript"> function textCounter( field, countfield, maxlimit ) { if ( field.value.length > maxlimit ) { field.value = field.va

How to add slide out div in our website?

How to add slide out div in our website? <style type="text/css" media="screen">     .slide-out-div {        padding: 20px;         width: 250px;         background: #f2f2f2;         border: #29216d 2px solid;     }     </style>     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>            <script> /*     tabSlideOUt v1.3         By William Paoli: http://wpaoli.building58.com     To use you must have an image ready to go as your tab     Make sure to pass in at minimum the path to the image and its dimensions:         example:             $('.slide-out-div').tabSlideOut({                 tabHandle: '.handle',                         //class of the element that will be your tab -doesnt have to be an anchor                 pathToTabImage: 'images/contact_tab.gif',     //relative path to the image for the tab *

How to use Number Validation for text box onkeyup by javascript?

How to use Number Validation for text box onkeyup by javascript? i got stuck in this problem so i make some customize code of Number Validation for text box onkeyup by javascript. it runs good and give quick alert. you can copy and paste this code in your file and simply run the file and you can customize the code according to your need. <script type="text/javascript"> function checknum(s) { return (s.toString().search(/^-?[0-9.]+$/) == 0 ) } </script>  <input name="phone" id="phone" type="text" class="last_bg" onkeyup="if(this.value != '' &amp;&amp; !checknum(this.value)){this.value = ''; alert('Please enter numbers only!')}"  value=""/> Dont forget to add jquery.js file in this page

How to use linkedin login api in my php website?

If you want linkedin login api for your php website and use registration with linkedin then you came on right post. here is some code for your linkedin login follow the instruction as in this post and then You can easily apply this linkedin login in your website add this code in your header Make a linkedin image the name of that image should be linkedin.jpg and place this in your images folder this image will show on linekedin button <script language="javascript" type="text/javascript" src="/js/confirmed_custom.js" ></script> <script type="text/javascript" src="http://platform.linkedin.com/in.js">   api_key: your website likedin api        // HGYbaYgas6Hfa&   onLoad: onLinkedInLoad   authorize: false </script> <script type="text/javascript"> function onLinkedInLoad() { $('a[id*=li_ui_li_gen_]') .css({marginBottom:'20px'}) .html('<img src="images/lin

How to add move div with page scroll in website?

Div move with Scroll Simple copy and paste this code <div id="floatdiv" style="position:absolute;right:0px;top:0px;"> Move content </div> <script type="text/javascript"><!-- var floatingMenuId = 'floatdiv'; var floatingMenu = { targetX: -40, targetY: 400, hasInner: typeof(window.innerWidth) == 'number', hasElement: document.documentElement && document.documentElement.clientWidth, menu: document.getElementById ? document.getElementById(floatingMenuId) : document.all ? document.all[floatingMenuId] : document.layers[floatingMenuId] }; floatingMenu.move = function () { if (document.layers) { floatingMenu.menu.left = floatingMenu.nextX; floatingMenu.menu.top = floatingMenu.nextY; } else { floatingMenu.menu.style.left = floatingMenu.nextX + 'px'; floatingMenu.menu.style.top = floatingMenu.nextY + 'px'; } } floatingMenu.computeShifts = function () { var de = docum

Jquery customizable validation?

Jquery customizable validation Add latest jquery file in the top of the page <script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() {   $('#submit').click(function() {   alert('sagar');   $(".error").hide();   var hasError = false;   var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;   var emailblockReg = /^([\w-\.]+@(?!gmail.com)(?!yahoo.com)(?!hotmail.com) (?!aol.com)([\w-]+\.)+[\w-]{2,4})?$/;   var fname = $("#fname").val();   var lname = $("#lname").val();   var Email = $("#email").val();   var password = $("#password").val();   var cpassword = $("#cpassword").val();   var address = $("#address").val();   var zipcode = $("#zipcode").val();   var state = $("#state").val();   var phone = $("#phone").val()

How to add jquery vertical left panel slider?

Image
Many people says that they want a good left panel and they want that when they select any menu then submenu should be open in slow motion vertically. So here is the code of left panel slider with jquery and css with some screen shot. You can also edit them according to you need. On the first view left panel will look like this If you move your cursor on it than look like this If you click any option then it opens the submenu like this Here is the code simply copy and paste this code in your page and run // Code start from here <style> body {     font-family: Helvetica,Arial,sans-serif;     font-size: 0.9em; } p {     line-height: 1.5em; } ul#menu, ul#menu ul {     list-style-type: none;     margin: 0;     padding: 0;     width: 18em; } ul#menu a {     display: block;     text-decoration: none; } ul#menu li {     margin-top: 1px; } ul#menu li a {     background: none repeat scroll 0 0 #F5ECF5;     border: 1px solid #D7C2D7;

How to overlap or overlay youtube video with html or How do I fix a YouTube flash video in iframe overlay problem on a ajax popup

How do I fix a YouTube flash video in iframe overlay problem on a ajax popup If you want to overlap or overlay youtube video with you html content or pop up And you having the problem that your pop up or html comes under the youtube video in your website and u had already tried too much code and all the unless so try this definitely this work Please follow the instruction it will definitely works four you... simple copy and paste this code in your header or top of iframe <script type="text/javascript"> $(document).ready(function() { $("iframe").each(function(){ var ifr_source = $(this).attr('src'); var wmode = "wmode=opaque"; if(ifr_source.indexOf('?') != -1) { var getQString = ifr_source.split('?'); var oldString = getQString[1]; var newString = getQString[0]; $(this).attr('src',newString+'?'+wmode+'&'+oldString); } else $(this).attr('src',ifr_source+'?'+wmode