Я бы предположил, что лучше использовать ajax и загрузить элемент svg с другой страницы.
$('.container').load(href + ' .svg_element');
Где href - расположение страницы с помощью svg. Таким образом, вы можете избежать любых неудобных эффектов, которые могут возникнуть при замене содержимого html. Кроме того, не забудьте развернуть svg после его загрузки:
$('.svg_element').unwrap();
Используйте jQuery для получения ширины окна.
if ($(window).width() < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
}
использовать
$(window).width()
или
$(document).width()
или
$('body').width()
Попробуйте этот код
if ($(window).width() < 960) {
alert('width is less than 960px');
}
else {
alert('More than 960');
}
if ($(window).width() < 960) {
alert('width is less than 960px');
}
else {
alert('More than 960');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Возможно, вы захотите объединить его с событием изменения размера:
$(window).resize(function() {
if ($(window).width() < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
}
});
Для RJ:
var eventFired = 0;
if ($(window).width() < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
eventFired = 1;
}
$(window).on('resize', function() {
if (!eventFired) {
if ($(window).width() < 960) {
alert('Less than 960 resize');
} else {
alert('More than 960 resize');
}
}
});
Я попробовал http: //api.jquery. com / off / без успеха, поэтому я пошел с флагом eventFired.
equalHeights
при изменении размера, но только для ширины больше 768. Это работает как шарм. благодаря
– Danny Englander
13 March 2013 в 21:35
// Adds and removes body class depending on screen width.
function screenClass() {
if($(window).innerWidth() > 960) {
$('body').addClass('big-screen').removeClass('small-screen');
} else {
$('body').addClass('small-screen').removeClass('big-screen');
}
}
// Fire.
screenClass();
// And recheck when window gets resized.
$(window).bind('resize',function(){
screenClass();
});
Я бы предложил (jQuery нужен):
/*
* windowSize
* call this function to get windowSize any time
*/
function windowSize() {
windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
}
//Init Function of init it wherever you like...
windowSize();
// For example, get window size on window resize
$(window).resize(function() {
windowSize();
console.log('width is :', windowWidth, 'Height is :', windowHeight);
if (windowWidth < 768) {
console.log('width is under 768px !');
}
});
Добавлено в CodePen: http://codepen.io/moabi/pen/QNRqpY?editors=0011
Затем вы можете легко получить ширину окна с помощью var: windowWidth и Height with: windowHeight
, в противном случае получить js-библиотеку: http://wicky.nillia.ms/ enquire.js /
нет, все это не сработает. Вам нужно this !!!
Попробуйте следующее:
if (screen.width <= 960) {
alert('Less than 960');
} else if (screen.width >960) {
alert('More than 960');
}
document.body.clientWidth
при использовании vanilla JS) равен & lt; = 960 (что означает здесь оператор if), тогда единственная другая опция (ELSE - screen.width & gt; 960), поэтому используя else, если здесь является избыточным. используйте document.body.clientWidth <=960 ? handleSmallerThan960() : handleLargerThan960()
или какой-либо вариант. НЕТ необходимости, если (избыточный код)
– Zargold
11 April 2018 в 19:12
Вы также можете использовать медиа-запрос с javascript.
const mq = window.matchMedia( "(min-width: 960px)" );
if (mq.matches) {
alert("window width >= 960px");
} else {
alert("window width < 960px");
}
Я знаю, что опаздываю, чтобы ответить на это, но я надеюсь, что это поможет кому-либо, у кого есть аналогичная проблема. Он также работает, когда страница обновляется по любой причине.
$(document).ready(function(){
if ($(window).width() < 960 && $(window).load()) {
$("#up").hide();
}
if($(window).load()){
if ($(window).width() < 960) {
$("#up").hide();
}
}
$(window).resize(function() {
if ($(window).width() < 960 && $(window).load()) {
$("#up").hide();
}
else{
$("#up").show();
}
if($(window).load()){
if ($(window).width() < 960) {
$("#up").hide();
}
}
else{
$("#up").show();
}
});});