На этот раз точно JavaScript =)

[Makha]

Есть написаный мною по примеру слайдер (наверное так называется)
Javasсript

    sid = '';
    function show(id){
        if(sid != ''){
            document.getElementById(sid).style.display = "none";
        }
        document.getElementById(id).style.display = "block";
        sid = id;
    }
    
    
    function hideall(){
        if(sid != ''){
            document.getElementById(sid).style.display = "none";
            sid = '';
        }
    }

CSS

.slide {
	height: 350px;
	width: 730px;
}
.slide_img {
	display: none;
	height: 350px;
	width: 420px;
	float: left;
	position: relative;
	top: 0px;
	left: 0px;
}
.slide_block_link {
	float: right;
	height: 350px;
	width: 245px;
}
.slide_link_red {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFF;
	background-color: #efefef;
	display: block;
	height: 41px;
	width: 230px;
	padding: 7px;
	margin-bottom: 5px;
	background-image: url(../images/red_hover.jpg);
	position: relative;
	top: 0px;
	right: 0px;
}
.slide_link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000;
	background-color: #efefef;
	display: block;
	height: 41px;
	width: 230px;
	padding: 7px;
	margin-bottom: 4px;
}
.slide_link:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #7b7a7a;
	background-color: #efefef;
	display: block;
	height: 41px;
	width: 230px;
	padding: 7px;
	margin-bottom: 4px;
}
.slide_link:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFF;
	background-color: #efefef;
	display: block;
	height: 40px;
	width: 230px;
	padding: 7px;
	margin-bottom: 5px;
	background-image: url(../images/red_hover.jpg);
}

.slide_img_red {
	display: block;
	height: 350px;
	width: 420px;
	float: left;
	position: relative;
	top: 0px;
	left: 0px;
}
#content {
	position:relative;
	width:480px;
	height: 67px;
	color:#fff;
	overflow:hidden;
	margin-top:-70px;
}

#transparent {
opacity:0.6;
filter:alpha(opacity=60);
-moz-opacity:0.6;
background-color:#000;
width:480px;
height: 67px;
position:absolute;
}

#text{ 
position:relative; 
padding: 10px;
}

html

<div class="slide">
        <div class="slide_img_red" id="bl1">
          <img src="images/big_photo.jpg" alt="" width="480" height="350" />
         <div id="content">
<div id="transparent"> </div>
<div id="text">
YOUR TEXT HERE 1
</div>
</div></div>
 
 
 <div class="slide_img" id="bl2">
          <img src="images/film.jpg" alt="" width="480" height="350" />
         <div id="content">
<div id="transparent"> </div>
<div id="text">
YOUR TEXT HERE 2
</div>
</div></div>


<div class="slide_img" id="bl3">
          <img src="images/med_photo.jpg" alt="" width="480" height="350" />
         <div id="content">
<div id="transparent"> </div>
<div id="text">
YOUR TEXT HERE 3
</div>
</div></div>

<div class="slide_img" id="bl4">
          <img src="images/banner.jpg" alt="" width="480" height="350" />
         <div id="content">
<div id="transparent"> </div>
<div id="text">
YOUR TEXT HERE 4
</div>
</div></div>

<div class="slide_img" id="bl5">
          <img src="images/map.gif" alt="" width="480" height="350" />
         <div id="content">
<div id="transparent"> </div>
<div id="text">
YOUR TEXT HERE 5
</div>
</div></div>

<div class="slide_img" id="bl6">
          <img src="images/photo.jpg" alt="" width="480" height="350" />
         <div id="content">
