Develop Reference

How to toggle vertical tabs with vertical text and content using jquery

This code is displaying vertical tabs with vertical text and content. Toggle is not working properly, when I click on second tab, first content is also displaying. Can anyone help me to get the content of individual tabs? Here I have mentioned html, css and javascript code. Is it possible in Jquery? Can anyone mention the details?
<main id="main">
<section id="portfolio">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-4">
<div class="vtab">
<div class="col-xs-3">
<ul class="nav nav-tabs tabs-left vertical-text">
<li class="active">Home
</li>
<li>Profile</li>
</ul>
</div>
<div class="col-xs-9">
<div class="tab-content">
<div id="left" >
<div>
<ul id="tree1" >
<li id="li2">News
<ul>
<li>Company Maintenance</li>
<li>Employees
<ul>
<li>Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
<li id="li2">Sites
<ul>
<li>Company Maintenance</li>
<li>Employees
<ul>
<li>Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="tab-pane" id="profile-v">Profile Tab.</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript">
$.fn.extend({
treed: function (o) {
var openedClass = 'glyphicon-minus-sign';
var closedClass = 'glyphicon-plus-sign';
if (typeof o != 'undefined'){
if (typeof o.openedClass != 'undefined'){
openedClass = o.openedClass;
}
if (typeof o.closedClass != 'undefined'){
closedClass = o.closedClass;
}
};
var tree = $(this);
tree.addClass("tree");
tree.find('li').has("ul").each(function () {
var branch = $(this); //li with children ul
branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
branch.addClass('branch');
branch.on('click', function (e) {
if (this == e.target) {
var icon = $(this).children('i:first');
icon.toggleClass(openedClass + " " + closedClass);
$(this).children().children().toggle();
}
})
branch.children().children().toggle();
});
tree.find('.branch .indicator').each(function(){
$(this).on('click', function () {
$(this).closest('li').click();
});
});
tree.find('.branch>a').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
tree.find('.branch>button').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
}
});
$('#tree1').treed();
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"
rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js">
</script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-
combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-
bootstrap/2.3.2/js/bootstrap.min.js"></script>

You forgot both import of jQuery (JSfiddle console raised that error) and Boostrap classes (tab-pane) and ids (the content of the href of the a tag) on tabs panels.
Here the right code:
jQuery Script from CDN:
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
Here the right panel code:
<section id="portfolio">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-4">
<div class="vtab">
<div class="col-xs-3">
<hr/>
<ul class="nav nav-tabs tabs-left vertical-text">
<li class="active">Home</li>
<li>Profile</li>
</ul>
</div>
<div class="col-xs-9">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane" id="home-v">Home Tab.</div>
<div class="tab-pane" id="profile-v">Profile Tab.</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</section>
I simplified the code inside the Home panel in order not to post a big piece of code, which was not relevant.
Hope this helps!
Working codepen link with full code.

add separator listview jquery mobile

i have jquery mobile list view.
can anybody help me please, to customize this listview.
i want to customize the separator between list, so its will look like this
here is my code
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://demos.jquerymobile.com/1.2.1/docs/_assets/js/jqm-docs.js"></script>
<script src="http://demos.jquerymobile.com/1.2.1/js/jquery.mobile-1.2.1.js"></script>
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.2.1/css/themes/default/jquery.mobile-1.2.1.css" />
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.2.1/docs/_assets/css/jqm-docs.css"/>
<div data-role="page" id="mainn">
<div data-role="header" data-tap-toggle="false" data-theme='b'>
</div>
<div data-role="content">
<ul id="promoList" data-role="listview" >
<li>
<img src="airasia.jpg" >
<span class="ui-li-count">test 123</span>
</li>
<li>
<img src="d1380513326.jpg">
<span class="ui-li-count">test 124</span>
</li>
</ul>
</div>
</div>

Have a <a href=""> tag change another tags class with jquery

Yet again kind of hard for me to explain but:
I have a navbar where i am using tabs instead of different pages, now in the body of the page i have a tag that says "Click Here" and when you click it, it takes you to the different tab. This works all good but what i want it to do is change the tab that its redirected you to, to make it active (as in add "active" class to the li tag)
My Code:
INDEX.HTML: https://codetidy.com/8755/
Thanks

