Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Pierwszy element nie reaguje na nadanie klasy
Forum PHP.pl > Forum > Przedszkole
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:
  1. <style type="text/css">
  2. body {width: 4000px;}
  3. div.wrapper {position: relative; width: 100%; height: 100%;}
  4. div.col {position: relative; float: left; width: 200px; height: 350px; background: #999; margin-right: 20px;}
  5. div.col+.wide {width: 700px;}
  6. </style>


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>


  1. <div class="wrapper">
  2. <div class="col">col 1</div>
  3. <div class="col">col 2</div>
  4. <div class="col">col 3</div>
  5. <div class="col">col 4</div>
  6. </div>


*bump*
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
Cytat
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ć 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
  1. div.col+.wide {width: 700px;}


na

  1. div.col.wide {width: 700px;}


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.
nappy
'Głupi ja' 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 smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.