?
Solved

Control list scroll position on load.

Posted on 2013-02-04
7
Medium Priority
?
476 Views
Last Modified: 2013-11-19
This is a follow-up to my earlier question (#27928418).

The attachment to this question is a screen capture of a web page I am working on which contains an area where a list of songs is displayed. Also displayed is the music notation of a song which the user has selected. The music notation is in an iframe. Clicking on a song title loads its notation into the frame without reloading the parent page. The HTML source code is also attached. This page is the result of a previous page where the song list is displayed. When the user selects a song title, it links to this notation page where the song list is redisplayed alongside the musical notation of the selected song.

The song list can vary in length from one song to several hundred titles. Once the length of the list exceeds the height of the space allotted to it, the right scroll bar appears, allowing the user to scroll down to view additional songs on the list. The problem is the user may have selected a song far down the list. When the page loads, by default, the topmost portion of the list is displayed.

When this notation page loads, I would like the list to be scrolled to the position where the selected song title is at the top of the displayed titles. It should still be in its correct position relative to its neighboring song titles, but should appear at the top of the visible portion of the list, just as if it were scrolled to that position. The user could then scroll up or down from there to review additional titles. My client is adamant that I not use a paging system, so I must retain the scroll format. Also, the client likes the look as it is, so any solution should contain no additional controls (or at least minimize them).

The information about each song is contained within a div having and id of “key” plus the number equal to its position in the array of songs in the list, e.g. key23 is the id for the 24th song in the list.

Is there a way to do this?
Sample-Screenshot.png
CCS-Song-Library.htm
0
Comment
Question by:gpinzino
  • 4
  • 3
7 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 38853204
Well if you have an id then just target the id in the url and it will be positioned at the top.

http://mysite.com/mypage.html#key23 

will put the element with id 'key23' at the top.

Cd&
0
 
LVL 1

Author Comment

by:gpinzino
ID: 38855552
Thanks COBOLdinosaur. It works well on the list. Unfortunately, it also pulls down the entire page so you do not see the top banner and navigation.  Is there a way to move the page back up so you can see what's at the top of the page?
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 2000 total points
ID: 38856180
Well you could try this:
http://clifgriffin.com/2008/10/14/using-javascript-to-scroll-to-a-specific-elementobject/

But I don't know how reliable it will be using an iframe.

You might be better to use window.scrollTo(0,0) in the main page after loading the iframe.

Cd&
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
LVL 1

Author Comment

by:gpinzino
ID: 38856227
I was thinking the scrollTo might be an option here. I will check out both and let you know.
0
 
LVL 1

Author Comment

by:gpinzino
ID: 38856323
I got it on the first try. Really quite simple.

In the <script>, I added:
function showIt(elID) {
      var el = document.getElementById(elID);
      el.scrollIntoView(true);
}

And then I modified my <body> tag to read:
<body id="bodyId" onload="showIt('bodyId')">

That's it. When the page loads, it jumps right to the top!
0
 
LVL 1

Author Closing Comment

by:gpinzino
ID: 38856336
Great job, COBOLdinosaur. Thanks!
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38856469
:^) Great! I'm glad you have it working.

Cd&
0

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

No other job is as rewarding and demanding as building an iPhone app is. It is not really in the hands of the developer for the success of an iPhone app. Many factors operate jointly for every iOS application's success in the market.
Now many of you may wonder how you can reach great design with least number of essentials. Isn’t stuffing ‘more and more number of elements that speak for the purpose’ the right way to do it? Erm, not always, and in this write-up, you will see why.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to dynamically set the form action using jQuery.

590 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question