Autor Zpráva
Fisak
Profil
Dobrý den. Udělal jsem si kod na změnu pozadí stránky bez nutnosti refreshe stránky. Chtěl bych ale aby se mi pozadí stránky měnilo plynule tzn. aby se nové pozadí zobrazilo až tehdy když bude načtené. Šlo by toto udělat pomocí jQuery například? A jak?
JaySee
Profil
No když použiješ knihovnu jQueryUI, pak máš k dispozici spoustu efektů. Jedním z nich je třeba animate ->
var t = $("body");

            t.animate({backgroundColor: '#F00' }, 5000, 'linear', function() {
                                // callback
                t.after('<div>Animation complete.</div>');

            });
Fisak
Profil
JaySee:
používám
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>


navíc tohle je spíš časovač .. po 5ti vteřinách se mi zobrazí akorát animation complete .. a to ať se to načetlo nebo ne..


index.php:
<
<html>
<head>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>

    function updateDb(smer) {   
        var datastring = 'pohyb='+ smer;
        $.ajax({
        type: "POST",
        url: "pohyb.php",
        data: datastring,
        success: function() {
             $("#ReloadThis").load("vypis.php");
        }
        });
        return false;
    }
</script>
<form method="post"  onsubmit="return false">
    <input type="submit" name="nahoru" value="Nahoru" onclick="return updateDb('nahoru')"/>
    <input type="submit" name="dolu" value="Dolu" onclick="return updateDb('dolu')"/>
    <input type="submit" name="doleva" value="Doleva" onclick="return updateDb('doleva')"/>
    <input type="submit" name="doprava" value="Doprava" onclick="return updateDb('doprava')"/>
    
</form>   
<span id="ReloadThis"></span> 
 <script>
 $("#ReloadThis").load("vypis.php");    
</script> 
</body>
</html>

vypis.php:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>   
<?php
$heslo  = "vertrigo";        
$server  = "localhost";
$login = "root";
$database = "system";
 
if (MySQL_Connect($server, $login, $heslo) && MySQL_Select_DB($database))
{ 
$dotazNaMysql = mysql_query("select * from zkouska where type = 'pohyb'");
while($hodnoty = mysql_fetch_assoc($dotazNaMysql)) {  
?>  
<style>  
body {
background-image: url("obrazek.php?urob=<?php echo $hodnoty['text']; ?>");
 background-repeat: no-repeat;
 background-position: center;
 background-attachment:fixed;
 background-color:#FFFFFF;
}
</style>
<?php
}
}
?>



U index.php zmáčknu tlačítko a vypis.php se mi znova načte.. celé to pozadí.. a já bych potřeboval aby se mi to pozadí načetlo tehdy až bude celé načtené a do tý doby by tam bylo starý pozadí..
JaySee
Profil
Fisak:
No jQueryUI je komponenta pro jQuery, jež má k dispozici obrovské množství efektů a funkcí pro uživatelská rozhraní. Jedním z těchto efektů je i animation, jen přemýšlím, zda pro jeden efekt je rozumné tahat celou knihovnu. Nicméně to co má na mysli je zde: jQuery UI - zip a domumentace je zde dokumentace.
Pokud to nechceš nijak řešit, tak stačí po načtení jQuery načíst ještě toto:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

Ten časovač, o kterém píšeš, určuje délku trvání toho efektu, takže pokud tam nebudeš mít jQuery UI, nic ti to neudělá.

Každopádně postup je takový, že na té stránce vypis normálně deklaruješ background pomocí CSS a po načtení spustíš script, co jsem psal výše.

$(document).ready(function(){
var t = $("body");
 
            t.animate({backgroundColor: '#F00' }, 5000, 'linear', function() {
                                // callback
               // t.after('<div>Animation complete.</div>');
 
            });
            
});

Ten callback asi vůbec nepotřebuješ řešit, jelikož žádnou akci po změně pozadí neprovádíš. Takže ho buď uplně vyhoď, nebo si s ním můžeš dále hrát.
Fisak
Profil
JaySee:
Děkuji funguje to.. Bohužel to neni přesně tak jak jsem to myslel.. Tam mítsto toho "backgroundColor: '#F00' " by mělo být to staré pozadí.. Ten přechod pak vypadá divně.. viz. http://chtest.cherubis.cz/
Chamurappi
Profil
Reaguji na JaySeeho:
No jQueryUI je komponenta pro jQuery“ … „pokud tam nebudeš mít jQuery UI, nic ti to neudělá
Co mu to tady vyprávíš? Funkce animate není v jQuery UI, ne?


Reaguji na Fisaka:
Nemůžeš plynule měnit průhlednost pozadí, můžeš nanejvýš měnit průhlednost celého elementu pokrývajícího celé pozadí.
Obrázek má událost onload.
Fisak
Profil
Chamurappi:
Teď jsem moc nepochopil jak to bylo myšleno. Jestli se vůbec chápeme. Já bych rád aby se mi načetlo jedno pozadí. To je jedno jakym způsobem. Ale když zmáčknu jedno z tlačítek viz. http://chtest.cherubis.cz/ tak aby se mi načetlo nové pozadí tehdy až bude celé načteno a do té doby by tam bylo staré pozadí..
Chamurappi
Profil
Reaguji na Fisaka:
nové pozadí tehdy až bude celé načteno
To nové pozadí dáš jako src do <img>, jinak bys nemohl chytit jeho onload. Jakmile bude <img> načtený, můžeš adresu obrázku nastavit jako pozadí a už se nebude znovu stahovat.
Fisak
Profil
Chamurappi:
stále to moc nechápu.. Můžete mi prosím dát příklad ?
JaySee
Profil
Chamurappi:
Omlouvám se za dezinformaci, bylo to myšleno tak, že barevný přechod formou animate je přístupný až jQueryUI.
1Pupik1989
Profil
Fisak:
Hledej na googlu "Preload Images javascript". Tím Preloaderem načteš obrázky a pak už můžeš pozadí libovolně měnit. Věsměs je to to, co psal Chamurappi.
Fisak
Profil
Udělal jsem to tedy takto:
<script>
//kdyz pujdu nahoru
$('<img/>').attr('src', 'obrazek.php?urob=nahoru').load(function() {
   $('body').css('background-image', "url(obrazek.php?urob=<?php echo $hodnoty['text']; ?>)");
});
//kdyz pujdu dolu
$('<img/>').attr('src', 'obrazek.php?urob=dolu').load(function() {
   $('body').css('background-image', "url(obrazek.php?urob=<?php echo $hodnoty['text']; ?>)");
});
//kdyz pujdu doleva
$('<img/>').attr('src', 'obrazek.php?urob=doleva').load(function() {
   $('body').css('background-image', "url(obrazek.php?urob=<?php echo $hodnoty['text']; ?>)");
});
//kdyz pujdu doprava
$('<img/>').attr('src', 'obrazek.php?urob=doprava').load(function() {
   $('body').css('background-image', "url(obrazek.php?urob=<?php echo $hodnoty['text']; ?>)");
});
</script>

snad jsem někde neudělal chybu...

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:

Prosím používejte diakritiku a interpunkci.

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