Hi i am creating tab using bootstrap. i know this question asked before many of time but my tab code is bit different i am using button to go on next tab here is my jquery code
$(document).ready(function () {
$(".btn_1").click(function (e) {
e.preventDefault();
var $active = $('.wizard .nav-wizard li.active');
$active.next().removeClass('disabled');
nextTab($active);
});
//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
return false;
}
});
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
Tab code
<ul class="nav nav-wizard">
<li class="active">
Location Information
</li>
<li class="disabled">
Contact Information
</li>
<li class="disabled">
Other information
</li>
<li class="disabled">
Business Keywords
</li>
<li class="disabled">
Upload Pictures
</li>
<li class="disabled">
Upload Videos
</li>
</ul>
i didn't post the rest because it is too big now everything is working fine it is going to next tab but what i want is to on page load it show the active tab not the first one i have also checked this question but again he is using click tab to go to next step and i am using button.
Here is the fiddle of my code
First of all your question in not clear. Try to make it in sync with Twitter Bootstrap. Having said that, what you are trying to do, is not recommended in Bootstrap; which provides these components ready-to-use in websites. Don't try to customize basic components in Bootstrap.
Your issue can be solved using this component in Bootstrap.
Related
I'm trying to hide some elements on a page based on the contents of the specific element in a navbar (formed as a list) which has an active class. Here's what I've tried so far.
var element=document.querySelector('ul.nav > li.active')
if((typeof element != 'undefined')?element.innerText == "Page 1")
{
document.getElementById("options1").style.display = 'none';
}
And the HTML that I need to work with is basically as follows.
<ul class="nav navbar-nav navbar-left">
<li class="active">
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
<div id="options1">Stuff Here</div>
The behavior that I want is that when Page 1 is active, the <div> is hidden, and when all other pages are active, the <div> is visible.
I've tried a bunch of closely related things from stack overflow but haven't managed to get anything to work yet.
Thanks! I'm pretty new to javascript.
You can get the # called by your link with window.location.hash is JS like
if (window.location.hash === "#section-page-1") {
document.getElementById("options1").style.display = 'none';
}
This should work
I have a little problem there. I have accordion tabs with custom a tags. You can see the code below. I made a JS code to autoclick on different tab when the page is loaded. It works nice but it's scrolling down to the tab. I am not good in JS so I just come here to get help or advice. For me it will be better to not use "something a" but "#discussion" because there can be more tabs and I like to choose which tab will be autoclicked by the hash link not with "nth-child".
I can't use ID's on taband can't use jQuery (don't have permissions, just can use JS and adding code to body/head/footer)
Thank you! :-)
<div id="tabs-div" class="some-classes">
<ul id="tabs" class="some-classes">
<li class="ui-state-default ui-corner-top">
Description
</li>
<li class="ui-state-default ui-corner-top">
Discussion
</li>
</ul>
<div>
<script>
$link = $('#tabs li:last-child a');
$link[0].click()
</script>
I'm working on a small project using Bootstrap, and I've come across a weird problem.
Basically, I have this menu with two items, where the first loads another page inside a div, and the second triggers a dropdown menu.
The problem is that if I click on the first item right after I run the file on browser, the dropdown will stop working until I click the first item again.
If I click the second item first, the dropdown will also stop working until I click the first item.
Here's the code:
$('#usuarios').click(function() {
$('#main').load('cns_usuarios.html');
});
$('#canal').click(function() {
$('#main').load('canal.html');
});
$('#campos').click(function() {
$('#main').load('cns_campos.html');
});
<link href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css' rel='stylesheet'>
<link href='index.css' rel='stylesheet'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js'></script>
<ul class='breadcrumb menu'>
<li id='usuarios'><a href='#'>Listar Usuários</a>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>
Configurações
<span class = 'caret'></span>
</a>
<ul class='dropdown-menu'>
<li id='canal'><a href='#'>Canal</a>
</li>
<li id='campos'><a href='#'>Campos</a>
</li>
</ul>
</li>
<li><a href='../index.html'>Sair</a>
</li>
</ul>
<div id='main' class='main'>
</div>
The code contains some stuff in portuguese, but it's pretty much irrelevant so just ignore it.
Also, I've added a few things of my own, but only on the css side. If anyone thinks it might be causing my problem I'll show that part of the code too.
Try this:
<script>
$(document).on('click', '#usuarios', function() {
$('#main').load('cns_usuarios.html');
});
$(document).on('click', '#canal', function() {
$('#main').load('canal.html');
});
$(document).on('click', '#campos', function() {
$('#main').load('cns_campos.html');
});
</script>
I added a dropdown list to the navbar on another site and added the class .open to the list. My intention is as follows: upon load the webpage navbar list contains an img element and opens displaying a promotional offer. So far so good, the page loads and the list drops displaying the ad, and if clicked it then closes.
Ok what I am aiming for is adding a function via jquery or JavaScript or css which will automatically CLOSE the dropdown list after about 5 seconds. I have read that the .open class in bootstraps.min.css is not cleared by default and therefore will remain open unless it is 'clicked' to close it.
<div class="navbar-responsive">
<ul class="nav navbar-nav">
<li class="active">
<li class="open dropdown-menu">
<a href="#" Id="test" class="dropdown-toggle" data- toggle="dropdown"><strong class="caret">
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li>
<img src="image folder/my_ad_image.png"
</li>
</ul>
</li>
</li>
</ul>
</div><!---end nav collapse--->
</div><!---end container--->
</div>>!---end main navbar--->
This above is what I have written. It rests atop an already existing navbar.
Thanks for reading.
If anyone has any suggestion or could point me in the right direction with respect to tying a jquery timeout function to my .open class or id that would be great. So far I have been unable to tie a jquery function or css to my dropdown list
Thanks.
You can use setTimeout() to implement timers in javascript.
The setTimeout() method calls a function or evaluates an expression
after a specified number of milliseconds.
Adapting your code it can be implemented like this:
CSS:
...
<li id="myid" class="open dropdown-menu">
<strong class="caret"></strong>
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li> ... </li>
</ul>
</li>
...
jScript (assuming you're using jQuery):
$(function() {
setTimeout(function() {
$("#myid").removeClass("open")
}, 5000);
});
I have created a menu for my website which you can find here:
http://jsfiddle.net/nq9Nt/9/
When click a category on the menu it opens that category on my main navigation?
Is something conflicting or have I placed my Javascript in the wrong place?
So I want to be able to click a category and show the sub-categories but it just won't work. Also is there a way to keep open the category you clicked after you change page?
Thank you
<ul class="nav">
<li>Category 1
</li>
<li class="drop">Category 2
<ul id="sub1">
<li>Item
</li>
<li>Item
</li>
</ul>
</li>
<li class="drop">Category 3
<ul id="sub1">
<li>Sticker
</li>
<li>Sticker
</li>
</ul>
</li>
<li>Category 4
<ul id="sub1">
<li> Mural
</li>
<li>Mural
</li>
</ul>
</li>
$(".drop")
.on('click', function () {
$(this).find('ul').toggle();
})
Actually at least on jsfriddle animation works and if you replace href of your anchors from '#' to a real url you will be redirected to another page, so first make sure that you've attached jquery library in head of the document (since you use it in your script), then move your script to the bottom of the page, right before tag 'body' closes.
About keeping the state of the opened categories after refresh - usually it is made on server side while generating template by adding class, for example 'active', to current link and then, using css, corresponding category (or a hierarchy of categories) is set to be opened (li.active ul {display: block;} for example). Well, actually you could do the same trick - use js to find out current url with the help of window.location.pathname value and match it with a href value of your navigation links and then assign class 'active' to the found element (or its parent, it is up to your css)
You can add a class drop to li in 4th Category, so it will work as others. And remove that onclick if you don't plan to use it.
http://jsfiddle.net/nq9Nt/10/
Here the example,
jsbin
You have gave the anchor href with #, So It reloads the page. And also you have gave the onclick method, But it doesn't there.