Let’s say I have a page where I display a list of links in my sidebar. But I also have other content I want to add in my sidebar and I don’t want to have to scroll down in order to see all the content I have there. What can I do to limit the size of my list of links? Oh, yes, I can use CSS and make the font size smaller. but I don’t want to do that, because I like the font-size like it is now. So what else can help me here…??

I know! I can use JavaScript! Cool! But if I use JavaScript, what would happen with my list of links when my page would be visited by someone that doesn’t have JavaScript enabled? hmmm… then I should use this technique called unobtrusive scripting. Ok, fine, I can do that! 

First, I should define my purpose: I want my list of links to show up as a DropDownList control for those having JavaScript enabled and also having the same functionality as it had before and to be displayed as a normal list for those that don’t have JavaScript enabled.

 The html markup for my list of links looks like this:

    <div id=”PageSidebarManager”>

        <div id=”ListContainer”>

            <ul id=”SIDEBAR_LIST_MENU”>

                <li class=”CAPTION”>

                    <p>Web sites</p>

                    <ul>

                        <li><a href=”http://www.seomegacorp.com/blog/Microsoft”>Microsoft</a></li>

                        <li><a href=”http://www.seomegacorp.com/blog/Adobe”>Adobe</a></li>

                        <li><a href=”http://www.seomegacorp.com/blog/Sun”>Sun</a></li>

                    </ul>

                </li>

                <li class=”CAPTION”>

                    <p>Search Engines</p>

                    <ul>

                        <li><a href=”http://www.seomegacorp.com/blog/Yahoo”>Yahoo</a></li>

                        <li><a href=”http://www.seomegacorp.com/blog/MSN”>MSN</a></li>

                        <li><a href=”http://www.seomegacorp.com/blog/Google”>Google</a></li>

                    </ul>

                </li>

                <li class=”CAPTION”>

                    <p>SEO</p>

                    <ul>

                        <li><a href=”http://www.seomegacorp.com/blog/Link baiting”>Link baiting</a></li>

                        <li><a href=”http://www.seomegacorp.com/blog/Black Hat”>Black Hat</a></li>

                        <li><a href=”http://www.seomegacorp.com/blog/White Hat”>White Hat</a></li>

                    </ul>

                </li>

            </ul>

        </div>

        <div id=”SidebarSelectorContainer”>

            <p class=”SelectorTitle”>Select: </p>

        </div>

        <div id=”SidebarUpdatePanel”>

            <p id=”textContainer” class=”ResultText”></p>

        </div>

    </div>

I have added some divs to wrap the content I’ll generate using JavaScript:

1. SidebarSelectorContainer - this div will wrap the paragraph and the generated DropDownList control
2. SidebarUpdatePanel - this div will wrap the paragraph that will display the selected item from the DropDownList.

Ok, I don’t quite need the last div, because when the user selects a menu item from the DropDownList I would redirect him to that specific page he requested, but for the sake of simplicity, I decided to just show some info in it.

At this point, I need the CSS markup, so my list of links would be displayed nicely on the page and also to hide (by default) the div I will be using in the script:

<style type=”text/css” media=”screen”>

 

DIV#PageSidebarManager { width: 500px; height: auto; margin: 50px auto auto 50px; padding: 5px 5px 5px 5px;}

 

/* JavaScript enabled */

DIV#SidebarSelectorContainer {

    display: none; /* will be made visible in script */

    width: auto; height: auto;

    text-align: left; vertical-align: middle;

    margin: 5px 5px 5px 5px; padding: 0 0 0 0;

}

P.SelectorTitle {

    float: left; margin: 3px 7px 0 3px; padding: 0 0 0 0;

    font-family: Georgia, Tahoma, ‘Times New Roman’, Serif;

    font-size: 10pt;

    font-weight: 800;

    color: #000000;

}

DIV#SidebarUpdatePanel {

    width: auto; height: auto;

    text-align: left; vertical-align: middle;

    margin: 5px 5px 5px 5px; padding: 0 0 0 0;

}

