« 1 2 »
Autor Zpráva
Joan
Profil
Pracuji na pochopení plynulého zobrazení elementu. Což o to, funguje mi to, ale něčemu nerozumím:

<meta charset="windows-1250">
<script>
function zobrazit(co)
{
  var obr = document.getElementById(co);
  for(var i = 1; i <= 20; i++)
  {
    setTimeout(krokAnimace(obr, i / 20), i * 30);
  }
}

function krokAnimace(element, krok)
{
  // je zapotřebí vrátit novou funkci — ta se teprve zavolá při načasovaném timeoutu, zatímco krokAnimace se volá dvacetkrát při načasování
  return function()
  {
    var o = krok;
    var of = Math.round((krok) * 100);
    
    // tento řádek nastavuje atribut style
    element.style.cssText = "\
      opacity: " + o + ";\
      filter: alpha(opacity=" + of + ");\
      -moz-opacity: " + o + ";\
      -khtml-opacity: " + o + ";\
    ";
  };
}
</script>
<img id="obrazek" src="http://diskuse.jakpsatweb.cz/img/logo.png" style="visibility: hidden"><br>
<input type="button" value="Plynule zobrazit" onclick="zobrazit('obrazek')">


Vím, že opacity platí pro Firefox a nabývá hodnot 0.0 - 1.0 a filter: alpha(opacity) pro IE od 1 do 100 a vlastnost -moz-opacity pro starou Mozillu a -khtml-opacity pro prohlížeč Konqueror, Safari apod. Ale nerozumím řádkům 21 - 26:
- proč jsou tam ta zpětná lomítka?
- bylo by stylování možné rozepsat normálním způsobem s opakovaným element.style... pro každou vlastnost pro mé pochopení?

Na řádku 15 je
return function()
- proč ta funkce neobsahuje název (= jak poznám, jestli se jedná o function zobrazit anebo o function krokAnimace anebo o úplně jinou funkci?)

Koukám na tento kód už pár dní, zkouším různé změny ale dvakrát moudrá z něj stále nejsem :-(
Byl by prosím někdo tak ochotný a dovysvětlil mi toto?
Dík a pěkný víkend!
_es
Profil
Joan:
- proč jsou tam ta zpětná lomítka?
To bude asi zle, asi je to pokus zapísať do reťazca konce riadkov, no nemusí to tak fungovať.
Konce riadkov sa zapisujú do reťazca ako \n, no v tomto prípade nie sú treba.

proč ta funkce neobsahuje název (= jak poznám, jestli se jedná o function zobrazit anebo o function krokAnimace anebo o úplně jinou funkci?)
Lebo je to vyrobenie novej funkcie, ktorá nemá názov, je len priamo vytvorená v príkaze return, niečo je o tom tu v dokumentácii Mozilly.
Tá animácia by sa nejako dala spraviť aj bez toho.
Bubák
Profil
Joan:
- proč jsou tam ta zpětná lomítka?
Částečně to vysvětluje řádek 20: // tento řádek nastavuje atribut style
Ale následující kód na řádcích 21-26 není v řádku, ale JS to nepozná, protože konce řádků jsou escapované.
Šlo by to i kódem v jednom řádku:
    element.style.cssText = "opacity: " + o + "; filter: alpha(opacity=" + of + "); -moz-opacity: " + o + "; -khtml-opacity: " + o + "; ";
_es
Profil
Bubák:
Ale následující kód na řádcích 21-26 není v řádku, ale JS to nepozná, protože konce řádků jsou escapované.
Tým by som si nebol istý, že to nepozná, niekde tvoria koniec riadku dva znaky a ak to interpret JS zle spracuje…
Joan
Profil
_es, Bubák:
Tak jsem schválně zkusila
a) všechna zpětná lomítka odmazat a ponechat zbytek formátován stejně ---> pro řádek 21 jsem dostala chybovou hlášku "Unterminated string literal
b) přidala jsem za všechna zpětná lomítka "n" jako odřádkování ---> stejná chyba
c) Bubákův řádek ---> stejná chyba

