Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Javascript content load, screenview to resolve at top of the page

    Hi,

    I'm looking for help customizing some JavaScript. I'm primarily a web designer and I recently added some JavaScript to my portfolio website.

    http://www.revelae.com/spotlight.html

    When you click on the "more" boxes, the page loads in additional content.
    Everything works great, but I want the content to "load" while bringing the screenview back up to the top of the page after each click.

    I think this is a pretty quick fix, I just need to add something extra to my current JavaScript code. Any help on what to add is greatly appreciated!

    Here's the code:
    <script type="text/javascript">
    ajax.pages = new Array();
    ajax.pages["spotlight-main"] = "spotlight-main.html";
    ajax.pages["spotlight-royal-rompers"] = "spotlight-royal-rompers.html";
    ajax.pages["spotlight-trievas-spa"] = "spotlight-trievas-spa.html";
    ajax.checkHash = function()
    {
    var windowHash = window.location.hash.replace("#", "");
    windowHash = (windowHash == "") ? "spotlight-main" : windowHash;
    if(windowHash != ajax.currentHash)
    {
    ajax.setHash(windowHash);
    }
    }
    </script>


    -Katie

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I'm not sure what I'm supposed to be clicking - I can't click the word 'More..'.

    But I can't see that you have a method called setHash() that you are calling..?

    I note an error message "404, not found" for:

    Code:
    http://www.revelae.com/menu.html
    Have you uploaded this file correctly.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The idea is to click on the thumbnail image boxes below More... and the page content will change.

    The menu is an old file, not used anymore. Thanks for pointing that out. I've removed it.

    I'm not sure about the set hash thing, This is a 3rd party script, and I'm not to the point of being able to code JavaScript yet.

    I just want the content to load within the page (Which it currently does after clicking each More: thumbnail image) and bring the view to the top of the page, as the new content is displayed.
    Last edited by ktrevelae; 08-24-2012 at 02:17 AM.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Okay, I see that setHash is defined in the file swap.js.

    I suppose you can just scroll to the top of the page every time the page is (re)loaded. I understand that the following should/might work

    Code:
    function init(){
            $("#logobar").load("logobar.html");
            $("#footer").load("footer.html");
            $("#sidebar-right").load("spotlight-sidebar-right.html");
    		$("#side-breakout").load("side-breakout.html");
            $(window).scrollTop(0);
          }
          $(document).ready(init);
    But I'm not convinced that this will work - you'll need to try it.
    Last edited by AndrewGSW; 08-24-2012 at 02:28 AM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi,

    $(window).scrollTop(0); doesn't work because all those structural elements load on page load, and the page script loads the page content without reloading the page.

    I have tried using anchor tags to direct the page view on click, but the script either ignores the anchor tags or they break the page, depending on where placed.

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Try editing the file swap.js as follows:

    Code:
    // This is the core of the script, that actually loads the content for the link that has been clicked
    ajax.loadPage = function(hash)
    {
    	$("#sort").load(ajax.pages[hash] + " #sort", function () {
             $(window).scrollTop(0);
        });
    }
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    ktrevelae (08-28-2012)

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    .. if that works you might like:

    Code:
    // This is the core of the script, that actually loads the content for the link that has been clicked
    ajax.loadPage = function(hash)
    {
    	$("#sort").load(ajax.pages[hash] + " #sort", function () {
             $('html, body').animate({scrollTop: 0}, 'slow');
        });
    }
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #8
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you!!!!! It works great


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •