2 różne teksty znajdujące się w tym samym miejscu mają się przesuwać z dołu do góry.

pytanie zadane 29 kwietnia 2016 w JavaScript przez Krzysiek_34 Mądrala (6,050 p.)
zamknięte 30 kwietnia 2016 przez Krzysiek_34

Witam.

Chciałbym, aby 2 różne teksty znajdujące się w tym samym miejscu przesuwały się z dołu do góry. Aktualnie oba teksty nie poruszają się. Gdzie jest błąd?

<head>
	<link href="./css/jquery.marquee.css" rel="stylesheet" type="text/css" media="all" />
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script src="./lib/jquery.marquee.js"></script>
</head>

<ul id="marquee2" class="marquee">
	<li>Tekst nr 1</li>
	<li>Tekst nr 2</li>
</ul>

<script type="text/javascript">
	$(document).ready(function (){
		$("#marquee2").marquee();
		$("ul").marquee({yScroll: "bottom"});
	});
</script>

ul.marquee {
	display: block;
	line-height: 15px;
	position: relative;
	overflow: hidden;
	width: 500px;
	height: 22px;
	background-color: #ffff00;
}

ul.marquee li {
	position: absolute;
	display: block;
	padding: 3px 5px;
}

komentarz zamknięcia: Mam inne rozwiązania w tym temacie.

2 odpowiedzi

odpowiedź 29 kwietnia 2016 przez Mateusz11 Pasjonat (22,910 p.)

Skryptu przed końcem body
Type="text/css" nie jest potrzebny od HTML5
```
 $("ul").marquee({yScroll: "bottom"});
```
Chyba powinno być li

komentarz 29 kwietnia 2016 przez Krzysiek_34 Mądrala (6,050 p.)

Mam skrypt przed końcem body.

<head>
	<link href="./css/jquery.marquee.css" rel="stylesheet" type="text/css" media="all" />
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script src="./lib/jquery.marquee.js"></script>
</head>

<body>

	<script type="text/javascript">
		$(document).ready(function (){
		  $("#marquee2").marquee();
		  $("li").marquee({yScroll: "bottom"});
		});
	</script>

</body>

Czyli zamiast:

$("ul").marquee({yScroll: "bottom"});

mam wpisać?:

$("li").marquee({yScroll: "bottom"});

komentarz 29 kwietnia 2016 przez Mateusz11 Pasjonat (22,910 p.)

Masz skrypt przed końcem body, ale skrypt jquery w headzie

komentarz 29 kwietnia 2016 przez Krzysiek_34 Mądrala (6,050 p.)

Skrypt jQuery ma być w body, a nie w headzie?

komentarz 29 kwietnia 2016 przez Mateusz11 Pasjonat (22,910 p.)

Tak przed końcem body, ponieważ jak dasz w headzie, to przeglądarka go wczytuje, i skupia się na skrypcie nie na stronie, więc najpierw stronę a potem skrypt. Więc podepnij najpierw jQuery, Bibliotekę marquee a potem twój skrypt

komentarz 29 kwietnia 2016 przez Krzysiek_34 Mądrala (6,050 p.)

<head>
    <link href="./css/jquery.marquee.css" rel="stylesheet" type="text/css" media="all" />
     
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
 
<body>

    <script src="./lib/jquery.marquee.js"></script>

    <script type="text/javascript">
        $(document).ready(function (){
          $("#marquee2").marquee();
          $("li").marquee({yScroll: "bottom"});
        });
    </script>
 
</body>

Tak ma być?

komentarz 29 kwietnia 2016 przez Mateusz11 Pasjonat (22,910 p.)

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title></title>
    <link href="./css/jquery.marquee.css" rel="stylesheet"  media="all" />
</head>
  
<body>

<p>
Zawartość strony
</p>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="./lib/jquery.marquee.js"></script>
 
    <script type="text/javascript">
        $(document).ready(function (){
          $("#marquee2").marquee();
          $("li").marquee({yScroll: "bottom"});
        });
    </script>
  
</body>

Mniej więcej coś takiego

komentarz 29 kwietnia 2016 przez Krzysiek_34 Mądrala (6,050 p.)

Twój sposób nic nie pomoże, bo inne skrypty działają mi bez problemu przy mojej początkowej wersji. Linki do skryptów miałem dobrze ulokowane wcześniej, ponieważ inne skrypty działają mi. Tu przyczyna błędnego działania tkwi albo:

1. w zapisie skryptu (tu gdzieś może być błąd)

wersja A:

<script type="text/javascript">
	$(document).ready(function (){
		$("#marquee2").marquee({yScroll: "bottom"});
	});
</script>

wersja B:

<script type="text/javascript">
    $(document).ready(function (){
      $("#marquee2").marquee();
      $("li").marquee({yScroll: "bottom"});
    });
</script>

2. w zapisie stylu CSS (tu gdzieś może być błąd)

ul.marquee {
	display: block;
	line-height: 15px;
	position: relative;
	overflow: hidden;
	width: 500px;
	height: 22px;
	background-color: #ffff00;
}

ul.marquee li {
	position: absolute;
	display: block;
	padding: 3px 5px;
}

3. ewentualnie tu jeszcze (tutaj gdzieś może być błąd)

<ul id="marquee2" class="marquee">
	<li>Tekst nr 1</li>
	<li>Tekst nr 2</li>
</ul>

odpowiedź 29 kwietnia 2016 przez kubaapk Nałogowiec (44,270 p.)

Koniecznie musisz użyć tej biblioteki do uzyskania tego efektu?

Możesz coś takiego zrobić w samym CSSie.

http://codepen.io/anon/pen/NNOOPd

Pokaż 20 poprzednich komentarzy

komentarz 29 kwietnia 2016 przez Krzysiek_34 Mądrala (6,050 p.)

Od początku mam ustaloną ścieżkę do CSS. Zapis wygląda tak:

<head>
	
	<link href="style.css" rel="stylesheet" type="text/css" />
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	
	<script type="text/javascript" src="marquee/marquee.js"></script>
	
</head>

Gdybym nie stworzył style.css, to miałbym wielki bałagan na stronie. W style.css mam zapisane m.in.:

ul.marquee {
    display: block;
    line-height: 15px;
    position: relative;
    overflow: hidden;
    width: 500px;
    height: 22px;
    background-color: #ffff00;
}
  
ul.marquee li {
    position: absolute;
    display: block;
    padding: 3px 5px;
}

komentarz 29 kwietnia 2016 przez kubaapk Nałogowiec (44,270 p.)

To już nie wiem co Ci tam się psuje :/. Spróbuj zlinkować jquery 2+ zamiast 1.3.2

komentarz 29 kwietnia 2016 przez Krzysiek_34 Mądrala (6,050 p.)

Zamiast:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Wpisałem:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

i dalej nie działa.

komentarz 29 kwietnia 2016 przez Krzysiek_34 Mądrala (6,050 p.)

Tu chyba wersja zlinkowania jQuery nie ma nic do rzeczy, bo powróciłem do wersji 1.11.2. Aktualnie mam taki zapis kodu i w końcu działa:

<head>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	
	<script type="text/javascript" src="../marquee/marquee.js"></script>
	
</head>

<body>

	<script type="text/javascript">
        Tutaj skopiowałem tamten duży kod z jsfiddle!!!

		$(document).ready(function (){
		  $("#marquee2").marquee({yScroll: "bottom"});
		});
	</script>

</body>