jquery set height AFTER load [英] jquery set height AFTER load

问题描述

我在设置动态加载元素的高度时遇到了一些麻烦。

我使用jquery load 函数将外部（动态）页面加载到我当前页面上的div（#cbox）。因为这个子页面是动态的，我不知道前面的内容的高度是多少。我想要获得高度一旦内容加载和设置容器div的高度匹配，使我的颜色背景css一路下降。我已经尝试过许多变体的100％高度div在css只，但只要我滚动页面，颜色向上滚动（100％似乎只设置浏览器窗口高度的100％，b / c的内容是动态的加载它不工作我的解决方案是将div的高度设置为加载内容的高度，但这只适用于第二次点击（因为在那一点页面加载和可访问，我需要找出如何做是在外部页面已经加载后改变div的高度，但我似乎无法想象它。）

我希望这是可以理解的

这里是我的onclick代码：

  jQuery（'＃cbox'）。load（'externalpage.php'）; 
 jQuery（'＃cbox'）。height（jQuery（'＃content'）。 
  

---

UPDATE：
如果我想将高度设置为div，但现在我发现我只想设置它的div高度如果内容高度是TALLER比窗口。否则我想把它设置为100％。我试着修改他们的代码稍微这个（onlick事件）：

  jQuery（'＃cbox'）。load（'< ？php the_permalink（）;？>'，function（）
 {
 if（jQuery（'＃cbox'）。height（）< jQuery（'＃content'）。height 
 {
 jQuery（'＃cbox'）。height（jQuery（'＃content'）。height（））; 
} 
 else 
 {
 jQuery（'＃cbox'）。height（'100％'）; 
} 
}）; 
  

但它不工作...任何想法？

  
您需要在内容加载后调用回调函数。 jQuery（'＃cbox'）。load（'externalpage.php'，function（）{
 jQuery（'＃cbox'）。height（jQuery（'＃content'）。height（））; 
}）; 
  

I am having a little trouble setting the height of an element that I am loading in dynamically.

I use the jquery load function to load an external (dynamic) page into a div (#cbox) on my current page. Because this sub-page is dynamic, I can't know before-hand what the height of the content is. I want to get the height once content is loaded and set the height of the container div to match so that my color background css goes all the way down. I have tried many variations of 100% height divs in css only, but as soon as I scroll the page, the color scrolls up (100% seems to only set 100% of the browser window height, and b/c the content is dynamically loaded it does not work. My solution is to set the height of the div to the height of the loaded content, but this only works on the SECOND click (because at that point the page is loaded and accessible. What I need to figure out how to do is change the height of the div AFTER the external page has already loaded, but I can't seem to figure it out).

I hope this is understandable to someone, I realize it is a bit convoluted.

here is my onclick code:

jQuery('#cbox').load('externalpage.php');
jQuery('#cbox').height(jQuery('#content').height());

---

UPDATE: The solutions below work if I want to set the height to that div. But now I find that I only want to set it to that div height IF the content height is TALLER than the window. Otherwise I want it set to 100%. I tried modifying their code slightly to this (onlick event):

jQuery('#cbox').load('<?php the_permalink(); ?>', function() 
   { 
      if (jQuery('#cbox').height() < jQuery('#content').height()) 
      {
         jQuery('#cbox').height(jQuery('#content').height()); 
      } 
      else
      { 
         jQuery('#cbox').height('100%'); 
      }
   });

but it does not work...any ideas?

解决方案

You need to call callback function after content is loaded.

jQuery('#cbox').load('externalpage.php', function() {
   jQuery('#cbox').height(jQuery('#content').height());
});

这篇关于jquery set height AFTER load的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！