Sujet Précédent Sujet Suivant

Problème avec du jQuery

Résolu/Fermé
Fetide68 Messages postés 738 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 26 avril 2024 - 2 août 2013 à 11:05
SweetRiver Messages postés 102 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 22 novembre 2016 - 2 sept. 2013 à 18:31
Bonjour,

J'ai essayer de créer un petit script pour faire une sorte de menu déroulant...
Mais ça me fait une div folle qui réagit un peu n'importe comment.
J'aimerais comprendre pourquoi et savir comment améiliorer ce script.
Merci: 

<!doctype html>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">	
	function deployer() {
		$('.contact').animate({
			width: '350px',
			height: '350px',
			background: '#fff'
		});
		// $('.contact img').attr("src","images/contact/aro-on.png");
	}
	function reployer() {
		$('.contact').animate({
			width: '100px',
			height: '100px',
			background: '#fff'
		});
		// $('.contact img').attr("src","images/contact/aro-off.png");
	}
</script>

<style type="text/css">
	.contact, .contact:hover { cursor: pointer; }
	.contact { 
		width: 100px; height: 100px; 
		position: fixed; top: 5px; right: 5px; 
		border: solid red 1px; 
		margin: 0; padding: 0; 
		overflow: hidden; 
		font-family: 'Lucida Grande', Arial; 
	}
	.contact img { position: absolute; top: 0; right: 0; border: none; margin: 0; padding: 0; }
	.contact .manual { position: absolute; top: 0; right: 100px; border: none; margin: 0; padding: 0; }
	.contact .manual p { width: 230px; padding: 10px; font-size: 9pt; margin: 0; text-align: justify; }
	.contact .form { width: 330px; padding: 10px; font-size: 9pt; position: absolute; top: 110px; right: 0; }
	.contact .form p { margin: 0; padding: 0; }
	.contact .form label { font-weight: bolder; line-height: 20px; }
	.contact .form span.email { line-height: 30px; }
	.contact .form #email { width: 100%; height: 30px; }
	.contact .form #message { width: 100%; height: 100px; }
	.contact .form p.envoyer input { 
		width: 100px; height: 35px;
		background: #000; color: #fff; 
		font-weight: bolder;  
		border: none; 
		margin: 0; padding: 0; 
	}
	hr { width: 330px; margin: 10px; position: absolute; top: 100px; right: 0; }
</style>

<div class="contact" id="contact" onmouseover="javascript:deployer();" onmouseout="javascript:reployer();">
	<img src="http://idealpix.fr/images/image_arobase.png" />
	<div class="manual">
		<p>Vous pouvez nous envoyer un message ou un commentaire pour nous donner votre avis ou faire de propositions pour améliorer votre site... Utilisez le formulaire ci-dessous</p>
	</div>
	<hr />
	<div class="form">
		<form method="post" action="contact.php">
			<p class="email">
				<label for="email">Votre adresse e-mail&nbsp;:</label><br />
				<span class="email"><input type="text" name="email" id="email" /></span>
			</p>
			<p class="message">
				<label for="message">Votre message&nbsp;:</label><br />
				<span class="message"><textarea name="message" id="message"></textarea></span>
			</p>
			<p class="envoyer"><input type="submit" value="Envoyer" /></p>
		</form>
	</div>
</div>


1 réponse

Réponse 1 / 1
SweetRiver Messages postés 102 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 22 novembre 2016 6
2 août 2013 à 22:45
Bonjour,

Utilise ce code (avec enter/leave au lieu de over/out), cela devrait résoudre le souci : 

<div class="contact" id="contact" onmouseenter="javascript:deployer();" onmouseleave="javascript:reployer();">

