GT's Blog

Catalina Kiss - Acoustic Alchemy - Instrumental JAZZ

Here's another ...

Enjoy !

Spring MVC download content of String as text file

To download a text file out of a String :

JSP View :

 <a href="download">Download String </a>

Controller Method :


 @RequestMapping(value = "/download", method = RequestMethod.GET)
 public @ResponseBody
 void downloadFile(HttpServletResponse resp) {
  String downloadFileName= "download.txt";
  String downloadStringContent= getStringToWrite(); // implement this
  try {
   OutputStream out = resp.getOutputStream();
   resp.setContentType("text/plain; charset=utf-8");
   resp.addHeader("Content-Disposition","attachment; filename=\"" + downloadFileName + "\"");
   out.write(downloadStringContent.getBytes(Charset.forName("UTF-8")));
   out.flush();
   out.close();

  } catch (IOException e) {
  }
 }

Check this as well : spring mvc download a file from server

Spring MVC file download from server example code

To download a file - from request parameter

JSP View :

 <a href="downloadFile?fileName=log.txt">Download String </a>

Controller Method :


@RequestMapping(value = "/downLoadFile", method = RequestMethod.GET)
public void downLoadFile( HttpServletRequest request, HttpServletResponse response ) {
try {
 String fileName = request.getParameter( "fileName" );
 File file = getFileToDownload(fileName) // implement this to return a valid file object
 InputStream in = new BufferedInputStream( new FileInputStream( file ) );

 response.setContentType( "text/plain" ); // define your type
 response.setHeader( "Content-Disposition", "attachment; filename=" + fileName  );

 ServletOutputStream out = response.getOutputStream( );
 IOUtils.copy( in, out ); //import org.apache.commons.io.IOUtils;
 response.flushBuffer( );
} catch ( Exception e ) {
 e.printStackTrace( );
}
}

Java - Convert HTML to PDF File - Using iText

Here's how you can convert HTML to PDF using iText and Flying Saucer PDF libraries in Java. The steps are described within the code below.

You can easily add some methods below to read HTML content from a file and convert the HTML file to PDF ( instead of HTML string to PDF).

package g.t.test;

import org.xhtmlrenderer.pdf.ITextRenderer;

import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileOutputStream;
public class HtmlToPDFConverter {

    public static void convert(String htmlContent, File pdfFile) throws Exception {
        ByteArrayOutputStream os = new ByteArrayOutputStream();

        //step1: render html to memory

        ITextRenderer renderer = new ITextRenderer();
        renderer.setDocumentFromString(htmlContent);
        renderer.layout();
        renderer.createPDF(os);

        //step2: conver to byte array stream

        byte[] pdfAsBytes = os.toByteArray();
        os.close();

        //step3: write byte array stream to file

        FileOutputStream fos = new FileOutputStream(pdfFile);
        fos.write(pdfAsBytes);
        fos.flush();
        fos.close();
    }

    // let's test !!

    public static void main(String[] args) throws Exception{
        convert("<html> <body> " +
            "<h1>Hello Crazy World !!</h1> <br/> " +
            "<h2> I hope you are doing great.</h2> " +
            "</body> </html>", new File("test.pdf"));
    }
}

Used Maven Dependencies:

<dependency>
    <groupId>com.lowagie</groupId>
    <artifactId>itext</artifactId>
    <version>2.1.7</version>
</dependency>
<dependency>
    <groupId>org.xhtmlrenderer</groupId>
    <artifactId>flying-saucer-pdf</artifactId>
    <version>9.0.9</version>
</dependency>

jQuery effects - jQuery basic tutorial 10

10. jQuery Effects

jQuery provides a trivially simple interface for doing various kind of amazing effects. jQuery methods allow us to quickly apply commonly used effects with a minimum configuration.
This tutorial covers all the important jQuery methods to create visual effects.

Showing and Hiding elements:

The commands for showing and hiding elements are pretty much what we would expect: show() to show the elements in a wrapped set and hide() to hide them.

