Show/hide class débutant

adrienquelet
Javascript

Bonjour à tous,

Je cherche à apprendre Jquery et je bloque actuellement sur un problème sûrement minime pour beaucoup.

Je possède un slider fullscreen en background sur ma page d'accueil avec un texte logo par dessus sur lequel je clique pour cacher le slider, ou l'afficher.

Voici ce que j'aimerais obtenir : [http://www.johnpawson.com]()

Mon code semble fonctionner. Le seul problème étant que, lorsque je vais sur les autres pages de mon site, mon slider en background s'affiche par dessus tous les autres ! En effet, ma div slider se trouve dans mon header car il est contenu dans la div qui enveloppe tout le site. Vous vous en doutez, j'aimerais ne plus voir ce slider en fullscreen sur l'ensemble de mes autres pages. De même, je cherche à connaître l'include php pour pointer directement vers ma page d'acceuil en cliquant sur ce logo. Pour l'instant, j'ai laissé # dans mon href. J'imagine qu'il faut créer une double fonction : une qui active la classe si je suis en page d'accueil et une autre qui me ramène simplement en page d'accueil lorsque je suis sur les autres pages. Voici le html :

<div id="conteneur">

    <div id="full-width-slider" class="royalSlider rsDefault">
 <img src="<?php bloginfo('stylesheet_directory'); ?>/images/perron_01.jpg" />
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/perron_01.jpg" />
    </div>

<header>
    <div id="logo">
    <a href="#">Adequat</a>
    </div>

Mon script :

<script>
$('#logo').click(function(event) {
$('#full-width-slider').toggle();
$('#full-width-slider').removeClass([full-width-slider]);
event.preventDefault();
});
</script>

Voilà, j'imagine que c'est pas grand chose mais je reste bloqué depuis des heures sans comprendre. Je vous remercie d'avance pour votre aide.

Adrien

2 réponses

snap

Hello,
Déjà full-width-slider est une classe ou un id? car quand tu fait $('#full-width-slider').removeClass([full-width-slider]); ça suggère que c'est les deux a la fois.

adrienquelet
Auteur

Bonsoir,

Problème résolu en partie grâce à cette fonction :

$(document).ready(function() {
$('#logo a').css('color','white');
$('#logo').click(function(event) {

    if ($('#fullscreen-slider').is(':visible')) {

        $('#fullscreen-slider').hide();
        $('#logo a').css('color','#333');

    } else {

        $('#fullscreen-slider').show();
        $('#logo a').css('color','white');

    }

    event.preventDefault();

});
});

Nouveau problème : j'aimerais que ma div "#logo" soit affichée en blanc avant l'évènement "clic" uniquement sur ma page d'accueil et pas sur les autres pages ! Je précise que mon fullscreen se trouve dans le header wordpress.