Redimensionnement frames animé

Résolu
Signaler
Messages postés
56
Date d'inscription
dimanche 27 novembre 2005
Statut
Membre
Dernière intervention
27 septembre 2008
-
Messages postés
56
Date d'inscription
dimanche 27 novembre 2005
Statut
Membre
Dernière intervention
27 septembre 2008
-
bonjour a tous ,

jai réalisé un site  ( www.google-enhanced.com )
sur lequel le redimmensionnement des frames est indispensable , jutilise cette fonction:

function Frame_resizor1()
    {
    window.parent.document.body.rows="30px, 100% ,33px, 0%, 0px";
    }
function Frame_resizor2()
    {
    etcetc...
    }
-----
fonction appelée par un "[javascript:Frame_resizor1() aaa]
-----
le
redimensionnement se fait de facon brutale , jaimerais bien pouvoir
l'animé (facon "redimensionnement manuel), jai cherché comme un fou
sur le net , mais je nai pas trouver de début de source (sauf sur ce
site >
http://www.javascriptfr.com/codes/PETITES-FONCTIONS-POUR-GERER-VOS-FRAME-FRAMES_24418.aspx
< mais la source ne fonctionne plus , trop ancinne peut etre)...

<merci></merci>

18 réponses

Messages postés
56
Date d'inscription
dimanche 27 novembre 2005
Statut
Membre
Dernière intervention
27 septembre 2008

trouvé!!

<sscript>
function Frame_resizor1a()
    {
    window.parent.document.body.rows="30px, 50% ,33px, 50%, 0px";
    }
    function Frame_resizor1b()
    {
    window.parent.document.body.rows="30px, 60% ,33px, 40%, 0px";
    }
    function Frame_resizor1c()
    {
    window.parent.document.body.rows="30px, 70% ,33px, 30%, 0px";
    }
    function Frame_resizor1d()
    {
    window.parent.document.body.rows="30px, 80% ,33px, 20%, 0px";
    }
    function Frame_resizor1e()
    {
    window.parent.document.body.rows="30px, 90% ,33px, 10%, 0px";
    }
    function Frame_resizor1f()
    {
    window.parent.document.body.rows="30px, 95% ,33px, 5%, 0px";
    }
    function Frame_resizor1z()
    {
    window.parent.document.body.rows="30px, 100% ,33px, 0%, 0px";
    }
   
   
   
   
   
   
