Archive for the ‘javascript’ Category

How CSS and JavaScript Are Different

November 15th, 2010

So, what’s this important difference?

In CSS, style rules are automatically applied to any element that matches the selectors, no matter when those elements are added to the document (DOM).

In JavaScript, event handlers that are registered for elements in the document apply only to those elements that are part of the DOM at the time the event is attached. If we add similar elements to the DOM at a later time, whether through simple DOM manipulation or ajax, CSS will give those elements the same appearance, but JavaScript will not automatically make them act the same way.

For example, let’s say we have “<button>Alert!</button>” in our document, and we want to attach a click handler to it that generates an alert message. In jQuery, we might do so with the following code:

PLAIN TEXT

JavaScript:

  1. $(document).ready(function() {
  2. $(‘button.alert’).click(function() {
  3. alert(‘this is an alert message’);
  4. });
  5. });

Here we are registering the click handler for the button with a class of “alert” as soon as the DOM has loaded. So, the button is there, and we have a click function bound to it. If we add a second <button> later on, however, it will know nothing about that click handler. The click event had been dealt with before this second button existed. So, the second button will not generate an alert.

Let’s test what we’ve just discussed. I’ve added a script with the above three lines of jQuery code so that the following button will produce an alert message when clicked. Try it:

Events Don’t Work with Added Elements

Now, let’s create a new button (if we don’t already have a second one) using jQuery code like this:

PLAIN TEXT

JavaScript:

  1. $(‘#create-button’).click(function() {
  2. if ( $(‘button.alert’).length <2) {
  3. $(‘<button>Not another alert’).insertAfter(this);
  4. }
  5. return false;
  6. });

create the button

Have you clicked the link to create the second button? Great. Now click that button. It does nothing. Just as expected.

CSS Continues to “Work” with Newly Created Elements

Now let’s take a look at another example. In this one, we have three list items—two plain items and one with a class of special:

PLAIN TEXT

HTML:

  1. <ul id=”list1″ class=”eventlist”>
  2. <li>plain</li>
  3. <li class=”special”>special <button>I am special</button></li>
  4. <li>plain</li>
  5. </ul>

Press the “I am special” button to create a new list item with a class of “special”:

  • plain
  • special
  • plain

Notice that, like the first special li, the new one has the yellow background. The CSS has come through for us. But press the newly created “I am new” button and, just as with the second alert above, nothing happens. The jQuery code we’re using to add the new item says that upon clicking a button inside a list item with a class of “special” (which itself is inside an element with id of “list1″) a new list item with class=”special” should be inserted after the list item in which the button was clicked:

PLAIN TEXT

JavaScript:

  1. $(document).ready(function() {
  2. $(‘#list1 li.special button’).click(function() {
  3. var $newLi = $(‘<li>special and new <button>I am new</button></li>’);
  4. $(this).parent().after($newLi);
  5. });
  6. });

So, how can we get the events to carry over to the new elements? Two common approaches are event delegation and “re-binding” event handlers. In this entry, we’ll examine event delegation; in part 2, we’ll explore ways to re-bind.

Event Delegation: Getting Events to Embrace New Elements

The general idea of event delegation is to bind the event handler to a containing element and then have an action take place based on which specific element within that containing element is targeted. Let’s say we have another unordered list: <ul id="list2"> ... </ul>. Instead of attaching the .click() method to a button — $('#list2 li.special button').click(...) — we can attach it to the entire surrounding <ul>. Through the magic of “bubbling,” any click on the button is also a click on the button’s surrounding list item, the list as a whole, the containing div, and all the way up to the window object. Since the <ul> that gets clicked is the same one each time (we’re only creating items within the <ul>), the same thing will happen when clicking on all of the buttons, regardless of when they were created.

When we use event delegation, we need to pass in the “event” argument. So, in our case, instead of .click(), we’ll have .click(event). We don’t have to name this argument event. We can call it e or evt or gummy or whatever we want. I just like to use labels that are as obvious as possible because I have a hard time keeping track of things. Here is what we have so far:

