Faire apparaitre une page et disparaitre une autre

Question

wklm100

8 Dec 2010 à 22:01

Bonjour

Je suis en train de construire mon site. J'ai fait un menu au centre de ma page. Lorsque je clique sur une des rubriques du menu je fais apparaitre sur la gauche une page avec l'effet fadein.

Cela fonctionne. Si je clique sur une autre rubrique la page de cette nouvelle rubrique s'affiche par dessus la précédente mais la première ne se ferme pas avec la fonction fadout.

je voudrais savoir comment programmer en jQuery pour que lorsque je clique sur une rubrique du menu cela me ferme automatiquement avec la fonction fadeout la ou les pages restées ouvertes Autrement dit je voudrais, lorsque je clique sur une rubrique du menu jQuery me ferme, avec la fonction fadeeout la page ouverte et me fasse apparaitre avec fadein la page correspondant à la rubrique cliquée en dernier.

Je joins mon code actuel :

var pages = function()
{
var nav = $( 'ul#nav li a' );

nav.click( function()
{

$( this ).parent().toggleClass( 'selected' );
if ( $( $( this ).attr( 'href' ) + '-page' ).is(":hidden")) {
$( $( this ).attr( 'href' ) + '-page' ).fadeIn( 1000 );

} else {

$( $( this ).attr( 'href' ) + '-page' ).fadeOut( 1000 );
}

});

};

$( window ).load( pages );

Smiley decu

Par avance merci pour vos réponses

foxprod

9 Dec 2010 à 09:46

Salut à toi,

Si j'ai bien compris, essaye plutot ça :


$(document).ready(function() { //Quand tous les éléments du DOM ont été chargé
	$( 'ul#nav li a' ).click(function(e) { //A chaque clique sur un lien de ton menu
		e.preventDefault(): //On stop l'événement click
		$('.page-active').fadeOut(1000); //On cache la page active
		$( $( this ).attr( 'href' ) + '-page' ).fadeIn( //On affiche la page sur laquelle on a cliqué
									1000, 
									function() { 
										$(this).addClass('page-active'); //La page qui s'affiche va prendre la classe 'page-active' 
									} 
								);
	});
});

wklm100

9 Dec 2010 à 16:43

Tout d'abord un grand merci pour avoir eu la gentillesse de me répondre.

J'ai remplacé ton code par celui que j'avais sur ma page mais, cela ne fonctionne pas, aucune page ne s'affiche.

Qu'ai je encore mal fait ?

Smiley decu

foxprod

9 Dec 2010 à 16:48

Il faudrait que tu me montres le code HTML de ta page.

Ou sinon remplace ça :

$( $( this ).attr( 'href' ) + '-page' )

par ça :

$('#'+ $( this ).attr( 'href' ) + '-page' )

wklm100

9 Dec 2010 à 17:07

Je t'envoie le code HTML et les CSS de la page : Merci

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>OCatherine Brettes coach de troubles bipolaires</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index, follow" />
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<link type="text/css" rel="stylesheet" href="css/site.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>

<body>

<div id="main">
<div class="inner">

<h1><a href="#" id="logo" title="bipolaires.info">Catherine Brettes est une psychanalyste spécialisée dans les troubles bipolaires</a></h1>

<ul id="nav">
<li id="star-top"></li>
<li><a href="#about">Qui<span> suis-je ?</span></a></li>
<li><a href="#works"><span>mon</span> expérience</a></li>
<li><a href="#trouble"><span>mon</span> super</a></li>
<li id="star-bot"></li>
</ul>

<blockquote><p>J'assiste <em>&</em> accompagne<br /><em>les troubles bipolaires</em>, pour les aider à comprendre et accepter leur maladie <em>naturellement</em> et sur le plan social <em>changer le regard</em> sur ce <br />trouble.</p></blockquote>

<div id="footer"><a href="mailto:catherine.brettes@mac.com">catherine.brettes@mac.com</a><br />2003 — 2010 © Osvaldas Valutis</div><br /><br /><br />

