Replies

• 

  PraveenKumar Purushothaman

  This is taken from a great book:
  

  The jQuery JavaScript framework is a rising star in the world of web development. JavaScript frameworks in general have grown to become immensely popular in the past few years in parallel with the ever-increasing presence of JavaScript-driven, so-called Web 2.0 websites that make heavy use of technologies like AJAX and JavaScript in general for slick graphical enhancements that would be impossible or much more cumbersome to incorporate without JavaScript.
  
  jQuery’s mission as a JavaScript library is simple - it strives to make the lives of web developers easier by patching over certain portions of cross-browser development and by making other tasks commonly needed by developers much easier. jQuery has the real, proven ability to reduce many lines of plain-vanilla JavaScript to just a few lines, and, in many cases, just a single line. jQuery strives to remove barriers to JavaScript development by removing redundancy wherever possible and normalizing cross-browser JavaScript development in key areas where browsers would otherwise differ, such as Microsoft’s Event API and the W3C Event API, and other, more remedial tasks like getting the mouse cursor’s position when an event has taken place.
  
  jQuery is a compact, lightweight library that currently works in Microsoft’s Internet Explorer browser from version 6 on, Firefox from version 1.5 on, Safari from version 2.0.2 on, Opera from version 9 on, and Google’s new Chrome browser from version 0.2 on. Getting started with jQuery is very easy - all you have to do is include a single link of markup in your HTML or XHTML documents that includes the library.

  I guess you would have a great time experimenting things out here. 😀 All the best! 😀
• 

  PraveenKumar Purushothaman

  Example 1
  
  Example 1: Installing and Testing jQuery
  1. Download the jQuery script from #-Link-Snipped-#.
  2. Enter the following XHTML document, and save the document as eg1.htm. Save the jQuery library to the same folder as eg1.htm using the name #-Link-Snipped-#.
  
  

  
  
      
          
          
          
          
          
          
      
      
          
              jQuery is not loaded.
          
      
  

  Please say your experiment results. 😀
  I will explain the code, once I am home. 😀
  I have my graduation day today! 😛
• 

  PraveenKumar Purushothaman

  Features of jQuery!
  
  Let us see the features of jQuery
  ❑ jQuery makes iterating and traversing the DOM much easier via its various built-❑❑ in methods for
  doing the same.
  ❑ jQuery makes selecting items from the DOM easier via its sophisticated, built-in ability to use
  selectors, just like you would use in CSS.
  ❑ jQuery makes it really easy to add your own custom methods via its simple-to-understand
  plug-in architecture.
  ❑ jQuery helps reduce redundancy in navigation and UI functionality, like tabs, CSS and markupbased
  pop-up dialogues, animations, and transitions, and lots of other things.
• 

  Deepika Bansal

  Thanks a ton for this post mate. Very helpful for the beginners like me.
  Keep posting more stuff like this.
• 

  PraveenKumar Purushothaman

  Sure, working on the other topics... Pls try the example and say how is it... Whether working or not... 😀
• 

  PraveenKumar Purushothaman

  Example 1 Explained
  
  In the preceding example, you installed and tested your installation of the jQuery framework. The XHTML document references a style sheet and a test JavaScript. The XHTML document contains just a single

  element that contains the text “jQuery is not loaded.” The style sheet has a rule that makes that text red with a red border around the

  element.
  
  The JavaScript that you included first looks for the jQuery object, which is contained in a single dollar sign. That one dollar sign contains all of jQuery’s functionality, which makes jQuery statements really short. If that’s too short for you, you can also substitute “jQuery” for the dollar sign, which would have made that JavaScript example look like this:
  

  if (jQuery) {
      jQuery(document).ready(
          function() {
              jQuery(‘p’).addClass(‘tmpFrameworkLoaded’);
              jQuery(‘p’).text(‘jQuery successfully loaded and running!’);
          }
      );
  }

• 

  PraveenKumar Purushothaman

  XHTML and CSS Conventions
  
  XHTML and CSS Conventions
  It’s important that your web documents be well-organized, cleanly written, and appropriately named
  and stored. This requires discipline and even an obsessive attention to the tiniest of details.
  The following is a list of rules to abide by when creating XHTML and CSS documents:
  ❑ Catch errors in XHTML and CSS.
  ❑ When selecting ID and Class names, make sure that they are descriptive and are contained in a namespace. You never know when you might need to combine one project with another — namespaces will help you to prevent conflicts.
  ❑ When defining CSS, avoid using generic type selectors. Make your CSS more specific. This will also help with preventing conflicts.
  ❑ Organize your files in a coherent manner. Group files from the same project in the same folder; separate multiple projects with multiple folders. Avoid creating huge file dumps that make it difficult to locate and associate files.
  ❑ Avoid inaccessible markup. Stay away from frames, where possible. Organize your markup using semantically appropriate elements. Place paragraphs in

  elements. Place lists in

  or
  elements. Use

  through

  for headings, and so on.
  ❑ If you are able to, also consider the loading efficiency of your documents. For development, use small, modularized files organized by the component; combine and compress those modularized files for a live production site.
  
  Setting MIME Type in XHTML
  

  XHTML 1.0 documents are not typically served with the correct, intended MIME type. Rather, they are usually served as an HTML document - which isn’t technically illegal, as long as they are XHTML 1.0 documents. XHTML 1.1, on the other hand, must be served as application/xhtml+xml.
  
  General Skeleton I follow
  Get it from here: #-Link-Snipped-#
  

  Even this is wrong! It uses text/html! 😔 But I have been following this for years! 😔 ... Without any problem... 😛

• 

  PraveenKumar Purushothaman

  Handling Errors in CSS
  
  Errors in CSS
  Errors in style sheets usually make themselves known by not displaying the style you applied.
  However, errors in CSS can also be more subtle and difficult to spot. To catch errors in CSS, I recommend one of the two following approaches:
  ❑ Use Mozilla Firefox (or another browser that reports CSS errors), and look for CSS errors in the browser’s Error Console. In Firefox, that’s located in Tools?Error Console.
  ❑ Use the W3C’s CSS validation service at #-Link-Snipped-#.
• 

  PraveenKumar Purushothaman

  JavaScript Conventions
  
  JavaScript Conventions
  In JavaScript, there are several things that should be considered bad practice and avoided:
  ❑ Include All Script in External Documents - JavaScript code should only be included in external script files. Script should not be embedded in markup documents or be included inline, directly on markup elements.
  ❑ Write Clean, Consistent Code - JavaScript code should be neatly formatted and organized in a consistent, predicable way.
  ❑ Namespace JavaScript Code - JavaScript variables, functions, objects, and the like should be namespaced to minimize potential namespace conflicts and collisions with other JavaScript applications.
  ❑ Avoid Browser Detection - Browser detection should be avoided where possible. Instead, detect specific browser features.
  
  Include All Script in External Documents
  Part of making JavaScript non-obtrusive means making JavaScript complementary and supplemental, rather than required and mandatory. It should be noted why this is the best approach.
  Consider the following code example:
  

  
  
  
  
      
      
      
  
  
  
      
          
          Open Picture
      
  
  

  Combine the preceding markup with the following style sheet:
  

  img {
      display: block;
      margin: 10px auto;
      width: 100px;
      border: 1px solid rgb(128, 128, 128);
  }
  body {
      font: 14px sans-serif;
  }
  p {
      width: 150px;
      text-align: center;
  }

  You would get something like... Will upload it shortly.