I have a sidebar I want sticky when its hits the header - so I wrote a script that gives it a fixed class when scroll reaches correct position, then gave it a fixed position. Sp far so good- But the sidebar has an expanding column, and being fixed this expandes the sidebar down and out of the page.
How can I make it stick but still push content down?
You can not do it using pure css because:
An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even if the
page is scrolled. The top, right, bottom, and left properties are used
to position the element.
A fixed element does not leave a gap in the page where it would
normally have been located.
So it is out of the document's flow but you can use js to achieve what you want like this:
$(document).ready(function () {
$('#expander').click(function () {
$('.content').toggleClass('nav-expanded');
})
});
.navbar {
position: fixed !important;
width: 100%;
}
p {
text-align: center;
}
.header{
padding: 10px;
}
.content {
padding-top: 60px;
transition: .35s;
}
.nav-expanded {
padding-top: 165px; /*you can change the value to more accuracy */
}
.navbar-ex1-collapse{
width: 100%;
}
.list-group .list-group-item{
background: #f8f8f8 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
<div class="header">
Logotipo
<button id="expander" type="button" class="btn btn-success" data-toggle="collapse" data-target=".navbar-ex1-collapse">Click me</button>
</div>
<div class="collapse navbar-ex1-collapse">
<ul class="list-group">
<li class="list-group-item">Enlace #1
<li class="list-group-item">Enlace #2
</ul>
</div>
</nav>
<div class="content">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>q</p>
<p>w</p>
<p>e</p>
<p>r</p>
<p>t</p>
<p>y</p>
<p>u</p>
<p>i</p>
<p>o</p>
<p>p</p>
<p>a</p>
<p>s</p>
<p>d</p>
<p>f</p>
<p>g</p>
<p>h</p>
<p>j</p>
<p>k</p>
<p>l</p>
<p>z</p>
<p>x</p>
</div>
The idea is when you click the button to expand the header(or whatever you use for that) setting padding-top on content equal to the height of you header expanded. You even can compute the height of navbar in js using .outerheight() and setting that height as padding-top of .content to make it more accuracy, the use of important in snippet is only because the bootstrap's styles overwrite mines but in general that is not needed.
I hope you get the idea so you may use it.
Related
I have a fixed header that changes to a sticky header on scroll using JS.
The dropdown menu works when in mobile view showing on Google Dev Tools and Firefox Responsive Design Mode, however it doesnt work on actual mobile devices.
I've tried changing the Z-index and webkit-backface-visibility.
The HTML:
<header id="myHeader" class="site-header" role="banner">
<div class="nav-container">
<nav id="top-bar">
<div class="row" id="top-bar">
<div class="top-bar-text">
</div>
</div>
</nav>
<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="container nav-bar">
<div class="row">
<div class="module left site-title-container">
<?php shapely_get_header_logo(); ?>
</div>
<div class="module widget-handle mobile-toggle right visible-sm visible-xs">
<i class="fa fa-bars"></i>
</div>
<div class="module-group right">
<div class="module left">
<?php shapely_header_menu(); // main navigation ?>
</div>
<!--end of menu module-->
</div>
<!--end of module group-->
</div>
</div>
</nav><!-- #site-navigation -->
</div>
</header>
header {
height: 85px;
left: 1em;
position: fixed;
z-index: 10000;
right: 1em;
top: 40px;
}
JS changes the header on scroll to:
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f8b836;
z-index: 999;
height: 90px;
overflow: hidden;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}
The CSS for the menu in mobile view:
#media (min-width:300px) and (max-width:480px){
#site-navigation .module.left {
padding-left: 0px;
position: fixed;
left: 0;
}
}
The JS:
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
I'd like the dropdown menu to actually show when the page has been scrolled and the sticky heading is showing.
Does the dropdown not open on mobile devices?
Your .sticky css class has overflow: hidden; which is keeping the dropdown hidden. If you put it there to avoid horizontal scrolling, use overflow-x: hidden; instead. Then it won't cut the dropdown off.
Generally you want overflow-y set to scroll when you have a fixed element with a dropdown on mobile. In case the menu extends beyond the bottom of the screen.
I have a parent div tag <div class="parent"> in which I load all my questions at once when my page loads and hide it. Questions are label specific when a user clicks on that label, those label specific questions show on the screen
<div class="parent">
<div class="labelsBRAND" style=""></div>
<div class="labelsBRAND" style=""></div>
<div class="labelsWARDROBE" style=""></div>
<div class="labelsWARDROBE" style=""></div>
<div class="labelsWARDROBE" style=""></div>
<div class="labelsBRAND" style=""></div>
<div class="labelsBRAND" style=""></div>
<div class="labelsWARDROBE" style=""></div>
<div class="labelsSTYLING" style=""></div>
<div class="labelsBRAND" style=""></div>
<div class="labelsSTYLING" style=""></div>
</div>
Initially, all its display is none
.labelsWARDROBE {
display: none;
}
.labelsSTYLING{
display: none;
}
.labelsBRAND{
display: none;
}
and I display those questions whose label was clicked, the problem is that questions are shown in very random on the screen some shown from the top and others from the middle and others from below middle and my screen height also gets an increase which makes it clumsy, it's not fixed, how to use CSS to position all the question on the from the top.
I tried the class of parent div also but again for positions of displaying of questions labelsBRAND is different as from labelsWARDROBE
.parent{
position: relative;
top: -20px;
}
I used this CSS for labels
.labelsWARDROBE {
position: relative;
top: -10px;
display: none;
}
.labelsSTYLING{
position: relative;
top: -50px;
display: none;
}
.labelsBRAND{
position: relative;
top: -80px;
display: none;
}
But this I used on the basis of my judgement by looking the position of questions, it's not dynamic, how to make it dynamic and whenever the label is clicked the questions should start displaying from the top
You were almost there. Just remove top: -...px from your css. Top / left / bottom & right are used for absolute positioning. In your case you wont need that. Css & html are smart enough to always start from the top if you have all your elements positioned relative. So your css should be like this:
.labelsWARDROBE {
position: relative;
display:none;
}
.labelsSTYLING{
position: relative;
display:none;
}
.labelsBRAND{
position: relative;
display:none;
}
I also made a fiddle for you: https://jsfiddle.net/d8m4L2nL/1/
In this fiddle all options are positioned relative & visible. You can simply set some classes display: none to see the effect.
If that so all of your DOM elements are Div so you can try div{position:relative}. There is no need to make it more complicated
div {
position:relative;
}
<div class="parent">
<div class="labelsBRAND" style="">efefef</div>
<div class="labelsBRAND" style="">efefefe</div>
<div class="labelsWARDROBE" style="">efefefe</div>
<div class="labelsWARDROBE" style="">efefefe</div>
<div class="labelsWARDROBE" style="">efefef</div>
<div class="labelsBRAND" style="">efefef</div>
<div class="labelsBRAND" style="">efefefe</div>
<div class="labelsWARDROBE" style="">fefefe</div>
<div class="labelsSTYLING" style="">efefef</div>
<div class="labelsBRAND" style="">efefef</div>
<div class="labelsSTYLING" style="">feeffe</div>
</div>
I'm creating a responsive website using bootstrap.
When the browser window narrows, the columns should collapse.
The issue is, I want dropdowns to appear when I click on heading.
I've positioned the menu absolute so I can put the z-index above.
In full width, it looks fine:
When columns stack, the menu is pushed to the left
How can I position the menu beneath the centered menu heading text? One way I can think of is to set the position of the dropdown menu to the x y position of the heading text. Is that the only way?
<div class="col-md-1">
<div id="heading_practice">
<a href="#">
<h4>Practice Areas</h4>
</a>
<div class="menu_practice">
<p>test</p>
<p>test2</p>
</div>
</div>
</div>
<div class="col-md-1">
<div id="heading_about">
<a href="#">
<h4>About Us</h4>
</a>
<div class="menu_about">
<p>test</p>
<p>test2</p>
<p>test3</p>
</div>
</div>
</div>
CSS
/*Menu*/
#home, #heading_practice, #heading_about, #heading_contact {
position: relative;
text-align:center;
}
.menu_practice, .menu_about, .menu_contact {
position: absolute;
padding: 10px;
border: thin solid Silver;
background: rgba(0, 0, 0, 0.9);
color: white;
z-index: 1;
margin-left:20px;
text-align:left;
}
If you're using Bootstrap, then why not use Bootstrap-Dropdowns?
http://getbootstrap.com/components/#dropdowns
It also seems like you're building a navbar there, Bootstrap has that integrated aswell with well-working support for Dropdowns:
http://getbootstrap.com/components/#navbar
I'm trying to build this web app thing (it'll eventually a stage/props/que management system for my community theatre group) and I've encountered quite a difficult problem. Apologies if this question has been answered before, I certainly couldn't find anything relating to this specific problem.
Here's the last two I've tried. In theory they have the best chance of working but... they aren't working.
questions/2758651/how-to-change-height-div-on-window-resize
questions/16837525/resize-div-height-with-jquery
So what I'm doing is creating a page that resizes to fit the current screen real-estate the problem I'm having is the central scrolling div and the 'sidebar's' scrolling div only scroll when they have a fixed height. Basically if I use a percentage height in my CSS it becomes the size of it's contents regardless of how overflow: scroll; is setup. I'm thinking it's got something to do with the float:left; definition on all col-*-* elements. The thing I can't fathom is that when I set the div a fixed height (say height:300px;) everything works. Hence why I'm trying JS/JQ solutions but apparently even $(window).height() is getting the document height in Chrome and not the 'viewport' height.
Here's the page as it stands with a fixed height. http://azarel-howard.me/stage-management/props-manager/ I've tried a handful of JS solutions but... they don't seem to run. Or they run into the same issues.
edit: code as requested;
<body>
<!-- Scroll block - this works with fixed height. However I NEED variable height and also WP8 IE support which just flat out doesn't work as I've discovered. (scrolling-wise that is) -->
<div class="scrollable col-lg-9" style="height: 650px; overflow-y: auto;">
<div class="container">
<!-- This scene block get's repeated for each scene -->
<div class="scene row">
<h4>Scene 1</h4>
<div class="container">
<!-- This script block get's repeated for each speakers block within the scene -->
<div class="script row col-lg-offset-1">
<div class="col-lg-2">
<h6>Speaker-1:</h6>
</div>
<div class="col-lg-10">
<p>Speaker's text</p>
</div>
</div>
<!-- End script block -->
</div>
</div>
<!-- End scene block -->
</div>
</div>
<div class="col-lg-3" style="height: 650px;">
<div class="container">
<!-- Scroll block - again this works with fixed height. -->
<div class="row" style="height: 430px; overflow-y: auto; overflow-x: hidden;">
<h5>Stage Props</h5>
<div class="row">
<div class="container">
<div class="col-lg-12">
<h6>Scene 1</h6>
</div>
</div>
</div>
</div>
<!-- Everything from here down is irrelevant for the purpose of figuring out how to have a variable height scrolling div but the presence of these elements will effect to height variables for this specific scrolling div. -->
<div class="row">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="container">
<div class="contributor">
<img class="image-circle" style="width:100%" src="/stage-management/photo%20log/WP_20131121_004.jpg" alt>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="contributor">
<img class="image-circle" style="width:100%" src="/stage-management/photo%20log/WP_20131121_005.jpg" alt>
</div>
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div class="row">
<button type="button" class="btn btn-default" style="width:49%;">Current Que</button>
<button type="button" class="btn btn-default" style="width:49%;">Next Que</button>
</div>
</div>
</div>
</body>
And the CSS for reference: these excerpts are extracted directly from bootstrap.css
.col-lg-9,
.col-lg-3 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-lg-9 {
width: 75%;
}
.col-lg-3 {
width: 25%;
}
#media (min-width: 768px) {
.container {
max-width: 750px;
}
}
#media (min-width: 992px) {
.container {
max-width: 970px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.row:before,
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
.row:before,
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
Ok... I just found this which apparently should work I'm trying it now.
HTML5 Canvas 100% Width Height of Viewport?
Ok at long last I've discovered the secret to using height percentages! I'm going to answer my own question (even though I think it's somewhat bad form but anyway).
With percentages of width everything works as expected. If a relative width is defined it is based off of the parent elements width, which unless explicitly assigned, is the size forced on it by the other content inside of it (say a picture that's 200px wide).
Now it doesn't work this way with height. I decided to go back to basics with this one and concentrated on background-color div's to isolate the factor. After a bit I decided a simple google search was in order, and very quickly discovered this forum question from '08 http://forums.htmlhelp.com/index.php?showtopic=7543 and there you go.
In order to use percentage height the height of the parent element MUST be EXPLICITLY defined from the opening HTML tag all the way down to the element where it counts. With the exception of parent elements that have explicit px heights defined.
So for those of us wanting to make 'fullscreen' apps (ie those that are contained within the dimensions of the browser viewport) we need to include the following CSS code.
html, body {
height: 100%;
}
or in my case the div row elements directly under the body also need this applied so
html, body, body > div.row {
height: 100%;
}
and that will make all the difference.
Just remember that from this level down you will still need to include in-line style statements for each and every element that needs to be percentage scaled.
Assuming your HTML is something along the lines of:
<div class="sidebar">
<!-- sidebar content -->
</div>
<div class="main-content">
<!-- main content -->
</div>
You can achieve an independently scrolling sidebar with the following style declarations:
.main-content {
position: relative;
width: 75%;
}
.sidebar {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 25%;
overflow-y: scroll;
}
Here's a jsfiddle example http://jsfiddle.net/7txqj/
I want to stretch the height of my footer to 100% so it stretched its parent footer div to the end of the page. I tried this solution but it didn't work for me.
How can I stretch a div to 100% page height
Whenever I tried to set the height of my footer to 100%, it actually show the same size free area on the bottom of the page. I am using 960 Grid system CSS framework. if its not possible in CSS, can we do this in jquery or javascript?. check the demo of my page DEMO http://jsfiddle.net/23eED/1/ or
Here is my HTML code:
<div class="footer">
<div class="container_16">
<div class="grid_16">
<div class="footer-end-inner">
<div class="grid_6 alpha copyright">
<p>Copy right © <b>Mossawir</b></p>
</div>
<div class="grid_10 omega footernav">
<ul class="nav2">
<li>Home</li>
<li>Menu</li>
<li>Menu</li>
<li>Contact Me</li>
</ul>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
and here is my CSS code:
.footer{
height: 150px;
width: 100%;
background-color: #000615;
}
.footer-end-inner{
background-color: #162e4c;
height: 80px;
width: 960px;
}
.footer a{
color: #98999a;
}
.footer p{
color: #98999a;
padding-left:10px;
}
.copyright, .footernav{
margin-top:30px;
}
.footer a:hover {
color: #fff;
text-decoration: none;
}
You have to ensure that the body is not adding some space:
body { margin: 0; padding: 0; }
.footer { margin: 0; }
Also ensures the footer is taking up 100%.
make sure that its parent has set up fixed width like:
<div class="parent" width="300px">
<div class="footer">...</div>
</div>