Archive | Jquery RSS feed for this section

Animated Flying Twitter Bird Code

8 Oct

Animated Flying Twitter Bird Code :

<script src=”http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js&#8221; type=”text/javascript”></script>
<script type=”text/javascript”> var twitterAccount = “Your twitter account name”;tripleflapInit();</script>
<script src=”http://tweetmeme.com/i/scripts/button.js&#8221; type=”text/javascript”></script>

 

Note :

Replace “Your twitter account name” with your twitter user name.(ex:twitter.com/@abc)

Referred by :

http://123bestfriend.blogspot.in/2011/05/animated-flying-twitter-bird-flowers.html

Animated+Flying+Twitter+Bird+Gadget+For+Blogger-Royal-Tutor.png

Advertisements

jQuery Effects

25 Sep

jQuery Effects

1.jQuery Simple  Hide/Show

<script src=”jquery.js”></script>
<script>
$(document).ready(function(){
$(“#hide”).click(function(){
$(“p”).hide();
});
$(“#show”).click(function(){
$(“p”).show();
});
});
</script>

 

Full Example:

<!DOCTYPE html>
<html>
<head>
<script src=”jquery.js”></script>
<script>
$(document).ready(function(){
$(“#close”).click(function(){
$(“p”).hide();
});
$(“#open”).click(function(){
$(“p”).show();
});
});
</script>
</head>
<body>
<p>HI WELCOME</p>
<button id=”close”>Hide</button>
<button id=”open”>Show</button>
</body>
</html>

 

2.jQuery Fade :

1. fadeIn()

The jQuery fadeIn() method is used to fade in a hidden element.

<script src=”jquery.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).fadeIn();
$(“#div2”).fadeIn(“slow”);
$(“#div3”).fadeIn(3000);
});
});
</script>

2.fadeOut()

The jQuery fadeOut() method is used to fade out a visible element.

<script src=”jquery.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).fadeOut();
$(“#div2”).fadeOut(“slow”);
$(“#div3”).fadeOut(3000);
});
});
</script>

3.fadeToggle()

The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods.

<script src=”jquery.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).fadeToggle();
$(“#div2”).fadeToggle(“slow”);
$(“#div3”).fadeToggle(3000);
});
});
</script>

4.fadeTo()

The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1).

<script src=”jquery.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).fadeTo(“slow”,0.15);
$(“#div2”).fadeTo(“slow”,0.4);
$(“#div3”).fadeTo(“slow”,0.7);
});
});
</script>

Full Example:

<!DOCTYPE html>
<html>
<head>
<script src=”jquery.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).fadeIn();
$(“#div2”).fadeIn(“slow”);
$(“#div3″).fadeIn(3000);
});
});
</script>
</head>

<body>
<p>fadeIn eg.</p>
<button>Click Here</button>
<br><br>
<div id=”div1″ style=”width:80px;height:80px;display:none;background-color:red;”></div><br>
<div id=”div2″ style=”width:80px;height:80px;display:none;background-color:green;”></div><br>
<div id=”div3″ style=”width:80px;height:80px;display:none;background-color:blue;”></div>

</body>
</html>

Referred by :

http://www.w3schools.com/jquery/

 

 

About jQuery

25 Sep

jQuery questions

 

What is jQuery?

jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML.
jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.

Advantages of jQuery :

Ease of use
Large library
Ajax support
Great documentation and tutorials
Strong opensource community. (Several jQuery plugins available)
JavaScript enhancement without the overhead of learning new syntax
Ability to keep the code simple, clear, readable and reusable

jQuery Syntax

$(selector).action()

A $ sign to define/access jQuery
A (selector) to “query (or find)” HTML elements
A jQuery action() to be performed on the element(s)

Examples:

$(this).hide() – hides the current element.
$(“p”).hide() – hides all <p> elements.

Questions:

1.Is jQuery a library for client scripting or server scripting?
Ans: Client scripting

2.Is jQuery a W3C standard?
Ans: No

