css/ jQuery - center absolute positioned div - javascript

The div is 50% opaque and is displayed on top of the site's content, and it has a fixed width of 960 pixels (it's created by jQuery).
How can I center it horizontally?
margin: 0 auto; doesn't work :(

margin: 0 auto; won't work for elements that are absolutely positioned. Instead, we can work with the properties of the element itself. Check out the fiddle...
http://jsfiddle.net/UnsungHero97/HnzyT/2/
To center it horizontally is easy since you know the width AND its positioned absolutely. All you have to do is give it 2 CSS properties:
width: 960px;
position: absolute;
/* ... other CSS properties... */
left: 50%; /* 1. move it to the right 50% of the width of the page; now the left side of the element is exactly in the middle */
margin-left: -480px; /* move the element to the left exactly half of its width and now the center of the element is centered horizontally */
If you want to center it both vertically and horizontally, you need to know how wide AND how tall the element is.
I hope this helps.
Hristo

Just subtract the window midpoint from half the width of you element on resize. Here's a simple plugin that you could easily accomodate to center vertically if need be as well:
$.fn.centerMe = function () {
this.css('left', $(window).width()/2 - $(this).width()/2);
};
$(window).resize(function() { $('#yourElem').centerMe(); });
$('#yourElem').centerMe();
See working example →

Related

Position element relative to window regardless of window size

How can I go about positioning an element in the same relative position in the viewable area of the window regardless of the window size?
For example, an element that should be:
30% of the window width from the left of the page, and
50% of the window height from the top of the page.
In most cases it's possible to do this with CSS only. Did you try to use position: fixed?
You can use absolute positioning and viewport percentage lengths, where one vh unit is 1% of the height of the viewable area and one vw unit is 1% of the width of the viewable area.
Viewport-percentage lengths define the value relative to the size of the viewport, i.e., the visible portion of the document.
- https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths
.demo {
position: absolute;
top: 50vh;
left: 30vw;
background: #AFAFAF;
}
<div class="demo">Hello World!</div>

Responsively position an image at specific target over background image

I have a responsive background image with a smaller image positioned over it. I am trying to keep the smaller image at a specific location when the window is resized.
Both images scale properly, and the left position works so far, but not the top position.
img {
max-width:100%;
}
#dot {
position: absolute;
top: 17%;
left: 66.5%;
width: 10%;
height: 0;
padding-bottom: 10%;
}
I have found some questions with answers that suggest:
Vertical Alignment or Positioning with Javascript
I've also looked into .position() and .offset(), not sure if either would work.
I think my best solution would be to calculate the Y offset using the current window height as a reference but I am not sure what my JS or Jquery code should look like.
Here is my jsfiddle:
http://jsfiddle.net/melissadpelletier/xBu79/21/
I'm not sure exactly what you're trying to do with your images, but you could create a new smaller image (green dot) with the same aspect ratio as your background image, and have the dot placed where it needs to be within that aspect ratio. Then stretch the width of that to be 100% and the two images are basically overlapping, but the top image (smaller image) has a transparent background. Not sure if that all makes sense, but I made a new image and did the fiddle thing, which I'm new to: http://jsfiddle.net/ydack/
img
{
width:100%;
}
#dot
{
width: 100%;
position: absolute;
top:0;
left:0;
}
#dotImg
{
top: 0;
left: 0;
width: 100%;
}
I mistakenly placed the green dot's position based on the black outline, not the full background image, so the dot is slightly up and right of where it needs to be. BUT, the position is maintained while re-sizing the window. Hacky, but it could work!
You are definitely gonna need some javascript for this. What you can do is calculate the height and width of the image whenever you resize your browser window. Then simply use some math to calculate the position of the dot relative to those dimensions.
var height = $('#image').height();
var width = $('#image').width();
/* change the fractions here according to your desired percentages */
$('#dot').css({left: width/2, top: height/2});
$(window).resize(function() {
height = $('#image').height();
width = $('#image').width();
/* change the fractions here according to your desired percentages */
$('#dot').css({left: width/2, top: height/2});
});
Try this code: http://jsfiddle.net/LimitedWard/FFQt2/3/
Note that you will need to also resize the dot according to the height/width of the image if you want it to always fit inside that box.
Edit: after further investigation, it is possible to do this in CSS; however, it's a lot sloppier because the dot doesn't follow the image if the window is too wide. This jQuery solves that problem by using pixel-based positioning.
http://jsfiddle.net/sajrashid/xBu79/24/
plenty of errors mainly not closing tags
<div id='background'>
<img src='http://i.imgur.com/57fZEOt.png'/>
<div id='dot'>
<img src='http://i.imgur.com/yhngPvm.png'/>
</div>
</div>

How to position the element using absolute position?

