How to call different URL's in same page in parallax site in HTML

Question

I have a site of HTML pages. It is a one page site. All topNavigation is on the same page. Onclick of any of the links it takes me straight down to that link. I want whenever any link is called, in URL also it should take the page name. Please find some code related to it. As I am new to it, unable to find the exact solution.

<nav id="menu-wrap" class="menu-back cbp-af-header">
<div class="container">
    <div class="sixteen columns">
        <script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/14060/azcarbon_2_1_0_VERT"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script>
        <div class="logo"></div>
        <ul class="slimmenu">
            <li>
                <a href="torq" data-ps2id-offset="100">home</a>
            </li>
            <li>
                <a is="pushstate-anchor" href="/about" title="About Page" state='{"message":"New State!"}' data-gal="m_PageScroll2id">About</a>

            </li>
            <li>
                <a is="pushstate-anchor" href="/work" title="work Page" state='{"message":"New State!"}'>work</a>
            </li>
            <li>
                <a is="pushstate-anchor" href="/services" title="services Page" state='{"message":"New State!"}'>services</a>
            </li>
            <li>
                <a is="pushstate-anchor" href="/contact" title="contact Page" state='{"message":"New State!"}'>contact</a>
            </li>
        </ul>
    </div>
</div>

The above click calls the below section of services

<section class="services" id="services">
<div class="container">
    <div class="sixteen columns">
        <h1>services</h1>
    </div>
    <div class="sixteen columns">
        <div class="sub-text-line"></div>
    </div>
    <div class="sixteen columns">
        <div class="sub-text link-svgline mrg">
            Our endeavor is to integrate marketing objectives with the latest <a href="#work" data-gal="m_PageScroll2id" data-ps2id-offset="65">interactive technology platforms<svg class="link-svgline"><use xlink:href="#svg_line"></use></svg></a> to <a href="#work" data-gal="m_PageScroll2id" data-ps2id-offset="65">build a digital experience<svg class="link-svgline"><use xlink:href="#svg_line"></use></svg></a> in the following areas
        </div>
    </div>
    <div class="clear"></div>
</div>
<div class="portfolio-ser"></div>
<div class="expander-wrap-ser relative">
    <div id="expander-wrap-ser">
        <p class="cls-btn"><a class="close-ser" id="hide-ser">X</a></p>
        <div class="expander-inner"></div>
    </div>
</div>
<div class="clear"></div>
<div class="services-icons-wrapper">
    <div class="container">
        <div class="one-third column services-icon-padding">
            <a class="expander-ser" href="unlock_online_visibility_services.html" title="">
                <div class="icon-services">
                    <img src="images/lock.png"></div>
                <h6>Unlock Online Visibility</h6>
                <p>For us SEO is not about optimising content on webpages. It’s more about optimising for everything on the web</p>
            </a>
        </div>
        <div class="one-third column services-icon-padding">
            <a class="expander-ser" href="OpenUp_online_conversation_services.html" title="">
                <div class="icon-services">
                    <img src="images/callout.png"></div>
                <h6>Open Up Online Conversation</h6>
                <p>We combine the power of social media with marketing to create meaningful online conversations for brands</p>
            </a>
        </div>
        <div class="one-third column services-icon-padding">
            <a class="expander-ser" href="manage_brand_image_online_services.html" title="">
                <div class="icon-services">
                    <img src="images/fengshui.png"></div>
                <h6>Manage Brand Image Online</h6>
                <p>Our Online reputation management helps brands provide online makeovers</p>
            </a>
        </div>
        <div class="clear"></div>
        <div class="one-third column services-icon-padding">
            <a class="expander-ser" href="targeted_online_media_campaigns_services.html" title="">
                <div class="icon-services">
                    <img src="images/target.png"></div>
                <h6>Targeted Online Media Campaigns</h6>
                <p>We plan, conceptualize and execute comprehensive
                    <br />
                    online ad campaigns </p>
            </a>

        </div>
        <div class="one-third column services-icon-padding">
            <a class="expander-ser" href="drive_brands_OntoNew_mediums_services.html" title="">
                <div class="icon-services">
                    <img src="images/segway.png"></div>
                <h6>Drive Brands Onto New Mediums</h6>
                <p>We develop social, interactive and mobile and tablet applications to power up the brand in
                    <br />
                    consumer's minds</p>
            </a>
        </div>
        <div class="one-third column services-icon-padding">
            <a class="expander-ser" href="shape_OnlineIdentity_services.html" title="">
                <div class="icon-services">
                    <img src="images/spinner.png"></div>
                <h6>Shape Online Identity</h6>
                <p>Our web site development service provides brands a unique online space. Our services include includes, ideation to execution, we design, promote and host brand’s web requirements</p>
            </a>
        </div>
        <div class="clear"></div>
    </div>