<div id="transparent"> </div>
<div id="text">
YOUR TEXT HERE 6
</div>
</div></div>
<div class="slide_block_link">
<a href="#" class="slide_link_red" onmouseover="show('bl1');">Том и Джерри — семейная пара предпенсионного возраста. Вечера и выходные они коротают ...</a>
<a href="#" class="slide_link" onmouseover="show('bl2');">Том и Джерри — семейная пара предпенсионного возраста. Вечера и выходные они коротают ...</a>
<a href="#" class="slide_link" onmouseover="show('bl3');">Том и Джерри — семейная пара предпенсионного возраста. Вечера и выходные они коротают ...</a>
<a href="#" class="slide_link" onmouseover="show('bl4');">Том и Джерри — семейная пара предпенсионного возраста. Вечера и выходные они коротают ...</a>
<a href="#" class="slide_link" onmouseover="show('bl5');">Том и Джерри — семейная пара предпенсионного возраста. Вечера и выходные они коротают ...</a>
<a href="#" class="slide_link" onmouseover="show('bl6');">Том и Джерри — семейная пара предпенсионного возраста. Вечера и выходные они коротают ...</a>
</div> 
        
        </div>

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

скрины

Думаю накосячила где-то в стилях... Но выловить не могу Помогите пожалуйста разобраться в чем я не права?

Спасибо за помощь!

@темы: JavaScript

Comments

[Kakou ECTb]

Для начала попробуйте переменную нормально объявить. Не sid = ''; а var sid = ''; Возможно джаваскрипт кладётся, хотя наврятли. Дело скорее всего действительно в стилях.

Можете кинуть на ifolder , гляну

[alhames]

У вас при наведении на ссылку 1й блок не скрывается, но появляется второй - потому прыгает.
Самый простой выход:
вместо

sid = '';

поставьте

sid = 'bl1';

или лучше даже

var sid = 'bl1';

P.S. И почему люди не хотят использовать JQuery...

[Makha]

alhames Спасибо!

И почему люди не хотят использовать JQuery...

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

Но я учусь ^_^

[alhames]

Имхо, JQuery - по-моему самый простой и щадящий способ использования JS, ибо в задачах чуть посложнее обычно черт ногу сломит от избыточности кода оригинального JS.
К примеру ваш слайдер реализовывался бы примерно так:

$('.slide_block_link a').mouseover(function(){
$('.slide div.slide_img').hide();
$('.slide div.slide_img').eq( $(this).index() ).show();
return false;
});

И не надо никакие id прописывать и дописывать onmouseover для ссылок

[Kakou ECTb]

+1 к alhames , но я считаю, то jquery нужно дойти покопавшись в js.

[Makha]

alhames В вашем примере я не смогла разобраться Что значат

$

? и как его вообще использовать?
Если не нужно ID, то привязывается по стилям? Но стили у меня меняются в зависимости от страницы (т.е. на одной ховер красным, на другой - оранжевым...)... Не понимаю Можете пояснить попроще?

Kakou ECTb Да, поэтому и копаюсь... Методом нужно сделать - нашла, скопировала, подстроила под ситуацию... При подстройке разбираюсь как работает и стараюсь запомнить...

[Kakou ECTb]

Makha $ это зарезервированный псевдоним? для jquery. можно его заменить просто jquery().

Если не нужно ID, то привязывается по стилям?

чтобы взять элемент по id нужно написать $('#тут_id'); т.е. решёткой.

Да, можно привязать к стилям, но alhames в селекторе указал, что например

