View RSS Feed


  1. Emulating the HTML5 seamless iframe attribute

    There are many scripts that present a method for setting the iframe's height to match its contents. But I looked in vain for a script that integrates the iframe in a completely seamless way into the containing document. So I tried to write a script for emulating seamless iframes myself.
    My seamless iframes are competely indistinguishable from the surrounding text/content and inherit their css from the main document. All the code is put in the main document. No special code required in the ...
  2. How to open a new tab together with text or code 'of my choice'

    I knew that it is possible to programmatically force the browser to open a new window instead of a new tab, or the other way round. But I didn't know until now how to open a new tab together with text or code 'of my choice'.
    The text or code we may want to 'add' to a new tab must have the format of a string. The more complex the text or code we want to add, the bigger the danger of making mistakes in writing the string.
    So I decided to create a HTML-to-javascript-converter specially ...
  3. A close button (and text) on top of a fluid centered image II

    I learned a few things after I posted this on my blog about putting a close button on top of centered fluid images.
    I used jquery and translate in CSS transforms there to do the job. But I found that it can also be done with the help of a combination of window.innerWidth/Height and element.clientWidth/Height. As window.innerWidth/Height and element.clientWidth/Height are also supported by older browser, a technique using these methods must be preferred. Demos and explanations here.

    Updated 04-10-2015 at 10:52 PM by molendijk

  4. A close button on top of a fluid centered image

    EDIT: see this for an alternative (better?) method..
    The translate() method used inside the HTML-code below moves both a (super) div-containing-a-close-buttom (id: 'the_div') and an image (id: 'the_img') to the center of the window. The jquery-onload in the image ensures that the width of the div equals the width of the image. This is a requirement if we want to get the button (in the div) at the right position in front of ...

    Updated 04-10-2015 at 10:47 PM by molendijk

  5. Using the main scrollbar to scroll an iframe

    If we want to use the browser's scrollbar to scroll the content of an iframe, we must do the following:
    1. calculate iframe's offsetHeight + pixel distance of top of iframe with respect to top of main window + pixel distance of bottom of iframe with respect to bottom of main window ;
    2. give the main window a pixel height that is identical to the result of that calculation;
    3. make sure that the value for the number of pixels that the content of the iframe is scrolled upward (in the case of
Page 3 of 10 FirstFirst 12345 ... LastLast