Takže ta lomítka nějaký význam mít musejí, s nimi to funguje, bez nich ne.

Zkoušela jsem samostatně nastavit
element.style.opacity = "opacity: " + o + ";"
protože testuji v Firefoxu 3.6.8 kde by to snad mělo stačit a JS chyba tentokrát žádná, akorát - nic se nezobrazí.
_es
Profil
Joan:
Tak jsem schválně zkusila
a) všechna zpětná lomítka odmazat a ponechat zbytek formátován stejně
Treba skúsiť zmazať lomítka aj so znakmi ukončenia riadka.
Teda tak, aby z riadkov 21 až 26 bol len jeden riadok - tak, ako ho uvádza Bubák vo svojom poslednom príspevku.

Zkoušela jsem samostatně nastavit
element.style.opacity = "opacity: " + o + ";"
To by malo byť skôr:
element.style.opacity = o;
Ak je o číslo od 0 do 1.
Joan
Profil
...aby z riadkov 21 až 26 bol len jeden riadok - tak, ako ho uvádza Bubák vo svojom poslednom príspevku
I to jsem dřív zkoušela, ale si jsem někde udělala chybičku, protože zkopírovaný Bubákův kód už šlape jak má :)
Řekla bych, že tam ty uvozovky všude být mají (když už jsou tam pluska na připojení řetězce), proto jsem napsala
element.style.opacity = "opacity: " + o + ";"

přičemž ale ani element.style.opacity = o;
samostatně opravdu nedělá vůbec nic (ani chybu, ani zobrazení).
_es
Profil
Joan:
přičemž ale ani element.style.opacity = o;
samostatně opravdu nedělá vůbec nic (ani chybu, ani zobrazení).
Nie je náhodou o rovné 1? Alebo, nebolo to už nastavené na tú istú hodnotu?
Lebo mne JS odkaz:
javascript:document.body.style.opacity=0.5;void 0;
ak sa to nakopíruje do adresového riadku, funguje vo FF na každej stránke.
habendorf
Profil
IMHO je úplně jedno, jestli se použije Chamurappiho nebo Bubákův (jednořádkový) zápis. Chápu to tak, že Chamurappi chtěl použít v tomto případě zápis obvyklý pro CSS.

selektor {
  vlastnost:hodnota;
  vlastnost:hodnota;
}
_es
Profil
habendorf:
je úplně jedno, jestli se použije Chamurappiho nebo Bubákův (jednořádkový) zápis.
No neviem, v jednej veľmi dobrej knihe je priamo písané, že ten Chamurappiho zápis možný nie je.
To, že to funguje, ešte nemusí znamenať, že s tým nejaký prehliadač nemusí mať problémy.
Keď aj nie priamo s tým kódom, tak pri kopírovaní kódu sa v niektorých editoroch môže znak konca riadka zmeniť - používajú sa rôzne znaky a kombinácie znakov ako konce riadkov.
Ak bol ten príklad myslený ako príklad pre začiatočníkov, tak nespĺňa obvyklú vec pri takých príkladoch:
Že sa dajú konce riadkov aj s medzerami za nimi zmazať bez straty funkčnosti - teda až na komentáre s //.
Ja by som to upravil skôr nejako takto:
function zobrazit(co)
{
  var obr = document.getElementById(co), krok = 0.05, o = krok;
  for(var i = krok; i <= 1; i += krok)
  {
    setTimeout(krokAnimace, i * 600);
  }
  function krokAnimace()
  {
    var of = Math.round((o) * 100);
    obr.style.cssText = "opacity: " + o + "; filter: alpha(opacity=" + of + "); -moz-opacity: " + o + "; -khtml-opacity: " + o + "; ";
    o += krok;
  }
}
Na zmenu plynulosti a rýchlosti animácie stačí zmeniť krok a číslo v setTimeout.
Joan
Profil
_es:
Díky Ti moc! Toto Tvoje řešení mi přijde pro moje začátečnické mozkové závity mnohem názornější, protože má v setTimeoutu funkci bez argumentu, názorně definovaný krok a nemá anonymní funkci, která mi zatím moc neříká.
Jenom prosím Tě proč, když tento řádek
 var obr = document.getElementById(co), krok = 0.05, o = krok;