<br /><br /><br /><br />
<div id="menuV">

<ul>

<li><a href="#">Il était une fois</a></li>
<li><a href="#">Dans les bois</a></li>
<li><a href="#">Un petit chat</a></li>
<li><a href="#">Link1</a></li>

</ul>

</div>

</div>
</div>



<div class="page" id="works-page">
<div class="in"><div class="inner clearfix">

<h2 class="align-right">portfolio</h2>

<ul class="portfolio clearfix">

<li><p>Je suis le plus grand psychanalyste, coach. <em>&</em> J'utilise les méthodes les plus avancées pour accompagner les personnes atteintes de troubles bipolaires— <a href="/">Ma connaissance</a>. </p></li>

<li>Je suis le plus beau de tous les psychanalystes, coach. <em>&</em> J'utilise les méthodes— <a href="/"> Ma connaissance</p></a></li>

<li><a href="/"><img src="tmp/tmp1.jpg" alt="" /></a></li>
<li><a href="/"><img src="tmp/tmp1.jpg" alt="" /></a></li>


</ul>

<ul id="portfolio-nav">
<li id="pn-prev"><a href="/" title="previous">previous</a></li>
<li id="pn-info"><a href="/"><em><strong>2</strong> of 5</em></a></li>
<li id="pn-next"><a href="/" title="next">next</a></li>
</ul>

</div></div>
</div>



<div class="page" id="trouble-page">
<div class="in"><div class="inner clearfix">

<h2 class="align-right">portfolio</h2>

<ul class="portfolio clearfix">

<li><p>Je suis le plus grand psychanalyste, coach. <em>&</em> J'utilise les GRANDS BALOURS atteintes de troubles bipolaires— <a href="/">Ma connaissance</a>. </p></li>

<li>Je suis le plus beau de tous les psychanalystes, coach. <em>&</em> J'utilise les méthodes— <a href="/"> Ma connaissance</p></a></li>

<li><a href="/"><img src="tmp/tmp1.jpg" alt="" /></a></li>
<li><a href="/"><img src="tmp/tmp1.jpg" alt="" /></a></li>


</ul>

<ul id="portfolio-nav">
<li id="pn-prev"><a href="/" title="previous">previous</a></li>
<li id="pn-info"><a href="/"><em><strong>2</strong> of 5</em></a></li>
<li id="pn-next"><a href="/" title="next">next</a></li>
</ul>

</div></div>
</div>



<div class="page page-right" id="about-page">
<div class="in"><div class="inner clearfix">

<h2>about</h2>
<img src="img/KT4.jpg" alt="Catherine Brettes" class="right" />
<p>Je suis <a href="http://"#">Catherine Brettes</a> psychanalyste, coach. <em>&</em> J'utilise les méthodes les plus avancées pour accompagner les personnes atteintes de troubles bipolaires— <a href="/"></a>. Ma connaissance approfondie de trouble me permet d'avoir d'excellents résultats.</p>

<h2>appelez moi</h2>
<script type="text/javascript">
var wengo_widget_u = (location.protocol=='https:'?'https://secure.wengo.com/widget.js':'http://www.wengo.fr/widget.js');
document.write('<scr'+'ipt type="text/javascript" src="'+wengo_widget_u+'?v=1&t=callbutton&si=1406302&sa=catherine_bret&w=flash_button_5&lng=fra&ac=Math.floor(Math.random()*99999999999"></scr'+'ipt>');
</script>
<a href="http://www.wengo.fr/" target="_blank">Un conseil ? Appelez-moi !</a>

<h2>contact</h2>
<p>You can catch me using email address which is on the site footer or using the contact form below:</p>

