Auto Select Tab on Page Navigation - asp.net
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>
Related
How to add forward back and refresh buttons for webviews in Electronjs?
I am displaying multiple webview contents using Electron Js.
part of index.html
<div class="contentArea">
<div id="mySidebar" class="leftMenu">
<ul id="myTab" class="nav nav-tabs">
<li class="nav-item">
Tab1
</li>
<li class="nav-item">
Tab2
</li>
<li class="nav-item">
Tab3
</li>
</ul>
</div>
<div class="contentPages tab-content">
<div class="tab-pane show active" id="webview1">
<webview src="link1" style="width:100%; height:100%" disablewebsecurity allowpopups></webview>
</div>
<div class="tab-pane" id="webview2">
<webview src="link2" style="width:100%; height:100%" disablewebsecurity allowpopups></webview>
</div>
<div class="tab-pane" id="webview3">
<webview src="link3" style="width:100%; height:100%" disablewebsecurity allowpopups></webview>
</div>
<script>
$(document).ready(function () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var activeTab = $(e.target).text(); // Get the name of active tab
var previousTab = $(e.relatedTarget).text(); // Get the name of previous tab
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
});
</script>
</div>
</div>
I used bootstrap and jquery for design.
Navigation between webviews works very nicely with jquery.
I'm trying to do. Creating forward, backward and refresh buttons for each webview.
It's like an internet browser.
I didn't manage to use the codes properly in ElectronJS.
Can anyone who knows about this please help?
It's Work.
$(document).on( 'click', '#back-button-id', function(){
if(webview-id.canGoToOffset(-1)){
webview-id.goBack();
} });
$(document).on( 'click', '#next-button-id', function(){
if(webview-id.canGoToOffset(+1)){
webview-id.goForward();
} });
bootstrap 4: dropdown, nav-pills and seperate link together in horizontal line
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>
Positioning Google Charts inside Bootstrap tabs [duplicate]
This question already has answers here:
Issue with displaying Google Chart in a bootstrap tab
(2 answers)
Closed 5 years ago.
I created Bootstrap3 tabs RES and BUS. In each of these two tabs I want to position two Google charts (Area and Pie carts). So inside bootstrab tab-pane I put bootstrap row and split it into columns col-sm-9 (for larger AreaChart) and col-sm-3 (for smaller PieChart).
Identical content is inside both BUS and RES tabs! but position on second (RES) tab is ruined. WHY? And how to fix it?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="container">
<div class="row text-center">
<div class="col-sm-12">
<div class="thumbnail">
<h3>Title</h3>
<hr>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#BUS">Bus</a></li>
<li><a data-toggle="tab" href="#RES">Res</a></li>
</ul>
<div class="tab-content">
<div id="BUS" class="tab-pane active">
<div class="row">
<h3>BUS title</h3>
<div class="col-sm-9">
<div id="AreaB1"></div>
</div>
<div class="col-sm-3">
<div id="PieB1"></div>
</div>
</div><!-- .row -->
<script type="text/javascript">
function drawChartsB()
{
var view;
var AreaOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 },
};
var PieOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 }
};
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','A','B'],['2017M02',95,0],['2017M03',129,0],['2017M04',42,33]]));
view.setColumns([0,1,{sourceColumn:1,role:"annotation"},2,{sourceColumn:2,role:"annotation"}]);
(new google.visualization.AreaChart(document.getElementById('AreaB1'))).draw(view,AreaOpt);
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]]));
(new google.visualization.PieChart(document.getElementById('PieB1'))).draw(view,PieOpt);
}
</script>
</div>
<div id="RES" class="tab-pane">
<div class="row">
<h3>RES title</h3>
<div class="col-sm-9">
<div id="AreaR1"></div>
</div>
<div class="col-sm-3">
<div id="PieR1"></div>
</div>
</div><!-- .row -->
<script type="text/javascript">
function drawChartsR()
{
var view;
var AreaOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 },
};
var PieOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 }
};
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','A','B'],['2017M02',95,0],['2017M03',129,0],['2017M04',42,33]]));
view.setColumns([0,1,{sourceColumn:1,role:"annotation"},2,{sourceColumn:2,role:"annotation"}]);
(new google.visualization.AreaChart(document.getElementById('AreaR1'))).draw(view,AreaOpt);
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]]));
(new google.visualization.PieChart(document.getElementById('PieR1'))).draw(view,PieOpt);
}
</script>
</div>
</div><!-- .tab-content -->
</div><!-- .thumbnail -->
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .container -->
<script type="text/javascript">
google.charts.load("current",{callback:drawChartsB,packages:["corechart"]});
google.charts.load("current",{callback:drawChartsR,packages:["corechart"]});
</script>
External JSFiddle: enter link description here
need to wait until container is visible before drawing the chart,
or need to set specific size settings in the chart options...
also, recommend calling the load statement only once...
try setup similar to following...
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="container">
<div class="row text-center">
<div class="col-sm-12">
<div class="thumbnail">
<h3>Title</h3>
<hr>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#BUS">Bus</a></li>
<li><a data-toggle="tab" href="#RES">Res</a></li>
</ul>
<div class="tab-content">
<div id="BUS" class="tab-pane active">
<div class="row">
<h3>BUS title</h3>
<div class="col-sm-9">
<div id="AreaB1"></div>
</div>
<div class="col-sm-3">
<div id="PieB1"></div>
</div>
</div><!-- .row -->
<script type="text/javascript">
function drawChartsB()
{
var view;
var AreaOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 },
};
var PieOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 }
};
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','A','B'],['2017M02',95,0],['2017M03',129,0],['2017M04',42,33]]));
view.setColumns([0,1,{sourceColumn:1,role:"annotation"},2,{sourceColumn:2,role:"annotation"}]);
(new google.visualization.AreaChart(document.getElementById('AreaB1'))).draw(view,AreaOpt);
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]]));
(new google.visualization.PieChart(document.getElementById('PieB1'))).draw(view,PieOpt);
}
</script>
</div>
<div id="RES" class="tab-pane">
<div class="row">
<h3>RES title</h3>
<div class="col-sm-9">
<div id="AreaR1"></div>
</div>
<div class="col-sm-3">
<div id="PieR1"></div>
</div>
</div><!-- .row -->
<script type="text/javascript">
function drawChartsR()
{
var view;
var AreaOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 },
};
var PieOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 }
};
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','A','B'],['2017M02',95,0],['2017M03',129,0],['2017M04',42,33]]));
view.setColumns([0,1,{sourceColumn:1,role:"annotation"},2,{sourceColumn:2,role:"annotation"}]);
(new google.visualization.AreaChart(document.getElementById('AreaR1'))).draw(view,AreaOpt);
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]]));
(new google.visualization.PieChart(document.getElementById('PieR1'))).draw(view,PieOpt);
}
</script>
</div>
</div><!-- .tab-content -->
</div><!-- .thumbnail -->
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .container -->
<script type="text/javascript">
google.charts.load("current",{callback:drawChartsB,packages:["corechart"]});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
switch ($(e.target).html()) {
case 'Bus':
drawChartsB();
break;
case 'Res':
drawChartsR();
break;
}
});
</script>
Bootstrap css theme not loaded in mobile view
I am creating mobile views for my mvc 4 web application. I have installed JQuery.Mobile.MVC in my project. But the CSS theme "a" is not getting loaded in my mobile views. My _Layout.Mobile.cshml looks like the following...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/Mobile/css", "~/Content/jquerymobile/css")
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
<script>
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
});
</script>
<link href="#Url.Content("~/Content/Site.Mobile.css")" rel="stylesheet" type="text/css" />
#RenderSection("Styles", false)
</head>
<body>
<div class="ui-bar-b">
<ul>
RAW Online Mobile
</ul>
</div>
<div data-role="page" data-theme="b">
#*#Html.Partial("_ViewSwitcher")*#
<div data-role="header">
<h1>#ViewBag.Title</h1>
#RenderSection("Header", required: false)
</div>
<div data-role="content">
#RenderSection("featured", false)
#RenderBody()
</div>
</div>
#Scripts.Render("~/bundles/bootstrap")
and my Index.Mobile.cshtml looks like the following...
#model IEnumerable<RAWOnlineWebandMobile.Models.Company>
#{
Layout = "~/Views/Shared/_Layout.Mobile.cshtml";
ViewBag.Title = "Index";
}
#section Header{
<div data-role="button" data-icon="plus" class="ui-header ui-btn-right">
#Html.ActionLink("New", "Create")
</div>
}
<ul data-role="listview" data-inset="true" class="ui-bar-b">
#*<li data-role="list-divider"></li>*#
#foreach (var item in Model)
{
<li class="ui-bar-b ui-link">
<a href="Companies/Details/#item.CompanyID">
<h3>
#item.CompanyName
</h3>
</a>
</li>
}
</ul>
jQuery Mobile swipe li to check hidden checkbox
I am looking to swiperight on jQuery Mobile to highlight the list and check the hidden checkbox within. And when I swiperight again, it will reverse the action. Here's what I gathered so far:
HTML:
<ul data-role="listview">
<li>Deals<input type="checkbox"/></li>
</ul>
CSS:
input[type="checkbox"]
{
display:none;
}
Jquery:
$(document).ready(function() {
//Swipe
$("#searchPage li").live('swiperight', function(){
if($(this).children(':input:checkbox').is(':checked')){
$(this).css('background','orange');
$(this).children(':input:checkbox').click();
}else{
$(this).css('background', '');
$(this).children(':input:checkbox').click();
}
}
});//END ready
remove the <a> tag and check ......(i don't know the why it is. but working fine if <a> removed)
sample code :
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<div data-role="page" id="page">
<div data-role="content">
<p>
<ul data-role="listview" data-inset="true" data-theme="c">
<li id="listitem"> Deals<input id="checkbox" type="checkbox" /></li>
</ul>
</p>
</div>
</div>
</div>
and js code :
$(document).ready(function() {
$('#page').bind('swiperight', function(){
if($('#checkbox').is(':checked')){
$(this).css('background','orange');
$('#checkbox').click()
}else{
$(this).css('background', '');
$('#checkbox').click()
}
});
});//END ready
sample example here :
http://jsfiddle.net/reddyprasad321/WmsjX/
http://jsfiddle.net/reddyprasad321/WmsjX/