DHTML: Dynamic Navigation through DOM element with scrollTop


I had a task to implement vertical navigation by the long list of items which does not fit the browser window. It has to be hidden if list of items shorter than height of the window. Note also I has to use frames.




Okey, let's start. First, I disabled standard scrollbars within the window:

<style>
html,body { overflow: hidden; }
body { position: absolute; top: 0; left: 0; }
</style>

Then I disabled scrollbars in DIV area which should be navigated:


#taglist{ width:100%; overflow:hidden; }

Then I created DIV area with up/down buttons bound to right lower corner of the window. I wrote in CSS file:


.sbnav { position: absolute; bottom: 5px; right: 5px; text-align:right; background-color: #fbffba; padding:3px; }
.sbnav-up { margin-bottom: 6px; }
.sbnav-down { margin-top: 6px; }

and in HTML (the simpliest piece):

<div id="taglist"></div>

Couple more tricks in this work:
1. Shift displayed area. For this purpose I have to control scrollTop DOM property. I wrote two functions for that: sbNavUp() and sbNavDown()
2. I found very useful: setInterval and clearInterval on mouse events (onmousedown and onmouseup).

Below is Javascript implementation. You will also need graphics for up and down buttons, and some HTML to define DOM object to be navigated, and DOM object which contain navigation.
NOTE that I had to put 110 and 115 values because area which should be navigatable is lower (shorter) than whole size of frame (window).

So, HTML for navigation arrows looks like this:

<div class="sbnav" id="sbnav">
<a href="#" id="sbnav_up" title="Up"><img src="/static/images/nav_up.gif" alt="Up" height="7" slass="sbnav-up" width="14" /></a><br />
<a href="#" id="sbnav_down" title="Down"><img src="/static/images/nav_down.gif" alt="Down" height="7" class="sbnav-down" width="14" /></a> </div>

Javascript calls on HTML page:
window.onload = sbNavControl;
window.onresize = sbNavControl;

Thus, I show or hide buttons on window resize.

Javascript implementation:

getWindowHeight function is available under the link.

/** Sidebar navigation */

var navStep = 2; // in pixels
var navSpeed = 10; // in milliseconds

/** Navigate list of interests up */

function sbNavUp() {
try {
var taglistObj = top.frames['sidebarcontent'].document.getElementById('taglist');
var offset = taglistObj.scrollTop;
if (offset > navStep) taglistObj.scrollTop -= navStep;
else if (offset <= navStep && offset > 0) taglistObj.scrollTop = 0;
} catch(e) {jsErr(e)}
}

/** Navigate list of interests down */

function sbNavDown() {
try {
var taglistObj = top.frames['sidebarcontent'].document.getElementById('taglist');
var offset = taglistObj.scrollTop;
if (offset+navStep < taglistObj.scrollHeight) taglistObj.scrollTop += navStep;
else if (offset+navStep >= taglistObj.scrollHeight && offset < taglistObj.scrollHeight) taglistObj.scrollTop = taglistObj.scrollHeight;
} catch(e) {jsErr(e)}
}

/** Show/hide navigational buttons */

function sbNavControl() {
try {
var taglistObj = top.frames['sidebarcontent'].document.getElementById('taglist');
var sbnabObj = top.frames['sidebarcontent'].document.getElementById("sbnav");
if (!taglistObj || !sbnabObj) return;
// reset height to default
taglistObj.style.height = '';
// display/hide nav buttons
var taglistHeight = taglistObj.offsetHeight;
if (taglistHeight > getWindowHeight()-110) sbnabObj.style.display = '';
else sbnabObj.style.display = 'none';
// set height in order to make navigation work
taglistObj.style.height = (getWindowHeight()-115) + "px";

// onMouseDown and onMouseUp events
var btnUp = top.frames['sidebarcontent'].document.getElementById("sbnav_up");
var btnDown = top.frames['sidebarcontent'].document.getElementById("sbnav_down");
if (!btnUp || !btnDown) return;
var sbNavUpInterval = ''; var sbNavDownInterval = '';
function sbNavUpStart() { sbNavUpInterval = self.setInterval("sbNavUp()", navSpeed); }
function sbNavDownStart() { sbNavDownInterval = self.setInterval("sbNavDown()", navSpeed); }
function sbNavUpStop() { self.clearInterval(sbNavUpInterval); }
function sbNavDownStop() { self.clearInterval(sbNavDownInterval); }
btnUp.onmousedown = sbNavUpStart;
btnUp.onmouseup = sbNavUpStop;
btnDown.onmousedown = sbNavDownStart;
btnDown.onmouseup = sbNavDownStop;
} catch(e) {}
}

Comments

Post a Comment

Popular posts from this blog

Using Trello and Confluence to manage UX design project. Part 2

Image
This is part Two. Part One can be found here . Term definitions. Brainstorming board. Activity board. Let me give you an overview of the items we refer to, deal with, and vetting all days long. Below are my simple definitions. UX Brief – a living document, a single and comprehensive point of reference of the design project. User Story – a short requirement or request from the end user. Later will be converted into task flow performed by this user to reach the goal. Acceptance Criteria – a set of conditions/statements, or a checklist, which defines the user story’s Pass/Fail . Feature – a functional part of the application, which combines several user stories. User stories are written to provide a complete support to this feature in terms of tasks performed by the user, while keeping in mind the user’s goal. Epic – a large logical group of multiple features in complex application. Brainstorm – a collaborative session involving product owners (PMs) and UX designers
Read more

Using Trello and Confluence to manage UX design project. Part 1

Image
This is part One. Part Two is here . Introduction. “ Describe your design process ”. It’s a typical interview question for UX designer position. User-centered design process indeed has defined set of steps. In theory. On the practice though, the adherence to these steps depends on many factors, such as communication and execution skills, practical experience, ability to influence people, being leader and influencer, and at what level your organization is a design driven org. So many businesses are not ready to adopt the design practice, and to place the design before the development. Or simply there is not time or budget to go through all steps. Here in Herbalife the UX Design team accepted Norman Nielsen group philosophy:   Empathize – Define –Ideate – Prototype – Test – Implement .  However the   interpretation of the practical tasks can differ dramatically in different organizations. Here what we currently do: Design Thinking and Agile Any project, which goes t
Read more

Conceptual design

Image
Consider this post is about visual design. A duct taped banana. This piece of art was sold for $150,000 in December 2019 at Miami's Art Basel . Actually $120K x 4 + $150K = $630,000. Not bad for 10 cents banana and few inches of duct tape. This became a sensation of 2019-2020. Why and how it happened brings up some questions about modern society and economy. How artists (or art dealers, or anyone else) create value from nothing? And emphasize the importance of the idea. In this particular case it's nothing more than an idea. Is this the art we'd like to see? Probably not. But perhaps it's the art we deserve.
Read more