HTML tabs is not working sample - javascript

i want to display the data in tabs , but here my data is displaying in single tab.
some one please help me out .
</head>
<body>
<div id='childarpt' class='childarpt'>
</br>
<div id="tabs">
<ul>
<li class="active "><span>Total</span></li>
<li><span>USA</span></li>
<li><span>ASIA</span></li>
<li><span>JAPAN</span></li>
<li><span>LATAM</span></li>
<li><span>EMEA</span></li>
</ul>
<table id='myTable' border='0'>
<div id="Total " class="tab active ">
Total
</div>
<div id="USA " class="tab ">
USA
</div>
<div id="ASIA " class="tab ">
ASIA
</div>
<div id="JAPAN " class="tab ">
JAPAN
</div>
<div id="LATAM " class="tab ">
LATAM
</div>
<div id="EMEA " class="tab ">
EMEA
</div>
</table>
</div>
</div>
<script>
$("#tabs ").tabs();
</script>
</body>
</html>
here all the div data is displaying in the first tab , remaining div data is not hiding .


$( "#tabs" ).tabs();
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id='childarpt' class='childarpt' ></br>
<div id="tabs"><ul>
<li class="active"><span>Total</span></li>
<li><span>USA</span></li>
<li><span>ASIA</span></li>
<li><span>JAPAN</span></li>
<li><span>LATAM</span></li>
<li><span>EMEA</span></li>
</ul>
<table id='myTable' border='0'>
<div id="Total" class="tab active">
Total
</div>
<div id="USA" class="tab">
USA
</div>
<div id="ASIA" class="tab">
ASIA
</div>
<div id="JAPAN" class="tab">
JAPAN
</div>
<div id="LATAM" class="tab">
LATAM
</div>
<div id="EMEA" class="tab">
EMEA
</div>
</table>
</div>
Include jquery-lastest.js and jquery-ui.js file. DEMO HERE

Related

Website on mobile is defaulting to search box

When I click a link, ng-view renders a new html page, but its defaulting to the searchbox and zooming in on the page in mobile view.
If you are unsure what I mean, go to http://www.andrewhnovak.com with your phone and you will see what I mean.
How can I have it not default to the search box?
Beef-Recipes.html
<!DOCTYPE html>
<html ng-app="RecipeSite">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.2/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" type="text/css" href="app.css">
<script src="app.js"></script>
<title></title>
</head>
<body>
<div class="container">
<div class="row"> </div>
<div class="row top-buffer"> </div>
<div ng-controller="RecipeController">
<div class="row">
<div class="col-md-offset-5 col-sm-offset-4">
<form class="form-inline">
<input ng-model="query" type="text" class="form-control"
placeholder="Search Beef Recipes" autofocus>
</form>
</div>
</div>
<div class="row">
<div ng-repeat="recipe in BeefRecipes | limitTo: -12 | filter:query | orderBy: 'name' ">
<div class="col-md-3">
<br><br>
<button class="btn btn-warning btn-lg" ng-click="open(recipe)"><img ng-src="{{recipe.image}}" alt="recipeImage" class="recipeImage"/><br>{{ recipe.name }}</button> <br />
</div>
</div>
</div>
</div><!--end recipeController-->
</div><!--end container-->
<!--MODAL WINDOW-->
<div class="container">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h2>Recipe </h2><h3>{{ recipe.name }}</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-3">
<img ng-src="{{recipe.image}}" class="recipeImageModal"/>
</div>
<br>
<br>
<div class="col-md-offset-3 col-md-5 col-sm-offset-1 col-sm-5">
<ul>
<li> {{"Cook Time: " + recipe.cookTime }}</li>
<li> {{"Yield: " + recipe.yield}}</li>
</ul>
</div>
</div>
<div class="row top-buffer"> </div>
<div class="row">
<div class="col-md-offset-2 col-md-6 col-sm-offset-2"><div id="ingredientLabel">Ingredients</div>
</div>
</div>
<div class="ingredients">
<br>
<div class="row">
<div class="col-md-6 col-sm-6">
<ul>
<li>{{recipe.ingredient1}}</li>
<li>{{recipe.ingredient2}}</li>
<li>{{recipe.ingredient3}}</li>
<li>{{recipe.ingredient4}}</li>
<li>{{recipe.ingredient5}}</li>
<li>{{recipe.ingredient6}}</li>
<li>{{recipe.ingredient7}}</li>
<li>{{recipe.ingredient8}}</li>
<li>{{recipe.ingredient9}}</li>
<li>{{recipe.ingredient10}}</li>
<li>{{recipe.ingredient11}}</li>
<li>{{recipe.ingredient12}}</li>
<li>{{recipe.ingredient13}}</li>
<li>{{recipe.ingredient14}}</li>
<li>{{recipe.ingredient15}}</li>
<li>{{recipe.ingredient16}}</li>
<li>{{recipe.ingredient17}}</li>
<li>{{recipe.ingredient18}}</li>
<li>{{recipe.ingredient19}}</li>
<li>{{recipe.ingredient20}}</li>
</ul>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="directionsandlabel"> <div class="directionsLabel">
Directions</div>
<div class="directions">
<ol>
<li> {{recipe.direction1}}</li>
<li>{{recipe.direction2}}</li>
<li>{{recipe.direction3}}</li>
<li>{{recipe.direction4}}</li>
<li>{{recipe.direction}}</li>
</ol>
</div>
</div></div>
</div>
</div>
</div><!--end ingredients class-->
</div>
</div>
</script>
</body>
</html>