$('.slide_block_link a').mouseover(function(){ привяжется ко всем тегам a в тегах со стилем .slide_block_link.
А тут :
$('.slide div.slide_img').hide(); - к тегу

с классом slide_img внутри тега со стилем .slide

Т.е. идёт вначале базовый элемент, а после - уточнения если требуются. В общем, в интернете очень много статей для начинающих с подробным описанием. Но я считаю, что вам не нужно пока заморачиваться, пишите на js, а когда уже начнете разбираться в нем более ли менее - то можно и на Jquery по тиху пересаживаться. Удачи

[alhames]

C $ начинается объект JQuery.

$('.slide_block_link a')

означает что мы выбирает все 'a' внутри блока с классом 'slide_block_link';

.mouseover(function(){});

означает что мы назначаем на onmouseover безымянную функцию, которую тут же и описываем.

$('.slide div.slide_img').hide();

означает что мы прячем все элементы 'div' с классом 'slide_img' внутри элемента с классом 'slide'

$('.slide div.slide_img').eq( $(this).index() ).show();

означает что мы включаем блок '.slide div.slide_img' с тем же индексом что и ссылка - для этого делаем выборку индекса ссылки, на которую навели курсор с помощью

$(this).index()

Вроде все просто - не? о_О

[Kakou ECTb]

Вроде все просто - не? о_О

Просто - тому, кто уже знаком с программированием нормально. Это же очевидно )

[alhames]

Kakou ECTb я о том, что JQuery - дружелюбный фреймворк
говоришь ему "покажи!" (show) - он показывает, говоришь ему "дай индекс!" (index) - он дает
Впрочем со стороны мб иначе кажется..

[Kakou ECTb]

alhames Высокоуровневость и инкапсуляцию конечно хорошо, но мне кажется важно знать механизмы, которые внутри действуют хотя бы немного.

[Makha]

alhames Не поняла одно, как скрипт понимает какую картинку показывать по какой ссылке... И что будет показываться сразу при загрузке?
И где все это писать? Мне необходимо чтобы все JS были отдельно от кода... Т.е. нужно обзывать функцию и вызывать уже непосредственно на странице... И тут я висну... Потому что не понимаю теперь куда девать первую строку...

А так я интуитивно понимаю как оно работает, но не понимаю как его поменять и применить...

[alhames]

Kakou ECTb без них никуда не денешься)

Makha

как скрипт понимает какую картинку показывать по какой ссылке...

$(this).index() возвращает индекс той ссылки, на которую наведен курсор. Т.е. для первой ссылки это будет 0, для второй - 1 и т.д.
Если блоков ровно столько же сколько и ссылок, то наводя на ссылку с нулевым индексом мы должны включить блок с нулевым индексом - для этого служит функция .eq()

И что будет показываться сразу при загрузке?

Ну это уже от вас зависит.. Код только на маусоверах отрабатывать будет.

И где все это писать?

В JS-файле, конечно

Т.е. нужно обзывать функцию и вызывать уже непосредственно на странице... И тут я висну... Потому что не понимаю теперь куда девать первую строку...

Вы должны понять одну главную вещь - любой dom-элемент (читай "тег") является объектом, у которого есть ряд событий (events) которые наступают при определенных условиях.
Прописывая onmouseover="show('bl1') внтури тега вы назначаете на событие onmouseover этого тега функцию show
В JQuery эту же функцию можно назначить как $('a').mouseover(show);
Чтобы избавиться от указания параметра, мы должны брать его непосредственно из ссылки - это может быть дополнительный класс, атрибут, data, еще что-то.. Я использовал индекс.
Но зачем нам создавать функцию и потом ее к чему-то привязывать, если мы можем ее сразу описать: $('a').mouseover(function(){});
Такая форма использования JS фактически полностью избавляет страницу от лишнего кода - он переходит в JS-файл.

Как-то так.. Вы спрашивайте что непонятно - отвечу, ток не надо на каждый пустяковый вопрос отдельную темку создавать )

[Makha]

alhames Более менее поняла...
Теперь у меня другой вопрос, и тоже по скриптам Т_Т

Есть у меня выпадающие списки... Такой

<select class="styled">
                  <option >- выбрать из списка -</option>
                  <option>Любая</option>
                  <option>Выбрать </option>
                  <option>Выбрать </option>
                </select>

и такой

<select class="mySelectBoxClass">
                  <option >- выбрать из списка -</option>
                  <option>Любая</option>
                  <option>Выбрать </option>
                  <option>Выбрать </option>
                </select>

На одной странице... Но они разного вида (ширины).

Т.к. нужен был для них особый стиль - сделала скриптом... А так как я нуб, и не знаю как их менять под разные стили, то двумя скриптами!

Получается что стиль первого задается css:

.checkbox, .radio {
	width: 18px;
	height: 17px;
	padding: 0 0px 0 0;
	display: block;
	float: left;
	background-image: url(../images/check.png);
	background-repeat: no-repeat;
}
.radio {
 background: url(../images/check.png) no-repeat;
}
.select {
	position: absolute;
	width: 129px;
	height: 17px;
	color: #000;
	overflow: hidden;
	background-image: url(../images/select.jpg);
	background-repeat: no-repeat;
	padding-top: 0px;
	padding-right: 24px;
	padding-bottom: 0;
	padding-left: 8px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 17px;
}

