We are developing an application with the layout near to the jqm examples here( table of contents on left and contents at right) but we want the same behavior as Sencha mobile, when it's in portrait, the table of contents collapses in a navigation button here
Is it possible to do with jqm?
I have created a sample jQuery Mobile application which works like this - When in portrait mode,a split view layout will be shown.When in landscape mode,navigation can be done via a button in the header.For illustrating this in a desktop browser,I have given the width to check as 500px.If width>500 px ,split view. If width <500px, button in header.
This is the source code:
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
function showNavList() {
$(".navdiv").toggle();
}
$(".page").live("pagebeforeshow", function() {
$(".navdiv").hide();
});
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<style>
.content-secondary{
margin: 0px !important;
padding:0px !important;
}
/*refer http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */
/* Smartphones (landscape) ----------- */
#media all and (min-width: 501px){/*For demo in desktop browsers,gave 501.Should be 321px.Refer above link*/
.headerNav{
display:none !important;
}
.content-secondary{
display: block;
}
.navdiv{
display:none !important;
}
}
/* Smartphones (portrait) ----------- */
#media all and (max-width: 500px){/*320px*/
.headerNav{
display:block !important;
}
.content-secondary{
display: none;
}
}
</style>
</head>
<body>
<div data-role="page" class="page" id="page1">
<div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
<ul data-role="listview">
<ul data-role="listview" data-theme="c">
<li class="ui-btn-active" data-icon="false">
Page 1
</li>
<li data-icon="false">
Page 2
</li>
<li data-icon="false">
Page 3
</li>
</ul>
</ul>
</div>
<div data-role="header">
<h1>Page 1</h1>
Navigation
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
Content1
</div>
<div class="content-secondary">
<ul data-role="listview" data-theme="c">
<li class="ui-btn-active" data-icon="false">
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" class="page" id="page2">
<div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
<ul data-role="listview">
<ul data-role="listview" data-theme="c">
<li data-icon="false">
Page 1
</li>
<li data-icon="false" class="ui-btn-active">
Page 2
</li>
<li data-icon="false">
Page 3
</li>
</ul>
</ul>
</div>
<div data-role="header">
<h1>Page 2</h1>
Navigation
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
Content2
</div>
<div class="content-secondary">
<ul data-role="listview" data-theme="c">
<li data-icon="false">
Page 1
</li>
<li class="ui-btn-active" data-icon="false" >
Page 2
</li>
<li data-icon="false">
Page 3
</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" class="page" id="page3">
<div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
<ul data-role="listview">
<ul data-role="listview" data-theme="c">
<li data-icon="false">
Page 1
</li>
<li data-icon="false">
Page 2
</li>
<li data-icon="false" class="ui-btn-active">
Page 3
</li>
</ul>
</ul>
</div>
<div data-role="header">
<h1>Page 3</h1>
Navigation
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
Content3
</div>
<div class="content-secondary">
<ul data-role="listview" data-theme="c">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li class="ui-btn-active">
Page 3
</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
This is not a foolproof application.But just a rough copy to illustrate how this feature can be done.There are still lot of things to be done to make this work perfectly.
To make it work I have used the concept of media queries.Using it you can selectively hide/show the layout depending on the browser width(orientation of device).
P.S. I have used jqm-docs.css for this example.This css has other media queries too targeting other widths.So there might be some weird layout issues when you test this code.Please modify that css to remove the unwanted media queries.
Let me know if it helps
Related
I just need the focus to stay once the element is clicked. I can't get it to work. This code below is from my masterpage. The hover works ok, but after clicking one of the menu options, it does not stay focused and goes right back to the home button. Can someone possibly shed some light on why this isn't working?
<body>
<script type="text/javascript" src="wz_tooltip.js"></script>
<form id="form1" runat="server">
<br />
<br />
<center>
<!-- start header -->
<header>
<div class="container">
<div class="navbar navbar-static-top">
<div class="navigation">
<nav>
<ul class="nav topnav bold" >
<li class="dropdown active">
<a id="nav1" href="../default.aspx" runat="server">HOME </a>
</li>
<li class="dropdown">
<a id="nav2" href="../reverse_mortgages.aspx" runat="server" onclick="setNavagation();">REVERSE MORTGAGE FAQ</a>
</li>
<li class="dropdown">
<a id="nav3" href="../loan_process.aspx" runat="server">OUR PROCESS</a>
</li>
<li id="nav4" class="dropdown">
GET QUOTE
</li>
<li id="nav5" class="dropdown">
ABOUT
</li>
<li id="nav6" class="dropdown">
CONTACT
</li>
</ul>
</nav>
</div>
<!-- end navigation -->
</div>
</div>
</header>
</center>
<script type="text/javascript">
function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
if (path.substring(1, path.length) === "") { // this was the home page loading already active
return;
}
$("li.active").removeClass("active"); // remove class 'active' all list items
$(".navigation a").each(function () {
var href = $(this).attr('href');
if (path.substring(1, path.length) === href) {
$(this).parent('li').addClass('active');
return;
}
});
}
</script>
<!-- end header -->
below is a picture of an issue I'm having with the navbar collapse from bootstrap. I'm running express, node, and handlebars. This header is a partial. For some reason, it keeps expanding outside of its div and I cant figure out why.
navbar collapse overflow problem
Here are my two pages of code for the main page and the header partial. On home.hbs I'm using a CSS grid, not sure if that's causing it or not.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home Page</title>
<link rel="stylesheet" href="/components-font-awesome/css/fontawesome.min.css" />
<link rel='stylesheet' href="/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<script src="/jquery/dist/jquery.min.js"></script>
</head>
<body>
<div class="app">
<div class="contentContainer">
<div class="navMenu">
{{> header}}
</div>
<div class="sidebarLeft">
<!--Add sidebarLeft variable for navigation -->
</div>
<div class="content">
<div>
<p class="welcome"> Welcome to my portfolio page. </p>
<p class="clickBelow"> I've been learning Javascript, Python, and Spanish for 7 months
while living abroad in Mexico.</p>
<div class="buttonDiv">
<button class="enter" size="lg">Come take a look</button>
</div>
</div>
</div>
<div class="sidebarRight">
<!--Add sidebarRight variable for navigation -->
</div>
<div class="footer">
{{> footer}}
</div>
</div>
</div>
</body>
<script src="/bootstrap/dist/bootstrap.min.js"></script>
<script src="/popper.js/dist/popper.min.js"></script>
</html>
<head>
<link rel="stylesheet" href="/components-font-awesome/css/fontawesome.min.css" />
<link rel='stylesheet' href="/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/header.css" />
<script src="/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/jquery/dist/jquery.min.js"></script>
</head>
<div class="container-fluid">
<nav class="navbar navbar-dark navbar-expand-md fixed-top container-flui">
<a class-"navbar-brand" href="/">Steven</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<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="/about">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
</ul>
</nav>
Anyone know? I've tried adding container-fluid to multiple divs. It appears that jquery and bootstrap are working. I've installed these through bower.
I had an issue where my page content was being overlapped by the navbar, try removing the fixed-top property.
Hello I am trying to layout my navigation bar with Bootstrap 4 but some reason no matter it is not calling it out. It works in my Google developer inspector but when I insert the same code in my text editor nothing happens. Can someone help me understand what I am doing wrong?
HTML code:
<body>
<!--TOP Navigation -->
<nav class="navbar navbar-default navbar-toggleable-md ">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleContainer" aria-controls="navbarsExampleContainer" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Delvin McCray
<!-- Right Side of Navbar w/ Dropdown Fatures-->
<ul class="nav navbar-nav">
<li class="dropdown">Women <span class="caret"></span>
<!--Dropdown Menu-->
<ul class="dropdown-menu" role="menu">
<li>Shirts</li>
<li>Dresses</li>
<li>Shoes</li>
<li>Accessories</li>
</ul><!--end of dropdown menu-->
</li>
<li class="dropdown">Men <span class="caret"></span>
<!--Dropdown Menu-->
<ul class="dropdown-menu" role="menu">
<li>Shirts</li>
<li>Dresses</li>
<li>Shoes</li>
<li>Accessories</li>
</ul><!--end of dropdown menu-->
</li>
<li>Off the Rack</li>
<li>Fall 2017</li>
</ul><!--End of navbar-right-->
</div>
<!-- Right side Navbar -->
<div class="collapse navbar-collapse justify-content-end"
id="navbarCollapse">
<ul class="navbar-nav">
<li><a class="nav-link" href="#">My Account <i class="fa fa-sign-in" aria-
hidden="true"></i> </a></li>
<li><a class="nav-link" href="#">Shopping Cart <i class="fa fa-shopping-bag"
aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</nav>
</body>
<div class="jumbotron">
<div class="col-sm-8 mx-auto">
<h1>Navbar examples</h1>
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the top and fixed top examples.</p>
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
<p>
<a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs ยป</a>
</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
CSS styling:
body {
padding-top: 50px;
}
.dropdown, .dropup {
position: relative;
margin-right: 20px;
}
.nav li {
margin-right: 40px;
}
ul.nav.navbar-nav li {
margin-right: 40px;
}
I have a express handlebar application with main.hbs as the layout file.
//main.hbs
<html>
<head></head>
<body>
{{> header}}
{{{body}}}
<script src='/js/jquery-2.2.4.min.js'></script>
<script src='/js/bootstrap.min.js'></script>
</body>
</html>
When i click a link let's say "settings" in dashboard page then it redirects to settings page where i have sidebar and main content page.
This page also uses main.hbs as layout.
//settings.hbs
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Account<span class="sr-only">(current)</span></li>
<li>Views</li>
<li>Users</li>
<li>Sites</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<ol class="breadcrumb">
<li class="active">Settings</li>
</ol>
<div id="settingsContainer">
//Content should be rendered here just like the {{{body}}}
</div>
</div>
</div>
So how can i able to render the desired content inside the "settingsContainer".
As per my understanding in layout file {{{body}}} is used as a placeholder for where the main content should be rendered.
But this is a different page. Is there a way i can render the content based on the link clicked from sidebar.
Any help and pointer will be much appreciated!
i don't know much about handlebars but you can achieve the same with bootstrap tabs.
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<div class="tabbable">
<ul class="nav nav-sidebar">
<li class="active">Account<span class="sr-only">(current)</span></li>
<li class="">Views</li>
</ul>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<ol class="breadcrumb">
<li class="active">Settings</li>
</ol>
<hr>
<div id="settingsContainer">
<div class="tabbable">
<div class="tab-content">
<div class="tab-pane active" id="account">
//render partial for account
</div>
<div class="tab-pane" id="views">
//render partial for views
</div>
</div>
</div>
</div>
</div>
</div>
Hope this helps
Working with Material Design Lite, and the initial test is proving unreliable. I'm trying to reproduce the demo shown here: The first Layout Example.
It looks like this, a menu header with a hamburger icon: . However when I try to implement this in my project I get the header with the "Title" text, but no Hamburger Icon. What am I doing wrong?
Here is my code:
<head>
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="images/android-desktop.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.cyan-light_blue.min.css">
</head>
<body>
<div class="demo-layout-transparent mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--transparent">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link1</a>
<a class="mdl-navigation__link" href="">Link2</a>
</nav>
</div>
<main class="mdl-layout__content">
</main>
</div>
</body>
</html>
There's no explicit mention of the menu icon and I believe that is because the default is for it to appear although the documentation is unclear on this point.
Here's the code they list to use for this demo to work:
<style>
.demo-layout-transparent {
background: url('../assets/demos/transparent.jpg') center / cover;
}
.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
color: white;
}
</style>
<div class="demo-layout-transparent mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--transparent">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Title</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
</main>
</div>
<div class="mdl-layout__drawer-button"
role="button" aria-expanded="false">
<i class="material-icons">menu</i>
</div>
add this between these two divs mdl-layout__drawer, mdl-layout__content