Center object on screen when scrolling - javascript

I have a web page with a list on the right and a treeview on the right, and have a drag and drop interface to move objects from one to the other. There is a trash can in the middle used to delete items. Problem is, the page could potentially become 5000px long. How can I keep the trash can centered in the screen when the user scrolls? Thanks in advance for your answers!

To keep an element fixed in a particular position, use position: fixed, for example:
#trashcan {
position: fixed;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-left: -100px; /* half the width */
margin-top: -100px; /* half the height */
}
position: fixed is a lot like position: absolute but with the coordinates/position based on the viewport, not the document. So while position: absolute items will scroll with the page, position: fixed items will stay in place in relation to the viewport.

You could use css to fix the position of the trash can.
.trash-can
{
position: fixed;
left: /*value here*/;
top: /*value here*/;
}

The css shown works nicely for small objects. By small, I mean, smaller than the screen height. Objects that are larger than the screen height, cannot be scrolled when position:fixed is used.

Related

Image and button placed by percentage but are cropped when I resize the window

I'm trying to make my application responsive.
For that, the first thing I did was placing my buttons and logo by using percentages instead of pixels.
The problem is that when I resize my window to a smaller one, the buttons and logo are moving but they are also cropped on the side like this:
Here is what the button looks like before resizing:
And here is what it looks like after resizing to a smaller one:
How can I make it move but still appear in its entirety ?
Here is my CSS for this button:
#next-step{
position: absolute;
top: 90%;
left:88%
}
Change the CSS as follows:
#next-step{
position: absolute;
bottom: 1em;
right: 1em;
}
By using bottom and right instead of top and left, the reference will be the bottom right corner of your container. This way your button will never crop. You can play with the values to adjust the position of the button as you like.
Changing the position values to bottom and right might help you out. You could try this CSS code and maybe adjust the percentage values to your liking:
#next-step{
position: absolute;
bottom: 10%;
right: 12%;
}
This comes down to the way you're positioning the element.
#next-step{
position: absolute;
top: 90%;
left:88%
}
Is positioning the button based on the top-left corner.
If you were to instead use:
#next-step{
position: absolute;
bottom: 10%;
right:12%
}
It'll set the position to a similar place on-screen, but based on the bottom-right corner (you'll need to fine tune the numbers).
However, one thing to note: when using percentages, once you get below a certain screen size it can get messy, so it'd be worth looking at media queries too.

Center an Image Vertically in a Fixed Position Div

There are tons of questions on SO regarding vertical alignment, but I haven't discovered a clear answer to my problem.
I created a fiddle to show exactly what I'm trying to do.
HTML:
<div id="fade"></div>
<div id="fullscreen">
<img src="http://jira.seraphdevelopment.com/jmajewski/clean/uploads/pictures/n8jvxzd2476480d0.jpg" />
</div>
CSS:
#fade {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
/* Transparent Background */
background-color: #000;
opacity: 0.50;
}
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
/* Adding the display: block allowed me to center
the image horizontally with the margin: auto. */
display: block;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
/* This didn't work for me. */
vertical-align: middle;
/* This didn't do anything, either. */
line-height: 100%;
}
I am trying to make a lightbox of sorts, such that the user will click on an image on the page, causing that same image to load up in fullscreen mode. The first div, fade, will be used to cover the entire page with a semi-transparent black background, essentially giving the effect of the page fading away, while also making things modal.
I wanted to be able to nest the image inside the fade div, but I ran into a problem. Setting the opacity on the outer div (to create the fade effect) caused my nested image to inherit the opacity value. Thus, I added a separate div that was identical to the first one, except without the background, and nested the image inside of that.
For the record, I did manage to figure out a workaround to the opacity issue, but I haven't yet implemented it. Credit to Blowski, a SO user who posted this answer to a question regarding opacity:
I do not want to inherit the child opacity from the parent in CSS
The long story short, I have tried quite a few things now in trying to get this image to be centered vertically, but to no avail.
Keep in mind, this solution needs to work with any image!
I am certainly capable of adding a line of code to the $(window).resize() function to center the image manually, but I would like to avoid doing so, if possible. I'm very curious to learn a way around this, as I seem to run into these types of issues more often that I'd like.
Bonus: Why is vertical alignment so difficult for a browser to perform?
Here is one way centering an image in a fixed/absolute positioned div using CSS.
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
}
The trick is to use position: absolute for the img and set all the offsets to 0, and then margin: auto will center the image.
The max-width and max-height values will work as expected.
The reason this works is that the image has intrinsic dimensions, so the CSS engine has specific values to do the necessary math to center the images both vertically and horizontally.
See demo at: http://jsfiddle.net/audetwebdesign/KG99S/
Comments
Note that this technique works independently of the overlay.
Also, this works regardless of the aspect ratio of the image.
Reference
This technique follows from the CSS2 specification regarding how the horizontal and vertical margins are determined for absolutely positioned inline, replaced elements.
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width
and
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-height

