I have single page app where user should be able to select the value from the main menu and display container on the screen. If they select different value then everything but that container should not be visible. Here is example of my html.
$("#mainpg-menu li a").on('click', function(){
$(this).parent().addClass('active').siblings().removeClass('active');
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hearing Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta id="keep-alive-config" content="<cfoutput>#Application.sessionMinutes#</cfoutput>"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="Bootstrap/Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="CSS/Main.css">
</head>
<body>
<div class="container" style="background-color:red; height:600px;">
<nav class="navbar navbar-default">
<div class="container-fluid">
<p class="navbar-text"><b>Welcome to My Application!</b></p>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu<span class="caret"></span></a>
<ul class="dropdown-menu" id="mainpg-menu">
<li>Container 1</li>
<li>Container 2</li>
<li>Container 3</li>
<li>Container 4</li>
</ul>
</li>
<li>
<a href="#" data-toggle="popover">
<span class="glyphicon glyphicon-user"></span> jcrew</a>
</li>
<li>
<a href="#" data-toggle="confirmation">
<span class="glyphicon glyphicon-log-in"></span> Logout</a>
</li>
</ul>
</div>
</nav>
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>
<div id="container4"></div>
</div>
</body>
</html>
Each container should use the entire space of the main container and show the content. Every time user selects different container all other containers should be invisible. I have used this method:
$('.container > div[id=' + id + ']').show();
$('.container > div:not([id=' + id + '])').hide();
Where id should have currently selected element id. This works in majority of the browsers but I found some issues in Safari. For some reason previous container is not set to display:none. Since I'm using Bootstrap-twitter and JQuery I'm wondering if there is better way to handle this situation? I need something reliable and compatible in cross browsers. If anyone knows the best way to do this please let me know. Thank you.
You are using id's multiple times, an id should be used only once since it has to be unique. So I removed the id's from the navigation items!
I added the classname testclass to the divs that should be shown/hidden based on the decision made in the navigation, when an navigation item is clicked it will hide all elements with the class testclass.
Then I added the attribute data-target-id to the navigation items, this attribute will contain the id of the element (div) that should be shown again.
Still don't understand? Take a look at: https://codepen.io/joostm020/pen/YeRwJG
Example code:
$("#mainpg-menu li a").on('click', function(){
$(this).parent().addClass('active').siblings().removeClass('active');
$(".testclass").hide();
$("#" + $(this).attr("data-target-id")).show();
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hearing Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta id="keep-alive-config" content="<cfoutput>#Application.sessionMinutes#</cfoutput>"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="Bootstrap/Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="CSS/Main.css">
</head>
<body>
<div class="container" style="background-color:red; height:600px;">
<nav class="navbar navbar-default">
<div class="container-fluid">
<p class="navbar-text"><b>Welcome to My Application!</b></p>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu<span class="caret"></span></a>
<ul class="dropdown-menu" id="mainpg-menu">
<li>Container 1</li>
<li>Container 2</li>
<li>Container 3</li>
<li>Container 4</li>
</ul>
</li>
<li>
<a href="#" data-toggle="popover">
<span class="glyphicon glyphicon-user"></span> jcrew</a>
</li>
<li>
<a href="#" data-toggle="confirmation">
<span class="glyphicon glyphicon-log-in"></span> Logout</a>
</li>
</ul>
</div>
</nav>
<div class="testclass" id="container1">Test container1</div>
<div class="testclass" id="container2">Test container2</div>
<div class="testclass" id="container3">Test container3</div>
<div class="testclass" id="container4">Test container4</div>
</div>
</body>
</html>
You could simply put another identifier on all of the containers to reliably match them.
<div id="container1" container></div>
<div id="container2" container></div>
<div id="container3" container></div>
<div id="container4" container></div>
Then you can hide every container and only show the ID accordingly.
$('[container]').hide();
$('#' + id).show();
That should work in all but the most ancient browsers. If you need support for ancient browsers, instead of the custom attribute, you could use a custom class on those containers and select via that.
(Also note that, if you want to select by ID, you do not need to be unnecessarily specific. IDs are required to be unique)
Related
I have been trying to make an HTML page that contains a dropdown element that can also go whithin another dropdown, like at this page: https://coda.io/d/_dIXWo7SiwOb/Untitled_su1WJ
I do not want a dropdown list.
I tried a few things, but they either couldn't stack, or they were just dropdown lists.
There are a lot of examples/tutorials out there on how to do something like this with Bootstrap and jquery. I hacked out a quick example that seems to do what you want using an example from W3 schools and it seems to be working reasonably well. Credit to W3 schools for providing the base example I worked from to come up with the end result you wanted. I will leave it to you to look at the code and modifying formatting (e.g. where carets go) and such, but the basic logic and functionality seem to be what you are looking for.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="container">
<h2>Untitled</h2>
<div class="dropdown">
<span class="dropdown-toggle" type="button" data-toggle="dropdown">Level 1
<span class="caret"></span></span>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Sublevel 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Sublevel 3</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Sublevel 2 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Sublevel 4</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
I've been using Bootstrap navbars for five years now. This is the first time I haven't been able to make it work. I have even copied the html right from the Bootstrap site and I can't get it to work in any browser nor in dreamweaver. I have been searching for a solution for two days now and cannot find one anywhere.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Fixed Top Navbar Example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/css/navbar-fixed-top.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top <span class="sr-only">(current)</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs ยป</a>
</p>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery.min.js"><\/script>')</script>
<script src="/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
It looks like you used container instead of container-fluid
The W3 documentation should work.
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_fixed&stacked=v
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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>
<body style="height:1500px">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:50px">
<h3>Fixed Navbar</h3>
<div class="row">
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
</div>
</div>
<h1>Scroll this page to see the effect</h1>
</body>
I am messing around trying to make a custom bootstrap 3 website however I'm currently stuck up on this dropdown menu. I have tried everything from using the web CDN instead of my local files, copying other peoples dropdown code and nothing seems to want to work.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>INDEX</title>
<!-- linking bootstrap CSS files -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- linking my custom CSS stylesheet -->
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:700"
rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- MDP top banner image -->
<div class="top-banner">
<img class="img-responsive" src="Assets/MDP Website Banner.png" width="2000" height="350" alt=""/>
</div>
<!-- top bar nav -->
<nav class="navbar navbar-inverse navbar-maintop">
<div class="container-fluid align-center">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active nav-tab">HOME</li>
<li class="nav-tab">ABOUT US</li>
<li class="dropdown nav-tab">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">PAGE 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>PAGE 1</li>
<li>PAGE 2</li>
<li>PAGE 3</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">PAGE 2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<!--<li class="nav-tab">SUSPENSION & LIFT COMPONENTS
</li> -->
<li class="nav-tab">PAGE 3</li>
</ul>
</div>
</div>
</nav>
<script src="jquery/jquery.js"></script>
<script type="text/javascript" src='js/bootstrap.min.js'></script>
</body>
</html>
I'm having difficulty having my off-canvas menu in Foundation 5 toggle on and off, or at least not always appear on canvas. Below is a picture of the current site.
As shown, the offcanvas is very much on canvas
This is the HTML I am running so far. The content is not included as it is on a separate YAML file, but it should be unnecessary.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="/assets/img/logo/sjpminilogo.png" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{{ page.title }} | Paly SJP</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/assets/css/syntax.css">
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/foundation/css/foundation.css">
<link rel="stylesheet" href="/assets/foundation/css/normalize.css">
<link rel="stylesheet" href="/assets/css/custom.css">
<script type="text/javascript" src="/assets/foundation/js/custom.modernizr.js"></script>
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/css">
</head>
<body>
<div class="site">
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<div class="header">
<!-- Top Bar -->
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>Paly SJP</h1>
</li>
</ul>
<!-- All tabs on right side -->
<section class="top-bar-section">
<ul class="right">
<li class="name">
ABOUT US
</li>
<li class="name">
CALENDAR
</li>
<li class="has-dropdown not-click">COHORTS
<ul class="dropdown">
<li>COHORT 1</li>
<li>COHORT 2</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
<!-- Side bar -->
<nav class="tab-bar show-for-small">
<a class="left-off-canvas-toggle menu-icon" href="#">
<span>
Paly SJP
</span>
</a>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>
<label>Menu</label>
</li>
<li>
Paly SJP
</li>
<li>
About Us
</li>
<li>
Calendar
</li>
<li>
<label>Cohorts</label>
</li>
<li style="background-color: #3B3B3B">
Cohort 1
</li>
</ul>
</aside>
<div class="content">
{{ content }}
</div>
<div class="footer">
<div class="row">
<div class="large-12 columns">
<h6 style="color:#ffffff; margin-top:24px; font-size:14px;">Keep in touch!</h6>
<a href="https://twitter.com/palysocjustice" target="_blank">
<img src="/assets/img/logo/footer/twitter.png" class="logo" /></a>
<a href="https://www.facebook.com/pages/Paly-Social-Justice-Pathway/1481478495402897" target="_blank">
<img src="/assets/img/logo/footer/facebook.png" class="logo" /></a>
<a href="http://palysocialjustice.blogspot.com/" target="_blank">
<img src="/assets/img/logo/footer/blogspot.png" class="logo" /></a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/assets/foundation/js/vendor/jquery.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation.min.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation/foundation.clearing.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation/foundation.offcanvas.js"></script>
<script type="text/javascript" src="/assets/js/custom.js"></script>
</div>
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>
If you inspect the aside element using the developer tools in Chrome or whatever browser you're using, the styles associated with the left-off-canvas-menu class are not present.
Re-upload the complete foundation.css file to ensure the appropriate styles are applied.
I am making a website for which I have to make the page active attributes on different lines for different pages. Now I put the whole common script inside a file header and include it in every script. Now how can I change the content of a line when including it on different pages?
The header is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="islamic.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:400,300italic' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
html,body
{
height: 1500px;
}
.grey
{
background-color: #ccc;
padding: 20px;
}
</style>
</head>
<body>
<!-- We are going to make this page for navigation purpose -->
<nav class="navbar navbar-inverse navbar-fixed-top" role = "navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
</button>
<a class="navbar-brand" href="index.php">ILM</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li >Home</li>
<li >Discuss</li>
<li >About Us</li>
<li >Contact</li>
<li class="dropdown">
Social <b class="caret"> </b>
<ul class="dropdown-menu">
<li> Facebook</li>
<li> Twitter</li>
<li> Linked IN</li>
<li> You Tube</li>
</ul>
</li>
</ul>
</div>
</nav>
I want to change the line
<li ><a href="index.php" >Home</a></li>
to
<li class="active">Home</li>
for home page.
Now I want to change the line
<li ><a href="aboutus.php" >About Us</a></li>
to
<li class="active">Home</li>
for about us page.
Is it possible in php?
you can try somethign like this
http://jsfiddle.net/habo/arjw2q6b/
Place this code at the end of your </body> tag.
Guessing your page Urls will have the anchor tags hrefs. one each page load after full document id read your script will check if the URL contains "index.php" or all other hrefs and if it does then it will call the function resetActiveTab that function will remove active class for all the list items (li) and add class=active for the current page
$(function(){
if(window.location.href.contains("index.php")){
resetActiveTab("index.php");
}
else if(window.location.href.contains("why.php")){
resetActiveTab("why.php");
}
else if(window.location.href.contains("aboutus.php")){
resetActiveTab("aboutus.php");
}
}
function resetActiveTab(mySelector){
$(".navbar-nav li").each(function( key, value ) {
//alert($(value).attr("class"));
$(value).removeClass("active");
if( $(value).find("a").attr("href") == mySelector){
$(value).addClass("active");
}
});
}