Problème avec du jQuery

Résolu

Fetide68 Messages postés 745 Date d'inscription Statut Membre Dernière intervention -
SweetRiver Messages postés 102 Date d'inscription Statut Membre Dernière intervention - 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>

Afficher la suite

A voir également:

Problème avec du jQuery
Redirection Jquery onclick ✓ - Forum Javascript
Jquery refresh dom ✓ - Forum Javascript
Probleme de scope en jQuery. je conprend pas, ✓ - Forum Javascript
Afficher et cacher en jquery ✓ - Forum Javascript
La faille csrf en jquery ? - Forum Javascript

1 réponse

Réponse 1 / 1

SweetRiver Messages postés 102 Date d'inscription Statut Membre Dernière intervention 6

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();">

mbu725 Messages postés 21 Date d'inscription Statut Membre Dernière intervention 1

Heu... ce n'est pas standard ça. Ça ne marche que dans Internet Explorer.

SweetRiver Messages postés 102 Date d'inscription Statut Membre Dernière intervention 6

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>

Fetide68 Messages postés 745 Date d'inscription Statut Membre Dernière intervention 32

Perfekt ;)

Danke please !

SweetRiver Messages postés 102 Date d'inscription Statut Membre Dernière intervention 6

:-]

@+

Discussions similaires

Problème requête Ajax avec jquery

Probleme de cohabitation de jquery

jQuery & Regex

jquery submit

jQuery non interprété

Votre réponse

Discussions similaires