For example, I would like to link to several of the TABS from the Footer. Also there are 2 locations where I would like to make a link to TAB Contacts. How would you suggest doing that. I've tried various versions as below.
<ul class="list-inline" role="tablist">
<li><a href="#tab-1">House</a></li>
<li><a href="#tab-2">Rates</a></li>
<li><a href="#tab-3">Dates</a></li>
<li><a href="#tab-4">Maps</a></li>
<li><a href="#tab-8">Contacts</a></li>
</ul>
Thanks
That's really a complicated thing and you will need some jQuery to do that.
To be honest you're using tabs to do what a nav should do and in all honesty you are making the nav part of your site a whole lot more work than it needs to be. Tabs aren't usually used as the navigation due to the complexity of trying to link to them. A real pain to say it lightly.
I don't know why you chose to do what you did, but you're going to have a bit of work getting some scripts set up for that to work. You would have been much further ahead had you used a menu and just created pages for your content.
Jo, I am laughing right now, because its funny! Bootstrap Studio was a black box when I started, about 3 weeks ago, I did not know anything, (now I know near to that). When I started, made a Trial that used Tabs, and then asked if I should change it to the Navigation bars. I did not really get too much response to that question, but I did get a lot of really good help from you and Saj on everything!
Of course I was focused on learning and getting the primary stuff working. Right now, having a link from any location in the text areas, or in the Footer, to activate a given TAB such as House, or the others is Secondary. It would be very nice but absolutely not essential. So I am just going to remove those links I had started down at Sticky Footer (where I deleted all the social stuff and was trying to add some links back to specific TABS.)
" Tabs aren’t usually used as the navigation due to the complexity of trying to link to them. A real pain to say it lightly." Yes, I've found that out by trying to change the TAB numbers and then finding out I have to change them back (3x's!) other than that I kind of like them.
"You would have been much further ahead had you used a menu and just created pages for your content." Yes, I guess what you say must be so. Sometime when I know more I'll change this website to use Pages and Navbar, but right now it looks pretty good to me and I am going to publish it and move on to updating the next one.
http://crimson-paper-3666.bss.design/
I'd like to thank both you and Saj for all your help. Learning a bit about Bootstrap has been much better and more rewarding with all of your help and suggestions!!! I've told my friend who suggested BSS that I love it, and I hope she's gone ahead and gotten it now, because she was using bootstrap long before I was.
For example:
You do this
<div class="altTabLinks">
< a href="#tab-1" role="tab" data-toggle="tab">House</a>
< a href="#tab-2" role="tab" data-toggle="tab">Rates</a>
< a href="#tab-3" role="tab" data-toggle="tab">Dates</a>
</div>
which can also be done like this
Click here to look at information about the < span class="altTabLinks">< a href="#tab-1" role="tab" data-toggle="tab">House< /a>< /span>. Then you can look at the < span class="altTabLinks">< a href="#tab-2" role="tab" data-toggle="tab">Rates< /a>< /span>. You can even look it up on the < span class="altTabLinks">< a href="#tab-4" role="tab" data-toggle="tab">Map< /a>< /span>.
And then do this
$(function(){
$("body").on("click",".altTabLinks a[href]",function(){
var $this = $(this).attr("href"),
clickedNavLink = ".nav-tabs [href='" + $this + "']"
$(clickedNavLink).trigger("click");
});
});
Saj
Hey Saj, Thank you! WOW are you good.<br /> I'll give it a go.
I found a really good post of yours about HOW TO ADD NAV SCROLLING using https://blackrockdigital.github.io/startbootstrap-scrolling-nav/. https://bootstrapstudio.io/forums/topic/tips-tricks/#post-1545
Which is an alternative to the TAB which I used for this website. I actually like the results of the TAB quite a lot, but your NAV scrolling might be good for greater amount of information on a page that requires easy access.
Best Rick
And these two posts from Jo about handling CSS. All excellent, and I need to start doing this. https://bootstrapstudio.io/forums/topic/tips-tricks/#post-2432
If you want to use a navbar you will need to remember that when you get to the Tablet and Phone size screen it will turn into the hamburger menu.
Saj
Don't want "hamberger menu" so this is just fine!<br /> Have implemented the alttab's at the bottom that you suggested. Looks pretty good I think. I was trying to set the color of the glyphicons to "success" but couldn't figure out the css. I'll get back to that tomorrow.
I think this will load faster, but I am going to try srcrec later! http://crimson-paper-3666.bss.design/
Thank you!
Saj what does the $(function) do? When I try to minimize the minimizer questions it.
Found it http://stackoverflow.com/questions/7642442/what-does-function-do
That statement is the shorthand version of Document Ready statement which is basically the window.load function http://learn.jquery.com/about-jquery/how-jquery-works/
Normal JS way
window.onload = function() {
alert( "welcome" );
};
jQuery way
$(document).ready(function() {
// Your code here.
});
jQuery shorthand way
$(function() {
// Your code here.
});
Used when you want to run some functions etc... when the website is done loading. If you don't have it then whatever functions etc... you had in between the open and closing ( the // your code here part) would execute immediately once it was reached which might not function correctly because it might execute before another piece of your code hadn't finished loading yet.
Saj
$(function() { // Your code here. }); is good for executing code once everything is loaded and ready. Does <body> javascript wait until all files are loaded and all head scripts are run, then waits some more until action calls for it?