11549 sujets

JavaScript, DOM et API Web HTML5

Jqueryrotate... avec les versions 7+ de IE ?

Bonjour,


J'ai un souci avec une routine jquery !
Pour info, je ne maîtrise pas encore jquery !

Le souci provient d'un code relatif à :
http://code.google.com/p/jqueryrotate/

Ma page web est
ici.

Mon problème est le suivant.
Pour tester la compatibilité de mes codes
entre les versions du capricieux internet explorer,
j'utilise IETester.

Et là, il s'avère que le code provenant du 1er lien
fonctionne pour les versions 7 et supérieures...
Par contre, pour ma page perso (le 2e lien),
cela ne fonctionne pas pour les verisons 7 et 8.
Ceci ne fonctionne que pour la version 9 !!!
Pourquoi ?

Par déduction, j'ai donc commis une erreur dans le code...
Mais je ne sais pas où !

Pouvez-vous me consacrer un peu de votre temps
piour m'aider à solutionner ce souci ?
D'avance, un grand merci.

Voici mon code simplifié :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
...
<link href="css/font_MyriadPro.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/general.css" rel="stylesheet" type="text/css" media="all">
<link href="css/index.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jQueryRotate.js"></script>
</head>

<body>
...
<div id="ombre">
<div id="site">
<div id="visuel">
  ...
  <div id="photo01">
    <img src="images/index/photo01.gif" style="padding-left:14px; padding-top:14px;">
  </div>
  <div id="photo02">
    <img src="images/index/photo02.gif" style="padding-left:14px; padding-top:14px;">
  </div>
  ...
  <div id="commercial">
    <img src="images/index/commercial01.jpg" style="padding-left:9px; padding-top:9px;">
  </div>
</div>
...
</div>
</div>
<script>$("#photo01").rotate(-4); $("#photo02").rotate(12.4); $("#commercial").rotate(-12.4);</script>
</body>
</html>

Modifié par jytest (24 Sep 2012 - 10:19)
Administrateur
Bonjour,

change d'outil de test, c'est peut-être la seule cause de ton problème ... IE Tester c'est de la m** puisque ce n'est pas fiable à 100% je me tue à le dire.
Tu passeras moins de temps à télécharger et installer une VM Microsoft avec chacun de leurs vieux navigateurs pourris qu'à corriger un bug inexistant pour rien ou à faire une correction qui ne fonctionne que sur IE Tester et pas sur un vrai IE.

Oui les images des OS sont énormes, oui c'est un peu compliqué la première fois mais tu auras une reproduction FIABLE des bugs de tes visiteurs et 0 temps perdu à cause de l'outil de test (autrement dit mieux vaut une reproduction fiable d'un navigateur pourri qu'une reproduction pourrie d'un navigateur pourri)
Felipe a écrit :
autrement dit mieux vaut une reproduction fiable d'un navigateur pourri qu'une reproduction pourrie d'un navigateur pourri
J'admire ta prose...
Voilà là, le résumé d'un grand homme ou d'un homme grand...
qui a tout compris de IE... Je médite...

Blague à part, j'ai aussi essayé avec ceux-là.
Cela ne fonctionne pas non plus !

C'est manifestement le code
qui appelle jqueryrotate qui est en défaut !
Pouvez-vous m'aider ?

Le but recherché est de créer une fonction,
appelable plusieurs fois...
en javascript
Modifié par jytest (24 Sep 2012 - 11:08)
A l'aide, svp !

J'essaie de réaliser une fonction en javascript pour y arriver :
function rotation(div à faire tourner, angle d'inclinaison) :
function rotation(bloc,valeur) {
	$(document).ready(function(){
		$('#bloc').rotate(valeur);
	});
}


Dans l'exemple ci-dessous, je souhaiterais incliner la div 'photo01' de -4°...
<script language="javascript">rotation('photo01',-4);</script>

Je n'y arrive pas.
svp, Pouvez-vous m'aider à réaliser ces quelques lignes de code en javascript ?
Merci d'avance.
Modifié par jytest (25 Sep 2012 - 11:03)
J'ai beau utiliser IE9 et faire F12,
pour changer mes modes de compatibilité,
mon code ne fonctionne pas !
Mes photos ne s'inclient ni sous IE7 ni sous IE8, mais bien sous IE9 !!!

Pourquoi ?
Quelqu'un connaît-il "jquery" et "jqueryrotate" ?
Si oui, avez-vous un peu de temps à me consacrer pour m'aider ?
Merci d'avance.
Si tu avais regardé la doc et notamment les exemples tu aurais vu que ce plug-in est destiné à appliquer des effets de rotation sur des images, et pas sur des div.
Modifié par jb_gfx (25 Sep 2012 - 15:31)
J'avais effectivement vu cela...
Mais, je croyais que, par extrapolation, ceci était aussi valable pour une div...

Mais alors comment faire pour incliner une div (avec background à incliner), qui contient une image à incliner.

En fait, c'est une photo et son cadre photo, qui sont à incliner.
Voir le lien ici

Une idée pour moi y arriver ?
Modifié par jytest (25 Sep 2012 - 15:45)
Déjà pourquoi tu tiens à faire ça en JavaScript ? Il suffit de faire ton montage dans Photoshop.

Sinon si il y a une vraie raison à utiliser du JS il te suffit de créer tes images avec leurs cadres directement dans photoshop.
La raison est simple :
Les photos peuvent changer suivant le bon vouloir du client.
Je veux lui éviter les découpages photoshop.
Rien de plus simple que la photo se mette dans une div inclinée...

Par contre, j'ai essayé :
  <div id="photo01">
    <img id="ph01" src="images/index/photo01.png" style="background-image:url(images/index/cadrephoto.png); padding:14px;">
  </div>
  <div id="photo02">
    <img id="ph02" src="images/index/photo02.png" style="background-image:url(images/index/cadrephoto.png); padding:14px;">
  </div>
et
<script type="text/javascript">
$("#ph01").rotate(-4);
$("#ph02").rotate(12.4);
</script>
.

Mais là, c'est moche !
On voit des saccades du cadre photo (bas à droite de la 1ere grande photo) !
Voici les modifications ici.

Et

de plus, il n'y pas plus de compatibilité IE7 et IE8...
Les images sont déplacées !!!
Quelle m---e cet IE !!!

Une idée ?

A défaut, jb_gfx m'a donné la solution :
jb_gfx a écrit :
...il te suffit de créer tes images avec leurs cadres directement dans photoshop.

Modifié par jytest (25 Sep 2012 - 16:16)
Si ton client peut changer les photos tu peux créer l'effet de rotation et le montage sur le cadre en PHP avec GD ou Imagick.
Connais-tu des exemples, des codes et des méthodes simples
à utiliser pour y arriver ?
... J'abuse, je sais...
Sujet clos
Aller à