Syntax:

Here is the simple syntax for show() method:

[selector].show( speed, [callback] );

Here is the description of all the parameters:

speed: A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callback: This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.

Following is the simple syntax for hide() method:

[selector].hide( speed, [callback] );

Here is the description of all the parameters:

speed: A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callback: This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.

Example:

Consider the following HTML file with a small JQuery coding:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

     $("#show").click(function () {
        $(".mydiv").show( 1000 );
     });

     $("#hide").click(function () {
        $(".mydiv").hide( 1000 );
     });

   });

   </script>
   <style>
   .mydiv{ margin:10px;padding:12px;
      border:2px solid #666;
      width:100px;
      height:100px;
    }
  </style>
</head>
<body>
   <div class="mydiv">
      This is  SQUAR
   </div>

   <input id="hide" type="button" value="Hide" />   
   <input id="show" type="button" value="Show" />   

</body>
</html>

Toggling the elements:

jQuery provides methods to toggle the display state of elements between revealed or hidden. If the element is initially displayed, it will be hidden; if hidden, it will be shown.

Syntax:

Here is the simple syntax for one of the toggle() methods:

[selector]..toggle([speed][, callback]);

Here is the description of all the parameters:

speed: A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callback: This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.

Example:

We can animate any element, such as a simple <div> containing an image:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">

   $(document).ready(function() {
      $(".clickme").click(function(event){
          $(".target").toggle('slow', function(){
             $(".log").text('Transition Complete');
          });
      });

   });
   </script>
   <style>
   .clickme{ margin:10px;padding:12px;
      border:2px solid #666;
      width:100px;
      height:50px;
    }
   </style>
</head>
<body>
   <div class="content">
      <div class="clickme">Click Me</div>
      <div class="target">
         <img src="/images/jquery.jpg" alt="jQuery" />
      </div>
      <div class="log"></div>
</body>
</html>

JQuery Effect Methods:

You have seen basic concept of jQuery Effects. Following table lists down all the important methods to create different kind of effects:

Methods and Description
animate( params, [duration, easing, callback] ) A function for making custom animations.
fadeIn( speed, [callback] ) Fade in all matched elements by adjusting their opacity and firing an optional callback after completion.
fadeOut( speed, [callback] ) Fade out all matched elements by adjusting their opacity to 0, then setting display to "none" and firing an optional callback after completion.
fadeTo( speed, opacity, callback ) Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion.
hide( ) Hides each of the set of matched elements if they are shown.
hide( speed, [callback] ) Hide all matched elements using a graceful animation and firing an optional callback after completion.
show( ) Displays each of the set of matched elements if they are hidden.
show( speed, [callback] ) Show all matched elements using a graceful animation and firing an optional callback after completion.
slideDown( speed, [callback] ) Reveal all matched elements by adjusting their height and firing an optional callback after completion.
slideToggle( speed, [callback] ) Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion.
slideUp( speed, [callback] ) Hide all matched elements by adjusting their height and firing an optional callback after completion.
stop( [clearQueue, gotoEnd ]) Stops all the currently running animations on all the specified elements.
toggle( ) Toggle displaying each of the set of matched elements.
toggle( speed, [callback] ) Toggle displaying each of the set of matched elements using a graceful animation and firing an optional callback after completion.
toggle( switch ) Toggle displaying each of the set of matched elements based upon the switch (true shows all elements, false hides all elements).
jQuery.fx.off Globally disable all animations.

jQuery and Ajax - jQuery basic tutorial 9

9. jQuery Ajax

AJAX is an acronym standing for Asynchronous JavaScript and XML and this technology help us to load data from the server without a browser page refresh.
If you are new with AJAX, I would recommend you go through our Ajax Tutorial before proceeding further.
JQuery is a great tool which provides a rich set of AJAX methods to develope next generation web application.

Loading simple data:

This is very easy to load any static or dynamic data using JQuery AJAX. JQuery provides load() method to do the job:

