Okay, I am trying to add these tabs from twitter bootstrap, I'm not sure what I am doing wrong, but I can't get these things to work! Some could please help me out?
My tab code..
<ul class="nav nav-tabs" id="tabs" data-tabs="tabs">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content" id="my-tab-content">
<div class="tab-pane active" id="home">asdf</div>
<div class="tab-pane" id="profile">fasd</div>
<div class="tab-pane" id="messages">.xzcv</div>
<div class="tab-pane" id="settings">ert.</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#tabs').tab();
});
</script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
</html>
You can activate individual tabs in several ways.
$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
$('#myTab a:first').tab('show'); // Select first tab
$('#myTab a:last').tab('show'); // Select last tab
$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
Try this:
jQuery(document).ready(function ($) {
$('#tabs').tab('show');
});
You may also want to double check that you've got jQuery included in the header...
Related
I want to add tab id to the URL and also want to activate the current tab which tab id in the URL.
If I hit the URL with tab id from another system then the same tab will be active.
I have the added my code:
<div id="faq-accordion">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1"><a href="#tab-2">About us</li>
<li class="tab-link" data-tab="tab-2"><a href="#tab-2">Ordering</li>
<li class="tab-link" data-tab="tab-3"><a href="#tab-2">Payment</li>
</ul>
<div id="tab-1" class="tab-content current">
<div class="accordion-block close">
<div class="accordion-trigger close">
<span>Can order be placed on phone?</span>
</div>
<div class="accordion-content">
<ul>
<li>Yes, we do take orders on the phone</li>
<li>We also take orders via Whatsapp. </li>
</ul>
</div>
</div>
</div>
<div id="tab-2" class="tab-content">
<div class="accordion-block close">
<div class="accordion-trigger close">
<span>Only Part of my order has arrived. Why?</span>
</div>
<div class="accordion-content">
<p>In rare occasions, few of the ordered products are unavailable. In such situations, we try to deliver the orders in parts. In such situations, you will be duly informed by our customer service executive.</p>
</div>
</div>
</div>
</div>
<script>
jQuery(document).ready(function(){
jQuery('ul.tabs li').click(function(){
var tab_id = jQuery(this).attr('data-tab');
jQuery('ul.tabs li').removeClass('current');
jQuery('.tab-content').removeClass('current');
jQuery(this).addClass('current');
jQuery("#"+tab_id).addClass('current');
});
});
</script>
it's so simple, you can handle it yourself with pushstate (to update your URL) or you can use this library which made it piece of a cake already :)
This is my Menu items .
<html>
<body>
<div class="container">
<ul class="nav navbar-nav ct-navbar--fadeIn">
<li class="active">
HEM
</li>
<li>OM OSS</li>
<li>Vilkor</li>
<li>Nyheter</li>
<li>KONTAKTA OSS</li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>
Curently it reamains active on home page even changing to other page. How could i able to make it active of that page on every page changing.
Thanks in advance.
try this
<?php
$myactiveli = $_GET['con'];
?>
<html>
<body>
<div class="container">
<ul class="nav navbar-nav ct-navbar--fadeIn">
<li <?php if($myactiveli==1) { echo 'class="active"'; } ?> >
HEM
</li>
<li <?php if($myactiveli==3) { echo 'class="active"'; } ?>>OM OSS</li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>
u can change index of <li> in .eq() according to page (starts from 0) the active class will aply to that index <li>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".nav").children("li").eq(2).addClass("active");
});
</script>
</head>
<body>
<div class="container">
<ul class="nav navbar-nav ct-navbar--fadeIn">
<li>
HEM
</li>
<li>OM OSS</li>
<li>Vilkor</li>
<li>Nyheter</li>
<li>KONTAKTA OSS</li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>
This jQuery work too for me.
<script>
var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function() {
return this.href == url;
}).parent().addClass('active');
</script>
I'm currently building a site with bootstrap and would like to know if it's possible to, and how to add the class="active" attribute to a link on the nav menu. I saw another post similar to this on this very site, however it didn't work on the page using the Bootstrap carousel. I removed all links to jQuery and other javascript on the page but it still wasn't working.
On each page the nav is called with a php include, as is the code for the link state. So picture the markup like so:
<head>
<?php include_once('head.php'); ?>
</head>
<body>
<?php include_once('nav.php'); ?>
</body>
in the head.php is the following code, which I got from another post on this site:
<script>
/*menu handler*/
$(function(){
function stripTrailingSlash(str) {
if(str.substr(-1) == '/') {
return str.substr(0, str.length - 1);
}
return str;
}
var url = window.location.pathname;
var activePage = stripTrailingSlash(url);
$('.nav li a').each(function(){
var currentPage = stripTrailingSlash($(this).attr('href'));
if (activePage == currentPage) {
$(this).parent().addClass('active');
}
});
});
</script>
and in the nav.php I've got:
<nav class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><img src="assets/img/logo.png" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Services</li>
<li>Home </li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Each page is named as per the href attr.
This works on a duplicate of template.php, however it doesn't work on index.php, which is making me think it's something to do with the carousel...
I've also tried using the data-toggle="pill" as recommended somewhere but that doesn't work.
Any assistance will be appreciated. I'ts on a local vps at the moment, however I can assign it a public IP.
Thanks in advance!
Ash
Because the script is being included in the head.php before the navbar has been loaded, it has nothing to apply the 'active' class to. Perhaps place the JavaScript in a separate include after the navbar.
If that doesn't work, I used this script to apply the active class to a specific menu item, just place it after the navbar include and change the href to the desired 'active' button
<script>
$(document).ready(function(){
$('a[href^="home.html"]').addClass('active');
});
</script>
My goal is to submit the users selection from a bootstrap dropdown menu to $_POST. As I was researching this question I came across this (bootstrap input field and dropdown button submit)
My question is very similar to this one. However, when I tried what the answer to that question recommended it did not work for me for several reasons.
My Code
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Programming Cards
<!--Creats button for navigation when window gets too small-->
<button class = "navbar-toggle" data-toggle = "collapse" data-target= ".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Upload</li>
<li>
<form action="index.php" method="POST" id="my_form">
<input type="hidden" name="topic" id="topic">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Topic Select<b class="caret"></b>
<ul class="dropdown-menu">
<li>Introduction</li>
<li>Methods</li>
<li>Loops</li>
<li>Conditional Logic</li>
</ul>
</a>
</li>
</form>
<script>
$(function()
{
$('.dropdown-menu li').click(function()
{
$('#my_topic').val($(this).html());
$('#my_form').submit();
});
});
</script>
</li>
</ul>
</div>
</div>
</div>
Aspects of code that are not working
When the li is nested inside of the form element the formatting of the dropdown menu changes. I would like the dropdown to be a form but I want it to look like the default bootstrap dropdown.
Attaching an onclick event handler to the li elements simply is not working. Even after the li is clicked, the PHP does not detect any value for $_POST['topic']
Summary of Goal
I would like the default looking bootstrap drop down menu. I would like the user to be able to click on any item in the drop down menu. After the click the selection should be added to the $_POST array at index "topic"
There is a syntax error in your click() code. You missed 2 semi-colons at the end.
$(function()
{
$('.dropdown-menu li').click(function()
{
$('#my_topic').val($(this).html());
$('#my_form').submit();
}); // <-- need a semi-colon here.
}); // <-- and here.
Other than the above:
Your click handler is clearly not being called.
You're using the jquery API, without first linking to the jquery script file.
Do point 2, then remove the outer $(function()...) and instead, use
$(document).ready(function(){
$('.dropdown-menu li').click(function()
{
$('#my_topic').val($(this).html());
$('#my_form').submit();
});
});
And, Check this demo .
Try this
<form action="index.php" method="POST" id="my_form">
<input type="hidden" name="topic" id="topic">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Topic Select<b class="caret"></b>
<ul class="dropdown-menu">
<li>Introduction</li>
<li>Methods</li>
<li>Loops</li>
<li></li>
</ul>
</a>
</li>
</form>
<script>
$(function()
{
$('.dropdown-menu li').click(function()
{
$('#my_topic').val($(this).html());
$('#my_form').submit();
});
});
</script>
if you want to send all navbar, remove hidden field named topic and use next script
<script>
$(function()
{
$('.dropdown-menu li').click(function()
{
$('.dropdown-menu li').each(function()
{
$('#my_form').append('<input type="hidden" name="topic[]" value="'+$(this).html()+'">');
});
$('#my_form').submit();
});
});
</script>
I have 3 columns in my app. Each column has an unordered list. I am using Nestable to drag and drop list items between lists. The mark up is as follows:
<div class="row-fluid span12">
<div class="cf nestable-lists">
<div id="pjax-content">
<div class="span4">
<div class="dd" id="nestable1">
<ul class="dd-list">
<li class="dd-item dd3-item" data-id="123">
<div class="dd-handle dd3-handle">Drag</div>
<div class="dd3-content">
// list content
</div>
</li>
<li class="dd-item dd3-item" data-id="456">
<div class="dd-handle dd3-handle">Drag</div>
<div class="dd3-content">
// list content
</div>
</li>
</ul>
</div>
</div>
<div class="span4">
<div class="dd" id="nestable2">
<ul class="dd-list">
<li class="dd-item dd3-item" data-id="789">
<div class="dd-handle dd3-handle">Drag</div>
<div class="dd3-content">
// list content
</div>
</li>
<li class="dd-item dd3-item" data-id="1011">
<div class="dd-handle dd3-handle">Drag</div>
<div class="dd3-content">
// list content
</div>
</li>
</ul>
</div>
</div>
<div class="span4">
<div class="dd" id="nestable3">
<ul class="dd-list">
<li class="dd-item dd3-item" data-id="1213">
<div class="dd-handle dd3-handle">Drag</div>
<div class="dd3-content">
// list content
</div>
</li>
<li class="dd-item dd3-item" data-id="1415">
<div class="dd-handle dd3-handle">Drag</div>
<div class="dd3-content">
// list content
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
This works and I can drag and drop list items between each list. The problem is when I implement PJAX.
I have a few links that use PJAX to change the url i.e. each link will update the data or order of the data in each list based on the URL. The data updates within id="pjax-content" accordingly, so it works. This is a snippet of the server side code (using CI):
if (isset($_SERVER["HTTP_X_PJAX"])) {
echo $data['contents'];
} else {
// construct views when not PJAX
}
$data['contents'] contains the html as a string.
I have the following JS libraries too (I have tried removing some of these and the problem still exists):
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<script type="text/javascript" src="nestable.js"></script>
<script type="text/javascript" src="nestable-settings.js"></script>
<script type="text/javascript" src="bootstrap-editable.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src='jquery.pjax.js'></script>
<script type="text/javascript">
$(document).pjax('[data-pjax] a, a[data-pjax]', '#pjax-content');
$(document).on('pjax:send', function() {
console.log("before send");
});
$(document).on('pjax:complete', function() {
console.log("done!");
});
</script>
The Problem
When I click on one of the links PJAX works, the data is updated, the page doesn't reload and the console shows before send and done - so all is well. However, the nestable items are no longer selectable so a I can't drag and drop them. When I do a full page refresh it works and I can drag and drop.
I have compared the markup before and after (as that was a previous issue) and everything is the same.
Any suggestions on where I am going wrong? Or how to best debug this?
call nestable after your ajax complete function
$(document).on('pjax:complete', function() {
$('#nestable1,#nestable2,#nestable3').nestable();
});