[英]Replace <div> with php contents using javascript (no jQuery) based on the browser viewport
[英]Can I replace the contents of a <div> with an external snippet of HTML using JQuery or JavaScript when viewport changes size?
<html>
<head>
</head>
function () {
var viewportWidth = $(window).width();
if (viewportWidth < 700) {
$('#wrapper').load('A.html');
};
<body>
<div id="wrapper">
<h1>original</h1>
</div>
</body>
</html>
我认为类似此功能的东西可能只用A.html就能做到
<h1>small</h1>
但我不知道。
感谢您提供的任何帮助
尝试使用resize事件:
$(window).resize(function() {
var viewportWidth = $(window).width();
if (viewportWidth < 700) {
$('#wrapper').load('A.html');
};
});
是的,您可以这样做。请看以下代码片段:
$(document).ready(function() {
$(window).resize(function() {
var widthCurr=$( window ).width();
if(widthCurr<=360 && widthCurr>276)
{
$('#sample-div').html( "<p>All new content. <em>You bet!</em></p>" );
}
else if(widthCurr<=276)
{
$('#sample-div').html( "<p>I am smaller. <em>You bet!</em></p>" );
}
else if(widthCurr>360)
{
$('#sample-div').html( "<p>Back to original</p>" );
}
});
});
在上面的示例中,随着窗口宽度的变化,您更改了div的内容。 同样,您可以设置高度条件,要获得高度,您需要使用:
var viewportHeight = $(window).height();
最后
$(window).resize
窗口/视口的大小更改时触发。
另外,如果要更改的内容很小,则应使用.html
而不是.load
希望这可以帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.