Announcement

Collapse
No announcement yet.

How to fix html5 Tabbed Browsing back button issue

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to fix html5 Tabbed Browsing back button issue

    On the html5 templates, each tab click creates a browser history event and adds a hash suffix to the URL. The problem is that when someone clicks the back button, they're taken to the previous tab rather than the previous page. I think you'll all agree that this isn't optimal for most sites. The design team for my site said that this wasn't something that could be fixed and that it was the how all of the new html5 templates worked. I was a bit skeptical so I spent a couple of hours trying to figure out what might control this. I'm posting this because it seems like the sort of thing that most everyone will probably want to fix manually on their template's listing page.

    On the listing page, change
    HTML Code:
    setHash: true
    to
    HTML Code:
    setHash: false
    Last edited by bzeltzer; 10-02-2014, 05:44 PM.

  • #2
    I agree that this would probably be a good resource for people to come to with this problem. However, please clarify the code you are specifying to change. You even lost me on this one. Keep in mind most of the clientele here are what some might call "html/css/js challenged" and that's ok. They are too busy focusing on selling their products!

    Comment


    • #3
      No problem. On the html5 listing_0.html, you'll find this block of code:
      HTML Code:
          //Responsive Tabs initialized
          jQuery('#rTabs').responsiveTabs({
            rotate: false,
            startCollapsed: 'accordion',
            collapsible: 'accordion',
            setHash: true
          });
      Change it to:
      HTML Code:
          //Responsive Tabs initialized
          jQuery('#rTabs').responsiveTabs({
            rotate: false,
            startCollapsed: 'accordion',
            collapsible: 'accordion',
            setHash: false
          });
      This last line specifies whether or not the "hash" (#tab-3) should be appended to the URL when switching tabs. Hope that helps.
      Last edited by bzeltzer; 10-02-2014, 05:42 PM.

      Comment


      • #4
        crystal clear - thanks!

        Comment


        • #5
          I was experiencing a jump to the top of each div every time a tab was clicked in Chrome and Opera. This took care of that, too! Thanks a ton :)

          Comment

          Working...
          X