function Frame_resizor2a()
    {
    window.parent.document.body.rows="30px, 50% ,33px, 50%, 0px";
    }
    function Frame_resizor2b()
    {
    window.parent.document.body.rows="30px, 40% ,33px, 60%, 0px";
    }
        function Frame_resizor2c()
    {
    window.parent.document.body.rows="30px, 30% ,33px, 70%, 0px";
    }
        function Frame_resizor2d()
    {
    window.parent.document.body.rows="30px, 20% ,33px, 80%, 0px";
    }
        function Frame_resizor2e()
    {
    window.parent.document.body.rows="30px, 10% ,33px, 90%, 0px";
    }
            function Frame_resizor2f()
    {
    window.parent.document.body.rows="30px, 5% ,33px, 95%, 0px";
    }
    function Frame_resizor2z()
    {
    window.parent.document.body.rows="30px, 0% ,33px, 100%, 0px";
    }
   
   
   
   
   
   
   
    function Frame_resizor3aa()
    {
    window.parent.document.body.rows="30px, 85% ,33px, 15%, 22px"
    }   
    function Frame_resizor3a()
    {
    window.parent.document.body.rows="30px, 75% ,33px, 25%, 22px"
    }
        function Frame_resizor3b()
    {
    window.parent.document.body.rows="30px, 65% ,33px, 35%, 22px"
    }
        function Frame_resizor3c()
    {
    window.parent.document.body.rows="30px, 55% ,33px, 45%, 22px"
    }
        function Frame_resizor3d()
    {
    window.parent.document.body.rows="30px, 45% ,33px, 55%, 22px"
    }
        function Frame_resizor3e()
    {
    window.parent.document.body.rows="30px, 35% ,33px, 65%, 22px"
    }
        function Frame_resizor3f()
    {
    window.parent.document.body.rows="30px, 25% ,33px, 75%, 22px"
    }
    function Frame_resizor3g()
    {
    window.parent.document.body.rows="30px, 15% ,33px, 85%, 22px"
    }
    function Frame_resizor3h()
    {
    window.parent.document.body.rows="30px, 35% ,33px, 75%, 22px"
    }
        function Frame_resizor3i()
    {
    window.parent.document.body.rows="30px, 45% ,33px, 65%, 22px"
    }
        function Frame_resizor3j()
    {
    window.parent.document.body.rows="30px, 55% ,33px, 55%, 22px"
    }
            function Frame_resizor3k()
    {
    window.parent.document.body.rows="30px, 65% ,33px, 45%, 22px"
    }
                function Frame_resizor3l()
    {
    window.parent.document.body.rows="30px, 75% ,33px, 35%, 22px"
    }
                function Frame_resizor3m()
    {
    window.parent.document.body.rows="30px, 65% ,33px, 45%, 22px"
    }
            function Frame_resizor3n()
    {
    window.parent.document.body.rows="30px, 55% ,33px, 55%, 22px"
    }
        function Frame_resizor3z()
    {
    window.parent.document.body.rows="30px, 50% ,33px, 50%, 22px"
    }
 function Test1(){
  setTimeout("Frame_resizor1a()", 0);
    setTimeout("Frame_resizor1b()", 40);
      setTimeout("Frame_resizor1c()", 70);
        setTimeout("Frame_resizor1d()", 100);
         setTimeout("Frame_resizor1e()", 130);
          setTimeout("Frame_resizor1f()", 160);
 setTimeout("Frame_resizor1z()", 190);
 }
  function Test2(){
  setTimeout("Frame_resizor2a()", 0);
    setTimeout("Frame_resizor2b()", 40);
      setTimeout("Frame_resizor2c()", 70);
        setTimeout("Frame_resizor2d()", 100);
         setTimeout("Frame_resizor2e()", 130);
          setTimeout("Frame_resizor2f()", 160);
 setTimeout("Frame_resizor2z()", 190);
 }
   function Test3(){
  setTimeout("Frame_resizor3a()", 0);
    setTimeout("Frame_resizor3aa()", 50);
    setTimeout("Frame_resizor3b()", 100);
      setTimeout("Frame_resizor3c()", 150);
        setTimeout("Frame_resizor3d()", 200);
         setTimeout("Frame_resizor3e()", 250);
           setTimeout("Frame_resizor3f()", 300);
            setTimeout("Frame_resizor3g()", 350);
             setTimeout("Frame_resizor3h()", 400);
             setTimeout("Frame_resizor3i()", 450);
             setTimeout("Frame_resizor3j()", 500);
             setTimeout("Frame_resizor3k()", 550);
             setTimeout("Frame_resizor3l()", 600);
             setTimeout("Frame_resizor3m()", 650);
             setTimeout("Frame_resizor3n()", 700);
 setTimeout("Frame_resizor3z()",750);
 }
</SCRIPT>

résultat ici > www.google-enhanced.com
Messages postés
56
Date d'inscription
dimanche 27 novembre 2005
Statut
Membre
Dernière intervention
27 septembre 2008

peut etre en faisant une décomposition du mouvement , mais je nais aucune idée de comment codé sa

exemple illustrant ma pensée:
position avt click > "30px, 100% ,33px, 0%, 0px";
clik
puis a 0.1 sec (apres click) > "30px, 90% ,03px, 10%, 0px";
puis a 0.2 sec > "30px, 80% ,03px, 20%, 10px";
.....
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
je ne peux que répéter ce que j'ai dis là :
http://www.javascriptfr.com/infomsg_REDIMESIONNEMENT-FRAMES-ANNIME_1024283.aspx#3
d'autres intervenants comprendront sans doute mieux ?

encore une fois, tu parles de frame et tu montres un pop-up
( j'ai d'ailleurs donné un début de piste pour le pop-up,
  pour une frame, on pourrait aussi... )

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
<hr />
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
ah ben non... désolé, j'ai mal lu/vu !

    window.parent.document.body.rows="30px, 100% ,33px, 0%, 0px";
    tu veux donc redimentionner une frame progressivement ?
    fait un setTimeout vers une fonction qui va le faire
       supposons la 2ème :

    var taille_voulue=taille initiale;
    fonction   {
        taille_voulue+=incrément;
        window.parent.document.body.rows="30px, "+taille_voulue+",33px, 0%, 0px";
        si taille_voule < taille maxi setTimout("fonction();",délai) ;  }
 

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]<hr />
Messages postés
56
Date d'inscription
dimanche 27 novembre 2005
Statut
Membre
Dernière intervention
27 septembre 2008