P.ResultText {

    margin: 3px 7px 0 3px; padding: 0 0 0 0;

    font-family: Verdana, Sans-Serif;

    font-size: 10pt;

    font-weight: 800;

    color: #696969;

}

 

/* JavaScript disabled */

                        /* SIDEBAR MENU */

UL#SIDEBAR_LIST_MENU { margin: 5px 5px 5px 0; padding: 0 0 0 0; }

LI.CAPTION { padding: 3px 0 3px 0; }

LI.CAPTION P {

    width: auto; height: auto;

    font-family: Georgia, Tahoma, ‘Times New Roman’, Serif;

    font-size: 12pt;

    color: #000000;

    margin: 0 0 0 0;

    text-indent: 5px;

}

/* SECOND LEVEL LIST */

UL#SIDEBAR_LIST_MENU LI UL { margin: 0 7px 0 7px; }

UL#SIDEBAR_LIST_MENU LI UL LI { }

UL#SIDEBAR_LIST_MENU LI UL A { color: #808080; }

UL#SIDEBAR_LIST_MENU LI UL A:hover { color: #000000; text-decoration: underline; }

 

</style>

Now I have one more question: Should I start scripting this by hand or I should use one of the multitude of free javascript libraries you can find over the internet? I could do it either way, but again, for the sake of simplicity I’ll choose the Core library (you can download it from here: Core library).

First thing first: import the script in the page.

Second, start writing my script. But, before actually starting it,  I’ll need two more Objects to make my work easier:

1. the Core.Browser - to differentiate the Internet Explorer browser from the others,
2. and the Core.DOM - to get the references to the objects I’ll need in my script.

Now I’m ready to write:     :  )

    <script id=”CreateSidebarMenu” type=”text/javascript”>

 

Core.Browser =

{

    UA: window.navigator.userAgent,

    isIE: function() { return (Core.Browser.UA.indexOf(“MSIE”) != -1); }

};

 

Core.DOM =

{

    getById: function(targetElement)

    {

        if (document.getElementById){ return document.getElementById(targetElement); }

        else if (document.all)      { return document.all[targetElement]; }

        else if (document.layers)   { return document.layers[targetElement]; }

    }

};

 

var SidebarMenuManager =

{

    init: function()

    {

        // get a reference to the main menu list ddl_container

        var list_container = Core.DOM.getById(“ListContainer”);

        // hide the main menu list ddl_container

        list_container.style.display = “none”;

 

        // get a reference to the selector’s ddl_container

        var ddl_container = Core.DOM.getById(“SidebarSelectorContainer”);

        // display the ddl_container

        ddl_container.style.display = “block”;

 

        // create the dropdownlist

        var selector = document.createElement(“select”);

        // Add the onChange event to DropDownList

        Core.addEventListener(selector, “change”, SidebarMenuManager.Selector_onChange);

 

        // get a reference to the main list ddl_container

        var mainList = Core.DOM.getById(“SIDEBAR_LIST_MENU”);

 

        // get a reference to the list captions

        var li_captions = Core.getElementsByClass(“CAPTION”);

        for (var c = 0; c < li_captions.length; c++) {

 

            var selectorCaptions = document.createElement(“optgroup”);

            selectorCaptions.label = li_captions[c].getElementsByTagName(“p”)[0].innerText ||

                                    li_captions[c].getElementsByTagName(“p”)[0].textContent;

            selector.appendChild(selectorCaptions);

 

            // get a reference to the second level list

            var secondLevel_list = li_captions[c].getElementsByTagName(“ul”)[0];

            // extract the links

            var links = secondLevel_list.getElementsByTagName(“a”);

            for (var s = 0; s < links.length; s++) {

 

                var optionLinks = document.createElement(“option”);

                var href = links[s].getAttribute(“href”);

                var text = links[s].innerText || links[s].textContent;

 

                if (Core.Browser.isIE()) { optionLinks.label = text; }

                else { optionLinks.text = text; }

 

                optionLinks.value = href;

                // add links in the optgroup

                selectorCaptions.appendChild(optionLinks);

            }

        }

 

        return ddl_container.appendChild(selector);

    },

    Selector_onChange: function(event)

    {

        // get a reference to the paragraph

        var text_container = Core.DOM.getById(“textContainer”);

        var textToShow = “”;

 

        if (Core.Browser.isIE()) {

            return text_container.innerText = “you have selected the “ + this.options[this.selectedIndex].label +

                                                ” list item and it points to: “ + this.options[this.selectedIndex].value;

        }

        else {

            return text_container.textContent = “you have selected the “ + this.options[this.selectedIndex].text +

                                                    ” list item and it points to: “ + this.options[this.selectedIndex].value;

        }

    }

};