Syntax:

Here is the simple syntax for load() method:

[selector].load( URL, [data], [callback] );

Here is the description of all the parameters:

URL: The URL of the server-side resource to which the request is sent. It could be a CGI, ASP, JSP, or PHP script which generates data dynamically or out of a database.
data: This optional parameter represents an object whose properties are serialized into properly encoded parameters to be passed to the request. If specified, the request is made using the POST method. If omitted, the GET method is used.
callback: A callback function invoked after the response data has been loaded into the elements of the matched set. The first parameter passed to this function is the response text recieved from the server and second parameter is the status code.

Example:
Consider the following HTML file with a small JQuery coding:
```
<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   $(document).ready(function() {
      $("#driver").click(function(event){
          $('#stage').load('/jquery/result.html');
      });
   });
   </script>
</head>
<body>
   <p>Click on the button to load result.html file:</p>
   <div id="stage" style="background-color:blue;">
          STAGE
   </div>
   <input type="button" id="driver" value="Load Data" />
</body>
</html>
```
Here load() initiates an Ajax request to the specified URL /jquery/result.html file. After loading this file, all the content would be populated inside <div> tagged with ID stage. Assuming, our /jquery/result.html file has just one HTML line:
<h1>THIS IS RESULT...</h1>
When you click the given button, then result.html file gets loaded. To understand it in better way you can Try it yourself.

Getting JSON data:
There would be a situation when server would return JSON string against your request. JQuery utility function getJSON() parses the returned JSON string and makes the resulting string available to the callback function as first parameter to take further action.

Syntax:
Here is the simple syntax for getJSON() method:
[selector].getJSON( URL, [data], [callback] ); Here is the description of all the parameters:
URL: The URL of the server-side resource contacted via the GET method.
data: An object whose properties serve as the name/value pairs used to construct a query string to be appended to the URL, or a preformatted and encoded query string.
callback: A function invoked when the request completes. The data value resulting from digesting the response body as a JSON string is passed as the first parameter to this callback, and the status as the second.

Example:

Consider the following HTML file with a small JQuery coding:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   $(document).ready(function() {
      $("#driver").click(function(event){
          $.getJSON('/jquery/result.json', function(jd) {
             $('#stage').html('<p> Name: ' + jd.name + '</p>');
             $('#stage').append('<p>Age : ' + jd.age+ '</p>');
             $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
          });
      });
   });
   </script>
</head>
<body>
   <p>Click on the button to load result.html file:</p>
   <div id="stage" style="background-color:blue;">
          STAGE
   </div>
   <input type="button" id="driver" value="Load Data" />
</body>
</html>

Here JQuery utility method getJSON() initiates an Ajax request to the specified URL /jquery/result.json file. After loading this file, all the content would be passed to the callback function which finally would be populated inside <div> tagged with ID stage. Assuming, our /jquery/result.json file has following json formatted content:

{
"name": "Zara Ali",
"age" : "67",
"sex": "female"
}

When you click the given button, then result.json file gets loaded. To understand it in better way you can Try it yourself.

Passing data to the Server:

Many times you collect input from the user and you pass that input to the server for further processing. JQuery AJAX made it easy enough to pass collected data to the server using data parameter of any available Ajax method.

Example:

This example demonstrate how can pass user input to a web server script which would send the same result back and we would print it:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   $(document).ready(function() {
      $("#driver").click(function(event){
          var name = $("#name").val();
          $("#stage").load('/jquery/result.php', {"name":name} );
      });
   });
   </script>
</head>
<body>
   <p>Enter your name and click on the button:</p>
   <input type="input" id="name" size="40" /><br />
   <div id="stage" style="background-color:blue;">
          STAGE
   </div>
   <input type="button" id="driver" value="Show Result" />
</body>
</html>

Here is the code written in result.php script:

<?php
if( $_REQUEST["name"] )
{
   $name = $_REQUEST['name'];
   echo "Welcome ". $name;
}
?>

