Amphee Web Tech Pvt. Ltd. » javascript

How CSS and JavaScript Are Different

kiran vadariya — Mon, 15 Nov 2010 06:06:47 +0000

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 “” 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:

$(document).ready(function() {
$(‘button.alert’).click(function() {
alert(‘this is an alert message’);
});
});

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

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:

$(‘#create-button’).click(function() {
if ( $(‘button.alert’).length <2) {
$(‘
}
return false;
});

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:

plain

special

plain

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:

$(document).ready(function() {
$(‘#list1 li.special button’).click(function() {
var $newLi = $(‘
special and new

$(this).parent().after($newLi);

});

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:

...

. Instead of attaching the .click() method to a button — $('#list2 li.special button').click(...) — we can attach it to the entire surrounding

bubbling

within

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:

$(document).ready(function() {
$(‘#list2′).click(function(event) {
var $newLi = $(‘
special and new

});

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

. 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 = $(‘
4. special and new
var $tgt = $(event.target);
if ($tgt.is(‘button’)) {
$tgt.parent().after($newLi);
}
// next 2 lines show that you’ve clicked on the ul
var bgc = $(this).css(‘backgroundColor’);
$(this).css({backgroundColor: bgc == ‘#ffcccc’ || bgc == ‘rgb(255, 204, 204)’ ? ‘#ccccff’ : ‘#ffcccc’});
});
});

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

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:

$(document).ready(function() {
$(‘table’).click(function(event) {
var $thisCell, $tgt = $(event.target);
if ($tgt.is(‘td’)) {
$thisCell = $tgt;
} else if ($tgt.parents(‘td’).length) {
$thisCell = $tgt.parents(‘td:first’);
}
// now do something with $thisCell
});
});

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#

Creative Uses for PHP

kiran vadariya — Wed, 06 May 2009 12:13:08 +0000

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:

PHP list

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

Charts and analysis for your site

kiran vadariya — Wed, 06 May 2009 04:35:24 +0000

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

WordPress for Designers Series

kiran vadariya — Mon, 04 May 2009 04:45:37 +0000

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