и скриптом

var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "129";

/* No need to change anything after this */

document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); } }</style>');

var Custom = {
	init: function() {
		var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
		for(a = 0; a < inputs.length; a++) {
			if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
				span[a] = document.createElement("span");
				span[a].className = inputs[a].type;

				if(inputs[a].checked == true) {
					if(inputs[a].type == "checkbox") {
						position = "0 -" + (checkboxHeight*2) + "px";
						span[a].style.backgroundPosition = position;
					} else {
						position = "0 -" + (radioHeight*2) + "px";
						span[a].style.backgroundPosition = position;
					}
				}
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.clear;
				if(!inputs[a].getAttribute("disabled")) {
					span[a].onmousedown = Custom.pushed;
					span[a].onmouseup = Custom.check;
				} else {
					span[a].className = span[a].className += " disabled";
				}
			}
		}
		inputs = document.getElementsByTagName("select");
		for(a = 0; a < inputs.length; a++) {
			if(inputs[a].className == "styled") {
				option = inputs[a].getElementsByTagName("option");
				active = option[0].childNodes[0].nodeValue;
				textnode = document.createTextNode(active);
				for(b = 0; b < option.length; b++) {
					if(option[b].selected == true) {
						textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
					}
				}
				span[a] = document.createElement("span");
				span[a].className = "select";
				span[a].id = "select" + inputs[a].name;
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				if(!inputs[a].getAttribute("disabled")) {
					inputs[a].onchange = Custom.choose;
				} else {
					inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
				}
			}
		}
		document.onmouseup = Custom.clear;
	},
	pushed: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
		} else if(element.checked == true && element.type == "radio") {
			this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
		} else if(element.checked != true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
		} else {
			this.style.backgroundPosition = "0 -" + radioHeight + "px";
		}
	},
	check: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 0";
			element.checked = false;
		} else {
			if(element.type == "checkbox") {
				this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
			} else {
				this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
				group = this.nextSibling.name;
				inputs = document.getElementsByTagName("input");
				for(a = 0; a < inputs.length; a++) {
					if(inputs[a].name == group && inputs[a] != this.nextSibling) {
						inputs[a].previousSibling.style.backgroundPosition = "0 0";
					}
				}
			}
			element.checked = true;
		}
	},
	clear: function() {
		inputs = document.getElementsByTagName("input");
		for(var b = 0; b < inputs.length; b++) {
			if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
			} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
			} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			}
		}
	},
	choose: function() {
		option = this.getElementsByTagName("option");
		for(d = 0; d < option.length; d++) {
			if(option[d].selected == true) {
				document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
			}
		}
	}
}


window.onload = Custom.init;

А стиль второго CSSом

.customStyleSelectBox {
	width:115px;
	height:16px;
	color:#7f7f7f;
	text-align:left;
	white-space:nowrap; /* отступ справа с учетом стрелочки */
	border:0;
	zoom:1; /* для IE6 */
	font-family: Arial, Tahoma, Helvetica, Verdana;
	font-size: 10px;
	background-image: url(../images/select_sport.jpg);
	padding-top: 2px;
	padding-right: 0px;
	padding-bottom: 0;
	padding-left: 5px;
}

и скриптом

jQuery(document).ready(function(){

jQuery(".niceCheck").mousedown(
/* при клике на чекбоксе меняем его вид и значение */
function() {

     changeCheck(jQuery(this));
     
}
)
;

jQuery(".niceCheck").each(
/* при загрузке страницы нужно проверить какое значение имеет чекбокс и в соответствии с ним выставить вид */
function() {
     
     changeCheckStart(jQuery(this));
     
});

                                        });

function changeCheck(el)
/* 
	функция смены вида и значения чекбокса
	el - span контейнер дял обычного чекбокса
	input - чекбокс
*/
{
     var el = el,
          input = el.find("input").eq(0);
   	 if(input.attr("checked")) {
		el.css("background-position","0 -14px");	
		input.attr("checked", true)
	} else {
		el.css("background-position","0px 0px");	
		input.attr("checked", false)
	}
     return true;
}

function changeCheckStart(el)
/* 
	если установлен атрибут checked, меняем вид чекбокса
*/
{
var el = el,
		input = el.find("input").eq(0);
      if(input.attr("checked")) {
		el.css("background-position","0 -14px");	
		}
     return true;
}

(function($){
 $.fn.extend({

 	customStyle : function(options) {
	  if(!$.browser.msie || ($.browser.msie&&$.browser.version>6)){
	  return this.each(function() {

			var currentSelected = $(this).find(':selected');
			$(this).after('<span class="customStyleSelectBox"><span class="customStyleSelectBoxInner">'+currentSelected.text()+'</span></span>').css({position:'absolute', opacity:0,fontSize:$(this).next().css('font-size')});
			var selectBoxSpan = $(this).next();
			var selectBoxWidth = parseInt($(this).width()) - parseInt(selectBoxSpan.css('padding-left')) -parseInt(selectBoxSpan.css('padding-right'));
			var selectBoxSpanInner = selectBoxSpan.find(':first-child');
			selectBoxSpan.css({display:'inline-block'});
			selectBoxSpanInner.css({width:selectBoxWidth, display:'inline-block'});
			var selectBoxHeight = parseInt(selectBoxSpan.height()) + parseInt(selectBoxSpan.css('padding-top')) + parseInt(selectBoxSpan.css('padding-bottom'));
			$(this).height(selectBoxHeight).change(function(){
				selectBoxSpanInner.text($('option:selected',this).text()).parent().addClass('changed');
			});

	  });
	  }
	}
 });
})(jQuery);

$(document).ready(function(){
	$('.mySelectBoxClass').customStyle();
});
		

с использованием jQuery, ага...

А вопрос такой... Первый селект не виден в ИЕ... а второй виден... Ну и криво это, использовать 2 скрипта для одних целей.. Подскажите как поменять второй скрипт, чтобы он реагировал на еще 1 стиль...

Простым копипастом с заменой имен не выходит

И второй вопрос, .niceCheck в ИЕ тоже не работает
Стиль скриптом выще задается, в html

<label>
                 <div>Wi-Fi</div><span class="niceCheck"><input  type="checkbox" name="a" value="off"/></span>
                  </label>   

в CSS

.niceCheck {
	width: 17px;
	float:left;
	margin-right:5px;
	height: 13px;
	display: inline-block;
	cursor: pointer;
	background: url(../images/check.png);
	margin-top: 1px;

}
.niceCheck input {
display: none;
width:17px;
height:13px;
}

[Makha]

и в догонку еще один глупый вопрос... Встроила очередную фишку jQuery... Но она работает если прописано в самой странице:

<sсript type="text/javasсript">
	jQuery(function()
	{
jQuery('textarea').autoResize({
     extraSpace : 0
});
	});
	
</sсriрt>

А можно как-либо перенести этот код в уже существующие файлы JS? Пробовала просто скопировать без html тега скрипта - не работает...

[Makha]

Ие говорит:
Message: Object doesn't support this property or method
Line: 39
Char: 7
Code: 0