jQuery Event handlers - jQuery basic tutorial 8

8. jQuery Event handlers

We have the ability to create dynamic web pages by using events. Events are actions that can be detected by your Web Application.
Following are the examples events:

A mouse click
A web page loading
Taking mouse over an element
Submitting an HTML form
A keystroke on your keyboard
etc.

When these events are triggered you can then use a custom function to do pretty much whatever you want with the event. These custom functions call Event Handlers.

Binding event handlers:

Using the jQuery Event Model, we can establish event handlers on DOM elements with the bind() method as follows:

$('div').bind('click', function( event ){
   alert('Hi there!');
});
selector.bind( eventType[, eventData], handler)

Following is the description of the parameters:

eventType: A string containing a JavaScript event type, such as click or submit. Refer to the next section for a complete list of event types.
eventData: This is optional parameter is a map of data that will be passed to the event handler.
handler: A function to execute each time the event is triggered.

Removing event handlers:

Typically, once an event handler is established, it remains in effect for the remainder of the life of the page. There may be a need when you would like to remove event handler.
jQuery provides the unbind() command to remove an exiting event handler. The syntax of unbind() is as follows:

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

Following is the description of the parameters:

eventType: A string containing a JavaScript event type, such as click or submit. Refer to the next section for a complete list of event types.
handler: If provided, identifies the specific listener that.s to be removed.

Event Types:

The following are cross platform and recommended event types which you can bind using JQuery:

Event Type	Description
blur	Occurs when the element loses focus
change	Occurs when the element changes
click	Occurs when a mouse click
dblclick	Occurs when a mouse double-click
error	Occurs when there is an error in loading or unloading etc.
focus	Occurs when the element gets focus
keydown	Occurs when key is pressed
keypress	Occurs when key is pressed and released
keyup	Occurs when key is released
load	Occurs when document is loaded
mousedown	Occurs when mouse button is pressed
mouseenter	Occurs when mouse enters in an element region
mouseleave	Occurs when mouse leaves an element region
mousemove	Occurs when mouse pointer moves
mouseout	Occurs when mouse pointer moves out of an element
mouseover	Occurs when mouse pointer moves over an element
mouseup	Occurs when mouse button is released
resize	Occurs when window is resized
scroll	Occurs when window is scrolled
select	Occurs when a text is selected
submit	Occurs when form is submitted
unload	Occurs when documents is unloaded

The Event Object:

The callback function takes a single parameter; when the handler is called the JavaScript event object will be passed through it.
The event object is often unneccessary and the parameter is omitted, as sufficient context is usually available when the handler is bound to know exactly what needs to be done when the handler is triggered, however there are certail attributes which you would need to be accessed.

The Event Attributes:

The following event properties/attributes are available and safe to access in a platform independent manner:

Property	Description
altKey	Set to true if the Alt key was pressed when the event was triggered, false if not. The Alt key is labeled Option on most Mac keyboards.
ctrlKey	Set to true if the Ctrl key was pressed when the event was triggered, false if not.
data	The value, if any, passed as the second parameter to the bind() command when the handler was established.
keyCode	For keyup and keydown events, this returns the key that was pressed.
metaKey	Set to true if the Meta key was pressed when the event was triggered, false if not. The Meta key is the Ctrl key on PCs and the Command key on Macs.
pageX	For mouse events, specifies the horizontal coordinate of the event relative from the page origin.
pageY	For mouse events, specifies the vertical coordinate of the event relative from the page origin.
relatedTarget	For some mouse events, identifies the element that the cursor left or entered when the event was triggered.
screenX	For mouse events, specifies the horizontal coordinate of the event relative from the screen origin.
screenY	For mouse events, specifies the vertical coordinate of the event relative from the screen origin.
shiftKey	Set to true if the Shift key was pressed when the event was triggered, false if not.
target	Identifies the element for which the event was triggered.
timeStamp	The timestamp (in milliseconds) when the event was created.
type	For all events, specifies the type of event that was triggered (for example, click).
which	For keyboard events, specifies the numeric code for the key that caused the event, and for mouse events, specifies which button was pressed (1 for left, 2 for middle, 3 for right)