<html>
<head>
<!-- Bootstrap CSS framework -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
<!-- Custom Styles -->
<link href="css/style.css" rel="stylesheet">
<!-- Font-Awesome Icons -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- JQuery JS -->
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<!-- Bootstrap JS Framework -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body onLoad="move()">
<!-- If your using a mobile device this script will redirect you -->
<style>
#myTab li.active{background:#eeeeee;}
</style>
<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "mobile.html";
}
//-->
</script>
<!-- End redirection script -->
<!-- When each item on the navbar is selected it will change the selected tab to an
active tab so it will add the .active {} css and an active class to the li -->
<script>
$(function () {
$('#myTab a:first').tab('show')
$('#myTab li:first').addClass('active')
});
</script>
<!-- End Active Tabs -->
<!-- Active Tabs for individual hyperlinks -->
<script>
$(document).ready(function(){
$("#atab" ).click(function() {
var myHref=$(this).attr('href');
//console.log(myHref);
$('#myTab li a').each(function(){
if($(this).attr('href')== myHref){
$('#myTab li').removeClass('active');
$(this).closest('li').addClass('active');
}
})
});
});
</script>
<!-- End Active Tabs for individual hyperlinks -->
<!-- The Div ID's myBar and MyProgress create a border-bottom looking style for the bottom of the navbar but instead
of it staying still while the page loads it will show what needs to be loaded (at the current time it only
goes through a basic interval and is not moving depending on scripts that have loaded) -->
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
<!-- Navbar -->
<nav class="navbar navbar-light bg-faded">
<div class="container">
<a class="navbar-brand" href="index.html">Navbar</a>
<ul class="nav navbar-nav pull-right" id="myTab" role="tablist">
<li class="nav-item" onClick="move()">
<a class="nav-link" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
</li>
<li class="nav-item" onClick="move()">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">About</a>
</li>
<li class="nav-item" onClick="move()">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Resources</a>
</li>
<li class="nav-item" onClick="move()">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Data</a>
</li>
</ul>
</div>
<div id="myProgress">
<div id="myBar"></div>
</div>
</nav>
<!-- End of Navbar -->
<!-- Body Information -->
<div class="container tab-content">
<!-- Home Page -->
<div class="tab-pane active" id="home" role="tabpanel">
<div class="container">
<div class="jumbotron highlight">
<div class="information">
<h2>Internet Privacy<h2>
<p>Welcome to the website this is where you can find out about Internet Privacy, click <a id="atab" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">HERE</a> to learn more</p>
<!-- When selecting the "HERE" hyperlink the tab About will become active. -->
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="jumbotron">
<p class="inforamtion">This is the grid system</p>
</div>
</div>
<div class="col-md-6">
<div class="jumbotron">
<p class="information">This is a different grid size</p>
</div>
</div>
<div class="col-md-3">
<div class="jumbotron">
<p class="information">There multiple sizes in the grid but this is the same as the first one</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Home Page -->
<!-- Start About Page -->
<div class="tab-pane" id="profile" role="tabpanel">
<div class="container">
<!-- Bread crumb -->
<ol class="breadcrumb" style="margin-bottom: 5px;">
<li><a data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a></li>
<li class='active'>About</li>
</ol>
</div>
</div>
<!-- End About Page -->
<!-- Start Resources Page -->
<div class="tab-pane" id="messages" role="tabpanel">
<div class="container">
<!-- Resources Tab -->
<p>Content3</p>
</div>
</div>
<!-- End Resources Page -->
<!-- Start Data Page -->
<div class="tab-pane" id="settings" role="tabpanel">
<div style="padding-top: inherit;" class="container">
<!-- Data Tab -->
<p>Content4</p>
</div>
</div>
<!-- End Data Page -->
</div>
<!-- End of body information -->
</body>
</html>
Is this what you need?

Top bar not working in foundation 4.3.2 version?

