1

I have a web page that shows a seating chart (where each seat is a div). In some cases the page is very big so you might have to scroll either right or down to find your seat.

I have a link that includes a the seat name (which is the id of the div of your seat). I would like have some jquery code that "finds" and "hightlights" your seat when the page loads.

What is the best way, when a page loads, to scroll to have a certain div be at the center of the page. Once its there I can then do something like highting the div temporarily to make it stand out.

leora
  • 188,729
  • 360
  • 878
  • 1,366
  • What have you tried? Check http://stackoverflow.com/questions/8579643/simple-jquery-scroll-to-anchor-up-or-down-the-page/8579673#8579673 – dknaack Nov 06 '14 at 12:15
  • what have you tried so far ? look at [scrollTop](http://api.jquery.com/scrolltop/) and try getting to postion with offset. For highlighting just add a css-class via jQuery – empiric Nov 06 '14 at 12:16
  • Check this : http://stackoverflow.com/questions/4198041/jquery-smooth-scroll-to-an-anchor – kupendra Nov 06 '14 at 12:17

1 Answers1

1

Working Example: http://jsfiddle.net/wonq8es4/3/

The example above scrolls to a random div on the page.

// Get a random div or seat
var seat = $('#div' + randInt.toString());
// Slowly scroll to the top of the div element
$('html,body').animate({
    scrollTop: seat.offset().top-20, 
    scrollLeft: seat.offset().left-20
    },'slow');
// When the animation has completed hide, 
// change the background color, and fade in the div
$('html,body').promise().done(function(){
    seat.hide().css('background','yellow').fadeIn(1000);
});

Based on this answer: https://stackoverflow.com/a/8579673/1085891

Community
  • 1
  • 1
JSuar
  • 21,056
  • 4
  • 39
  • 83
  • but this only seems to handle the vertical part. what about the horizontal scroll . . – leora Nov 06 '14 at 15:11
  • Also, [this version](http://jsfiddle.net/wonq8es4/4/) would ensure the highlighted div is always near the center of the window. – JSuar Nov 06 '14 at 15:19