jQuery - onclick page de diapositive si élément non visible

Question

J'ai une liste déroulante jQuery pour afficher une div 500px en hauteur. Le problème est que les liens pour montrer cette div sont au-dessus du pli de la page, et la div dropdown qui s'estompe dans les spectacles ci-dessous le pli.

J'ai fait des expériences avec scroll.to pour déplacer la page vers le bas si la nouvelle div n'est pas visible (mais laissant l'utilisateur où elle est si elle est complètement visible) - malheureusement sans succès.

Le code d'origine (ce qui fonctionne bien, mais pourrait probablement être simplifié) est la suivante:

// Homepage Theme Details Panel 

// Expand Panel 

$("#theme-1").click(function(){ 

    if ($("#theme-1-content").is(":hidden")) { 

    if ($("#theme-details-wrap").is(":hidden")) { 

    $("#theme-1-content").fadeIn(2000); 

    $("#theme-details-wrap").slideDown(2000); 

    $('#slider-content a#theme-1').addClass('theme-active'); 

    } else { // theme-details-wrap is open 

    $("#theme-2-content").hide(); 
    $("#theme-3-content").hide(); 
    $("#theme-4-content").hide(); 
    $("#theme-5-content").hide(); 
    $("#theme-6-content").hide(); 

    $("#theme-1-content").fadeIn(2000); 

    $('#slider-content a').removeClass('theme-active'); 
    $('#slider-content a#theme-1').addClass('theme-active'); 
    return false; 

    } 

    } else { // theme-1-content is shown so close 

    $("#theme-details-wrap").slideUp(1000); 
    $("#theme-1-content").fadeOut(1000); 

    $('#slider-content a').removeClass('theme-active'); 

    } 

}); 

$("#theme-2").click(function(){ 

    if ($("#theme-2-content").is(":hidden")) { 

    if ($("#theme-details-wrap").is(":hidden")) { 

    $("#theme-2-content").fadeIn(2000); 

    $("#theme-details-wrap").slideDown(2000); 

    $('#slider-content a#theme-2').addClass('theme-active'); 

    } else { // theme-details-wrap is open 

    $("#theme-1-content").hide(); 
    $("#theme-3-content").hide(); 
    $("#theme-4-content").hide(); 
    $("#theme-5-content").hide(); 
    $("#theme-6-content").hide(); 

    $("#theme-2-content").fadeIn(2000); 

    $('#slider-content a').removeClass('theme-active'); 
    $('#slider-content a#theme-2').addClass('theme-active'); 
    return false; 

    } 

    } else { // theme-2-content is shown so close 

    $("#theme-details-wrap").slideUp(1000); 
    $("#theme-2-content").fadeOut(1000); 

    $('#slider-content a').removeClass('theme-active'); 

    } 

}); 

$("#theme-3").click(function(){ 

    if ($("#theme-3-content").is(":hidden")) { 

    if ($("#theme-details-wrap").is(":hidden")) { 

    $("#theme-3-content").fadeIn(2000); 

    $("#theme-details-wrap").slideDown(2000); 

    $('#slider-content a#theme-3').addClass('theme-active'); 

    } else { // theme-details-wrap is open 

    $("#theme-1-content").hide(); 
    $("#theme-2-content").hide(); 
    $("#theme-4-content").hide(); 
    $("#theme-5-content").hide(); 
    $("#theme-6-content").hide(); 

    $("#theme-3-content").fadeIn(2000); 

    $('#slider-content a').removeClass('theme-active'); 
    $('#slider-content a#theme-3').addClass('theme-active'); 
    return false; 

    } 

    } else { // theme-3-content is shown so close 


    $("#theme-details-wrap").slideUp(1000); 
    $("#theme-3-content").fadeOut(1000); 

    $('#slider-content a').removeClass('theme-active'); 

    } 

}); 

$("#theme-4").click(function(){ 

    if ($("#theme-4-content").is(":hidden")) { 

    if ($("#theme-details-wrap").is(":hidden")) { 

    $("#theme-4-content").fadeIn(2000); 

    $("#theme-details-wrap").slideDown(2000); 

    $('#slider-content a#theme-4').addClass('theme-active'); 

    } else { // theme-details-wrap is open 

    $("#theme-1-content").hide(); 
    $("#theme-2-content").hide(); 
    $("#theme-3-content").hide(); 
    $("#theme-5-content").hide(); 
    $("#theme-6-content").hide(); 

    $("#theme-4-content").fadeIn(2000); 

    $('#slider-content a').removeClass('theme-active'); 
    $('#slider-content a#theme-4').addClass('theme-active'); 
    return false; 

    } 

    } else { // theme-4-content is shown so close 

    $("#theme-details-wrap").slideUp(1000); 
    $("#theme-4-content").fadeOut(1000); 

    $('#slider-content a').removeClass('theme-active'); 

    } 

}); 

$("#theme-5").click(function(){ 

    if ($("#theme-5-content").is(":hidden")) { 

    if ($("#theme-details-wrap").is(":hidden")) { 

    $("#theme-5-content").fadeIn(2000); 

    $("#theme-details-wrap").slideDown(2000); 

    $('#slider-content a#theme-5').addClass('theme-active'); 

    } else { // theme-details-wrap is open 

    $("#theme-1-content").hide(); 
    $("#theme-2-content").hide(); 
    $("#theme-3-content").hide(); 
    $("#theme-4-content").hide(); 
    $("#theme-6-content").hide(); 

    $("#theme-5-content").fadeIn(2000); 

    $('#slider-content a').removeClass('theme-active'); 
    $('#slider-content a#theme-5').addClass('theme-active'); 
    return false; 

    } 

    } else { // theme-5-content is shown so close 


    $("#theme-details-wrap").slideUp(1000); 
    $("#theme-5-content").fadeOut(1000); 

    $('#slider-content a').removeClass('theme-active'); 

    } 

}); 

$("#theme-6").click(function(){ 

    if ($("#theme-6-content").is(":hidden")) { 

    if ($("#theme-details-wrap").is(":hidden")) { 

    $("#theme-6-content").fadeIn(2000); 

    $("#theme-details-wrap").slideDown(2000); 

    $('#slider-content a#theme-6').addClass('theme-active'); 

    } else { // theme-details-wrap is open 

    $("#theme-1-content").hide(); 
    $("#theme-2-content").hide(); 
    $("#theme-3-content").hide(); 
    $("#theme-4-content").hide(); 
    $("#theme-5-content").hide(); 

    $("#theme-6-content").fadeIn(2000); 

    $('#slider-content a').removeClass('theme-active'); 
    $('#slider-content a#theme-6').addClass('theme-active'); 
    return false; 

    } 

    } else { // theme-6-content is shown so close 

    $("#theme-details-wrap").slideUp(1000); 
    $("#theme-6-content").fadeOut(1000); 

    $('#slider-content a').removeClass('theme-active'); 

    } 

}); 

// Collapse Button 
$(".collapse").click(function(){ 

    $("#theme-details-wrap").slideUp(1000); 

    $("#theme-1-content").fadeOut(1000); 
    $("#theme-2-content").fadeOut(1000); 
    $("#theme-3-content").fadeOut(1000); 
    $("#theme-4-content").fadeOut(1000); 
    $("#theme-5-content").fadeOut(1000); 
    $("#theme-6-content").fadeOut(1000); 

    $('#slider-content a').removeClass('theme-active'); 
}); 

}); 

Comment pourrais-je ajouter le code pour obtenir le # thème-détails-wrap div à afficher sinon en vue ?

Un grand merci,

James

Answer 1

Qu'est-ce que le plugin avez-vous utilisé pour faire défiler la fenêtre du navigateur?

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

Exemple de code de défilement de la fenêtre du navigateur à l'élément matched:

$.scrollTo('#theme-details-wrap'); 

Si vous voulez vérifier si l'élément est visible avant de faire défiler la fenêtre, consultez le code de ce fil:

Check if element is visible after scrolling

function isScrolledIntoView(elem) 
{ 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)); 
} 

Vous pouvez modifier la condition dans la dernière ligne pour vous assurer que l'élément est entièrement visible - sinon, vous pouvez faire défiler la fenêtre du navigateur.

Answer 2

Cette fonction:

$.fn.scrollView = function() { 
    return this.each(function() { 
     $('html, body').animate({ 
      scrollTop: $(this).offset().top 
     }, 1000); 
    }); 
    } 

Appelé comme ceci:

$('#theme-details-wrap').scrollView();