(Note:W3C standards define an Open Web Platform for application development that has the unprecedented potential to enable developers to build rich interactive experiences, powered by vast data stores, that are available on any device.)

3.What are jQuery Selectors?
Ans: Selectors are used in jQuery to find out DOM elements. Selectors can find the elements via ID, CSS, Element name and hierarchical position of the element.

4.The jQuery html() method works for both HTML and XML documents?
Ans: It only works for HTML.

5.What is the difference between HTML and XML?

XML was designed to describe data and to focus on what data is.
HTML was designed to display data and to focus on how data looks.

HTML is about displaying information.
XML is about describing information.

6.Difference between $(this) and ‘this’ in jQuery?
this and $(this) refers to the same element.
when ‘this’ is wrapped in $() ( ex:($(this).text()); ) then it becomes a jQuery object and you are able to use the power of jQuery.

7.Which sign does jQuery use as a shortcut for jQuery?
Ans: $(dollar) sign.

8.What does $(“div”) will select?
Ans: It will select all the div element in the page.

9.What does $(“div.parent”) will select?
Ans: All the div element with parent class.

10.What is the name of jQuery method used for an asynchronous HTTP request?
Ans: jQuery.ajax()

11.What is jQuery Selectors? Give some examples.

jQuery Selectors are used to select one or a group of HTML elements from your web page.
jQuery support all the CSS selectors as well as many additional custom selectors.
jQuery selectors always start with dollar sign and parentheses: $()
There are three building blocks to select the elements in a web document.

1) Select elements by tag name

Example: $(div)
It will select all the div elements in the document.

2) Select elements by ID

Example: $(#select”)
It will select single element that has an ID of select

3) Select elements by class
Example: $(“.helloclass”)
It will select all the elements having class helloclass

12.What is .siblings() method in jQuery?

We filter the elements fetched by an optional selector.

Eg:
<div><span>Hello</span></div>
<p>Hello Again</p>
<p>And Again</p>
<script>$(“p”).siblings(“.selected”).css(“background”, “yellow”);</script>

 

Referred by :

http://api.jquery.com/
http://jquerybyexample.blogspot.com/
http://careerride.com/jQuery-Interview-Questions.aspx#javascript

 

jquery slider inside fancybox

5 Sep

Jquery Auto-Playing Slide-show inside fancy-box

 

/* Fancy box code */

<script type=”text/javascript”>
$(document).ready(function() {
$(“a#fancybox”).fancybox({
‘overlayShow’    : true,
‘autoScale’: true,
‘transitionIn’    : ‘elastic’,
‘transitionOut’    : ‘elastic’
});

});

</script>

/*jquery code for image slide */

<script type=”text/javascript”>
$(“#slideshow > div:gt(0)”).hide();

setInterval(function() {
$(‘#slideshow > div:first’)
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo(‘#slideshow’);
},  3000);
</script>

————————-

/* HTML */

<div> <a id=”fancybox” style=”text-decoration: underline;font-size: 13px”  href=”#slideshow”>Click Here</a></div>


<div id="slideshow">
   <div>
     <img src="image1.jpg">
   </div>
   <div>
     <img src="image2.jpg">
   </div>
   <div>
     Pretty cool eh? This slide is proof the content can be anything.
   </div>
</div>

----------

/* css */


#slideshow {
    width: 600px;
    height: 400px;
   }
#slideshow img {
    margin-top: 20px;
    margin-left: 38px;
    border: 2px solid #ccc;
}

#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}
-----------------

/* script */
<script type='text/javascript' src='{% media  "/media/js/googleshare.js" %}'></script>
<script type="text/javascript" src='{% media  "/media/js/fancybox/jquery.fancybox-1.3.4.pack.js" %}'></script>

slider_inside_fancybox

<link rel="stylesheet" href='{% media  "/media/js/fancybox/jquery.fancybox-1.3.4.css" %}' type="text/css" media="screen" />

-------

Referred by :
http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/