Grow your CSS skills. Land your dream job.

Anchor Problem, and a question about Privacy and T & C page.

  • # January 29, 2013 at 12:55 pm

    Anchor Problem

    This is in reference to two pages

    1. (http://fiveonline.info/adverk/services.html “”)
    2. (http://fiveonline.info/adverk/index.html “”)

    Now, I’ve used the javascript


    $(document).ready(function(){
    $('body').plusAnchor({
    easing: 'easeInOutExpo',
    offsetTop: -20,
    speed: 1000,
    onInit: function( base ) {

    if ( base.initHash != '' && $(base.initHash).length > 0 ) {

    window.location.hash = 'hash_' + base.initHash.substring(1);

    window.scrollTo(0, 0);

    $(window).load( function() {

    timer = setTimeout(function() {

    $(base.scrollEl).animate({
    scrollTop: $( base.initHash ).offset().top

    }, base.options.speed, base.options.easing);
    }, 2000); // setTimeout

    }); // window.load
    }; // if window.location.hash

    } // onInit
    });
    });



    To have the anchors in the services page scroll to he appropriate div id within the page. Now, I've planned to link the six banners on he home page to each service block, but I want to make the user reach directly/jump to the target div instead of being scrolled to the target div,when the link's clicked from the home page (click on the first banner link on the home page, you'll see what I mean). The javascript uses the hash symbol for scrolling and unfortunately, the same symbol is used if we wish to access that particular block from a different page. Is there a solution or an alternative to this problem?

    Privacy Policy and T & C page

    I've noticed that the T& C's page and the Privacy page is always sparingly styled, and never contains images - this is true even for fashion websites. Is this a rule? Requirement? My client's asking me to use fancy images for these pages too. so
    (a) Is there a rule that mandates the absence of any fancy styling?

    (b) What would be the best way to convince my client against using fancy styling?

    # January 30, 2013 at 1:35 pm

    Hmmm… tested in Safari, but it does not scroll at all (from homepage using the second banner (Graphic design).

    But, maybe you can use a empty div just above the headline… and bypass the hash name in javascript? Just thinking loud. Like this test:
    (http://codepen.io/Magnusvb/pen/vDhJz)

    magnus

    # January 31, 2013 at 1:19 am

    > Hmmm… tested in Safari, but it does not scroll at all (from homepage using the second banner (Graphic design).

    Do you get directly led to the target without the anchor scrolling? Because I’ve tested in all three browsers – Chrome , FF and Safari, and when I click on the banner, I get to the top of the services page, and then after a few seconds , I get scrolled towards the target. I want the scrolling to only happen internally. When I access a target from an external page, I want the user to be taken directly to the target without any scrolling.

    > But, maybe you can use a empty div just above the headline… and bypass the hash name in javascript?

    How do I do this? I tried several combinations(Please note:I hardly know JS; I just rely on trial and error and some basic logic without any real understanding of the language), and it just won’t work.

    I did use another anchor (#homanca) for testing purposes,to the right of the Branding & advertising div- the problem is that the js is making every ‘#’ symbol scroll.

    # January 31, 2013 at 7:30 am

    > When I access a target from an external page, I want the user to be taken directly to the target without any scrolling.

    [Made some tests with the PlusAnchor js ](http://bramdeh.home.xs4all.nl/playground/anchorlinks/index.html) , and when I remove the options from the codeblock and have just the bare essentials:

    $(‘body’).plusAnchor({
    easing: ‘easeInOutExpo’,
    speed: 1000
    });

    Works in Chrome, and Firefox, but not in Safari. ( One has to click the top header title to go back to the index-page ).

    Don’t know enough about javascript to find out why this is, but
    [can make it work](http://bramdeh.home.xs4all.nl/playground/anchorlinks/localscroll-index.html) with a different plugin, [localscroll](http://flesler.blogspot.nl/2007/10/jquerylocalscroll-10.html) as an alternative.

    Have a different question myself: Does anyone know any other way to set navigation links in a ‘selected’ mode, when targeting a anchor link on a different page, instead of the [hashchange plugin](http://benalman.com/projects/jquery-hashchange-plugin/) (which is awesome btw) that I use here in my tests? Anything: other javascript, or combination of server-side, PHP ed.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".