PLAIN TEXT

JavaScript:

  1. $(document).ready(function() {
  2. $(‘#list2′).click(function(event) {
  3. var $newLi = $(‘<li>special and new <button>I am new</button></li>’);
  4. });
  5. });

So far, the code is very similar to our first attempt, except for the selector we’re starting with (#list2) and the addition of the event argument. Now we need to determine whether what is being clicked inside the <ul> is a “special” button or not. If it is, we can add a new <li>. We check the clicked element by using the “target” property of the event argument:

PLAIN TEXT

JavaScript:

  1. $(document).ready(function() {
  2. $(‘#list2′).click(function(event) {
  3. var $newLi = $(‘<li>special and new <button>I am new</button></li>’);
  4. var $tgt = $(event.target);
  5. if ($tgt.is(‘button’)) {
  6. $tgt.parent().after($newLi);
  7. }
  8. // next 2 lines show that you’ve clicked on the ul
  9. var bgc = $(this).css(‘backgroundColor’);
  10. $(this).css({backgroundColor: bgc == ‘#ffcccc’ || bgc == ‘rgb(255, 204, 204)’ ? ‘#ccccff’ : ‘#ffcccc’});
  11. });
  12. });

Line 4 above puts the target element in a jQuery wrapper and stores it in the $tgt variable. Line 5 checks whether the click’s target is a button. If it is, the new list item is inserted after the parent of the clicked button. Let’s try it:

  • plain
  • special
  • plain

I put an additional two lines at the end to demonstrate that a click on one of the buttons is still considered a click on the <ul> You’ll see that clicking anywhere within the <ul> toggles its background between pink and blue.

It’s probably worth noting that jQuery makes working with the event argument cross-browser friendly. If you do this sort of thing with plain JavaScript and DOM nodes, you’d have to do something like this:

var list2 = document.getElementById('list2');
list2.onclick = function(e) {
  var e = e || window.event;
  var tgt = e.target || e.srcElement;
  if (tgt.nodeName.toLowerCase() == 'button') {
    // do something
  }
};

As you can see, it’s a bit of a hassle.

Another Huge Benefit of Event Delegation

Event delegation is also a great way to avoid crippling the user’s browser when you’re working with a huge document. For example, if you have a table with thousands of cells, and you want something to happen when the user clicks on one, you won’t want to attach a click handler to every single one of them (believe me, it can get ugly). Instead, you can attach the click handler to a single table element and use event.target to pinpoint the cell that is being clicked:

PLAIN TEXT

JavaScript:

  1. $(document).ready(function() {
  2. $(‘table’).click(function(event) {
  3. var $thisCell, $tgt = $(event.target);
  4. if ($tgt.is(‘td’)) {
  5. $thisCell = $tgt;
  6. } else if ($tgt.parents(‘td’).length) {
  7. $thisCell = $tgt.parents(‘td:first’);
  8. }
  9. // now do something with $thisCell
  10. });
  11. });

Note that I had to account for the possibility of clicking in a child/descendant of a table cell, but this seems a small inconvenience for the great performance increase that event delegation affords.

you can find original post here : http://www.learningjquery.com/2008/03/working-with-events-part-1#

Tags: , ,
Posted in css, javascript | 1 Comment »

Creative Uses for PHP

May 6th, 2009

If you’re a familier with the word ‘PHP’ then here is some useful creative uses for it.

E-Commerce

E-commerce is one of the major uses for PHP. From a small business level to an enterprise level, businesses are always looking to create additional streams of revenue online. If you know how to integrate existing e-commerce solutions or build your own from scratch, this gives you a distinct advantage with your clients.

Beginners

Advanced Coders

· CodeIgniter

· CakePHP.

Graphical User Interface

If PHP is your favorite programming language, then you can use some of these PHP extensions to get you started creating GUI applications.

  • PHP GTK – This extension is a popular open source that implements the GIMP toolkit
  • ZZEE PHP GUI – A paid solution that allows you to turn your PHP scripts into Windows applications

Image Processing and Generation

Using the GD library with PHP, you can do more than just output HTML to the browser! You can output images in different file types including jpeg, png, and gif. This feature of PHP is useful because it allows you to create thumbnail pictures, add watermarks, resize and crop images, and even create a photo gallery!

Mailing Lists

You can write your own script to send e-mail newsletters to your client, or use a ready-made script. The PHP online documentation explains PHP mailing functions in more detail. There are also scripts you can download and install on your website:

Developing Facebook Applications

You can integrate Facebook with your website using PHP. If you have developed Facebook applications using another language or you would like to get started with PHP, the Facebook developer’s wiki can help you to get started.

Create Graphs and Charts

Do you need visual representations of numbers on your site? PHP can create graphs and charts too! Using Image_Graph, you can create up to fourteen different types of charts including pie charts, bar graphs,.

Generating PDF Files

The PDF format is Adobe’s proprietary file type for document exchange. Using a library called PDFLib, you can generate PDF files with PHP. This library is already included with PHP5; to access it, you need to uncomment the appropriate lines in your PHP configuration file. An example of why creating PDF files might come in useful is, if you were building an online invoicing application and you wanted to output an HTML-generated invoice in PDF format.

Parsing XML Files

PHP allows you to parse XML files. Parsing XML is an important feature of PHP 5 because not all browsers can output the contents of an XML file; so you can create a parser in PHP to facilitate this process. Using XML is important for RSS feeds, and also for data storage and rendering data on different devices – for example, cell phones use an implementation of XML called WML (Wireless Markup Language). Working with XML files in PHP is similar to handling the opening, closing, and reading of a file.

Content Management Systems

One of the most popular uses of PHP is creating or using Content Management System. A good CMS allows your clients to update their website and add content without any in-depth knowledge of HTML and CSS. You can use one of the widely available free or commercial solutions listed below:

Create Dynamic Website Templates

Using PHP, you can make it easier to add pages and elements to your websites dynamically. You begin by creating the HTML page and splitting it into the header, main content, and footer sections. Add the .php extension to your subsequent pages and use server-side Includes for the header and footer for each new page. You can also have dynamic sidebars and top navigation sections. As a matter of fact, the more “templated” your site is, the easier it is to update the content.

Building an Online Community

You can build your own PHP-driven online community, or choose from widely available scripts that you can implement into your website. Some popular ones include:

from kiran vadariya :)

Tags: , , , ,
Posted in database, drupal, javascript, joomla, php development, web design, web development | 1 Comment »

Charts and analysis for your site

May 6th, 2009

In this ever increasing era of web development, the facilities and features given by desktop application is also wanted and must given by the web application. Because of the business spread across the many places the web is also preferred now over the desktop applications.

Charts are for analyzing the data stored by the database of if any. Thankfully there is one open source library based on Prototype Framework of javascript is available named Protochart.

ProtoChart using Prototype and Canvas to create good looking charts. like
* Line, bar, pie, curve, mix, and area charts available

Overview
Documentation
Demo

Very fine work done by them, and use it with their tems and conditions

Posted in javascript, web development | 2 Comments »

WordPress for Designers Series

May 4th, 2009

WordPress is not only  a web technology by itself but excellent  combination of  HTML, CSS, PHP and jQuery.  The most popular blogging platform and one you’ve most likely heard of. When you’re ready to learn how to use WordPress, these tutorials will teach you what you need to know.

If you want to learn how to work with WordPress, one of the best places to start is by watching this series of screencasts. Okay, so this isn’t one tutorial but that’s what I’m calling it since it’s one big series covering one subject, WordPress. This series isn’t finished yet either so make sure you subscribe to the ThemeForest blog to keep up to date on new screencasts as they arrive

i have few links for you chk this

hope your enjoyed it :)

Tags: , , , ,
Posted in javascript, php development, web design, web development | 1 Comment »