I'm working in a home page, it's working correctly, but the menu on the left sidebar, it's not making and overflow correctly. I need the scrollbars on the menu, 'cause I don't want it on the page.
I think the issue it's with the height, but I need the 100% of the height not in pixels, somebody can help me?
Here you are de JsBin: http://jsbin.com/ceyij
It is because you have only given 99% height to your html.Just make it 100%
In ceyij.css, you have given height:99% !important in html and body tag
and also give overflow:hidden so
just remove height 99% and give overflow:auto instead of hidden
it not proper look like
In order for an element to have 100% height, the parent element that wraps it must also have either a fixed or percentage height.
So with that in mind you will need 100% heights on both the HTML and BODY tags like this:
html, body
{
height:100%;
width:100%;
}
For the particular list items
#menu_panel {
height:100%;
position: absolute;
left: 0;
top: 0;
overflow:hidden;
}
I've got the best result with the following thanks to jQuery
$(document).ready(function() {
// Handler for .ready() called.
var alt = $(".wrapper").height();
$(".left-side").height(alt);
$(".sidebar").height(alt - 153);
var altHeader = $("header.header").height();
$(".sidebar-menu").height(alt - 153);
});
Related
I have a small and very simple segment of jQuery code which applies a class which uses position: fixed to the navigation element of my page so that the navigation can become sticky and therefore stay with the user as they scroll down the page.
I am building this on an Commerce platform. The issue is that it looks as though when position: fixed is applied to the navigation element, the property isn't working correctly. It looks as though the position is becoming "fixed" but it's only fixed within the header area that it is contained within and I have no idea why this could be happening. Please see below if you would like to see this for yourself:
http://ts564737-container.zoeysite.com/
You can see that after scrolling slightly, the navigation element becomes fixed but not correctly as it should.
Please see my code below:
CSS
.fixed {
top: 0 !important;
z-index: 100 !important;
position: fixed !important;
transition: all 0.3s;
background-color: #000000;
opacity: 0.9;
}
JavaScript/jQuery
<script>
var num = 40;
jQuery(window).bind('scroll', function () {
if (jQuery(window).scrollTop() > num) {
jQuery('.navigation').addClass('fixed');
} else {
jQuery('.navigation').removeClass('fixed');
}
});
</script>
Could anybody provide any insight as to what's going wrong here and causing the element to not fix properly? Any advice at all is much appreciated, thank you so much.
It's because your some parent/parents container contains css transform property.
I have added this css and your fixed element started working:
* {
transform: none !important;
}
Fixed elements in parent which have transform property have different behaviour.
Related issue
I'm trying to create an effect where I display a big logo on page load. When the user scrolls pass the logo and navigation, I want to display a fixed nav bar with a smaller logo. I then want to hide the big logo so that when the user scrolls to the top they still see the fixed nav bar (i.e. the big logo and original navigation stay hidden).
However, when I remove a big block element with the .hide() property it causes the page to "jump" as the display:none property gets set. This reduces the usability of the page, as the location jumps the size of the element that was removed, potentially confusing users.
Is there a way I can get the effect I want, while still providing a smooth experience to the user? I've been thinking of potential options, but have been drawing blanks. Hoping you guys can inspire me :)
A simple JS fiddle can be seen here: http://jsfiddle.net/darudude/vA5WG/ (Note: You'll have to increase the result section to 720+px to get it to work properly - I'm still working on the responsive part)
The code in question:
function UpdateTableHeaders() {
var menu = $(".main_nav_menu"),
offset_top = menu.offset().top;
var scrollTop = $(window).scrollTop();
if (scrollTop > (offset_top + menu.height()))
{
$(".clone").addClass("floating_header");
$(".big_logo").hide();
}
}
$(window).scroll(function(){
UpdateTableHeaders();
});
You can try this ,
Add a new style
<style>
.hide {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
</style>
And change your JS to
$(".big_logo").addClass('hide');
Instead of
$(".big_logo").hide();
Use visibility:hidden then
$(".big_logo").css('visibility','hidden');
Maybe it is because a different browser - margin/padding thing. Have you tried to add this to the body element (or to the container element if it inherits some margins/paddings)
body{
margin:0;
padding:0;
width:100%;
}
Right, so instead of using sticky footer, I've decided to create a jQuery function that will change the size of my #mainContent div so that the footer can fit in nicely.
Basically what I'm trying to do is have
#mainContent { height: 100% - 40px; }
Where
#footer { height:40px; }
I came up with
$(window).resize(function() {
var mainContent = $('#mainContent').innerHeight() - 40;
$('#mainContent').css("height", mainContent);
});
but every time I resize, it simply shortens #mainContent by 40px instead of re-working what #mainContent is supposed to be, then -40px;
$(window).resize(function() {
var mainContent = $(document).height() - 80;
$('#mainContent').css("height", mainContent);
});
I feel like I'm missing something.
Please help.
Edit: header and footer are static (i.e. 40px each), I'd like to resize mainContent without having footer flow over it (because sticky footer uses margin-top:-40px;). I still want my footer to be at the bottom of the screen.
Edit2: added the second try.
I the only elements using your screen height are the mainContent div and the footer, and you decided to control your footer through your javascript+jquery function in a responsive way, use window or document height in order to compute the content div height as so:
var mainContent = $(window).height() -40;
var mainContent = $(document).height() -40;
An example to show it working as you required.
I coded for you a simple markup but enough to show you that it should work for you as well.
Its up to you to take care of reseting/considering any possible vertical margins that can be collapsing or whatever in order to obtain the correct figure to apply in the function.
I applied a min-height declaration for the mainContent rule just for my example. of course you dont need that at all as well as those horrible colors I used :)
The positionFooter function does not need to be so extended. I wrote it that way for a didactic purpose
Here the code:
$( function () {
function positionFooter() {
var wh = $(window).height();
var wc = wh - 80;
$('#mch').text(wc);
$("#mainContent").height(wc);
}
$(window).resize(positionFooter);
positionFooter();
});
Take care of identifiers , selectors, etc when you propagate this solution to your own code.
Any way, I cant imagine why you dont want to apply a full CSS solution instead of using javascript. But Ok. Its your call. Here is the fiddle. Enjoy!
Just give height and width of your div in %.
Check if it works for you.
This should do the trick
DEMO
$(document).ready(function(){
$(window).resize(function() {
var mainContent = $(window).height() - 80;
$('#mainContent').css("height", mainContent);
});
var mainContent = $(window).height() - 80;
$('#mainContent').css("height", mainContent);
});
Let me know if this doesn't work.
It keeps shortening because you hard coded a pixel value for the size. The size will not expand/shrink because of the hard coded value.
If you want to get the full height, than you would need to remove the px value you set before reading the height.
Like RaraituL said, you can use a sticky footer. Then, if you really want to do the 100% height stuff, you can do something like:
#mainContent { height: 100%; box-sizing:border-box; padding:0 0 40px;}
Add in all the vendor prefixes and you should have the correct sizing. See here for more about box-sizing.
You can use media query to load a different css file for a specific size of browser.
#media (min-device-width: 640px) { ... }
It's like this http://mediaqueri.es/
I'm not 100% sure this is what you're looking for - it sounds like you want #mainContent to fill up the whole window except the bottom 40px. If so, this ought to work for you:
Html:
<div id="mainContent">This is the main content</div>
<div id="footer">This is the footer</div>
CSS:
#mainContent {
position:absolute;
top:0;
left:0;
right:0;
bottom:40px;
background:#F0F0F0;
overflow:auto;
}
#footer {
position:absolute;
bottom:0;
left:0;
right:0;
height:40px;
background:#FCC;
}
Working example: http://jsfiddle.net/nvNRY/1/
Edit:
If you don't want #mainContent to act like a frame (i.e. with it's own scrollbar) then simply add 40px padding to the bottom of the body tag. Don't position #mainContent absolutely and it will butt up against the padding, whereas #footer will overlap the padding.
Edit 2:
Example with header and showing overflow:scroll is action: http://jsfiddle.net/nvNRY/2/
Having some trouble with a very basic CSS problem.
I have a container that has a max-height of 655px. Now to the very right of that container is a fixed position container (it must be fixed position due to what I'm doing). The fixed position container has an absurdly large height.
It needs that height because it will be filled with content, that you'll ultimately see by clicking buttons and by some javascript. (changing the scrollTop)
I'm not 100% sure what I'm doing wrong, but I basically need only 655px of the fixed position container to show. I'm not really sure why this doesn't work the way I have it setup.
Check out the JS fiddle here: http://jsfiddle.net/BG2bu/
.tall {
background-color:blue;
position:absolute;
right:0px;
width:200px;
height:5000px;
}
I'm using this CSS to define the tall container. And I know if I change the position to absolute, it will constrain to the max height of it's parent container. I really need this container to be fixed though for other reasons. Is there any possible way to do this? Am I missing something simple here?
If this can be done with a JS/Jquery solution I'm definitely open to that.
Not sure this would be suitable for your needs but I've wrapped the .tall div with another container as position:fixed will not adhere to overflow:hidden in its container div.
http://jsfiddle.net/3DZ53/
Hard to tell if this suits your need or not, but could you...
.tall {
max-height: 655px;
overflow: scroll / hidden;
}
height: 100% in CSS obviously doesn't work. So is there any other CSS or JavaScript/jQuery solutions to this problem? Please advise.
'Let's say your problem element is a <div>. If you make sure your <div>s height has something to reference to, almost all your problems will disappear:
#my_div
{
height: 100%; /* Won't work. What is 100% of an unknown/unset value? */
}
Make sure the <div>'s parents have a set height too. I usually do this (well, not exactly, but you get the idea):
#my_div, #parent_of_the_div, body, html
{
height: 100%; /* This works, but it will show scrollbars if the body
or html elements have padding or margins. */
}
So you want a div to be the height of the screen? It's kind of non-obvious, but css height is the correct approach. The trick is you need to have the html and body elements also take up the full height of the page, otherwise the div is taking up 100% of nothing. The best way I've found to do this is:
html {
height: 100%;
}
body {
height: 100%;
}
#contentDiv {
min-height: 100%;
}
No Javascript required,becouse CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
so you can write it on your style :
#contentDiv {
height: 100vh;
}
With jQuery, you could use:
$('div.class').css('height', $(window).height()+'px');
Pure css
#container {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
Good Luck
Or javacript Jquery:
Ready (not innerHeight in ie8):
$(document).ready( function(){
var heightwindow = $(document).height();
$('#container').css('height', heightwindow+'px');
});
resize window :
$(window).resize(function() {
var heightwindow = $(document).height();
$('#container').css('height', heightwindow+'px');
});
There are a few options you may find useful:
vh (viewport height)
vw (viewport width)
vmin (viewport minimum length)
vmax (viewport maximum length)
#container{
height: 100vh;
background: black;
}
My answer builds on jonwayne's because there wasn't much explanation.
You cannot use css to get the value of a users monitor, but you can do it via javascript. So the trick is to add javascript to the page load event which will set the height based on the browser window height. Using jQuery, you can do this with the following snippet
// jquery shorthand for onLoad event
$(function() {
// Set the css height property of #div_to_resize to the css
// height property of the browser window
$('#div_to_resize').css('height',$(window).css('height'));
}
You can also optionally attach to the resize event of the browser to reset the height if the window is resized. Combined with the previous snippet it would be
// We extracted this to a function since we reference it more then once
function matchHeight() {
$('#div_to_resize').css('height',$(window).height);
}
// jQuery shorthand for document.onload
$(function() {
matchHeight();
//On the resize event, call matchHeight()
$(window).resize(matchHeight);
});
I don't think you can get the monitor's resolution with any web technology. What you an do is use Javascript to get the browser's height and set the height property of div in the css. This post might help for getting the height.