Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Параметр width в зависимости от ширины браузера (https://javascript.ru/forum/dom-window/46678-parametr-width-v-zavisimosti-ot-shiriny-brauzera.html)

skymakc 19.04.2014 11:41

Параметр width в зависимости от ширины браузера
 
Нужно в Java Script поставить width в зависимости от ширины браузера пользователя. Width в итоге должно равняться (ширина браузера - 960)/2

Скрипт выглядит так:

$(document).ready(function() {

$('body').append('<div class="button-up" style="display: none;opacity: 0.7;width: 195px;height:100%;position: fixed;left: 0px;top: 0px;cursor: pointer;text-align: center;line-height: 30px;color: #d3dbe4;font-weight: bold;">Вверх</div>');

$ (window).scroll (function () {

if ($ (this).scrollTop () > 100) {

$ ('.button-up').fadeIn();

} else {

$ ('.button-up').fadeOut();

}

});

$('.button-up').click(function(){

$('body,html').animate({

scrollTop: 0

}, 800);

return false;

});

$('.button-up').hover(function() {

$(this).animate({

'opacity':'1',

}).css({'background-color':'rgb(240,210,50,0.1)','color':'#6a86a4'});

}, function(){

$(this).animate({

'opacity':'0.7'

}).css({'background':'none','color':'#d3dbe4'});;

});

});

skymakc 19.04.2014 15:00

Хорошо, переформулирую :)

Как мне задать width через переменную в коде ниже?

$('body').append('<div class="button-up" style="display: none;opacity: 0.7;width: 195px;height:100%;position: fixed;left: 0px;top: 0px;cursor: pointer;text-align: center;line-height: 30px;color: #d3dbe4;font-weight: bold;">Вверх</div>')

Sweet 19.04.2014 15:23

Цитата:

Сообщение от skymakc
Как мне задать width

Во-первых, так:
$('body').append('<div class="button-up" style="display: none;opacity: 0.7;width: 195px;height:100%;position: fixed;left: 0px;top: 0px;cursor: pointer;text-align: center;line-height: 30px;color: #d3dbe4;font-weight: bold;width: ' + width + 'px;">Вверх</div>')

Во-вторых, если вынести стили из строки, получается более читаемо:
var div = $('<div class="button-up">Вверх</div>');
div.css({
  display: 'none',
  opacity: 0.7,
  ...,
  font-weight: 'bold',
  width: width + 'px'
});

В-третьих, лучше эту кучу стилей вынести в css:
$('body').append('<div class="button-up some-class" style="width: ' + width + 'px;">Вверх</div>')
// или
var div = $('<div class="button-up some-class">Вверх</div>');
div.css('width', width);
$('body').append(div);

skymakc 19.04.2014 16:03

Sweet, большое спасибо, получилось!


Часовой пояс GMT +3, время: 22:20.