12 odpowiedzi w tym temacie

[kylu123]

Witam
Mam radiobuttona którego "ubrałem" w grafikę:

<div class="1">
<fieldset id="1" class="radio">
<legend>Rodzaj </legend><input type="radio" name="1" id="1" class="radio" value="cos" />

kod css:

.options fieldset span label {
position: relative;
font-size: 12pt;
color: #9c7c46;
padding: 16px 0 0 20px;
width: 175px;
height: 53px;
display: block;
display: table-cell;
background: url('../store/themes/main/images/button.jpg') no-repeat left top;
}

.options fieldset span input.radio:checked + label{
    position: relative;
    font-size: 12pt;
    color: #ffffff;
    padding: 16px 0 0 20px;
    margin: 0;
    width: 175px;
    height: 53px;
    display: block;
    background: url('../store/themes/main/images/button_on.jpg') no-repeat center top;
}

i pięknie działa. Jak kliknę w niego podmiania mi tło i mam jakby inny przycisk.

Chciałm zrobić zdarzenie "hover", konkretnie:

div.options fieldset span input.radio:hover + label{
    position: relative;
    font-size: 12pt;
    color: #ffffff;
    padding: 16px 0 0 20px;
    margin: 0;
    width: 175px;
    height: 53px;
    display: block;
    background: url('../store/themes/main/images/button_on.jpg') no-repeat center top;
   cursor: pointer;
}

I problem taki że pod FF hula jak trzeba, ale pod IE (8 i 9), Operą, Chromem, ni hu hu
Zapytałem googla i widzę że IE pseudoklasę hover "widzi" jedynie przy <a>. chyba podobnie jest z Oprą i innymi (oprócz FF)
Pytanie jak to obejść coby i pod innymi przeglądarkamu smigało jak trzeba??

Próbowałem do szablonu strony taki kod java wstawić:

<script type="text/javascript">
$('input').hover(function () { $(this).toggleClass('hover'); });
</script>

i następnie dać klasę hover:

div.options fieldset input.hover{
    position: relative;
    font-size: 12pt;
    color: #ffffff;
    padding: 16px 0 0 20px;
    margin: 0;
    width: 175px;
    height: 53px;
    display: block;
    background: url('../store/themes/main/images/button_on.jpg') no-repeat center top;
   cursor: pointer;
}

ale niestety nie działa
Poprosze o jakies podpowiedzi.

[Kamil]

Po pierwsze, to dla dwóch elementów w HTML masz to samo ID... Po drugie, kod MooTools zawsze musi siedzieć w czymś takim:

<script type="text/javascript">
window.addEvent('domready', function() {
    // tutaj właściwy kod
});
</script>

Tutaj masz mały przykład zrobić coś podobnego http://jsfiddle.net/p2Wc4/.

[kylu123]

Ok, to poprosze o jeszcze jedną podpowiedź:
kod:

<div id="test">
<fieldset id="fieldset">
	<legend>Rodzaj papieru</legend>
	<span><input type="radio" name="papier" id="radio" value="vellum"/>
	<label>Vellum</label>
	</span>
</fieldset>
</div>

css kod:

#test label {
	height:100px;
	width:100px;
	background-color:#eaeaea;
	border: solid 1px #000000;
}
#test label.hover {
	background-color:#ff0000;
}

i teraz jak w kodzie java odwołać się do elementu "label" (nie po id ani class, tylko do elemetu, coby zastosował akcję do wszystkich "labels" z danego dukumentu)

próbuję cos takiego:

$([label]).addEvents({
	mouseenter: function() {
		this.addClass('hover');
	},
	mouseleave: function() {
		this.removeClass('hover');
	}
});

no właśnie jak się odwołac do elementu bez podawania nazwy identyfikatora czy klasy??

Dodam, że jak zastosuje id w label to w java mam $('nazwa_id'), to działa...

[Kamil]

<label for="radio">Vellum</label>

