Can't position a div exactly over another element - javascript

I want to write a general Javascript function that will take the ID of an element on a web page and place a div exactly over the top of it. This is to hold an Ajax busy indicator.
I tried the following...
function showAjax(el) {
var pos = $("#" + el).position();
var width = $("#" + el).outerWidth();
var height = $("#" + el).outerHeight();
var ajax = $('<div id="ajaxBusy"></div>');
ajax.css("top", pos.top);
ajax.css("left", pos.left);
ajax.css("width", width);
ajax.css("height", height);
ajax.insertAfter("#" + el);
}
However, this positioned the new element too high and to the left, by the size of the margin. So if the top margin of the element passed in was 10px, the created element would be 10px too high on the page.
I tried to get around this by calculating the margins and adding them on...
function showAjax(el) {
var pos = $("#" + el).position();
var width = $("#" + el).outerWidth();
var height = $("#" + el).outerHeight();
var marginL = $("#" + el).css("margin-left").replace("px", "");
var marginT = $("#" + el).css("margin-top").replace("px", "");
var ajax = $('<div id="ajaxBusy"></div>');
var left = pos.left + marginL;
var top = pos.top + marginT;
ajax.css("top", pos.top + marginT);
ajax.css("left", pos.left + marginL);
ajax.css("width", width);
ajax.css("height", height);
ajax.insertAfter("#" + el);
}
However, this placed it in completely the wrong position altogether.
Anyone able to explain what I should be doing? I don't have any CSS set yet, so that's not affecting things, and I'm using an ordinary div tag for the element passed to the function.

I used .appendTo here which seems to have the desired results while using innerWidth and innerHeight without additional margin requirements. Making sure the parent div is set to position:relative;
function showAjax(el) {
var width = $("#" + el).innerWidth();
var height = $("#" + el).innerHeight();
var ajax = $('<div id="ajaxBusy" class="div2"></div>');
ajax.css("width", width);
ajax.css("height", height);
ajax.appendTo("#" + el);
}
.div1 {
border:1px dotted #ddd;
width:100px;
height:100px;
position:relative;
}
.div2 {
border:1px dotted #000;
width:100px;
height:100px;
position:absolute;
top:0px;
left:0px;
background:#ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1" id="div1" onclick="showAjax('div1');"></div>

In your code, first, set css-class of your div to the busy. Then, Add a div with the class overlay as a child of your div. the follwoing css are also should be added to your page (just busy and overlay classes).
the following code, shows how the css works:
div{
display:block;
background-color:red;
min-height:50px;
margin:10px;
}
.busy{
position:relative;
}
.overlay{
position:absolute;
margin:0px;
top:0;
left:0;
background-color:blue;
width:100%;
height:100%;
opacity:.5;
z-index:100;
}
<div>div-1</div>
<div class="busy">
<div class="overlay"></div>
div-2
</div>
<div>div-3</div>

Related

Want to change the CSS when the bottom of a fixed div reaches the top of the footer div

I have a fixed position div that I want to turn into absolute positioning when it reaches the top of the footer so basically it looks like the div stops when it hits the footer.
CSS
#body {
width:100%;
height:800px;
position:relative;
}
#footer {
width:100%;
height:500px;
background-color:yellow;
float:left;
position:relative;
}
#arrow {
position:fixed;
width:20px;
height:80px;
background-color:black;
top:160px;
left:0;
right:0;
margin:0 auto;
z-index:1000;
}
JavaScript
function scroll_style() {
var window_top = $('#arrow').offset().top;
var div_top = $('#footer').offset().top;
if (window_top > div_top) {
$('#arrow').css({position:'absolute',bottom:0,top:"auto"});
}
}
$(function() {
$(window).scroll(scroll_style);
scroll_style();
});
Here's the jsfiddle http://jsfiddle.net/be2Ff/1/. it works when the top of #arrow reaches the top of #footer but I need it to change when the bottom of the #arrow reaches the footer. Any ideas?
You forgot to account for the height of the arrow. Just add:
var window_top = $('#arrow').offset().top + $('#arrow').height();
to your function.
See this working demo.
All you need to do is add the #arrow's height to its position. At this point, you may want to cache the arrow's jQuery object first.
var $arrow = $('#arrow'),
window_top = $arrow.offset().top + $arrow.outerHeight(),
div_top = $('#footer').offset().top;

