На десктопе на объект повешено несколько событий, но на мобильниках эти события уже не должны срабатывать.
h = windows.height
w = windows.width
$(window).resize(function() {
h = windows.height;
w = windows.width;
});Так получилось, что в десктопной и мобильных версиях один объект расположен совершенно в разных местах.
var a = {"streams": {
"stream1": {"alive":0, "iframe":"адрес?id-1"},
"stream2": {"alive":1, "iframe":"адрес?id-2"},
"stream3": {"alive":1, "iframe":"адрес?id-3"}
}}
var res = [];
for (k in a.streams) {
// перебираем a.streams по ключам
if (a.streams[k].alive == 1) {
console.log('активно');
res.push(a.streams[k]); // собираем массив с alive == 1
} else {
console.log('не активно');
}
}
console.log(res[0]); // выводим первое значение из массива с alive == 1<div class="wrapper">
<div class="leftSidebar">
Left
</div>
<div class="rightSidebar">
Right
</div>
<div class="element">
</div>
</div>html, body {
display: block;
width: 100%;
height:100%;
margin: 0;
padding: 0;
}
.wrapper {
display: block;
width: 100%;
height: 100%;
background-color: red;
overflow: hidden;
}
.leftSidebar, .rightSidebar {
display: inline-block;
float:left;
width: 50%;
height: 100%;
text-align: center;
}
.leftSidebar {
background-color: #C0C0C0;
}
.rightSidebar {
background-color: #E0E0E0;
}
.element {
display: block;
position: absolute;
top: 0;
left: 50%;
width: 30px;
border: 1px solid #000000;
height: 100%;
background-color: rgba(255, 255, 255, 0.75);
margin: 0 0 0 -16px;
}
.selectOff {
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}$(document).ready(function(){
$('html').on('mousedown','.element',function() {
$(this).css('cursor','e-resize').addClass('elementMove');
$('.leftSidebar, .rightSidebar').addClass('selectOff');
$('.wrapper').on('mousemove',function(e) {
console.log('run');
var CursorPosition = e.pageX - $('body').offset().left;
var WrapperWidth = $('.wrapper').width();
$('.elementMove').css('left',CursorPosition);
$('.leftSidebar').css('width',CursorPosition);
$('.rightSidebar').css('width',WrapperWidth - CursorPosition);
});
});
$('html').on('mouseup','.element',function() {
$(this).css('cursor','default').removeClass('elementMove');
$('.leftSidebar, .rightSidebar').removeClass('selectOff');
$('.wrapper').unbind('mousemove');
});
});$(document).on('keydown','body',function(e) {
if (e.which == 44) {
console.log('Тырк!');
} else {
console.log('Не тырк!');
}
});Вот пример со скриптом https://jsfiddle.net/zanebfaL/1/
.wrapper {
width: 100%;
height: 200px;
padding: 20px;
background-color: orange;
}
button {
position: absolute;
width: 50px;
left: calc(50% - 50px);
top: 200px;
}
.first {
position: absolute;
top: 20px;
left: 50px;
width: 100px;
height: 100px;
background-color: lightgreen;
}
.second {
position: absolute;
right: 0;
height: 100px;
width: 100px;
margin: 0 50px 0 0;
background-color: indianred;
}
@keyframes first-animation {
100% {
left: 100%;
top: 80px;
height: 50px;
width: 50px;
margin: 0 0 0 -100px;
}
}
.first-animation {
animation: first-animation both 2s normal;
}
@keyframes second-animation {
100% {
height: 50px;
width: 50px;
}
}
.second-animation {
animation: second-animation both 2s normal;
}function fn_tree(a) {
// где a - ответ полученный от сервера
// до вызова функции надо проверить на typeof(a) === 'undefined' || a === null
var arr1 = [];
for (var i1 = 0; i1 < a.length; ++i1) {
var arr2 = [];
if (typeof(a.[i1].nextChild) === 'undefined' || a.[i1].nextChild === null) {
for (var i2 = 0; i2 < a.[i1].nextChild.length; ++i2) {
var html2 = '' +
'<div>' +
a.[i1].nextChild.[i2].id +
'</div>' +
'';
arr2.push(html2);
};
}
var html1 = '' +
'<div>' +
'<div>' +
a.[i1].id +
'<div>' +
'<div>' +
arr2.join('') +
'<div>' +
'</div>' +
''; // рагульно строим DOM и чем-то его наполняем, нет времени :-)
arr1.push(html1);
};
var b = arr1.join('');
return b;
}