Core.start(SidebarMenuManager);

    </script>

 I have now a totally unobtrusive list of links and more available space to use in the sidebar! *me happy now!*

If you’d like to test it, here’s the link: Unobtrusive list of links

===
note: I have only tested in IE7, opera 9, Firefox 2, Safari 3 on Vista OS.

Popularity: 6% [?]

Or CSS tables or how to display your data in an organized manner.

To get this result, you have to use tables because if you’re obsessed with floating divs and paragraphs they won’t help you much right now.

To get started I’ll show you the result first:

Now that we know how the result should look like let’s start doing it.
First thing first: the HTML markup:

<table id=”GridTable_1″ class=”x-GridTable” cellpadding=”0″ cellspacing=”0″>

 

<thead>

<tr>

<th class=”x-caption”>Column #1</th>

<th class=”x-caption”>Column #2</th>

<th class=”x-caption”>Column #3</th>

</tr>

</thead>

 

<tbody>

<tr>

<td class=”x-title”>

<a class=”x-link” href=”#”>Row title</a>

</td>

<td class=”x-description”>

<span class=”x-description”>Row description</span>

</td>

<td class=”x-content”>

<span class=”x-content”>Row content</span>

</td>

</tr>

<tr>

<td class=”x-title”>

<a class=”x-link” href=”#”>Row title</a>

</td>

<td class=”x-description”>

<span class=”x-description”>Row description</span>

</td>

<td class=”x-content”>

<span class=”x-content”>Row content</span>

</td>

</tr>

</tbody>

 

</table>

Now that we have the markup let’s start doing some styling:

<head>

<title>A Grid-like Table</title>

 

<style type=”text/css” media=”screen”>

 

BODY H1 {

width: 75%;

font-family: Georgia, Serif;

font-size: 16pt;

color: #8b0000;

margin: 25px 0 25px 25px;

border-bottom: solid 1px #8b0000;

}

 

TABLE.x-GridTable {

width: auto;

height: auto;

border-collapse: separate;

border-spacing: 0 0;

border: solid 1px #8B0000;

margin: 0 0 0 25px;

}

 

TABLE.x-GridTable TH.x-caption {

background-color: #EDEDED;

text-align: left;

font-family: Verdana, Sans-Serif;

font-size: 9pt;

color: #8b0000;

border-bottom: solid 1px #8b0000;

padding: 4px 0 4px 5px;

}

 

TABLE.x-GridTable TD {

width: 200px;

height: auto;

text-align: left;

vertical-align: top;

font-family: Verdana, Sans-Serif;

font-size: 8pt;

color: #000000;

padding: 4px 0 4px 0;

border: none 0;

}

 

TABLE.x-GridTable TR:hover TD {

background-color: #EDEDED;

color: #8b0000;

}

 

A.x-link, SPAN.x-description, SPAN.x-content {

width: auto; margin: 0 5px 5px 5px;

}

 

A.x-link {

color: #000000; text-decoration: none;

}

A.x-link:hover {

color: #FF0000; text-decoration: underline;

}

 

SPAN.x-description {

font-style: italic;

}

 

SPAN.x-content { /* Styling the row content here… */ }

 

</style>

</head>

What? You expected more coding? Well, sorry for disappointing you..
It is really that easy!

Now imagine doing this using floating divs or paragraphs or whatever you probably might think that will help you…

All you have to do is to add the :hover pseudo-class to the Table Row to specify how the cells inside that row should look like when hovered:

TABLE.x-GridTable TR:hover TD {

background-color: #EDEDED;

color: #8b0000;

}

