1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Redirect if a link is already visited...

Discussion in 'HTML & JavaScript' started by kimkils, Feb 4, 2010.

  1. kimkils

    kimkils Power Member

    Joined:
    Jan 10, 2009
    Messages:
    663
    Likes Received:
    225
    I've been tinkering around with getting browsers history based upon the link colour of various sites. For example Amazon, i want javascript which will "do something" if the person has been to amazon.com before. I have this code from HERE

    It works... kinda... however i'm quite new to javascript so want something dead simple to do what i want!

    I've come up with the following:

    HTML:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Testy Testy Tesy</title>
    
    
    <style>
    
    #test a:link
    	{
    		color:#0000FF;
    	}	
    
    #test a:visited
    	{
    		color:#FF0000;
    	}
    
    </style>
    
    
    <script type="text/javascript">
    	if(test.getStyle('color') == '#FF0000')
    	{
    		alert("hi");
    	}
    
    	if(a.getStyle('color') == '#FF0000')
    	{
    		alert("hi");
    	}
    		
    </script>
    
    </head>
    
    <body>
    
    <div id="test">
    
    	<a href="http://www.amazon.com>Amazon</a>
    	
    </div>
    
    </body>
    </html>
    Not surprisingly it doesn't work lol Until i get a book to work through this is driving me insane, im not used to javscripts analness, im used to Visual Basic taking me by the hand and saying "change this to this to make your code work" lol

    If someone can help it'll help your reputation!!!!!
     
  2. TheGoat

    TheGoat Registered Member

    Joined:
    Oct 1, 2009
    Messages:
    70
    Likes Received:
    85
    I've actually used something similar before so whipping this up only took a few minutes. :)

    Now I know you want a light weight solution for this, but there really isn't one. The getStyle function that was used on that page is not actually a built in JS funtion, so you need to define it. That's why the author mentioned how he used Mootools (a bloated JS framework). You don't need all of Mootools, you just need a basic getStyle function. (which I have provided).

    Also, I don't think the code in that example takes into consideration browser compatibility issues, as different browsers treat the css color attribute differently. In fact, I couldn't get it to work in FF 3.5.7 (ubuntu).

    I quickly tested it in FF 3.5.7 and IE 8, and I believe the code below should work on most browsers, but I'm not 100% about that.

    Here is your new code
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Example</title>
    
    <style type="text/css">
    
    a#test_amazon {color: #6699ff}
    #test_amazon:visited {color: #330000}
    
    </style>
    
    <script type="text/javascript">
    
    function getStyle(el,styleProp)
    {
        var x = document.getElementById(el);
        if (x.currentStyle)
            var y = x.currentStyle[styleProp];
        else if (window.getComputedStyle)
            var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
        return y;
    }
    
    
    function checkStyle()
    {
        if (!document.createElement)
        {
            // not compatible with your browser
            return;
        }
        var y = getStyle('test_amazon','color');
        // alert('color = ' + y);
        if (y == 'rgb(51, 0, 0)' || y == '#330000')        // we need to do this for cross browser compatibilty
        {    // visitor has been to amazon before  
            alert("looks like you have allready been to Amazon");
        }
        else    // visitor has not been to amazon
        {
            alert("you have never been to Amazon ");
        }
    }
    </script>
    
    </head>
    
    <body onload="checkStyle()">
    
    <a id="test_amazon" href="http://www.amazon.com/">Amazon</a>
    
    </body>
    
    </html>
    Just a few notes on this:

    - You can change the visited color to whatever you want, but you should probably pick a color that is in the 216 color pallet. You should use lower case characters and make sure to change the color in the internal css as well as in the JS code. In the JS code you also need to include the RGB color code ( ie rgb(51, 0, 0) ). You can goto http://www.visibone.com/colorlab/ and they have a great 216 color wheel that shows both HEX and RGB color codes.

    - Since the getStyle function uses the getByElementByID function (there is no getByElementClass), and you can only use an id once on a page, this example will currently only work for one site (ie Amazon). It can be altered to use multiple urls, but it would be a little more complex.

    - Keep in mind that this will only tell you if the user has been to ''http://www.amazon.com/". Any variation of that url like 'http://www.amazon.com/books/' or whatever will not be recognized. I know of a more advanced JS history sniffer that could be coded to check for just the domain, but that's a hell of a browser hack.

    And here's a little tip, if you combine something like this with a little AJAX and pass the results to PHP, there are some really crazy things you can do with this sort of information. :cool:

    Hope it helps :D
     
    • Thanks Thanks x 1
  3. kimkils

    kimkils Power Member

    Joined:
    Jan 10, 2009
    Messages:
    663
    Likes Received:
    225
    Thank you very much for the detailed explanation and code, i will give it a test run and try it out! :D Feel free to PM me your paypal :)