rozepíšu do tří řádků (vždy se středníky na konci samozřejmě a slovem var před o = krok
tak mi konzola - ale až po kliknutí na tlačítko - napíše, že "krok is not defined"? Já mám za to, že jsem jej definovala. Nebo snad to, co je zapsáno na jednom řádku a oddělené čárkami má trochu jiný význam, než každá proměnná na samostatném řádku?

A ještě dumám nad vztahem mezi "o = krok" a "var i = krok". Vím, že spolu velmi úzce souvisí, ale když jsem zkusila písmenka i a o zaměnit, tak to nefungovalo. Nebo to "o = krok" odpovídá jednotlivému kroku funkce krokAnimace a "var i = krok" setTimeoutu a aby se to nepletlo, tak musí být dvě proměnné, i když spolu související? Anebo proměnná i souvisí s vlastním krokem celého procesu a proměnná o s krokem "ztmavování" potažmo zobrazování obrázku? Když totiž proměnnou o nahradím íčkem, tak obrázek vyskočí okamžitě, ne postupně.

EDIT: Zjistila jsem, že v 3.řádku lze vymazat o = krok
a veškeré proměnné o nahradit proměnnou krok. Vono to funguje, ale je to jaksi trhanější a ne tak plynulé jako při Tvém řešení. Jak vidím není krok jako krok :)
_es
Profil
Joan:
príkaz var obr = document.getElementById(co), krok = 0.05, o = krok; je ekvivalentný príkazu:
var obr = document.getElementById(co); var krok = 0.05; var o = krok;
Ak chýba príkaz var, tak sa definuje trochu zvláštna globálna premenná, viď tu.
Len jedna premenná krok nestačí, lebo funkcia krokAnimace je vnorená do funkcie zobrazit a preto sú hodnoty premenných funkcie zobrazit pri jednotlivých volaniach funkcie krokAnimace zdieľané, trochu to je vysvetlené tu.
Teoreticky by stačili len premenné krok a i, kde by sa premenná i po tom cykle nastavila na hodnotu premennej krok, no nie je zvykom používať premennú z cyklu inde ako v cykle.
Ešte ma napadlo, že oproti pôvodnému kódu je rozdiel vo funkčnosti, ak sa nová animácia spustí vtedy, ak ešte beží stará.
ono to funguje, ale je to jaksi trhanější a ne tak plynulé
Lebo vtedy premenná krok nebude rásť lineárne ale exponenciálne.
Witiko
Profil
Posílám sem mé řešení, které už nějaký ten pátek používám:

Funkce pro nastavení průhlednosti (navrací true / false při zadání chybné hodnoty):
var setOpacity;
if(isIE) {
  setOpacity = function(element, opacity) {
    if(typeof element != "object" || typeof opacity != "number" || opacity < 0 || opacity > 100) return false;
    if(typeof element.style != "object") return false;
    if(element.style.cssText == void(0)) return false;
    var cssText = element.style.cssText.split(";");
    var found = false;
    var lowercase;
    for(var index=0;index<cssText.length;index++) {
      lowercase = cssText[index].toLowerCase();
      if(lowercase.indexOf("filter:") > -1) {
        if(lowercase.indexOf("progid:dximagetransform.microsoft.alpha") > -1) found = true;
        break;
      }
    }
    if(found) {
      var index2 = cssText[index].toLowerCase().indexOf("progid:dximagetransform.microsoft.alpha");
      var index3 = index2 + cssText[index].substr(index2).indexOf(")") + 1;
      if(opacity!=100) cssText[index] = cssText[index].substr(0,index2+39) + "(opacity = " + String(opacity) + ")" + cssText[index].substr(index3);
      else {
        if(regexp.test(cssText[index].substr(index3)) || regexp.test(lowercase.substr(index3).replace("filter:",""))) cssText[index] = cssText[index].substr(0,index2) + cssText[index].substr(index3);
        else cssText[index] = "";
      }
      element.style.cssText = cssText.join(";");
    } else if(opacity!=100) {
      element.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity = " + String(opacity) + ")";
    }
    return true;
  }
} else {
  setOpacity = function(element, opacity) {
    if(typeof element != "object" || typeof opacity != "number" || opacity < 0 || opacity > 100) return false;
    if(typeof element.style != "object") return false;
    element.style.opacity = opacity==100?"":opacity / 100;
    return true;
  }
}