<form method="post" action="contact.php" class="clearfix">
<div class="left clearfix">
<input type="text" name="contact-name" value="Name" onfocus="if(this.value=='Name') this.value='';" onblur="if(this.value=='') this.value='Name';" class="f-text" />
<input type="text" name="contact-email" value="Email" onfocus="if(this.value=='Email') this.value='';" onblur="if(this.value=='') this.value='Email';" class="f-text" />
<div class="f-submit"><input type="submit" name="contact-submit" value="Send!" /></div>
</div>
<div class="right clearfix">
<textarea name="contact-message" onfocus="if(this.value=='Message') this.value='';" onblur="if(this.value=='') this.value='Message';">Message</textarea>
</div>
</form>

</div></div>
</div>

</body>

</html>

LE CODE CSS :

#main
{
width: 649px;
height: 100%;
text-align: center;
color: #c9b4ba;
background: transparent url('../img/main-bg.gif') repeat-y 0 0;
position: relative;
margin: 0 auto;
}
#main .inner
{
width: 242px;
min-height: 100%;
height: auto !important;
height: 100%;
background: transparent url('../img/main-bg.gif') repeat-y center 0;
position: relative;
z-index: 3;
margin: 0 auto;
}

#main em
{
color: #fff;
}

#main h1
{
padding: 70px 0 0;
}

a#logo
{
width: 240px;
height: 70px;
text-indent: -9999px;
background: transparent url('../img/logo.gif') no-repeat 0 0;
display: block;
margin: 0 auto;
}
a#logo:hover
{
background-position: 0 bottom;
}

ul#nav
{
background: transparent url('../img/nav-bg.gif') repeat-y 0 0;
margin: 40px 0 0;
}
li#star-top,
li#star-bot
{
height: 15px;
background: transparent url('../img/nav-stars.gif') no-repeat 0 0;
margin: 0 0 20px;
}
li#star-bot
{
background-position: 0 bottom;
margin: 20px 0 0;
}
ul#nav li { padding: 1px; }
ul#nav li a
{
font: italic normal 20px/normal Georgia, 'Times New Roman', Times, serif;
text-decoration: none;
text-shadow: 0 1px 0 #000;
position: relative;
z-index: 3;
color: #fff;
display: block;
}
ul#nav li a span
{
font-size: 28px;
font-family: Baskerville, Palatino, 'Palatino Linotype', Georgia, Serif;
color: #3b0314;
}
ul#nav li a:hover,
ul#nav li.selected a
{
font-size: 200%;
}

.page-active {

}
#main blockquote
{
background: transparent url('../img/quote-top.gif') no-repeat 0 0;
position: relative;
z-index: 3;
margin: 30px 15px 0;
}
#main blockquote p
{
line-height: 23px;
background: transparent url('../img/quote-bot.gif') no-repeat bottom right;
padding: 15px 0px;
margin: 0;
}

#footer
{
width: 100%;
font-size: 12px;
line-height: 17px;
color: #000;
background: transparent url('../img/footer.gif') no-repeat 0 0;
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
padding: 10px 0;
}

.page
{
width: 50%;
height: 100%;
text-align: right;
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.page .in
{
height: 100%;
background: #c6cece url('../img/page-bg.gif') repeat 0 0;
overflow: hidden;
margin: 0 122px 0 0;
}
.page .inner
{
width: 330px;
float: right;
height: 100%;
background: transparent url('../img/left-bg.gif') repeat-y right 0;
padding: 65px 50px 0 0;
}

.page h2
{
text-shadow: 0 1px 0 #fff;
background: transparent url('../img/heading-left.gif') no-repeat 0 0;
color: #830C2E;
padding: 5px 10px 10px 0;
margin: 30px -10px 0 -25px;
}
.page a:hover
{
font-style: italic;
color: #980d35;
}
.page form
{
}
.page form input,
.page form textarea
{
font: italic normal 16px/21px Baskerville, Palatino, 'Palatino Linotype', Georgia, Serif;
color: #c76c86;
clear: both;
float: left;
margin: 0 0 10px;
}
.page form input:focus,
.page form textarea:focus { color: #000; }

.page form input.f-text
{
width: 137px;
height: 24px;
background: transparent url('../img/form-sprite.gif') no-repeat 0 0;
padding: 4px 10px 0;
}
.page form input.f-text:focus { background-position: 0 -28px; }

.page form textarea
{
width: 137px;
height: 99px;
background: transparent url('../img/form-sprite.gif') no-repeat 0 -56px;
overflow: auto;
padding: 5px 10px;
}
.page form textarea:focus { background-position: 0 -165px; }

.page form .f-submit
{
background: transparent url('../img/form-sprite.gif') no-repeat 0 -274px;
display: inline;
float: right;
clear: both;
}
* html .page form .f-submit { float: left; }

.page form .f-submit input
{
width: auto;
height: 26px;
font-weight: bold;
text-align: center;
color: #fff;
background: transparent url('../img/form-sprite.gif') no-repeat right -300px;
padding: 0 10px;
margin: 0;
}
* html .page form .f-submit input { padding: 0; }

.page form .f-submit:hover { background-position: 0 -326px; }
.page form .f-submit input:hover { background-position: right -352px; }

.page ul.portfolio
{
}
.page ul.portfolio li
{
display: inline;
float: left;
margin: 22px;
border: 5px solid #c76c86;
}
/*.page ul.portfolio li a img { border: 5px solid #c76c86; }
.page ul.portfolio li a:hover img { border-color: #980d35; }*/

ul#portfolio-nav
{
height: 26px;
position: relative;
}
* html ul#portfolio-nav { margin: 22px 0 0; }

ul#portfolio-nav li
{
width: 100%;
font-size: 10px;
text-align: center;
position: absolute;
}
li#pn-info
{
left: 0;
z-index: 3;
}

li#pn-prev,
li#pn-next
{
width: 36px !important;
height: 26px;
text-indent: -9999px;
display: block;
left: 15px;
z-index: 4;
}
li#pn-next
{
right: 25px;
left: auto;
}
li#pn-prev a,
li#pn-next a
{
height: 100%;
background: transparent url('../img/portfolio-nav.gif') no-repeat 0 0;
display: block;
}
li#pn-next a { background-position: 0 bottom; }

li#pn-prev a:hover { background-position: right 0; }
li#pn-next a:hover { background-position: right bottom; }

.page-right
{
text-align: left;
left: auto;
right: 0;
}
.page-right .in
{
margin: 0 0 0 121px;
}
.page-right .inner
{
float: left;
background: transparent url('../img/right-bg.gif') repeat-y 0 0;
padding-right: 0;
padding-left: 50px;
}

.page-right h2
{
background: transparent url('../img/heading-right.gif') no-repeat right 0;
position: relative;
margin: 30px -25px 0 -10px;
padding-left: 10px;
}

#menuV a {
color:#3F9;
}

#menuV li a:hover {
color:white;
font-size:24px;
font-weight:600;

}
.navigation {

}

html
{
height: 100%;
padding: 0;
margin: 0;
}

body
{
height: 100%;
font: normal 13px/normal Helvetica, Tahoma, sans-serif;
letter-spacing: 0px;
line-height: 20px;
color: #334143;
background: #c6cece url('../img/bg.gif') repeat 0 0;
padding: 0;
margin: 0;
}

/* default settings */

ul, ol, li,
h1, h2, h3, h4, h5, h6,
p, span, em, pre, blockquote, abbr, acronym, a,
dl, dt, dd,
table, tr, th, td, thead, tbody, tfoot, caption,
form, fieldset, legend, input, textarea, select, button, label
{
font-size: 100%;
font-family: inherit;
font-weight: normal;
font-style: inherit;
line-height: inherit;
outline: 0;
border: 0;
padding: 0;
margin: 0;

}

h1,
h2,
h3,
h4,
h5,
h6
{
font: italic normal 30px/normal Baskerville, Palatino, 'Palatino Linotype', Georgia, Serif;
text-decoration: none;
color: #000;
margin: 0 0 10px;
}

