Tabs - Hard to edit Content ... OR some better approach?

I started using Tabs below the page Title and a Clean Carousel (photos). Directly below the Tabs (1-7) I added headers and paragraphs to Tab-1. Now it is difficult to edit the other tabs because the Tabs do not switch when in edit mode. How can I switch to Tab-7 for example to edit that?

Also is there a better approach which would allow me to use Nav menu or something and then stack 7 containers up below that. Then use an internal link to each of the containers from Nav menu 1-7 respectively, that would keep the Title & Carousel in place and scroll the page up to the top of the respective container, leaving the Nav and above intact?

Thankyou.

To edit the tabs click on the tab or link and at the top the buttons will change (sometimes they are buggy and you'll have to save your page and close the project and reopen it to get it to work again, they are still working on this issue I believe). You should then see "Show", "Hide" and buttons for adding tabs. Click the Show button and it will then show you the contents of that tab.

Be sure to click the Tab open for the tab you want to show when you're done editing so the wrong tab isn't showing when the page is loaded. Pretty simple other than when the bug pops up periodically.

Thank you Jo. I will try closing and opening. I did try save.

Do you know of another approach using a navbar that would scroll up inline containers beneath the navbar? Above the navbar I have titles and carousel tthat would normally remain showing. Is there a better way to do that?

Thanks

Do you have an example? I'm not quite sure what you're talking about on the scrolling up of inline containers.

Jo I tried closing and opening. No success yet. May start a test page to learn it better.

Attached is pic of the site so far with tabs. Replace the tabs with navbar and link to stacked containers below. When you hit a button, the section below the navbar scrolls up to the proper container. The user can continue scrolling up or down. Essentially it is a very long page with internal links to a navbar. The Navbar and Carousel and Title stay on top in place.

Later I might want to be able to have a user selected way to drop the carousel down or expand it. See image below, I hope!

Screenshot of current TABs version

Try again Whoops wrong image. Now good. Current Tab version. https://1drv.ms/u/s!AojUASGm35WomnXs80L6c4Mu6DKh

Hmm the photo is really too small to read anything.

Can you zip up and upload your project so we can download it and take a look to see what you might be doing wrong? Tabs aren't really hard to work with other than that little bug which is definitely not there all the time, and always fixes itself when restarting either the project or BSS itself. My guess is you aren't applying them correctly or maybe not clicking on the right things to get the menu to alter at the top.

Upload your project and give a link to download it if you would please.

I found I could upload the website to BSS and this is the URL

http://spring-resonance-9636.bss.design/

view-source:http://spring-resonance-9636.bss.design/

You have to wait as stuff loads and the Carousel is not working very well when uploaded. Its only 3 1024x photos at the moment, but they are not showing even though I "Published". I wonder why, it works on browser and cell phone with the wifi URL and port number.

I can try to zip the files and upload, but this interface seems to require a URL, it's kind of clunky that way. Actually it only has Insert an Image. I don't think we can attach files to the forum, which would be useful.

You cannot upload to the forums, you need to upload your zipped project file and any images you want to use on the forums and put the links in your posts.

If you want the image to show as an image in the post, you need to highlight the URL and then click the little image icon above the editor here and it will as for the link to the image, insert the url and it will then add the proper code needed to show the image. You most likely won't see the code, I never do, but it works.

Will be easier to check your settings by looking in the project than scanning the code, but what I looked at of the code looks right so far. Upload your project to your server and put the URL here so we can download it and check the tabs settings.

Here's what you "should" see when you have a tab selected, and you should be able to select any part of a tab so it doesn't matter if it's the button, the text link, etc.:

https://eiwd-tester.work/screenshot-holder/bss-support/tabs-buttons.png

Jo, yes my BSS with the "trial" BSS website appears as above. Thankyou.

Jo, I have "Published" BSS - upper right corner - Publish Options which has this path http://spring-resonance-9636.bss.design/ which is was "given" by BSS, there are apparently 5 such websites available to me.

Our normal Virtualmin/Webmin server is http://www.mysticseacaptain.com/ I created this simple website in 2000 and have updated it occasionally, but it is now due for a "responsive" revamp. I wanted to wait until I had some of the basic stuff working before I upload it to this server.

I can certainly zip the website, I have "trial.zip" (4.2mb) and "img.zip" (512kb) I see no place above to upload the files. There is the "World" Hyperlink Icon for http and there is "Image" to insert an image, which just takes an http:// URL.

So I guess I have to upload these zips somewhere... to my OpenCPN development file area. OpenCPN Beta File Thingie Please use these to get in: rguser, rgpass and find those files in the main directory. Thanks. OpenCPN Beta File Thingie

I think you're misunderstanding what we need to look at. It's your BSS project file you need to zip and upload, not your website itself, that I can see by the link you provided. The project file that BSS saves for you is what we need to look at to help you. If you already have a web host for your normal current website, just create a directory in there and upload it to there. I don't use the BSS upload setup so I don't know what you can and cannot do with it. I just know you can upload it to your own server and share the URL to that file.

Yes, Jo, that's a decent idea to upload the project file to a sub-folder at mysticseacaptain.com, which I will do next time, but that is what I did when I zipped "trial.zip" and uploaded to

OpenCPN Beta File Thingie Please use these to get in: rguser, rgpass

ok I got it, and it all looks fine to me.

If you are seeing the exact same thing as what is in that screenshot above then you are just not clicking the button that says Show. One thing I noticed is that you must have duplicated a tab so when you click it, it isn't showing different text so maybe you "think" it isn't changing?

If you see the Tab Show/Hide toggle button and the Add Left Right End, then you have it all and just aren't understanding what to do. Each tab shows separately and it's not an automatic thing that just shows when you click on the tab, you have to click the tab and then click the Show button to make the contents show and pretty much most of yours say something like Fourth Tab Content or Fourth Tab Para. Just change that text and you'll see how it works. One tab at a time, Using the Show button for each one. You don't have to hit Hide for each one, it will do that automatically when you click Show for the next one. The only one that won't auto Hide is the last one you edit, you'll need to close that one or Open whichever one you want to be the default Tab on page load.

Jo, I just wanted to report back about Tabs. When I was learning how Tabs worked was duplicating Tab Items > "Tabs" and Tab Content > Tab Pane > "Tab Pane #tab-8 for example. Then I had to make a different link, so I used the HTML panel and Attributes to change those portions of the Html code because I could not get my hands on it to actually edit it. Those overriding changes looked right to me and I thought it should work.

Well, it didn't and it doesn't! BSS gets confused about what I did and opens incorrect links, it is not looking at my override links. I ended up clicking each one I had changed in the Overview and removing the attribute override. Then I ended up with 3-4 Tab Pane #3 and so I had to move the content to new Tabs created from the upper middle screen "Add Tab" and delete those other elements. Now it is working better.

Note: You pointed out the Middle upper Menu to me for such tasks and I did not see that at the begining, so I went astray! What do you call that menu? Action Menu or something? It really should have a NAME right on there like the others: Components, Overview, Options, Design, Html, Attributes, Styles, etc

Saving frequently helps too.

I've tried to "Publish" to http://spring-resonance-9636.bss.design/ but it does not seem to be updating. So you can see how far its come in a short time between other work.

Thanks for the help.

It's looking nicer, and the tabs seem to be working well now.

The best advice I can give on adding new tabs, is to duplicate the last entire tab section rather than editing them manually. I too tried that and it wasn't that BSS wasn't seeing the new changes, it was that I wasn't changing all the things that needed changing for them to work. I had changed ID's and number and such but didn't match them up between the tab and the tab content. Anyways, to make a long story short, you can duplicate them and it will auto number them if you do so you don't have to edit anything from there. Just be sure to duplicate the entire tab so that it goes the tab and it's content too. The other way is to use the buttons at the top (and yes, no name there, but would be good to give it one I agree), and either add before or after and that will auto number them as well. I find duplicating is simpler.

For the rest, I would suggest you make your images of the house at the top all the same size so that your tab menu doesn't get lost on the page constantly. I for one would find it very irritating if I had to chase down the menu every time a picture slides like it is setup now, just to view the information. Alter your images so you slider can remain the same size for all images and that will make things a whole lot nicer.

Yes, I agree about images. Use gimp to make them all the same #pixels high? There is no setting in carousel for that?

Also, I've been thinking about the mobile problem with bigger images. Is there a way to call a smaller set of pics for mobile? Responsive image download? On cell the images are a. Little slow. Make a dir with smaller images and point Carousel to that when at cell mobile size?

You can put all your images in the same location, large and small, doesn't have to be a separate directory unless you need it organized that way.

You can actually create a separate gallery with the smaller images in them if that would be easier, then hide the larger one and make the smaller one show up on phone sizes.

If you can set up the CSS to call your images for the gallery slides, that would be the more practical way to do it. That way you can just duplicate the classes that call the images and set different ones for the smaller size viewport.

I haven't played with that slider much, I use an external app that creates them for me so I don't know the bells and whistles of the one you're using, but if the above is possible in either choice, that would be what you would want to do I would think.

I think I'll do this by setting up the larger jpgs in the Carousel with all the titles.

  1. Then just right click "Duplicate" the Carousel in the Overview window.
  2. Then change the jpg's to the *-sm.jpg version.
  3. ..create a separate gallery with the smaller images in them using the same images with *-sm.jpg
  4. Hide the larger picture Carousel at small sizes
  5. Hide the smaller picture Carousel at large sizes

Site responsive downloads

Yep that was my first suggestion :P

I'll be darned. You did!

TABS

  1. In OVERVIEW Click on the "tab" or "link".
  2. In MIDDLE TOP the buttons will change (sometimes they are buggy and you’ll have to save your page and close the project and reopen it to get it to work again, they are still working on this issue I believe).
  3. MIDDLE TOP You should then see “Show”, “Hide” and buttons for adding tabs.
  4. Click the Show button and it will then show you the contents of that tab.