Funkce pro samotnou animaci (navrací funkci, která při zavolání zruší veškeré zbývající setTimeouty a animaci tak přeruší):
function retransparent(objectID,time,transparency_start,transparency_end,callback) {
  if(typeof objectID != "object") objectID = document.getElementById(objectID);
  if(!objectID) {
      if(typeof callback == "function") callback();
      return function() {}
    }
  var calls = [];
  var ticks = Math.round(time / (1000 / FramesPerSecond));
  var delta = transparency_end - transparency_start;
  var diff = delta / ticks;
  var previous;
  if(PerformanceSaver) previous = false;
  for(var index = 0; index <= ticks; index++) {
    if(!PerformanceSaver || Math.floor(transparency_start+(index*diff)) !== previous || index == ticks) {
      (function(index){
        calls.push(window.setTimeout(function() {
          var opacity;
          if(index == ticks) opacity = transparency_end;
          else opacity = transparency_start+(index*diff);
          if(opacity > 0) {
            setOpacity(objectID, opacity);
            if(isHidden(objectID)) show(objectID);
          } else {
            setOpacity(objectID, opacity);
            if(isShown(objectID)) hide(objectID);
          }
          if(index == ticks && typeof callback == "function") {callback();}
        },index*(1000 / FramesPerSecond)));
      })(index);
      if(PerformanceSaver) previous = Math.floor(transparency_start+(index*diff));
    }
  }
  return function() {
    for(var count = 0; count < calls.length; count++) {
      clearTimeout(calls[count]);
    }
  }
}


Ne, proměnné isIE (detekce Internet Exploreru, osobně používám momentálně výraz "\v" == "v", s MSIE 9 doufejme tyto šaškárny už nebudou třeba) a FramesPerSecond (60?) tu nejsou definované, ty nechávám na vás. Stejně tak proměnná PerformanceSaver (nevidím důvod proč nastavovat false, někdo může), jejíž funkce je popsaná zde:

/* PerformanceSaver: When turned off, the opacity changes every 1000 / FramesPerSecond milliseconds
which makes the animations as real as possible, but is pretty demanding regarding the browser resources.

When turned on, opacity only changes when the opacity change exceeds 1% - the human eye won't notice.
Also when turned on, the FPS settings affects mostly just the really fast animations, slow
animations are affected by the Performance saver which makes the set FPS value insignificant,
because the opacity doesn't get refreshed until the difference exceeds 1%. 

Retransparent document.body, transparency: 0 - 100, 30 seconds:
  PerformanceSaver off: 750 calls, 301.618ms total time
  PerformanceSaver on: 100 calls, 44.155ms total time

Approximately 86.18% of the previously needed performance saved. The slower animation, the more significant. */
Joan
Profil
Nu, já jsem tušila, že ten řádkový zápis lze rozdělit na více řádků, ale někde jsem musela udělat chybu.
Jsi laskavý, že mi to tak podrobně vysvětluješ, už je mi to mnohem jasnější.
Mým cílem je přetvořit si dosavadní fotogalerii, u které se po klikání na náhledy zobrazují velké obrázky a klikem na velký obrázek se tento zavře.
Pokusila jsem se současný skript spojit s tím Tvým:

