<script>
jQuery("#example").on( "touchstart",function() {
jQuery("div").css("display","none");
});
jQuery("#example").on( "touchend",function() {
jQuery("div").css("display","none");
});
jQuery("#example").on( "touchcancel",function() {
jQuery("div").css("display","none");
});
jQuery("#example").on( "touchmove",function() {
jQuery("div").css("display","none");
});
jQuery("#example").on("tap",function(){
jQuery("div").css("display","none");
});
jQuery("#example").on( "vclick",function() {
jQuery("div").css("display","none");
});
</script>How to make only some text in a text-field read-only using Jquery
How to make only some text in a text-field read-only while allowing to be edited
var com_name_val_len = jQuery('#company_name').val().length;
jQuery('#company_name').on('keypress, keydown', function(event) {
if ((event.which != 37 && (event.which != 39))
&& ((this.selectionStart < com_name_val_len)
|| ((this.selectionStart == com_name_val_len) && (event.which == 8)))) {
return false;
}
});
Load all href images into a dialog Popup from Particular content
Step :Load the anchor tag href images into a dialog Popup
Need to include jquery.js, jquery-ui.js and jquery-ui.css
I have included like below.
<script src=”//code.jquery.com/jquery-1.10.2.js”></script>
<script src=”//code.jquery.com/ui/1.11.4/jquery-ui.js”></script>
<link href=”https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css” rel=”stylesheet” type=”text/css” />
<script type="text/javascript">
jQuery('.entry-content a').each(function() {
var $link = $(this);
var $dialog = jQuery('<img src="' + $link.attr('href') + '" />')
.dialog({
autoOpen: false,
resizeable: false,
modal: true,
width: 1000,
closeOnEscape: true,
dialogClass: 'zoom',
position: { my: 'top', at: 'top+2400' },
zIndex: 9999
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
</script>Change Background Image Url Using Jquey
<script type="text/javascript">
$('li.swatch').each( function() {
var thumbnail_url = $(this).find('.thumbnail').css("background-image");
var src = thumbnail_url.split('thumbnail');
var split_url = src[0].split('"');
var split_url_link = split_url[1];
var split_img = src[1].split('"');
var split_img_link = split_img[0];
var preview ="preview";
var img_url = split_url_link+preview+split_img_link;
$(this).find('.thumbnail').css("background-image", 'url('+ img_url+ ')')
});
</script>How to Stop the Slider in Window Resizing
Stop the Slider in Window Re sizing :
<script>
jQuery(document).ready(function () {
//window ready function
var window_width = jQuery(window).width();
if ( window_width < 400 || window_width == 400 ) {
jQuery('.cycle-slideshow').cycle('pause');
}
});
jQuery(window).resize(function () {
//window resize function
var window_width = jQuery(window).width();
if ( window_width < 400 || window_width == 400 ) {
jQuery('.cycle-slideshow').cycle('pause');
}
});
</script>Jquery load dialog after few seconds
- Dialog popup loading while page loading. To load the dialog popup after few seconds, we could use the below method.
- Dialog popup will display while page loading, we disable it through style while page loading and we could display it after few seconds through jquery.Disable all popup view through style as like below. Class will change based on your implementation.
<style> .newsletter_main { display: none; } .ui-dialog-titlebar-close { display: none; } .ui-widget-overlay { display: none; }
Also use below script to display the popup while page loading and enable the display view after few seconds from jQuery.
<script> /* Load the dialog popup while page loading */ jQuery( document ).ready(function() { jQuery( "#newsletter" ).dialog({ closeOnEscape: false, show: 'fade', modal: true }); }); /* Display the popup content after few seconds */ setTimeout(function(){ jQuery( ".newsletter_main" ).css({"display":"block"}); jQuery( ".ui-dialog-titlebar-close" ).css({"display":"block"}); jQuery( ".ui-widget-overlay" ).css({"display":"block"}); }, 3000); </script> /* Popup content Div */ <div id="newsletter"> Content Here </div>
jquery trim last ‘N’ characters
Below the example to trim last two characters.
<script>
var content_string = 'RAMP IT';
var content_string_name = content_string.slice(0, -2); //=> slice(0, -N) - update N based on your need.
alert(content_string_name);
</script>jquery get CSS style property value
Use the below code to get the particular CSS style property value. Within the below example, its get and displaying the “background-color” value as “blue”.
<div style="background-color:blue;"></div>
<script>
$( "div" ).click(function() {
var color = $( this ).css( "background-color" );
alert(color); // Use this value
});
</script>Jquery Test
jQuery(document).ready(function(){
jQuery("p").click(function(){
jQuery(this).hide();
});
});Jquery Function
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});