ScriptAsylum "Slider Script" ADJUSTMENTS ???

[Gordo]

The link:

http://scriptasylum.com/scrollers/slider/slider.html

What I need (in order of importance):

1. I need the whole thing centered in the page (absolutely?). Right now, it's at the top of the page. I need it to center in the page no matter what resolution, etc. The actual page I use will probably be framed.
2. How hard would it be for one of you to adjust this script to pause onMouseover?
3. Is it possible to have ALT text (yellow box) actually show up onMouseover? The ALT is in the image tag, but doesn't show up...maybe because the script doesn't pause onMouseover (?).

Thanks for you time and consideration. I like the version on DD (http://www.dynamicdrive.com/dynamici...rightslide.htm) -- it's perfect with one exception. It doesn't work in N6 nor Mozilla.

<EDIT>
Just figured out it may not work in a framed page!!! I believe the following code will prevent it:

//WINDOW RESIZE/LOAD
window.resizeTo(screen.width,screen.height);
window.moveTo(0,0);
window.onload=function(){ intializeSlideShow(); moveSlides('s0'); }

</EDIT>

[speedracer]

its not pretty, but try somthinglike this:

http://astro.phpwebhosting.com/~a206/tests/marquee.htm

[Gordo]

Ahh! Just as I'm about to finally log off at 3:30am and go to bed, I get the email that you just replied. Now I'll HAVE to look at this!

You know, I looked at the "marquee" script first, but for some reason decided against it. I even played around with it quite a bit before I moved on to the "slider". I can't remember why I decided it wouldn't work. Maybe it will!?

Your test page is promising. I'll just have to play with it to see if I can get it looking good enough for my particular page.

I'll post again -- whether it works or not. (thanks)

[Gordo]

Looking pretty good so far....

I only have a few questions/requests:

Can we get rid of the iframe/ilayer border? Can it blend (invisible) with a normal page. I tried to do it myself, but I guess I don't quite know what I'm doing (not my area of expertise) since it didn't work.

Also, what are the odds of changing the set "boxwidth" to the width of the actual page less 'x' number of pixels? This would require determining the screen resolution, etc. Again, the page I hope to have will be framed...not 100% width of the monitor resolution.


This last bit is more of a general question...not something I necessarily need for this script. Do these conveyor belt type scripts ever have the images/text (HTML) such that they loop immediately following themselves? That is to say, as soon as the last item is displayed, the first item follows without having to let the last item run off the belt. It would be more of a continuous loop.

[speedracer]

hi,
iframe? you're probly describing the table border that i used. this particular script cannot use 100% as width of the box because it uses the width as part of its function.

[Gordo]

I'll have to play with the table border later (going out of town for two days).

I don't need the whole deal 100%...would prefer to have it start and stop about 20 pixels or so from the edges of the page.

[Gordo]

!Dope! I completely overlooked that border="1" for the table. I just knew it had to be more difficult. Okay, that problem is solved.

The adjusting width is still at issue.

Also, I see the following:

N4.79 -- horizontal scrollbar always present, only shows the first 3 1/8 images (out of 7). It's something to do with how the width of the scroller is being read (I guess).

N6 -- horizontal scrollbar appears while the first 3 1/8 images are passing by...scrollbar gets longer until it disappears...starts over when the images recycle.

Mozilla 1.0 -- same as N6 (of course)

At least this script can be seen in N6 and Mozilla. But, I'd love to do away with these scrollbars and be able to see ALL images, etc.

Back in about 30 hours (out of town as of right.....NOW).

[Gordo]

Working great in IE, but...

Okay, I have a test page for you to view. In N4.x/N6/Mozilla, the first 3 1/8 (roughly) images appear...and then nothing. Also, notice the horizontal scrollbars. You'll notice that this is an ugly framed page...but it's pretty much how I'll be using this script. I'm really not worried about the width anymore. The scroller looks fine in 800 and 1024 resolution widths. So, let's not worry about that part of my previous help request.

The <nobr></nobr> tags are ones I NEVER would have thought to use! They are the reason the images keep scrolling (esp. in IE), but.....

Any help? Speedracer, et al?

[Gordo]

<BUMP>
Had to do it. Will have to abandon this issue soon...hoping speedracer or others have solution to "cut off images" before that happens.

[Vladdy]

Here is an images marquee script which works within a division that you can place wherever you want on your page.

[FONT=courier new]
[SIZE=1]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                                    "http://www.w3.org/TR/html4/strict.dtd"> 
<HTML> 
<HEAD> 
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<TITLE>Links Marquee</TITLE> 
<STYLE TYPE="text/css"> 

BODY 
{ background-color: #FFFFFF; 
} 

A:link 
{ text-decoration: none; 
} 

IMG 
{ border: 0; 
} 

#MovingLinks 
{ position: absolute; 
  top: 50px; 
  left: 100px; 
  height: 100px; 
  width: 400px; 
  overflow: hidden; 
} 

.IL { position: absolute;} 

</STYLE> 

</HEAD> 
<BODY> 

[COLOR=green]
<TABLE WIDTH="100%" HEIGHT="100%">
<TR WIDTH="100%">
<TD HEIGHT="100%" ALIGN="center" VALIGN="center">

[/COLOR]

<DIV ID="MovingLinks"> 
  <A HREF="link1"> 
    <IMG SRC="image1" CLASS="IL" WIDTH="70px"
             HEIGHT="100px" ID="IL0" ALT="Image1"> 
  </A> 
  <A HREF="link2"> 
    <IMG SRC="image2" CLASS="IL" WIDTH="70px"
             HEIGHT="100px" ID="IL1" ALT="Image2"> 
  </A> 
  <A HREF="link3"> 
    <IMG SRC="image3" CLASS="IL" WIDTH="70px"
             HEIGHT="100px" ID="IL2" ALT="Image3"> 
  </A> 
  <A HREF="link4"> 
    <IMG SRC="image4" CLASS="IL" WIDTH="70px" 
             HEIGHT="100px" ID="IL3" ALT="Image4"> 
  </A> 
  <A HREF="link5"> 
    <IMG SRC="image5" CLASS="IL" WIDTH="70px" 
             HEIGHT="100px" ID="IL4" ALT="Image5"> 
  </A> 
  <A HREF="link6"> 
    <IMG SRC="image6" CLASS="IL" WIDTH="70px" 
             HEIGHT="100px" ID="IL5" ALT="Image6"> 
  </A> 
</DIV> 
[COLOR=green]
</TD>
</TR>
</TABLE>
[/COLOR]

<script TYPE="text/JavaScript"> 
var NumLinks=;
var ImageSpacing=20;
[COLOR=red]var slideStep=3;[/COLOR]
oSLs = new Array(NumLinks); 
var i=0; 
for(i=0;i<NumLinks;i++) 
  { oSLs[i]= document.getElementById("IL"+i); 
    if(i==0) 
      { oSLs[i].style.left = '0px'; 
      } 
     else 
      { oSLs[i].style.left = (parseInt(oSLs[i-1].style.left)+ 
                                      oSLs[i-1].width) + ImageSpacing + 'px'; 
      } 
  } 

function Marquee() 
{ var j; 
    for(i=0;i<NumLinks;i++) 
      { // this line is replaced: oSLs[i].style.left=(parseInt(oSLs[i].style.left) - 1)+ 'px'; 
        [COLOR=red]oSLs[i].style.left=(parseInt(oSLs[i].style.left) - slideStep)+ 'px'; 
        [/COLOR]
        if (parseInt(oSLs[i].style.left)+ oSLs[i].width < 0) 
          { j=i-1; 
             if(j<0) j=NumLinks-1; 
             oSLs[i].style.left = (parseInt(oSLs[j].style.left)+
                              oSLs[j].width + ImageSpacing ) + 'px'; 
          } 
      } 
} 

var Scroll = window.setInterval("Marquee()",60);
</script> 

</BODY> 
</HTML> 

[/SIZE] [/FONT]

... would it be better if I made it a file attachment

[Gordo]

Ah, the joy of trying to get things to look the same/similar in all major browsers!!!

Vladdy, thanks for your input. No need for any attachments...it's just a little bit of code.

I have an example of your contribution to this thread HERE.

I have three problems with this particular "links marquee".

1. I changed the speed to 12 (was 60). It's great in IE, but S-U-P-E-R SLOW in N6/Mozilla.
2. How do I get the scroller to center horizontally and vertically in the page. The styles dictate top: 50px; and left: 100px;. I took some code from another page that centers *whatever*, but it won't work with this (yet) -- see it HERE.
3. Finally, the scroller doesn't move in N4.79 (the version I have). It shows the first two images, and just sits there.

THANKS!

[Vladdy]

1. to make it faster consider also this change (see red marks in my original code). Too short of the timer delay will start eating away system resources - just jump by more than one pixel.

2. add green code to center it on the page change the style to:

#MovingLinks 
{ position: static; 
  height: 100px; 
  width: 400px; 
  overflow: hidden; 
}

3. I'm sorry but I consider NS4.79 a dinosaur. I would rather have a link to www.netscape.com suggesting an update than worry about compatibility.

[Gordo]

Vladdy -- Adjusted per your instructions. The speed in all browsers is alright now. However, it's not centering in the middle of the page.

I hear what you're saying about Netscape 4.x. I guess I could always detect it, and write a simple table of images/links for it.

The latest updated version is now HERE .

Oh, and I'm now getting a growing horizontal scrollbar in ALL browsers. That's one thing I won't be able to stomach. If it cannot be killed, then I'll have to give up on this particular scroller. Please let me know.

One more thing...ANY chance that this script could also have a "pause onmouseover"? Is it possible? Too hard?

As you can tell by my many posts in this thread, my ultimate horizontal scroller would have the following:

• work in ALL browers (specifically IE4.x+, N4.x, N6+, Mozilla, etc)
• centered on the page -- able to place anywhere on page without the use of set x/y coordinates
• adjustable width preferred (to resolution and actual page width)...but at least to tell it a specific # of pixels
• pause onmouseover
• allow any and all HTML (images, text, links, etc.)
• show NO scrollbars

I can't think of anything else right now.

[Vladdy]

Horizontal bars: your left and right margin would have to be at elast the image width, and then still extra coding....

Pausing should not be that difficult.... just set the step to 0 on mouseover and restore it on mouseout...

Centering is best done on-resize - change the position and width of the element.

ummmm.... on the side note.... I think you are forgetting the golden development rule:
"Good enough" is good enough, while "perfect" is always a pain in the butt and often not worth the effort anyway