// cast skriptu zobrazujici velky obrazek z nahledu po onclicku na nahled
var kam = document.getElementById("umisteni");  //rodic pro snimek
var snimek = document.createElement("img");   //do neho se otevira zvetsenina
kam.appendChild(snimek); 
                      //kde se nachazeji nahledy:
var nahled = document.getElementById("zatoka-galerie").getElementsByTagName("a"), krok = 0.05, o = krok;  
for (var i=0; i<nahled.length; i++)   //nahled.length = pocet nahledu
{
nahled[i].onclick = function()
{
snimek.src = this.href;
snimek.style.position = "absolute";  
snimek.style.display = "block";   //bez nej se neotevre po zavreni dalsi nahled
snimek.style.marginLeft = "-520px";
snimek.style.marginTop = "50px";
snimek.style.padding = "6px";
snimek.style.backgroundColor = "#ffffaa";
snimek.style.border = "2px solid green";
return false;

  
//cast skriptu se snahou o postupne zjevovani obrazku
for(var k = krok; k <= 1; k += krok)
  {
    setTimeout(krokAnimace, k * 600);
  }
  function krokAnimace()
  {
    var of = Math.round((o) * 100);
    snimek.style.cssText = "opacity: " + o + "; filter: alpha(opacity=" + of + "); -moz-opacity: " + o + "; -khtml-opacity: " + o + "; ";
    o += krok;
  }
  }
  }
  
//cast skriptu na zavreni velkeho obrazku onclickem
snimek.onclick = function()   
{
snimek.style.display = "none";
snimek.style.padding = 0;
snimek.style.border = 0;
}
snimek.src = this.href; 


Výše uvedený "kombi-skript" mám zatím pouze na localhostu, chybu to žádnou nehází, leč nefunguje postupné zjevování obrázku. Zradu tuším v těchto místech:

1) potřebuji vlastně na jedno kliknutí spustit současně dvě různé funkce: jednu na zobrazení velkého obrázku, druhou na jeho postupné zobrazování - je to dovoleno?

2) mám dva různé FOR cykly - je možné použít je současně anebo je musím spojit do jednoho, přestože každý vyžaduje jiné kroky?

3) myslela jsem, že proměnná i v prvním FOR cyklu se tluče s proměnnou i v druhém FOR cyklu, tak jsem tu druhou přejmenovala na k - ale nepomohlo to. Vidí vůbec nějak na sebe tyto dvě různé, ale související proměnné?

4) záleží na pořadí funkcí na samotné zobrazení a na postupné zobrazení nebo ne?

5) mám mlhavé tušení, že bude potřeba ten lexikální uzávěr, pletu se?

Budu vděčná za popostrčení blíže k cíli, děkuji!
Witiko
Profil
Zdá se mi to (v tom kódu se špatně orientuje), nebo na konci nadřazeného cyklu soustavně redefinuješ lokální funkci krokAnimace?

1) Máš nějaký důvod domnívat se, že by to nemělo být dovoleno? :)

2) Jistěže je možné cyklit cykly. ;)

3) Jistě, že na sebe vidí. Lokální proměnná je viditelná z kontextu funkce ve které byla definována a všech podřazených strukturách. Leč do globálního scope se nedostane.

4) A proč to jednoduše neudělat v tomto sledu: display:hidden, opacity:0, display:ok, plynulá animace. Pokud se to udělá takto, k žádnému probliknutí nedojde.

5) Nebude, jelikož je to celé splácané na úrovni globálního scope a proto skutečně není potřeba zachovávat žádné lokální přoměnné už jenom proto, že lokální proměnné jsou tu jen dvě, jedna by tu vůbec nemusela být (k), druhá funguje jen na výběr z pole (i). setTimeout(krokAnimace, k * 600); - krokAnimace by měla být neměnná a statická funkce. A vzhledem k tomu, že se argumenty nepředávají z lokálních proměnných, ale funkce pracuje s proměnnými globálními, je možný tento zápis, který eliminuje potřebu lexálního uzávěru.
Joan
Profil
Witiko:
Hm, obávám se, že Ti nedokážu odpovědět...
Zatím jsem jen "slepila" dva skripty, které samostatně fungují, dohromady a bez toho, aby konzola házela chybu.
1) fungující skript na okamžité zobrazení velkého obrázku z náhledu:

