style.top and style.left not working - javascript

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

Related

CSS transition doesn't work when javascript added properties continuous

Below is a simplified version of a problem I am having with my website.
function move(){
document.getElementById("box").style.transition = "0s";
document.getElementById("box").style.top = "100px";
document.getElementById("box").style.transition = "2s";
document.getElementById("box").style.top = "0px";
}
#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}
<div id="box" onclick="move()"></div>
What I want it to do is make the box instantaneously jump downwards, and then slowly move back to its starting position. I have tested each of the four lines of code inside move() separately and they work perfect. I just can't get them to run in one go.
What am I doing wrong?
It seem the code needs to delay before assigning new property that cause browser can process the request. So you need to use setTimeout() to solving this problem.
function move(){
document.getElementById("box").style.transition = "0s";
document.getElementById("box").style.top = "100px";
setTimeout(function(){
document.getElementById("box").style.transition = "2s";
document.getElementById("box").style.top = "0px";
}, 10);
}
#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}
<div id="box" onclick="move()"></div>
Instead of relying on transitions, it would be better to use #keyframes and animation, so that you don't have to use dirty tricks like changing the transition duration from 0 to actual value mid-animation to achieve the jump. Below is an example that utilizes the #keyframes css features:
function move(){
document.getElementById("box").style.animation = "movement 2s";
}
#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}
#keyframes movement {
from {top: 100px;}
to {top: 0px;}
}
<div id="box" onclick="move()"></div>

Can't position a div exactly over another element

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>

Postion wont be editable by javascript if it is inherited

When the position of my div called player is styled to position:absolute; I can move its position with JavaScript but if it's inherited or fixed so its position is fixed to the parent div I cannot control it with JavaScript anymore.
html of the divs that.
<div id="game">
<div id="player"></div>
<div id="scores"><h1 id="playersScore"> 0</h1><h1 id="pcScore"> 0</h1></div>
</div>
javascript that updates the top position of the div
function readMouseMove(e){
if(e.clientY < 500){
var player = document.getElementById('player');
player.style.top = e.clientY + "px";
}
document.onmousemove = readMouseMove;
the css of the player is
#player{
border:1px solid black;
position:absolute;
left:50px;
top:50px;
background-color:#00FF00;
width:8px;
height:50px;
}
the parent div css is
#game{
margin:150px auto;
border:3px solid black;
background-color:black;
width:1000px;
height:500px;
}
Now this player div is been controlled by the javascript but if I change the position to positon:inherit I cannnot control the div with javascript anymore. I need to have the player divs positon to relate to its parent div.

JavaScript - Why is this code not working?

I am using JavaScript and CSS to try and make a masic messagebox using an iframe. What I would like to happen is the document to have an opacity of 0.4, and the message box to show. However, none of that happens. What should I do?
My JavaScript
function messageBox(text)
{
document.style.opacity = 0.4;
document.style.filter = 'alpha(opacity=40);';
var box = document.createElement('iframe');
box.setAttribute('id', 'msgBox');
}
My CSS
#msgBox
{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
height: 250px;
width: 350px;
background-color: #CCC;
margin: auto;
z-index:9999;
color:white;
box-shadow:1px 1px 1px 1px #444;
}
http://jsfiddle.net/a4m9d/
function messageBox(text){
document.body.style.opacity = 0.4;
document.body.style.filter = 'alpha(opacity="40");';
var box = document.createElement('iframe');
box.id='msgBox';
document.body.appendChild(box);
}
although I would recommend using a div instead of an iframe, for performance and flexibility
The document doesn't have a style property. Only elements have a style, and document is not an element.
You want to target the <body>, so try document.body instead.
function messageBox(text) {
document.body.style.opacity = 0.4;
document.body.style.filter = 'alpha(opacity="40");';
var box = document.createElement('iframe');
box.setAttribute('id', 'msgBox');
}
DEMO: http://jsfiddle.net/a4m9d/3/

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