Full width slider with responsive items inside

I'm trying to do a slider that have two links inside, the problem is:
This slider have two hexagons inside, they are links, in different window sizes the positioning of this hexagons change and they need to be at same positioning following the image when resizing.
My jsFiddle: http://jsfiddle.net/wtkd/7qr5w511/2/
Fullscreen view: http://jsfiddle.net/wtkd/7qr5w511/2/embedded/result/
This two hexagons are positioned correctly, but this image still not getting full width, if i put background-size:100%in my <div class="img-slider> will get full width, but the hexagons don't follow the position, someone can help me to find a way to maintain hexagons positioned at the same point ever?
I guess this is what you wanted. Little number magic and it's done.
.carousel .item .hexagon{
height: 64%;
left: 9.5%;
position: absolute;
top: 1.5%;
width: 22.5%;
}
.carousel .item .right{
right: 13.5%;
height: 64%;
bottom: 1.8%;
width: 22.5%;
}
and here's
DEMO

Css float:right 100% Height, image align bottom

Im using a float: right on my website. I want to make that div 100% of the window height minus a 10px margin. I want the height to resize with the page.
I also want the image in it to sit at the bottom of the 'container' minus 10px padding.
I've tried adjusting everything, and am sure its something in the code conflicting but i just can't work it out.
Thanks for any suggestions in advance.
I suggest you use absolute positioning instead of floating for this, you can make elements expand by setting for example top and bottom at the same time.
Absolute positioning could work for the image as well if you set its bottom to 10px (its offset parent will already be the right container, because any position other than the default static makes the element an offset parent).
Quick example:
/* this makes your body take up the whole screen */
html, body { height: 100%; }
/* the positioning magic */
#right { width: 100px; position: absolute;top: 10px; bottom: 10px; right: 20px; }
jsFiddle Demo
​UPDATE: and an updated jsFiddle to show an example on putting another element in the container and positioning it to the bottom.
#image { position: absolute; bottom: 10px; left: 20px; }

Fixed sidebar centered vertically

A website I am building has a fixed sidebar on the left at the center of the screen. It should always stay at the vertical center of the browser window when the page is scrolled.
How can I achieve this effect? Is there a pure css/html solution?
I thought about updating the sidebars position onscroll, but it is likely to flicker as the css top position gets updated. Is there any other solution? I would really like to do this with css only, but I wouldnt mind if jquery would provide the functionality I am looking for.
You probably need to add position: fixed; to the css to make it so that it does not move.
Here's what you are looking for. Please note that mobile browsers will ignore position:fixed so you will need to use some js to make it work for them as well. Also, make sure that the container's min-height is 200px;
#sidebar
{
height: 200px;
position: fixed; /* Keep in position on scroll */
top: 50%; /* push down 50% of container */
margin-top: -100px; /* bring back up 50% height of this element */
}
#container
{
min-height: 200px;
_height: 200px; /* IE6 always acts as though height is min-height unless overflow: hidden */
}

Categories