Home » Posts filed under jQuery

Showing posts with label jQuery. Show all posts

Friday, 5 August 2016

Simple jquery ajax example with GET method

jQuery(document).ready(function()

function dataProcess()

{

jQuery.ajax({

type:"GET", // You can use post method here also

url:"http://www.your-site.com?para=val", // Give your own url

success:function(data){

jQuery('#result').html(data);

window.location.href = "http://www.your-site.com/checkout/onepage/"; // if you want redirect another page after success data

}

});

}

});

</script>

Tuesday, 19 January 2016

Image slide start on mouse hover jquery

Image slide start on mouse hover jquery

<script type="text/javascript" src="js/cycle.js"></script> // Download cycle.js from here http://jquery.malsup.com/cycle/
<script type="text/javascript">
jQuery(function($){

// Cycle plugin
$('.slides').cycle({
fx: 'none',
speed: 1000,
pager: '#nav',
timeout: 70
}).cycle("pause");

// Pause & play on hover
$('.slideshow-block').hover(function(){
$(this).find('.slides').addClass('active').cycle('resume');

}, function(){
$(this).find('.slides').removeClass('active').cycle('pause').cycle(0);
});

});
</script>

<div class="product-img slideshow-block">
<div class="slides">
<img src="http://yoursite.com/slide1.jpg" />
<img src="http://yoursite.com/slide2.jpg" />
<img src="http://yoursite.com/slide3.jpg" />
</div>
</div>

Sunday, 11 October 2015

How to change href attribute of a link using Jquery

How to change href attribute of a link using Jquery

<a id="bigImg" href="https://www.blogger.com/" class="w_img" >Chandresh rana</a>

<script type="text/javascript">
jQuery("#button").click(function(){
jQuery("#bigImg").attr('href', 'http://chandreshrana.blogspot.com');
});
</script>

Thursday, 8 October 2015

How should i change image src using jquery

How should i change image src using jquery

<img src="http://chandreshrana.blogspot.com/chand.png" title="chandresh" alt="chandresh" id="bigImg" />

<script type="text/javascript">
jQuery("#button").click(function(){
var NewImageUrl = "http://chandreshrana.blogspot.com/chandresh.png"
jQuery("#bigImg").attr('src', 'NewImageUrl');
});
</script>

Wednesday, 7 October 2015

How to check if the checkbox is checked or uncheck jQuery

How to check if the checkbox is checked or uncheck jQuery

Try to use below script

<script type="text/javascript">

if(jQuery('input[id=input_id]').is(':checked')){
// Your Statment
}else{
// Your Statment
}

OR

if(jQuery('input[name=input_name]').is(':checked')){
// Your Statment
}else{
// Your Statment
}

</script>

Monday, 21 September 2015

How to get checkbox label text jquery

How to get checkbox label text jquery

Check the below example and you get the script how to get label of checkbox in jQuery

<html>
<body>
<ul>
<li>
<input type="checkbox" name="mouse" value="1" id="mouse" /><label for="mouse">Mouse</label>
</li>
<li>
<input type="checkbox" name="keyboard" value="1" id="keyboard" /><label for="mouse">Keyboard</label>
</li>
<li>
<input type="checkbox" name="monitor" value="1" id="monitor" /><label for="mouse">Monitor</label>
</li>
</ul>
</body>
</html>

<script type="text/javascript">
var label = jQuery('label[for=' + jQuery(this).attr('id') + ']').html();
alert(label);
</script>

Tuesday, 11 August 2015

Refresh a page using jQuery

Refresh a page using jQuery

To refresh or reload a page using jQuery, you can use below code

$('#yourId').click(function() {
location.reload();
});

Saturday, 4 July 2015

Scroll to particular div using jquery

Scroll to particular div using jquery

jQuery("#goto-reviews-form").click(function(){
jQuery('html, body').animate({
'scrollTop' : jQuery("#tabreviews").position().top
});
});

Friday, 21 November 2014

How to check class exist in jquery

How to check class exist in jquery

if (jQuery("#filterform" ).hasClass( "yourclass" )) {

// your statement

}else{

// your statement

}

Monday, 3 November 2014

How to get browser name using jQuery

How to get browser name using jQuery

Here, I am explaining how to know about the browser name using jquery. We can find out lots of information about browser like its name, version using jquery. To access $.browser property in jquery 1.9+ versions, we can use jquery migrate plugin.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

