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: 8% [?]

Share This

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: 6% [?]

Share This

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: 8% [?]

Share This

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!