How to reduce number of lines in jquery code

I am learning jquery, and need your help. I want to reduce the number of codes here:
I have three buttons on navbar. cart, .account, .help. If I click on cart, I want to hide dropdown menu for account and help. Same goes for other buttons. Here is the jquery code, I have written so far! Could anyone help me to reduce the number of lines of code?
Jquery Code:
$(".cart").click(function(){
$(".cart .dropdown-menu").show();
$(".account .dropdown-menu").hide();
$(".help .dropdown-menu").hide();
});
$(".account").click(function(){
$(".cart .dropdown-menu").hide();
$(".account .dropdown-menu").show();
$(".help .dropdown-menu").hide();
});
$(".help").click(function(){
$(".cart .dropdown-menu").hide();
$(".account .dropdown-menu").hide();
$(".help .dropdown-menu").show();
});
HTML CODE:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-4">
<h1>madison square market</h1>
</div>
<div class="pull-right">
<ul>
<li class="cart dropdown">
<h3>cart ▾</h3>
<ul class="dropdown-menu">
<li>View Cart</li>
<li>Saved Carts</li>
</ul>
</li>
<li class="account dropdown">
<h3>account ▾</h3>
<ul class="dropdown-menu">
<li>View Account</li>
<li>Check Order Status</li>
<li>Sign in</li>
</ul>
</li>
<li class="help dropdown">
<h3>help ▾</h3>
<ul class="dropdown-menu">
<li>FAQs</li>
<li>Return Policy</li>
<li>Shipping Info</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="main">
</div>
<div class="supporting">
<div class="container">
<h2>recent arrivals</h2>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/carrots.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/cauliflower.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/peppers.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="supporting">
<div class="container">
<h2>popular produce</h2>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/potatoes.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/onions.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/tomatoes.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<h3>follow</h3>
<ul>
<li>Twitter</li>
<li>Instagram</li>
</ul>
</div>
</div>
<script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
<script src='script.js'></script>
</body>
</html>

Hello You can reduce it like this
$('.dropdown-menu').prev("h3").on("click",function(){
$('.dropdown-menu').hide();
$(this).next(".dropdown-menu").show();
});

How to show menu items in a pop-up in bootstrap modal dialog box according to the psd?

