I have a responsive menu that extends beyond the page height, which means users cant see the lower menu items on short pages (pages with little content)
jsfiddle -http://jsfiddle.net/ashconnolly/QDznX/
I understand that it is because my nav is positioned absolute, however if I set the nav to position relative, it pushes the page content below it down.
How could I manage my html + css better to fix this?
OR
In javascript how do I set the body height to be the same as the menu, when the body height is less than the menu height?
Hope you can help!
you can achieve this by CSS
Just add couple of css properties for overflow and height for nav.active
nav.active {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
height: 100%;
overflow: auto;
}
Here is a fiddle
Related
I have a problem with my nav scroll. I would just scroll the nav but I can't.
Here is my JSFiddle: JSFiddle
For see my problem you must click on menu
If anyone have a solution I would be very grateful.
You have 2 problems.
First, .mask has z-index of 10000 whereas it should be less than .pushmenu.
Second, .pushmenu should have overflow-y set to auto, this will add the scrollbar automatically when the content height exceeds its container height. In this case, the window's height.
.mask {
z-index: 999; /* change this accordingly--must be less than .pushmenu's z-index */
}
.pushmenu {
overflow-y: auto;
}
updated fiddle
http://jsfiddle.net/9fCfE/1/
.fixed {
width: inherit;
height: 95%;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
}
footer {
width: 100%;
}
Fixed div must be always on top and shouldn't cover the footer when I scroll.
100% height or from top to footer.
How can I do it?
The simplest answer is to drop the z-index of the fixed region so that when it would otherwise cover the footer, it instead moves behind it. You'll need to make sure the footer is position: relative;.
Fiddle example
If, instead, you want the two to never intersect, you're in for a harder challenge.
The best way to do it would to be giving your fixed element a fixed height, giving your footer a fixed height, and making sure that the fixed element height + the footer height <= the screen height.
Fiddle example
Those are really your only options - you essentially have to design around it. To the best of my knowledge, there is no way to dynamically shrink the fixed element when it intersects with other elements on the page (ignoring the rest of the elements on the page is the purpose of position: fixed, after all).
I've cobbled together a quick and dirty implementation of what you asked using jQuery, offset(), scrollTop() and height()
Here's the jsfiddle example.
Is this what you wanted? If so - why? :)
I don't see any visual difference between this method, and the one where the fixed element goes under the footer.
Can anyone point me in the direction of a horizontal and vertically responsive gallery slider plugin or Jscript?
I have tried Flexslider1/2, Galleria, various other plugins, but they are all a set width and don't seem to respond to resizing the browser vertically? I have tried changing all the CSS but no luck.
Any help at would be greatly appreciated.
Example (With Flexslider): If you resize the browser horizontally, the images will automatically resize to fit within the browser window. If you resize vertically this will cut off the image vertically.
Aim: When you resize the browser window vertically the image will change width and height to keep ration and fit within the browser window. Same with Horizontal.
Hopefully I have explained this clearly. If you need clarification please ask rather than down voting.
Having a poke around the code in Flexslider I couldn't find anything specifically excluding the possibility of an image resize on vertical window change. The image resize appears to be purely CSS based which then feeds the width/height inforomation into the javascript. It appears you are stuck with a DOM/CSS issue of the browser not resizing an image on a vertical window change and then a little bit of this not being a tested FlexSlider setup.
It'a always been a bit finicky to get all browsers to understand 100% vertical layouts with no vertical scrolling as it's not the normal layout paradigm. Subsequent CSS versions have helped a bit but there's still a big difference between how browsers react and interpret what you mean by 100%.
I took the slider demo and borrowed most of a stack answer to manage the 100% vertical layout and ended up with this with the detail below.
First, change your image CSS properties to scale the height of the layout and set the width auto to keep the correct aspect:
width: auto;
height: 90%;
This works on an image by itself but the FlexSlider javascript adds some extra elements into the page and also defaults some CSS width values in the demo for the horizontal layout.
.flexslider .slides img {width: 100%; display: block;}
becomes
.flexslider .slides { width: 100%; display: block;}
.img {display: block; }
Now you have a slideshow working in Chrome.
Firefox won't apply the images 100% height to the elements containing the like Chrome so I had to step back through all the elements and apply the 100% height rule in CSS
.flexslider .slides {height: 100%; width: 100%; display: block;}
.img {display: block; }
.flex-viewport img{ height: 100%;}
.flex-viewport li { height: 100%;}
.flex-viewport ul { height: 100%;}
.flex-viewport { height: 100%;}
You'll see I did the img there as well. And you end up with the page.
One draw back to this solution is you now have an image that will resize past the horizontal size of the screen. You probably need to build something in to cater for this as you will run into issues if you use the basic carousel which is dependendant on the width to work. Also something funky happens when you mouseOut of the screen adding a horizontal scroll bar but I'll leave that one for you. Also try IE at your own risk.
...and this is why I shy away from front end development =)
Sorry that post ended up being a bit of a running commentary of me poking about.
I also wanted an image slider that was vertically responsive (and horizontally). After not finding anything out-of-the-box that worked they way I wanted I started fiddlin'.
Here's the result.
Here's the key elements (go to the jsFiddle for the full demo). It's not quite perfect but should be enough to get you started.
HTML
<div id="fader">
<img src="http://placehold.it/600x600&text=Slide1" >
<img src="http://placehold.it/600x600&text=Slide2" >
<img src="http://placehold.it/600x600&text=Slide3" >
<img src="http://placehold.it/600x600&text=Slide4" >
</div>
CSS
#fader {
position: relative;
width: auto;
height: 100%;
}
#fader a {
display:block;
width:auto;
height:100%;
}
#media screen and (orientation: portrait) {
img {
width: 100%;
height:auto !important;
}
}
#media screen and (orientation: landscape) {
img {
height: 100%;
min-width:10%;
max-width:100%;
}
}
Special thanks to this jsFiddle for the lightweight jQuery rotator.
I've having an issue with the background images i have embedded into my carousel. click here I've noticed when i click from one slide to another the background image on my site moves out of place. The margin-top for my carousel is current set to margin-top:-275px; and the background image is set to margin-top:-64px; I am slight concerned about these settings.
Does anyone have a solution to this problem?
In order to activate the slides click the thin red tab under the nav bar
I guess that's because you have
.rslides li {
top:0;
}
It does nothing with position:relative (and the current slide has it), but it moves down the slide with position:absolute (hidden slides).
When you click a tab, there's a moment in which the new one is fading in, but it doesn't have position:relative yet. Then, in that moment, the new slide isn't where you want.
So remove that line.
The jumping is occurring because you are switching the LI items from position: absolute; to position: relative; at the end of the animation toggle. This can be avoided by removing your CSS rule:
.rslides li { left: 0; top: 0; }
Specifying width and height is fine, but as soon as you specify left and top - then switch from relative to absolute positioning, you get that jump you're seeing.
As for the positioning of each panel - it has to do with the way you are laying out your boxes. The sizes you are specifying are not large enough for the content you are providing. For instance: <div id="header"> is 37px tall, which is the appropriate size for the social media buttons, but you also have it as the container for the #nav-menu UL - which is another 102px tall.
It appears that in order to correct this and make things overlap, you are using negative margins - which is getting you all thrown off.
My suggestion would be to use a standardized layout system, such as any of the following:
http://cssgrid.net/
http://960.gs/
http://www.1kbgrid.com/
http://foundation.zurb.com/docs/grid.php
And use it to perform your layout tasks, rather than trying to self-craft overlapping layers with mixed absolute/relative positioning.
Alternatively, if you're going to go the overlapping layers route (again, not suggested), really commit to it. Position things absolutely throughout the layout.
In order to accomplish this, you might consider CSS rules like:
#header {
display: block;
position: absolute;
left: 50%; top: 0px;
height: 139px; /* Your Social media links height + nav buttons height */
width: 1018px; /* Your current width */
margin-left: -509px; /* Half the width - centers on page */
}
Again - this is MUCH more work, MUCH harder to maintain and MUCH less elegant - but will yield you at least a consistent spacing / sizing.
I have a position:fixed; navigation bar. Whenever I go to mypage.html#myid, the navigation bar overlaps some of the content of myid. How can I move the entire page down a bit so that the navigation bar isn't covering the content?
P.S. I tried body{padding-top:50px;}
You can't use margin-top on the myid div? Your main content should be inside a div and this div should be inside the body then myid div can push down from the body to allow enough space for the fixed nav bar.
Some code would help...
There is a bit hacky solution needed.
#myID:before {
display: block;
content: " ";
margin-top: -285px; /* navigation height */
height: 285px; /* navigation height */
visibility: hidden;
}
The logic is to add hidden element before the #myID content so browser will give it a hidden space. Giving minus valie as margin-top will prevent it to give phsyical space.
Please have a look at here for detail: http://css-tricks.com/hash-tag-links-padding/