I'm using CodeIgniter, if it makes any difference, to create a page with a calendar list of events. The calendar list consists of a title, and two tables: the first table shows fixed table headings for a second table that contains rows that can scrolled when there are more rows than will fit into the fixed length of the second table. Each of the rows in the second table has an id, which brings that row into view when the URL of the page ends with a hash and the row's id. Amazingly, this all works fine, even when the row would otherwise be hidden 'below' the lowest visible line in the second table.
The problem is because the calendar list is actually broken into two parts, when the URL with a # and id ending is displayed, the page is scrolls to the top of the second table, hiding the calendar title and the headers in the fist table. There is enough space to show the title and both tables, so I want to scroll the page up to show the calendar title, headings, and the second table.
I added some code to the bottom of the page, that tries to do this after a lengthy delay, but it doesn't seem to work. I used Chrome's Inspect feature and can see that the variables are being properly set, and that the code does run through the lines that should scroll to the calendar's title, but this doesn't happen. Also, I don't get any errors in the console.log.
I'm using these statements:
- var rowId = ( ( location.hash != '' ) ? location.hash : '' ); // get hash of URL w/ #.
- var $calendarRow = ( ( rowtId != '' ) ? $( rowId ) : null ); // Get element, if have Id
- var calendarTop = $( '#CalendarTitle' ).offset().top;
- if( rowId != '' )
- if( $calendarRow.length ) {
- // There is a # id and the 2nd table contains it.
-
- // Highlight the calendar's 2nd table row that has the rowId.
- $calendarRow.css( { 'border' : 'thin solid white' } ); // Not working!?!?!?!?!
- // Scroll the calendar title and headers into view after everything settles down.
- $( document ).delay( 8000 ).scrollTop( calendarTop ); // Not working either!?!?!?!?!
- }
- else
- location.href = '#calendarTitle'; // if there's a # id, but it doesn't exist, show title.
If this isn't the best cross-browser way to do this please let me know.
When I tried this using the location.href, the page does jump to the calendar title, but then I loose the row in the table that is supposed to be seen.
Finally, this same page can be shown without using the # and id, in which case I want the page to show from its top and not automatically scroll down to the calendar list of events.