in my previous project , i have used the foundation 4 open source. that time i have got a top bar navigation. but now am again trying new project with foundation. for that i have downloaded http://foundation.zurb.com/develop/download-f4.html that is foundation4.3.2 version. i have refereed the foundation 4.3.2 version css and js in my new project, but the top-bar not coming its showing like tree view without any effort of foundation ?
if i refer the foundation 4 , top - bar is working...
then
why Top-bar not working while i refereeing the foundation 4.3.2 version ?
HTML code
<html>
<head id="head2" runat="server">
<meta charset="UTF-8" />
<asp:ContentPlaceHolder ID="Title" runat="server">
<title>sample project</title>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>
<link href="../../Scripts/css/foundation.css" rel="Stylesheet" type="text/css" />
<script src="../../Scripts/js/foundation.min.js" type="text/javascript"></script>
<script src="../../Scripts/js/vendor/custom.modernizr.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="row">
<div class="large-12 columns">
<img src="../../Scripts/img/logo.png" />
</div>
</div>
<div class="row">
<div class="large-12 column">
<nav class="top-bar">
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown">Moderate</li>
<ul class="dropdown">
<li>Moderate Posts</li>
<li>New Post</li>
<li>Send E-mail</li>
</ul>
<li class="divider"></li>
<li class="has-dropdown">Options</li>
<ul class="dropdown">
<li>Statistics</li>
<li>Users</li>
<li>Change Password</li>
<li>Reports</li>
</ul>
<li class="divider"></li>
<li class="has-dropdown">Configuration</li>
<ul class="dropdown">
<li>Categories</li>
<li>Fields</li>
<li>Locations</li>
<li>Localities</li>
<li>E-mail Templates</li>
<li>Admin Users</li>
</ul>
</ul>
</section>
</nav>
</div>
</div>
<div class="row" >
<div class="large-12 columns ">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="row" >
<div class="large-12 columns ">
Copyright #2014
</div>
</div>
<script type="text/javascript">
document.write('<script src=' +
('__proto__' in {} ? '../../Scripts/js/vendor/zepto' : '../../Scripts/js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="../../Scripts/js/foundation.min.js" type="text/javascript"></script>
<script src="../../Scripts/js/foundation/foundation.topbar.js"></script>
<script type="text/javascript">
$(document).foundation();
function setLayout() {
winWid = $(window).width();
if (winWid > 750) {
$(".trd").each(function (index) {
ht = $(this).height();
$(this).parent().closest('.row').find('.advt').css('height', ht - 16 + "px");
})
}
}
$(window).resize(function () {
setTimeout("setLayout()", 1000);
});
setLayout()
</script>
</form>
</body>
</html>
Note: There is no error i found out at run time.. but my web page showing like tree view ( i used ul and li element) without any effort of foundation 4.3.2 version.
My web page should look like below image

The following should work:
<html>
<head id="head2" runat="server">
<meta charset="UTF-8" />
<asp:ContentPlaceHolder ID="Title" runat="server">
<title>sample project</title>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>
<link href="../../Scripts/css/foundation.css" rel="Stylesheet" type="text/css" />
<script src="../../Scripts/js/vendor/custom.modernizr.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="row">
<div class="large-12 columns">
<img src="../../Scripts/img/logo.png" />
</div>
</div>
<div class="row">
<div class="large-12 column">
<nav class="top-bar">
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown">Moderate
<ul class="dropdown">
<li>Moderate Posts</li>
<li>New Post</li>
<li>Send E-mail</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown">Options
<ul class="dropdown">
<li>Statistics</li>
<li>Users</li>
<li>Change Password</li>
<li>Reports</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown">Configuration
<ul class="dropdown">
<li>Categories</li>
<li>Fields</li>
<li>Locations</li>
<li>Localities</li>
<li>E-mail Templates</li>
<li>Admin Users</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
</div>
<div class="row">
<div class="large-12 columns ">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="row">
<div class="large-12 columns ">
Copyright #2014
</div>
</div>
<script type="text/javascript">
document.write('<script src=' +
('__proto__' in {} ? '../../Scripts/js/vendor/zepto' : '../../Scripts/js/vendor/jquery') +
'.js><\/script>');
</script>
<script src="../../Scripts/js/foundation.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).foundation();
function setLayout() {
winWid = $(window).width();
if (winWid > 750) {
$(".trd").each(function (index) {
ht = $(this).height();
$(this).parent().closest('.row').find('.advt').css('height', ht - 16 + "px");
})
}
}
$(window).resize(function () {
setTimeout("setLayout()", 1000);
});
setLayout()
</script>
</form>
</body>
</html>
I've done a few things here. First and foremost, I just formatted the code so it could be read easier. Second, I removed the call to foundation.min.js in the head. You're calling foundation.min.js at the foot of the body, and including it twice can cause confusion with naming variables. I also removed your call to foundation.topbar.js because this file is included in the minified script you've already included. Last I re-worked your dropdown menus so that Foundation could interpret them properly. Foundation expects to the dropdown menu to be within the parent li element. I also made the dropdown li text into anchors in accord with Foundation documentation.
Oh, and I added a semi-colon to the document.write() statement that includes jQuery/zepto.

This is not foundation 4.3.2 version problem. actually i have made some changes in foundation.css itself.. that made the problem for my web page. after i deleted changes made in the foundation.css then got the top-bar navigation.
So we dont make changes in the foundation.css itself.
better we can create customized css for our references.

Metro UI library : Css not loading

I am trying to use the metro UI css library but I can't figure out why my navbar css is not working.
Here's my html file code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>TelePrint Blog</title>
<link rel="stylesheet" href="http://localhost/teleprintblog/assets/css/metro-bootstrap.css">
<script src="http://localhost/teleprintblog/assets/js/jquery.js"></script>
<script src="http://localhost/teleprintblog/assets/js/metro.min.js"></script>
</head>
<body>
<nav class="navigation-bar dark fixed">
<nav class="navigation-bar-content">
<div class="element">
<a class="dropdown-toggle" href="#">METRO UI CSS</a>
<ul class="dropdown-menu" data-role="dropdown">
<li>Main</li>
<li>File Open</li>
<li class="divider"></li>
<li>Print...</li>
<li class="divider"></li>
<li>Exit</li>
</ul>
</div>
<span class="element-divider"></span>
<a class="element brand" href="#"><span class="icon-spin"></span></a>
<a class="element brand" href="#"><span class="icon-printer"></span></a>
<span class="element-divider"></span>
<div class="element input-element">
<form>
<div class="input-control text">
<input type="text" placeholder="Search...">
<button class="btn-search"></button>
</div>
</form>
</div>
<div class="element place-right">
<a class="dropdown-toggle" href="#">
<span class="icon-cog"></span>
</a>
<ul class="dropdown-menu place-right" data-role="dropdown">
<li>Products</li>
<li>Download</li>
<li>Support</li>
<li>Buy Now</li>
</ul>
</div>
<span class="element-divider place-right"></span>
<a class="element place-right" href="#"><span class="icon-locked-2"></span></a>
<span class="element-divider place-right"></span>
<button class="element image-button image-left place-right">
Sergey Pimenov
<img src="images/211858_100001930891748_287895609_q.jpg"/>
</button>
</nav>
</nav>
<header class="headerr row">
<div class="col-md-6" style="border:3px solid #F00;">
<img src="http://localhost/teleprintblog/assets/img/logo.png"
class="img-responsive" alt="logo"/>
</div>
<div class="col-md-6" style="border:3px solid #F00;">
</div>
</header>
<section class="row">
<div class="col-md-1 col-xs-offset-1"
style="border:3px solid #00F;z-index:3;position:relative;">
asdasda
</div>
</section>
</body>
</html>
The UI is not appearing properly for the nav-bar although I've loaded the required files.What is causing the problem ?
I've copied the navbar code from here.

Change:
<nav class="navigation-bar dark fixed">
To:
<nav class="navigation-bar dark fixed-top"> <!-- Or fixed-bottom -->
As stated in the documentation:
You can create fixed (top or bottom) navigation bar with built in subclasses `.fixed-top, .fixed-bottom.

The issue with Metro Bootstrap UI CSS aka http://metroui.org.ua/ is this:
You load the theme to localhost, or mabe into a MCV framework, and the dropdown doesnt work! Right?
Okay so look for this line in the html file
<script src="js/load-metro.js"></script>
This is where the problem is.
You can open this file and see the contents - its best to use a full url to include the JS files. I myself removed this line from my files:
<script src="js/load-metro.js"></script>
And I replaced it with the contents:
<script type="text/javascript">
$(function(){
if ((document.location.host.indexOf('.dev') > -1) || (document.location.host.indexOf('modernui') > -1) ) {
$("<script/>").attr('src', '<?=base_url('adminstyle')?>/js/metro/metro-loader.js').appendTo($('head'));
} else {
$("<script/>").attr('src', '<?=base_url('adminstyle')?>/js/metro.min.js').appendTo($('head'));
}
})
</script>
now you will notice I use base_url() - this is for my case only. Replace that with your full url and walla the dropdown should be working.