Слайдер контента и element.style

[px379]

Здравствуйте. Помогите разобраться с такой штукой.

 

Установил я слайдер контента, все работает, все Ок! Но, в самом низу, оказывается не видно цен. Ну да то понятно, высота класса, который присвоен тегу <ul>, не захватывает всей области контента.

Полез я значит в стили слайдера, ковырял я его и мучал как тузик мурзика. В этом занимательном процессе, в дебагере (в браузере) я заметил вот это (см. скрин.)

 

 

Вот какраз height: 538px; и регулирует высоту. Но больше всего, меня смутил класс - element.style. Такого класса в стилях и в скрипте я не нашел, параметров которые присвоены данному классу тоже. Попытка прописать высоту классу, который присвоен тегу <ul> ситуацию не исправила. Я уже не буду расписывать что я делал дальше со стилями, дабы избавить от лишней информации.

 

На счет класса element.style я погуглил. Гугл мне сказал, что это стили, которые прописаны в HTML-тегах. Я лично проверил документ, подобных стилей нет. У меня в тегах вообще почти стилей нету, пишу все во внешнем файле стилей.

 

И еще вопрос, вот в Опере в дебагере, вот там когда на водишь на какой либо элемент страницы, он начинает подсвечиваться, а если клацнуть по нему, то сразу выделяется HTML код по которому клацнул. Можно ли так сдеть в Хроме?

 

Стили слайдера:

/** * BxSlider v4.1.2 - Fully loaded, responsive content slider * http://bxslider.com * * Written by: Steven Wanderski, 2014 * http://stevenwanderski.com * (while drinking Belgian ales and listening to jazz) * * CEO and founder of bxCreative, LTD * http://bxcreative.com *//** RESET AND LAYOUT===================================*/.bx-wrapper {	position: relative;	margin: 0 auto 60px;	padding: 0;	*zoom: 1;}.bx-wrapper img {	max-width: 100%;	display: block;}/** THEME===================================*/.bx-wrapper .bx-viewport {	-moz-box-shadow: 0 0 5px #ccc;	-webkit-box-shadow: 0 0 5px #ccc;	box-shadow: 0 0 5px #ccc;	border:  5px solid #fff;	left: -5px;	background: #fff;		/*fix other elements on the page moving (on Chrome)*/	-webkit-transform: translatez(0);	-moz-transform: translatez(0);    	-ms-transform: translatez(0);    	-o-transform: translatez(0);    	transform: translatez(0);}.bx-wrapper .bx-pager,.bx-wrapper .bx-controls-auto {	position: absolute;	bottom: -30px;	width: 100%;}/* LOADER */.bx-wrapper .bx-loading {	min-height: 50px;	background: url(../images/bx_loader.gif) center center no-repeat #fff;	height: 100%;	width: 100%;	position: absolute;	top: 0;	left: 0;	z-index: 2000;}/* PAGER */.bx-wrapper .bx-pager {	text-align: center;	font-size: .85em;	font-family: Arial;	font-weight: bold;	color: #666;	padding-top: 20px;}.bx-wrapper .bx-pager .bx-pager-item,.bx-wrapper .bx-controls-auto .bx-controls-auto-item {	display: inline-block;	*zoom: 1;	*display: inline;}.bx-wrapper .bx-pager.bx-default-pager a {	background: #666;	text-indent: -9999px;	display: block;	width: 10px;	height: 10px;	margin: 0 5px;	outline: 0;	-moz-border-radius: 5px;	-webkit-border-radius: 5px;	border-radius: 5px;}.bx-wrapper .bx-pager.bx-default-pager a:hover,.bx-wrapper .bx-pager.bx-default-pager a.active {	background: #000;}/* DIRECTION CONTROLS (NEXT / PREV) */.bx-wrapper .bx-prev {	left: 10px;	background: url(../images/controls.png) no-repeat 0 -32px;}.bx-wrapper .bx-next {	right: 10px;	background: url(../images/controls.png) no-repeat -43px -32px;}.bx-wrapper .bx-prev:hover {	background-position: 0 0;}.bx-wrapper .bx-next:hover {	background-position: -43px 0;}.bx-wrapper .bx-controls-direction a {	position: absolute;	top: 50%;	margin-top: -16px;	outline: 0;	width: 32px;	height: 32px;	text-indent: -9999px;	z-index: 9999;}.bx-wrapper .bx-controls-direction a.disabled {	display: none;}/* AUTO CONTROLS (START / STOP) */.bx-wrapper .bx-controls-auto {	text-align: center;}.bx-wrapper .bx-controls-auto .bx-start {	display: block;	text-indent: -9999px;	width: 10px;	height: 11px;	outline: 0;	background: url(../images/controls.png) -86px -11px no-repeat;	margin: 0 3px;}.bx-wrapper .bx-controls-auto .bx-start:hover,.bx-wrapper .bx-controls-auto .bx-start.active {	background-position: -86px 0;}.bx-wrapper .bx-controls-auto .bx-stop {	display: block;	text-indent: -9999px;	width: 9px;	height: 11px;	outline: 0;	background: url(../images/controls.png) -86px -44px no-repeat;	margin: 0 3px;}.bx-wrapper .bx-controls-auto .bx-stop:hover,.bx-wrapper .bx-controls-auto .bx-stop.active {	background-position: -86px -33px;}/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {	text-align: left;	width: 80%;}.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {	right: 0;	width: 35px;}/* IMAGE CAPTIONS */.bx-wrapper .bx-caption {	position: absolute;	bottom: 0;	left: 0;	background: #666\9;	background: rgba(80, 80, 80, 0.75);	width: 100%;}.bx-wrapper .bx-caption span {	color: #fff;	font-family: Arial;	display: block;	font-size: .85em;	padding: 10px;}

HTML:

<ul class="bxslider">   <li>      Контент-1   </li>   <li>      Контент-2   </li></ul>

[Ironimus]

element.style автоматически генерируется когда вы добавляете стили скриптами, и в дебаггерах он добавляется в свойство style элемента. А насчет хромированого дебаггера, то вот:

[px379]

element.style автоматически генерируется когда вы добавляете стили скриптами, и в дебаггерах он добавляется в свойство style элемента. А насчет хромированого дебаггера, то вот:

Я и в скрипте искал подобные параметры, ничего нету. Скрипт вот этот: http://bxslider.com/

Edited May 10, 2014 by px379

[Ironimus]

Можно ссылку на сам сайт?
UPD. Простите, не заметил в конце предыдущего сообщения.

Edited May 10, 2014 by Ironimus

[Ironimus]

После всех поисков, я понял, что на моем любимом css3 слайдер делается намного проще и понятнее. Но не кросбрузерно. Может все же сделаете на обычном jQuery и создадите велосипед, но такой, что бы вы могли его нормально понять и изменить все что душе угодно?.

[px379]

Можно ссылку на сам сайт?

UPD. Простите, не заметил в конце предыдущего сообщения.

Сайт у меня только на локальном компе. Это у меня как-бы тренировочный полигон. Ну в общем я только учусь верстать. Но если надо, я могу залить сайт на какой нибудь хостинг.

После всех поисков, я понял, что на моем любимом css3 слайдер делается намного проще и понятнее. Но не кросбрузерно. Может все же сделаете на обычном jQuery и создадите велосипед, но такой, что бы вы могли его нормально понять и изменить все что душе угодно?.

А с этим скриптом, вообще никак не получится?

Может тогда посоветуете хороший слайдер контента? Надо что бы по бокам были стрелки что бы листать и внизу навигация (типа пагинатора). Просто этот скрипт единственный, который я смог установить. Но тут скорее всего виноваты мои кривые руки чем скрипты)