I'm using Bootstrap v3.3.5 in my website.
Now I've HTML code of modal dialog box as follows :
<div style="display: block; padding-right: 13px;" id="myModal-event" class="modal fade in" role="dialog">
<div role="document" style="width:600px;position:relative;margin:auto;margin-top:10px;">
<div class="modal-content" style="border:0;">
<div role="document" class="modal-dialog event-planner">
<div class="modal-content">
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title">Event Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6 col-md-6 col-sm-12">
<div class="event-title">
NewDemoEvent5
<input name="hid_event_id" id="hid_event_id" value="501" type="hidden">
</div>
<ul>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/time.png" alt=""> 12:00 pm</li>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/calender.png" alt=""> Thursday, January 7</li>
<li>
<img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/location.png" alt="">
Home Nightclub, Sydney, New South Wales, Australia
</li>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/group_event.png" alt="">Group: Boxing Day</li>
</ul>
</div>
<div class="col-sm-6 col-md-6 col-sm-12">
<div class="form-group" align="right">
<select name="user_event_responce" id="user_event_responce" class="form-control" style="width:150px;">
<option value="0">I am..</option>
<option value="1" selected="selected">Going</option>
<option value="2">Maybe</option>
<option value="3">Not Going</option>
</select>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="event-menu">
<ul class="nav nav-tabs" id="myTab">
<li class=""><a aria-expanded="false" href="#description" data-toggle="tab">Description</a></li>
<li>Feeds</li>
<li>Going</li>
<li>Maybe</li>
<li class="active"><a aria-expanded="true" href="#notgoing" data-toggle="tab">Not Going</a></li>
</ul>
</div>
</div>
<hr>
<div class="tab-content">
<div class="tab-pane" id="description">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
DemoEvent5 is added successfully.
</div>
</div>
</div>
<div class="tab-pane" id="feeds">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
Work In Progress
</div>
</div>
</div>
<div class="tab-pane" id="going">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-2 col-sm-2 col-xs-12 no-padding">
<div class="block"> <img src="http://app.campusknot.com/file/pic/user/1585_100_square.jpg" class="img-event" alt="">
<span class="author">Sushil Kadam</span>
<span class="degree"></span>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="maybe">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
</div>
</div>
</div>
<div class="tab-pane active" id="notgoing">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
On this modal dialog I want to show three black colored bold dots and upon clicking on those dots a vertical pop-up menu should open up consisting of menus Edit Event, Invite Members, Delete Event. Each of the menu items should be separated by a horizontal line. When user clicks somewhere else apart from the opened-up menu the menu pop-up should get close.
PFA the psd image for reference of what I need to do.
Three bold black-colored dots are actually got hidden behind the pop-up menu.
I want the exactly same functionality working.
Thanks.

try this HTML which uses bootstrap :
<div class="dropdown">
<p class="dropdown-toggle" data-toggle="dropdown">
<a class="glyphicon glyphicon-option-horizontal"></a></p>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

Retain Same Tab after Ajax Page Reload in Bootstrap Tabs

hi i have a bootstrap tab shown within another bootstrap tab.
i have these content in a html file which is loaded using ajax request. when page is refreshed .if user is in a particular tab say main2 ->sub2 , after the content is loaded i want to show the same main2->sub2 tab not main1->sub1 tab
refresh is triggered using a separate button in main.html
main.html
<a onclick="data_reload_refresh()"><button type="button" class="btn btn-success" id="refresh_button" style="float:right;background-color:#6D6A66;border-color:#312D25;"> Refresh</button> </a>
<#include "./tabs.html">
tabs.html
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6" style="width: 100%; margin-left: -18px;">
<div class="panel with-nav-tabs panel-primary">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active">Main 1</li>
<li> Main 2</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tabone">
<div class="row">
<div class="col-md-6" style="width: 100%">
<div class="panel with-nav-tabs panel-info">
<div class="panel-heading">
<ul class="nav nav-tabs" style="color: red;">
<li>sub 1</li>
<li>sub 2</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tabsub1">1st Tab Sub 1</div>
<div class="tab-pane fade " id="tabsub2">1st Tab Sub 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade " id="tabtwo">
<div class="row">
<div class="col-md-6" style="width: 100%">
<div class="panel with-nav-tabs panel-info">
<div class="panel-heading">
<ul class="nav nav-tabs" style="color: red;">
<li>sub 1</li>
<li>sub 2</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tabsub11">2nd Tab Sub 1</div>
<div class="tab-pane fade " id="tabsub22">2nd Tab Sub 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
tabs.html will be returned by ajax request .i want to retain the tab in both inner and outer tab ,which is shown prior to refresh,after content is refreshed.

