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,110 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,110 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,110 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,110 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,110 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

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

Możesz kod wkleić na jsfiddle albo tutaj? Bo na codepen.io nie widzę kodu.

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

https://jsfiddle.net/qnj5vutj/

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

Chodzi mi o inny efekt niż ten, który umieściłeś na jsfiddle.

Chodzi mi dokładnie o efekt, jaki znajduje się pod nagłówkiem:

Multiple Messages -- All short (scroll from bottom up)

Wyskakują tam co kilka sekund z dołu do góry 3 różne teksty:

1. Lorem ipsum dolor sit amet.

2. Fusce tincidunt adipiscing,massa.

3. Mauris ullamcorper euismod leo.

O to stronka:

https://www.givainc.com/labs/marquee_example.htm

Drugi nagłówek z góry. Widzisz go?

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

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

Ten pierwszy duży blok tekstu w js to ten skrypt marquee bo coś mi z cdna nie ładowało.

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

Możesz ten nowy kod wkleić na jsfiddle? Bo na codepen.io nie widzę kodu.

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

https://jsfiddle.net/8kb1z41g/ proszę

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

W JavaScript musi być zapisane aż tyle kodu?

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

To takie duże to jest zawartość marquee.js, bo mi coś nie czytało z linku na tych codepenach ;)

Ten duży blok kodu możesz zastąpić tym marquee.js albo skorzystać z ich cdna

<script src="//cdn.jsdelivr.net/jquery.marquee/1.3.9/jquery.marquee.min.js" type="text/javascript"></script>

Jak nadal nei zadziała to spróbuj skorzystać z nowszej wersji jquery.

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

Zapisałem w ten sposób i nie działa:

<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="//cdn.jsdelivr.net/jquery.marquee/1.3.9/jquery.marquee.min.js" type="text/javascript"></script>
	<script src="./lib/jquery.marquee.js"></script>
</head>

<body>

	<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({yScroll: "bottom"});
		});
	</script>

</body>

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;
}

Gdzie jest błąd, że nie działa? Mam za starą wersję jquery czy błąd gdzieś w kodzie?

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

Zmień tą Twoją wersje jq na tą

I jeżeli używać cdn

To to co masz linijkę pod możesz usunąć, po co pobierać 2x ten sam skrypt.

I jesteś pewien, że dobrze podałeś ścieżki do plików? Mam na myśli m.in. ten css.

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

Dokładnie w index.php mam kontener z napisami.

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

Czyli mam usunąć linijkę tego skryptu?:

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

Link do CSS mam ze strony:

https://www.givainc.com/labs/marquee_jquery_plugin.cfm

Tam jest zapisane:

<!---// load jQuery and the jQuery Marquee Plug-in //--->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="./lib/jquery.marquee.js"></script>

<!---// load the Marquee CSS stylesheet //--->
<link type="text/css" href="./css/jquery.marquee.css" rel="stylesheet" media="all" />

Podsumowując - kod ma wyglądać tak?:

<head>
	<link href="./css/jquery.marquee.css" rel="stylesheet" type="text/css" media="all" />

        <script   src="https://code.jquery.com/jquery-2.2.3.min.js"   integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="   crossorigin="anonymous"></script>

	<script src="//cdn.jsdelivr.net/jquery.marquee/1.3.9/jquery.marquee.min.js" type="text/javascript"></script>
</head>

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

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

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.)

No tak, tylko czy ten CSS znajduje się w takim samym katalogu u Ciebie jak w tym przykładzie?

Co do skryptów, tak, teraz jest w porządku. Możesz je jeszcze tylko z tego <head> przerzucić na sam koniec <body>. Skrypty nie CSS.

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

O jaki CSS chodzi?

<link href="./css/jquery.marquee.css" rel="stylesheet" type="text/css" media="all" />

Chodzi Ci o ścieżkę ---> href="./css/jquery.marquee.css" ??

Ja nie posiadam na dysku pliku jquery.marquee.css.

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

Tak, o ten, z tego co wyczytałem to jest on wymagany, a raczej to co w nim jest. Masz gdzieś te style zapisane?

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

Wspominałeś, że ten duży kod na jsfiddle to jest zawartość pliku marquee.js. Ja mam na dysku plik marquee.js, który zajmuje 362 bajty. Ten plik mam w roboczym folderze. Mogę ten plik skopiować do głównego foldera, w którym trzymam pliki, np. index.php.

Mam wtedy zapisać w index.php?:

<script type="text/javascript" src="marquee.js"></script>

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

Możesz.

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

Zastosowałem teraz taki zapis w kodzie, ale dalej nic nie działa:

<head>

	<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>

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

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

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;
}

W folderze marquee trzymam plik marquee.js. Czego brakuje w kodzie, że dalej nie ma efektu końcowego? Ja już powoli się poddaję.

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

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;
}

W jaki sposób dodajesz style? Bo w tym co podałeś nigdzie ich nie widzę.

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

Chodzi o style podane w head?:

<head>
 
    <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>
 
TUTAJ BRAKUJE ŚCIEŻKI DO CSS?????

</head>

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

Tak.

np.

<link rel="stylesheet" href="css/style.css">

komentarz 29 kwietnia 2016 przez Krzysiek_34 Mądrala (6,110 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,110 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,110 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>