merci bien , je vais voir ce que je peux faire de sa ....
++
Messages postés
56
Date d'inscription
dimanche 27 novembre 2005
Statut
Membre
Dernière intervention
27 septembre 2008

j'suis plutot coté script php... du kou je my perds la dedans , j'ai essayé sa >

<SCRIPT LANGUAGE="JavaScript">
    var taille_voulue=100%;
    var taille_voulue2=0%;
    fonction moove {
        taille_voulue+=-50;
        taille_voulue2+=50;
        window.parent.document.body.rows="30px, "+taille_voulue+",33px, "+taille_voulue2+", 0px";
        setTimout("fonction moove();",2) ;  }

</SCRIPT>

mais avec aucun resultat...
c'est une jeu de 5 cadres enfait , il y a un de ces cadres que je voudrais rétricir , au un autre , l'agrandir d'autant que l e1er a été rétrécit...

je comprends pas pkois ce code ne séxécute point....
merci davance a voo!
Messages postés
56
Date d'inscription
dimanche 27 novembre 2005
Statut
Membre
Dernière intervention
27 septembre 2008

recopier coller du code....

<SCRIPT LANGUAGE="JavaScript">
    var taille_voulue=100%;
    var taille_voulue2=0%;
    fonction moove {
        taille_voulue+=-50;
        taille_voulue2+=50;
        window.parent.document.body.rows="30px, "+taille_voulue+",33px, "+taille_voulue2+", 0px";
        setTimout("fonction moove();",2) ;  }

</SCRIPT>
Messages postés
56
Date d'inscription
dimanche 27 novembre 2005
Statut
Membre
Dernière intervention
27 septembre 2008

ya un truk ii pase pas , c pas grave....

window.parent.document.body.rows="30px, "+taille_voulue+",33px,"+taille_voulue2+", 0px";

voila...?
Messages postés
56
Date d'inscription
dimanche 27 novembre 2005
Statut
Membre
Dernière intervention
27 septembre 2008

deja ne ne parvient pas a placer de time out
ni sur un onclick , ni ds ma fonction....
rien ne se passe ou alors , le timeout n'est poas pris en compte

>>>
>>>

<SCRIPT LANGUAGE="JavaScript">
function Frame_resizor1()
    {
    window.parent.document.body.rows="30px, 100% ,33px, 0%, 0px";
    setTimeout(Frame_resizor1(), 2000) } // ou avec des " " "

..... help meeeeeeeee!!!
Messages postés
56
Date d'inscription
dimanche 27 novembre 2005
Statut
Membre
Dernière intervention
27 septembre 2008

et meme >
<A HREF='javascript:SetTimeout(window.parent.document.body.rows="30px, 100% ,33px, 0%, 0px", 200);'

ne fonctionne pas....
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
tel que tu fais les choses, ça ne peut pas fonctionner,
    tu ne respectes pas la syntaxe de base..
relis ton code, et :


o--------o----------------------------------------------------------o
|FireFox |regarder la "console d'erreurs" |
| | Outils / Console d'erreurs |
| | |
| | et mieux, télécharger FireBug |
|--------|----------------------------------------------------------|
|Internet|activer le deboggage : Outils/options Internet/Avancés |
|Explorer| dans la liste, sous "Navigation" : décocher |
| | ° Afficher une notification de chaque erreur de script |
| | ° Désactiver le débogage de Scripts (autres applications)|
| | ° Désactiver le débogage de Scripts (Internet Explorer) |
| | |
| | et mieux, télécharger le Debogger IE |
|--------|----------------------------------------------------------|
|K-Meleon|regarder la "console d'erreurs" |
| | Outils / Console d'erreurs |
|--------|----------------------------------------------------------|
|Opera |regarder la "console d'erreurs" |
| | utils / Asole d'erreurs |
|--------|----------------------------------------------------------|
|Safari |modif Fichier "Support:\Documents and Settings\utilisateur|
| |\Application Data\Apple Computer\Safari\Preferences.plist"|
| | y ajouter <key>IncludeDebugMenu</key> |
| | <true/> |
| | |
| |regarder Debug / Show JavaScript Console |
o--------o----------------------------------------------------------o






