Every day we encounter lot of errors while compiling or running applications. The most common is NullPointerException. So when you see this sort of error, what is your approach? Yes "APPROACH"! This is the word I like to share with you people.
Showing posts with label jQuery: By Examples. Show all posts
Showing posts with label jQuery: By Examples. Show all posts
In this example, I am populating a Drop Down list asynchronously through the .load() method. Advantage of loading data through .load() method is that it allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded. Therefore instead of loading the complete document, here I can load specific portion of the document. In this example first I am getting the list of all the Tags available under the Index section of the page. This is achieved through the special URL syntax used in the .load() method. The next setp is to load the data in a temporary div. Here is the sample data available in the div element:
Once the data is loaded in the div, I am populating the drop down by creating option element dynamically. Every option has following attributes:
text - text from the a tag
value - href from the a tag
Once all the li elements are process, the temp div is removed.
Now when a user, clicks the button to get the posts for the selected Tag, data is loaded again asynchronously through the .load() method. Instead of loading the complete post, I am loading specific part of the post.
About the example:
When a user hovers over a link, sneak preview of the link pops up. And when user hovers over a thumbnail, original size image pops up.
Link preview has been implemented through Ajax.load() function, where data for the link is loaded from one of the older posts. To know more about Ajax.load() function checkout jQuery: By examples - Load data through Ajax
This is another example in the series of jQuery: By Examples. In this example I will load data from one of the posts. Instead of loading complete post (including title) I will load data from a specific portion of the page. Following functions/methods are used in this example:
.load() method is the simplest way to get data from the server. Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol. Using the special syntax for url, you can get data from specif portion of the remote document. If the url has one or more spaces, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded. For example:
In this case I am fetching data from the DIV element whose CLASS attribute is equals to post-body entry-content, in the remote document - http://myerrorslog.blogspot.com/2006/12/introduction.html.
Is it possible for an anonymous function to refer itself in javascript?
When I read the question for the first time even I was totally blank. The very next thought came to my mind was "Is it really possible?".
Well the answer is YES. It is possible for an anonymous function to refer itself through the use of arguments.callee.
arguments is a local variable for a function object. callee is one of the properties of arguments. arguments.callee allows anonymous function to refer to itself, which is necessary for recursion. Here is an example:
Example: In this example, I will use arguments.callee within an anonymous function which is used as a callback for show() and hide() methods.
Select an element based on the id value. For id selectors, jQuery uses the JavaScript function document.getElementById(), which is extremely efficient. When another selector is attached to the id selector, such as h2#pageTitle, jQuery performs an additional check before identifying the element as a match.
Selects the first matched element. The :first pseudo-class is equivalent to :eq(0). It could also be written as :lt(1). While this matches only a single element, :first-child can match more than one: One for each parent.
Selects the last matched element. Note that :last selects a single element by filtering the current jQuery collection and matching the last element within it.
Bind an event handler to the "click" JavaScript event, or trigger that event on an element. The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event.
Display the matched elements. When a duration is provided, .show() becomes an animation method. The .show() method animates the width, height, and opacity of the matched elements simultaneously. If supplied, the callback is fired once the animation is complete.
Hide the matched elements. When a duration is provided, .hide() becomes an animation method. The .hide() method animates the width, height, and opacity of the matched elements simultaneously. When these properties reach 0, the display style property is set to none to ensure that the element no longer affects the layout of the page. If supplied, the callback is fired once the animation is complete.
I have been playing around with jQuery from last few days. And I AM LOVING IT. Well still I am in the learning phase, but I thought lets share what I have learnt so far. And the best way to share the knowledge is though EXAMPLES. So here is the first set of examples:
Example: In this example I will flip a box.
Demo: Click on the box to flip it
eM pliF
Filp Me
APIs used in the example (this section is also implemented through jQuery)
Select an element based on the id value. For id selectors, jQuery uses the JavaScript function document.getElementById(), which is extremely efficient. When another selector is attached to the id selector, such as h2#pageTitle, jQuery performs an additional check before identifying the element as a match.
Selects the first matched element. The :first pseudo-class is equivalent to :eq(0). It could also be written as :lt(1). While this matches only a single element, :first-child can match more than one: One for each parent.
Selects the last matched element. Note that :last selects a single element by filtering the current jQuery collection and matching the last element within it.
Bind an event handler to the "click" JavaScript event, or trigger that event on an element. The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event.
Remove the set of matched elements from the DOM. We use .remove() when we want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed.
Insert every element in the set of matched elements to the end of the target. With .appendTo(), the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container.
<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE> jQuery - By Examples </TITLE> // import jquery-latest.min.js from code.jquery.com
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
.box{
height: 65px;
width: 300px;
padding-top:20px;
font-size:36px;
color:green;
text-align: center;
position: absolute;
}
</style>
<script type="text/javascript">
$(function(){
/*
Example of Flip
*/
$("#container").click(function(){ // get the top div element from the container div
var first = $("#container div:first");
//get the last div element from the container div
var last = $("#container div:last");
//remove all the div elements from the container div
$("#container div").remove();
// now add the div elements into the reverse order to the container div
$(last).appendTo("#container");
$(first).appendTo("#container");
});
});
</script>
</HEAD>
<BODY>
<div id="container">
<div class="box" style="background: yellow"><span>eM pliF</span></div>
<div class="box" style="background: red"><span>Filp Me</span></div>
</div>
</BODY>
</HTML>
Better Tools Happy Engineers
-
*"The only thing constant in a Startup is Change"*
If you aren't changing fast enough then order and complacency sets in which
leads to mediocrity and you...
Posts