var kam = document.getElementById("umisteni");  //rodic pro snimek
var snimek = document.createElement("img");   //do neho se otevira zvetsenina
kam.appendChild(snimek); 
var nahled = document.getElementById("zatoka-galerie").getElementsByTagName("a");  /*kde se nachazeji nahledy*/
for (var i=0; i<nahled.length; i++)   //nahled.length = pocet nahledu
{
nahled[i].onclick = function()
{
snimek.src = this.href;
snimek.style.position = "absolute";  
snimek.style.display = "block";   //bez nej se neotevre po zavreni dalsi nahled
snimek.style.marginLeft = "-520px";
snimek.style.marginTop = "50px";
snimek.style.padding = "6px";
snimek.style.backgroundColor = "#ffffaa";
snimek.style.border = "2px solid green";
return false;
}
}  

snimek.onclick = function()   //zavreni velkeho obrazku onclickem
{
snimek.style.display = "none";
snimek.style.padding = 0;
snimek.style.border = 0;
}
snimek.src = this.href; 


2) fungující skript na postupné zobrazování (i když po kliknutí na tlačítko, nikoli přímo na obrázek):

<script language="JavaScript" type="text/javascript"><!--
 function zobrazit(co)
{
  var obr = document.getElementById(co), krok = 0.05, o = krok;
  for(var i = krok; i <= 1; i += krok)
  {
    setTimeout(krokAnimace, i * 600);
  }
  function krokAnimace()
  {
    var of = Math.round((o) * 100);
    obr.style.cssText = "opacity: " + o + "; filter: alpha(opacity=" + of + "); -moz-opacity: " + o + "; -khtml-opacity: " + o + "; ";
    o += krok;
  }
}
//-->
</script>
  </body>
  
  <img id="obrazek" src="1.jpg" style="visibility: hidden"><br><br>
  <input type="button" value="Plynule zobrazit" onclick="zobrazit('obrazek')">
  </body>