Но там же просто цикл задается =(
for(a = 0; a < inputs.length; a++) {
не понимаю чем ему не нравится (

[alhames]

Я не совсем понял что вы с slelect делаете. Это системный элемент, который практически не стилизуется, поэтому если хотите его красиво оформить - придется делать эмуляцию..

Касательно checkbox, тут два варианта:

<a class="js-checkbox " rel="unique-class">текст</a>
<input class="unique-class" type="hidden" name="name" value="0">

.js-checkbox {
    background-position: 4px 4px;
    display: block;
    padding: 3px 4px 3px 20px;
    text-decoration: none;
    background-image: url("/images/checkbox.png");
    background-position: left center;
    background-repeat: no-repeat;
    cursor: pointer;
}
.js-checkbox.checked {
    background-image: url("/images/checkbox-checked.png") !important;
}

$(".js-checkbox").click(function() {
	var check = $(this);
	check.toggleClass('checked');
	$('input.' + check.attr('rel')).val( check.hasClass('checked') ? 1 : 0 );
	return false;
});

При клике на ссылку мы переключаем класс "checked" (если он есть - он удалится, нету - добавится)
Потом находим input с уникальным классом, прописанном в rel ссылки и меняем его значение: если ссылка содержит класс "checked" - то 1, иначе - 0.
И возвращаем return false; чтобы ссылка ни в коем случае не сработала.

Другой вариант без rel и уникального класса:

<a class="js-checkbox ">текст<input type="hidden" name="name" value="0"></a>

$(".js-checkbox").click(function() {
	$(this).toggleClass('checked');
	$(this).find('input').val( $(this).hasClass('checked') ? 1 : 0 );
	return false;
});

CSS тот же. Второй пример покороче. Здесь мы используем наследование и с помощью find находим нужный нам input.

[alhames]

jQuery(document).ready();
или
$(document).ready();
срабатывает когда загрузилось dom-дерево и свободно можно им манипулировать.
Это необходимо для того чтобы не пытаться менять элемент до того как он загрузился на страницу.

и в догонку еще один глупый вопрос... Встроила очередную фишку jQuery... Но она работает если прописано в самой странице:

Засуньте его вместе с остальным кодом в $(document).ready();
Точнее только эту часть:

jQuery('textarea').autoResize({extraSpace : 0});

По идеи поможет..

И еще, используйте синоним jQuery - $ (доллар). Если вы не пишете многопользовательские плагины, то это намного удобнее - и код короче и нагляднее

[Makha]

Сейчас попробую объяснить что я имела ввиду..

Есть у меня селекты вот такого вида:


Делаются они скрипт + css... Вот только работают они в ИЕ очень странно... Т.е. первый скрипт не работает, а второй работает...

Вот я и хочу второй скрипт, который меняет внешний вид селекта сделать универсальным... Т.е. чтобы не только на 1 стиль селектов вешать... Сейчас в ИЕ работает только с использованием JQuery...
И мне хочется как-то этот скрип заставить менять 2 селекта поразному (на разный фон и ширину)...

Вот тут взяла второй скрипт: makexhtml.ru/2010/svoj-stil-select-vypadayushhe...

Пойду попробую чекбоксы изменить

[Makha]

Касательно checkbox, тут два варианта:

у меня не получилось заставить работать их

[alhames]

Посмотрите как тут select сэмулирован - zenit-realty.ru
Правда я под ie6 по-моему этот сайт не затачивал..

Если кратенько:

<div class="select">
	<div class="upper-layer">
		<a href="#open">Вид сделки:</a>
		<input type="hidden" value="1" class="typeSearch" name="f">
		<ul class="typeSearch-ul">
			<li title="1">Продажа</li>
			<li title="2">Покупка</li>
			<li title="3">Аренда</li>
		</ul>
	</div>
</div>

$("#search .select a").click(function() {
		upper = $(this).parent();
		ul = upper.find("ul");
		if (upper.hasClass('opened')) {
			upper.removeClass('opened');
			ul.slideUp(300);
		}
		else {
			upper.addClass('opened');
			ul.slideDown(300);
		}
		return false;
	});
	$("#search .select li").click(function() {
		ul = $(this).parent();
		upper = ul.parent();
		a = upper.find("a");
		input = upper.find("input.typeSearch");
		upper.removeClass('opened');
		ul.slideUp(300);
		a.text($(this).text());
		input.val($(this).attr('title'));
	});

При клике на "#search .select a" проверяем раскрыт ли у нас ul и соответственно реагируем. Причем тут можно было toggle использовать, вроде..
Прик клике на "#search .select li" сворачиваем сэмулированный select и назначаем скрытому input его значение.
Вроде все просто, только в данном примере много излишнего кода ) Сейчас я сделал бы несколько иначе..

[alhames]

у меня не получилось заставить работать их

Почему?
Я вам вовсе не предлагал скопировать приведенный мной пример, а просто пояснил возможную логику..
Если вы хотите не label-checkbox а именно отдельностоящий чекбокс, то задавайте ему inline-block и фиксированные высоту / ширину..

[Makha]

Ийе-хо! Нашла вот такой скриптик: html-css.info/2010/07/select-css-js/ и релизовала его)
Правда на странице все еще 2 скрипта отвечают за внешний вид селектов

[Makha]

alhames Я пыталась ваш пример повторить в отдельном документе:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<sсript type="text/javasсript" src="js/jquery.js"></sсriрt>

<style type="text/css"> 
.js-checkbox {
    background-position: 4px 4px;
    display: block;
    padding: 3px 4px 3px 20px;
    text-decoration: none;
    background-image: url(images/i_orest.gif);
    background-position: left center;
    background-repeat: no-repeat;
    cursor: pointer;
}
.js-checkbox.checked {
    background-image: url(images/i_top.gif) !important;
}
</style> 
<sсript type="text/javasсript">
$(".js-checkbox").click(function() {
	$(this).toggleClass('checked');
	$(this).find('input').val( $(this).hasClass('checked') ? 1 : 0 );
	return false;
});
</sсriрt>

<body>

<a class="js-checkbox ">текст<input type="hidden" name="name" value="0"></a>

</body>
</html>

и у меня он не заработал(

[Makha]

По идеи поможет..

Если ставлю вот так:

$(document).ready(function(){
	$('.mySelectBoxClass').customStyle();
	$('textarea').autoResize({extraSpace : 0});
});

то срабатывает только последнее, и селекты все пропадают

[Makha]

Правда я под ie6 по-моему этот сайт не затачивал..
Если кратенько:

Мне под ИЕ6 нужно будет адаптировать, угу

И совсем не понятен механизм работы... Что это псевдо селект понятно, но что и как там менять, перестраивая на мой стиль я не могу понять...

Зато ваш вариант решил бы проблему двух скриптов на странице... Разобратться бы мне в нем

[alhames]

и у меня он не заработал(

Я ж написал про $(document).ready();
Весь код в JS файле должен быть заключен в эту функцию. Если конечно это не описание функции..

[alhames]

P.S. с дайри код не копируйте - он не дружит со словом sсript

[alhames]

Ийе-хо! Нашла вот такой скриптик: html-css.info/2010/07/select-css-js/ и релизовала его)

Я не люблю эти адаптации под браузеры с отключенным JS, т.к. из-за них браузеры с JS (а их 99,9%) нервно дергают страничку после загрузки.
Вам нужен именно select? Я думаю что нет.. Просто элемент навигации по характеристикам его напоминающий.

Зато ваш вариант решил бы проблему двух скриптов на странице...

Мой случай можно довести до ума и все манипуляции через JS делать через независимые классы (т.е. те классы, которые используются в JS не содержатся в CSS-файле и не описывают стиль).

но что и как там менять

<div class="select">
	<div class="upper-layer">
		<a>[тут текст по умолчанию (отображающийся)]</a>
		<input type="hidden" value="[тут текст по умолчанию (отправляемый формой)]" class="typeSearch" name="f">
		<ul class="typeSearch-ul">
			<li title="[тут текст первого option (отправляемый формой)]">[тут текст первого option (отображающийся)]</li>
			<li title="[тут текст второго option (отправляемый формой)]">[тут текст второго option (отображающийся)]</li>
			<li title="[тут текст третьего option (отправляемый формой)]">[тут текст третьего option (отображающийся)]</li>
		</ul>
	</div>
</div>

Честно говоря не знаю как еще помочь..

[Makha]

Осталось придумать как заставить работать их все вместе...

Вот так работает:

$(document).ready(function(){
	$('.mySelectBoxClass').customStyle();
	
});
	

А вот так - нет:

$(document).ready(function(){
	$('.mySelectBoxClass').customStyle();
	$('textarea').autoResize({extraSpace : 0});
});
	

И думаю если я туда еще с чеками поставлю, то тоже чуда не случится...