1

I need to use some data, calculated by JS (for example: window size) as css property of some HTML element. To avoid flickering of the window because of layout changes, I can't afford to use document.onready. I actually need to trigger JS function at the time the DOM element is added to the DOM tree.

I've tried with DOMNodeInserted event, but it seems that it triggered only for elements that are added post-loading the HTML code, with JavaScript.

What I need is to change tag that is presented in the original HTML source of the page. So for now I just inline JavaScript just after the HTML code of the tag that has to be changed, but is there a way to do this without inlining JS after every such tag. Something like DOMNodeInserted, but triggered while the original HTML is being rendered. Or how else I can accomplish this - having a JS dependent layout that does not move after it's loaded (it's properly generated before showing it to the user) and still have HTML code in the page (e.g. do not generate the page entirely from JavaScript)?

UPDATE here is the javascript that is used to resize image. It respects both width and height, while widht:100% or height:100% works unless the window width/height is not smaller then image itself.

function resizeImg() {
    var imgwidth = bgImg.width();
    var imgheight = bgImg.height();

    var winwidth = $(window).width();
    var winheight = $(window).height();

    var imgratio = imgwidth / imgheight;

    imgwidth = winwidth;
    imgheight = winwidth / imgratio;


    if (imgheight < winheight) { 
        imgheight = winheight;
        imgwidth = imgheight * imgratio;
    }

    $('.cover-image').css({
        width: winwidth+'px',
        height: winheight+'px'
    });
}
Community
  • 1
  • 1
Maxim Krizhanovsky
  • 26,265
  • 5
  • 59
  • 89
  • Can you add the HTML / JavaScript - sounds like a strange situation to be in .. setting CSS properties after load ... whats wrong with %'s ? or even better a http://jsfiddle.net/ – Manse Jan 26 '12 at 16:37
  • 2
    Have display:none on the document body, do your js magic onload, then switch to display:block – Wolfgang Kuehn Jan 26 '12 at 16:38
  • @ManseUK there are few examples in the project I'm working on, and I was curious how this is handled in general. In the specific case: setting width/height of an img in such way that it fills the whole page (as a background) but retains it's ratio; the other thing is a footer which has to be bottom:0, but min-height should be the same as the height of the browser window. I trigger both on window.resize but the question is about the initial load. – Maxim Krizhanovsky Jan 26 '12 at 16:42
  • 1
    `img { height:100%; width: auto; }` will do full size and maintain ratio ... full height div is do-able with 100% height parent (could be body) – Manse Jan 26 '12 at 16:46
  • @ManseUK the scenario is to have any size image scaled for any size window, both width and height (so it's scaled bigger than the window and positioned in a way that part of the img is cropped, but the visible part is in proper ratio). The image itself should not influence the size of the container, as it's used as background. I'll post similar page tomorrow, but it's uses a lot of JS (and even JS templates), but I think it's not HTML/CSS duable. If you can prove the opposite, please post example. – Maxim Krizhanovsky Jan 26 '12 at 17:01
  • @ManseUK found examples on the internet, it seems doable. Thanks for solving one XY problem for me – Maxim Krizhanovsky Jan 26 '12 at 17:19
  • @Darhazer no probs - if you posted some HTML and your current code im sure there are CSS workarounds for your problems ... – Manse Jan 26 '12 at 17:20

1 Answers1

2

You can use a script to compose a stylesheet and add it to a new style element on the head before the body renders.

Or you can use media queries in a style sheet and apply the styles you prefer for different window or device dimensions.

kennebec
  • 102,654
  • 32
  • 106
  • 127