The Event Methods:

There is a list of methods which can be called on an Event Object:

Method	Description
preventDefault()	Prevents the browser from executing the default action.
isDefaultPrevented()	Returns whether event.preventDefault() was ever called on this event object.
stopPropagation()	Stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.
isPropagationStopped()	Returns whether event.stopPropagation() was ever called on this event object.
stopImmediatePropagation()	Stops the rest of the handlers from being executed.
isImmediatePropagationStopped()	Returns whether event.stopImmediatePropagation() was ever called on this event object.

jQuery DOM manipulation - jQuery basic tutorial series 7

7. jQuery DOM manipulation

JQuery provides methods to manipulate DOM in efficient way. You do not need to write big code to modify the value of any element's attribute or to extract HTML code from a paragraph or division.
JQuery provides methods such as .attr(), .html(), and .val() which act as getters, retrieving information from DOM elements for later use.

Content Manipulation:

The html( ) method gets the html contents (innerHTML) of the first matched element.
Here is the syntax for the method:

selector.html( )

Example:

Following is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML content from the object and then .text( val ) method sets value of the object using passed parameter:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

     $("div").click(function () {
      var content = $(this).html();
      $("#result").text( content );
    });

   });

   </script>
   <style>
      #division{ margin:10px;padding:12px;
                 border:2px solid #666;
                 width:60px;
               }
  </style>
</head>
<body>
   <p>Click on the square below:</p>
   <span id="result"> </span>
   <div id="division" style="background-color:blue;">
     This is Blue Square!!
   </div>
</body>
</html>

DOM Element Replacement:

You can replace a complete DOM element with the specified HTML or DOM elements. The replaceWith( content ) method serves this purpose very well.
Here is the syntax for the method:

selector.replaceWith( content )

Here content is what you want to have instead of original element. This could be HTML or simple text.

Example:

Following is an example which would replace division element with "<h1>JQuery is Great</h1>":

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

     $("div").click(function () {
       $(this).replaceWith("<h1>JQuery is Great</h1>");
    });

   });

   </script>
   <style>
      #division{ margin:10px;padding:12px;
                 border:2px solid #666;
                 width:60px;
               }
  </style>
</head>
<body>
   <p>Click on the square below:</p>
   <span id="result"> </span>
   <div id="division" style="background-color:blue;">
     This is Blue Square!!
   </div>
</body>
</html>

Removing DOM Elements:

There may be a situation when you would like to remove one or more DOM elements from the document. JQuery provides two methods to handle the situation.
The empty( ) method remove all child nodes from the set of matched elements where as the method remove( expr ) method removes all matched elements from the DOM.
Here is the syntax for the method:

selector.remove( [ expr ])

or 

selector.empty( )

You can pass optional paramter expr to filter the set of elements to be removed.

Example:

Following is an example where elements are being removed as soon as they are clicked:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

     $("div").click(function () {
       $(this).remove( );
    });

   });

   </script>
   <style>
      .div{ margin:10px;padding:12px;
             border:2px solid #666;
             width:60px;
           }
  </style>
</head>
<body>
   <p>Click on any square below:</p>
   <span id="result"> </span>
   <div class="div" style="background-color:blue;"></div>
   <div class="div" style="background-color:green;"></div>
   <div class="div" style="background-color:red;"></div>
</body>
</html>

Inserting DOM elements:

There may be a situation when you would like to insert new one or more DOM elements in your existing document. JQuery provides various methods to insert elements at various locations.
The after( content ) method insert content after each of the matched elements where as the method before( content ) method inserts content before each of the matched elements.
Here is the syntax for the method:

selector.after( content )

or

selector.before( content )

Here content is what you want to insert. This could be HTML or simple text.

Example:

Following is an example where <div> elements are being inserted just before the clicked element:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

     $("div").click(function () {
       $(this).before('<div class="div"></div>' );
    });

   });

   </script>
   <style>
      .div{ margin:10px;padding:12px;
             border:2px solid #666;
             width:60px;
           }
  </style>
</head>
<body>
   <p>Click on any square below:</p>
   <span id="result"> </span>
   <div class="div" style="background-color:blue;"></div>
   <div class="div" style="background-color:green;"></div>
   <div class="div" style="background-color:red;"></div>
</body>
</html>

DOM Manipulation Methods:

Following table lists down all the methods which you can use to manipulate DOM elements:

Method	Description
after( content )	Insert content after each of the matched elements.
append( content )	Append content to the inside of every matched element.
appendTo( selector )	Append all of the matched elements to another, specified, set of elements.
before( content )	Insert content before each of the matched elements.
clone( bool )	Clone matched DOM Elements, and all their event handlers, and select the clones.
clone( )	Clone matched DOM Elements and select the clones.
empty( )	Remove all child nodes from the set of matched elements.
html( val )	Set the html contents of every matched element.
html( )	Get the html contents (innerHTML) of the first matched element.
insertAfter( selector )	Insert all of the matched elements after another, specified, set of elements.
insertBefore( selector )	Insert all of the matched elements before another, specified, set of elements.
prepend( content )	Prepend content to the inside of every matched element.
prependTo( selector )	Prepend all of the matched elements to another, specified, set of elements.
remove( expr )	Removes all matched elements from the DOM.
replaceAll( selector )	Replaces the elements matched by the specified selector with the matched elements.
replaceWith( content )	Replaces all matched elements with the specified HTML or DOM elements.
text( val )	Set the text contents of all matched elements.
text( )	Get the combined text contents of all matched elements.
wrap( elem )	Wrap each matched element with the specified element.
wrap( html )	Wrap each matched element with the specified HTML content.
wrapAll( elem )	Wrap all the elements in the matched set into a single wrapper element.
wrapAll( html )	Wrap all the elements in the matched set into a single wrapper element.
wrapInner( elem )	Wrap the inner child contents of each matched element (including text nodes) with a DOM element.
wrapInner( html	Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.

jQuery CSS manipulation - jQuery basic tutorial 6

6. jQuery CSS manipulation

The jQuery library supports nearly all of the selectors included in Cascading Style Sheet (CSS) specifications 1 through 3, as outlined on the World Wide Web Consortium's site.
Using JQuery library developers can enhance their websites without worrying about browsers and their versions as long as the browsers have JavaScript enabled.
Most of the JQuery CSS Methods do not modify the content of the jQuery object and they are used to apply CSS properties on DOM elements.

Apply CSS Properties:

This is very simple to apply any CSS property using JQuery method css( PropertyName, PropertyValue ).
Here is the syntax for the method:

selector.css( PropertyName, PropertyValue );

Here you can pass PropertyName as a javascript string and based on its value, PropertyValue could be string or integer.

Example:

Following is an example which adds font color to the second list item.

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {
      $("li").eq(2).css("color", "red");
   });

   </script>
</head>
<body>
   <div>
   <ul>
     <li>list item 1</li>
     <li>list item 2</li>
     <li>list item 3</li>
     <li>list item 4</li>
     <li>list item 5</li>
     <li>list item 6</li>
   </ul>
   </div>
</body>
</html>

Apply Multiple CSS Properties:

You can apply multiple CSS properties using a single JQuery method CSS( {key1:val1, key2:val2....). You can apply as many properties as you like in a single call.
Here is the syntax for the method:

selector.css( {key1:val1, key2:val2....keyN:valN})

Here you can pass key as property and val as its value as described above.

Example:

Following is an example which adds font color as well as background color to the second list item.

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {
      $("li").eq(2).css({"color":"red", 
                         "background-color":"green"});
   });

   </script>