No a potřebuji je propojit tak, aby se obrázek z náhledu zobrazoval nikoli naráz jako dosud, ale postupně.
Witiko
Profil
Nejsem moudrý z deklarace funkce zobrazit. Proč definuješ funkci krokAnimace UVNITŘ dané funkce (funkce se bude definovat znovu a znovu při každém volání)? Navíc až ZA cyklem, takže ve chvíli kdy v cyklu voláš setTimeout(krokAnimace, i * 600); žádná funkce krokAnimace neexistuje? +Celkově daná animace působí zvláštně, čas a krok je vycucaný z prstu, nebo je poměr vypočítaný tak, aby se dosáhnulo užŕčitého počtu snímků za sekundu tak, aby byl spokojený jak prohlížeč, tak oči návštěvníka?
Chamurappi
Profil
Reaguji na Witika:
funkce se bude definovat znovu a znovu při každém volání
Nebude. Každý výkonný blok skriptu se vyhodnocuje dvoukrokově, nejprve se najdou všechny deklarace proměnných a funkcí, pak teprve se vyhodnocují příkazy. Proto je možné i volat funkci, která je definovaná až za tím voláním.
Witiko
Profil
Stejně však nevidím důvod proč uvnitř funkce definovat lokální funkci, která zaniká po ukončení činnosti funkce nadřazené. :)
_es
Profil
Witiko:
Stejně však nevidím důvod proč uvnitř funkce definovat lokální funkci, která zaniká po ukončení činnosti funkce nadřazené. :)
Ale ona nezaniká, lebo je v tom cykle niekoľko krát priradená do časovača setTimeout.
Zanikne až po dokončení všetkých tých časovačov.
A vo vnútri inej funkcie je definovaná preto, aby mala prístup k premenným tej funkcie a tie premenné teda do skončenia časovačov tiež nezanikajú.
Witiko
Profil
_es
To samozřejmě vím, jen jsem si nevšimnul, že var obr = document.getElementById(co), krok = 0.05, o = krok; je deklarováno uvnitř funkce, četl jsem špatně a myslel jsem, že jde o globální proměnné - viz. [#14] Joan, kde to tak vypadá.
Joan
Profil
Já vím, že to mám zatím jen "sešpendlené" pomocí svých skrovných znalostí a aspoň tak, aby to neházelo chybu. Na plnohodnotné "sešití" zatím nemám, zasekla jsem se na své dosavadní neschopnosti poprat se s oběma FOR cykly a s hafem funkcí...
_es
Profil
Joan:
No a potřebuji je propojit tak, aby se obrázek z náhledu zobrazoval nikoli naráz jako dosud, ale postupně.
Mne zase takéto samoúčelné postupné animácie dosť vadia.
Ak chcem vidieť fotografiu, tak nech je to čo najrýchlejšie.
Podľa mňa by bolo lepšie, ak by sa fotografia objavila ihneď a nejaká animácia bola až dodatočne k tomu - napríklad nejaká animácia orámovania okolo obrázka.
Witiko
Profil
Joan
Pokud ti nejde o to vytvořit to sama, můžeš klidně použít funkce, které jsem posílal. [#13]

/* Prvně se deklarují konstanty (isIE se může vyhodit a deklarovat přímo před funkcí, jelikož se použije jen jednorázově při načítání) */
var FramesPerSecond = 60, /* Počet snímků za sekundu, počítá se z něj čas jednotlivých timeoutů */
    isIE = "\v" == "v", /* Proměnná, která indikuje, jde-li o Internet Explorer, aby se nemusel složitě parsovat cssText v ostatních prohlížečích */
    PerformanceSaver = true; /* Vysvětleno v postu #13, při true se mění opacity jen pokud změna přesahuje jedno procento. Šetří výkon. */

/* Sem přijdou deklarace z postu #13 */

retransparent(/*
  obrázek (buďto ID daného obrázku nebo rovnou pointer na objekt),
  čas animace (v milisekundách),
  počáteční opacity (0),
  konečná opacity (100),
  funkce která se zavolá po dokončení animace (function() {alert("Milí návštěvníci, právě jste byli svědky mé úžasné animace. Jistě jste tak nadšeni jako já!");})
*/); /* Funkce navrátí funkci, která po zavolání animaci přeruší */
Joan
Profil
Samozřejmě bych to chtěla vytvořit a hlavně pochopit sama :-) . Jen jsem sotva "strávila" jeden postup a Ty mi nabízíš diametrálně odlišný :)
Dobře, já teda nechám vyskakovat obrázky naráz (díky vám oběma za názor), i když by to bylo mnohem rychlejší než Lightbox a jiný -box, ale stejně by mě z principu zajímalo, jak tyhle dvě funkce slepit dohromady, i kdybych to použila někde úplně jinde. Tak já si ještě budu lámat hlavu dál, zatím dobrou noc.
Witiko
Profil
Pokud si rozpitváš funkci, kterou jsem posílal (retransparent), zjistíš, že nejde o nic diametrálně odlišného. Jde o to samé, co děláš ty, jen se na nastavení samotné průhlednosti používá externí funkce a místo nahození kroku a intervalu mezi změnami animace od oka se intervaly vypočítají ze zadaného počtu snímků za sekundu.

Momentálně nemám dostatek síly zjišťovat, kde je v tvém scriptu chyba. Snad zítra. :)
Joan
Profil
Witiko:
Momentálně nemám dostatek síly zjišťovat, kde je v tvém scriptu chyba. Snad zítra. :)
Jsi hodný, díky, ale já to ještě zkusím sama :). V noci mě něco napadlo (já totiž nepočítám ovečky, ale přemýšlím nad pokračujícím řešením od chvíle, kdy odpadnu od počítače).
P.S.: Tvoje řešení je na mě zatím příliš "profesionální", promiň, skript, který mi poradil _es je mi srozumitelný a je jednoduchý a stejně rychlost zobrazování navolím od oka, zatím budu zkoušet.

