为响应网站添加div

这是一个奇怪的问题，我不确定它是否可以完成。为响应网站添加div

我想删除一个div，然后把它放回去，具体取决于屏幕尺寸/设备类型。以右侧列中的广告为例，采用响应式网站时，当屏幕尺寸达到移动设备尺寸时，此列会消失。

广告代码被硬编码到页面上，因此在移动视图中广告代码仍在触发。使用媒体查询不会做我不认为的轨道，因为它只是“隐藏”元素。

我需要它被删除，当该网站达到一定的中断点，然后得到放弃...我做了一些研究，似乎该附加类可以工作？

这是我的模拟示例。 - http://mrpbennett.com/addRemove

 <div class="adslot-container"> 
      <img class="mpu"src="img/mpu1.png"> 
     </div> 

     <div class="adslot-container"> 
      <img class="mpu"src="img/mpu2.png"> 
     </div>

以上是代码/容器“广告位的容器”会是什么，我想从代码中删除并放回取决于屏幕尺寸。不隐藏...因此容器内的广告代码在加载时不会触发。

希望让事情更清楚一点？

来源

2015-09-29 mrpbennett

请在问题中发布足够的代码以便对具体问题进行复制 – Popnoodles

添加一个类只能同样做媒体查询会 - 显示或隐藏 – Popnoodles

如果没有看到代码，我首先想到的是只需要将'display：none;'应用于要隐藏div的断点。 – amklose

所以我想你不希望加载或执行的内容低于某个决议隐藏/显示不可接受。

像这样的东西可以动态地添加内容提供了一个JavaScript解决方案：

jQuery(function($){ 
    var lastWidth = null; 
    $(window).bind('resize', function(e){ 
     if((lastWidth == null || lastWidth < 500) && window.innerWidth >= 500) 
     { 
      $('body').append('<div class="target"></div>'); 
     } 
     else if((lastWidth == null || lastWidth >= 500) && window.innerWidth < 500) 
     { 
      $('.target').remove(); 
     } 

     lastWidth = window.innerWidth; 
    }).trigger('resize'); 
});

本质上模拟使用窗口resize事件媒体查询。

来源

2015-09-29 16:38:37 ryachza

我刚刚添加了一个模拟页面和一个片段，希望是有道理的。 – mrpbennett

@pbennettuk是的，我认为这是有道理的。我不清楚的是你将如何“发送它”，因为你不能将它作为HTML主体的一部分发送，而不会被执行。所以你必须把它作为一个字符串嵌入到某个地方并追加它，或者可能会异步地请求内容。我发布的解决方案应该可以动态地添加内容，但我不确定您打算如何实际获取内容。 – ryachza

将内容投放到一段脚本中，购买广告客户。所以内容的服务在这里不是一个担心。它删除了代码并确保它不会触发印象。我会给你的snipper一试，看看会发生什么。谢谢。 – mrpbennett

为响应网站添加div

回答

相关问题