@+
0
mbu725 Messages postés 21 Date d'inscription vendredi 3 juillet 2009 Statut Membre Dernière intervention 3 août 2013 1
3 août 2013 à 19:48
Heu... ce n'est pas standard ça. Ça ne marche que dans Internet Explorer.
0
SweetRiver Messages postés 102 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 22 novembre 2016 6
Modifié par SweetRiver le 3/08/2013 à 23:46
Bien vu mbu, j'avais oublié cette sélectivité, my mistake.
Cela marcherait toutefois également sous Firefox et Opera mais pas avec Safari, ni Chrome :( )

Donc voici une version full jQuery en remplacement : 

<!doctype html>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(window).load(function () {
 $('.contact').mouseenter(function() {deployer()}).mouseleave(function() {reployer()});
});

 function deployer() {
  $('.contact').animate({
   width: '350px',
   height: '350px',
   background: '#fff'
  });
  // $('.contact img').attr("src","images/contact/aro-on.png");
 }
 function reployer() {
  $('.contact').animate({
   width: '100px',
   height: '100px',
   background: '#fff'
  });
  // $('.contact img').attr("src","images/contact/aro-off.png");
 }
</script>

<style type="text/css">
 .contact, .contact:hover { cursor: pointer; }
 .contact { 
  width: 100px; height: 100px; 
  position: fixed; top: 5px; right: 5px; 
  border: solid red 1px; 
  margin: 0; padding: 0; 
  overflow: hidden; 
  font-family: 'Lucida Grande', Arial; 
 }
 .contact img { position: absolute; top: 0; right: 0; border: none; margin: 0; padding: 0; }
 .contact .manual { position: absolute; top: 0; right: 100px; border: none; margin: 0; padding: 0; }
 .contact .manual p { width: 230px; padding: 10px; font-size: 9pt; margin: 0; text-align: justify; }
 .contact .form { width: 330px; padding: 10px; font-size: 9pt; position: absolute; top: 110px; right: 0; }
 .contact .form p { margin: 0; padding: 0; }
 .contact .form label { font-weight: bolder; line-height: 20px; }
 .contact .form span.email { line-height: 30px; }
 .contact .form #email { width: 100%; height: 30px; }
 .contact .form #message { width: 100%; height: 100px; }
 .contact .form p.envoyer input { 
  width: 100px; height: 35px;
  background: #000; color: #fff; 
  font-weight: bolder;  
  border: none; 
  margin: 0; padding: 0; 
 }
 hr { width: 330px; margin: 10px; position: absolute; top: 100px; right: 0; }
</style>

<div class="contact" id="contact">
 <img src="http://idealpix.fr/images/image_arobase.png" />
 <div class="manual">
  <p>Vous pouvez nous envoyer un message ou un commentaire pour nous donner votre avis ou faire de propositions pour améliorer votre site... Utilisez le formulaire ci-dessous</p>
 </div>
 <hr />
 <div class="form">
  <form method="post" action="contact.php">
   <p class="email">
    <label for="email">Votre adresse e-mail :</label><br />
    <span class="email"><input type="text" name="email" id="email" /></span>
   </p>
   <p class="message">
    <label for="message">Votre message :</label><br />
    <span class="message"><textarea name="message" id="message"></textarea></span>
   </p>
   <p class="envoyer"><input type="submit" value="Envoyer" /></p>
  </form>
 </div>
</div>


@+
0
Fetide68 Messages postés 738 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 26 avril 2024 32
26 août 2013 à 17:08
Perfekt ;)

Danke please !
0
SweetRiver Messages postés 102 Date d'inscription jeudi 4 août 2011 Statut Membre Dernière intervention 22 novembre 2016 6
2 sept. 2013 à 18:31
:-]

@+
0

Discussions similaires

jquery: refresh element enfant après ajax
snipchain -
snipchain -

2 réponses
Redirection Jquery onclick
Vitaly58 -
Vitaly58 -

4 réponses
jQuery & Regex
ameb2908 -
Whismeril -

3 réponses
Refresh div
Utilisateur anonyme -
Utilisateur anonyme -

11 réponses
Problème de jquery sur mozilla
mocoye -
animostab -

3 réponses