</head>
<body>
   <div>
   <ul>
     <li>list item 1</li>
     <li>list item 2</li>
     <li>list item 3</li>
     <li>list item 4</li>
     <li>list item 5</li>
     <li>list item 6</li>
   </ul>
   </div>
</body>
</html>

Setting Element Width & Height:

The width( val ) and height( val ) method can be used to set the width and hieght respectively of any element.

Example:

Following is a simple example which sets the width of first division element where as rest of the elements have width set by style sheet:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {
      $("div:first").width(100);
      $("div:first").css("background-color", "blue");
   });

   </script>
   <style>
   div{ width:70px; height:50px; float:left; margin:5px;
      background:red; cursor:pointer; }
  </style>
</head>
<body>
  <div></div>
  <div>d</div>
  <div>d</div>
  <div>d</div>
  <div>d</div>
</body>
</html>

JQuery CSS Methods:

Following table lists down all the methods which you can use to play with CSS properties:

Method	Description
css( name )	Return a style property on the first matched element.
css( name, value )	Set a single style property to a value on all matched elements.
css( properties )	Set a key/value object as style properties to all matched elements.
height( val )	Set the CSS height of every matched element.
height( )	Get the current computed, pixel, height of the first matched element.
innerHeight( )	Gets the inner height (excludes the border and includes the padding) for the first matched element.
innerWidth( )	Gets the inner width (excludes the border and includes the padding) for the first matched element.
offset( )	Get the current offset of the first matched element, in pixels, relative to the document
offsetParent( )	Returns a jQuery collection with the positioned parent of the first matched element.
outerHeight( [margin] )	Gets the outer height (includes the border and padding by default) for the first matched element.
outerWidth( [margin] )	Get the outer width (includes the border and padding by default) for the first matched element.
position( )	Gets the top and left position of an element relative to its offset parent.
scrollLeft( val )	When a value is passed in, the scroll left offset is set to that value on all matched elements.
scrollLeft( )	Gets the scroll left offset of the first matched element.
scrollTop( val )	When a value is passed in, the scroll top offset is set to that value on all matched elements.
scrollTop( )	Gets the scroll top offset of the first matched element.
width( val )	Set the CSS width of every matched element.
width( )	Get the current computed, pixel, width of the first matched element.

jQuery dom traverse - jQuery basic tutorial 5

5. jQuery Traversing through DOM

jQuery is a very powerful tool which provides a variety of DOM traversal methods to help us select elements in a document randomly as well as in sequential method.
Most of the DOM Traversal Methods do not modify the jQuery object and they are used to filter out elements from a document based on given conditions.

Find Elements by index:

Consider a simple document with the following HTML content:

<html>
<head>
<title>the title</title>
</head>
<body>
   <div>
   <ul>
     <li>list item 1</li>
     <li>list item 2</li>
     <li>list item 3</li>
     <li>list item 4</li>
     <li>list item 5</li>
     <li>list item 6</li>
   </ul>
   </div>
</body>
</html>

Above every list has its own index, and can be located directly by using eq(index) method as below example.

Every child element starts its index from zero, thus, list item 2 would be accessed by using $("li").eq(1) and so on.

Example:

Following is a simple example which adds the color to second list item.

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {
      $("li").eq(2).addClass("selected");
   });

   </script>
   <style>
      .selected { color:red; }
  </style>
</head>
<body>
   <div>
   <ul>
     <li>list item 1</li>
     <li>list item 2</li>
     <li>list item 3</li>
     <li>list item 4</li>
     <li>list item 5</li>
     <li>list item 6</li>
   </ul>
   </div>
</body>
</html>

Filtering out Elements:

The filter( selector ) method can be used to filter out all elements from the set of matched elements that do not match the specified selector(s). The selector can be written using any selector syntax.

Example:

Following is a simple example which applies color to the lists associated with middle class:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {
      $("li").filter(".middle").addClass("selected");
   });

   </script>
   <style>
      .selected { color:red; }
  </style>
