I am trying to put a layout together with jquery-ui-layout and can't overcome the height problem.
Here's the HTML code:
<body>
<div id="wrapper">
<div id="header">
<a class="logo" href="/">
<img src="/media/bdo.png" width="154" height="38"/>
</a>
<ul class="top-menu">
<li>report fill out</li>
<li>browse reports</li>
</ul>
<div class="user">
hi there
</div>
</div>
<div id="content">
<div class="ui-layout-west" id="consultants">west</div>
<div class="ui-layout-center" id="contacts">center</div>
<div class="ui-layout-east" id="details">east</div>
</div>
</div>
<div id="footer">
<ul class="links">
<li>help</li>
<li>report an issue</li>
</ul>
</div>
</body>
There is styles.css I use for all the pages (it's rather large to past into here).
The javascript I use for this is rather simple, too:
<script type="text/javascript">
$(document).ready(function(){
myLayout = $("#content").layout({
applyDefaultStyles: true
});
myLayout.sizePane('west',500);
});
</script>
But the output is that all three panels are so short as per the screenshot below. How can I fix the height of the layout to fit the whole page and go all the way down to the footer?
The layout manager will use the size of the container to determine it's layout logic. In this case you have not specified any height for the content div <div id="content">...</div>. Just as a quick example change your css like so:
#content {
float: left;
clear: both;
width: 100%;
height: 500px;
padding: 10px 0 20px;
}
If you want to have the content fill the space between your header and footer you should use two layouts one for north (header), centre (content), south (footer) and again in your content you apply a second layout for your west, centre, east panels.
Related
I'm using Foundation 6 for a one-page website. And I'm using a Top Bar to take users to different sections of the website. So when visiting the website on mobile, when I click a link from the collapsed Top Bar, I want the Top Bar to hide after taking the user to a certain section of the website.
Here's my HTML:
<div data-sticky-container>
<div data-sticky data-sticky-on="small" data-options="marginTop:0.9;" style="width: 100%">
<div class="top-bar">
<div class="top-bar-title">
<span data-responsive-toggle="responsive-menu" data-hide-for="medium">
<span class="menu-icon dark" data-toggle></span>
</span>
</div>
<div id="responsive-menu">
<div class="top-bar-section">
<ul class="menu" data-magellan>
<li class="title"><a class="title-link" href="#home">HOME</a></li>
<li class="title"><a class="title-link" href="#events">EVENTS</a></li>
<li class="title"><a class="title-link" href="#about">ABOUT</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
I could have achieved this functionality by using this (I think):
$(function () {
$('.title-link').on('click', function () {
$("#responsive-menu").css({display: none});
});
});
But the problem is when I click the menu icon, Foundation adds and inline style of display: block; and I can't seem to change it through to JS.
Is there a way to override the inline styles, or should I use a different layout? Thanks for the help!
.css() overrides inline style. Just change this line :
$("#responsive-menu").css({display: none});
To :
$("#responsive-menu").css({"display": "none"});
Similar topic for more info : How to override inline css through javascript?
Try this one:
JS:
$(function () {
$('.title-link').on('click', function () {
$("#responsive-menu").toggleClass('myStyle');
});
});
CSS:
.myStyle {
display: block!important;
}
or
.myStyle {
display: none!important;
}
depend what you want to do.
Here is a pen. I also have a live version.
I created a responsive nav with dropdowns, and everything works perfectly. I was working on making it sticky, as in after you scroll past a certain point, it becomes fixed to the top.
It works fine, except when you resize the page until the responsive hamburger menu shows up and click on it. The page then jumps to the top.
Here's my code for the sticky.
$(window).scroll(function () {
if ($(window).scrollTop() >= $("header").height() + 30) {
$(".sticky").addClass("fixed");
$(".content").addClass("margin");
} else {
$(".sticky").removeClass("fixed");
$(".content").removeClass("margin");
}
});
And here's my css where the hamburger lives.
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #efefef;
height: 70px;
width: 70px;
}
And here is the code for the navbar.
<section class="navigation sticky">
<div class="nav-container">
<div class="brand">
Primitive
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
</ul>
</nav>
</div>
</section>
Nothing has a fixed height outside of the sticky class.
Thanks!
Here is the fixed code.
<section class="navigation sticky">
<div class="nav-container">
<div class="brand">
Primitive
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
</ul>
</nav>
</div>
</section>
To prevent an action happening on click toggle, add href="#!" to the a tag. Now the screen no longer jumps to the top when I click on the hamburger nav.
It sounds so simple but none of what I could find on google worked so far. I've found a similar question on here with a solution that looks exactly like what I'm looking for: http://jsfiddle.net/sJ6Bj/4/
Here's the HTML:
<html>
<head>
<title>Two-pane navigation</title>
</head>
<body>
<div id="content">
<div id="navigation">
<h1>Navigation</h1>
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
<div id="pages">
<div id="page1" class="page">
<h1>Page 1</h1>
<p>This is all the lovely content on page 1.</p>
<p>Let's add a bunch of stuff to make it scroll.</p>
<p style="font-size: 72px">.<br/>.<br/>.<br/>.<br/>.<br/>.</p>
<p>This is at the bottom of the page.</p>
</div>
<div id="page2" class="page">
<h1>Page 2</h1>
<p>This is all the lovely content on page 2.</p>
</div>
</div>
</div>
</body>
</html>
JavaScript (assumes JQuery is loaded):
$(document).ready(function() {
$(".page-link").on("click", function(e) {
$(".page").fadeOut(250);
setTimeout(function() { $($(e.currentTarget).attr("href")).fadeIn(250); }, 250);
});
});
CSS:
#navigation {
position: fixed;
width: 250px;
height: 100%;
border-right: 1px solid black;
}
#pages {
margin-left: 270px; /* 250px + 20px of actual margin */
}
.page {
position: relative;
display: none;
overflow: scroll;
}
The only problem is, I want to load different Youtube videos with autoplay. Which means that with the given example you already hear all of the audio play in the back. To make sure this doesnt happen I want to load different, seperate html files containing the youtube videos.
Thanx in advance.
Ideally you should load your pages via AJAX. That would solve the problem of Youtube content playing in the background. And drastically reduce initial page load time.
HTML
<html>
<head>
<title>Two-pane navigation</title>
</head>
<body>
<div id="content">
<div id="navigation">
<h1>Navigation</h1>
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
<div id="pages">
<!-- ajax content loads here -->
</div>
</div>
</body>
</html>
Javascript/jQuery
$(document).ready(function() {
$(".page-link").on("click", function(e) {
$.get($(this).attr('href'))
.done(function(data) {
$('#pages').html(data);
});
return false;
});
});
I am trying to position charts on a page. Here is screenshot for you to have a look.
I want it so that only one element (chart) is visible at a time. I know margin and padding stuff. But i do not think that will work for all resolutions.
What you suggest?
How about this:
FIDDLE
<ul>
<li id="one">onetwothree</li>
<li id="two">onetwothree</li>
<li id="three">onetwothree</li>
</ul>
(Relevant) CSS
li
{
width: 100vw; /* 100% of viewport width */
height: 100vh; /* 100% of viewport height*/
}
Another way is to use jQuery tabs.
For this FIDDLE I copied the code directly from jQuery UI site and modified it.
HTML
<div class='charts'>
<ul>
<li>Daily Use</li>
<li>Monthly Use</li>
<li>Annual Use</li>
</ul>
<div id="tabs-1">
<div class='chart1'>This is your daily use of electricity</div>
</div>
<div id="tabs-2">
<div class='chart2'>This is your monthly use of electricity</div>
</div>
<div id="tabs-3">
<div class='chart3'>This is your annual use of electricity</div>
</div>
</div>
You can use the display property (references are available in MDN and W3C) to make one of the charts invisible when you show the other. For example:
CSS
.visible {
display: block;
}
.invisible {
display: none;
}
HTML
<div class="visible">This text is visible.</div>
<div class="invisible">But this one isn't.</div>
<div class="invisible">Neither is this one.</div>
<div class="visible">But this is. :)</div>
Take a look in the demo JSFiddle.
I'm trying to implement a sidebar to my Twitter Bootstrap 3 application. When I click a button, a fixed positioned nav nav-pills nav-stacked appears on the left side of my page. And I gave z-index:1000, so it appears on top of my content.
Fiddle: http://jsfiddle.net/mavent/8YtDS/14/
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header"> <a class="navbar-brand navbar-left" href="/" title="">
MyBrand
</a>
</div>
</nav>
<div class="col-md-3" id="mysidebar" style=" top: 0;bottom:0; left: 10px;
position: fixed; height: 100%; background-color: #faff18;
opacity: 0.9; overflow: hidden; z-index:1000; margin: 0; padding: 0; display:none;">
<div style="position: relative; top: 60px; background-color: #7d1c80; opacity: 0.9;">
<ul class="nav nav-pills nav-stacked">
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
</ul>
</div>
</div>
<div class="row" style="background-color: #aaa;">
<div class="col-md-offset-3">
<button> </button>
<button id="mybutton" type="button" class="btn btn-info">Click me to toggle</button>
</div>
</div>
But I need different behaviour, when sidebar appears my page will be pushed to right side. Check this page and click top left button. How can I get this behaviour with css/js ?
http://jpanelmenu.com/
A general practice would be to add a class to either the <body> tag or a main wrapper called something like navopened on the button click.
Once the class is added, you then can target any element using the class, and move your 'entire' page with either positioning: position:relative; right: -[nav width]px
or transforms: transform: translate([nav width]px)
Transforms have better performance, but less browser support.
CSS Example:
/* before, without body class added */
body #outsidewrapper{
position:relative;
right:0px;
}
/* after, when the click event adds the class to the body */
body.navopened #outsidewrapper{
position:right:-300px;
}
Now, it's important to note that you shouldn't be moving the body tag itself, as it has potential to hide your nav. I would move an outer wrapper instead.
I can see two ways to accomplish this.
Replace position: fixed with float: left.
a. See http://jsfiddle.net/kdcTc/
b. Without bootstrap http://jsfiddle.net/5kPNd/
Moving the sidebar to the top, makes the top navbar shift to the right as well. This does not work with bootstrap. It seems, there is some condition in the bootstrap navbar classes, which prevents the shift.
The class navbar-fixed-top seems to pin the top navbar. Removing it allows the brand navbar to shift, but has other side effects too.
Move the main panel and the navbar to the right, using a margin-left
See http://jsfiddle.net/7eEaB/2/
Okay, so I did a few play arounds, one with my code and one with your code.
edited your one...
http://jsfiddle.net/8YtDS/15/
My one (button placement is pore, but you get the picture)
http://jsfiddle.net/e6JnT/1/
My one can toggle it in and out...
The main part's is having a wrapper around the part's you want to move around... which would be your code in your case, and then you just move that or resize that accordingly.
I did slide it left but you can do it with size so you don't miss anything.
So into the code.
$("#mybutton").click(function () {
$("#wrapper").animate({
left: '200px'
});
$("#mysidebar").animate({
left: '0px'
});
});
So I use the animate function in jQuery as it's the most versatile function to move an element around and making it look nice.
and all I'm doing is sliding the element to the left to 200px to make room for the menu, and the slide the element with an id of 'myslidebar' to '0px' to make it able to been seen.
Edit: http://jsfiddle.net/8YtDS/18/
Try this...
http://jsfiddle.net/8YtDS/17/
HTML
<div id="wrapper">
<div id="menu-panel">
<ul class="nav nav-pills nav-stacked">
<li>Do something</li>
<li>Do something</li>
<li>Do something</li>
<li>Do something</li>
</ul>
</div>
<div id="content">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand navbar-left" href="/" title="">
MyBrand
</a>
</div>
</nav>
<button id="mybutton" class="btn btn-primary">Click me</button>
</div>
</div>
CSS
#wrapper{
position: relative;
height: 100%;
background: #F90;
}
#menu-panel{
width: 100px;
position: absolute;
left: -100px;
top: 0;
height: 100%;
}
#wrapper.open{
margin-left: 100px;
}
Javscript
$("#mybutton").click(function () {
$("#wrapper").toggleClass("open");
});
Just a note from experience: avoid using jQuery animate to 'smooth' the slide. On certain browsers it was very jittery for me. CSS transforms should be used if possible, as I believe they are handled by GPU, jQuery as a fail safe (see Modernizr).
Hope that was of some help!
Thanks
Phil