Bootstrap Togglable tabs. How can I show the .tab-pane content when I hover over the `.nav-tabs > li`, then hide the content when the mouse leaves?

I have togglable tabs using Twitter Bootstrap. My problem is that my .tab-content is hidden and I want to show it when the mouse pointer enters the .nav-tabs > li and hide it when the mouse pointer leaves the elements.
Here is my code:
<div role="tabpanel" class="tabpanel">
<div class="container">
<!-- company tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">
<a href="#sigma" aria-controls="sigma" role="tab" data-toggle="tab" class="boxopacity">
<span>TAb1</span>
</a>
</li>
<li role="presentation">
<a href="#alpek" aria-controls="alpek" role="tab" data-toggle="tab" class="boxopacity">
<span>TAb2</span>
</a>
</li>
<li role="presentation">
<a href="#nemak" aria-controls="nemak" role="tab" data-toggle="tab" class="boxopacity">
<span>TAb3</span>
</a>
</li>
</ul><!-- .end company tabs -->
<!-- company information -->
<div class="tab-content">
<!-- company sigma -->
<div role="tabpanel" class="tab-pane fade" id="sigma">
<div class="box largebox">
<div class="content">
<h5>Tab1</h5>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Productos principales</h6>
<h6>Mercados</h6>
<ul>
<li>Alimentos</li>
</ul>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Cifras relevantes</h6>
<ul class="relevant">
</ul>
</div>
</div>
<div class="box mediumbox">
</div>
</div>
<!-- company alpek -->
<div role="tabpanel" class="tab-pane fade" id="alpek">
<div class="box largebox">
<div class="content">
<h5>Tab2</h5>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Productos principales</h6>
<h6>Mercados</h6>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Cifras relevantes</h6>
<ul class="relevant">
<li>Plantas</li>
</ul>
</div>
</div>
<div class="box mediumbox">
</div>
</div>
<!-- company nemak -->
<div role="tabpanel" class="tab-pane fade" id="nemak">
<div class="box largebox">
<div class="content">
<h5>Tab3</h5>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Productos principales</h6>
<h6>Mercados</h6>
<ul>
<li>Automortiz.</li>
</ul>
</div>
</div>
<div class="box mediumbox">
<div class="content">
<h6>Cifras relevantes</h6>
<ul class="relevant">
</ul>
</div>
</div>
<div class="box mediumbox">
</div>
</div>
</div><!-- .end company information -->
</div>
</div>
My Jquery:
<script>
$(document).ready(function (){
$('.nav-tabs > li > a').hover(function () {
$(this).tab('show');
}, function () {
});
});
</script>

You can do it with mouseenter & mouseleave like this fiddle I've just created:
http://jsfiddle.net/jep0n6p9/3/
jQuery
$( '.nav-tabs' ).mouseenter( handlerIn );
$( '.tab-content' ).mouseleave( handlerOut );
function handlerIn() {
$('.tab-content').show();
}
function handlerOut() {
$('.tab-content').hide();
}

Please use mouseleave event on nav-tab to hide content of tabs.
Please check this link : http://jsfiddle.net/yLq1df22/
Hope this might be helpful to you.

Categories