I am trying to do a drawer menu for in my Firefox OS app, based in the Bulding Blocks from Firefox team:
http://buildingfirefoxos.com/building-blocks/drawer.html
At the moment I have a menu button that show and hide the menu, but I can not change to other page when the user click in a different item in the menu.
With this code I can see the Page 1 when the app start, but the page2 is no loaded when I select the button "page 2" in the menu
<section id="index" data-position="current">
<section data-type="sidebar">
<header>
<menu type="toolbar" />
</menu>
<h1>My Menu</h1>
</header>
<nav>
<ul>
<li>
page 1
</li>
<li>
page 2
</li>
</ul>
</nav>
</section>
<!-- Page 1 -->
<section id="drawer" class="skin-dark" role="region">
<header class="fixed">
<span class="icon icon-menu">hide sidebar</span>
<span class="icon icon-menu">show sidebar</span>
<h1>Page 1</h1>
</header>
<article class="content scrollable header">
<section id="page1_list" data-type="list"></section>
</article>
</section>
<!-- Page 2 -->
<section id="drawer" class="skin-dark" role="region">
<header class="fixed">
<span class="icon icon-menu">hide sidebar</span>
<span class="icon icon-menu">show sidebar</span>
<h1>Page 2</h1>
</header>
<article class="content scrollable header">
<section id="page2_list" data-type="list"></section>
</article>
</section>
I have an example using buildingblock (draw)
https://github.com/marti1125/Earthquake
Try to copy this: https://github.com/marti1125/Earthquake/blob/master/css/app.css
Related
I am not able to cope with the iframe. I am trying to insert my curriculum in it, but although the width seems easily managable, the height does not repond to increments in the feature. The result is an iframe that ocupies the width of the page but is wide too narrwo to confortably scroll down. Downhere I leave the code (The issue is halfway) and my webpage, https://rubencioak.github.io/cv2.html, in case it's of any help.
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main">
<div class="inner">
<!-- Header -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TWMMZHX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<header id="header">
rubencioak.github.io
<ul class="icons">
<li><span class="label">Email</span></li>
</ul>
</header>
<!-- Content -->
<section>
<header class="main">
<h1>Curriculum Vitae</h1>
</header>
<!-- About Container -->
<div class="w3-container">
<div class="w3-content w3-text-color2 w3-padding-64" style="max-width:700px">
<p>
<span> </span> Download [pdf]
</p>
</div>
</div>
<div id="Iframe-Liason-Sheet" class="iframe-border center-block-horiz">
<div class="responsive-wrapper responsive-wrapper-wxh-550x2000 w3-text-color2">
<p> <iframe width="75%" height="500%" src="https://docs.google.com/viewer?url=https://rubencioak.github.io/documents/Academic_CV___Ruben.pdf&embedded=true">
<p>Your web browser does not support iframes. Please click at the pdf link above. </p> </iframe> </p>
</div>
</div>
<section>
</div>
</div>
<!-- Sidebar -->
<div id="sidebar">
<div class="inner">
<!-- Menu -->
<nav id="menu">
<header class="major">
<h2>Menu</h2>
</header>
<ul>
<li>Homepage</li>
<li>Research</li>
<li>Curriculum</li>
<li>Teaching</li>
<li>Contacts</li>
<li>Referees</li>
<!--<li>
<span class="opener">Submenu</span>
<ul>
<li>Lorem Dolor</li>
<li>Ipsum Adipiscing</li>
<li>Tempus Magna</li>
<li>Feugiat Veroeros</li>
</ul>
</li> -->
</ul>
</nav>
<section>
<header class="major">
<h2>Contact</h2>
</header>
<p>Please, contact me with any question, specially those regarding my reseach. Your feedback will be much apreciated</p>
<ul class="contact">
<li class="icon solid fa-envelope">rubenprzsnz#gmail.com</li>
<!-- <li class="icon solid fa-phone">(000) 000-0000</li> -->
<li class="icon solid fa-building">
Departament d'Economia<br />
Edifici B<br />
Universitat Autònoma de Barcelona<br />
08193 Bellaterra, Barcelona, Spain</li>
</ul>
</section>
<!-- Footer -->
<footer id="footer">
<p class="copyright">© Untitled. All rights reserved. Demo Images: Unsplash. Design: HTML5 UP.</p>
</footer>
</div>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
Change your height in your inline style on your iframe to vh (viewport height)instead of %. I changed the height to 1000vh using Dev Tools and it nearly filled the whole screen. That's not the ideal fix, but it works.
<iframe width="75%" height="500%" src="https://docs.google.com/viewer?url=https://rubencioak.github.io/documents/Academic_CV___Ruben.pdf&embedded=true">
<!------Change height to vh------>
<iframe width="75%" height="500vh" src="https://docs.google.com/viewer?url=https://rubencioak.github.io/documents/Academic_CV___Ruben.pdf&embedded=true">
I'm trying the fixed tab example from the Google MDL documentation. Here is my code:
CODE
<!-- Simple header with fixed tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
Tab 1
Tab 2
Tab 3
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout__title">Title</span>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-2">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-3">
<div class="page-content"><!-- Your content goes here --></div>
</section>
</main>
</div>
OUTPUT
The problem is my drawer icon position is wrong! It is aligned to the top instead of center. What is wrong here?
I found this answer and it solved the problem! You need to add the <!DOCTYPE html> to the source and everything will work properly.
I need that some content in my page would keep its position on screen even if the user scrolls the page right.
My HTML is very simple:
<head runat="server">
<title>Bla</title>
</head>
<body>
<!--header start-->
<header class="header dark-bg"></header>
<!--header end-->
<!--sidebar start-->
<aside>
<div id="sidebar" class="nav-collapse ">
<!-- sidebar menu start-->
<ul class="sidebar-menu"></ul>
<!-- sidebar menu end-->
</div>
</aside>
<section id="container" class="">
<!--main content start-->
<section id="main-content">
<section class="wrapper">
<!--overview start-->
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><i class="fa fa-laptop"></i> Dashboard</h3>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i>Home
</li>
<li><i class="fa fa-laptop"></i>Dashboard</li>
</ol>
</div>
</div>
</section>
</section>
</body>
Take a look at:
https://jsfiddle.net/2wn8qgyb/
When scrolling right, I expect that the "Dashboard" and "Home / Dashboard" text wouldn't disappear and stand still. I want the user to have an option to click it without scrolling back to the left.
In your html, add an extra classname to this div <div class="col-lg-12">, it should now look like <div class="my-nav-bar col-lg-12">
After that, just add this to your css file:
.my-nav-bar{position:fixed;}
Here is a working Demo
Add this to your css:
.page-header {
position:fixed;
}
.breadcrumb {
position:fixed;
}
Fixed the Position of your div which you don't want to disappear
.div
{
position:fixed;
}
Anyone know of any tricks to get the main content to move left (in my example) so it is lined up with the right drawer. I'm sure it has something to do with getting the absolute drawer outside of the overflow:hidden wrapper.
Here's the html, the css is in the jsfiddle example:
<nav>
<div class="header">
Title
</div>
<div class="content">
<ul>
<li>pizza</li>
<li>tacos</li>
<li>nachos</li>
</ul>
</div>
</nav>
<main>
<header class="rightnav">
<span class="left-nav">
toggle
</span>
<span class="content">
<input/>
link1 link2 link3
</span>
<span class="right-nav">
icon
</span>
</header>
<article>
<div class="header">header</div>
<div class="content">content</div>
</article>
<article>
<div class="header">header2</div>
<div class="content">content2</div>
</article>
<article class="detail">
<div class="header">header3</div>
<div class="content">content3</div>
</article>
</main>
I know it can be done if I break the right drawer outside of the main wrapper, just wondering if there are any techniques to get it to work leaving the html as is.
I'm just starting a new app. Below is a basic mockup of what I am tasked to do.
I'm new to using HTML5 for my semantic markup so I'd like some feedback/help.
I'd like to understand how/where to use things like <nav> and <section>
<div id="container">
<header>
<div id="appInformation">
<a href="#" alt="Home">
<img src="">
</a>
<span>Selected AppName</span>
</div>
<div>
<span id="time">TIME GOES HERE</span>
</div>
<div>
<a href="#" alt="Additional Information">
<img src=""><!-- This is will be the location of the the 'i'-->
</a>
</div>
<div class="">
<label>UserName</label>
</div>
</header>
<div id="main">
<!-- main content for the selected app here -->
</div>
<footer>
<div id="appVersion">
VERSION # HERE
</div>
<nav>
<ul>
<li>
FAQ
</li>
</ul>
</nav>
<div id="">
<!-- Team logo here-->
</div>
</footer>
Avoid unacessary Div.
Use the Time Tag instead of Div for Time Element.
Avoid Label if you don't have anything to refer too, like an input.
Selected AppName
<time datetime="YYYY-MM-DD">TIME GOES HERE</time><!-- Don't need an id Time since you can target the Time tag -->
<a href="#" alt="Additional Information">
<img src=""><!-- This is will be the location of the the 'i'-->
</a>
<em>UserName</em> <!-- Don't use a label if you got nothing to refer too, like an input for example. -->
</header>
<div id="main">
<!-- main content for the selected app here -->
</div>
<footer>
<div id="appVersion">
VERSION # HERE
</div>
<nav>
<ul>
<li>
FAQ
</li>
</ul>
</nav>
<a href="yourTeamUrl" id="">
<!-- Team logo here-->
</a>
</footer>
In addition to #Simon Arnold's fine answer, I might also suggest that the <nav> usage is incorrect. A single link in a footer can hardly be construed as a "major navigation block". See the first note in green text at http://dev.w3.org/html5/spec/sections.html#the-nav-element