I have made a website using the newest version of bootstrap and started from the cover template. I changed the navbar to one from the documentation, causing the webpage to be too long for the screen. At the bottom of the screen there is a strip of a different colour which seems to be the part that is too long, looking like the screenshot belowHow do I remove this so that the screen doesn't scroll when there is not content there.
I am not looking for a solution for it to never scroll as there may sometimes be content that extends to there, but I would like it to have the lighter grey background
This is the full code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Past Paper Website</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="cover.css" rel="stylesheet">
<!-- AJAX Code -->
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","Ajax_bootstrap_0.php?q="+str,true);
xmlhttp.send();
}
}
function runUser(str) {
if (str == "") {
document.getElementById("show").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("show").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","Ajax_bootstrap.php?second="+str,true);
xmlhttp.send();
}
}
</script>
<style type="text/css">
body { background: #404040 !important; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
</style>
<style type="text/css">
body {
overflow-x:hidden;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark #404040">
<a class="navbar-brand" href="#">Past Paper Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Areas to improve</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Add Paper</a>
</li>
</ul>
</div>
</nav>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<!-- Dropdown -->
<form>
<div class="form-group row">
<div class="col-sm-2"></div>
<label for="chooseyear" class="col-sm-1 col-form-label">Subject</label>
<div class="col-sm-7">
<div class="col-sm-2"></div>
<select class="form-control" name="users" onchange="showUser(this.value)" id="chooseyear">
<option value="">Select a Subject:</option>
<?php
$extract="Done";
include("database_info.php");
$servername = servername;
$username = username;
$password = password;
$dbname = dbname;
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("" . $conn->connect_error);
}
echo "";
$sql = "SELECT DISTINCT Subject FROM Papers";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<option value=".$row["Subject"].">".$row["Subject"]."</option>", "\n";
}
}
$conn->close();
?>
</div>
</select>
</form>
</div>
</div>
<br>
<!-- Table -->
<div id="txtHint"><b>Select a Subject</b></div>
</div>
<div class="mastfoot">
<div class="inner">
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>
Codepen:https://codepen.io/anon/pen/ypPKOZ
Add position: fixed to site-wrapper element in your CSS.
Here is an updated Codepen for your review.
Related
I want to change the background color of this nav when active/clicked, how can I achieve this? using css
<div class="row container-fluid mainTabCon" style="width: 100%" style="">
<ul class="nav nav-pills" style="margin: 0 auto; ">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#"><strong>GENERALIDADES</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#"><strong>DESEMPEÑO</strong></a>
</li>
</ul>
</div>
help is appreciated
Add this script to the end of the body or your script file:
(taken from w3 schools and adjusted to you)
// Get the container element
var btnContainer = document.getElementById("myDiv");
// Get all buttons with class="btn" inside the container
var lis = btnContainer.getElementsByClassName("nav-link");
// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
Then just style the .active class:
.active {
background-color: blue;
}
Full page with code described:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css">
.active {
background-color: blue;
}
</style>
<body>
<div class="row container-fluid mainTabCon" id="myDiv" style="width: 100%" style="">
<ul class="nav nav-pills" style="margin: 0 auto; ">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#"><strong>GENERALIDADES</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#"><strong>DESEMPEÑO</strong></a>
</li>
</ul>
</div>
<script>
// Get the container element
var btnContainer = document.getElementById("myDiv");
// Get all buttons with class="btn" inside the container
var lis = btnContainer.getElementsByClassName("nav-link");
// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</body>
</html>
After some discussion with other users, are you referring to Bootstrap's js libraries? If not, add them to the end of the body and ignore the code above to see if it works.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
I've been using ziggeo for a week now and have found it to be perfect for my live stream recording application. The javascript api works perfectly. I was able to create a recorder which starts and stops recording by using the callable methods embedding.record() and embedding.stop() based on time elapsed. So far it works perfectly. However I am not able to find any embedding parameter which hides the control panel(with settings and record buttons and more) displayed on the V2 recorder. Here is my code
{% extends 'TraceBundle::layout.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<link href="{{ asset('bundles/trace/css/loader.css') }}" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="//assets-cdn.ziggeo.com/v1-stable/ziggeo.css" />
<style>
.navbar-default .navbar-nav > li > a {
color:#337ab7;
}
</style>
{% endblock %}
{% block content %}
<nav id="topnav" class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<img id="brand-logo" src="{{ asset('bundles/trace/img/logo-epita.png') }}" width="50" height="50" alt="easyRECrue" title="easyRECrue" />
</div>
<div id="navbar-links-collapse" class="collapse navbar-collapse text-center">
<ul class="nav navbar-nav navbar-center">
<li>
<a>Step 2/4: Practice</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a>{{campaign.campaigntitle}}</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div id="practice-question" data-applicant-id="{{applicant.id}}" data-random-string="{{randomstring}}">
<div class="row text-center">
<h3>To Practice, tell us if this is your first video interview and what you think about it.</h3>
</div>
<div class="row text-center">
<div class="video-div">
<video id="myVideo" width="640" height="480" controls>
<source src="{{asset('bundles/trace/vid/mov_bbb.mp4')}}" type="video/mp4">
</video>
</div>
<p id="info"><b>!</b>This answer will not be sent to the recruiter</p>
<p id="save-warning" class="hidden" style="color:red">Your recording is getting saved, Please do not hit back or refresh..</p>
<div class="row text-center" id="hdfvr-content"></div>
<div id="thinktime" style="margin-top:-310px;"> </div>
<br>
<br>
<br>
<br>
<br>
<br>
<button class="btn btn-primary answer-now" type="button" value="answernow" data-timeleft="">Answer now</button>
<div id="input-widget">
{# <br>#}
<form method="post" id="response" action="{{ path('practicequestionpage',{'uniquecode': uniquecode}) }}">
<progress value="0" max="30" id="progressBar"></progress>
<br>
<br>
<button class="btn btn-primary finished-answering hidden" type="button" value="finished">I've finished answering</button>
<button class="btn btn-primary submit hidden" type="submit" name="submit" value="submit" onClick="removePipeRecorder();">Question answered, continue the process</button>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
{% block javascripts %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//assets-cdn.ziggeo.com/v1-stable/ziggeo.js"></script>
<script>ZiggeoApi.token = "r1a6fc911cd4e27b99d4c992e1e1d3b3";</script>
<script>
$(document).ready(function () {
ZiggeoApi.Events.on("system_ready", function() {
var embedding = new ZiggeoApi.V2.Recorder({
element: document.getElementById("hdfvr-content"),
attrs: {
width: 320,
height: 240,
theme: "modern",
themecolor: "red",
skipinitial: "true",
limit: 30,
countdown: 0,
localplayback: "false",
//max take
recordings: 1,
picksnapshots: "false"
}
});
$('#input-widget').hide();
$('#hdfvr-content').hide();
$('#info').hide();
var timeLeft = 30;
var elem = document.getElementById('thinktime');
var lefttime = 30;
var maxduration = 30;
var minduration = 10;
// loader(circle) variables
var time = 30;
var initialOffset = '440';
var i = 1;
// remove video pause button
var video = document.getElementById("myVideo");
if(video){
$('video').one('play', function () {
video.removeAttribute("controls");
});
$('#thinktime').hide();
$('.answer-now').hide();
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
}else{
timerId = setInterval(countdown, 1000);
$('.answer-now').show();
loader(time,initialOffset,i);
}
function myHandler() {
embedding.activate();
$("#myVideo").remove();
$('#thinktime').show();
$('#hdfvr-content').show();
$('#info').show();
$('.answer-now').show();
timerId = setInterval(countdown, 1000);
loader(time,initialOffset,i);
}
// loader
function loader(time,initialOffset,i){
/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/timeLeft)));
var interval = setInterval(function() {
$('h2').text(i);
if (i == time) {
clearInterval(interval);
return;
}
$('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
i++;
}, 1000);
elem.innerHTML = '<div class="item html"><h2>0</h2><svg width="160" height="160" xmlns="http://www.w3.org/2000/svg"><g>\n\
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none">'
'</circle></g></svg></div>';
}
function countdown() {
$('.answer-now').click(function(){
$(this).data('clicked', true);
});
if (timeLeft == 0 || $('.answer-now').data('clicked')) {
clearTimeout(timerId);
embedding.record();
$('#input-widget').show();
$('#thinktime').hide();
$('.answer-now').hide();
var downloadTimer = setInterval(function(){
document.getElementById("progressBar").value = lefttime;
lefttime--;
if(lefttime == (maxduration-minduration)){
$('.finished-answering').removeClass('hidden');
$('.finished-answering').click(function () {
clearInterval(downloadTimer);
embedding.stop();
$('#hdfvr-content').find("[data-selector='recorder-player']").css('margin-left','442px');
$('.record-icon').remove();
$('#save-warning').removeClass('hidden');
$('.finished-answering').addClass('hidden');
$('#progressBar').hide();
});
}
if(lefttime == 0){
clearInterval(downloadTimer);
embedding.stop();
$('#hdfvr-content').find("[data-selector='recorder-player']").css('margin-left','442px');
$('.record-icon').remove();
$('#save-warning').removeClass('hidden');
$('#progressBar').hide();
$('.finished-answering').addClass('hidden');
}
},1000);
} else {
// elem.innerHTML = '<h1>'+timeLeft+'</h1>';
timeLeft--;
$('.answer-now').data('timeleft', timeLeft);
}
}
//hide/show input widget ends here
embedding.on("recording", function () {
$("#hdfvr-content").append('<span style="color:red; margin:175px 0px 0px -25px; position:absolute;" class="record-icon glyphicon glyphicon-record"></span>');
});
embedding.on("uploaded", function () {
$('#save-warning').addClass('hidden');
$('.submit').removeClass('hidden');
});
});
});
</script>
{% endblock %}
I understand that for HTML based recorder, there may be a way to hide the control panel using css, but what about the flash based? How do you hide it from flash based recorder? Awaiting response...
Regards,
Utkarsh
You can achieve that easily by adding CSS style on the page. To hide the buttons (setting, camera, and the action button) you can use this code
div[data-selector="controlbar"] {
display: none;
}
And if you want to hide further the semi-transparent bar (and it's child element) you can use this
.ba-videorecorder-theme-modern-dashboard {
display: none;
}
I hope this help with your question. Please note that this will hide all of the control bar in the page if you have more than one recording.
I have an html file, which displays in Firefox as:
Problem is, I want to have everything in one single horizontal row next to each other:
the label Dropdown,
the dropdown box itself,
the bootstrap nav-pills menu and
the separate link.
My code is (jsfiddle: https://jsfiddle.net/aq9Laaew/162055/):
$(document).ready(function() {
let menus = ['Menu1', 'Menu2', 'Menu3'];
$('header ul').addClass("nav nav-pills");
for (let m of menus) {
$('header ul').append(`<li class="nav-item">
<a class="nav-link" data-value="${m}" data-toggle="pill" href="#">${m}</a>
</li>`);
}
$('header a').first().addClass('active');
$('header a').click(function() {
console.log($(this).data('value'));
});
});
<meta charset='utf-8' />
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<body>
<header>
<div class="form-group">
<label for="dd1">Dropdown:</label>
<select class="form-control" id="dd1">
<option>Value1</option>
<option>Value2</option>
</select>
</div>
<ul></ul>
Seperate Link
</header>
</body>
</html>
I tried
add css style="display:inline-block" to <div>, <ul> and <a> elements
use a bootstrap grid as described in https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp
But nothing worked so far.
Use class="row" to wrap div and wrap divs in col-*
Learn here:https://getbootstrap.com/docs/4.0/layout/grid/
$(document).ready( function(){
let menus = ['Menu1', 'Menu2', 'Menu3'];
$('header ul').addClass("nav nav-pills");
for (let m of menus) {
$('header ul').append(`<li class="nav-item">
<a class="nav-link" data-value="${m}" data-toggle="pill" href="#">${m}</a>
</li>`
);
}
$('header a').first().addClass('active');
$('header a').click(function(){
console.log($(this).data('value'));
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<header>
<div class="row">
<div class="form-group col-5">
<label for="dd1 col-form-label" >Dropdown:</label>
<select class="form-control d-inline-block col-8" id="dd1">
<option>Value1</option>
<option>Value2</option>
</select>
</div>
<div class="col-7 d-flex">
<div class="col-9 p-0">
<ul></ul>
</div>
<div class="col-3 pt-2">
Link
</div>
</div>
</div>
</header>
I an working on my tutorial project:
I have this code:
// Code goes here
angular.module('switchdemo', []).controller('DemoController', function($scope){
$scope.init = function(){
$scope.status = true;
}
$scope.changeStatus = function(){
$scope.status = !$scope.status;
}
})
/* Styles go here */
.active, .inactive {font-size:40px;cursor:pointer;}
.active, .inactive {font-size:40px;cursor:pointer;}
i.active { color: #5cb85c}
i.inactive {color: #d9534f}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script data-require="angular.js#*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="switchdemo">
<div ng-controller="DemoController" ng-init="init()">
<div class="well">
<i class="fa fa-toggle-on active" ng-if="status == true" ng-click="changeStatus();"></i>
<i class="fa fa-toggle-on fa-rotate-180 inactive" ng-if="status == false" ng-click="changeStatus();"></i>
<h5>dummy! </h5>
</div>
<pre>{{ status }}</pre>
</div>
</body>
</html>
How can I make dummy! word to be on the same line with ON/OFF switch from the right.
Like this:
H5 is a block element by default, which means it will be on a new line. Use span or assign display: inline or display: inline-block to your H5 tag.
You can use the float property set to left as follows:
<div class="well">
<div>
<i class="fa fa-toggle-on active" ng-if="status == true" ng-click="changeStatus();"></i>
<i class="fa fa-toggle-on fa-rotate-180 inactive" ng-if="status == false" ng-click="changeStatus();"></i>
</div>
<h5 class="align-left">dummy! </h5>
CSS:
.align-left {
float: left;
}
You can set display: inline-block to <h5>, because <h5> acts like a block element
// Code goes here
angular.module('switchdemo', []).controller('DemoController', function($scope){
$scope.init = function(){
$scope.status = true;
}
$scope.changeStatus = function(){
$scope.status = !$scope.status;
}
})
/* Styles go here */
h5{ display: inline-block;}
.active, .inactive {font-size:40px;cursor:pointer;}
.active, .inactive {font-size:40px;cursor:pointer;}
i.active { color: #5cb85c}
i.inactive {color: #d9534f}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script data-require="angular.js#*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="switchdemo">
<div ng-controller="DemoController" ng-init="init()">
<div class="well">
<i class="fa fa-toggle-on active" ng-if="status == true" ng-click="changeStatus();"></i>
<i class="fa fa-toggle-on fa-rotate-180 inactive" ng-if="status == false" ng-click="changeStatus();"></i>
<h5>dummy! </h5>
</div>
<pre>{{ status }}</pre>
</div>
</body>
</html>
I have a view that contains a Twitter Bootstrap nav nav-pills control. This is embedded fine, and in each of my tabs I am planning to embed two partial views. Below is the razor view
#using SiteNET.Models;
#using Microsoft.AspNet.Identity;
#model SiteNET.Models.ManageUserViewModel
#{
ViewBag.Title = "Manage Account";
}
<style type="text/css">
.manage {
margin: 20px;
}
</style>
<div class="manage">
<ul class="nav nav-pills" id="myTab">
<li><a data-toggle="tab" href="#manage">Manage Account</a></li>
<li><a data-toggle="tab" href="#downloads">Avalible Downloads</a></li>
</ul>
<div class="tab-content">
<div id="manage" class="tab-pane active fade in">
<h2>#ViewBag.Title</h2>
<p class="text-success">#ViewBag.StatusMessage</p>
#*<div class="alert alert-success"
data-toggle="collapse"
role="alert">#ViewBag.StatusMessage</div>*#
<div class="row">
<div class="col-md-12">
#Html.Partial("_ChangeEmailAddressPartial", Model)
</div>
</div>
<div class="row">
<div class="col-md-12">
#if (ViewBag.HasLocalPassword)
{
#Html.Partial("_ChangePasswordPartial")
}
else
{
#Html.Partial("_SetPasswordPartial")
}
</div>
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
</div>
<div id="downloads" class="tab-pane fade">
<h3>Downloads</h3>
<p>Avalible downloads partial view.</p>
</div>
</div>
</div>
The problem is that when the page loads the content of the first tab is shown but the actual tab is not selected (see below)
it should look like this when the page is first loaded
I have tried to use this solution, which uses the JavaScript below
<script>
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
// Store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;
});
// On load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');
</script>
But this does not seem to work (that is, does not seem to select the first tab when the page is loaded). It also does not store the selected tab. How can I
Make the first tab show as selected when the page is first loaded?
How can I amend the JS above so that the selected tab is persisted between page navigations?
Thanks for your time.
To see this problem for your self go to CodeLAB and paste in
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Pills Nav with Icons</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<script>
//$('#myTab a[href="manage"]').tab('show');
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
// Store the currently selected tab in the hash value
$("ul#myTab > li > a").on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;
});
//$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
// var id = $(e.target).attr("href").substr(1);
// window.location.hash = id;
//});
// On load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="#' + hash + '"]').tab('show');
</script>
<div class="manage">
<ul class="nav nav-pills" id="myTab">
<li><a data-toggle="tab" href="#manage">Manage Account</a></li>
<li><a data-toggle="tab" href="#downloads">Avalible Downloads</a></li>
</ul>
<div class="tab-content">
<div id="manage" class="tab-pane active fade in">
<h2>Manage</h2>
<p class="text-success">Success</p>
<div class="row">
<div class="col-md-12">
<p>Partial view A</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>Partial view B</p>
</div>
</div>
</div>
<div id="downloads" class="tab-pane fade">
<h3>Downloads</h3>
<p>Avalible downloads partial view.</p>
</div>
</div>
</div>
</body>
</html>
Then click "Show Output", you will see the problem.
I have no experience with asp and whatsoever, but for the bootstrap / jQuery part I guess your solution is this:
1.) Give the li you want to be active the class .active. For example:
<li class="active"><a data-toggle="tab" href="#manage">Manage Account</a></li>
The same goes than for the according content element, like you already did.
<div id="manage" class="tab-pane active fade in">xxx</div>
Take a closer look to the according bootstrap documentation: Bootstrap Tabs
2.) I guess it's not working because your script targets the wrong element (ul.nav-tabs), which doesn't exist in your code. As far as I can see it from your code, you have .nav-pills instead. So try:
$("ul.nav-pills > li > a").on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;
});
Or even better, try targeting your unique id #myTab, like this:
$("ul#myTab > li > a").on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;
});
If this doesn't help or hint you in the right direction, please try to create a working fiddle of your generated html output so that we can take a closer look at your code.
UPDATE
Try this code. It works perfectly for me on my localhost.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Pills Nav with Icons</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<script>
$(document).ready(function() {
if(location.hash) {
$('a[href=' + location.hash + ']').tab('show');
}
$(document.body).on("click", "a[data-toggle]", function(event) {
location.hash = this.getAttribute("href");
});
});
$(window).on('popstate', function() {
var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");
$('a[href=' + anchor + ']').tab('show');
});
</script>
<div class="manage">
<ul class="nav nav-pills" id="myTab">
<li class="active"><a data-toggle="tab" href="#manage">Manage Account</a></li>
<li><a data-toggle="tab" href="#downloads">Avalible Downloads</a></li>
</ul>
<div class="tab-content">
<div id="manage" class="tab-pane active fade in">
<h2>Manage</h2>
<p class="text-success">Success</p>
<div class="row">
<div class="col-md-12">
<p>Partial view A</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>Partial view B</p>
</div>
</div>
</div>
<div id="downloads" class="tab-pane fade">
<h3>Downloads</h3>
<p>Avalible downloads partial view.</p>
</div>
</div>
</div>