If you’d like to see it in action, here is the link: A Grid-like table

Note:
This example was especially made for those lovers of divs and floating elements. You think tables are evil? Well, think again!

Popularity: 6% [?]

Defining Validation

If you are unfamiliar with Validation then you may about it by going through the definition:
Validation is process of refinement of HTML or CSS code and assurance to that coding is free from errors and making it as that it can meet the standards set by the W3 Consortium.

There are various types of validators used in which some may check only errors, others may suggest you about your code and tell what the way of writing code is.

Need Of validation:

There are many persons who are against the validation because of some of the reasons as:

• Validation does not always guarantee that page will work.
• It is time consuming process, because making every pages error free consumes much time.
• An average visitor does not see your page source code.

But, there are some reasons for adopting the validation of HTML and CSS codes some of them are:

1. It Helps in Resolving Compatibility Issues

There are various types of browsers used in the industry and there is a huge scope for new software’s and tools. So, the code should correct and compatible for all of the browsers and should be updated with technology and software coming in next era.

Validation of the XHTML, HTML and CSS codes does not always ensure the compatibility to the browsers but it propels you towards right direction. If you are still reviewing your files in multiple browsers but, since I am here dealing only with structure, the browser compatibility issue will not rear its ugly head as it will with CSS.

2. Increased Search Engine Visibility:

Google attract towards the well formed and well structured site. Here we may talk about the search engine spiders, they crawl through web and index the pages of your site and show visibility of your site in the search engines. So, you must use those attributes which may easily crawled by the search engine spiders. Use codes and content for your site as much possible. If you are using Image anywhere must use the title of image and tags in code will make it easy to crawl. So, the error free codes are important for your site for increasing visibility to search engines.

3. Learn Think and Apply:

Once you starting validating your files you’ll find the process to be an invaluable learning experience. Validation itself will teach you what the best ways to create your XHTML/HTML and CSS codes are. The more you use validation, the faster you’ll be able to create well-formed documents because you won’t be making the same mistakes over and over again.

Popularity: 5% [?]

Even if the internet is growing and evolving with each day not all ISPs grow and evolve with it. There are still many users having low internet connections (like dial-up) and often they are forced to turn off images and other features so their browser won’t take ages to load one heavy page.

If you have a heavy website with loads of images and content is always better to think about those that have low internet connections too. You can do that by creating an other, more accessible version of your website, just for them. If you care enough for Search Engine Optimization then you’ll have block the robots to access/index/archive the content of this new version so you’ll not be penalized or banned from Search Engines index.

Now, if you have set up that low version of your website you’ll have to think to a way to find out who has a low internet connection so you can redirect them accordingly. Well, there are two ways of doing this:

1. using server-side code
2. or using client-side code

For this example I’ll be using JavaScript (client-side code) and all you need is just a few lines of code:

1. first script included in the page header
2. and the second one at the end of your page content

The first script should be added right under the beginning of your page header (right after the <head> start tag) so it can be read and interpreted as fast as possible.

<head>

<script type=”text/javascript”>

 

var thisTimer = 0; // initialize a timer

var locationToRedirect = “http://google.com/”; // set the landing page

var timeToComplete = 30*1000; // Set the timeout.

 

 

alert(“Page has started loading. Starting the timer.”);

 

 

function redirectUser() {

alert(“Navigating away from this page.”);

clearTimeout(thisTimer);

return window.location.href = locationToRedirect;

}

 

// By default, the redirection function will be called after 30 seconds (30*1000)

thisTimer = setTimeout(“redirectUser()”, timeToComplete);

 

</script>

 

<title>Page redirection using javascript</title>

</head>

Now, the second part, at the end of your document (right before the closing of the body tag):

<body>

<div>

<p>Document content</p>

</div>

 

<script type=”text/javascript”>

alert(“You have reached the end of the document within the expected time.\n The timeout will be cleared.”);

clearTimeout(thisTimer);

</script>

</body>

In short, this scripts gives the browser a time frame of 30 seconds to completely load your page. If the browser cannot load the page within specified time, then you can consider that that user is having a low internet connection and you can safely redirect him to your low version of your website.

