#1464 Inserting search box into horizontal nav bar - Exponent CMS

Type	To find
responsible:me	tickets assigned to you
tagged:"@high"	tickets tagged @high
milestone:next	tickets in the upcoming milestone
state:invalid	tickets with the state invalid
created:"last week"	tickets created last week
sort:number, importance, updated	tickets sorted by #, importance or updated
Combine keywords for powerful searching.
Use advanced searching »

#1464 ✓resolved

Inserting search box into horizontal nav bar

Reported by Peter | 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:

http://britishtrolley.org.uk/2-6-0/the-trolleybus and other tabs on that page. The Restoration tab is the one I added as a separate tab, but now appears on all of them.

Thank you.
Peter.

Comments and changes to this ticket

dleffler April 27th, 2022 @ 01:45 PM
How about the design on www.exponentcms.org or docs.exponentcms.org ? I can send you the template later this week if you like.
You flagged this item as spam.
Peter April 27th, 2022 @ 02:07 PM
Yes please! Does this answer both questions? Peter.
You flagged this item as spam.
Peter 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.
dleffler April 29th, 2022 @ 11:47 AM
I've attached the custom bootstrap 3 theme Navigation Flydown view to place in
```
themes/mytheme/modules/navigation/views/navigation/showall_Flydown.tpl
```
You'll note the search box begins at lines 42 to 44 and the login link lines 45 to 47, with some custom code at the bottom
- showall_Flydown.tpl 7 KB
You flagged this item as spam.
Peter 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.
dleffler April 29th, 2022 @ 12:28 PM
Not sure I completely follow. By design, Text module tabs can only contain text, however a Container module can have a tabbed view and each tab can then contain Text modules with a tabbed view, or even nesting additional Container modules with tabbed views.
You flagged this item as spam.
Peter 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.
dleffler April 29th, 2022 @ 12:52 PM
There is NO need to create a subtheme. You'll need to first activate the Container module so it can be added to pages
- Go into Admin, Super-Admin Tools, Extensions, Manage Modules - Activate the Container module

At the proper place on a page, click on the + Add Module button
- Select 'Container' as type of content, the under Content Display select Tabbed

Though each page/subtheme contains at least one container (Main), it can contain more containers on the subtheme (hard-coded) or embeded ones just like other modules.
You flagged this item as spam.
Peter April 29th, 2022 @ 12:58 PM
Brilliant. Thank you! Every day I learn something new.
You flagged this item as spam.
Peter 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.
dleffler April 30th, 2022 @ 07:24 PM
I don't think there's a method to land on a tab in twitter bootstrap. We had something for the old YUI tabs. I might try to develop something for bootstrap based on the YUI code, but it won't be any time soon.

dleffler May 1st, 2022 @ 12:30 AM

You might try placing this code snippet onto the main theme template (theme folder index.php) and the subthemes. It will allow going to a url/link with the hashtag and opening that tab. Of course most tab id's are based on the modules src, so it may involve some trial and error to get the link/url correct.

