[jQuery] Pierwszy element nie reaguje na nadanie klasy Opcje

[nappy]

Cześć,

Po najechaniu wszystkie pozostale kolumny wygasaja, po kliknieciu aktualna kolumna rozszerza sie (po ponownym - zwija). Wszystko pieknie tylko nie dziala na 1 kolumnie. Czemu? Firebug pokazuje, ze klasa jest nadawana poprawnie. Jednak pierwsza kolumna nie przyjmuje zadnej wartosci z nadanej klasy, tak jakby byla ona pusta. Jakies pomysly? Pls help!

link:
http://janzielinski.eu/sample/

kod:

[HTML] pobierz, plaintext 
    <style type="text/css">
        body {width: 4000px;}
        div.wrapper {position: relative; width: 100%; height: 100%;}
        div.col {position: relative; float: left; width: 200px; height: 350px; background: #999; margin-right: 20px;}
        div.col+.wide {width: 700px;}
    </style>
[HTML] pobierz, plaintext 

Kod

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

                
$.fn.extendCol = function() {
    $('div.col').toggle(function(){
                        
            $(this).addClass('wide');
            
        }, function(){
            
            $(this).removeClass('wide');
            
        })
}



$('div.col').addClass('inactive');
$('div.col').mouseenter(function(){
            $(this).removeClass('inactive');
            $(this).addClass('active');
            $('.inactive').stop().animate({opacity: 0.4}, 200)
            });

            $('div.col+.active').extendCol();
    
        
$('div.col').mouseleave(function(){
        
            $('.inactive').stop().animate({opacity: 1}, 200)
            $(this).removeClass('active');
            $(this).addClass('inactive');        
            });
});

</script>

[HTML] pobierz, plaintext 
	<div class="wrapper">
		<div class="col">col 1</div>
		<div class="col">col 2</div>
		<div class="col">col 3</div>
		<div class="col">col 4</div>
	</div>
[HTML] pobierz, plaintext 

*bump*

Ten post edytował nappy 14.06.2010, 15:18:01

[erix]

Zacznijmy od tego, że identyfikatory nie mogą być liczbą.

[nappy]

ale jak wiesz w tym przykładzie to nie ma znaczenia...

[nospor]

Sorki, że się wcinam, ale co to robi:
div.col+.active
?

[erix]

ale jak wiesz w tym przykładzie to nie ma znaczenia...

FYI, różne przeglądarki różnie na takie fiksy reagują; nie może być liczbą, bo tak jest w specyfikacji. Parsery po prostu potrafią zastrajkować, jeśli identyfikator jest nieprawidłowy.

Wiele osób miało różne dziwne problemy, których źródłem był właśnie niepoprawny identyfikator. Dlatego powstrzymuję się od jakiejkolwiek dalszej analizy dopóty, dopóki ktoś nie poprawi swojego kodu tak, aby był on poprawny.

~nospor: http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors

[nappy]

Ok, rozumiem - standardy są po to żeby się ich trzymać (IMG:style_emoticons/default/winksmiley.jpg) Wywaliłem [id] bo nie jest tam w ogóle potrzebne a jak widać wprowadza niepotrzebny galimatias.

Masz jakiś pomysł jak to naprawić? Bo szczerze, to cholera nie wiem co jest źle. Sam jak możesz, to odpal to na firebugu i zobacz, że każdy element zachowuje się identycznie. What the... ?!

[haahh]

[HTML] pobierz, plaintext 
 div.col+.wide {width: 700px;}
[HTML] pobierz, plaintext 

na

[HTML] pobierz, plaintext 
 div.col.wide {width: 700px;}
[HTML] pobierz, plaintext 

i zadziałało. (na szybko)

edit: Również nie wiem, dlaczego pierwszy div źle interpretowało, a 2,3 i 4 dobrze. Tak, czy siak "div.col.wide" też jest poprawne.

Ten post edytował haahh 14.06.2010, 15:54:13

[nappy]

'Głupi ja' (IMG:style_emoticons/default/worriedsmiley.gif)

Dzięki, ale swoją drogą - czemu to nie działało tak jak we wcześniejszej wersji? Przecież efekt jest ten sam (?)

[erix]

A, to chciałeś dwie klasy nadać...

Czemu nie działało? Zerknij do mojego linka, podałem tam namiary na pewien selektor, którego - z tego co teraz widzę - użyłeś nieświadomie.

[nappy]

No ale przecież klas może być ile mi się żywnie podoba... zrobienie div.klasa1+.klasa2 daje efekt div.klasa.klasa2 - co pokazuje firebug. Rozumiem (chyba) link podany wyżej, dziwi mnie tylko, że nie działało to dla pierwszego elementu...

W każdym razie - działa, ale i tak postaram się dojść do tego czemu nie działało tak jak zrobiłem to wcześniej. Dzięki za pomoc (IMG:style_emoticons/default/smile.gif)