CODEWITHSUNDEEP
jqueryhtmlwindow.location
enima
enima

Reputation: 29

I removed the hash from (URL), I got page not found 404

I created a navbar for one page scroll website. all works fine. I change the URL from : http://example.com#sectionb, to http://example.com/sectionb

when i click on the other item in the navbar the page scroll to the wanted section and the url change to http://example.com/sectionc

to do that i use : 

id = $(this).attr('href');
var link = id.split('#')[1];
window.history.pushState("", "Title", link);

However the problem is, when i refresh the page using the url http://example.com/sectionb it shows page not found 404 !! But when i use http://example.com/#sectionb it shows the "sectionb"

What i want is when i refresh the page with http://example.com/sectionb, to see the section "sectionb"

html :

<nav>
  <ul>
    <li><a href="sectiona" data-uri="1">First</a></li>
    <li><a href="sectionb" data-uri="2">Second</a></li>
    <li><a href="sectionc" data-uri="3">Third</a></li>
  </ul>
</nav>

<div class="sections">
  <section id="sectiona"></section>
  <section id="sectionb"></section>
  <section id="sectionc"></section>
</div>

JS :

    var sections = $('section')
  , nav = $('nav')
  , nav_height = nav.outerHeight();

$(window).on('scroll', function () {
  var cur_pos = $(this).scrollTop();

  sections.each(function() {
    var top = $(this).offset().top - nav_height,
        bottom = top + $(this).outerHeight();
    if (cur_pos >= top && cur_pos <= bottom) {
      nav.find('a').removeClass('active');
      sections.removeClass('active');
      $(this).addClass('active');
      nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
    }
  });
});

nav.find('a').on('click', function (e) {
  var $el = $(this)
    , id = $el.attr('href');
  e.preventDefault();
  $('html, body').animate({
    scrollTop: $(id).offset().top - nav_height
  }, 500);

  var link = id.split('#')[1];
  window.history.pushState("", "Title", link);
  return false;
});

Upvotes: 0

Views: 234

Answers (2)

enima
enima

Reputation: 29

problem solved i edit my controller : http://example.com/{sect}

    /**
     * Matches /*
     *
     * @Route("/{sec}", name="home")
     * 
     */
    public function index($sec = null) 
    {
        //return new Response('Test');
        //dump($sec);
        return $this->render('pages/nav.html.twig', [
            'sec' => $sec,
        ]);
    }

Thank's

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65808

Your code just updates the URL in the history. That, in no way, means that the URL you've placed there is valid.

  • http://example.com/#sectionb means locate the element with an id of sectionb in the default document in the domain root and navigate (scroll) to it.
  • http://example.com/sectionb means load the default document in the sub-directory called sectionb

You seem to be stating that when the original URL is:

http://example.com/#sectionb

your code changes it to:

http://example.com/sectionb

and, then you want that URL to navigate to:

http://example.com/#sectionb

This seems circular. What problem are you trying to solve?

Upvotes: 2

Related Questions