Question

I am having some problems getting my JS/JQ to fire in HTML5 page.
Basically I would like to check if the following ID exists and the following class:

ID: page_blog

CLASS: page current

<section class="page current" id="page_blog" style="z-index: 99; left: -50px;">
...
...
...

If they exist then redirect after 2-3 seconds changing the H1 to say

Loading…

<h1><button data-target="home" data-target-activation="click" class="back backwards"></button>Loading...</h1>

This is what i have so far:

<script type="text/JavaScript">
        $(document).ready(function () {
            $('li#blogLink.tile').click(function (e) {
                e.preventDefault(); //will stop the link href to call the blog page

                setTimeout(function () {
                    alert("this has worked");
                    //window.location.href = "http://www.site.co.uk/blog/"; //will redirect to your blog page (an ex: blog.html)
                }, 2000); //will call the function after 2 secs.

            });

        });
</script>

I have the following in my page now:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("jquery", "1.7");
    </script>



<script type="text/JavaScript">
    $(document).ready(function () {
            if ($(".page.current").length) { // section exists

                $("h1").text("Loading...");
                setTimeout(function () {
                    window.location.href = "http://www.website.co.uk/blog/";
                }, 2000);
        });

</script>

But the check to see if the class/id exists isnt firing?

Answer 1

Try this:

$('li#blogLink.tile').click(function (e) {
    e.preventDefault();

    if ($("#page_blog.page.current").length) { // section exists
        $("h1").text("Loading...");
        setTimeout(function() {
            window.location.href = "http://www.site.co.uk/blog/";
        }, 2000);
    }   
});

Example fiddle

Also it’s worth mentioning that your selectors are overkill. There should only ever be 1 unique element with the id #page_blog and #blogLink, so including the tag and classes on the selectors for them is redundant code.