Self-scrolling list?

**Hymer** · 05 November 2010, 09:18 AM

I have a long list and every item has an own pop-up image. The user has to scroll to see the end of the list and I shell continue it, but I wish that the pop-ups will com up at the same place. I should like to put a scrolling to the list. It would be best with self-scrolling, so the selected item will be always about at the vertical middle.
I didn't arranged the items as a list yet. Please tell me, which is better for this purpose: a list, a table or a soft-group.
Another related question: What can I do to avoid an empty pop-up area when the page is opened, before or after the pop-ups? How can I put a start-image there, which appears when nothing pops up?

**gwpriester** · 05 November 2010, 11:35 AM

Have a look at this site http://deluxe-menu.com/scrollable-submenus-sample.html They generate a script which you can modify as needed.

**Hymer** · 05 November 2010, 12:37 PM

Thank you. This javascript is too smart, too quick for my purpose. I understand the submenu works exactly what I was asking for, but I see now that it is not suitable for me. I want apply it on the right side, not in the menu and the items are leading to pop-ups, not links.
This javascript together with pop-ups would give a short firework of the pop-ups. The user would hold the mouse in the middle and the popups would only flicker for a second, one by one, no focus at all.
Now I know better what I want. I don't want to hold the cursor in the middle. The visitor will move the mouse, not only hold it. When the cursor is down at the last name on the screan, the list moves up, just to make it possible to continue with the mouse.
Have you any advice? Which placeholder shall I use? shall I make a soft-group or a list?

**gwpriester** · 05 November 2010, 07:08 PM

Do a Google search for "drop down list scripts" There are quite a few to choose from. You will know when it is the right one.

**jamesd** · 05 November 2010, 08:00 PM

Maybe this is something like what your looking for http://www.dynamicdrive.com/dynamici...agscroller.htm
It is very customisable.

**Hymer** · 07 November 2010, 07:23 AM

The pop-ups doesn't work with list. I tried. This is not a menu with links.
My other question was: how can I hide the background with pop-ups. Please, look at the www.bellangegalleri.com. There are a lot of pop-ups there. I want that the default background with the thumbnails will disappear when the pop-ups come up. How can I do this?

**jamesd** · 07 November 2010, 08:41 AM

The pop-ups doesn't work with list. I tried. This is not a menu with links.

You can easily create a menu form this.
The popup should work your link should look something like this
<a href="javascript:xr_cpu(2)" onclick="return(xr_nn());">photo 1</a>
Each layer is numbered when exported.

I want that the default background with the thumbnails will disappear when the pop-ups come up. How can I do this?

You can create a white space around the popup to cover the background image.

**Hymer** · 07 November 2010, 09:50 AM

How can I avoid that the default background jumps in between every items? I tried with a background-layer behind the list and upon the thumbnails but it dosnï¿½t work.

**jamesd** · 07 November 2010, 10:08 AM

How can I avoid that the default background jumps in between every items?

I don't think you can unless you use iframes.

Or you could use a slideshow like in this post

**Hymer** · 08 November 2010, 02:26 PM

Now it works pretty well. I made rectangles for every name and grouped them one by one. I don't want to make slide-show, because I want the user shall have some feeling of digging in a shoe-box. These are old invitation-cards without any chronology.
However the list on the right side is too long and I want make it scrolling. I find some javascript, but I don't know how to use the placeholder.
For example this one. Between <head> and </head>

HTML Code:

<style type="text/css">
<!--
.arrows {  font-family: Wingdings; font-size: 22px; font-weight: bold; text-decoration: none; color: #000000}
body{ overflow-x:hidden; overflow-y:scroll;}
-->
</style>

and inside the body:

HTML Code:

<script language="JavaScript1.2">

//configure path for left and right arrows
var go_left='<span class="arrows">&iuml;</span>'
var go_right='<span class="arrows">&eth;</span>'
//configure menu width
var menuwidth=300
//configure scroll speed (1-10), where larger is faster
var scrollspeed=6
//specify menu content
var menucontents='<nobr><a href="http://www.dynamicdrive.com">Dynamic Drive</a> | <a href="http://wsabstract.com">Website Abstraction</a> | <a href="http://www.codearena.com">CodeArena.com</a> | <a href="http://www.builder.com">Builder.com</a> | <a href="http://freewarejava.com">Freewarejava.com</a></nobr>'


////NO NEED TO EDIT BELOW THIS LINE////////////

var actualwidth=''
var ns_scroll
function fillup(){
if (document.all){
test2.innerHTML=menucontents
actualwidth=test2.offsetWidth
}
else if (document.layers){
ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2
ns_scroll.document.write(menucontents)
ns_scroll.document.close()
actualwidth=ns_scroll.document.width
}
}
window.onload=fillup

function moveleft(){
if (document.all&&test2.style.pixelLeft>(menuwidth-actualwidth))
test2.style.pixelLeft-=scrollspeed
else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))
ns_scroll.left-=scrollspeed
lefttime=setTimeout("moveleft()",50)
}

function moveright(){
if (document.all&&test2.style.pixelLeft<0)
test2.style.pixelLeft+=scrollspeed
else if (document.layers&&ns_scroll.left<0)
ns_scroll.left+=scrollspeed
righttime=setTimeout("moveright()",50)
}

if (document.all||document.layers){
with (document){
write('<table border="0" cellspacing="0" cellpadding="0">')
write('<td valign="middle"><a href=#" onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)">'+go_left+'</a>&nbsp;</td>')
write('<td valign="top">')
if (document.all){
write('<span style="position:relative;width:'+menuwidth+';">')
write('<span style="position:absolute;width:'+menuwidth+';clip:rect(0 '+menuwidth+' auto 0)">')
write('<span id="test2" style="position:absolute;left:0;top:0">')
write('</span></span></span>')
}
else if (document.layers){
write('<ilayer width='+menuwidth+' name="ns_scrollmenu">')
write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>')
}
write('</td>')
write('<td valign="middle">&nbsp;<a href="#" onMouseover="moveright()" onMouseout="clearTimeout(righttime)">')
write(''+go_right+'</a>')
write('</td></table>')
}
}
</script>