/    Sign up×
Community /Pin to ProfileBookmark

Make a Scrolling Div Move to a Specific Position

Copy linkTweet thisAlerts:
May 22.2009

Is it possible to make a scrolling div, scroll and thus display a specific section of the text/html contained there in?

The scrolling div contains several child div’s that display information on records in an underlying DB. When the div is displayed, I want the user to be able to see a specific child div – hence I need someway to get to the div that contains the specific information.

I thought about seeing if its possible to reorder the divs, however there’s a very high need for a coolness factor.

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@Sterling_IsfineMay 22.2009 — Is it possible to make a scrolling div, scroll and thus display a specific section of the text/html contained there in?

there's a very high need for a coolness factor.[/QUOTE]

http://scripterlative.com/files/softdivscroll.htm
Copy linkTweet thisAlerts:
@skilled1May 22.2009 — http://scripterlative.com/files/softdivscroll.htm[/QUOTE]

nifty code and link, although the page makes my eyes want to bleed.
Copy linkTweet thisAlerts:
@dch3authorMay 22.2009 — Oh God, yellow. Yikes!
Copy linkTweet thisAlerts:
@dch3authorMay 22.2009 — However, that'll be perfect for what I have in mind.
Copy linkTweet thisAlerts:
@dch3authorMay 23.2009 — Actually, I wrote my own code...

When I tried it initially, I forgot that the scrolling div was nested. Once I got that down, the rest was simple. displayDiv(); is a simple bit of code that changes the display property of the DIV from none to block. The div is generated via an asp:panel element and thus the response.write snippet to get the .ClientId of the div.

<script type="text/javascript">

function displaySelectCompanyFacility(targetDiv)
{
/** Display the div **/
displayDiv('SelectCompanyFacility', 'block');
/** get the position of the DIV that contains the information to be displayed **//
target = document.getElementById('SelectCompanyFacilityId_' + targetDiv).offsetTop;
/** change the scrolling of the DIV **/
document.getElementById('<&#37;response.write (getClientId())%>').scrollTop = target;
}

</script>
Copy linkTweet thisAlerts:
@Metreon_CascadeMay 23.2009 — Is it possible to make a scrolling div, scroll and thus display a specific section of the text/html contained there in?

The scrolling div contains several child div's that display information on records in an underlying DB. When the div is displayed, I want the user to be able to see a specific child div - hence I need someway to get to the div that contains the specific information.

I thought about seeing if its possible to reorder the divs, however there's a very high need for a coolness factor.[/QUOTE]

Can't you just include links to the divs by ID? Each page on my site has several topics that you can scroll to, with quick-links that you can use to jump to a specific DIV.
Copy linkTweet thisAlerts:
@dch3authorMay 23.2009 — Can't you just include links to the divs by ID? Each page on my site has several topics that you can scroll to, with quick-links that you can use to jump to a specific DIV.[/QUOTE]

The page that I'm working with is an ASP.NET page by which records in the underlying database can be updated. One of the values that can be updated is address-based. Given the nature of a Drop Down box, using a Drop Down box wouldn't work (How do you display all lines of an address in a nicely appearing format in a drop down list?)

The solution that I came up with was to create the DHTML equivalent of a popup that lists the possible values for the field. This allows me to display the full address and in a polished format. Given that I've limited the height of the DIV serving as the popup and that there can be numerous records, the DIV scrolls. As a spit and polish feature, I wanted any previously selected value to be automatically displayed once the popup is displayed. (God is in the details.) For example, if the existing address in the database is PO BOX 4715, Orlando Florida, when the popup opens I wanted the value representing that record to be displayed in the DIV.
×

Success!

Help @dch3 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...