Forum PHP.pl > Scroll na dole ekranu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki

lectric

5.04.2007, 14:23:39

Widzialem gdzies kiedys na stronie taki fajny pasek na samym dole okna przegladarki po calej dlugosci gdzie byl scrollowany jakis tekst. Na podobienstwo wygladu i dzialania paskow w tv np. notowania gieldowe.
Czy ktos moglby mnie naprowadzic jak to ugryzc ?

devnul

5.04.2007, 15:20:06

javascript/css position relative(nie dziala na ie6.0 i nizej więc lepiej uzyć JS) + marquee/js,

lectric

5.04.2007, 23:37:02

dzieki, jest ok. tylko teraz nie wiem co zrobic aby warstwa byla pokazywana zawsze na dole ekranu i byla przewijana razem ze strona w tej samej pozycji, rozumiem ze chodzi o wykorzystanie css div oraz js ?

devnul

6.04.2007, 00:07:54

jeśli korzystasz z position:relative to dajesz np top:98% i height:2% i wsio jeśli z pozycji absolutnej to musisz przeliczac piksele i zmieniac pozycje za każdym razem gdy ekran zostanie przewinięty. ale mozna tez pobawić się divami i overflow :auto : mniej więcej tak

[HTML] pobierz, plaintext 
<html>
<head>
<style type="text/css">
body {overflow:hidden}
</style>
</head>
</body>
<div style="height:98%;overflow:auto">
tu treść strony</div>
<div style="height:2%;overflow:hidden">tutaj tekst z dołu strony</div></body> </html>
[HTML] pobierz, plaintext

Olimpia_ona

11.02.2009, 09:41:42

Witam, chciałabym odświeżyć ten temat, gdyż również poszukuje takiego mechanizmu przewijającego się paska.
Podglądnełam nawet kod na stronie na której takie coś ładnie działa. Kod wygląda mniej więcej tak:

[HTML] pobierz, plaintext 
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<!--[if lt IE 7]>
        <style type="text/css">
			#scrltppp {display:none;}
        </style>
<![endif]-->
....
</head>
....
<div id="scrltppp" style="clear:both;background:url(themes/default/gfx/pasek_pczer.gif);font:bold 11px tahoma;padding:5px;color:#fff;position:fixed;bottom:0px;left:0px;right:0px;overf
low:hidden;">
     <div id="scrl_news" style="overflow:visible;white-space:nowrap;position:relative;">
          UWAGA KIEROWCY! NA DROGACH JEST BARDZO ŚLISKO. APELUJEMY O ZACHOWANIE WYJĄTKOWEJ OSTROŻNOŚCI.         |        
          <span id="ostlop"> </span>
     </div>
</div>
 
<script>
        var ostlogo=document.getElementById('ostlop').offsetLeft;
        coss = document.getElementById('scrl_news').scrollWidth;
        cosst =  0 - ostlogo;
        document.getElementById('scrl_news').style.left=coss /2 + 'px';
        var tick=1;
        function news_ticker(){ var lee=parseInt(document.getElementById('scrl_news').style.left);
        document.getElementById('scrl_news').style.left = lee - 1  + 'px';
 
        if(lee == cosst)
        { document.getElementById('scrl_news').style.left=coss + 'px'; }
 
        if(tick==4){tick=0;} tick++; } setInterval("news_ticker();",20);
</script>
[HTML] pobierz, plaintext

ten skrypt działa, lecz tylko pod Mozilla Firefox jest ładnie zawsze na dole okna przeglądarki, pod IE7 ten pasek jest pod tekstem, czyli jak tekst jest długi to go nie widać (pokazuje się po przewinięciu strony na sam dół).

Na stronie na której podejżałem ten kod działa dobrze pod każdą przeglądarką. Czego jeszcze w tym kodzie brakuje, by skrypt działał prawidłowo?

źródło skryptu to: http://www.elblag24.pl/

kazag

11.02.2009, 11:07:01

position: fixed; bottom:0px; i z-index:100; ?

Wtedy zawsze będzie w jednym miejscu i zawsze na wierzchu? Przynajmniej powinien.

Olimpia_ona

17.03.2009, 08:23:35

Dodałam w tym pierwszym div z-index:100

[HTML] pobierz, plaintext 
<div id="scrltppp" style="clear:both;background:url(themes/default/gfx/pasek_pczer.gif);font:bold 11px tahoma;padding:5px;color:#fff; position:fixed; bottom:0px; left:0px;right:0px;overflow:hidden; z-index:100;">
...
[HTML] pobierz, plaintext

ale to nic nie dało, pod IE7 tego paska nie widać, gdy ogląda się górną cześć strony.

Poradziłam sobie z tym problemem dzięki innemu skryptowi: http://forum.php.pl/index.php?showtopic=66679&hl=

Polecam zainteresowanym

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.