Add div with dynamic VergeJS viewport values to HTML

Question

Using Verge.js during development to display current viewport width and height cross-browser.

https://jsfiddle.net/ccL30a26/

function getVergeValues() {

viewportWidth  = verge.viewportW() // Get the viewport width in pixels.
viewportHeight = verge.viewportH() // Get the viewport height in pixels.

$('.w').text(viewportWidth  + 'px wide');
$('.h').text(viewportHeight + 'px high');

}

$(window).on('resize', getVergeValues);
$(document).ready(getVergeValues);

Instead of hard-coding the #notification, .w & .h divs into the HTML I like to append them to the body with them containing the values that Verge gives them.

I have achieved this with this code. https://jsfiddle.net/ccL30a26/1/

function getVergeValues() {

viewportWidth  = verge.viewportW() // Get the viewport width in pixels.
viewportHeight = verge.viewportH() // Get the viewport height in pixels.

var $width  = $( "<div class='w'></div>" );
var $height = $( "<div class='h'></div>" );

$('.w').text(viewportWidth  + 'px wide');
$('.h').text(viewportHeight + 'px high');

$( "body" ).append( $width, $height);

}

$(window).on('resize', getVergeValues);
$(document).ready(getVergeValues);

However now on domready there is no value shown and on window resize the values get added up filling the viewport.

How can I get the initial value to show on domready and only the current value to show on window resize?

edit
Looking at lab.js I understand I have to use a for loop to update the changed outputs where outputs, updates and prev are all empty arrays and l and i are given the value 0. Also this question will most likely help me.

// Update changed outputs
for (l = updates.length; i < l; i++) {
    if (i in updates && updates[i] !== prev[i]) {
        (outputs[i] = outputs[i] || $(prefix + i)).text(updates[i]);
        }
}

Just realized I need updates[31] = viewportW(); and updates[32] = viewportH(); from Verge. No clue how to actually put the verge.viewportW() and verge.viewportH() values in an array and then iterate over them. If anyone could put in words what I need to do in the for loop that would greatly help me.

Simply speaking I am looking for this.
1. Get first value from verge.viewportW() and store that at index 0 of the array.
2. Add that value with .text() to the div.
3. Get the second value form verge.viewportW() and store that at index 1 of the array.
4. Replace the old value in the div with the new value.
5. Do this for as long as there are new values in the array.

If someone could lay this out in really easy wording while commenting each line of the correct for loop, I think that would help me understand the fundamentals of iterating through an array.

I am familiar with a for loop that looks like this for example. Here all items of a shopping list are given the class done.

for (var index = 0; index < shoppingList.length; index++){
    shoppingList[index].className = 'done';
}

I just don't quite understand how to translate this to an array with changing values, old and new outputs. Cracking my head..

Solution:
https://jsfiddle.net/ccL30a26/3/ by Pierre-Louis Laffont

Answer 1

I don't know lab.js, but in your attemp there is a mistake in the javascript you tried.

function getVergeValues() {
   viewportWidth  = verge.viewportW() // Get the viewport width in pixels.
   viewportHeight = verge.viewportH() // Get the viewport height in pixels.

   var $width  = $( "<div class='w'></div>" );
   var $height = $( "<div class='h'></div>" );

   $('.w').text(viewportWidth  + 'px wide');
   $('.h').text(viewportHeight + 'px high');

   $( "body" ).append( $width, $height);
}

$(window).on('resize', getVergeValues);
$(document).ready(getVergeValues);

In this code snippet you have two parts:

1. A function named getVergeValues
2. Two jquery calls on window resize and document ready where you call your function

In your function you have 4 parts:

1. The calcul of sizes with verge
2. The construction of your elements
3. The setting of the text in your elements
4. The add of your elements in your page

Actually the items 2 and 4 have to be done only once as you don't want to add those elements again anf again.

The items 1 and 3 have to be repeted on each resize as in your first jsfiddle.

So putting the elements 2 and 4 out of the function make your code behave the way you want: https://jsfiddle.net/zfzq1crL/.

If you want to keep those element in a function you can make a function called only on document ready: https://jsfiddle.net/tfqsjf2t/.

You still have to call your function in the init function in order to have the sizes in your elements at the start.

Answer 2

Because you are appending, the old values don't get cleared. To achieve what you want, you should set html of width and height divs that already exist in body. So you should not create w and h divs each time the function is called. Instead, you should change their html.

HTML:

<body>
    ...Your body content..
    <div class="w"></div>
    <div class="h"></div>
</body>

JS:

function getVergeValues() {

    viewportWidth  = verge.viewportW() // Get the viewport width in pixels.
    viewportHeight = verge.viewportH() // Get the viewport height in pixels.

    $('.w').html(viewportWidth  + 'px wide');
    $('.h').html(viewportHeight + 'px high');    
}

$(window).on('resize', getVergeValues);

Also, you should call getVergeValues function on document load to fill the values initially.

$(document).on('ready', function(){
    getVergeValues();
}