Question

I have a simple link, like so:

<a href="page2.html">Go to Page 2</a>

I’d like that, when clicking this Button, it would go to the page and run a jQuery function, like so:

$("#object-selector div").hover(
    function () {
        $(this).animate({borderTopColor: '#fdcc06', borderRightColor: '#fdcc06', borderBottomColor: '#fdcc06', borderLeftColor: '#fdcc06'}, 200).children().animate({backgroundColor: '#fed944', color: '#351e00'}, 200);
    }, 
    function () {
        $(this).animate({borderTopColor: '#FFF', borderRightColor: '#FFF', borderBottomColor: '#FFF', borderLeftColor: '#FFF'}, 200).children().animate({backgroundColor: '#af081f', color: '#FFF'}, 200);
    }
);

But that function shouldn’t execute if the Page is navigated to without clicking the link. Is there a way to do it?

Answer 1

Perhaps there is a way of achieving this with PHP. By changing your href into this

<a href="page2.html?click=1">Go to Page 2</a>

and then including the following on your page:

<?php
if ($_GET['click']){

echo "<script type=\"text/javascript\">";
echo "
$(\"#object-selector div\").hover(
    function () {
        $(this).animate({borderTopColor: '#fdcc06', borderRightColor: '#fdcc06', borderBottomColor: '#fdcc06', borderLeftColor: '#fdcc06'}, 200).children().animate({backgroundColor: '#fed944', color: '#351e00'}, 200);
    }, 
    function () {
        $(this).animate({borderTopColor: '#FFF', borderRightColor: '#FFF', borderBottomColor: '#FFF', borderLeftColor: '#FFF'}, 200).children().animate({backgroundColor: '#af081f', color: '#FFF'}, 200);
    }
);
";
echo "</script>";
}
?>

Note that this will only work on a server with PHP installed, not on your local machine.