Is there a quick and easy way to keep a navigation not moving while resizing the window ?
What I have at the moment is something like this which is obviously wrong because proportions will change.
I am not sure if I should use a fixed width though ?
#mainnav {
position: absolute;
left: 30%;
top: 75px;
width: 50%;
}
Thank you for your answers.
It really depends on what kind of page you are creating. If you are creating something responsive/interactive, you may need fixed or absolute navigation, but it's hard to tell from the code that you provided.
A more traditional approach would be to wrap your page content in a container with a fixed width:
<div id="container">
<div id="mainnav">...</nav>
<div id="main-content">...</div>
</div>
CSS
#container
{
width: 1000px;
margin: 0 auto; // will center your container inside page body, even on resize
}
#mainnav
{
display : block;
}
This way your nav will stay together with the content and wont resize. it's also much easier to manage what's inside the navigation element.
Related
i'm trying to fit couple of components to make each of them to take a full page
i want the first component to fit all the screen (like a landing page)
and to have the browser scroll bar so i can scroll down to see the second component. (i would like to add hover arrow to let the user know he can scroll down)
but when i try to fit them together its showing me them on the same page.
any suggestions?
im using Boostrap4 and flexbox
thanks.
Well if i understand correctly this should do what you want. I made a simple fiddle:
https://jsfiddle.net/o1uwahL8/
HTML:
<div id="componentOne">
Component 1
<div>
Go to two
</div>
</div>
<div id="componentTwo">
Component 2
</div>
I used divs here, but this should not be different from your component selectors.
CSS:
body, html {
height: 100%;
width: 100%;
}
#componentOne {
height: 100%;
width: 100%;
background-color: red;
}
#componentTwo {
height: 100%;
width: 100%;
background-color: yellow;
}
Be sure all the wrapping tags have their height set to 100% or this will not work!
If you have any further questions, ask away.
P.S if you want a smooth scroll to the second component you can use something like this: jQuery scroll to element
Disclaimer - I understand there exists questions around fixed elements in safari, and fixed elements weren't supported, but now are and so forth. However I can't find a question that addresses this exact question.
Given the simplest of fixed sidebars, something like:
.sidebar {
position: fixed;
top: 10px;
right: 10px;
}
And a relatively long page, with input elements.
When an input element is focused, any fixed element becomes absolute - I understand the why, safari is trying to declutter the viewport - thats fine, but not always appropriate. I ask that I get to choose the best experience for the user (i know best naturally).
So the Question..
Is there any way to leave fixed elements as fixed even when input elements are focused?
I have attempted to do a bit of $(window).on('scroll', magic and position elements manually on scroll, but its quite jittery on the ipad.
Safari has supported position: fixed since at least version 9.2, but if you're seeing difficult issues, you can fully create the fixed position effect by making the document element and body full screen and then using absolute positioning. Scrolling then occurs in some main container element rather than the body. Your "fixed" elements can exist anywhere in the markup using this method.
jsfiddle here
html,
body,
.mainContainer {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
}
.mainContainer {
overflow: auto;
}
.fixed {
position: absolute;
bottom: 20px;
left: 20px;
}
In order to achieve the effect you desire you need to change your approach to the layout. Instead of positioning the sidebar with position:fixed you need to use position:absolute within a position:relative container that is set to the height of the viewport within that position:relative container you need another div that uses overflow-y: scroll and -webkit-overflow-scrolling : touch
Caveat: I generally avoid using position fixed on tablet & mobile if possible although the browser support is there, in my experience it'll be janky and javascript solutions leave a lot to be desired, my first response would be to challenge the pattern with the designer. If I'm given designs that include a position fixed element when there are input elements, I'm more likely to seek a design solution than a development one as the focus issues you're describing are difficult to circumvent and maintain a quality user experience.
THE MARKUP:
<div class="outer">
<div class="sidebar">
<ul>
<li>Dummy list nav or something</li>
</ul>
</div>
<div class="container">
<input type="text" />
<!-- I added 10000 inputs here as a demo -->
</div>
</div>
THE CSS:
html,body{
-webkit-overflow-scrolling : touch !important;
overflow: auto !important;
height: 100% !important;
}
.outer {
position: relative;
overflow: hidden;
/* I'm using Viewport Units here for ease, but I would more likely check the height of the viewport with javascript as it has better support*/
height: 100vh;
}
.sidebar {
position: absolute;
top: 10px;
right: 10px;
/*added bg colour for demo */
background: blue;
}
.container {
height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch
}
input {
display: block;
}
Here's a CodePen for you to open in your simulator (presentation view):
https://codepen.io/NeilWkz/full/WxqqXj/
Here's the editor view for the code:
https://codepen.io/NeilWkz/pen/WxqqXj
I'm going to guess the answer to this question will be "no," but it would be so nice, I'm going to ask anyways.
What I'm trying to do is freeze an element inside a scrollable DIV such that it stays in place vertically. This is to implement a frozen row feature in a table.
It's pretty easy to do with JavaScript and absolute positioning. Here's the HTML for a container and three inner DIVs (see here for the live version):
<div id="container">
<div id="background">
Content
</div>
<div id="absolutediv">
Absolute stays inside
</div>
<div id="fixeddiv">
Fixed escapes!
</div>
<div id="absolutediv2">
Stays put!
</div>
</div>
The relevant CSS:
#container {
position: fixed;
left: 20px;
width: 250px;
height: 250px;
top: 20px;
overflow: scroll;
}
#absolutediv {
position: absolute;
top: 30px;
width: 300px;
background-color: #CEC;
}
#fixeddiv {
position: fixed;
top: 100px;
width: 300px;
background-color: #ECC;
}
#absolutediv2 {
position: absolute;
width: 300px;
top: 120px;
background-color: #ECC;
}
And JavaScript that will hold #absolutediv2 in place:
var div = document.getElementById('absolutediv2');
var container = document.getElementById('container');
container.addEventListener('scroll', function() {
div.style.top = container.scrollTop + 120 + 'px';
});
So #absolutediv2 is behaving the way I want. But look at #fixeddiv. This gets close to what I'm after, and I suspect it looks nicer on mobile devices because the browser can hold it in place without waiting to run the script. Except that it (a) runs right over the borders, and (b) doesn't scroll horizontally.
Is there any way to get what I'm after with pure CSS, something that would run well on a mobile browser?
(In my page, one way to do this would be to place the frozen row above the container DIV, but the number of frozen rows changes depending on where the user has scrolled to, meaning that the container DIV would have to move around.)
Edit:
To sum up, I want a div that:
Scrolls horizontally with its container
Stays put when its container scrolls vertically
Looks like it belongs to its container
Looks nice on a mobile browser
The last one is the tricky bit. I can achieve #1, #2, and #3 with an absolute-position div and JavaScript, but it looks ugly on a mobile browser because it lags. Using a fixed-position div, I can get #2 and #4, and I can achieve #1 with JavaScript (the lag doesn't bother me so much horizontally), but not #3, because a fixed-position div suddenly sits on top of its container.
Google has a suggestion for this kind of thing, but it's a pretty extreme solution: https://developers.google.com/mobile/articles/webapp_fixed_ui
Ok, I haven't tested this but it should be along the right track. Basically this gives you the ability to create multiple "Sticker" items with the HTML5 data attribute I created for you data-special="sticker". The jQuery looks for these, then copies the data and appends it to another <div> element that is positioned where the original was, then it hides the original.
#container {
position: fixed;
left: 20px;
width: 250px;
height: 250px;
top: 20px;
overflow: scroll;
}
#original-element {
position: absolute;
top: 30px;
width: 300px;
background-color: #CEC;
}
.sticker {
position:absolute;
}
<div id="wrapper">
<div id="container">
<div id="background">
Content
</div>
<div id="original-element" data-special="sticker">
I want to stay put!
</div>
</div>
</div>
$("[data-special='sticker']").each(function () {
$('#wrapper').append(
$('<div/>').html($(this).html())
.addClass("sticker")
.css('top', parseInt($('#container').css('top')) + parseInt($(this).css('top')))
.css('left', $('#container').css('left'))
.css('width', $('#container').css('width'))
.css('background-color', $(this).css('background-color'))
);
$(this).css('display', "none");
});
Let me know how it works for you, also one downside to this is once the original element is hidden, the space it used to take up is then collapsed... I'll try to brainstorm a solution for that.
Edit:
Changed the JS to get the #container width instead of the original element width as the original element is larger that the container.
Edit:
Tested: jsfiddle
Some issues would be that the element will then also overlap the scroll bar, if you knew the width of that you could then subtract if from the value.
Also check the updated code above. There were some errors...
You might want to have a look at the following post:
How can I make a div stick to the top of the screen once it's been scrolled to?
As explained in this answer:
A script-free alternative is position: sticky, which is
supported in Chrome, Firefox, and Safari. See the article on
HTML5Rocks
and demo, and
Mozilla
docs.
As of today, the demo linked works for me in Firefox but not in Chrome.
I have a fixed positioned element somewhere near bottom of my page. As there is more content to it than window height itself displays rest of it's been cut down.
I've tried adding overflow:auto to fix this issue and be capable of scrolling through fixed positioned element but no luck.
I suppose there might be a javascript solution near by but wondering if there is a css one as well.
Hope my question made sense.
Thanks
You have to fix the height/width to get scrollbars, otherwise the fixed element expands out of view. Here's a little demo: little link. Basic outine:
HTML:
<div class = "fixed">
Glee is awesome!<br/>
...
Glee is awesome!<br/>
</div>
CSS:
html, body {
height: 100%;
}
.fixed {
position: fixed;
left: 0px;
top: 0px;
height: 100%;
width: 100px;
overflow: auto;
}
I have an element that is fixed and has a margin from the left of the screen. I want to make this element right of a wrapper instead because people who have smaller resolutions or larger will have the element really far away or really close to my wrapper.
I hope this makes sense! :S
Thanks
Using both fixed and relative on the same element is as far as I know impossible.
What you could do is a jQuery solution.
But is the fixed position really necessary? How about fixing the wrapper then just using relative on the other document to position it relative to the wrapper?
That should solve it.
You could use something like this :
HTML
<div id="wrapper">
<div id="fixed"></div>
</div>
CSS
#wrapper {
width: 400px;
height: 600px;
margin: 0 auto;
}
#fixed {
width: 40px;
height: 100px;
position: fixed;
top: 0;
margin-left: 400px;
}
Simple jsfiddle : http://jsfiddle.net/MXgT9/