jQuery and JavaScript

jQuery and JavaScript Coding

1. Why jQuery?

jQuery is ideal because it can create impressive animations and interactions. jQuery is simple to understand and easy to use, which means the learning curve is small, while the possibilities are (almost) infinite.

Javascript and Best Practices

Javascript has long been the subject of many heated debates about whether it is possible to use it while still adhering to best practices regarding accessibility and standards compliance.

The answer to this question is still unresolved, however, the emergence of Javascript frameworks like jQuery has provided the necessary tools to create beautiful websites without having to worry (as much) about accessibility issues.

Obviously there are cases where a Javascript solution is not the best option. The rule of thumb here is: use DOM scripting to enhance functionality, not create it.

Unobtrusive DOM Scripting

While the term “DOM scripting” really just refers to the use of scripts (in this case, Javascripts) to access the Document Object Model, it has widely become accepted as a way of describing what should really be called “unobtrusive DOM scripting”—basically, the art of adding Javascript to your page in such a way that if there were NO Javascript, the page would still work (or at least degrade gracefully). In the website world, our DOM scripting is done using Javascript.

The Bottom Line: Accessible, Degradable Content

The aim of any web producer, designer or developer is to create content that is accessible to the widest range of audience. However, this has to be carefully balanced with design, interactivity and beauty. Using the theories set out in this article, designers, developers and web producers will have the knowledge and understanding to use jQuery for DOM scripting in an accessible and degradable way; maintaining content that is beautiful, functional AND accessible.

2. Unobtrusive DOM Scripting?

In an ideal world, websites would have dynamic functionality AND effects that degrade well. What does this mean? It would mean finding a way to include, say, a snazzy Javascript Web 2.0 animated sliding news ticker widget in a web page, while still ensuring that it fails gracefully if a visitor’s browser can’t (or won’t) run Javascripts.

The theory behind this technique is quite simple: the ultimate aim is to use Javascript for non-invasive, “behavioural” elements of the page. Javascript is used to add or enhance interactivity and effects.

3. Understanding jQuery for Unobtrusive DOM Scripting

This section will explore three priceless tips and tricks for using jQuery to implement best practices and accessible effects.

Understanding Selectors: the Backbone of  jQuery

The first step to unobtrusive DOM scripting (at least in jQuery and Prototype) is using selectors. Selectors can (amazingly) select an element out of the DOM tree so that it can be manipulated in some way.

If you’re familiar with CSS then you’ll understand selectors in jQuery; they’re almost the same thing and use almost the same syntax. jQuery provides a special utility function to select elements. It is called $.

A set of very simple examples of jQuery selectors:
  1. $(document); // Activate jQuery for object
  2. $(‘#mydiv’) // Element with ID “mydiv”
  3. $(‘p.first’) // P tags with class first.
  4. $(‘p[title=”Hello”]’) // P tags with title “Hello”
  5. $(‘p[title^=”H”]’) // P tags title starting with H
So, as the Javascript comments suggest:
  1. $(document);
    The first option will apply the jQuery library methods to a DOM object (in this case, the document object).
  2. $(’#mydiv’)
    The second option will select every <div> that has the <id> attribute set to “mydiv”.
  3. $(’p.first’)
    The third option will select all of the <p> tags with the class of “first”.
  4. $(’p[title=”Hello”]‘)
    This option will select from the page all <p> tags that have a title of “Hello”. Techniques like this enable the use of much more semantically correct (X)HTML markup, while still facilitating the DOM scripting required to create complex interactions.
  5. $(’p[title^=”H”]‘)
    This enables the selection of all of the <p> tags on the page that have a title that starts with the letter H.
These examples barely scratch the surface.

Almost anything you can do in CSS3 will work in jQuery, plus many more complicated selectors. The complete list of selectors is well documented on the jQuery Selectors documentation page. If you’re feeling super-geeky, you could also read the CSS3 selector specification from the W3C.

Get ready.
$(document).ready()

Traditionally Javascript events were attached to a document using an “onload” attribute in the <body> tag of the page. Forget this practice. Wipe it from your mind.

jQuery provides us with a special utility on the document object, called “ready”, allowing us to execute code ONLY after the DOM has completely finished loading. This is the key to unobtrusive DOM scripting, as it allows us to completely separate our Javascript code from our markup. Using $(document).ready(), we can queue up a series of events and have them execute after the DOM is initialized.

This means that we can create entire effects for our pages without changing the markup for the elements in question.

Show Hide in Jquery

<script type=”text/javascript” src=”jquery-1.4.2.js”></script>
<script>
function showSN(sn) {
$(“.wraper-widget”).hide();
$(“#widget-” + sn).show();

// alert(“Hi”);
}

function hideSN(sn) {
$(“#widget-” + sn).hide();
}
</script>

<style>

.wraper-widget {
width:150px;
height:150px;
background:#ccc;
padding:10px;
text-align:center;
position:absolute;
left:280px;
top:20px;
}

</style>
</head>

<body>

<p>
<a href=”#” onclick=”javascript:showSN(‘f’);”>Facebook</a>&nbsp;&nbsp;
<a href=”#” onclick=”javascript:showSN(‘y’);”>YouTube</a>&nbsp;&nbsp;
<a href=”#” onclick=”javascript:showSN(‘l’);”>Linkedin</a>&nbsp;&nbsp;
<a href=”#” onclick=”javascript:showSN(‘t’);”>Twitter</a>
</p>

<div id=”widget-f” class=”wraper-widget” style=”display:none;”>
<h1>Facebook Widget</h1>
<a href=”javascript:void(0);” onclick=”javascript:hideSN(‘f’);”>Close</a>
</div>

<div id=”widget-y” class=”wraper-widget” style=”display:none;”>
<h1>YouTube Widget</h1>
<a href=”javascript:void(0);” onclick=”javascript:hideSN(‘y’);”>Close</a>
</div>
<div id=”widget-l” class=”wraper-widget” style=”display:none;”>
<h1>Linkdien Widget</h1>
<a href=”javascript:void(0);” onclick=”javascript:hideSN(‘l’);”>Close</a>
</div>

<div id=”widget-t” class=”wraper-widget” style=”display:none;”>
<h1>twitter Widget</h1>
<a href=”javascript:void(0);” onclick=”javascript:hideSN(‘t’);”>Close</a>
</div>

Add Remove Active class in Jquery

$(“div.slide img”).click(function() {
$(this).addClass(“active”).siblings().removeClass(“active”);

$(this).parent() // from the parent element
.siblings() // find all the siblings elements <a>’s
.find(‘img’) // find <img> inside each sibling
.removeClass(‘active’) // remove hover class
.removeClass(‘active’); // remove click class

});

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s