I was working on a mini website project using django. I found bootstrap a while ago and started using some of their features. One that I really liked was the dropdown button.
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Home</li>
<li>Blog</li>
<li>Contact me</li>
</ul>
</li>
But I was having a unexpected "error"/bug. When I click on one of those buttons it will add its href to the url.
And here comes the problem. It will add the href even if the url already contains it. How can I solve this problem and where. On django scripts or with javascript?
The Problem
It looks to me like everything is behaving as it should technically, the problem is with the href target itself.
Since you have a relative link not an absolute one, it assumes it target is relative to the page you are on.
Potential Solutions
1 - Use an absolute link in this case.
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Home</li>
<li>Blog</li>
<li>Contact me</li>
</ul>
</li>
2 - Use the base tag.
This will set a root url for your website, it may cause unexpected results so check and re-check if you use this solution.
HTML Base Tag
Related
I am trying to link my mobile menu to different sections on the homepage. It is a one page website. The links are not working. What is wrong with my mobile menu code? Thanks!
```
<nav id="menu">
<ul>
<li class="active">Home</li>
<li>About Us</li>
<li>Services </li>
<li>Contact</li>
</ul>
</nav>
```
You need to remove index.html in your href or it will reload the page.
Set id for the element you want to link to:
About
And:
<section id="about-section">...
If everything is on one page, you can omit the page name in the link, i.e. just use
<a href="#targetabout">
instead of
<a href="index.html#targetabout">
Note: If (just in case) the linked element has the ID #about, don't use #targetabout, but just #about, like <a href="#about">
Don't include the "index.html" in the href in your links, or it will reload the page. It should just be <a href="#about">, <a href="#services">, etc. I'm not sure why you prefaced them with "target", that's not necessary. These should all correspond to <a name> tags, in the body of the page. Since this is a one-page website, and that <nav> only appears once, you don't need to keep linking to index.html.
<nav id="menu">
<ul>
<li class="active">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<a name="about"><h2>About Us</h2></a>
<!-- your page here -->
<a name="services"><h2>Services</h2></a>
<!-- and so on.... -->
<a name="contact"><h2>Contact</h2></a>
These <a> tags, with no href and only a name, do not visually affect their contents in any way. It's just a sort of "bookmark", to specify where on the page to jump to. For instance, you can't click on them, and they don't appear any different than regular text. You could use this, and it would work (and look) exactly the same.
<a name="about"></a> <h2>About Us</h2>
<a name="services"></a> <h2>Services</h2>
This technique also works with jumping up to the top of a page, as well as jumping down.
It is a bit late, but....
If you use jQuery mobile, this is expected behaviour (see mobile documentation). So you have to scroll to the section yourself:
<script language="JavaScript" type="text/javascript">
function getAnchor() {
return (document.URL.split('#').length > 1) ? document.URL.split('#')[1] : null;
}
function scrollTo(hash) {
if (hash){
location.hash = "#" + hash;
}
}
scrollTo(getAnchor());
</script>
I´m building a simple accordion type menu with bootstrap with this code:
<ul class="level_one">
<li><a data-target=".level_2" data-toggle="collapse">Level One</a>
<ul class="level_2 collapse">
<li><a>Level 2</a></li>
<li><a>Level 2</a></li>
</ul>
</li>
</ul>
<ul class="level_one">
<li><a data-target=".level_2" data-toggle="collapse">Level One</a>
<ul class="level_2 collapse">
<li><a>Level 2</a></li>
<li><a>Level 2</a></li>
</ul>
</li>
</ul>
Althought this code works well, it triggers all elements that has the .level_2 class on it and I want to target only the nested element.
I have tried several CSS selectors inside the data-target attribute but none seems to get only the next element with that specific class.
I have seen a lot of examples that uses the ID to target the desired object but I can´t because this menu will be generated dinamically and for the sake of simplicity I don´t want to create random id names to make them work together neither use extra javascript since this functionallity already works well in bootstrap.
Extra info: There will be a lot of nesting in this menu, it´s not 2 level only menu.
Is there a specific CSS selector that can target the direct simbling that I could insert in the data-target attribute?
I am modifying a site that has a menu with the following code:
<h3>Menu</h3>
<ul class="nav">
<li><a data-scroll href="#home">Home</a></li>
<li><a data-scroll href="#services">Service</a></li>
<li><a data-scroll href="#contact">Contact</a></li>
</ul>
As a user clicks on those links the user will be taken to the corresponding section on that page.
I need to modify this to allow for links that do not point to the same page.
I tried the obvious:
<h3>Menu</h3>
<ul class="nav">
<li>Google</li>
</ul>
but it won't work.
The status bar shows the correct link but when I click the page won't change.
Is there any special code I need to add (links on other places of the page work fine).
As we discussed, Javascript (specifically jQuery preventDefault) can override the default behavior of an anchor (that is to say, follow it). Therefore, check all Javascript for this situation.
Also, a link MUST have an http:// in front of it, to define the resource type. Links only work on the same page or domain if there isn't one.
It is clear to me that
Google
Will not work because you should write it like so:
Google
Give that a try, if the answer is not this, then you should share with us what else you are doing on your site that we cannot simply imagine by the snippet you have shared with us.
I am learning twitter bootstrap 3 these days.
There is a class called "active" in bootstrap. I have seen this feature even in CSS. As I know it indicates the active page or link (probably it is the page that we are currently in). Please correct me if I am wrong. What I need to know is why we need to call such a class in our mark-up. Because it is upto the user to decide which page that he needs to be in.
If I explain this further below mark-up has used class="active" in the 2nd list element. (i.e Profile). When I run the code in a browser it adds a nice blue background to Profile. Why should I add such a class? Active tabs vary when users navigate from one tab to another. Is not it?
<div class="container">
<div class="row">
<nav>
<ul class="nav nav-pills nav-justified">
<li>Dashboard</li>
<li class="active">Profile</li>
<li>Earnings</li>
<li>Settings</li>
</ul>
</nav>
</div>
</div>
With 4 pages in your Navigation, the .active class should be on each different list item from #1 to #4 depending on the page you're in. Below are 4 excerpts for each 4 pages.
Breadcrumbs.html:
<ul class="nav nav-pills nav-justified">
<li class="active">Dashboard</li>
<li>Profile</li>
<li>Earnings</li>
<li>Settings</li>
</ul>
Jumbotron.html:
<ul class="nav nav-pills nav-justified">
<li>Dashboard</li>
<li class="active">Profile</li>
<li>Earnings</li>
<li>Settings</li>
</ul>
FavoutieActors.html:
<ul class="nav nav-pills nav-justified">
<li>Dashboard</li>
<li>Profile</li>
<li class="active">Earnings</li>
<li>Settings</li>
</ul>
Breadcrumbs.html:
<ul class="nav nav-pills nav-justified">
<li>Dashboard</li>
<li>Profile</li>
<li>Earnings</li>
<li class="active">Settings</li>
</ul>
The active class is applied to the navigation element the user is currently viewing.
In the case of your given code, the user is viewing the the profile. It will serve as a guide or reminder to where in the website the visitor is in. That is why the active class is applied, which comes handy when viewing a website with many navigation links.
You can dynamically add the active class to whichever element is active. You can either do this as your page is rendered. Or via JavaScript, if you wish to change the active element without posting back to the server.
From your example, by adding the active class to your 'Profile' item, it should render the item in a way that suggests visually that this is the current item or page you're viewing.
What I need to know is why we need to call such a class in our mark-up. Because it is upto the user to decide which page that he needs to be in.
The user decide what page and the designer and developer decide how its button look while the user on it. The active class can do more than it's just a markup in your page. It could be used to add different look and feel, color effects etc.
Why should I add such a class? Active tabs vary when users navigate from one tab to another. Is not it?
You are not required to add and manage in many usual cases but sometimes you might need. From design point of view, it tells the user that he/she is now here, from programming point of view that class could be used in different ways to assign unique action for that button or other button and not for it.
The same thing for first and last classes we usually add, they allow us to do different scenarios or CSS proprieties for these buttons and/or elements.
Class="active" is usually used to highlight any active content from a selection, mostly in navigation. Let's say in a website with different page links on navigation, just to indicate that the user is on this page, active class highlights that link increasing the usability of navigation.
I have a weirdest thing, in this peace of code a browser adds tags automatically. I disabled all javascript and css, left only simple HTML and still see tags added. Here is my code:
<div id="menu-contact" class="menuNew">
<ul class="navi-list">
<li class="goto">Go to:</li>
<li id="whats">Welcome!</li>
<li>About</li>
<li>Shop</li>
<li><a class="active" href="#menu-contact">Contact</a></li>
</ul>
</div>
and here is what firefox4 sees:
<div id="menu-contact" class="menuNew">
<a> </a>
<ul class="navi-list">
<a>
<li class="goto">Go to:</li>
</a>
<li id="whats">
<a></a>
Welcome!
</li>
<li>
About
</li>
<li>
Shop
</li>
<li>
<a class="active" href="#menu-contact">Contact</a>
</li>
</ul>
</div>
It basically surrounds each tag by a tag. Again, I removed all js and css references..any idea what's going on?? Funny thing, that I have the same code (with unique IDs) in the same page and it renders normally.. only the last snippet adds tags..
My best guess absent a link to a live example is that there is a stray <a> somewhere above that element, and Firefox is attempting to apply it to all the elements below, and of course not having a very happy time of it. A quick HTML validation will reveal if something like that is going on, since either the <a> is unclosed (invalid) or the <ul> is inside it (also invalid).
If that doesn't explain it (which is entirely possible, since I'm just speculating wildly), consider crafting a live example we can inspect in detail. Certainly what you're describing is not normal Firefox behavior, so any clues we can get to what makes your situation different will help.