<script>
$(document).ready(() => {
  let url = location.href.replace(/&#47;$/, "");




if (location.hash) {
    const hash = url.split("#");
    $('#myTab a[href="#'+hash[1]+'"]').tab("show");
    url = location.href.replace(/&#47;#/, "#");
    history.replaceState(null, null, url);
    setTimeout(() => {
      $(window).scrollTop(0);
    }, 400);
  }




$('a[data-toggle="tab"]').on("click", function() {
    let newUrl;
    const hash = $(this).attr("href");
    if(hash == "#home") {
      newUrl = url.split("#")[0];
    } else {
      newUrl = url.split("#")[0] + hash;
    }
    newUrl += "/";
    history.replaceState(null, null, newUrl);
  });
});
</script>

You flagged this item as spam.
Peter 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.
You flagged this item as spam.
Peter 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.
dleffler May 2nd, 2022 @ 03:41 PM
I see the issue with that code. We do NOT give an ID to our tab containers and bootstrap requires both the tab and the tab container have id's. I'll try to see if I can come up with some sort of quick workaround this week.

dleffler May 2nd, 2022 @ 03:56 PM

Ok, change the code line with .tab("show") from:

    $('#myTab a[href="#'+hash[1]+'"]').tab("show");

    $('ul.nav-tabs a[href="#'+hash[1]+'"]').tab("show");

You flagged this item as spam.
Peter 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.
dleffler May 2nd, 2022 @ 07:06 PM
Mostly likely the link format is something like page-name#tab2-exprandom55c0c8e0444c1, you'll need to hover over the tab or pull up the source to see the exact tab id
You flagged this item as spam.
Peter 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.
You flagged this item as spam.
Peter May 3rd, 2022 @ 08:22 AM
The links have been truncated when I submitted. They should read:

#tab4-exprandom626be0e2112ce
You flagged this item as spam.
Peter 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
dleffler May 3rd, 2022 @ 04:29 PM
- State changed from “new” to “open”
- Tag changed from “advice on formatting” to “advice on formatting, javascript, tabs, twitter-bootstrap”
- Milestone set to “User issues”
Note that a web page is processed from top to bottom. There's an error because the code snippet (above) is placed too early on the page before jQuery is loaded (at the bottom of the page), the code snippet needs to be at the bottom. THEREFORE, we'll use an Exponent call/feature to properly load this code on the page. Place this on all page templates in the theme/subtheme.

Near the bottom of the page template you'll see an existing MANDATORY entry:
```
        <?php echo expTheme::foot(); ?>
```
Replace that line with this code:
```
        <?php expTheme::foot(
            array(
                'unique' => 'tabload',
                'jquery' => 1,
                'content'=> "
    $(document).ready(() => {
      let url = location.href.replace(/&#47;$/, '');
      if (location.hash) {
        const hash = url.split('#');
        $('ul.nav-tabs a[href='#'+hash[1]+'']').tab('show');
        url = location.href.replace(/&#47;#/, '#');
        history.replaceState(null, null, url);
        setTimeout(() => {
          $(window).scrollTop(0);
        }, 400);
      }
      $('a[data-toggle='tab']').on('click', function() {
        let newUrl;
        const hash = $(this).attr('href');
        if(hash == '#home') {
          newUrl = url.split('#')[0];
        } else {
          newUrl = url.split('#')[0] + hash;
        }
        newUrl += '/';
        history.replaceState(null, null, newUrl);
      });
    });
                ",
                'bootstrap' => 'tab'
            )
        ); ?>
```
The nice thing about this feature is you can use it to load jquery or bootstrap modules/plugins and stylesheets. Replace the 'jquery'=>1 entry with 'jquery'=>'scriptname,scriptname2', Those scripts must however be found in the /themes/mytheme/js folder (as you seem to be doing). And if a name matched .css/.less/.scss file is also found, it will automatically be loaded as well (e.g., you seem to be manually loading general.js, minmax.js, and jquery.fancybox.min.js) BTW, the css/jquery.fancybox.min.css file is failing to load as if it's NOT in the theme's /css folder...move it to the /js folder to auto-load it also. Something like:
```
'jquery' => 'general,minmax,jquery.fancybox.min',
```
Don't forget to remove the lines in the template where you manually load the stylesheets and scripts.
You flagged this item as spam.
Peter 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.
You flagged this item as spam.
Peter 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.
You flagged this item as spam.
Peter 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.
- index.php 5.7 KB
dleffler May 4th, 2022 @ 02:40 PM
OK, the script above has a slight error...however, you didn't clean out all the old code. The Tabs are displayed, but UNDER the navbar. Not sure if you removed a

or something. I'll take a look at your template and upload a corrected version.
You flagged this item as spam.
Peter 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.

dleffler May 4th, 2022 @ 03:19 PM

There was a problem with my single/double quotes in the code above. Here's the correct code...and I've attached an edited index.php

        <?php expTheme::foot(
            array(
                'unique' => 'tabload',
                'jquery' => 1,
                'content'=> "
    $(document).ready(() => {
      let url = location.href.replace(/&#47;$/, &quot;&quot;);
      if (location.hash) {
        const hash = url.split(&quot;#&quot;);
        $('ul.nav-tabs a[href=&quot;#'+hash[1]+'&quot;]').tab(&quot;show&quot;);
        url = location.href.replace(/&#47;#/, &quot;#&quot;);
        history.replaceState(null, null, url);
        setTimeout(() => {
          $(window).scrollTop(0);
        }, 400);
      }
      $('a[data-toggle=&quot;tab&quot;]').on(&quot;click&quot;, function() {
        let newUrl;
        const hash = $(this).attr(&quot;href&quot;);
        if(hash == &quot;#home&quot;) {
          newUrl = url.split(&quot;#&quot;)[0];
        } else {
          newUrl = url.split(&quot;#&quot;)[0] + hash;
        }
        newUrl += '/';
        history.replaceState(null, null, newUrl);
      });
    });
                ",
                'bootstrap' => 'tab'
            )
        ); ?>

index.php 4.9 KB

You flagged this item as spam.
Peter 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.
- page-bottom.JPG 12.5 KB
You flagged this item as spam.
Peter 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...
dleffler May 4th, 2022 @ 04:34 PM
One last edit, since you're using BS5 instead of BS4. Change the
```
$('a[data-toggle="tab"]).on
```
to
```
$('a[data-bs-toggle="tab"]).on
```
You flagged this item as spam.
Peter 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.
- Capture.JPG 29.7 KB
dleffler May 4th, 2022 @ 06:56 PM
I think we're losing something with single/double quotes and escaping the JavaScript quotes where needed. I've attached an updated index.php for Bootstrap 5
- index.php 4.9 KB
You flagged this item as spam.
Peter 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...
dleffler May 5th, 2022 @ 12:26 PM
You're missing a javascript entry to remove the loading spinner
```
$('.loadingdiv').remove();
```
This is normally included on any view/template with tabs, but you could add the line to the end of the above code.
You flagged this item as spam.
Peter 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.
You flagged this item as spam.
Peter May 5th, 2022 @ 12:32 PM
Parse error, removed again.
- Capture.JPG 21.2 KB
You flagged this item as spam.
Peter May 5th, 2022 @ 12:34 PM
Ignore - put it in the wrong place!!
dleffler May 5th, 2022 @ 12:56 PM
You're links may be pointing to the wrong anchor to pull up the tab. Remember the tabs id is unique across the entire site. Should be similar to:
```
the-trolleybus#tab4-exprandom62712cc24be03
```
or
```
bts-news-events#tab3-exprandom623f28956aa3b
```
The tab/link process works for me on YOUR site. You'll notice the specific link to the tab appears in the browser url, it's also placed in the browser history.
When did the 'parse error' occur? When you added the javascript to remove the 'loading' indicator?
You flagged this item as spam.
Peter 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.
- Capture.JPG 51.5 KB
dleffler May 5th, 2022 @ 01:13 PM
The tab/link process works for me on YOUR site. When I click the 2nd link in the previous post above, it takes me to the 3rd tab.
You flagged this item as spam.
Peter 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.
You flagged this item as spam.
Peter 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.
dleffler November 10th, 2022 @ 11:37 AM
- State changed from “open” to “resolved”

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.