Problème avec du jQuery

Résolu

Fetide68 Messages postés 816 Statut Membre -
SweetRiver Messages postés 110 Statut Membre - 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 110 Statut Membre 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 22 Statut Membre 1

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

SweetRiver Messages postés 110 Statut Membre 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 816 Statut Membre 32

Perfekt ;)

Danke please !

SweetRiver Messages postés 110 Statut Membre 6

:-]

@+

Discussions similaires

Problème requête Ajax avec jquery

Probleme de cohabitation de jquery

jQuery & Regex

jquery submit

jQuery non interprété

Problème avec du jQuery

1 réponse

Votre réponse

Discussions similaires

Newsletters