<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
<hr />
Messages postés
56
Date d'inscription
dimanche 27 novembre 2005
Statut
Membre
Dernière intervention
27 septembre 2008

trouvé!!

<sscript>
function Frame_resizor1a()
    {
    window.parent.document.body.rows="30px, 50% ,33px, 50%, 0px";
    }
    function Frame_resizor1b()
    {
    window.parent.document.body.rows="30px, 60% ,33px, 40%, 0px";
    }
    function Frame_resizor1c()
    {
    window.parent.document.body.rows="30px, 70% ,33px, 30%, 0px";
    }
    function Frame_resizor1d()
    {
    window.parent.document.body.rows="30px, 80% ,33px, 20%, 0px";
    }
    function Frame_resizor1e()
    {
    window.parent.document.body.rows="30px, 90% ,33px, 10%, 0px";
    }
    function Frame_resizor1f()
    {
    window.parent.document.body.rows="30px, 95% ,33px, 5%, 0px";
    }
    function Frame_resizor1z()
    {
    window.parent.document.body.rows="30px, 100% ,33px, 0%, 0px";
    }
   
   
   
   
   
   
function Frame_resizor2a()
    {
    window.parent.document.body.rows="30px, 50% ,33px, 50%, 0px";
    }
    function Frame_resizor2b()
    {
    window.parent.document.body.rows="30px, 40% ,33px, 60%, 0px";
    }
        function Frame_resizor2c()
    {
    window.parent.document.body.rows="30px, 30% ,33px, 70%, 0px";
    }
        function Frame_resizor2d()
    {
    window.parent.document.body.rows="30px, 20% ,33px, 80%, 0px";
    }
        function Frame_resizor2e()
    {
    window.parent.document.body.rows="30px, 10% ,33px, 90%, 0px";
    }
            function Frame_resizor2f()
    {
    window.parent.document.body.rows="30px, 5% ,33px, 95%, 0px";
    }
    function Frame_resizor2z()
    {
    window.parent.document.body.rows="30px, 0% ,33px, 100%, 0px";
    }
   
   
   
   
   
   
   
    function Frame_resizor3aa()
    {
    window.parent.document.body.rows="30px, 85% ,33px, 15%, 22px"
    }   
    function Frame_resizor3a()
    {
    window.parent.document.body.rows="30px, 75% ,33px, 25%, 22px"
    }
        function Frame_resizor3b()
    {
    window.parent.document.body.rows="30px, 65% ,33px, 35%, 22px"
    }
        function Frame_resizor3c()
    {
    window.parent.document.body.rows="30px, 55% ,33px, 45%, 22px"
    }
        function Frame_resizor3d()
    {
    window.parent.document.body.rows="30px, 45% ,33px, 55%, 22px"
    }
        function Frame_resizor3e()
    {
    window.parent.document.body.rows="30px, 35% ,33px, 65%, 22px"
    }
        function Frame_resizor3f()
    {
    window.parent.document.body.rows="30px, 25% ,33px, 75%, 22px"
    }
    function Frame_resizor3g()
    {
    window.parent.document.body.rows="30px, 15% ,33px, 85%, 22px"
    }
    function Frame_resizor3h()
    {
    window.parent.document.body.rows="30px, 35% ,33px, 75%, 22px"
    }
        function Frame_resizor3i()
    {
    window.parent.document.body.rows="30px, 45% ,33px, 65%, 22px"
    }
        function Frame_resizor3j()
    {
    window.parent.document.body.rows="30px, 55% ,33px, 55%, 22px"
    }
            function Frame_resizor3k()
    {
    window.parent.document.body.rows="30px, 65% ,33px, 45%, 22px"
    }
                function Frame_resizor3l()
    {
    window.parent.document.body.rows="30px, 75% ,33px, 35%, 22px"
    }
                function Frame_resizor3m()
    {
    window.parent.document.body.rows="30px, 65% ,33px, 45%, 22px"
    }
            function Frame_resizor3n()
    {
    window.parent.document.body.rows="30px, 55% ,33px, 55%, 22px"
    }
        function Frame_resizor3z()
    {
    window.parent.document.body.rows="30px, 50% ,33px, 50%, 22px"
    }
 function Test1(){
  setTimeout("Frame_resizor1a()", 0);
    setTimeout("Frame_resizor1b()", 40);
      setTimeout("Frame_resizor1c()", 70);
        setTimeout("Frame_resizor1d()", 100);
         setTimeout("Frame_resizor1e()", 130);
          setTimeout("Frame_resizor1f()", 160);
 setTimeout("Frame_resizor1z()", 190);
 }
  function Test2(){
  setTimeout("Frame_resizor2a()", 0);
    setTimeout("Frame_resizor2b()", 40);
      setTimeout("Frame_resizor2c()", 70);
        setTimeout("Frame_resizor2d()", 100);
         setTimeout("Frame_resizor2e()", 130);
          setTimeout("Frame_resizor2f()", 160);
 setTimeout("Frame_resizor2z()", 190);
 }
   function Test3(){
  setTimeout("Frame_resizor3a()", 0);
    setTimeout("Frame_resizor3aa()", 50);
    setTimeout("Frame_resizor3b()", 100);
      setTimeout("Frame_resizor3c()", 150);
        setTimeout("Frame_resizor3d()", 200);
         setTimeout("Frame_resizor3e()", 250);
           setTimeout("Frame_resizor3f()", 300);
            setTimeout("Frame_resizor3g()", 350);
             setTimeout("Frame_resizor3h()", 400);
             setTimeout("Frame_resizor3i()", 450);
             setTimeout("Frame_resizor3j()", 500);
             setTimeout("Frame_resizor3k()", 550);
             setTimeout("Frame_resizor3l()", 600);
             setTimeout("Frame_resizor3m()", 650);
             setTimeout("Frame_resizor3n()", 700);
 setTimeout("Frame_resizor3z()",750);
 }
