CODEWITHSUNDEEP
javascripthtmlcss
Sameeksha Kumari
Sameeksha Kumari

Reputation: 1264

normal flow of html..behaves weird.. Is it right to code positioning in JS?

From a very long time I am thinking of asking this. But was not sure if I should ask this question. I have been very lost seeing the behaviour of html elements with normal flow. It is sometimes very difficult to control them. Specially when I am using server side coding as well to create dynamic content. Sometimes, I take more time to understand what going on with these elements that I take to code server side or javascript. For me its very difficult to understand how a change will affect some other element.

So, I have thought of using absolute and relative positioning for elements and placing them based upon calculation of innerWidth and innerHeight of the window which will also make it responsive. I feel I wil have more control like that.

On window resize I can again position the element to make it dynamic with window resize. Just like the code below,

window.onload = function()
{
document.getElementById("gamectrl").style.position = "absolute";
document.getElementById("gamectrl").style.top = document.getElementById("rtctrls").offsetTop + 10 + "px";
document.getElementById("gamectrl").style.left = document.getElementById("rtctrls").offsetLeft + 10 + "px";
}

window.onresize = function()
{
    document.getElementById("gamectrl").style.top = document.getElementById("rtctrls").offsetTop + 10 + "px";
    document.getElementById("gamectrl").style.left = document.getElementById("rtctrls").offsetLeft + 10 + "px"; 
}

Do you think it is the right way to position html elements? I am very comfortable with this. But I am not sure if this is the right way to do it.

Please share if you have any experience on this. I am very confused about which approach to use. I dont understand the normal flow of html elements properly as I could not find any good resources which discuss them in depth. So, if you know any good resource to learn about normal document flow(in-depth) then do share as well.

Upvotes: 0

Views: 63

Answers (1)

Jeff
Jeff

Reputation: 305

I would not use javascript to just reposition an element giving the example you've shown. In your example I would stick to using CSS. If you're concerned about the browser/device resizing then you need to look into using @media queries. If you need to have your elements a certain distance away from the edge of the window or another element you can set the element's margin with percentage values (ex. margin-top: 10%;). Below are some references to positioning with CSS as well as @media queries.

  1. Media Queries: http://css-tricks.com/css-media-queries/ Media
  2. Queries: http://www.w3schools.com/css/css_mediatypes.asp CSS
  3. Positioning: http://alistapart.com/article/css-positioning-101 CSS
  4. Positioning: http://www.w3schools.com/css/css_positioning.asp

Upvotes: 1

Related Questions