I am new to this area.
I build a navbar with bootstrap 3 and the "load"-function. If I want to use the back button of the browser, it does not work.
What do I have to do to make it work?
Here my simplified code:
index.html:
<nav class="navbar navbar-inverse navbar-fixed-top text-center">
<div class="container">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Link1</li>
<li>Link2</li>
</ul>
</div>
</div>
</nav>
Thanks Schulz
There is no easy way to do this. You would have to use the history object and change the URL every time you click on something that you want to come back to later.
Basically on click you don't only load the remote content but also update the URL. You would also have to use a hash (#) in URL so the page won't refresh. This implies creating a routing mechanism for your app.
Related
I'm newbie in bootstrap and I don't know how to do the following:
I'm working with Django and in my HTML template I have this:
<div class="tabs tabs-vertical tabs-left">
<ul class="nav nav-tabs">
This works fine with large screens, but it looks ugly when I access into the page with my phone, so I need that my template look like this if the screen is xs:
<div class="tabs">
<ul class="nav nav-tabs nav-justified flex-column flex-md-row">
Can this be done with bootstrap? It's necessary to clone the entire div content and hide depending of screen?
Thank you.
Just use javascript to add the classes if the screen width is less that your desired breakpoint. Since you're using Bootstrap, you can use jQuery to make it easier. Example:
if (window.innerWidth <= 500) {
$('#nav').removeClass('tabs-vertical tabs-left');
$('#navUl').addClass('nav-justified flex-column flex-md-row');
}
console.log(document.getElementById('nav').classList);
console.log(document.getElementById('navUl').classList);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs tabs-vertical tabs-left" id='nav'>
<ul class="nav nav-tabs" id='navUl'>
</ul>
</div>
You can use that if statement to do what you want. If you attach it to $(window).resize(); event you can update it to add the styles and remove them responsively.
You could try using mobiledetect.js script, and depending on what device it registers, send it to a different CSS script that would fit it for each type of device (i.e. mobile, pc, etc.)
Script download:
http://hgoebl.github.io/mobile-detect.js/
My bootstrap navbar is loaded through a function call in $(document).ready. This function loads the navbar (in header.html) something like this:
function loadHeader(callback){
$.ajax({
url: "/resources/"+language+"/header.html",
async: true,
success: function (data) {
$('body').append(data);
if(callback){
callback();
}
},
dataType: 'html'
});
}
I've tried setting async=false, but the crawlers will still not pick up the links in the navbar (I've tried with fetch+render through Google search console, as well as through the crawler program Screaming Frog).
The strangest thing is that the navbar is loaded BEFORE several other dynamic page elements, which Google search console has no problem rendering.
Here is a preview of what my navbar (in header.html) looks like:
<nav class="navbar navbar-default navbar-fixed-top index-nav">
<div class="container" style="width:100%;">
<div class="navbrand">
<a class="navbar-brand page-scroll" href="/en/">
<img class="homelogo" src="/logos/company-Logo.png"/>
</a>
</div>
<ul class="nav navbar-nav navbar-left">
<li class="dropdown resourcesLI">
<a class="dropdown-toggle mousePointer" data-toggle="dropdown">Resources</a>
<ul class="dropdown-menu" role="menu">
<li class="Link">Page 1</li>
<li class="Link">Page 2</li>
</ul>
</li>
</ul>
</div>
</nav>
Why aren't my navbar links being picked up by crawlers?
Edit: it should be noted that I'm very new to SEO
Generally I've answered your question in other way in this post:
https://stackoverflow.com/a/38948082/6715875
But if I wana elaborate more for you, I would say to you in a briefly:
All contents which have been updated partially after that DOM loaded, won't be indexed by the search engine crawlers. In these case you can pick some soloutions up which I've mentioned in above link.
Regards.
I'm currently working on a website project using bootstrap for the first time and am experiencing a little problem I think veterans like you can help me with :)
The website has a top menu bar (fixed) which change when displayed on a small screen (like a mobile phone) - with a toggle button that display a sidebar menu.
I'm just trying to get access to the CSS underneath that sidebar but can't modify it without modifiying the main manu bar as well.
I don't know which class CSS i have to create/modify to get what I need :/
<nav class="navbar navbar-default redq" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse">
and a litte below...
<!-- Collect the nav links, forms, and other content for toggling -->
<!-- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> -->
<div class="collapse navbar-collapse">
<a class="navbar-brand mobile pull-left" href="index.html#home" style="font-size:3vw;">MySite 2016</a>
<a class="mobile-menu-close"><i class="fa fa-chevron-right"></i></a>
<ul class="nav navbar-nav nav-list">
Any help or tip would be very much appreciated !
Thanks in advance for your help guys ;D
I identified the issue and hope it will be more understandable that my previous piece of code.
The goal is actually to change the collapse sidebar width but only on mobile version
Putting the style directly in the style attritube works perfectly
<div class="collapse navbar-collapse" style="width:100px;">
But if I try to put it in a CSS class definition, it doesn't work anymore
.collapse.navbar-collapse {
width: 100px;
}
Why is that happening !?
I really can't use the inline declaration because I need the use of #media in order to target only the mobile menu.
That's it, I found it !
I post here the answer for anyone looking for the same result :D
#mobile-menu-wrap
{
width: 10em;
}
This ID is found in script.js and give you full access to the sidebar (mobile) content ;)
I'm trying to append my menu by referring to an external JavaScript file without manually adding the menu in each of my files. How do I go about this? Here is the menu I intend to add. Btw, I'm using bootstrap. I placed the script src before my ending body tag.
<header class="container">
<div class="row">
<img class="col-sm-2" src="..\logo.png" />
<nav class="col-sm-10 navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li>Home</li>
<li>About</li>
<li class="active">Revenge Is A Dish Best Served Cold</li>
<li>Gallery</li>
</ul>
</div>
</nav>
</div>
</header>
Just use innerHTML : https://jsfiddle.net/8zaLv0js/
var ul = document.getElementsByClassName('navbar-nav')[0];
ul.innerHTML = ul.innerHTML + "<li>click me!</li>";
In ES6 you could just
Import './template.html' as template;
document.getElementById('container').append(template);
With the actual standard i guess the easiest way is to use JQuery
$('container').load('./template.html');
I normally use Ruby on rails to develop my work with sublime text as my text editor, but today I am using just using notepad and creating a site locally. Now normally all my js and css is rendered perfectly via the asset pipeline in rails but I am having trouble getting the js to work, in particular the dropdown button in the navbar.
i am calling Jquery within the header
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
And I am calling my bootstrap.js file
<script src="js/bootstrap.js" type="text/javascript"></script>
The css for the navbar is as follows
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse">
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Contact Us</li>
</ul>
</div>
</div>
Am i missing something blindly obvious because the button is not responding?
Any help appreciated
Have you included the required bootstrap.css stylesheet?
<link href="css/bootstrap.min.css" rel="stylesheet">
Edit 1:
Here's a jsBin with your HTML/bootstrap. If you aren't seeing the same output then something is indeed wrong. If you're expecting some behavior when one of the navbar buttons gets clicked, then it isn't actually an error: there is no js behavior attached to the click of the navbar.
Bootstrap will provide you with a "prettified" navbar, it changes the aesthetics but not the behavior, you still need to connect to the individual clicks and define your own behavior for them.
Edit 2:
To connect to the clicks you have to get your menu items and use jQuery to define onclick behaviors. An example would be to define unique ids for each navbar item
<li><a id="home" href="#">Home</a></li>
<li><a id="about" href="#">About Us</a></li>
And then retrieve them with jQuery's selectors and attach click handlers:
$("#home").click(function() {
alert('home clicked');
});
$("#about").click(function() {
alert('about clicked');
});
I've edited the jsbin to add this example.
The CDN wasnt pulling the jquery so i have hosted the file locally now and it works fine