FREEBIE FRIDAY! Manipulate divs dynamically and proportionally with Javascript.

What is it?

This is a script I’ve written to dynamically manipulate divs according to viewport height. Any property that can be set with a pixel value can be manipulated, e.g. height, margin, line-height or background-position, just to name a few. It has been tested in Internet Explorer 10, Firefox 24.0, Chrome 30, Opera 12.16 and Safari 5.1.7. It works great with my imgResize script and is available for free use, private or otherwise.

How to implement it

HTML markup and CSS styling

The first thing you need to do to make the script communicate with the divs on your webpage is to name those divs. In your HTML markup add an id to each div that will be manipulated. It should look something like this:

<div id=”div1“>

So far so good. The next step is to declare what properties of the div will be manipulated and by how much. This will actually be done in your CSS styling. For example:

#div1:before {
    content: ‘height .04900‘;
    display: none;
}

The parts in bold can be edited; everything else should be left alone. #div1 could well have a different name, for example. The important thing is that it references the div to be resized; this example correctly references the HTML markup example above it. In this example height is the property to be manipulated and .04900 the percentage value, i.e. 4.9%. The value must contain 5 digits. If the property name contains a dash, it should be written in camel case instead. For example, the CSS property “background-position” should be written as “backgroundPosition.”

In summary the combination of this HTML markup and this CSS styling, when correctly coupled with divManipulate.js would result in #div1 always taking up 4.9% of the viewport’s vertical space.

It is possible to manipulate up to two different properties for each div. For example, if we wanted #div1 to not only take up 4.9% of the viewport’s height, but also maintain a top margin of 1% of the viewport’s height, the complete code would look like this:

#div1:before {
    content: ‘height .04900‘;
    display: none;
}

#div1:after {
    content: ‘margin-top .01000‘;
    display: none;
}

Notice the keyword “after” following #div1: – when a div has two properties to be changed, the second should always use the keyword “after.”

Customizing the script

Upon opening divManipulate.js take a look at line 5. This is where you can enter the names of the divs to be resized. The names refer to the ids assigned to each div.

Inserting the script on your webpage

We want the script to execute automatically on page load so the user is immediately presented with a page tailor-made for the current size of his or her browser. We also want it to execute on page resize for real-time adaptation upon browser resize. To achieve these objectives we will be calling the script using the following code:

window.onload = function() {
    divManipulate();
};

window.onresize = function() {
    divManipulate();
};

We can place the above in the file containing the HTML (enclosed by <script> tags) or in its own .js file. Just make sure this code comes after the divManipulate.js script itself — we can only instruct it to call something it already knows about! It’s also important to note that divManipulate.js should come after any CSS styling.

Implementing it, summarized

  • In the HTML markup add an id to every div that will be manipulated.
  • For each div, declare the properties to be manipulated and by how much. If manipulating more than one property per div remember to use the keyword “before” for the first and “after” for the second. Remember also that the value should contain 5 digits.
  • Edit line 5 of divManipulate.js – div id names.
  • Use the following order inside the HEAD tags in your HTML markup:
    1. CSS styling
    2. divManipulate.js
    3. window.onload = function() {
          divManipulate();
      };
      window.onresize = function() {
           divManipulate();
      };

Download

https://www.dropbox.com/s/snc32twm2lcql2p/divManipulate.zip

FREEBIE FRIDAY! Resize images dynamically and proportionally with Javascript.

What is it and how does it work?

Here is a script I’ve created to resize images according to viewport height. It has been tested in Internet Explorer 10, Firefox 24.0, Chrome 30, Opera 12.16 and Safari 5.1.7. I’m making it available for free use, private or otherwise. Just download it from the link at the bottom of this post.

I originally created this to ensure that my layout would adapt itself to different screen resolutions. For example, I wanted an image that takes up 50% of the screen’s height on a 2560×1440 resolution to still take up 50% of the screen’s height on a 1280×720 resolution. Without this script the image would take up 100% of the screen’s height when the page is viewed on a display with 1280×720 resolution.

Eventually I realized that the script would be more effective if it resized images based not on screen resolution, but on viewport height. So I re-designed it to take into account OS and browser bars at the top and bottom of the screen — e.g. Windows taskbar, Mac dock/menu bars, browser toolbars and status bars. The result is that images will be shrunken accordingly when those are present. Bars at the left and right edges of the screen/browser are not taken into account, just as resizing the browser window horizontally does not affect image size: this script is only designed to resize images according to the viewport height.

Having the script do its thing based on viewport size rather than resolution also opened up another possibility: real-time adaptation upon browser resize. This is true fluid design. A script based solely on screen resolution will run on page load and stop there, but one based on browser window/viewport can be fluid since the window/viewport can always be resized, at least on a regular desktop or laptop computer.

How to implement it

Creating the images

Images should be designed on a canvas with the same dimensions as your chosen maximum resolution. This will ensure that they will scale down proportionally to take up the same percentage of a browser’s viewport as it does on the canvas. For example, if we wanted to design a webpage for a maximum resolution of 2560×1440 we should create our images on a canvas of those exact dimensions (e.g. create a new Photoshop file that is 2560×1440). And if we wanted a particular image to always take up 20% of the viewport’s height we should make it take up 20% of the canvas’s height (288px in this case).

Customizing the script

After deciding on a maximum resolution for your layout, the script is ready to be customized. Upon opening imgResize.js take a look at lines 4 and 5. It’s pretty self-explanatory: on line 4 the names of the image files to be resized can be entered and on line 5 the maximum resolution for which they were designed. It may sound counter-intuitive but you can actually increase these values down the line if you change your mind and decide that the images are too large. However, don’t decrease the values or the image will be displayed larger than their native sizes at the original maximum resolution — in other words, there will be a loss of quality.

Last steps

In your HTML markup add an id to each image that will be resized. It should look something like this:

<img src=”image1.jpg” id=”image1“>

Notice that the id name is the same as the image name, minus the extension. This is very important, otherwise the code will not work.

Finally add the following lines in your CSS styling:

#image1, #image2, #image3 {
    display: none;
}

Of course this is just an example; #image1, #image2, and #image3 could well have different names. The important thing is that they reference the images to be resized. What this step does is hide the images until the resizing script has run. This prevents them from “flashing” in their native dimensions before being resized. It’s not crucial to the functionality of the script but it adds a professional touch to the whole thing.

Inserting the script on your webpage

We want the script to execute automatically on page load so the user is immediately presented with a page tailor-made for the current size of his or her browser. We also want it to execute on page resize for real-time adaptation upon browser resize. To achieve these objectives we will be calling the script using the following code:

window.onload = function() {
    imgResize();
};

window.onresize = function() {
    imgResize();
};

We can place the above in the file containing the HTML (enclosed by <script> tags) or in its own .js file. Just make sure this code comes after the imgResize.js script itself — we can only instruct it to call something it already knows about! It’s also important to note that imgResize.js should come after any CSS styling.

Implementing it, summarized

  • Create images in a canvas of the same size as the maximum resolution for which the webpage will be optimized.
  • Edit lines 4 and 5 of imgResize.js – image file names and maximum resolution.
  • In the HTML markup add an id to every image that will be resized. Each id should have the same name as the image file it represents.
  • Style each id with display: none; in your CSS styling.
  • Use the following order inside the HEAD tags in your HTML markup:
    1. CSS styling
    2. imgResize.js
    3. window.onload = function() {    
          imgResize();
      };
      window.onresize = function() {    
          imgResize();
      };

Download

https://www.dropbox.com/s/h08851b0yb586ou/imgResize.zip