Manque de fluidité et conflit entre fonctions

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Manque de fluidité et conflit entre fonctions

Re: Manque de fluidité et conflit entre fonctions

par dogmongo » 19 avr. 2010, 17:52

Ca marche impecc pour l'opacity, seulement ca va telement vite avec momo que pour voir si ca fonctionnait j'ai du faire un "imprécr Syst" très rapide :mrgreen:
Pour mes deux definitions aussi , elle étaient effectivement inutile.
Merci AB

Re: Manque de fluidité et conflit entre fonctions

par AB » 19 avr. 2010, 17:28

Tu as une petite erreur :

Au départ tu défini

document.getElementById('ImgZoomCadre').style.height= 0 +'px';
document.getElementById('ImgZoomCadre').style.width = 0 + 'px';

mais à cet instant le DOM n'est pas chargé puisque ce code est avant la balise body donc fatalement document.getElementById('ImgZoomCadre') est indéfini.
Et donc si ton code fonctionne avec cette erreur, pas certain que ces deux lignes servent à quelque chose...

Sinon je vois que tu galère un peu pour trouver le mode opacity qui fonctionne avec tous les navigateurs.

Un exemple de syntaxe qui fonctionne normalement partout :

Code : Tout sélectionner

function SetOpacity(obj, opacity) { obj.style.filter = "alpha(opacity:"+opacity+")"; obj.style.KHTMLOpacity = opacity/100; obj.style.MozOpacity = opacity/100; obj.style.opacity = opacity/100; }

Re: Manque de fluidité et conflit entre fonctions

par dogmongo » 19 avr. 2010, 12:45

Super conseil nours312 ca change du tout au tout, je ne connaisais pas les variable booleen et leur effet sur une fonction du genre :)
Avec l'effet opacity le résultat est surprennant :D , prochaine etape le CSS

Re: Manque de fluidité et conflit entre fonctions

par Nours312 » 18 avr. 2010, 11:41

bon, en le triturant bien, on arrive toujours à le faire planter, tu devrais mettre une variable booleene en charge d'autoriser/bloquer les actions de manipulation de ton setTimeout lorsque l'effet est en cours de réalisation (onBeforeStart => queue = false et onAfterFinish => queue = true ) c'est ce qui est utiliser dans la plupart des lib ;)

