Inserting search box into horizontal nav bar
Reported by peters@slx-online.biz | 2022-04-27 12:55:01 UTC | in User issues
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:
Comments and changes to this ticket
-

-

peters@slx-online.biz 2022-04-29 09:41:28 UTC
Would you be able to let me have the template today please? Then I can work the weekend. Thanks. Peter.
-

peters@slx-online.biz 2022-04-29 12:19:24 UTC
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.
-

peters@slx-online.biz 2022-04-29 12:42:57 UTC
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.
-

peters@slx-online.biz 2022-04-29 12:58:52 UTC
Brilliant. Thank you! Every day I learn something new.
-

peters@slx-online.biz 2022-04-30 16:37:33 UTC
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.
-

peters@slx-online.biz 2022-05-01 08:31:02 UTC
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.
-

peters@slx-online.biz 2022-05-02 13:23:36 UTC
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.
-

peters@slx-online.biz 2022-05-02 18:35:50 UTC
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.
-

peters@slx-online.biz 2022-05-03 08:13:05 UTC
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.
-

peters@slx-online.biz 2022-05-03 08:22:39 UTC
The links have been truncated when I submitted. They should read:
#tab4-exprandom626be0e2112ce
-

peters@slx-online.biz 2022-05-03 09:11:02 UTC
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
-

peters@slx-online.biz 2022-05-03 16:43:31 UTC
Brilliant, thank you! I'll get to that in the morning. Just about to switch off for the day. Peter.
-

peters@slx-online.biz 2022-05-04 10:58:49 UTC
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.
-

peters@slx-online.biz 2022-05-04 14:20:46 UTC
Index file modified as suggested. Haven't looked at subthemes but am moving away from them this time around.
-

peters@slx-online.biz 2022-05-04 14:47:30 UTC
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.
-

peters@slx-online.biz 2022-05-04 15:43:26 UTC
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.
-

peters@slx-online.biz 2022-05-04 16:15:54 UTC
http appears to come from the site loading from a bookmark which doesn't have the https! My bad...
-

peters@slx-online.biz 2022-05-04 18:16:08 UTC
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. -

peters@slx-online.biz 2022-05-05 08:16:54 UTC
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...
-

peters@slx-online.biz 2022-05-05 12:27:13 UTC
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. -

-

-

peters@slx-online.biz 2022-05-05 13:03:07 UTC
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.
-

peters@slx-online.biz 2022-05-05 13:22:47 UTC
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.
-

peters@slx-online.biz 2022-05-05 13:28:03 UTC
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.
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.
Create your profile
Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป
Bug Tracker for Exponent CMS