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:
- CSS styling
- divManipulate.js
-
window.onload = function() {
divManipulate();
};
window.onresize = function() {
divManipulate();
};
Eduardo's Blog 