EDIT!
Jsem z toho ještě trochu tak říkajíc na větvi, ale mně se doopravdy podařilo přijít na požadované řešení. Pravdou ovšem je, že to prapůvodní je vážně příjemnější, _es má pravdu :)
A navíc při kliknutí na jakýkoliv náhled hned PO natažení stránky má plynule se zobrazující zvětšenina tendenci napřed problesknout do levého dolního rohu (kde se mi zobrazovala, než jsem přidala stylovací položky k snimek.style..., takže asi jsou na nevhodném umístění ve skriptu, že? Po klikání na další náhledy je už vše v pořádku.
V obou příkladech fotogalerií se velké obrázky zavřou klikem na ně.

Závěr: nechám fotogalerii radši bez použití opacity, ale jsem zas o kus dál v Javascriptu :)
Hezký den.
Chamurappi
Profil
Reaguji na _es:
v jednej veľmi dobrej knihe je priamo písané, že ten Chamurappiho zápis možný nie je
Ve které a proč? Poslední dobou takto escapuji konce řádků docela často a ještě jsem nenarazil na problém. Skripty píšu nejčastěji v notepadu, který odřádkovává dvojznakem CRLF — pokud mi tohle všude funguje, v čem může být háček?

Ak bol ten príklad myslený ako príklad pre začiatočníkov, tak nespĺňa obvyklú vec pri takých príkladoch
Byl tak myšlený a opravdu jsem ho moc nedomyslel. I když tedy to, že kód v začátečníkovi vyvolá úžas a probudí další zvědavost, nemusí být na škodu :-)

Při psaní svého skriptu jsem předpokládal (už ani nevím přesně proč), že ten, kdo ho bude používat, zatouží i po opačné animaci, proto jsem udělal krokAnimace nezávislý na směru animace.


Reaguji na Joan:
bylo by stylování možné rozepsat normálním způsobem s opakovaným element.style… pro každou vlastnost pro mé pochopení?
Bylo, ale musela bys dávat pozor na rozdíly mezi prohlížeči.
Obecně bývá lepší na element.style nesahat a měnit jen třídu (tedy element.className), kterou máš už připravenou ve stylopisu. V případě změny průhlednosti bys těch tříd potřebovala docela hodně, u té se to nevyplácí, ale ty ostatní vlastnosti, které měníš, bych na tvém místě nenastavoval individuálně.


Reaguji na Witika:
Funkce pro nastavení průhlednosti
Ta je nějaká zbytečně divoká, ne? V Exploreru přeci není nutné pitvat cssText.
_es
Profil
Chamurappi:
Ve které a proč?
Je to v knihe David Flanagan JavaScript kompletní průvodce, 2. vydání, na konci časti 3.2.2.
Je však možné, že som to zle, alebo len český preklad, zle pochopil.
Cez internet prístupnú verziu s anglickým textom som našiel tu.

Skripty píšu nejčastěji v notepadu, který odřádkovává dvojznakem CRLF — pokud mi tohle všude funguje, v čem může být háček?
Možno v tom, že v niektorom prehliadači sa LF do reťazca vloží a v niektorom nevloží, alebo sa vloží vo všetkých.
Alebo v tom, že niektorý prehliadač bude považovať znak LF za znak konca riadka a teda syntaktickú chybu.
Davex
Profil
Chamurappi:
Skripty píšu nejčastěji v notepadu, který odřádkovává dvojznakem CRLF — pokud mi tohle všude funguje, v čem může být háček?
Cvičně jsem si ukázkový kód nechal zkomprimovat tady: http://compressorrater.thruhere.net/ a nic rozumného z toho nevylezlo. Některé kompresory si s tím poradí, ale pro univerzální použití se to asi moc nehodí.
« 1 2 »

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: