Comment ajouter une "barre de poignée" à un div coulissant

Question

J'ai une petite page de démarrage et j'ai une div à l'échelle du navigateur qui agit comme un wrapper et possède un div à l'intérieur de #wrapper qui est attaché à un événement $.click(); pour faire glisser le wrapper div pour afficher la photo d'arrière-plan du navigateur. Je veux implémenter un petit bouton/lien qui va glisser dans le coin inférieur droit après que le div wrapper soit caché.

Je sais que c'est probablement principalement CSS, mais j'ai besoin d'aide.

Merci d'avance pour votre aide! PS: Utilisation de jQuery en tant que cadre.

Answer 1

La clé est dans le rappel de l'animation de #wrapper. J'ai supposé que:

1. le contenu entier de la page est à l'intérieur du # wrapper, et l'a utilisé pour calculer la hauteur du contenu.
2. Il est possible que le contenu soit plus élevé que la fenêtre du navigateur. Vous ne prendrez pas en charge IE6 et vous pourrez ainsi utiliser position: fixed;.

CSS:

#toggler { 
    position: fixed; 
    width: 20px; 
    height: 20px; 
    left: 0; 
    display: none; 
    } 

JS:

jQuery(document).ready(function() { 
    var windowHeight = jQuery(window).height(), 
     togglerHeight = jQuery('#toggler').height(), 
     togglerTopPosition = windowHeight - togglerHeight; 

    jQuery(#toggler).css('top', togglerTopPosition + 'px'); 

    jQuery('#wrapper').click(function() { 
     // take care of hiding the #wrapper 
     jQuery('#wrapper').animate({ 
      yourSettings, 
      yourDuration, 
      function() { jQuery(#toggler).show(); } // callback 
     }); 
    }); 

    jQuery('#toggler').click(function() { 
     jQuery(this).hide(); 
     jQuery('#wrapper').animate({...}); 
    }); 
}); 

Comme vous pouvez le deviner, #toggler est le petit bouton/lien. Style comme vous le souhaitez, et changer la largeur et la hauteur au besoin.