Popularity: 5% [?]

Cascading Style Sheet (CSS) is evolutionary development in the field of web development, CSS is a stylesheet language it is used to present that documents which are written in a markup language. It is applicable in the styling that web pages which are written in HTML and XHTML, but this language can be applied to any kind of XML document, including SVG and XUL.

CSS are used for separation of the stylistic page elements page which may be layout, color and fonts of the content of the web pages such as paragraphs and images. It is called the Separation of Content of site from Presentation.

If you have problem with understanding the CSS at all then you may not go for using it for your site. However I will suggest the CSS because many of advantages can be gained, not just for Google, are well worth the time invested in learning it. For an introduction to CSS see “Introduction To CSS”

CSS is better for Google because:

• CSS allows for smaller file sizes and good for these files.
• CSS always allows your greater and better control on the page structure.
• CSS provides you better control to hide unwanted content from browsers while it still gets picked up by Google.

CSS allows for smaller file sizes and good for these files

Take out styles of the HTML page and put them into a standalone style sheet file, by doing so you can reduce the overall amount and size of code in your web pages. Then pages contain less code and so have smaller file sizes and Google prefers those pages which has smaller file sizes and other search engines prefers them too.

There is no specific rule like it offered by Google but the search engine optimization community prefers that 100KB as good upper limit for page sizes of your site.

CSS always allows your greater and better control on the page structure

By applying CSS you can structure your all document of the page according to HTML standards without fear of compromising the style, look and feel of your web page. When use CSS it increases the value of your layouts too.

Google always rewards those pages which are well organized and structured, but many of the designers ignore standards and guidelines of CSS as much as possible, because they think that standards may lead to bland pages. By applying CSS, web designers may design more attractive and fair pages.

CSS allows you to hide content from browser while it still gets picked up by Google

You can apply dynamic CSS to hide some content from certain browsers. For example your page have such content which you want to appear on screen only at the time of print and not that time when any one not going for print, then you can use CSS at that place for hiding contents of page (such as page navigation). The advantage is that Google will still index all of the content and you will still get the benefit that content brings.

Popularity: 4% [?]

For that, all you need is a control to display your quote (in this example I have used a paragraph element) and a simple JavaScript script.

Let’s see how the HTML looks like:

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>Display randomly selected quote</title>

</head>

<body>

<div>

<p id=”quoteWrapper”></p>

</div>

</body>

</html>

Now, the script:

<script type=”text/javascript”>

 

var Quotes =

{

getRandomQuote: function()

{

var quote = [];

quote[0] = “When you have given nothing, ask for nothing.”;

quote[1] = “Good habits result from resisting temptation.”;

quote[2] = “If you bow at all, bow low.“;

quote[3] = “Examine what is said, not him who speaks.”;

quote[4] = “Make your bargain before beginning to plow.”;

quote[5] = “Don’t make use of another’s mouth unless it has been lent to you.”;

quote[6] = “Seize opportunity by the beard, for it is bald behind.”;

quote[7] = “Be not afraid of growing slowly, be afraid only of standing still.”;

quote[8] = “Do not employ handsome servants.”;

quote[9] = “Do not remove a fly from your friend’s forehead with a hatchet.”;

 

var maxLength = quote.length;

var position = Math.floor(Math.random() * maxLength);

return Quotes.displayQuote(“quoteWrapper”, quote[position]);

},

displayQuote: function(ctl, quote)

{

ctl = document.getElementById(ctl);

ctl.innerHTML = quote;

}

};

 

Quotes.getRandomQuote();

 

</script>

In the getRandomQuote function will be created the array that will hold the quotes and finally will call the displayQuote function which will add the randomly retrieved quote from the array in the selected HTML element.

If you’d like to see it in action, here is the link –> Random Quote.

Note:
If you don’t know how it works, just consecutively refresh the page

Popularity: 14% [?]

Letting the visitor to add the current visted page to his list of favorites websites or set it as home page might seem an easy task at first sight but let me assure you it’s not.

Let’s see why is that.

In the first place we’ll need two links:

