jQuery - onclick slide page if element not visible

Question

Hi,

I have a jQuery dropdown to display a div 500px in height. The problem is that the links to show this div are above the page fold, and the dropdown div which fades in shows below the fold.

I've been experimenting with scroll.to to move the page down if the new div is not in view (but leaving the user where they are if it is completely visible) - sadly without success.

The original code (which works well but could probably be simplified) is this:

 // 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');
 });

});

How could I add the code to get the #theme-details-wrap div to be shown if not in view?

Many thanks,

James

Answer 1

What did plugin did you use to scroll the browser window?

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

Sample code scrolling the browser window to the matched element:

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

If you want to check if the element is visible before scrolling the window, check out the code from this thread:

http://stackoverflow.com/questions/487073/jquery-check-if-element-is-visible-after-scroling

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));
}

You can modify the condition in the last line to make sure that the element is fully visible - if not, you can scroll the browser window.