</SCRIPT>

résultat ici > www.google-enhanced.com
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
oulah... tu fais peur.
le moins qu'on puisse dire, c'est qu'on peut simplifier
mais bon... si ça te convient.....
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
<hr />
Messages postés
56
Date d'inscription
dimanche 27 novembre 2005
Statut
Membre
Dernière intervention
27 septembre 2008

je suis prenneur pour tout solution plus courte..... c'est vrai que c'est laborieux des que l'on veut changer une valeuire , fo tout changer.......
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
>>setTimeout("Frame_resizor3a()", 0);
    setTimeout("Frame_resizor3aa()", 50);
    setTimeout("Frame_resizor3b()", 100);
      setTimeout("Frame_resizor3c()", 150);
        setTimeout("Frame_resizor3d()", 200);
         setTimeout("Frame_resizor3e()", 250);
           setTimeout("Frame_resizor3f()", 300);
            setTimeout("Frame_resizor3g()", 350);
             setTimeout("Frame_resizor3h()", 400);
             setTimeout("Frame_resizor3i()", 450);
             setTimeout("Frame_resizor3j()", 500);
             setTimeout("Frame_resizor3k()", 550);
             setTimeout("Frame_resizor3l()", 600);
             setTimeout("Frame_resizor3m()", 650);
             setTimeout("Frame_resizor3n()", 700
???
    une seule fonction qui incrémente une variable , non ?
       et qui ne se relance pas quand le maxi est atteint
       ( comme mon 1er exemple )



    pareil pour le  reste.




<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
<hr />
Messages postés
56
Date d'inscription
dimanche 27 novembre 2005
Statut
Membre
Dernière intervention
27 septembre 2008

moi jsai op faire , g trop du mal a construire du javascript....
pourtant sa roule ac le php , mai , jsai pas , .......
si tu peux me completer ton, 1er exemple , jme débrouillerais pour faire les autres bouton ..... dsl
jsui kun assisté... prtant c'est pas faute d'essayer
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
   
je suis incapable de te lire.

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
<hr />
Messages postés
56
Date d'inscription
dimanche 27 novembre 2005
Statut
Membre
Dernière intervention
27 septembre 2008

oui , désolé

je fais un effort ^^

hummm et bien je remercies , mais je suis plutot hérmétique au javascript.... memem si jessayes depuis pas mal de temps.

et donc je en sais comment completer mon code avec ton scripts.

mais ce nest pas grave , la fonction marche tres bien :)

merci a toi et bonne journée