-
-
1-How to call another page through select option
<script language=”javascript” type=”text/javascript”>
$(document).ready(function(){
$(“#slot_id”).bind(“change”,function(){
var type=$(“#slot_id”).attr(‘value’);
//window.location.href=”<? //echo $this->baseUrl().’/admin/admin/resume/applied/’?>”+type;
window.location.href=”<?=$this->baseUrl().’admin/dashboard/showallrewardslot/viewSlot/’?>”+type;
});
});
</script>
<select id=”slot_id”>
<option>1</option>
<option>1</option>
</select>
2-call alert when page open
$(document).ready(function(){
alert(‘new page is open’);
});
3)Using other javascript library with jquery
Quuite a few other library use $ function as of jquery as for example prototype.In such cases we use “jQuery.noConflict();”
instead of $ sign. So we can now use any javascript library with jquery
jQuery.noConflict();
//now instead of $, use jQuery
jquery(“elem”).hide();
4)Using Multiple selector at a time in jquery
Instead of using these below
$(elem).siblings(“h2″).hide();
$(elem).siblings(“p”).hide();
We can Use
$(elem).siblings(“h2,p”).hide();
5)Ability to Chain methods in jquery?
$(elem).siblings(“h2,p”).hide();
As we can see the siblings of h2 and p elements are selected and then hide is called
6)Load page or alert on img click in jquery
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#bannerButton li’).bind(‘mouseover’, function(){
$banner=$(“#uni-banner-holder-”+$(this).attr(“value”));
$(“.banner-holder”).not($banner).css(“display”,”none”);
$banner.css(‘display’,'block’);
});
runSlider();
});
</script>
or for Alert
<script language=”javascript” type=”text/javascript”>
$(“#avatar_table td img”).click(function(){
var lnk=$(this).attr(“src”);
var imgName=lnk.substring(lnk.lastIndexOf(‘/’)+1);
var baselnk=document.URL;
var dataString = ‘imagename=’+imgName;
var winPath = ‘<?=$baseUrl?>’+'/update/’;
$.get(‘<?=$this->url(array(‘controller’=>’update’,'action’=>’avatar’))?>’,{imagename : imgName},function(data){
window.open(winPath,’_self’);
$(‘#dialogNews’).dialog(‘close’);
});
});
$(document).ready(function(){
$(‘#iphone-mid-mid-2 ‘).click(function(){
$(‘#iphone-mid-mid-3′).load(“1.html”);
)};
</script>
7)How to make our own bullets in html code through jquery
Sometimes you want to break away from the usual circle and square bullets and say, use an EM dash or even an image. The steps to this:
$(“ul”).addClass(“Replaced”);
$(“ul > li”).prepend(“‒ “);
How to Get the total number of matched elements in jquery
It’s a very simple but useful query
$(‘element’).size();
where element is the elemento be searched here
9)How to achieve font resizing in magento in jquery
By below query we can achieve font resizing
$(document).ready(function(){
// Reset Font Size
var originalFontSize = $(‘html’).css(‘font-size’);
$(“.resetFont”).click(function(){
$(‘html’).css(‘font-size’, originalFontSize);
});
// Increase Font Size
$(“.increaseFont”).click(function(){
var currentFontSize = $(‘html’).css(‘font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(‘html’).css(‘font-size’, newFontSize);
return false;
});
// Decrease Font Size
$(“.decreaseFont”).click(function(){
var currentFontSize = $(‘html’).css(‘font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(‘html’).css(‘font-size’, newFontSize);
return false;
});
});
10)How to add dynamically created elements into the DOM by jquery
By following snippet we can add dynamically <div> element which can come into handy in various situation
var newDiv = $(‘<div></div>’);
newDiv.attr(“id”,”myNewDiv”).appendTo(“body”);
11)How to use jquery animate function over a html element
The script below shows how jquery uses animation function over $(div)
On clicking you will see a div animating 4- diffrent sizes
<script src=”jquery.js” type=”text/javascript”></script> <script type=”text/javascript”>// <![CDATA[
$(document).ready(function(){
$("button").click(function(){
$("div").animate({height:300},"slow");
$("div").animate({width:300},"slow");
$("div").animate({height:100},"slow");
$("div").animate({width:100},"slow");
});
});
// ]]></script>
<button>Start Animation</button>
<div style=”background: none repeat scroll 0% 0% #98bf21; height: 100px; width: 100px; position: relative;”></div>
12)How to use a jquery callback function
A callback function is executed after the current animation is 100% finished.
jQuery Callback Functions
A callback function is executed after the current animation (effect) is finished.
JavaScript statements are executed line by line. However, with animations, the next line of code can be run even though the animation is not finished. This can create errors.
To prevent this, you can create a callback function. The callback function will not be called until after the animation is finished.
<html>
<head>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).hide(1000,function(){
alert(“The paragraph is now hidden”);
});
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
13)How to check numeric field through jquery
OR
How to validate numeric field
var baseUrl=’<?=$this->baseUrl();?>’;
$(document).ready(function(){
$(“#sub”).click(function(){
var searid= $(“#serchID”).val();
if(isNaN(searid) || searid==” || searid==’NaN’){
alert(“Please Inter Numeric Member Id.”);
}else{
window.open(baseUrl+’admin/change-scheme/index?serchID=’+parseInt(searid),’_self’);
}
});
$(“#back”).click(function(){
window.open(baseUrl+’admin/change-scheme’,'_self’);
});
});