Inserting search box into horizontal nav bar
Reported by peters@slx-online.biz | April 27th, 2022 @ 12:55 PM | 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 April 27th, 2022 @ 02:07 PM
Yes please! Does this answer both questions? Peter.
-
peters@slx-online.biz April 29th, 2022 @ 09:41 AM
Would you be able to let me have the template today please? Then I can work the weekend. Thanks. Peter.
-
peters@slx-online.biz April 29th, 2022 @ 12:19 PM
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 April 29th, 2022 @ 12:42 PM
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 April 29th, 2022 @ 12:58 PM
Brilliant. Thank you! Every day I learn something new.
-
peters@slx-online.biz April 30th, 2022 @ 04:37 PM
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 May 1st, 2022 @ 08:31 AM
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 May 2nd, 2022 @ 01:23 PM
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 May 2nd, 2022 @ 06:35 PM
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 May 3rd, 2022 @ 08:13 AM
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 May 3rd, 2022 @ 08:22 AM
The links have been truncated when I submitted. They should read:
#tab4-exprandom626be0e2112ce
-
peters@slx-online.biz May 3rd, 2022 @ 09:11 AM
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 May 3rd, 2022 @ 04:43 PM
Brilliant, thank you! I'll get to that in the morning. Just about to switch off for the day. Peter.
-
peters@slx-online.biz May 4th, 2022 @ 10:58 AM
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 May 4th, 2022 @ 02:20 PM
Index file modified as suggested. Haven't looked at subthemes but am moving away from them this time around.
-
peters@slx-online.biz May 4th, 2022 @ 02:47 PM
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 May 4th, 2022 @ 03:43 PM
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 May 4th, 2022 @ 04:15 PM
http appears to come from the site loading from a bookmark which doesn't have the https! My bad...
-
peters@slx-online.biz May 4th, 2022 @ 06:16 PM
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 May 5th, 2022 @ 08:16 AM
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 May 5th, 2022 @ 12:27 PM
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 May 5th, 2022 @ 01:03 PM
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 May 5th, 2022 @ 01:22 PM
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 May 5th, 2022 @ 01:28 PM
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