2012-06-14 9 views
7

Mam 3 okręgi w nagłówku, które mają spadać w różnych cenach, gdy przewijane przez stellar.js; niestety, nawet się nie ruszają. Wszystkie mają atrybuty pozycji (bezwzględne); Ponadto zastosowałem data-stellar-ratio do tagów zastępujących. Dlaczego nie działa stellar.js? Co więcej, jak można przetestować jQuery, czy nie jest to błąd pilota?Dlaczego elementy w pliku Stellar.js nie są w ruchu?

HTML

<div id="companyInfo" > 
    <div class="circlefront" data-stellar-ratio="1.2"></div> 
    <div class="circlemiddle" data-stellar-ratio="1.8"></div> 
    <div class="circlerear" data-stellar-ratio="3"></div> 
    <div class="infoWrapper"> 
     <h1>Towing, you can't do it without a truck, i have a truck</h1> 
     <p>Id abunum ta inte publicae adhui senterem praties tantiena quitas vis, factum destus. Loca vehebus; et? Ti. Upionem, sil tala morbit ina, nique confendum tati et acepsen ihilin sula audactorips, fatur ia consign arisulos inatuis.</p> 
    </div> 
    </div> 

CSS

section#company div#companyInfo { 
    height: 24em; 
    line-height: 3em; 
    margin: 0 auto; 
    color: #fff; 
} 
section#company div#companyInfo div.infoWrapper { 
    width: 960px; 
    margin: 5em auto; 
    text-align: center; 
} 
section#company div#companyInfo div.infoWrapper h1 { 
    font-size: 2em; 
} 
section#company div#companyInfo div.infoWrapper p { 
    line-height: 1.2em; 
    font-size: 1.125em; 
} 
section#company .circlefront { 
    background: rgba(255, 255, 255, 0.7); 
    width: 500px; 
    height: 500px; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    position: absolute; 
    top: 300px; 
    left: 400px; 
} 
section#company .circlemiddle { 
    background: rgba(255, 255, 255, 0.5); 
    width: 250px; 
    height: 250px; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    position: absolute; 
    top: 100px; 
    left: 200px; 
} 
section#company .circlerear { 
    background: rgba(255, 255, 255, 0.3); 
    width: 100px; 
    height: 100px; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    position: absolute; 
    top: 350px; 
    right: 100px; 
} 

jQuery

<script src="asset/js/libs/jquery.stellar.min.js"></script> 
<script type="text/javascript"> 

$(function(){ 
      $.stellar({ 
       horizontalScrolling: false, 
       verticalOffset: 0, 
      }); 
     }); 
</script> 

zasoby stellar.js tutorial on using stellar.js

+0

Komunikaty o błędach? – josh3736

+0

gdzie? jak mogę je naprawić? –

+0

Jeśli spojrzysz na przykładowy kod na żywo, zobaczysz, że gwiazdka js jest powiązana w odpowiednim miejscu. –

Odpowiedz

4

Właśnie uratował swoją stronę & bawił się swoim kodem wszystko wygląda w porządku dla mnie, ale nadal istnieje jakiś problem. Usunąłem wszystkie tagi skryptów & dodane jquery & gwiezdne demo & to działa dobrze. Znaleziono tylko jeden błąd, ale nie wiem, dlaczego tak się dzieje. Po przesunięciu w pionie jest dodatkowy przecinek: 0.

$(function(){ 
    $.stellar({ 
     horizontalScrolling: false, 
     verticalOffset: 0, /* Remove this comma at the end */ 
    }); 
}); 

Poniżej znajduje swoją stronę w folderze zip pobierz & to rzucić okiem na kod.

https://dl.dropbox.com/u/19982181/svs.zip

nadzieję, że to pomoże.

+0

Ten przecinek nie spowoduje błędu JS, ale zostanie oznaczony jako niepoprawna składnia przez linter lub coś podobnego. –

+0

@AdamWaite Być może nie jestem pewien, ale to rozwiązało jego problem w tamtym czasie ... teraz nawet strona na żywo nie jest aktywna. Zapisać 404. – SVS

+0

To właściwie nie jest niepoprawna składnia i jest całkowicie poprawna –

Powiązane problemy