Lighthouse has a new layout. Prefer the old one? Return to the old layout, and switch back any time from the link at the top of each page.

Inserting search box into horizontal nav bar

#1464

https://britishtrolley.org.uk/2-6-0 - new site in development with bootstrap5theme.

I would like to imbed the Search box at the bottom of the fixed position horizontal menu rather than at the top of each page, where it scrolls away.


Here's how I currently imbed the search box:

Reported by peters@slx-online.biz · April 27th, 2022 @ 12:55 PM

State: open
Milestone: User issues
Assigned to: dleffler dleffler

Activity

  1. peters@slx-online.biz
    peters@slx-online.biz

    Yes please! Does this answer both questions? Peter.

    April 27th, 2022 @ 02:07 PM

  2. peters@slx-online.biz
    peters@slx-online.biz

    Would you be able to let me have the template today please? Then I can work the weekend. Thanks. Peter.

    April 29th, 2022 @ 09:41 AM

  3. peters@slx-online.biz
    peters@slx-online.biz

    Thanks for sending the template. I'll explore later today.

    Please can you confirm whether it is possible to include a tabbed text module inside a tabbed text module? I tried it and it seems to duplicate the child tabbed page's tabs across the top level set of tabs - if that makes sense. I've removed the problem page for now, and will recreate as I need to get the site working.

    It manifested itself as follows: I created a page under the top menu, and set it up with a tabbed text module. Several tabs were added. Under one of those tabs I added a tabbed text module and created several tabs. When I went to the other tabs at the top of the page, the tabbed page under the one tab was now duplicated on the pages of all of the tabs. I have a way to change the design to avoid this, but would be interested to know if this is 'by design'?

    Peter.

    April 29th, 2022 @ 12:19 PM

  4. peters@slx-online.biz
    peters@slx-online.biz

    If I understand that, I can only add ordinary text modules to a text module tab, not another tabbed text module. I didn't realise a container could be tabbed. I guess that would need a subtheme? Not sure how the container would be configured (excuse my ignorance...). Maybe:

    <?php expTheme::module(array("controller"=>"container","action"=>"showall","view"=>"tabbed","source"=>"@page","scope"=>

    Peter.

    April 29th, 2022 @ 12:42 PM

  5. peters@slx-online.biz
    peters@slx-online.biz

    Brilliant. Thank you! Every day I learn something new.

    April 29th, 2022 @ 12:58 PM

  6. peters@slx-online.biz
    peters@slx-online.biz

    I have successfully used your template as a guide to insert the search box in the fixed menu bar of my bootstrap5theme. Thanks for the help. Maybe one day I should take an Exponent training course... :-)

    I have trawled the documentation but unable to find how to link directly to a tab. I see when I click on a tab it shows "pagename#tab3" for example, followed by some random text. If I type that manually into the browser it lands on tab 1, with or without random text.

    How do I link from one page to another and request that I land on a specific tab?

    Thanks. Almost there...

    Peter.

    April 30th, 2022 @ 04:37 PM

  7. peters@slx-online.biz
    peters@slx-online.biz

    Many thanks for that. First pass it didn't work, so I'll have to start experimenting next week. Day off today (if I can survive the day without tinkering!). Peter.

    May 1st, 2022 @ 08:31 AM

  8. peters@slx-online.biz
    peters@slx-online.biz

    I'm afraid I couldn't leave this alone for the weekend, so have been playing around with the site. I haven't been able to land on specific tabs with the code you sent added to index.php. My JavaScript is almost non-existent so I'm struggling! I may need to find another way to structure the site.

    May 2nd, 2022 @ 01:23 PM

  9. peters@slx-online.biz
    peters@slx-online.biz

    Thank you. Sorry, that doesn't work either. I'm assuming the link format is " page-name#tab5 ". I'll have another look tomorrow, meanwhile if you have any ideas?

    The link I am playing with is at https://britishtrolley.org.uk/2-6-0/ part way down - Modern Trolleybuses --> More should go to "the-trolleybus#tab5"

    Peter.

    May 2nd, 2022 @ 06:35 PM

  10. peters@slx-online.biz
    peters@slx-online.biz

    Thanks for having another look. Still doesn't work, and an interesting anomaly. The page I am working with has 5 tabs. Copying the links on these tabs and copying here gives:

    http://britishtrolley.org.uk/2-6-0/the-trolleybus#tab5-exprandom626...

    http://britishtrolley.org.uk/2-6-0/the-trolleybus#tab4-exprandom626...

    http://britishtrolley.org.uk/2-6-0/the-trolleybus#tab3-exprandom626...

    http://britishtrolley.org.uk/2-6-0/the-trolleybus#tab2-exprandom626...

    http://britishtrolley.org.uk/2-6-0/the-trolleybus#tab1-exprandom626...

    As you can see the URL is generated as http not https. When I click on any of the tabs as a normal operation, it goes to the tab and shows the link is rendered by the browser as:

    britishtrolley.org.uk/2-6-0/the-trolleybus

    If I copy / paste the link into the browser as http, the page loads on the same tab that was open. If I change the link to https it reloads at tab 1.

    Strange...

    Peter.

    May 3rd, 2022 @ 08:13 AM

  11. peters@slx-online.biz
    peters@slx-online.biz

    The links have been truncated when I submitted. They should read:

    #tab4-exprandom626be0e2112ce

    May 3rd, 2022 @ 08:22 AM

  12. peters@slx-online.biz
    peters@slx-online.biz

    Another problem that I've just noticed - if you go to a detail page from a link within the tab page, then click browser back to return to the tab from which you came, it goes back and lands on Tab 1.

    Example: https://britishtrolley.org.uk/2-6-0/the-trolleybus --> Tab 2 Our Vehicles --> Aachen 22 text link --> browser back

    May 3rd, 2022 @ 09:11 AM

  13. peters@slx-online.biz
    peters@slx-online.biz

    Brilliant, thank you! I'll get to that in the morning. Just about to switch off for the day. Peter.

    May 3rd, 2022 @ 04:43 PM

  14. peters@slx-online.biz
    peters@slx-online.biz

    I removed the one line and replaced it with your new code. I changed the 'jquery' => 'general.... and removed the links at the end of the index.php file. Also moved the one css to js folder.

    When I load the site, the first bit of the top photo is under the menu bar. Any tabbed page no longer shows the tabs, and at the bottom of the screen I see the circular animation and Loading.

    I've left it in that state so you can see.

    Peter.

    May 4th, 2022 @ 10:58 AM

  15. peters@slx-online.biz
    peters@slx-online.biz

    Index file modified as suggested. Haven't looked at subthemes but am moving away from them this time around.

    May 4th, 2022 @ 02:20 PM

  16. peters@slx-online.biz
    peters@slx-online.biz

    Thanks. If I remove the new code, change the footer statement back, restore links to the js files it all works OK again. Not done anything else! Peter.

    May 4th, 2022 @ 02:47 PM

  17. peters@slx-online.biz
    peters@slx-online.biz

    We've all done it! Thank you again.

    First pass it is working as long as the link is https - copying a link from a tab renders http instead.

    I do still have the rotating circle and "Loading" at the bottom of tabbed pages. Home page and others with no tabs are OK.

    I'll test properly tomorrow.

    I need a break now! The membership system is having problems that are driving me daft.

    Peter.

    May 4th, 2022 @ 03:43 PM

  18. peters@slx-online.biz
    peters@slx-online.biz

    http appears to come from the site loading from a bookmark which doesn't have the https! My bad...

    May 4th, 2022 @ 04:15 PM

  19. peters@slx-online.biz
    peters@slx-online.biz

    Error, I'm afraid.

    Just to check - line 106 change

    $('a[data-toggle=\"tab\"]').on(\"click\", function() {

    to

    $('a[data-bs-toggle=\"tab\"]').on(\"click\", function() {

    Screenshot attached.
    ?? Peter.

    May 4th, 2022 @ 06:16 PM

  20. peters@slx-online.biz
    peters@slx-online.biz

    I've still got the spinning disk and Loading on the bottom of the tab pages. Sorry a bit brief but struggling with the membership system now...

    May 5th, 2022 @ 08:16 AM

  21. peters@slx-online.biz
    peters@slx-online.biz

    Finally got the membership system sorted, so I can now get back to the tabbed pages! As mentioned yesterday, I am still seeing the Loading message at the bottom of tabbed pages. Is it really still trying to load something? Please could you check, it doesn't seem to be responding as expected. Example: Go to News & Events, copy the link on tab 3, paste into browser, stays on tab 1. If I then do a Ctrl-F5 it does then go to the requested tab. If however I copy the link and go to another page first then paste, it does navigate to the correct tab.

    Thanks.
    Peter.

    May 5th, 2022 @ 12:27 PM

  22. peters@slx-online.biz
  23. peters@slx-online.biz
    peters@slx-online.biz

    Ignore - put it in the wrong place!!

    May 5th, 2022 @ 12:34 PM

  24. peters@slx-online.biz
    peters@slx-online.biz

    Sorry, parse error was because I put your line of code in the wrong place - sorted.

    Example: I am on page - https://britishtrolley.org.uk/2-6-0/bts-news-events#tab1-exprandom6...

    I copy the link from tab 3:

    https://britishtrolley.org.uk/2-6-0/bts-news-events#tab3-exprandom6...

    and paste it into the browser. Press Enter, nothing appears to happen and it's still on tab 1. Ctrl-F5 and it goes to tab 3.

    May 5th, 2022 @ 01:03 PM

  25. peters@slx-online.biz
    peters@slx-online.biz

    That's strange. It does work fine if you start from a different page to where the tab is, or if you start your site visit with that tab. For me, if I am on the same page and enter the tab it just sits there on the original tab.

    So with browser closed: https://britishtrolley.org.uk/2-6-0/bts-news-events#tab3-exprandom6... goes to tab 3

    With page open at https://britishtrolley.org.uk/2-6-0/bts-news-events#tab1-exprandom6... I copy and paste the tab3 link as above and when I hit Enter nothing happens. Ctrl-F5 now loads in tab 3.

    May 5th, 2022 @ 01:22 PM

  26. peters@slx-online.biz
    peters@slx-online.biz

    I just realised- why would I want to use a pasted link to go to a tab on the same page? The tab is there so click on it! I must be at the point of talking bollocks after a morning of sorting out a heavy problem on the membership system.

    Let's stop now! Sorry, brain fade this afternoon.

    May 5th, 2022 @ 01:28 PM

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.