</head>
<body>
   <div>
   <ul>
     <li class="top">list item 1</li>
     <li class="top">list item 2</li>
     <li class="middle">list item 3</li>
     <li class="middle">list item 4</li>
     <li class="bottom">list item 5</li>
     <li class="bottom">list item 6</li>
   </ul>
   </div>
</body>
</html>

Locating Descendent Elements :

The find( selector ) method can be used to locate all the descendent elements of a particular type of elements. The selector can be written using any selector syntax.

Example:

Following is an example which selects all the <span> elements available inside different <p> elements:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">

   $(document).ready(function() {
      $("p").find("span").addClass("selected");
   });

   </script>
   <style>
      .selected { color:red; }
  </style>
</head>
<body>
   <p>This is 1st paragraph and <span>THIS IS RED</span></p>
   <p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
</body>
</html>

JQuery DOM Traversing Methods:

Following table lists down useful methods which you can use to filter out various elements from a list of DOM elements:

Selector	Description
eq( index )	Reduce the set of matched elements to a single element.
filter( selector )	Removes all elements from the set of matched elements that do not match the specified selector(s).
filter( fn )	Removes all elements from the set of matched elements that do not match the specified function.
is( selector )	Checks the current selection against an expression and returns true, if at least one element of the selection fits the given selector.
map( callback )	Translate a set of elements in the jQuery object into another set of values in a jQuery array (which may, or may not contain elements).
not( selector )	Removes elements matching the specified selector from the set of matched elements.
slice( start, [end] )	Selects a subset of the matched elements.

Following table lists down other useful methods which you can use to locate various elements in a DOM:

Selector	Description
add( selector )	Adds more elements, matched by the given selector, to the set of matched elements.
andSelf( )	Add the previous selection to the current selection.
children( [selector])	Get a set of elements containing all of the unique immediate children of each of the matched set of elements.
closest( selector )	Get a set of elements containing the closest parent element that matches the specified selector, the starting element included.
contents( )	Find all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe.
end( )	Revert the most recent 'destructive' operation, changing the set of matched elements to its previous state .
find( selector )	Searches for descendent elements that match the specified selectors.
next( [selector] )	Get a set of elements containing the unique next siblings of each of the given set of elements.
nextAll( [selector] )	Find all sibling elements after the current element.
offsetParent( )	Returns a jQuery collection with the positioned parent of the first matched element.
parent( [selector] )	Get the direct parent of an element. If called on a set of elements, parent returns a set of their unique direct parent elements.
parents( [selector] )	Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element).
prev( [selector] )	Get a set of elements containing the unique previous siblings of each of the matched set of elements.
prevAll( [selector] )	Find all sibling elements in front of the current element.
siblings( [selector] )	Get a set of elements containing all of the unique siblings of each of the matched set of elements.

Subscribe to: Posts ( Atom )

Catalina Kiss - Acoustic Alchemy - Instrumental JAZZ

Used Maven Dependencies:

10. jQuery Effects

Showing and Hiding elements:

Syntax:

Example:

Toggling the elements:

Syntax:

Example:

JQuery Effect Methods:

9. jQuery Ajax

Loading simple data:

Syntax:

Example:

Getting JSON data:

Syntax:

Example:

Passing data to the Server:

Example:

8. jQuery Event handlers

Binding event handlers:

Removing event handlers:

Event Types:

The Event Object:

The Event Attributes:

The Event Methods:

7. jQuery DOM manipulation

Content Manipulation:

Example:

DOM Element Replacement:

Example:

Removing DOM Elements:

Example:

Inserting DOM elements:

Example:

DOM Manipulation Methods:

6. jQuery CSS manipulation

Apply CSS Properties:

Example:

Apply Multiple CSS Properties:

Example:

Setting Element Width & Height:

Example:

JQuery CSS Methods:

5. jQuery Traversing through DOM

Find Elements by index:

Example:

Filtering out Elements:

Example:

Locating Descendent Elements :

Example:

JQuery DOM Traversing Methods: