axxion

Thanks to all for your comments. I realize Bootstrap is a "no-no" here, and see from various other sites/postings that there are strong arguments on both sides, but I think I'll give it a go first anyway. But I agree that keeping things simple are the way to go, so among all the templates I've gone through I finally found a much simpler one at Startbootstrap.com which includes the scrolling action I'm after: https://startbootstrap.com/previews/freelancer This would make things simpler, but while still not exactly what I'm looking for I think the overall best solution might be to go for this even more basic scrolling navbar template, then learn from the coding in the other one(s) and slowly build up my own website: https://startbootstrap.com/previews/scrolling-nav I suppose that even with the additional work of getting there it would also mean I'd have more control over all unnecessary "bloat" and just include things I really need.

Actually I have all the content, so the most important part is done. With Wordpress you'll need to add some server-side software, right? I don't think my friend with the server uses that (he's used plain HTML/CSS in the past at least), so that router might be a bit cumbersome for me). PS: I like the bling. That and a simple, clean site.

Thanks for your comments and suggestions on what a documentation type site should be like. This will just be a personal "sharing info" type site and I don't want to put an awful lot of effort/money into it. A friend is running a web-server, and I'll have my HTML/CSS and other files uploaded to there for free. Madcap Flare looks like an a serious tool but is probably overkill for me. I already have Pinegrow web designer and Flux but haven't really dived into their steep learning curves yet. That's when I got the idea to find a suitable template resembling more or less what I want, and copy/paste the additional code (sidebar navigation) for the separate FAQ page using a text editor. I think I can handle that, but I'm not up for creating all this from scratch, and like I said am not prepared putting lots of money into it. As for using Bootstrap -as far as I know it's possible to customize so you just download whatever code you need, to make it lighter. Let me try the links again, this time just copy/pasting the text instead of using the "link" function in this forum: first, here's the "OnePage" template which has the smooth scrooling function as well as other user-interface enhancements I like: https://bootstrapmade.com/demo/OnePage/ ... and another similar functioning template called Munter: https://usebootstrap.com/preview/munter And here's the "PrettyDocs" theme which has a smooth scrolling sidebar (left side) navigation which also show you where you are on the page: https://themes.3rdwavemedia.com/demo/prettydocs/start.html Those were just two examples I found that I liked; there are probably others, and I'm not sure if I could take the sidebar code from the last link and paste it into the first template, or if that would breach some licensing. But again I don't feel qualified to do this from scratch (which would of course eliminate that problem).

I don't know why my links disappeared (I tried to edit the posting after I noticed, but they went away again), but perhaps you have to post a certain number of times here before links are allowed. What do you suggest I go for instead of Bootstrap?

I'd like to create a technical documentation type website and consider starting off with a Bootstrap template like the BootstrapMade OnePage template (demo here) and for an FAQ page use the same template but copy/paste the code for a scrollable navigation left side sidebar with a "breadcrumb" function, such as the one in the PrettyDocs template (demo here). With limited 90s-era web design skills (yikes! 😳 ) I suppose this would be a nice compromise. But the PrettyDocs template license appears not to allow copying/pasting as far as I can see. Are there other similar working/looking sidebar navigations around which I can copy the code from? I'm open for other suggestions and templates to use of course.

For some reason my Bootply demo stopped working. I've uploaded a new working demo. It does however have the following errors: The sidebar navigation doesn't stay in place when scrolling (it should always be visible regardless of where in the document you've scrolled) When clicking on tab 2 or 3 their content documents seem to be loaded in twice, and messes up even when you select tab 1. A browser reload fixes this. I'd be very happy if someone could give me some pointers on how to tie the sidebar nav content together with the relevant tab content, and if possible also point out why the demo doesn't fully work as intended

In order to accomodate for a large FAQ content I've created a combination of 3 tabs with external loading (ajax) of the content in combination with a sidebar navigation system using affix and scrollspy for "breadcrumbs" and quick navigation, all within a Bootstrap 3/JQuery framework. I've got working demos of both on their own (a few minor refinements and adjustments are needed) and a demo combining both. The demo seems to work reasonably well (for some reason my Bootply demo doesn't work quite as well as my stand-alone local files, not sure why) as the external documents are loaded into a DIV via the tabs, and the navigation also works more or less like it should, but what needs to be done if I want the navigation sidebar to reflect the selected tab content? In other words, if I select say tab 2, how do I get a specific nav setup to appear reflecting the content of tab 2, and likewise how to make this change to accomodate for another tab? I assume both the tab content AND nav setup have to simultaneously be loaded into each their own DIV with the help of Ajax. Here's the code, starting with HTML for both the tabs and the nav sidebar: <div class="container bs-docs-container"> <div class="row"> <div class="col-md-9" role="main"> <div class="bs-docs-section"> <!-- tabs with external file Ajax-loading ========================================= --> <div class="container" bs-docs-container"=""> <ul class="nav nav-pills" id="ajaxtabs"> <li class="active"><a href="#tab1" data-url="//s.bootply.com/render/kic8fiBz8Z">First tab (default)</a></li> <li><a href="#tab2" data-url="//s.bootply.com/render/fHXPi1NsSg">Second tab</a></li> <li><a href="#tab3" data-url="//s.bootply.com/render/qSPWoyMljl">Third tab</a></li> </ul> <div class="tab-content"> <div class="tab-pane fade active in" id="tab1">External document not found...</div> <div class="tab-pane fade" id="tab2">External document not found...</div> <div class="tab-pane fade" id="tab3">External document not found...</div> </div> </div> </div> </div> <!-- Bootstrap sidebar navigation with affix and scrollspy ========================================================== --> <div class="col-md-3"> <div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary"> <ul class="nav bs-docs-sidenav"> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a> <ul class="nav"> <li><a href="#section3-1">Sub-section 3.1</a></li> <li><a href="#section3-2">Sub-section 3.2</a></li> <li><a href="#section3-3">Sub-section 3.3</a></li> <li><a href="#section3-4">Sub-section 3.4</a></li> </ul> </li> <li><a href="#section4">Section 4</a> <ul class="nav"> <li><a href="#section4-1">Sub-section 4.1</a></li> <li><a href="#section4-2">Sub-section 4.2</a></li> </ul> </li> <li><a href="#section5">Section 5</a></li> <li><a href="#section6">Section 6</a> <ul class="nav"> <li><a href="#section6-1">Sub-section 6.1</a></li> <li><a href="#section6-2">Sub-section 6.2</a></li> <li><a href="#section6-3">Sub-section 6.3</a></li> </ul> </li> </ul> <a class="back-to-top" href="#top"> Back to top</a> </div> </div> <!-- end of main content div --> </div> </div> Next, the JS for both the tabs and navbar: /* Dynamic ajax tabs */ $('#ajaxtabs a').click(function (e) { e.preventDefault(); var url = $(this).attr("data-url"); var href = this.hash; var pane = $(this); /* ajax load from data-url */ $(href).load(url,function(result){ pane.tab('show'); }); }); /* load first tab content */ $('#tab1').load($('.active a').attr("data-url"),function(result){ $('.active a').tab('show'); }); /* Navigation sidebar with affix and scrollspy */ $(document).ready(function() { /* activate sidebar */ $('#sidebar').affix({ offset: { top: 235 } }); /* activate scrollspy menu */ var $body = $(document.body); var navHeight = $('.navbar').outerHeight(true) + 10; $body.scrollspy({ target: '#leftCol', offset: navHeight }); /* smooth scrolling sections */ $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top - 50 }, 1000); return false; } } }); }); Finally, here's one of the external documents which is loaded into the tabs (there are 3 of them, one for each tab, styled slightly differenly in order to distinguish them from each other). <style TYPE="text/css"> .bs-docs-section { font: bold large cursive; border:1px solid #000000; background-color:#ff9900; } </style> <div class="container bs-docs-container"> <div class="row"> <div class="col-md-9" role="main"> <div class="bs-docs-section"> <h3 id="section1" class="page-header">section 1.</h3> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? <h3 id="section2">sect. 2.</h3> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? <h3 id="section3">section 3.</h3> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? <h3 id="section3-1">section 3.1</h3> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? <h3 id="section3-2">section 3.2</h3> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? <h3 id="section3-3">section 3.3</h3> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? <h3 id="section3-4">section 3.4</h3> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? <h3 id="section4">section 4.</h3> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? <h3 id="section4-1">section 4.1</h3> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? <h3 id="section4-2">section 4.2</h3> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? <h3 id="section5">section 5.</h3> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? <h3 id="section6">section 6.</h3> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? <h3 id="section6-1">section 6.1</h3> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? <h3 id="section6-2">section 6.2</h3> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? <h3 id="section6-3">section 6.3</h3> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? </div> </div> </div> </div>

It works! It's .load based and works fine with external documents. Here's the code: <div class="container"> <ul class="nav nav-pills" id="ajaxtabs"> <li class="active"><a href="#tab1" data-url="tab1.html">First tab (default)</a></li> <li><a href="#tab2" data-url="tab2.html">Second tab</a></li> <li><a href="#tab3" data-url="tab3.html">Third tab</a></li> </ul> <div class="tab-content"> <div class="tab-pane fade active in" id="tab1">External document not found...</div> <div class="tab-pane fade" id="tab2">External document not found...</div> <div class="tab-pane fade" id="tab3">External document not found...</div> </div> </div> $('#ajaxtabs a').click(function (e) { e.preventDefault(); var url = $(this).attr("data-url"); var href = this.hash; var pane = $(this); // ajax load from data-url $(href).load(url,function(result){ pane.tab('show'); }); }); // load first tab content $('#tab1').load($('.active a').attr("data-url"),function(result){ $('.active a').tab('show'); }); And here's a working example. Does the code seem OK?

Codepen looks useful and something I'll have to look closer at later. I just remembered that I found an external reference at Bootply.com. This snippet (Bootstrap based ajax tabs) links to external HTML content files as shown here: <div class="container-fluid"> <ul class="nav nav-tabs" id="myTabs"> <li class="active"><a href="#home" data-url="/embed/62805/view">Home</a></li> <li><a href="#profile" data-url="/embed/62806/view">Profile</a></li> <li><a href="#messages" data-url="/embed/62807/view">Messages</a></li> </ul> The first link above (/embed/62805) links to another snippet at http://bootply.com/62805 so why won't the same code work if I create an HTML snippet myself, then replace the "62805" with that Bootply code (whatever comes after http://bootply.com/). Entering the full URL instead of using "/embed/" doesn't work either. I just don't understand the syntax used here.

I'm working on some Javascript and HTML code which I need some help with, but I'm not sure where to go for doing that. I've tried JSfiddle which seems nice and user-friendly, but I can't figure out how to add external HTML files (I'm working on something involving Ajax loading of external documents, based on Jquery and Bootstrap). As for Github I haven't figured out that one yet. Perhaps I'm looking in the wrong places... Suggestions?

Aha! So vector graphics (SVG) can also be used for animation on its own, just like there are animated GIFs? Nillervision: By "static" I meant bitmap (as opposed to scaleable vector graphics). Sorry, wrong term. I see by your example that resizing it works fine. Cibgraphics: I haven't yet designed any logo file but just have an idea. It should just be some additional "spice" to the website, not too much attention grabbing. I was initially thinking of just animating parts of the logo, but am open for ideas. Unfortunately there aren't many websites out there (as far as I can see) which have animated logos. Then again fortunately as the site won't just be one of many, but stand out :-) rbrtsmith: With all the possibilities, when would you use an animated GIF, an animated SVG, an SVG animated by CSS and animated by JavaScript? I couldn't see any animation in your Bartendebolaget.se website. A subtle example I'm considering doing something similar to is the logo on the top right hand corner at Seelake.com. I believe that particular one is a Flash animation, but could probably be made as an animated GIF as well and scaled down for a responsive site.

I got this idea for an animated logo, and unlike a static animated GIF I'm wondering if it's possible somehow to create it so that it also resizes according to the viewing device (desktop computer, laptop, tablet, smart phone etc.)?

No, I've been using MAMP instead as suggested, and I've more or less given up on the code I've tried. In the meantime I came across this example at Bootply which does work with external files and uses the .load method as suggested earlier. I don't know how to add external files to JSfiddle or I'd upload a working demo of what I have locally, suffice to say here's the full code, first the HTML: <div class="container"> <ul class="nav nav-tabs" id="myTabs"> <li class="active"><a href="#home" data-url="tab1.html">Home</a></li> <li><a href="#profile" data-url="tab2.html">Profile</a></li> <li><a href="#messages" data-url="tab3.html">Messages</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home">This is the home pane...</div> <div class="tab-pane" id="profile"></div> <div class="tab-pane" id="messages"></div> </div> </div> Next, the Javascript: $('#myTabs a').click(function (e) { e.preventDefault(); var url = $(this).attr("data-url"); var href = this.hash; var pane = $(this); // ajax load from data-url $(href).load(url,function(result){ pane.tab('show'); }); }); // load first tab content $('#home').load($('.active a').attr("data-url"),function(result){ $('.active a').tab('show'); }); And the first (tab1.html) of the three "external content" HTML files: <h2>One</h2> <p>This is the content of the first tab!</p> The downside is the above is made for Bootstrap 2.3.2. (not version 3 which I'm basing the rest of my site upon) and I suppose an equally outdated Jquery version, and it doesn't do the fade effect when switching tabs. On the other hand, Eric Saupe's "Bootstrap tabs with dynamic content loading" documentation has resulted in this example which does indeed work with the latest Bootstrap version and has the fade effect when switching tabs, but most importantly the external loading feature itself doesn't work at all (or I' haven't fully understood how to). Also it doesn't utilize the .load method. So with these two examples I'm wondering what I have to do to use the Bootply example as the working core but with the Bootstrap 3 compatibility, the fade effect and the .load based javascript code of the above listed code/Bootply working demo?

I don't know what/where "console.log" is/is located, but it seems the "web developer" Firefox extension does this in its own "console" section. Here's what comes up when I load or reload my HTML document (and I've added the semicolons in the JS Ajax code): GET http://localhost:8888/saupe_tabs_external_ajax.html [HTTP/1.1 304 Not Modified 0ms] GET http://localhost:8888/css/bootstrap.min.css [HTTP/1.1 304 Not Modified 0ms] GET http://localhost:8888/css/docs.min.css [HTTP/1.1 304 Not Modified 0ms] GET http://localhost:8888/js/ie-emulation-modes-warning.js [HTTP/1.1 304 Not Modified 0ms] GET http://localhost:8888/js/jquery.min.js [HTTP/1.1 304 Not Modified 0ms] GET http://localhost:8888/js/bootstrap.min.js [HTTP/1.1 304 Not Modified 0ms] GET http://localhost:8888/js/docs.min.js [HTTP/1.1 304 Not Modified 0ms] GET http://localhost:8888/js/ie10-viewport-bug-workaround.js [HTTP/1.1 304 Not Modified 0ms] GET http://localhost:8888/assets/flash/ZeroClipboard.swf [HTTP/1.1 404 Not Found 0ms] However, I'm not getting any response at all when I click on one of the tabs. But if I right-click on a tab and choose "Open link in new tab" (or "open link in new window") the HTML document which Ajax is supposed to load comes up on its own, so all three URLs are apparently OK.

Thanks for suggesting MAMP which is now installed and running successfully on my Mac. The Jquery and bootstrap JS links were originally placed near the end of the HTML document (for faster loading according to the comments of the Bootstrap starter template I'm using), but I've moved them to the top (just after the </title> tag) along with all the other JS and CSS loading links, then placed the Ajax code after that within "script" tags as follows: <!-- Ajax for Bootstrap tabs --> <!-- source: http://ericsaupe.com/tag/bootstrap-3-tabs-example-ajax/ --> <script> $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { var target = $(e.target).attr("href") // activated tab if ($(target).is(':empty')) { $.ajax({ type: "GET", url: "/article/", error: function(data){ alert("There was a problem"); }, success: function(data){ $(target).html(data); } }) } }) </script> Alas this hasn't made any difference, so perhaps the code itself is at fault. With Firefox I've installed the Firebug extension and it gives me the following error message: "NetworkError: 404 Not Found - http://localhost:8888/assets/flash/ZeroClipboard.swf?noCache=1417000685722" It seems to point to a ShockWave Flash error, but the testpage doesn't involve any Flash, so what could this mean? I've taken a brief look at the .load code you suggested but see I have to spend some time with this as I have no prior JS knowledge. If the .load method is simpler but does the same thing as $ajax, can I use it with the existing Bootstrap tabs and existing JS library?