$(document).ready(function(){

var browser;

if($.browser.mozilla)

browser = "Firefox";

else if($.browser.msie)

browser = "Internet Explorer";

else if($.browser.opera)

browser = "Opera";

else if($.browser.safari)

browser = "Safari";

else

browser = "Unknown";

$('#browserName').append(browser);

});

</script>

<title>Get Browser Name</title>

</head>

<body>

<div id="browserName"> Your Browser Name : </div>

</body>

</html>

Friday, 17 October 2014

jQuery textbox to allow only numbers/digits

jQuery textbox to allow only numbers/digits

Here I will show how to use jQuery to allow only numbers in textbox or allow only numeric characters in textbox using JQuery. Using jQuery we can control user input with different key event handlers. So in this post I am going to share the jQuery code to allow only numbers in textbox.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<input type="text" name="mobile" id="mob_number" />

<script type="text/javascript">

$(document).ready(function () {
//called when key is down
$("#mob_number").bind("keydown", function (event) {
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || (event.keyCode == 65 && event.ctrlKey === true) || (event.keyCode >= 35 && event.keyCode <= 39)){

return;

} else {
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
return false;
}
}
});
});

</script>
</body>
</html>

Monday, 13 October 2014

How to make tab menu in jQuery + HTML

How to make tab menu in jQuery + HTML

Here i will show you simple and light weight tab menu in HTML + jQuery for small purpose. I have taken just three tabs. Each tab has individual id and active tab has a class.

In this below example there is no any jQuery animation effect. It is simple and light weight.

<ul>
<li class="TabbedPanelsTab TabbedPanelsTabSelected" id="tab_1" onclick="tabber('content_1');">Tab1</li>
<li class="TabbedPanelsTab" id="tab_2" onclick="tabber('content_2');">Tab2</li>
<li class="TabbedPanelsTab" id="tab_3" onclick="tabber('content_3');">Tab3</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div id="content_1">
Here is your content 1..
</div>
<div id="content_2" style="display:none;">
Here is your content 2..
</div>
<div id="content_3" style="display:none;">
Here is your content 3..
</div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function tabber(id)
{
for(var i=1; i<=3; i++){

if('content_'+i == id){
jQuery('#'+id).show();
jQuery('#tab_'+i).addClass('TabbedPanelsTabSelected');
}
else{
jQuery('#content_'+i).hide();
jQuery('#tab_'+i).removeClass('TabbedPanelsTabSelected');
}
}
}
</script>

Wednesday, 30 July 2014

Closing Colorbox on button click

Closing Colorbox on button click jQuery

You can use :

jQuery('#cboxClose').click();

OR

jQuery(window).colorbox.close();

Friday, 25 April 2014

Scroll To Top functionality in Magento

Scroll To Top functionality in Magento

Open your header.phtml file and write below code..

<a title="Scroll To Top" class="scrollup" href="javascript:void(0);" style="display: none;">Scroll</a>
<script type="text/javascript">
jQuery(document).scroll(function(){
if (jQuery(this).scrollTop() > 100) {
jQuery('.scrollup').fadeIn();
} else {
jQuery('.scrollup').fadeOut();
}
});
jQuery('.scrollup').click(function(){
jQuery("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
</script>

Note : Please include jQuery library in head section.

That's it... Enjoy Chandresh rana's Coding.... :)

Wednesday, 23 April 2014

Email Validation in Jquery

Email Validation in Jquery

Put this function checkEmail(email)

function checkEmail(email)
{
    //regular expression for email
    var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);

if(pattern.test(email)){
        return true;
    } else {
        return false;
    }
}

For Example : checkEmail(email_id)

Wednesday, 18 December 2013

Mouseover and mouseout functionality in jQuery

Mouseover and mouseout functionality in jQuery

var hideDelay = 500;
var hideDelayTimer = null;

jQuery(".setWarn").mouseover(function(){
if (hideDelayTimer) clearTimeout(hideDelayTimer);
jQuery("#warning-dialog").slideDown(120);

}).mouseout(function(){
if (hideDelayTimer) clearTimeout(hideDelayTimer);
hideDelayTimer = setTimeout(function (){
jQuery("#warning-dialog").slideUp(120);
},hideDelay);
});

jQuery("#warning-dialog").mouseover(function(){
if (hideDelayTimer) clearTimeout(hideDelayTimer);
jQuery("#warning-dialog").slideDown(120);
}).mouseout(function(){
if (hideDelayTimer) clearTimeout(hideDelayTimer);
hideDelayTimer = setTimeout(function (){
jQuery("#warning-dialog").slideUp(120);
},hideDelay);
});

});

PHP Coder

Pages

Banner