|
|
Információ az animációkhoz
Mobilváltozat!
Asztali változathoz,
kattints a képre!
Mozilla Firefox és Explorer eltérései.
Úszó animáció:
Ha a koordináta rendszerben (X, Y) általunk meghatározott pozíciók (távolság) között, folyamatosan mozog az adott objektum.
DOCTYPE meghatározást tartalmazó html fájlban:
Mozilla, nem fogadja el, ha a pozíciót változóval (x vagy y) helyettesítjük.
Pozíciónak a tényleges pozíció értéket kell beírni.
Például: 100px;
Explorerben az így megírt html fájlban is működik, de Mozillában nem
1. Példa
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Úszó animációk </title>
<script language="JavaScript" type="text/javascript" src="elérési útvonal.js"> </script>
<link href="elérési útvonal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>Animációs objektum elhelyezkedése </div>
</body>
</html>
Mozillában, csak az így megírt html fájban működik, Explorerben ez is működik.
2. Példa
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Úszó animációk </title>
<script language="JavaScript" type="text/javascript" src="elérési útvonal.js"> </script>
<link href="elérési útvonal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>Animációs objektum elhelyezkedése </div>
</body>
</html>
A 2. példában látható teljes html fájl formátum típusának egyetlen szépséghibája van.
Explorer a CSS, azaz stíluslapon meghatározott fő div szakaszra (container) margin-right: auto; és margin-left: autó; meghatározásokat nem veszi ilyenkor figyelembe.
A teljes dokumentumunkat ezáltal, nem tudjuk úgy beállítani, hogy az minden monitoron, középen jelenjen meg.
Mivel mindegyik böngészőben egyformán működik, a folyamatosan úszó vagy gördülő animáció, válasszuk a 2. példát.
Különbség csak annyi, hogy nagyszélességű ( 800px-nél szélesebb) monitorral rendelkező felhasználóknál,, az Explorer esetében a monitor jobb széléhez igazodik weblapunk, míg Mozilla Firefox esetében középen jelenik meg weblapunk teljes tartalma.
Minden böngészőben egyformán működő úszó animáció.
Ahhoz, hogy Explorerben és Mozillában is egyforma legyen a monitort néző előtt weblapunk elhelyezkedése, azaz minden monitoron középen legyen a 800 px szélességű weblapunk, a következő lépéseket kell megtenni:
- Készítsük el az úszó animációt, a 2.példában látható natúr html fájl formátumban.
- Ajánlott, de nem kötelező: Azon div szakasznál, melyben a mozgó objektum megjelenik, top és left értékeket, állítsuk mínusz 5px, azaz -5px értékre.
- Készítsünk egy másikat az 1. példában látható DOCTIPE meghatározást is tartalmazó html fájl formátumban.
- Töröljük a JavaScript programot meghívó utasítási sort.
- Az animációs div szakasz helyett, helyezzünk el egy IFRAME jelölőcímkékkel határolt területet.
- Az iframe ablakba hívjuk meg, a 2. példa alapján elkészített html fájlt, mely az animációt jeleníti meg.
- Az IFRAME ablak méretei nagyobbak legyenek, mint azon div szakasz méretei, mely a mozgó, azaz úszó animációt tartalmazza.
Így, az IFRAME ablakban, nem jelennek meg, a görgetősávok
3. Példa
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Úszó animációk </title>
<link href="elérési útvonal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<iframe src="gorgetendo.html" class="rama" border="0px"> </iframe>
</body>
</html>
A border="0px" vagy stíluslapon border: none; meghatározások, Mozillában eltüntetik az iframe keretet, de Explorerben nem.