sinon, pour placer ta div sur l'image sur l'aaquelle on click, il te suffit de retrouver son emplacement par rapport au navigateur et tu utilise une position:aboslute ensuite, tu fait une fonction qui va (durant l'ouverture) déplacer le point haut/gauche pour qu'il arrive (au final) de maniere à ce que ton image soit bien au centre de l'écran ...

@++

Re: Manque de fluidité et conflit entre fonctions

par dogmongo » 18 avr. 2010, 00:03

je l'ai beaucoup amélioré, et j'ai constaté une plus grand fluidité sur mozilla, le zoom est un peu plus centré depuis, si je parviens à soigner le styles CSS je peu avoir un meilleur résultat, je peu aussi ajouter un effet d'opacité sur le zoom ce qui pourrait le rendre encore plus jolie et plus fun, le top serait que le zoom se centre sur la page du navigater mais mon niveau en CSS est pas au top, j'ai remis la page on line pour que tu voyent mes changements :wink:
toute subjestion est la bienvenue :wink:

Re: Manque de fluidité et conflit entre fonctions

par AB » 17 avr. 2010, 20:06

Sur les essais que j'avais fait quand tu avais mis le lien, chez moi c'était fluide... Il y avait juste le pb quand on clique sur une miniature avant que l'agrandissement en cour soit refermé.

Re: Manque de fluidité et conflit entre fonctions

par Nours312 » 17 avr. 2010, 18:35

il me reste encore à régler mon problème de fluidité :wink:
t'as testé de changer de processeur ... ou d'augmenter la ram ... :D non plus sérieusement, t'as testé d'un autre système ?

Re: Manque de fluidité et conflit entre fonctions

par dogmongo » 17 avr. 2010, 13:34

C'est exactement ce que j'ai fais et ca marche beaucoup mieux, il me reste encore à régler mon problème de fluidité :wink:

Re: Manque de fluidité et conflit entre fonctions

par AB » 16 avr. 2010, 16:20

après quelques modifs je constate une net amélioration du comportement après clic, j'ai comme l'impression que mes fonctions ce font la guerre, je ne sais pas comment donner ordre de stopper une fonction si c'est l'autre qui est lancer ?
C'est ta fonction setTimeout qui continue ... Pour stopper le setTimeout en cours il te suffit de faire clearTimeout(compte) (puisque tu as mis compte = setTimeout...)

Re: Manque de fluidité et conflit entre fonctions

par dogmongo » 16 avr. 2010, 15:00

après quelques modifs je constate une net amélioration du comportement après clic, j'ai comme l'impression que mes fonctions ce font la guerre, je ne sais pas comment donner ordre de stopper une fonction si c'est l'autre qui est lancer ? :? , après comme tu le dis si je centre mon agrandissement ca ser abeaucoup plus sympa c'est pas le plus dur ca :)

Re: Manque de fluidité et conflit entre fonctions

par dogmongo » 16 avr. 2010, 14:49

Merci de ta réponse, c'est vraix que c'est sympa les cliques multiples #-o
sinon j'utilise ie8 ecran à 1920 * 1080 , je vais de suite appliquer tes modifs pour commencer un oubli qui peut jouer sur la balance

Re: Manque de fluidité et conflit entre fonctions

par Nours312 » 16 avr. 2010, 14:00

alors ... une question ::

t'as testé un double (ou un quadruple) click sur une image tels que celle du rot ?? c'est sympa ^^

sinon :

var h = document.getElementById('ImgZoomCadre').style.height;
var valeur = h.split (/[a-z]/);
var new_h = parseFloat (valeur[0]) + 5;

devrait sans trop de dificulté etre remplacé par :

var h = document.getElementById('ImgZoomCadre').style.height;
var new_h = parseINT (h) + 5;
// en tout cas, j'ai jamais constaté de bug ^^

après, il serait sympa que le zoom démarre directement à partir de l'image sur laquelle on a clické (ce serait surement plus agréable) pour grossir de manière à ce qu'elle cible le centre de l'écran ... (pas simple en cross-browser sans librairies, ... mais réalisable ^^)

sinon, avec quel navigateur t'as des soucys ? chez ça marche bien ! ... sauf :

- IE7 ou il y a un décalage dans l'implantation de la div de zoom,
- IE ou il y a confli lorsque je lance un autre appel avant que le premier ne soit terminé,
- et opéra ou ça plante lamentablement !...
:mrgreen:

Manque de fluidité et conflit entre fonctions

par dogmongo » 16 avr. 2010, 12:00

Bonjour tout le monde,

Hier je me suis lancer dans la création d'une petit application album photo, je voulais en très peu de code obtenir un beau résultat sans pour autant passé par du JQuery, j'ai presque réussi mais j'ai un conflit entre mes fonctions et en plus un très vilain effet pendant le zoom, comme si l'image etait coupé en deux.

Code : Tout sélectionner

<script type="text/javascript"> var centi=0 var secon=0 document.getElementById('ImgZoomCadre').style.height= 0 +'px'; function voirimg(url){ /* je réinitialise les paramètres */ document.getElementById('ImgZoomCadre').style.height= 0 +'px'; document.getElementById('ImgZoomCadre').style.width = 0 + 'px'; document.getElementById('ImgZoomCadre').style.visibility='visible'; document.getElementById('imagevoir').src = url; relaiZoom(); if (stop) return; } function relaiZoom(){ centi++; var h = document.getElementById('ImgZoomCadre').style.height; var valeur = h.split (/[a-z]/); var new_h = parseFloat (valeur[0]) + 5; document.getElementById('ImgZoomCadre').style.height = new_h + 'px'; var w = document.getElementById('ImgZoomCadre').style.width; var valeur = w.split (/[a-z]/); var new_w = parseFloat (valeur[0]) + 5; document.getElementById('ImgZoomCadre').style.width = new_w + 'px'; if (centi>100){ clearTimeout(); centi=0; }else{ compte = setTimeout('relaiZoom()',10); } } function cacheimg(){ stop = true; relaiDeZoom(); } function relaiDeZoom(){ centi++; var h = document.getElementById('ImgZoomCadre').style.height; var valeur = h.split (/[a-z]/); var new_h = parseFloat (valeur[0]) - 5; document.getElementById('ImgZoomCadre').style.height = new_h + 'px'; var w = document.getElementById('ImgZoomCadre').style.width; var valeur = w.split (/[a-z]/); var new_w = parseFloat (valeur[0]) - 5; document.getElementById('ImgZoomCadre').style.width = new_w + 'px'; if (centi>100){ clearTimeout(); centi=0; document.getElementById('ImgZoomCadre').style.visibility='hidden'; }else{ compte = setTimeout('relaiDeZoom()',5); } } </script>
j'ai mis l'application en ligne http://www.evdog.com/help.php, un essai reel parlera beaucoup mieux

millle merci d'avance pour les améliorations que vous pourriez m'apporter