jQuery - onclick slide page if element not visible

Question

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

Dude. Have you noticed how every one of those "theme" blocks of code is almost exactly the same? Maybe you'd save some typing and debugging by collapsing them into a single function that you can use 6 times, rather than 6 near-copies of the same thing. — Pointy, Feb 26 '10 at 12:58
related question: http://stackoverflow.com/questions/487073/jquery-check-if-element-is-visible-after-scroling jQuery - Check if element is visible after scroling — dpavlin, Apr 03 '10 at 18:36

score 2 · Answer 1 · edited May 23 '17 at 12:07

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:

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

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.

score 0 · Answer 2 · answered Nov 21 '12 at 11:12

This function:

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

Called like this:

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

jQuery - onclick slide page if element not visible

2 Answers2