1. one to add the page to favorites

2. and the other one to set the page as home page,

so we need a reference to their ID’s:

// Get a global reference to the objects needed in the script

var favLink = document.getElementById(“AddPageToFavorites_Link”);

var homePageLink = document.getElementById(“SetAsHomePage_Link”);

Next, we’ll create an Object, called “UserSpecifics” to hold the functions we need:

var UserSpecific =

{

……

};

The first function will check the existance of those two links and if they’re found then the “click” event will be attached to them.

init: function()

{

// Check the existance of the required objects

if (!favLink || !homePageLink) { return null; }

else {

Core.addEventListener(favLink, “click”, UserSpecific.favLinkClicked);

Core.addEventListener(homePageLink, “click”, UserSpecific.setAsHPLinkClicked);

}

},

The following three functions will use to accomplish this task:

1. the first one will return the location of the current visited page:

// <summary>

// <description>Gets the current page location.</description>

// </summary>

getCurrentLocation: function() {

return window.location.href;

},

2. the second one will add the page to favorites:

// <summary>

// <description>Adds a page to favorites.</description>

// </summary>

addPageToFavorites: function() {

var title = document.title, location = UserSpecific.getCurrentLocation();

if (document.all) {

window.external.AddFavorite(location, title);

}

else if (window.sidebar) {

window.sidebar.addPanel(title, location, “”);

}

},

3. the third one will set the page as home page:

// <summary>

// <description>Sets as Home Page the current visited page.</description>

// </summary>

setAsHomePage: function() {

var location = UserSpecific.getCurrentLocation();

homePageLink.style.behavior = “url(#default#homepage)”;

homePageLink.setHomePage(location);

},

Next, we’ll handle the “click” event handlers we’ve set earlier:

1. for the “favLink” link:

favLinkClicked: function(event)

{

UserSpecific.addPageToFavorites();

Core.preventDefault(event);

},

2. for the “homePageLink” link:

setAsHPLinkClicked: function(event)

{

UserSpecific.setAsHomePage();

Core.preventDefault(event);

}

Initializing our Object:

Core.start(UserSpecific);

So far so good, now let’s see the bad part:

You’ll notice this script will work as expected in Internet Explorer browser but not in Safari or Opera. In Mozilla-based browsers you can’t use the set as home page function, only the add to favorites one. I checked the Mozilla forums to see if they found a solution to this problem but couldn’t find one, so it seems this is an internal Firefox, Netscape… bug.

Let’s hope the next version of Firefox will fix this problem.

**Testing:
If you’d like to test this script, follow this link: AddPageToFavorites.

**Note
This script uses the Core Javascript library. You can download it by following this link.

Popularity: 10% [?]

Creating an unobtrusive website is not an easy task, it requires deep knowledge of the web technologies involved in creation of a website, like CSS, XHTML, XML and of the programming language the developer choses to use, like PHP, VB.NET, C#.

Doing it unobtrusively means doing it the right way, because it forces the web developer to keep the web layers separate, that is not messing the page content with inline styling or javascript.

The three layers of web are: Continue reading →

Popularity: 7% [?]

Nowadays, many web developers choose the easiest way just to finish their daily task in time, and that’s a bad approach because we, the visitors of their clients’ websites, will suffer the consequences of their “work“.

You’re probably asking now why, or how, right? Well, let’s see:

- When their boss comes to their office and tells them that there’s a client demanding his e-commerce website done in less than 1 month they’re not going to waste any minute thinking about how to create a better website for that client. They will just start working like robots, searching the Internet for quick and cheap solutions to implement in their client website, not thinking for a moment about security or anything alike.

Continue reading →

Popularity: 6% [?]

Core is a simple and neat javascript library created by Kevin Yank and Cameron Adams to help beginners learn javascript.

This library was released along with the “Simply Javascript” book (published by SitePoint).

I have read that book and I must say that this book is the best book for beginners I have ever read! Kevin and Cameron have an amazing writing style and you’ll have no sleep until you haven’t finished reading this book!From the first pages you’ll realize the final purpose of this book: creating unobtrusive scripting!