How to center images while keeping them responsive?

Hi please take a look at my site, below is the code snippet in question i have to center my images since ive never had any luck with the css-html methods. The problem is because its set to wait for document.ready() sometimes it will place all my images to the right. Ive tried window.load() but the images center offscreen at smaller window sizes. It was also suggested i try
<div style="
background: url('Assets/image.png') center center no-repeat;
width: 100%;
height: 500px;
">
</div>
but this causes it to lose responsiveness. Ive searched around and i cant find a solution, i just need my images (and the one form) to stay centered and for the images to scale down with the window size.
site: http://bit.ly/11nAQJK
<script type="text/javascript"> //Centering Script
$(document).ready(function () {
updateContainer();
$(window).resize(function() {
updateContainer();
});
});
function updateContainer() {
(function ($) {
$.fn.vAlign = function() {
return this.each(function(i){
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);
(function ($) {
$.fn.hAlign = function() {
return this.each(function(i){
var w = $(this).width();
var ow = $(this).outerWidth();
var ml = (w + (ow - w)) / 2;
$(this).css("margin-left", "-" + ml + "px");
$(this).css("left", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);
Remove that whole script. Place this in your CSS.
img{
display: block;
margin: 0 auto;
}
just do
<style>
a{
display:block;
text-align:center;
}
</style>
<a href="Assets/OrderSheet.xls">
<img src="Assets/OrderSheet.png" class="image">
</a>
no need for repositioning
fiddle
No need for js, CSS alone is fine. Set your image to display block, set a width and Max width plus margin auto.
img {
display: block;
width: 300px;
max-width: 100%;
margin: 0 auto;
}
If you won't accept the method suggested by others, I would suggest using em's. Best to use them everywhere, but you could just apply them to your images.
Then use media queries to scale up/down all elements with values specified in em's, by changing the base font-size for different screen sizes.
center a responsive sized element
/* element/id/class */
/* margin is 100 - width / 2 */
img {
width:34%;
margin: 0 33%;
}

style.top and style.left not working

I have a script written up that when a button is pressed, the formatdialog div gets resized. The problem is that I can't figure out why my javascript code does not work. I am able to resize the width and height, but for whatever reason, the top and left can't be adjusted.
It doesn't make sense to me what could be causing a problem. Firebug doesn't give me any errors. The javascript just resizes the width and height and ignores the top and left attributes. I am guessing that the css properties are causing a problem, I just don't know what.
css:
#formatdialog {
display:none;
left:25%;
top:25%;
width:400px;
height:200px;
position:absolute;
z-index:100;
background:white;
padding:2px;
font:10pt tahoma;
border:1px solid gray
}
Javascript:
function FormatDialogResize(){
var elem = document.getElementById('FormatDialog');
elem.style.top = "10%";
elem.style.left = "10%";
elem.style.width = "600px";
elem.style.height = "500px";
}
I also tried:
function FormatDialogResize(){
var elem = document.getElementById('FormatDialog');
elem.style.top = 10+"%";
elem.style.left = 10+"%";
elem.style.width = "600px";
elem.style.height = "500px";
}
Thanks.
I had a similar problem and discovered that setting .top would not work until after I set the element to "position: absolute" .
Why is you class name missing the pascal casing for the element ID in the classId
#formatdialog {
FormatDialog
You have a typo.
The element id is formatdialog but you are trying to call FormatDialog
var elem = document.getElementById('FormatDialog');
Your code should be like this:
<div id="formatdialog">
</div>
var elem = document.getElementById('formatdialog');
elem.style.top = "10%";
elem.style.left = "10%";
elem.style.width = "600px";
elem.style.height = "500px";
#formatdialog
{
left:25%;
top:25%;
width:400px;
height:200px;
position:absolute;
z-index:100;
padding:2px;
font:10pt tahoma;
border:1px solid gray;
background-color:orange;
}​
If you want to use Pascal casing make sure it is the same in elementId and class
Check this Fiddle

Position div to center of visible area

I'm in the midst of making a lightbox style pop-up for a mailing list sign up, but I want the pop-up to position to the center of the visible page, not just the center of the whole document; if the user scrolls to the bottom of the page and clicks to sign up, I want it to appear in the center of the screen.
I'm assuming jQuery/JS will be the best way to go for this; here's my current CSS code which works fairly well but the div needs to be pushed down into the visible space dynamically for smaller screens.
.my-div{
width:960px;
height:540px;
position:absolute;
top:50%;
left:50%;
margin-left:-480px;
margin-top:-270px;
z-index:60;
display:none;
}
You were close! It can be done with CSS alone:
Use position: fixed instead of position: absolute.
Fixed refers to the viewport, while absolute refers to the document. Read all about it!
var w = $(window).width();
var h = $(window).height();
var d = document.getElementById('my-div');
var divW = $(d).width();
var divH = $(d).height();
d.style.position="absolute";
d.style.top = (h/2)-(divH/2)+"px";
d.style.left = (w/2)-(divW/2)+"px";
I know this will not solve the question but it is good reference and a starting point: How to position a div in the center of browser window
Position Div Exactly at the center of the screen
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.exactCenter {
width:200px;
height:200px;
position: fixed;
background-color: #00FF00;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="exactCenter"> </div>
</body>
</html>
JSFiddle here
and here
with jQuery:
var left = ($(window).width() - $(.my-div).width()) / 2;
var top = ($(window).height() - $(.my-div).height()) / 2;
$('.my-div').position({top: top + 'px', left: left + 'px});
Although the accepted answer is best, if you can't set the divs position to fixed, then you can use this pure JavaScript solution.
var myElement = document.getElementById('my-div'),
pageWidth = window.innerWidth,
pageHeight = window.innerHeight,
myElementWidth = myElement.offsetWidth,
myElementHeight = myElement.offsetHeight;
myElement.style.top = (pageHeight / 2) - (myElementHeight / 2) + "px";
myElement.style.left = (pageWidth / 2) - (myElementWidth / 2) + "px";
JSFiddle
Or a more condensed version:
var w = window,
elem = document.getElementById('my-div');
elem.style.top = (w.innerHeight/2) - (elem.offsetHeight/2) + 'px';
elem.style.left = (w.innerWidth/2) - (elem.offsetWidth/2) + 'px';
This answer is a vanilla JavaScript version from Lahiru Ashan's answer.

Position the center of a div to given coordinates on a page

var x=200, y=140
How would I position the center of a div (width & height = 50px) to the above coordinates?
You can achieve this with pure CSS. Assuming your square div is static at 50px, parent div can have any coordinates:
.parent{
position:relative;
width:200px;
height:140px;
}
.child{
position:absolute;
top:50%;
left:50%;
margin-top:-25px; /* negative half of div height*/
margin-left:-25px; /* negative half of div width */
width:50px;
height:50px;
}
Check working example at http://jsfiddle.net/F4RVf/1/
this should work:
//onload
$(document).ready(function() {
var x=200;
var y=140;
var div = $("#myDiv");
var divWidth = div.width() / 2;
var divHeight = div.height() / 2;
div.css('left', x - divWidth );
div.css('top', y - divHeight);
});
here is the CSS
#myDiv{position:absolute; left:0; width:50px; height:50px; background-color:red;}
See it in action here: http://jsfiddle.net/cgvAB/3//
Depending on the rest of the page, you could use absolute positioning (potentially inside of a position:relative parent, if those are offsets):
<style type="text/css">
#myDiv {
position: absolute;
width: 300px;
height: 300px;
left: 200px;
top: 140px;
margin: -150px 0 0 -150px;
}
</style>
If your div is variable height/width, you'd need to do the margin bit with javascript (eg with jQuery):
<script type="text/javascript">
var $myDiv = $('#myDiv');
$myDiv.css({
'margin-left': -($myDiv.outerWidth({ 'margin': true }) / 2),
'margin-top': -($myDiv.outerHeight({ 'margin': true }) / 2)
});
</script>
<div id="mydiv" style="position: absolute; top:115px; left:175px; width:50px; height:50px;"></div>
*in case of dynamic coordinates add the following to event handling javascript function:
myDiv = document.getElementById('mydiv');
myDiv.style.top = x - 25 + 'px';
myDiv.style.left = y - 25 + 'px';

Categories