Posts

Showing posts with the label Jquery

jQuery auto-focus on particular text field after page load

Below code will help us to focus on particular text field in page. It will be used for users to start typing their queries after page is loaded. We can use this in login, search pages etc., for quick access. jQuery(document).ready(function() { var txtField = jQuery("#autocomplete").get(0); var elemLen = txtField.value.length; txtField.selectionStart = elemLen; txtField.selectionEnd = elemLen; txtField.focus(); });

jQuery setTimeout() function

If we want to run a block of code after a specified time means we can use jQuery setTimeout() method. What it will do is, it will run specified code at specified millisecond. Syntax for this method is setTimeout(code,milliseconds) . jQuery(document).ready(function () { jQuery('.submit').click(function(){ var T = setTimeout(showAlert, 3000); }); });function showAlert(){ alert("Its fired after 3 seconds"); } Html code <button id="submit">Submit</button> In the above code, function showAlert() will be called after 3 seconds after clicking submit id.We can clear the time which is set by setTimeout() by using this method clearTimeout(id) . It accepts one parameter which is returned by the setTimeout() . ie., We can stop the setTimeout() timer by passing its id 'T' to the clearTimeout() method like this clearTimeout(T) . 'T' is the id, which is assigned to the setTimeout() method. Click here for live demo Note: D...

Clear form fields after finishing ajax submit using Jquery

Use reset() method to clear form fields after submitting the form via ajax.

Styling current page menu link using jQuery

We can easily style the current page url in menubar using jquery. All you have to do is just follow to snippets. [code lang="css"] #menu ul{ list-style-type:none; width:100%; background:#000000} #menu li{padding:5px;display:inline-block} #menu li a{ text-decoration:none; color:#FFFFFF; font-weight:bold} #menu li a:hover{ background:#CCCCCC; color:#000000} #menu li a:active{ background:#CCCCCC; color:#000000} .current-menu{ background:#CCCCCC; padding:6px 5px 5px} .current-menu a{ color:#000000;} [/code] Paste the css it in the header. [code lang="php"] <div id='menu'> <ul> <li><a href="http://localhost/menu/index.php">Home</a></li> <li><a href="http://localhost/menu/products.php">Products</a></li> <li><a href="http://localhost/menu/services.php">Services</a></li> <li><a href="ht...

Disable paste option in textbox

With the help of jQuery event.preventDefault() method we can disable paste in textbox. It can be used in the situation where user enters his confirmation email id in registration form. $('#confirm-email').bind("paste",function(e) { e.preventDefault(); alert('You cannot pase text into this textbox'); }); Some other events: cut,copy,contextmenu(disables right click) $('#confirm-email').bind("cut copy contextmenu paste",function(e) { e.preventDefault(); }); It will prevent all the four actions ie., We cannot perform those 4 actions(cut, copy, contextmenu and paste) in 'confirm-email' field. Reference : How can I disable Ctrl+V (Paste) option using jQuery in one of my input text fields

Using wordpress admin ajax

Using wordpress admin ajax is very simple. You need to follow this steps accordingly. Create a function to display your form in front end. You can use short code to include your form in post/page. Make sure you must have action filed in form, with the help of action value you can access wp_ajax hook. Declare the ajax hook respective to the action name. In this example, my action name is the_ajax_hook1, so i have created the hook wp_ajax_the_Action_hook1(wp_ajax_{$action}). Include your js file by wp_enque_script(). Localize your included script with the help of wp_localize_script(). That's all.. Here is our example... [code lang="php"] /* Plugin name:KTM Ajax call Description: creating ajax call from front end Author : Karthik */ //It helps to add your script. wp_enqueue_script('ktm_my_script' , plugin_dir_url(__FILE__) . 'script.js' , array('jquery') ); //It helps to access php variable i...

Resize parent colorbox iframe size

If we are loading some content within already existing iframe it will not resized automatically. It will show only it's initial width and height. We can modify that parent iframe property by calling parent.$.fn.colorbox.resize(). Within that we can give our innerWidth and innerHeight. parent.$.fn.colorbox.resize({innerWidth:600,innerHeight:400}); Add this code inside ur script.