J'ai deux divs distincts dans le site, je travaille sur ce spectacle et se cacher lorsque l'utilisateur clique sur un lien (il y a un lien pour chaque div). La deuxième div et le lien ont été ajoutés hier. Quand il n'y avait qu'un div et un lien, il n'y avait pas de problèmes.jquery .show() plusieurs "position: fixed" divs numéro
Le problème que je rencontre est que lorsque je clique sur le lien pour montrer la deuxième div rien ne se passe. Cependant, quand je clique sur le lien pour montrer la première div, les deux apparaissent. J'ai essayé de changer l'ordre du balisage, et quand le deuxième div est situé avant le premier div dans le balisage, le contraire se produit - le premier div ne montre pas quand son lien est cliqué, et les deux apparaissent quand le deuxième lien est cliqué.
Puisque ces deux divs utilisent un positionnement fixe et glissent depuis le bord droit de l'écran, je pensais que le chevauchement faisait que le div ne s'affichait pas. Mais j'ai augmenté l'espace entre les divs pour éviter le chevauchement et le problème demeure. MISE À JOUR: J'ai également testé l'un des panneaux à être fixé sur la gauche de l'écran pour exclure totalement le chevauchement de la cause du problème, mais le problème persiste.
Existe-t-il un type de paramètre ou une fonction de rappel que je peux envoyer dans la fonction show pour forcer jQuery à afficher un élément?
Toute aide sera grandement appréciée.
Voici le javascript:
$(document).ready(function(){
// Initialize Contact Us panel
$('#contacton').css('position', 'fixed');
$('#contacton').css('bottom', '60px');
$('#contacton').css('right', '0');
$('#contacton').css('overflow', 'visible');
$('#contacton').hide();
$('#contactoff').show();
var contacting = false;
//Initialize Newsletter Subscription panel
$('#subscribeon').css('position', 'fixed');
$('#subscribeon').css('bottom', '270px');
$('#subscribeon').css('right', '0');
$('#subscribeon').css('overflow', 'visible');
$('#subscribeon').hide();
$('#subscribeoff').show();
var subscribing = false;
// Expand Newsletter Subscription panel
$('#subscribeoff').click(function() {
if (subscribing) {
// Error - this should not happen as tab is hidden
} else {
subscribing = true;
$('#subscribeoff').hide();
$('#subscribeon').show('fast');
return false;
}
});
// Collapse Newsletter Subscription panel
$('#subscribeontab').click(function() {
if (!subscribing) {
// Error - this should not happen as tab is hidden
} else {
subscribing = false;
$('#subscribeon').hide('fast');
$('#subscribeoff').show();
return false;
}
});
// Collapse Contact Us panel
$('#contactontab').click(function() {
if (!contacting) {
// Error - this should not happen as tab is hidden
} else {
contacting = false;
$('#contacton').hide('fast');
$('#contactoff').show();
return false;
}
});
// Expand Contact Us panel
$('#contactoff').click(function() {
if (contacting) {
// Error - this should not happen as tab is hidden
} else {
contacting = true;
$('#contactoff').hide();
$('#contacton').show('fast');
return false;
}
});
});
Le balisage de ces sections se trouve à la fin de la partie du corps. Voici le balisage:
<body>
<div id="header_section">
...
</div>
<div id="nav_menu">
..
</div>
<div id="body_wrap">
...
</div>
<div id="footer">
...
</div>
<div id="subscribeoff">
<a title="Subscribe to our FREE Newsletter" href="#"><img id="subscribeimg" src="/Epic/Boxes/subscribe-free-real-estate-newsletter-off.png" width="30" height="55" alt="Epic Properties Real Estate Newsletter" /></a>
</div>
<div id="contactoff">
<a title="Open Contact Us Panel" href="#"><img id="contactimg" src="/Epic/Boxes/contactoff.png" width="30" height="100" alt="Contact Us" /></a>
</div>
<div id="subscribeon">
<div id="subscribeformwrap">
<div id="subscribeinfo">
<p class="subscribetext">Sign up for the Epic Newsletter for the latest trends in the Valley's luxury real estate market.</p>
<p class="subscribetext" id="subscribelastp">If you are a member of Epic Properties you can subscribe to the Epic Newsletter by accessing your account.</p>
</div> <!-- end subscribeinfo -->
<div id="subscribeform">
<form id="newsletterform" name="newsletterform" method="post" action="/">
<fieldset class="subscribefields">
<label for="fname">FIRST NAME</label>
<input type="text" id="fname" />
</fieldset>
<fieldset class="subscribefields">
<label for="lname">LAST NAME:</label>
<input type="text" id="lname" />
</fieldset>
<fieldset class="subscribefields">
<label for="email">E-MAIL:</label>
<input type="text" id="email" />
</fieldset>
<fieldset class="subscribefields" id="subscribebtn">
<input type="submit" name="send" id="subscribebutton" value="Sign Up" />
</fieldset>
</form>
</div> <!-- end subscribeform -->
<div id="subscribeontab">
<a title="Close Newsletter Panel" href="#"><img id="subscloseimg" src="/Epic/Boxes/subscloseoff.png" width="30" height="55" alt="Close Newsletter Panel" /></a>
</div> <!-- end subscribeontab -->
</div> <!-- end subscribeon -->
<div id="contacton">
<div id="contactformwrap">
<div id="contactinfo">
<h5 class="contacttitle">Contact Us</h5>
<p class="contacttype">Phone:</p>
<p class="contacttext">000.000.0000</p>
<p class="contacttype">Fax:</p>
<p class="contacttext">000.000.0000</p>
<p class="contacttext" id="vcard"><a title="Epic Properties vCard" href="#">Download our vCard</a></p>
</div> <!-- end contactinfo -->
<div id="contactform">
<h5 class="contacttitle" id="msgtitle">Send a Message</h5>
<form id="messageform" name="messageform" method="post" action="/">
<fieldset class="contactfields">
<label for="name">NAME:</label>
<input type="text" id="name" />
</fieldset>
<fieldset class="contactfields">
<label for="email">E-MAIL:</label>
<input type="text" id="email" />
</fieldset>
<fieldset class="contactfields">
<label for="email">MESSAGE:</label>
</fieldset>
<textarea id="contactmessage"></textarea>
<fieldset class="contactfields" id="sendmsgbtn">
<input type="submit" name="send" id="sendmsgbutton" value="Send Message" />
</fieldset>
</form>
</div> <!-- end contactform -->
<div id="contactontab">
<a title="Close Contact Us Panel" href="#"><img id="closeimg" src="/Epic/Boxes/closeoff.png" width="30" height="100" alt="Close Contact Us Panel" /></a>
</div> <!-- end contactontab -->
</div> <!-- end contacton -->
</body>
</html>
Et enfin voici le CSS:
#subscribeoff {
display: none;
position: fixed;
bottom: 270px;
right: 0;
}
#subscribeoff a img {
border: none;
}
#subscribeon {
display: block;
position: fixed;
bottom: 270px;
right: 0;
background: #000;
background: rgba(0, 0, 0, .8);
}
#subscribeontab {
position: absolute;
bottom: 0;
left: -30px;
}
#subscribeontab a img {
border: none;
}
vous avez raison. J'ai également besoin de fermer le div de contactformwrap. Merci David! – pocketazes