I have two divs. One should be positioned 5% from the left window border, the other should be to the right of the previously mentioned div and centred relative to window width. If the window is made too narrow it should not overlap the first div, and it should not move below either.
Whatever comes after should be positioned below the tallest of the first two divs.
How can I do this?
The closest I've come is to use a float for the first div. http://jsfiddle.net/7qVLm/
edit: Here's the final result that I'm happy with: http://jsfiddle.net/ATHpg/
Thanks to both #Christopher Smithson and #gmebeh whose answers helped me to get to this solution.
Here's a fiddle to consider for your solution.
http://jsfiddle.net/f2Muj/5/
With percentage-based width's you can make this happen:
jsFiddle
#d1 is 5% from the left, center-aligned content
#d2 is centered relative to the browser window, and will never overlap #d1
Both use fixed heights to accomodate fixed amounts of content
Play around with the percentages to get the exact width you you want.
Related
Not sure how to word this, so a little jsfiddle work:
http://jsfiddle.net/UwEe2/
That's the basic idea for what I need done, except that I am in need of the image to be centered (so that the very center, horizontally and vertically, of this image, appears in the little 250x250 window and is capable of being scrolled in all four directions to the edges of the image.
What I have, which would work if I would get the exact height and width of the image halved, http://jsfiddle.net/UwEe2/599/, which uses a second div inside the first with style="position:relative; top:-330px; left:-330px;", which shifts the image more to where I need it, but disallows the scrolling of the image left and up any further than the initial screen.
Hopefully this makes sense...I'm rather at a loss right now.
All you need to do is set the initial scrollTop and scrollLeft to the size of the image minus the container divided by two.
$('#container').scrollTop(($('#container img').height()-$('#container').height())/2).scrollLeft(($('#container img').width()-$('#container').width())/2);
http://jsfiddle.net/UwEe2/600/
I am creating a feedback system for one of my projects. My target device is iPad. Basically what happens is a div called into the page via ajax and it is supposed to overlay the content underneath. I have that part working.
What I want to do is have the div locked to the middle of the view-port. I have tried position:fixed on my element which works, except it will lock into the wrong position. It seems to be centering itself to the initial position of the viewport. If I scroll down to the bottom of a longer page and call my feedback window, it will still be near the top.
Ajax Page (this runs when the page is called)
$(document).ready(function(){
$(".popup").css({
top: "50%",
left: "50%",
marginLeft: -$(".popup").width() / 2,
marginTop: -$(".popup").height() / 2
});
});
If I can find the top of the viewport I think I'd be able to get this working right.
I've looked into: http://www.appelsiini.net/projects/viewport but it doesn't really solve my problem.
Any help, advice or pointers in the right direction would be greatly appreciated! Thanks!
Fixed positioning is applied relative to the top-left corner of the window, regardless of how far down you're scrolled (which I assume is what you want).
So:
.popup {
position:fixed;
top:20px;
left:40px;
right:40px;
}
Will, first of all, put your popup 20px from the address bar (meaning, even if you scrolled to the bottom).
Next, setting both left AND right will "stretch" the fixed element to start and end 40px (or whatever you give it) from both sides of the window. That's a convenient way of centering this popup div.
If your popup needs to be a fixed size – not stretched based on the width of the window – you could set both the left and right (to zero probably) and then inside this div, have another div with margin:0 auto, which will center that inner div within the fixed outer div.
P.S.
Just as you can set both left and right, you can also set both top and bottom, which will have corresponding results. However, if you need a fixed height, you won't be able to vertically center it using the margin:auto trick.
Don't know if it's the case, but If $(".popup") it's initially hidden by display:none, then it's width and height will be zero on page load.
I have a set of divs with position = absolute, and they can be positioned across the screen.
If the content of any div doesn't fit on the screen, the browser wraps the text into multiple lines and attempt to fit inside the window.
However, I dont want the browser to do that, It should instead hide the content.
http://jsbin.com/welcome/35835/edit/
Edit:
you may think of it as a div on a page with absolute positioning. and
1) the user can drag the div around
2) user can manually change the width of the div( there is a stretch box widget, which the user can use)..
So the problem is when the user is dragging the div around near the edges of the screen, the text should hide and not wrap if it goes out of the window. Hope this explains better
As shown in the example, block 2 shown is what I want.
So, lets say the width of the div is 100px, and the left position of the CSS style is (screen width - 50), then the rest of the text should hide.
Solution 1: white-space:nowrap. Cant use this, since this is a flexible width UI where user can change the width of the div if they want.
Solution 2: If I set the width of the div, explicitly to a number, it works fine.
But not a optimal solution, as then here I will always have to calculate the width for all divs at the time of rendering.
Is there a more optimal solution, which can make the browser not try to fit the text into the screen.
Hard to tell what you're asking. But I think you can use
{
height: 1.2em;
overflow: hidden;
}
To hide the content that is longer than the one line you support
http://jsfiddle.net/MXXDC/2/
If you put them all inside a huge (e.g. 5k px * 5k px absolute positioned div you should see the expected effect: http://jsbin.com/welcome/35862/edit
Is this what you want? (second item)
I wrapped the inner text in a very long div and applied overflow:hidden to it's parent.
I am not sure the exact use case of the widget so I am not 100% sure on what it can have and not have. I have an idea, maybe it will be useful - setting width to a % might help, something like this
.block2{
left: 50%;
top: 100px;
width: 100%;
}
you can set this in the css to avoid calculation with js, but like I said I am not sure of how this is used so this might not work but it might give you some ideas
I have a div (the green one) positioned in the middle of the window but I want that when I resize the window, this div ALWAYS respect a margin (the height of the logo and the footer).
I really don't get it. Could anyone have a look at it? The proyect is this one: http://sfrpsicologia.com/inicio.html
Thanks for everything
give ol & li width using %
Lets assume I have 10 blocks for jQuery Masonry, each block(div) width 200px, so at 1024x768, will look like this after Masonry
[000] [111] [222] [333] [444]
[555] [666] [777] [888] [999]
So, if I change screen resolution to 640x480, it will look like this
[000] [111] [222]
[333] [444] [555]
[666] [777] [888]
[999]
If I change screen resolution to 1600x190, it will look like
[000] [111] [222] [333] [444] [555] [666] [777]
[888] [999]
What I to achieve is: to make the first block([000]) always positioned in the center of the screen.
How?
PRTFM: "Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall". You can not fix one Masonry element in the center of a browser's window with all other elements arranging fluidly around it - you can have a fixed element top right or top left, called a "corner stamp".
you need to use:
$('.container').css('width','1024px');
$('.container').css('height','768px');
or
$('.container').css('width','640px');
$('.container').css('height','480px');
or
$('.container').css('width','1600px');
$('.container').css('height','190px');
to change the area of the boxes then the boxes will appears like what you want.