I was wondering if anybody knows how to keep a image/control always visible when the user scrolls up and down the page.
An example is on the new Google search page that automatically perdicts your results when you type in. On the right-hand side there is a map that starts roughtly 100px from the top of the page. When you scroll down the map remains in view but is 0px from top of page. When you scroll back up, it returns to its normal position, 100px from the top of the page.
Any ideas on how this is done?
You are looking for position: fixed
<div style="position: fixed; right: 100px; top: 100px; width: 200px; height: 100px; background-color: red">
I'm fixed</div>
Works in all browsers except IE6.
position:fixed is the way to go here. If you want to achieve the described effect like on the google page, you'll need a little javascript that toggles the element's css-styles depending on the scroll position.
You can find a script for that task here:
http://jsfiddle.net/6bnuU/
Note that depends on jquery. If you're looking for a solution that does not require jquery, you can easily rewrite the script, but you'll have to use a browser switch because IE uses a different API for the scrolling state than the other browsers.
Also note that IE 6 does not support position:fixed, so if you want to support it you'll have to emulate it with javascript (which is an easy task)
Use CSS position with the value fixed, then position it on the page with left, right, top and/or bottom. For example:
#some_element {
position: fixed;
top: 100px;
right: 0;
}
The exact example you mention also requires some JavaScript.
Related
What I am trying to figure out is how to animate a div that will start out in the middle of a div that is in the middle of a page. The div originally should not have a position: absolute. Unless it is not possible, I would like it not to start with that because it seems very tough to have any data below it. It's not going to be that big of a box. I am guessing anywhere between the height of 100px and 600px, with a width between 400px and 800px.
I originally found this JsFiddle Example that does a great job and almost exactly what I need. But the div starts with an absolute position and it is already located at the bottom right of the page to be animated.
Once the div is at the bottom right of the page, it needs to be fixed there so that I can scroll up and down the page without it moving. At this point I am not worried about being able to push it back up to the spot in which it came.
A couple things I tried: Lining it up in the position I desired, and then on the click of a button, add a class with the attribute position: absolute and calling the animate function like this:
chatWindow.stop().animate({
bottom: 0
, right: 0
}, 2000);
But my guess is that it originally needs to the the position set as in top: 0; left: 0 and that's why it won't work.
I already have it working without any animation and would love to be able to figure out how to animate this thing. Without animation, it's as simple as toggling a class with it's normal positions attributes with one that has a position: fixed; bottom: 0; right: 0.
Here is a Codepen Example that I created to show really what I need other than right animation part not being there. Any help would be awesome as I've been toying with this for quite some time now.
If you want an animation from left to right, you will have to play with left and top values. But the negative point is that will cause a weird animation because you want to keep a relative position of the box in the beginning.
So when you will do the animation, it will start from the very top left on the window, which is not good.
Like this
To avoid that, you will have to use absolute position in the beginning state. You said in your question you doesn't want it but I think it is required to get the wanted visual effect.
See here the live example with good effect
However, to keep a pretty nice animation, but I know it is not what you want, you can play with right and bottom values. It will make the box appears from the right and bottom corners of the window.
Like this
One possibility, still using absolute positioning, based on what's going on in your codepen example, would be to fake the current positioning by adding the following CSS:
.container {
padding-top: 250px;
}
.center-window {
position: absolute;
right: 50%;
margin-right: -200px; /* i.e. half of its width */
bottom: 100%;
margin-bottom: -250px; /* i.e. its height */
}
Then you could animate the right, bottom, and margin properties accordingly. See https://codepen.io/anon/pen/RaOJYY (though it doesn't currently do anything with the padding). Of course, if your not sure of the dimensions of .center-window, perhaps this solution won't quite work.
What is the best approach to restricting an absolutely positioned element's position, ideally in pure CSS?
I know that the following isn't possible but I guess what I'm looking for would look something like:
.stickyElement{
bottom-max:auto;
bottom-min:0px;
top-max: auto;
top-min: 100px;
}
That would allow an element to move to a position no less than 100px from the top of it's containing, positioned element.
An example (and my initial) use case for this is a menu that scrolls as part of a page but stops scrolling when it hits the top of a viewport. (Sticky menus?) an example of which can be seen on this page:
http://spektrummedia.com/startups
I fully expect that this is not possible without using some Javascript but I thought I'd put it out there.
position: sticky
There have been discussions in the W3C about this in recent years. One proposal is the addition of a sticky value for the position property.
.content {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 10px;
}
This is currently supported in Chrome 23.0.1247.0 and later as an experimental feature. To enable it, enter about:flags for the URL address and press enter. Then search for "experimental WebKit features" and toggle it between enabled and disabled.
On the html5rocks website, there's a working demo.
Strictly speaking, this is an implementation of sticky content, and not a general-purpose way to limit the minimum or maximum position of an element relative to another element. However, sticky content might be the only practical application for the type of the behavior you're describing.
As there is no way to build this for all major browsers without the use of JavasScript I made my own solution with jQuery:
Assign position:relative to your sticky-top-menu. When it reaches the top of the browser window through scrolling the position is changed to positon:fixed.
Also give your sticky-top-menu top:0 to make sure that it sticks to the top of your browser window.
Here you find a working JSFiddle Example.
HTML
<header>I'm the Header</header>
<div class="sticky-top-menu">
<nav>
Page 1
Page 2
</nav>
</div>
<div class="content">
<p>Some content...</p>
</div>
jQuery
$(window).scroll(function () {
var headerTop = $("header").offset().top + $("header").outerHeight();
if ($(window).scrollTop() > headerTop) {
//when the header reaches the top of the window change position to fixed
$(".sticky-top-menu").css("position", "fixed");
} else {
//put position back to relative
$(".sticky-top-menu").css("position", "relative");
}
});
CSS
.sticky-top-menu {
position:relative;
top: 0px;
width: 100%;
}
I know this post is old, and I might be a little late to it, but to anyone still wondering how to do this i would suggest checking out the clamp() method in CSS, you could do something like this:
top: clamp(30px, 10vw, 50px);
Which would set the min top value to 30px, the ideal value to 10vw, and the max value to 50px.
A media query expression that defines the distance between body 0X 0Y and browser-window 0X 0Y would allow elements to be made sticky after page is scrolled
No such expression has otherwise been proposed and is not supported by any browser, to my knowledge, but it would be a useful expression to allow dynamic configuration of sticky elements, such as menu bars that are sticky after page is scrolled past head, without use of JavaScript.
.this element {
position: absolute;
top: 200px;
}
#media (max-scroll: 200px 0) {
.this.element {
position:fixed;
top: 0;
}
}
To my knowledge, there is no way to restrict an element that was positioned using absolute positioning using solely CSS.
I have a div showing "Please wait". The markup for the div is
<div id="pleaseWait" class="divOuterPleaseWait" style="left:expression((documentElement.clientWidth-this.offsetWidth)/2);top:expression(documentElement.scrollTop+((documentElement.clientHeight-this.clientHeight)/2 ));">Please Wait...</div>
This is working fine with IE7. In IE7 the div is show at the center of the page. But excepted behariour is not optained in other browsers (ie. IE8,IE9,FireFox,Google Chrome etc). What should i give to get this working in all browsers? Also can I move the inline style to the my CSS?
A good way to center a div is to use fixed positioning, top and left set to 50% and left and top margin to the negative of half of the width/height:
http://jsfiddle.net/fLa4S/
See this SO answer, or this jsfiddle (press the 'confirm' button). The css you showed in your question is browser specific (especially: IE). In javascript you can center an element by determining the 'viewport' dimensions (height/width of the available screen) and position your element relative to those dimension. The links here demonstrate a way to do that.
It doesn't work in "other browsers" because you are using expressions in your CSS which are 1) incredibly bad for a variety of reasons (slow, deprecated, non-standard) and 2) unnecessary.
You can use pure CSS positioning (percentages and negative margins) or a little JavaScript (jQuery makes this very easy) to accomplish the same thing in all browsers.
Another approach:
<div style="text-align:center;width=200px;margin-left:auto;margin-right:auto">Please wait...</div>
CSS expressions are only working in IE. However, it´s generally not a good idea to use them because they are not W3C conform and in addition they can be very slow when you make heavy use of them.
The CSS attribute position: fixed could help you here:
#pleaseWait {
width: 400px;
height: 200px;
position: fixed; /* IE8+ */
left: 50%;
top: 50%;
margin-left: -200px; /* half of width*/
margin-top: -100px; /* half of height*/
}
If you have to still support <=IE7 you have to use JavaScript (but not within the CSS definition!)
Using auto as margins and defining a width and hight should be enough
<div style="width:200px;height:50px;margin:auto;text-align:center">Please wait ...</div>
If you only want to center verticaly, use margin: 0 auto;
PS: if you want to be more XHTML-correct, put your CSS in a CSS-file and use a class or a id to define the css-styling
I've answered this before: How to set the div in center of the page
Does anyone know if there is a way to disable the horizontal scrollbar using JavaScript?
I don't want to use overflow-x: hidden;.
Without using the perfectly workable overflow-x CSS property, you could resize the content to not require a scroll bar, through javascript or through HTML/CSS design.
You could also do this:
window.onscroll = function () {
window.scrollTo(0,0);
}
... which will detect any scrolling and automatically return the scroll to the top/left. It bears mentioning that doing something like this is sure to frustrate your users.
You're best served by creating an environment where unwanted UI elements are not present at all (through the CSS, through design). The approach mentioned above shows unnecessary UI elements (scroll bars) and then causes them to not work in a way that the user expects (scroll the page). You've "broken a contract" with the user - how can they trust that the rest of your web site or application will do expected things when the user makes a familiar action?
A way to prevent elements from scrolling down in jQuery:
$(element).scroll(function () {
this.scrollTop = 0;
this.scrollLeft = 0;
});
Well, this does not actually prevent the scrolling, but it "scrolls back" to the top-left corner of an element, similar to Chris' solution which was created for the window instead of single elements. Remove the scrollTop or scrollLeft lines to suit your needs.
A dirty trick would be overlapping the scrollbars: http://jsfiddle.net/dJqgf/.
var overlap = $('<div id=b>');
$("#a").wrap($('<div>'));
$("#a").parent().append(overlap);
with:
#a {
width: 100px;
height: 200px;
overflow-x: scroll;
}
#b {
position: relative;
left: 0;
bottom: 20px;
width: 100%;
height: 20px;
background-color: white;
}
How to get page 's scroll position change event?
I want to implement dynamic table of contents like http://bonsaiden.github.com/JavaScript-Garden/ ( In this website, with your scrolling of the webpage, It also shows the current active item)
Is it possible to implement same thing without getting current scroll-position?
I am very new to JS and web-world.
That page does use some JS trickery with its <nav> element, but it's fixing the location of the sidebar using position: fixed, that is, using CSS not JavaScript. Here's the relevant style declaration (comments mine):
nav {
position: fixed; // fix position
margin-left: 750px; // add 750 px of room to the left
top: 0; // set 0px from top of page
}