I am trying to create a responsive design for my app.
I have a big background image and it will show the full size when user has large screen and only show partial if user uses small screen.
I want to place few elements on my app with absolute position but the problem is I can't lock their top and left value because the screen size changes.
I have something like
css
#background{
background: url('BG.jpg') no-repeat top center fixed;
width: 1900px;
height: 1200px;
}
#element{
position: fixed;
z-index: 5;
top: 50%; //looks fine in 1900 x 1200 screen but position is off on 1200 x 1000
left:70%; //looks fine in 1900 x 1200 screen but position is off on 1200 x 1000
}
html
<div id='background'></div>
<img id='element' src='test.jpg' />
How do I keep the position of the element on the same spot when user has small screen? Thanks for the help!
When using position: absolute, you need to make sure that it has a parent with a position attribute other than the default (which is static). If there is no such parent, the document is the effective parent. For your example, I would advise making the img#element a child of div#background like so
<div id='background'>
<img id='element' src='test.jpg' />
</div>
and then adding position:relative; to the #background css style
#background{
background: url('BG.jpg') no-repeat top center fixed;
width: 1900px;
height: 1200px;
position: relative;
}
The reason relative is used, is because it doesn't take the element out of the document flow (like fixed or absolute would) and as long as you don't specify a top, left, 'bottom', or right attribute to the parent (#background in the case), it will stay in the same location as it would with default positioning.
Edit:
I don't think this will work out of the box for you. You need to figure out how to make the image's width dynamic as well. You can either give it a % based width or use media queries.
Edit 2:
Ia also just noticed you have position:fixed for img#element. Change that to position:absolute. that will make it so that it is positioned relative to the position:relative parent rather than the window.
Consider making a javascript function that calculates the screen width. After that add margin-left to #background equal to ( screen width / -2 ). Make #background width & height - 100%

Calculate the remaining width of an element

I just need help making an element fit the remaining space of a div, that is covered by a fixed position element.
Over-simplifying: I have a left-fixed menu and it has 25% of total width BUT a limit: max-width: 350px and min-width: 280px.
I also have a center aligned div that has 80% of width.
I want to put content in the second div, between the point where the divs touch, and the left margin.
I already tryed to put a spacing div between the div start and the menu end, (to the content take the rest of the space), but i reached the conclusion that it is imposible to make those calculations with css due to the min and max widths. (If i change the screen res. the width may change OR NOT).
How can i fix this?
Its javascript a good idea?
I think either this fiddle or this fiddle may get you what you want. In either case, I used a pseudo-element to generate a float to space it.
#container:before {
content: '';
display: block;
float:left;
margin-left: -12.5%; /* push float to left edge based on 80% container width */
width: 31.25%; /* make float 25% of total width based off its 80% container */
max-width: 350px;
min-width: 280px;
height:100%; /* or 90% in first fiddle */
}
The second fiddle also has overflow: hidden set on the #content if you want it kept right always. Both also require a height: 100% set on the body and html tag.
you can use this type javascript
var a =$('#id of outer div').height();
var b = $('#id of inner div').height();
var c = a-b;
$('#id of filling div').css("height",c);

How to keep text over a huge image in proper position on all resolutions?

In my intro page I have a really big image in height and width to fit all the resolutions (more than 4000px in width) and I set it as below:
#source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Then, I added some text over that image with these style properties:
.description {
position:absolute;
top:510px;
left:23px;
width:340px
}
And it looks properly (and as I want it to be shown) on my 15.6 inch laptop with 1366x768 resolution.
However when my roommate saw it on his high resolution monitor the description was not on the “right” position. Of course, I understand why this is happening.
My question is how can I keep dynamically the proper position of the description text in all resolutions?
Thank you very much.
Set the distance from the bottom, not from the top. Or set it in %.
EDIT: I've adapted one of my experiments into an example: http://dabblet.com/gist/2787061
The position of the description is set relative to the bottom and the left of the image container (the image is filling its entire container).
In the first case, the distances to the left and the bottom of the image container are fixed, in px.
In the second case, they are in % and change on resizing the browser window.
Basically, the rules that do the trick are
figcaption {
bottom: 5px;
left: 23px;
/* more rules here */
}
in the fist case (fixed distances, in px) and
figcaption.perc {
left: 10%;
bottom: 17%;
}
in the second case (percentage).
Also, please note that you don't need position: absolute or to set the top and the left properties for the image.
However, you do need to set position:relative on the parent of the description box.
For the image to fill the screen horizontally, you need to have margin:0; and padding:0; on the body element and width: 100%; and margin: 0; on the figure element. I've edited my example to reflect these changes http://dabblet.com/gist/2787061
For the image to fill the screen both horizontally and vertically, the easiest way is to not even use an img tag, but simply set the image as a background image for the body and set the height for both the html and the body elements to 100% - example http://dabblet.com/gist/2792929
Be careful for two reasons: one, this will really distort the image and can make it look ugly when resizing the browser window and two, if you need some content below the image you will need to give the the outer element position: absolute and set its top: 100%. Both these two aspects can be seen in the example I've linked to. You can simply remove the content below the image if you don't need it.
use position:relative; for the div that wraps the image, and position:absolute; for the text div
please set percentage
check the example- description box set in horizontal center,
first set position relative into wraper div
.description {
position:absolute;
top:510px;
left:50%;
width:340px;
margin:0 0 0 -170px
}

Categories

Resources