</div>
<div class="clear"></div>
<section class="parallax-section">
    <div class="clear"></div>
    <div class="parallax-2"></div>
    <div class="just_pattern_parallax"></div>
    <div class="container z-index-pages">
        <div class="sixteen columns" data-scroll-reveal="enter top move 300px over 1s after 0.1s" data-scroll-reveal-id="8" data-scroll-reveal-initialized="true" data-scroll-reveal-complete="true">
        </div>
    </div>
    <div class="clear"></div>
</section>
<div class="clear"></div>

I want that URL without that # tag. Please help.

This might [help](http://css-tricks.com/snippets/jquery/smooth-scrolling/) — Benjamin, Sep 04 '14 at 15:12
@Benjamin: I also want, whenever any link is clicked, the page name should be called in URL without # tag. I am getting with # tag. but unable without # tag — , Sep 04 '14 at 15:14
Something like [this](https://7ba2033f4aa22999a563cd9acbe349bfdfa70ad4.googledrive.com/host/0B6a_65Wj-GWMNVNSUmFsUUxLLXM/) — Benjamin, Sep 04 '14 at 15:16
you should look into HTML5 History API to change the URL in the addressb bar — Michael, Sep 04 '14 at 15:19
@Benjamin: Whenever I click on any link, Ex: Services from the above code which is parallax design. it should take me to that section and at the same time the url also should mention its name ie sitename/services — , Sep 04 '14 at 15:21
Many! I've fond Mozilla Developer Network to be concise and to the point when it comes to Javascript - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history — Michael, Sep 04 '14 at 15:26
You are looking for the one @Michael just posted thats interesting give it a peek. — Benjamin, Sep 04 '14 at 15:29
@Shrutika once you block down your codes let me know I am curious as well how this is gonna happen. — Benjamin, Sep 04 '14 at 15:35
@Shrutika u finally found something for you [check this one](http://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-the-page) — Benjamin, Sep 04 '14 at 15:39
Check here: http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/ — mdance, Sep 04 '14 at 16:05

mdance · Answer 1 · 2014-09-09T14:20:57.430

2

If I understand your question correctly, you need to use HTML5 Push State.

Something like (assuming you are using jQuery - you tagged it in the post):

    $('a').on('click', function(event) {
        event.preventDefault();

        var title = $(this).attr('href');
        window.history.pushState(“”, title, "/" + title);
        $('html, body').animate({
            scrollTop: $("#" + title).offset().top
        }, 2000);
    });

I added a bit more code. Something like that should work (not tested). It will get the title from the clicked anchor. It will then set the title in the URL to the href of the element clicked, and scroll to that element whos id is the same as what was in the anchors href.

edited Sep 09 '14 at 14:20

answered Sep 04 '14 at 16:21

mdance

966
5
16
36

How it will recognize for the other anchor ID's ? that's my question. on anchor tag will it get for section. – Sep 05 '14 at 07:54
1

the url is getting change, but it does not take me to the respective section. Also on page refresh, the home page dissapears. Please see the jsfiddle for your reference. http://jsfiddle.net/6b6psfbo/ – Sep 05 '14 at 10:21
I implemented your code, but still that is not taking me to that section. Please see my jsfiddle how the code has been done. I want onclick of services from nav it should take me to the service section on the same page. http://jsfiddle.net/6Lcaojq6/ – Sep 06 '14 at 11:01
Please post your code in your question. I don't have access to jsfiddle where I'm at. – mdance Sep 08 '14 at 18:37
Can we have discussion on chat. – Sep 09 '14 at 07:35
I have updated the code in Question section for your reference. As in the comment section it was unable to post. Please let me know if you need anything. – Sep 09 '14 at 07:44
First, you need to remove the "/" in the href of the links. I corrected a couple of things in my code to accommodate that. Second, in order for it to actually scroll, you need to give the elements that you want to scroll to an id that matches the corresponding href of the link clicked. – mdance Sep 09 '14 at 14:18
Example: Click `Go to SEO section!` will take you to section: `
Section about SEO!!
` – mdance Sep 09 '14 at 14:20
i am starting to implement what you said, can we chat if required. – Sep 09 '14 at 14:26
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/60905/discussion-between-shrutika-and-mdance). – Sep 09 '14 at 14:32

How to call different URL's in same page in parallax site in HTML

1 Answers1