将具有动态VergeJS视口值的div添加到HTML [英] Add div with dynamic VergeJS viewport values to HTML

问题描述

在开发过程中使用 Verge.js 以跨浏览器显示当前视口的宽度和高度。

https://jsfiddle.net/ccL30a26/

 函数getVergeValues（）{
 
 viewportWidth = verge.viewportW（）//获取视口宽度像素。 
 viewportHeight = verge.viewportH（）//以像素为单位获取视口高度。 
 
 $（'。w'）。text（viewportWidth +'px wide'）; 
 $（'。h'）。text（viewportHeight +'px high'）; 
 
 
 $ b $（window）.on（'resize'，getVergeValues）; 
 $（document）.ready（getVergeValues）; 
  

而不是硬编码 #notification ， .w & .h div放入HTML中我喜欢将它们附加到 body 中，它们包含了Verge给它们的值。

我用这段代码实现了这一点。
https://jsfiddle.net/ccL30a26/1/

 函数getVergeValues（）{
 
 viewportWidth = verge.viewportW（）//以像素为单位获取视口宽度。 
 viewportHeight = verge.viewportH（）//以像素为单位获取视口高度。 
 
 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）; 
 
 
 $ b $（window）.on（'resize'，getVergeValues）; 
 $（document）.ready（getVergeValues）; 
  

但是现在在domready中没有显示任何值，并且在窗口大小调整后，值会被填入视口中。

如何获得在domready上显示的初始值，并且只显示窗口大小显示的当前值？ p> 编辑

观看 lab.js 我知道我必须使用作为循环来更新输出， updates 和 prev 都是空数组，并且 l 和 i 赋予值 0 。另外这个问题很可能对我有帮助。

  //更新输出
（l = updates.length; i  if（i in updates&&; updates [i]！== prev [i]）{
（outputs [i] = outputs [i] || $（prefix + i））。 （更新[I]）; 
 
 
  

刚才意识到我需要更新[31] = Verge中的viewportW（）; 和 updates [32] = viewportH（）; 。不知道如何在数组中真正放置 verge.viewportW（）和 verge.viewportH（）值，然后迭代它们。如果任何人都可以在中为循环输入我需要做的事情，这对我会有很大的帮助。



简单地说我正在寻找这个。

1.从获取第一个值> verge.viewportW（）并将其存储在数组的索引0
处。

2.将该值与 .text（）一起添加到 div 。

3.获取第二个值表单 verge.viewportW（）并存储在
index 1的数组中。

4.用新值替换 div 中的旧值。

5.只要数组中有新值，就这样做。

如果有人能够在评论每一行 for 循环时用简单的措辞进行解释，我认为这将帮助我理解遍历数组的基本原理。

我熟悉for循环，看起来像这样。这里购物清单中的所有商品都被赋予了类 done 。

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

我只是不太明白如何将它转换为数组价值观，新旧产出。开裂我的头..

解决方案：

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

解决方案

我不知道lab.js，但是在你的尝试中有

  function getVergeValues（）{
 viewportWidth = verge.viewportW（）//以像素为单位获取视口宽度。 
 viewportHeight = verge.viewportH（）//以像素为单位获取视口高度。 
 
 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）; 
  

在这个代码片段中，您有两部分：

1. 一个名为 getVergeValues
的函数

2. 调用窗口的两个jquery调用，您的功能

在您的功能中，您有4个部分：

1. 计算大小与边界


2. 元素的构建


3. 元素中文本的设置


4. 将元素添加到您的页面中

实际上，项目2和项目4只能完成一次因为你不想再次添加这些元素。

第1项和第3项必须在每个调整大小时重复，就像在第一个jsfiddle中一样。

因此，将元素2和元素4从函数中移出后，您的代码将按照您的方式运行： https://jsfiddle.net/zfzq1crL/ 。

如果哟你想把这些元素保存在一个函数中，你可以在文档中调用一个函数： https://jsfiddle.net / tfqsjf2t / 。

你仍然需要在init函数中调用你的函数，以便在开始时在你的元素中包含大小。

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

解决方案

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.

这篇关于将具有动态VergeJS视口值的div添加到HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！