a,
em
{
font-size: 135%;
font-family: Baskerville, Palatino, 'Palatino Linotype', Georgia, Serif;
font-style: italic;
text-decoration: none;
color: #000;
}
a { color: #000; } /* Couleur du texte quand on passe dessus*/
a:hover { font-style: normal; }
a img { border: none; }
small { font-size: 85%; }
big { font-size: 120%; }
em { font-style: italic; }
p { line-height: 23px; margin: 0 0 20px; }

table { border-collapse: separate; border-spacing: 0; }

ul { list-style-type: none; }

input.f-submit,
.f-submit input { cursor: pointer; }

img.left { border: 5px solid #c76c86; margin: 5px 15px 10px 0; }
img.right { border: 5px solid #c76c86; margin: 5px 0 10px 15px; }

.left { float: left !important; }
.right { float: right !important; }
.no-float { float: none !important; clear: both; }

.grey { color: #666 !important; }
.black { color: #000 !important; }
.wite { color: #fff !important; }
.blue { color: #225ea7 !important; }
.bordeaux { color: #830c2e !important; }

.small-caps { font-variant: small-caps !important; }
.no-underline { text-decoration: none !important; }

.align-left { text-align: left !important; }
.align-center { text-align: center !important; }
.align-right { text-align: right !important; }
.align-justify { text-align: justify !important; }

.no-border { border: none !important; }
.no-margin { margin: 0 !important; }

.cleaner { height: 0; line-height: 0; clear: both; }
.clear { clear: both; }

.clearfix:after
{
height: 0;
line-height: 0;
content: ".";
display: block;
clear: both;
visibility: hidden;
}

/* DEFINI LES TEXTES dans les BOITES DE LA PAGE DE GAUCHE */

.clearfix { display: inline-block;
font: normal /normal Baskerville, Palatino, 'Palatino Linotype', Georgia, Serif;

color:#000;
text-align:left;
}
/*
.clearfix a:hover { color:#39F;
font-family:Baskerville, Palatino, 'Palatino Linotype', Georgia, Serif;
font-style:italic;
}*/

html Smiley xmlns

.clearfix { display: block; }
* html .clearfix { height: 1%; }

foxprod

10 Dec 2010 à 14:27

Dans la console d'erreur de firefox ou firebug, as tu un message ou autre lorsque tu cliques sur un lien?

wklm100

10 Dec 2010 à 16:42

Merci de suivre le sujet.

Je l'ai testé sur safari et sur firefox mais quand je clique sur un des liens "Qui suis je " ou "mon experience" ou "mon super" rien ne se passe. Aucune action.

je ne me sert pas de la console d'erreur firefox ou firebug.

je travaille sous mac OSX 10.6.5

Je programme avec Dreamweaver CS5.

Je voudrais mettre plus de rubriques à mon menu (c'est la raison des liens inactif en vert !) et pouvoir faire apparaître dans la page de gauche des textes mais surtout pouvoir, en cliquant sur une des rubriques du menu, fermer la page ouverte et y substituer la page relative à la rubrique du menu cliquée et ainsi de suite. Actuellement je peux ouvrir une page en cliquant sur une rubrique mais je dois recliquer sur la même rubrique pour la fermer puis cliquer sur la rubrique suivante pour ouvrir la page correspondante. Voilà, je ne sais pas si je suis très clair. Si tu es en France tu peux me donner un numéro de phone et je pourrai t'appeler pour gagner du temps.

foxprod

10 Dec 2010 à 18:14

J'avais une petite erreur dans mon code (un : à la place d'une ;)

Voilà le code corrigé :


$(document).ready(function() { //Quand tous les éléments du DOM ont été chargé 
    $( 'ul#nav li a' ).click(function(e) { //A chaque clique sur un lien de ton menu 
        e.preventDefault(); //On stop l'événement click 
        $('.page-active').fadeOut(1000); //On cache la page active 
        $( $( this ).attr( 'href' ) + '-page' ).fadeIn( //On affiche la page sur laquelle on a cliqué 
                                    1000,  
                                    function() {  
                                        $(this).addClass('page-active'); //La page qui s'affiche va prendre la classe 'page-active'  
                                    }  
                                ); 
    }); 
});

Sujet clos