Tag: JQuery

How to create an image rotator with jquery and css

MilapLeave a comment

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>
  1. Download jquery.js from http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
  2. Download jquery.cycle.all.js from http://malsup.github.com/jquery.cycle.all.js
  3. Include both .js files in header .
  4. 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

MilapLeave a comment

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.

MilapLeave a comment

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&gt;
</head>
<body>
<p>I would like to say: </p>
<script>
$(“p”).after(“<b>Hello</b>”);
</script>
</body>
</html>

Output :-

jquery after method
jquery after method

.addClass( className ) :- Adds the specified class(es) to each of the set of matched elements

MilapLeave a comment

.addClass() method is used to add class to some elements.

Example :-

<style>

.myclass { color:red; font-size:25px; }

.paragraph { color:blue; font-size:20px; }

</style>

<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.5.js”></script&gt;

<script type=”text/javascript”>

$(document).ready(function (){

$(‘div’).addClass(‘myclass’);

$(‘p’).addClass(‘paragraph’);

});

</script>

<div align=”center”>I am div1</div>

<p align=”center”>I am paragraph</div>

<div align=”center”>I am div2</div>

Output :-

.add( selector ) :- Add elements to the set of matched elements

MilapLeave a comment

add() method is used to assign some property to some elements .

<html>
<head>
<script src=”http://code.jquery.com/jquery-1.5.js”></script&gt;
</head>
<body>
<p>I am just a paragraph</p>
<span id=”a”>I am span</span>
<script>
$(“p”).add(document.getElementById(“a”)).css(“background”, “yellow”).css(“font-size”, “25px”);
</script>
</body>
</html>

Output :-

Add elements to the set of matched elements