Whenever you need to remove “space” as well as “special characters” between characters while typing, you can do it easily using native JavaScript & jQuery as described below :
Checkout this code in action,
Category: jquery
jQuery ajaxError function
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button#call").click(function () {
$("div#response").load("page.html");
});
$("div#log").ajaxError(function () {
$(this).text("Triggered ajaxError handler.");
});
});
</script>
<button id="call">Call</button>
<div id="response"></div>
<div id="log"></div>
How to create an image rotator with jquery and css
Whenever you need to display random images (more than 1 image) ,
you can do it using simple jquery cycle plugin.
Here is the small explanation :-
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#<em><strong>imagediv</strong></em>').cycle({
fx: 'fade',
speed: 2500
});
});
</script>
<div id="<em><strong>imagediv</strong></em>"> <img src="image1.jpg" alt="image1" /> <img src="image2.jpg" alt="image2" /> <img src="image3.jpg alt="image3" /> <img src="image4.jpg alt="image4" /> <img src="image5.jpg alt="image5" /> </div>
- Download jquery.js from http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
- Download jquery.cycle.all.js from http://malsup.github.com/jquery.cycle.all.js
- Include both .js files in header .
- add following CSS
.pics { height: 117px; margin: 0; overflow: hidden; padding: 0; width: 354px; }
There are many options to set time for fading effect & all..
You can refer http://jquery.malsup.com/cycle for more option & customization jQuery cycle plugin.
Thats it ..
Done.. Enjoy !!!
Disabling Right Click (context menu) with jQuery
Whenever you need to disable “Right Click” in browse you can do it easily using little jQuery.
<script type="text/javascript">
$(document).ready(function()
{
$(document).bind("contextmenu",function(e){
return false;
});
});
</script>
.after( content ) :- Insert content, specified by the parameter, after each element in the set of matched elements.
When we need to insert some html content after specified element,we can achieve it using after() method.
Example :-
<html>
<head>
<style>
p { background:yellow; }
</style>
<script src=”http://code.jquery.com/jquery-1.5.js”></script>
</head>
<body>
<p>I would like to say: </p>
<script>
$(“p”).after(“<b>Hello</b>”);
</script>
</body>
</html>
Output :-
Full Stack Web Developer 