[gritsyuk]

Попробуйте для класса bx-viewport прописать нужную вам высоту таким образом height: 600px!important; или прям в теге 

<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 538px; " style="height: 600px!important;"

Edited May 10, 2014 by gritsyuk

[px379]

Попробуйте для класса bx-viewport прописать нужную вам высоту таким образом height: 600px!important; или прям в теге 

<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 538px; " style="height: 600px!important;"

Спасибо! Помогло. !important я так понял, принудительно устанавливает параметры стилей? Но все равно интересно, откуда именно дебагер взял те стили...

 

Этот слайдер на JQuery. А сами библиотеки, я беру с их сервера. То-есть так:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script><script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Может скачать их на комп и там поковырять на счет тех параметров стилей?

[gritsyuk]

Этот стиль динамически вставляет javascript (jquery) также как и обвертку слайдера (<div class="bx-viewport ....">). Смотреть нужно файл - jquery.bxslider.js , так как jquery.bxslider.min.js уже сжатый (в одну строку). А что бы там разобратся нужно понимать как минимум основы Javascript и синтаксис jquery.

[px379]

Этот стиль динамически вставляет javascript (jquery) также как и обвертку слайдера (<div class="bx-viewport ....">). Смотреть нужно файл - jquery.bxslider.js , так как jquery.bxslider.min.js уже сжатый (в одну строку). А что бы там разобратся нужно понимать как минимум основы Javascript и синтаксис jquery.

Понятно. Но мне до JQuery как до Шанхая босиком)

[gritsyuk]

Но мне до JQuery как до Шанхая босиком)

Путь в тысячу миль начинается с одного шага  

[Ironimus]

На этом сайте вы очень скоро пройдете приблизительно половину пути.