$('label[for="radio"]').addEvents({...

[kylu123]

hmmmm.... nie działa niestety, ale tak czy inaczzej możę jest sposób żeby sam argument label podac? Mam na tej stronie kilkanascie pól label i kazdy ma inne id i inne for więc raczej szukam uniwersalnego rozwiązania...

[kylu123]

No i juz wiem

taki kodzik:

$$('label').addEvents({
	    mouseenter: function() {
			    this.addClass('hover');
	    },
	    mouseleave: function() {
			    this.removeClass('hover');
	    }
});

uruchamia mi klasę .hover dla wszystkich labeli w dokumencie

Dzięki Kamilu za pomoc.

Pozdrawiam

[kylu123]

Pojawił się kolejny problem.
Tym razem z systuacją gdy radio button jest już zaznaczony. Dla zaznaczonego radio mam też osobny styl (taki sam jak dla hover).
czyli mam:

.options fieldset span input.radio:checked + label{
	    ...
}

Działa wszędzie jak trzeba, ale widze że pod IE8 niestery nie. Hover owszem, ale jak klikne w niego to styli mi nie podmienia. Analogiczna sytuacja jak z hover.
Zacząłem więc dłubać w java i wyskrobałem takie cusik:

window.addEvent('domready', function() {
$$('input[type=radio]').addEvent('change', function(){
	 $$('label').addClass('checked');
});
});

Problem w tym że klasę "chcecked" ustawia mi dla wszystkich labeli na stronie, a nie tylko dla tego konkretnego którego kliknąłem.
Jak mogę ustawić klasę tylko dla tego konkretnego klikniętego radiobuttona?

Pozdrawiam

[kylu123]

Panowie pomoże ktoś? ...

[kylu123]

No to jeden krok do przodu...
mam taki kod:

$$('input[type=radio]').addEvent('change', function(){
    var id_selected = $$('input[type=radio]:checked').get('id');
    $$('label[id=test]').addClass('checked');
});

jesli zaznaczę konkretny radiobutton, to na label o id test zmienia się tło. Do zmiennej id_selected mam zapidywane id zaznaczonego radiobuttona. Teraz pytanie - musże zrobić to bardzeij uniwersalne, czyli daję:

$$('label[id=id_selected]').addClass('checked');

i ni huhu...

Jak zatem wpisać tu uniwersalnie tą zmienną??
Próbowałem już różnych wariantów:
$$('label[id=$id_selected]').addClass('checked');
$$('label[id=$$id_selected]').addClass('checked');
$$('label[id='id_selected']').addClass('checked');
$$('label[id="id_selected"]').addClass('checked');
i niestety skrypt nie traktuje mi tego jak zmiennej

Jak w javie mam to zapisać?

[Kamil]

Spróbuj tak:

$$('label[id=' + id_selected + ']')

[kylu123]

Dzięki Kamilu.
Sprawdzam ten skrypt na jsfiddle.net i działa pięknie, natomiast po wrzuceniu tego w szablon strony niestety nie, tzn problem jest tylko z IE8. Pod IE9, Operą, FF wszystko hula.
Poniżej co mam w szablonie:

<script type="text/javascript">
window.addEvent('domready', function() {
$$('label').addEvents({
	    mouseenter: function() {
			    this.addClass('hover');
	    },
	    mouseleave: function() {
			    this.removeClass('hover');
	    }
});
});
window.addEvent('domready', function() {
$$('input[type=radio]').addEvent('change', function(){
    var id_selected = $$('input[type=radio]:checked').get('id');
    alert(id_selected);
$$('label[id='+id_selected+']').addClass('checked');
});
});
</script>

Jakiś pomysł czemu to nie działa?

[Kamil]

Google: "IE8 mootools issues" i szukać. Możesz też przejrzeć changelogi MooTools, albo popytać na jakimś mooforum.

[kylu123]

Ok, dzięki Kamilu poszperam,
zanim jednak to jeszcze zajrzałem do konsoli i wyrzuca mi taki błąd:
SCRIPT1002: Błąd składni
e53a815ab435.js, wiersz 2 Znak 86507
po wejściu w ten plik, ta konkretna linia to:
return eval("("+string+")")}}

czyli problem jest z ta zmienną cały czas...