CODEWITHSUNDEEP
javascriptjqueryajaxtemplates
f1nn
f1nn

Reputation: 7057

JS - a few questions about complete AJAX web-site - GoogleBot, optimization, templates

I'm writing full AJAX-based website. Now I'm doing page navigation and content showing without page reloading. That's how I've decided to do it:

<html>
<head>
    <!--CSS-->
        .hidden {display:none;}
</head>
<body>
    <!--Menu bar-->
    <a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage1(); return false;">Page1</a>
    <a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage2(); return false;">Page2</a>
    <a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage3(); return false;">Page3</a>

    <!--Content blocks for different pages-->
    <div class="current" id="page1">
        <!--Page 1 content-->
    </div>
    <div class="hidden" id="page2">
        <!--Page 2 content-->
    </div>
    <div class="hidden" id="page3">
        <!--Page 3 content-->
    </div>

    <!--JS for managing pages links-->
    <script>
        $(document).ready(function() {
        });
        function loadPage1() {
            $('.current').hide();
            $('#page1').show().addClass('current');
        };
        function loadPage2() {
            $('.current').hide();
            $('#page2').show().addClass('current');
        };
        function loadPage3() {
            $('.current').hide();
            $('#page2').show().addClass('current');
        };
    </script>
</body>

1)First of all we are showing page1 block with class "current" and the others blocks have class "hidden" 2)When we click loadPage2(), we find currently active block (by it's class "current") and hide it, and the show page2 block.

NB. I have to use additional class hidden for the first page-block because $(document).ready(function() {$('#page2').hide();$('#page3').hide();}); seems to be slower a bit and user may notice something strange before the page loads completely.

Although my solution works, there are some problems:

*1)*Actually, for JS-disabed users, I still have to do real pages, just with different start-blocks shown. It means I will have to do a lot of similar pages with one difference - hidden and shown different start-blocks. If Google crawl my site, won't it consider my site as content-doubling and ban it?

*2)*For example, page 2 has large image. When page starts - it's hidden. However it will take a lot of time to load it even it won't be shown at first. How to manage it? Load content-on-demand? I mean ещ create 6 template text-files, and when user requests a page, JS loads a page content from file and places it into div?

May seem a bit messy, but thanks in advance!

Upvotes: 0

Views: 229

Answers (1)

timu
timu

Reputation: 838

Firstly i recommend you to read the documentation for crawlable Ajax pages here
https://developers.google.com/webmasters/ajax-crawling/

And for your example its bad practice, Google dont likes onclick="loadPage1(); return false; in links

<a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage1(); return false;">Page1</a>
<a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage2(); return false;">Page2</a>
<a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage3(); return false;">Page3</a>

its better 

<a href="link_to_real_page_for_JS-disabled-users" data-page="#page1">Page1</a>
<a href="link_to_real_page_for_JS-disabled-users" data-page="#page2">Page2</a>
<a href="link_to_real_page_for_JS-disabled-users" data-page="#page3">Page3</a>

And modify your script code like this 

<script>
//$(document).ready alternative
$(function () {
    //cache links so you can access faster for later use.
    var $links = $("a[data-page]").on("click", function (e) {
        var $this = $(this),
            page = $this.data("page");
        $(page).addClass("current")
            .siblings("div.current").removeClass("current").hide()
            .end().show();
        e.preventDefault();
    });
});
</script>

You can optimize code more, and by the way i didn't test the code.

Upvotes: 1

Related Questions