Archive for the 'Javascript/DHTML' Category

Difference between tables/CSS based websites

Thursday, July 6th, 2006

1. CSS will reduce the download time of a webpage. For e.g. If a website has 400 pages, the layout of all the pages can be controlled in a single CSS file

2. Changes can be done easier and it will get reflected on all the pages. For e.g. if the font style of the footer needs to be changed, then it can be done in CSS file.

3. Search Engine crawlers have a much easier time reading CSS layouts. This results in better search engine ranking because the crawlers have an easier time navigating the site.

4. It makes redesigns more efficient and less expensive. Page constructed using CSS saves more bandwidth.

5. In case of CSS based sites the design is usually held in one or more external files, but that is not the way the tables based sites will work, the design will be taken care in all the pages of the site.

6. By using CSS you’re actually front loading the design, rather than spreading it evenly across the site. The means that the first page you hit can actually take longer to download than the equivalent table based page. Once the styles have been downloaded, they will usually be cached and not need downloading again. However the first page on a site is the one page that you really don’t want to see such a performance hit.

Difference between <div> and <span>

Monday, July 3rd, 2006

<div> tags are block elements that allow you to position elements contained within them
<span> tags are NOT block elements (inline elements)

<div> tags create line breaks
<span> tags don’t create line breaks

If you have a line wrapped in a span tag and it goes to a second line, it will not carry the attributes applied to it to the second line. Because a div tag is block level, it can be use similarly to a paragraph or header tag.

<div> tag will allow you to create blocks of contents (like table-based Web designs) and position elements on the screen
<span> tag used to apply specific formatting styles to text in the middle of sentence, or in one place on your Web Page.
In Otherwords
<div> tag is for a block of text
<span> tag will only effect one line of text

DHTML and DOM

Tuesday, June 27th, 2006

Without a Document Object Model (DOM), DHTML would not be possible. The DOM represents the hierarchy of elements on the page and their properties plus the way the browser lets you access and modify those elements. An ideal DOM would enable you to access and manipulate any page element. While similar, Navigator and IE use different DOMs. The World Wide Web Consortium says it this way:”The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.”
In actual practice then, the DOM is a mix of objects and interfaces that are always there and page-specific objects that are defined by the presence of various HTML tags.

The DOM starts with a Document object, which represents an HTML page. Beneath that object are elements like images, forms, and links. All of those page components are accessible through JavaScript as elements in arrays stored as properties of the Document object.

Navigator 4.x and IE 4.x+ have different DOMs, but both start with a core subset that is common between them. That subset is largely the model enabled by the HTML 3.2 specification and is known as the Level 0 DOM. It describes the basic page elements, like forms and images, that have been dynamically changeable since Navigator 3.x.

DHTML overview

Tuesday, June 27th, 2006

DTHML is the combination of HTML, Cascading Style Sheets (CSS), and CSS-Positioning (CSS-P), and JavaScript.A typical DHTML application (a Web page or set of Web pages) is made up of some elements created with standard HTML codes, formatted with Cascading Style Sheets, and probably positioned on the Web page with CSS-P, that are then manipulated with JavaScript. DHTML effects can be done using the following components
HTML — create the elements of the page
CSS and CSS-p — Format their appearance and placement
Javascript — create DHTML effects by modifying those CSS and CSS-P Properties

To work with elements in a dynamic fashion, they must exist as discrete elements of the page. Images, for example, exist as objects within the page: if unnamed, as elements of the document.images[] array; if named, as properties of the Document object. For example, consider the following HTML code. It defines a very simple Web page that displays one image and some text.

<HTML>
<BODY>
<IMG xsrc=”myimage.gif” mce_src=”myimage.gif” NAME=”myhouse”><BR>
This is my house.
</BODY>
</HTML>

Your script could refer to the image as either document.images[0] or document.myhouse. The image exists as an addressable element on the page. However, the text is just part of the page. In its current form, you will not be able to access it or manipulate it with your scripts. Instead, consider the following code:

<HTML>
<BODY>
<IMG xsrc=”myimage.gif” mce_src=”myimage.gif” NAME=”myhouse”><BR>
</BODY>
</HTML>

In this second example, the text is said to be in a container (a DIV, in this case). With this change, your scripts will now be able to access and manipulate the text. In most cases, you will encounter a further requirement that the container be positioned either absolutely or relatively with CSS-P.

If you have worked with CSS formatting, you surely have experienced the troubles of applying styles if the page elements are not within containers of some sort. CSS formatting requires the same sort of containment of elements as does DHTML.

Many old-time HTML coders (including the author) are used to using what are now considered lazy programming techniques. For example, prior to HTML 4.0 the most common way to separate paragraphs of HTML text was with a single <P> tag (omitting the </P> closing tag). Such practices make CSS and DHTML difficult if not impossible.

(Note: You should enclose all your text and elements that you plan to manipulate with DHTML effects within <DIV> or <SPAN> containers.)

Is that referrer function works in Popup Window??

Wednesday, March 22nd, 2006

Referrer function wouldn’t work in Internet Explorer Popup, but it
will works fine in Mozilla firefox. Lets take an example of PHP
script. Script “a.php” inturn calls the script “b.php”. “b.php” will
open in a popupwindow, if use $_SERVER[’HTTP_REFERER’] in the b.php it
won’t return the referer as “a.php” (in Internet Explorer). The same
works fine in Mozilla firefox.

To work the same fine in Internet Explorer also use “window.opener.location”