I have a div element which I would like to be on the right side of the screen, but that does not update its position when the content extends dynamically the width of the page. I made some research, but it was unsuccessful. I know this can be done by using JQuery, but I don't know how. Any ideas?
Thanks.
You can use a fixed position on your div:
div { position: fixed; left: something; top: something; }
That would "glue" your div to the screen at the position you specify without any javascript. And if you scroll through the page, the div will stay at the same position.
Related
I am trying to write a script, so elements on a page scroll slower/faster than their parent div. I have wrote this:
$('#two').css({'top' : 600-($(this).scrollTop() / 1.2)+"px"});
My element is already 600px from the top and if I start scrolling the page from top-everything is fine, since it has these 600px to calculate from, but if I refresh the page right on the element, it jumps top, and console logs that top is calculated from 0, but not from 600px, where it is placed.
I tried to rewrite using offsetHeight and other methods(e.g.offset().top), but nothing seems to work.
Could you, please, give me a hint on how to make it recalculate dynamically, so when refreshing the page from the middle it won't jump up?
Use position fixed property Even when you scroll the element's position remains fixed.
<style>
#two {
position: fixed;
top: 600px;
}
</style>
I created a website with enough text, so that you are able to scroll (http://jsfiddle.net/o0emtyug/1/). On the right side I added some buttons for special functions on my website, which are positioned fixed and have a spacing using CSS top:XXpx;. Furthermore I placed the buttons within my menu bar div container nav-primary.
Using my JQuery script sticky-nav.js the menu bar is always visible on my page, even if I scroll down the page. So if I scroll down the page my menu bar stays on top of the page.
What I want to achieve:
I want my buttons to keep the same distance height from the menu bar all over the time. For this I will need to remove the CSS code top:XXpx;. If I do this, my buttons disappear. I tried changing top to margin-top but this did not solve my problem.
Anyone able to tell me what I need to do in order to arrange the buttons exactly below the menu bar, with the same distant height when scrolling?
I've added a test button with Absolute positioning in the nav bar, so it doesen't seem to be in the container, but inherits its position:
#test {
position: absolute;
right: 0px;
top: 100px;
}
Here the Fiddle
Remember that Absolute positioning is relative to the Body or the first container that have a specific position. In this case, top:100px is relative to .nav-primary, that has position: relative.
I am trying to add the thumbnails section of the js gallery in the footer of a web page. I've never broken up a gallery before and figured it's the only way to achieve this look
http://img69.imageshack.us/img69/5923/bsade.jpg
The link for what I have now is this: http://www.marisaraskin.com/two.html.
(The borders are just guides for me while I'm still working on it)
The CSS code for the thumbnails container is:
.galleria-thumbnails-container {
height: 100px;<br>
bottom: 0;<br>
position: absolute;<br>
left: 10px;<br>
right: 10px;<br>
z-index: 1;<br>
border:1px solid yellow;<br>
}
I'm not sure what my other options are for this. I was maybe thinking overlapping the content container over the footer with z-index. Though I'm iffy about that especially because everyone's screen resolution is different. I can post more code per request. I am not sure what else you need to see as of now.
In case you need to know I'm using a gallery js called "Galleria" (classic).
If I were you I'd modify the js script so that you can populate blocks that are not contiguous in the actual HTML code, but here's a rough approach to doing it all through css:
remove position:relative from #container
remove position:relative from .galleria-container
add position:absolute to .galleria-stage and remove left and right
positioning. Also, add top:90px (or something close to that) and
give it a width: width:920px.
change .galleria-thumbnails-container to use absolute positioning and
use the bottom:___ property to set it where you belong.
Basically what you're doing here is removing all the relatively positioning in the parent elements of the gallery so that the gallery segments all all being positioned with respect to the page rather than any of their parent elements. Once this is done, you can just modify the absolute positioning and width of the stage block and the thumbnail block so that they sit where you want them.
The form I am creating for a mobile website shows new fields based on previous selections. i.e. - a user selects and option from a dropdown menu (a date) and then a series of times shows up based on the day selected. The times are not showing until the day is selected.
I have a spinning loading div while the times are loaded in the background via ajax. The problem I am having is that the loading div sits at the top of the page when the 'action' is taking place about three-quarters of the way down. This 'action' part is in the viewport (it's a mobile website) and the loading div is at the top of the page - which is far above the users viewport.
How can I bring the loading div down so that it's always in the current viewport? How can I make the loading div follow the place in the form where the user currently is taking into account scrollbars?
I have been trying to use the vertically centred html/CSS model as described here:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
But it is not working and the centre of the page doesn't seem to update at each event when a form element is clicked. I think I need to use the focus or blur event for the form field to update this and reassess, but I don't seem to be able to get it working.
Does anyone have any tips on how to move the loading div to the centre of the current viewport area each time the page increases in length?
If your loading div is designed to be inside the document flow - e.g. a new content block inside the form - it's best to use jQuery to insert the loading div inside the content itself. It will be very difficult to position it pixel-perfect otherwise.
If the loading div is to appear as an overlay to the document then you can use fixed CSS positioning with a high z-index. To center it on all screen resolutions use jQuery and the formula (window.height() - div.height())/2 as the top pixel position. The code will be similar to this answer.
Hope that helps
If you do something like this, and put the div inside your <body> tag, it will stay in the middle of the visible area.
div.loading {
position: fixed;
top: 47%;
left: 47%;
height: 6%;
width: 6%;
z-index: 1000;
}
Another solution is to put it at the end of the container content will be loading into. Just make sure to load the content before it. If you give it a margin:auto; it'll stay right in the middle and keep pushing down.
EDIT: It's also worth noting the answer here. This will prevent covering up something important in a way the user can't fix.
Set your loading div's position to fixed, this will of course cause it to escape from its parent in the DOM structure, you will then need to position it where you want it. Fixed positioning is relative to the visible area of the viewport.
<html>
<head>
<style type="text/css">
#loader {
height: 30px;
position: fixed;
top: 50%;
left: 50%;
background: #ccc;
}
</style>
</head>
<body>
<div id="loader">Loading...</div>
</body>
</html>
This will result in the loader div always being centered on the screen, no matter where the user has scrolled, left/right up/down.
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
}