[jQuery] Floating banner i IE

0

Witam

W HTMLu mam prostacki kod:

<div id="kontener_right">
      <div class="floating_banner"><img src="images/strona/reklama.png"></a></div>
      <div class="smartBannerIdentifier"></div>
 </div>

W JavaScripcie równie prostą funkcję:

$(window).scroll(function(){
    if  ($(window).scrollTop() > $(".smartBannerIdentifier").offset({ scroll: false }).top){
      $(".floating_banner").css("position", "fixed");
      $(".floating_banner").css("top", "0");
    }
   if  ($(window).scrollTop() <= $(".smartBannerIdentifier").offset({ scroll: false }).top){
      $(".floating_banner").css("position", "relative");
      $(".floating_banner").css("top", $(".smartBannerIdentifier").offset());
    }
   });

Kod ten sprawia, że jak przewijamy stronę w dół to div floating_banner też zjeżdża w dół i ciągle jest widoczny (tzw. winda). Wszystko działa, ale pod IE (dodam, że mam wersję 7.0, innych nie sprawdzałem) się wywala i nie dzieje się nic. Bruździ ostatnia linijka, czyli $(".floating_banner").css("top", $(".smartBannerIdentifier").offset());

0

Taka mała prośba, z którą nie wszyscy forumowicze muszą się zgodzić. Otóż fajnie, że zamieściłeś tylko ten kod, który sprawia problemy, a nie 1000 linii całego projektu, z czego 98% byłoby zupełnie bez znaczenia. Ale ja uważam, że lepiej jednak wziąć to niezbędne minimum i zamieścić je w gotowym (minimalnym!) dokumencie HTML. Wtedy możemy wkleić to do edytora i od razu odpalić w przeglądarce. Jeszcze chyba wygodniej byłoby umieścić taki minimalny dokument gdzieś w necie, by wystarczyło kliknąć. Proszę o to, żeby starać się zminimalizować czas potrzebny na rozstawienie się z Twoim problemem. Tbh próbowałem do tego siąść, ale zanim wydobyłem mój szablon dokumentu (w dodatku z jQuery), dorobiłem element script, wstawiłem Twój kod itd., to minęła chwila. I okazało się, że jeszcze to nawet nie działa w Firefoxie. Może pominąłem jakieś style, może w Twoim kodzie jest błąd logiczny... Tak czy siak, moja bieżąca luka czasowa się skończyła i musiałem się ewakuować od kompa.

Także myślę, że najwygodniej by było, gdybyś mógł przygotować taki minimalny, ale pełny dokumencik, który można od razu zapisać na dysku i odpalić (jQuery możesz pominąć lub dać link do google czy tam githubu).

0

Dzięki za reprymendę, poprawię się na przyszłość :)

Poniżej wklejam gotową stronę. Wystarczy dołączyć do niej jquery:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <script type="text/javascript" src="jquery.js"></script>
  <title></title>
  
  <script>
  $(window).scroll(function(){
    if  ($(window).scrollTop() > $(".smartBannerIdentifier").offset({ scroll: false }).top){
      $(".floating_banner").css("position", "fixed");
      $(".floating_banner").css("top", "0");
    }
   if  ($(window).scrollTop() <= $(".smartBannerIdentifier").offset({ scroll: false }).top){
      $(".floating_banner").css("position", "relative");
      $(".floating_banner").css("top", $(".smartBannerIdentifier").offset());
    }
   });
   </script>
  
  </head>
  <body>

  <div style="width: 200px; border: solid red 1px;height: 2000px;">
      <div class="floating_banner">Floating banner</div>
      <div class="smartBannerIdentifier"></div>
  </div>

  </body>
</html>
0

Dzięki, tak mi było o wiele łatwiej. Chociaż, kurczę, i tak mi to w Firefoxie nie działało chyba jak należy.

Próbowałem wywnioskować co chcesz zrobić, również na podstawie Twojego kodu. Skleciłem coś takiego:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <script type="text/javascript" src=".lib/jquery-latest.js"></script>
  <title></title>
 
  <script>
  $(window).scroll(function() {
    var $banner            = $(".floating_banner")
    ,   $bannerIdentifier  = $(".smartBannerIdentifier")
    ,   windowScrollTop    = $(window).scrollTop()
    ,   needScrollIntoView = windowScrollTop > $bannerIdentifier.offset().top
    ;
    $banner.css("position", "relative");
    if (needScrollIntoView) {
      $banner.css("top", windowScrollTop - $banner.parent().offset().top);
    } else {
      $banner.css("top", 0);
    }
   });
   </script>
  </head>
  <body>
  <div style="width: 200px; border: solid red 1px;height: 2000px;">
      <div class="floating_banner">Floating banner</div>
      <div class="smartBannerIdentifier"></div>
  </div>
  </body>
</html>

Nie mam pojęcia, czy dobrze zrozumiałem warunek, w którym banner ma zostać przescrollowany do widoku. Zrobiłem tak, że gdy użytkownik zescrolluje obraz w dół tak, że normalne miejsce gdzie jest banner przestaje być widoczne, to banner podąża za scrollem. W górę też wraca, ale tylko do tego miejsca, gdzie oryginalnie był -- nie wyżej.

Nie jestem pewien co było błędem w IE, bo Twój kod coś nawet na Fx mi nie działał, ale podejrzewam, że chodziło o to position: fixed. W IE to po prostu nie działa.

edit: Cholera, jak tu się koloruje HTML?! code=html nie działa...

0

Dzięki, wszystko działa zarówno pod IE jak i mozillą.

Możesz mi wytłumaczyć następującą linijkę, o co w niej chodzi?

needScrollIntoView = windowScrollTop > $bannerIdentifier.offset().top

Ps. nie ma tu składni HTML, więc kod HTML najlepiej zamykać w znacznikach php.

Pozdrawiam.

0

@Buka77:
Jak wskazuje nazwa zmiennej opisującej -- needScrollIntoView -- to warunek mówiący, czy banner trzeba przescrollować (może powinienem użyć słowa "move"?) tak, by był widoczny na ekranie.

Tutaj ten warunek jest prawdziwy wtedy i tylko wtedy gdy okno jest przescrollowane niżej niż pozycja elementu bannerIdentifier. Bo wykombinowałem sobie, że po to właśnie masz tam ten element, żeby użyć go do punktu odniesienia. Jeśli ktoś przescrolluje okno tak, że górna krawędź okna będzie niżej niż górna krawędź elementu bannerIdentifier, to wtedy przemieszczamy nasz banner właściwy tak, by znalazł się przy górnej krawędzi widocznej części okna.

1 użytkowników online, w tym zalogowanych: 0, gości: 1