• Resolved vladbrasoveanu

    (@vladbrasoveanu)


    Hello,
    I am working on a WP site with WPBakery plugin and I am using the tabs. The tabs that come with this plugin are adding the id in the URL and I wanted to remove them with “Page scroll to id”. Adding the id in the URL is very annoying because everytime I click the tabs, the URL changes and it counts as changing the page. This causes me to click a lot of times the back button before I can go back to the previous page.
    So the final question is, can I remove the id created by the tabs?

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author malihu

    (@malihu)

    Hi,

    It depends. You can make a test by installing/activating “Page scroll to id”, enabling few options like “Prevent other scripts from handling plugin’s links” and checking if the the tabs selector is not in plugin’s excluded selectors option field.

    After that, you might need to add an extra js script in your theme’s template to toggle the tabs without adding an entry in browser’s history.

    In order to help with this you’d need to install/activate “Page scroll to id” and send me your site/page URL so I can check it.

    Which tabs script are you using? Can you post the tabs plugin’s URL?

    Thread Starter vladbrasoveanu

    (@vladbrasoveanu)

    Hello again,

    So I made a bit of progress by activating “Prevent other scripts from handling plugin’s links”. It now removed the hash from the URL, but on the other hand, the second tab no longer works and takes me top of the page.
    Unfortunately, I can’t give you the site details, as I’m working on a local site.
    About the tabs script, I don’t know how to get it. It is included in the theme files.
    Lastly, the tabs is not a separate plugin, it is an element from the WPBakery plugin.

    Plugin Author malihu

    (@malihu)

    Is wpbakery part of your theme? Which theme are you using (link/demo)?

    Thread Starter vladbrasoveanu

    (@vladbrasoveanu)

    Okay, so the theme that I’m using is called MediCenter(https://quanticalabs.com/home/portfolio/medicenter-wordpress-theme/) and it came packed with Wpbakery builder plugin.

    Plugin Author malihu

    (@malihu)

    How many tabs do you have? Do all tabs take you to the top?

    Thread Starter vladbrasoveanu

    (@vladbrasoveanu)

    So, my site has multiple pages with the same layout(for presenting different products). The page has 1 tab on it with 2 pills. When I click the first pill, it takes me to it, just as an anchor hash link. The second one, takes me top of the page.
    The most important reason I want to remove the hash id from the URL is that whenever I click on the tabs 5 times, for example, I have to click the back button 6 times to go to the previous page. It is very annoying that the browser counts the pills as different URLs thus making me click the back button more than 1 time.
    I have also noticed that by activating “Prevent other scripts from handling plugin’s links” even though the hash is no longer present in the URL of the address bar, when you check the down-left corner after hovering the mouse on the pills, I can still see the hash id on the URL.
    What has to be done further? Or you believe it is a matter of theme functionality – poorly developed tabs?

    Plugin Author malihu

    (@malihu)

    It’s probably a matter of poorly thought-out tabs implementation. Normally, the URL hash should not add an entry in browser’s history (this is done via javascript) but I can’t really say why the theme’s tabs script is developed in such way.

    I checked your theme’s tabs and they seem to be jQuery UI tabs. The thing is that standard jQuery UI tabs do not change the browser’s URL with the tab’s hash value. So, maybe your theme does this via some option or a function callback(?)

    The problem is that I can’t really help and provide a solution unless I see your page and tabs. This is because in addition to plugin, you’ll need extra javascript to trigger tabs switching and/or remove the changing of the location hash in browser’s address bar.

    Thread Starter vladbrasoveanu

    (@vladbrasoveanu)

    Thanks for the time, I’ll try to make the site live in a few days and then I’ll be able to give you the login credentials.

    Plugin Author malihu

    (@malihu)

    @vladbrasoveanu Cool. You can contact me here if/when you want to send any credentials.

    Thread Starter vladbrasoveanu

    (@vladbrasoveanu)

    Hi, fortunately I have checked the tabs’ js/main.js code file and found out that I needed to change the following.
    replace line 616:
    event: 'change',
    with:
    event: 'click',
    and lines 745-754:

    $(".tabs .ui-tabs-nav a").on("click", function(){
        if($(this).attr("href").substr(0,4)!="http")
            $.bbq.pushState($(this).attr("href"));
        else
            window.location.href = $(this).attr("href");
    });

    with:

    $(".tabs .ui-tabs-nav a").on("click", function(){
        if($(this).attr("href").substr(0,4)!="http")
        {
            //$.bbq.pushState($(this).attr("href"));
        }
        else
            window.location.href = $(this).attr("href");
    });

    This is something specifically for the MediCenter theme, but I will put it here, maybe it helps someone else.

    Anyway, thank you for your time and help.

    Plugin Author malihu

    (@malihu)

    You’re welcome 🙂 Thanks a lot fort he feedback and for posting the solution for the MediCenter WordPress Theme.

    I’m gonna mark this as resolved but if you need more help, please let me know.

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Remove id from existing tab’ is closed to new replies.