SEO MegaCorp News Blog
 

Javascript's Archives

posted in 8 Jan, 2008 by Costin Trifan  

Page Redirection Using Javascript

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

Share This

posted in 6 Jan, 2008 by Costin Trifan  

Display Random Quote Using JavaScript

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

Share This

posted in 26 Dec, 2007 by Costin Trifan  

Set The Page As Home Page Or Add It To Favorites

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

Share This

posted in 10 Dec, 2007 by Costin Trifan  

Write better code (part 1)

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

Share This

posted in 5 Dec, 2007 by Costin Trifan  

The Core Extended javascript library

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).

Simply JavaScript Book 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!

“

Continue reading →

Popularity: 8% [?]

Share This