PROS! Scrolling?

[brianb]

Hello pros,

I know this isn't exactly PHP related but I didn't know where else to turn.

Basically, I have a page being generated that lists items in my database that contain a date for the WEEK we are in. This is being done in PHP.

Now, through the use of an IFRAME, I'd like to embed this page into another page and have it scroll by from right to left...just like it's being done here:

http://www.foxmovies.com/index1.html

Can anyone point me in the right direction here?

I'd settle for a javascript solution, OR even a Flash solution if it permitted the content to be changable when my database gets updated!

Please help! Anything is appreciated! Especially example code or URLs!

Thanks.

[FlashAges]

<SCRIPT language=JavaScript>

<!--add 208 832, 1040, 1248, 1456, 1664 -->

<!--//
var x = 0;
var y = 0;
var limdex = 1040;

    var dest = 0;

    var distance = 0;

    var step = 0;

    var destination = 0;

            var on = true;

function scrollit(destination) {

            step = 2;

            dest = destination;

     if (x<dest & x < limdex){

                    while (x<dest) {

                            step += (step / 7);

                            x += step;

                            parent.frames[1].scroll(x,0);

                    } 

                    // top.main.scroll(dest,0);

                    if(dest <=limdex) { parent.frames[1].scroll(dest,0); }

                    x = dest;



            }



    if (x > dest)  {

                    while (x>dest) {

                            step += (step / 7);

            if(x >= (0+step))
                              {
                                x -= step; 
                                    parent.frames[1].scroll(x,0);
              }
                                else { break;  }
                    } 

                    if(dest >= 0) { parent.frames[1].scroll(dest,0); }

                    x = dest;

            }



            if (x<1) {parent.frames[1].scroll(1,0); x=1}

            if (x>limdex) {parent.frames[1].scroll(limdex,0); x=limdex}

    x = dest;

}

function scrollnow() {
if (on){
if (x < limdex & x >= 0 ) {

                            parent.frames[1].scroll(x,0);

                    x = x + 1;

                    setTimeout('scrollnow()', 8);

            }
            else if (x < 0) {

                    x = limdex;
                    scrollnow();
            }
        else {

            x=0;
            scrollnow();
            }
            }

}

function stopscroll() {
if (on){
on = false;
}
else {
on = true;
scrollnow();
}

}

Hope that helps.

[brianb]

Ah yes!

Thanks so much for the reply...can you explain a tad how it works and what variables need to be changed?

This script, along with my content, goes inside the page that goes IN the IFRAME correct?

Or, did you get this from the link I posted above? If so, what is the URL it came from?

thanks again.

[brianb]

Anybody have any ideas on how to get this script functioning correctly? Any DETAILED help is greatly appreciated!

Thanks.

[altexis]

javascript is not necessary for your solution

basically the scroll bars you want come up automatically!!
so if the source of the IFRAME is too wide you will have a horizontal scroll bar

or alternatively you can narrow the width parameter of your IFRAME tag

ex: the source of the IFRAME is embeded.html and is more than 200pixels wide
the parent html contains the tag <iframe width="100"> ... </iframe>

since the embeded page is wider than 100 pixels you will have your horizontal scroll bar

[brianb]

Cool. Yes, I understand this, but my goal is to generate a page via PHP, with entries that get listed horizontally.

Then on another page I'd like my page to get nested inside of an IFRAME and scroll from LEFT to RIGHT automatically...with NO SCROLLBARS present...

I kind of figured out how to do it, but I can't get the enbedded page to scroll horizontally:

http://www.lightsoutentertainment.com/test.html

let me know if anyone has any ideas!

Thanks.

[Code_guy]

I would write a php script that would get the entries from the database for this week and output them embeded in a div tag, two times. So you have two identical div's with different id's (ex: div1, div2)

Then use a switch statment on HTTP_USER_AGENT to output a javascript function which moves a div to a given x position. (function moveToX(){ ...)
Also get the width of div1 and put it in a variable.
(div1Width)
You need to write diferent code for different browsers here.

Then write javascript like this:
x = 0;
function scroll(){
if ((div1Width - x) < 0) x = 0;
moveToX('div1', x);
moveToX('div2', x + div1Width);
setTimeout('scroll()', speed);
x -= distance;
}

You can tweek distance and speed.
If you want to get fancy you can time it once and then set values that maximize smooth scrolling for the processor speed.

if the content of one div is not wide enough to fill the iframe just write it to each div twice (or more)
You can check in your php code how many rows were returned for this week, and if there are few write to each div more then once.

If you need to see more example code to understand what I mean, let me know.

[brianb]

Very cool. Thanks.

yes, I would very much appreciate some more example code. Especially with the whole DIV tage thing...I don't think I understand this completely.

As for the PHP page you described, that extacly what I am generating in the example link above in an iFRAME.

Please let me know!

Thanks.

[brianb]

Ok...

I found a script online that I think does what I want it to do, I just need some help making the script scroll from RIGHT to LEFT (like a marquee) instead of UP and DOWN.

Check out the script:

<html>

<div id="datacontainer" style="position:absolute;left:0;top:10;width:100%" onMouseover="scrollspeed=0" onMouseout="scrollspeed=cache">
<!-- SCROLLER CONTENT--------------------->

All my PHP that lists all the titles I want to display...

<!-- END SCROLLER CONTENT---------------------------------------->
</div>

<script language="JavaScript1.2">

//Specify speed of scroll. Larger=faster (ie: 5)
var scrollspeed=cache=2

function initialize(){
marqueeheight=document.all? parent.document.all.datamain.height : parent.document.getElementById("datamain").getAttribute("height")
dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer")
dataobj.style.top=5
thelength=dataobj.offsetHeight
scrolltest()
}

function scrolltest(){
dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed
if (parseInt(dataobj.style.top)<thelength*(-1))
dataobj.style.top=5
setTimeout("scrolltest()",50)
}

window.onload=initialize

</script>

</body>
</html>

Now, how to make it go from RIGHT to LEFT??? Please help!

Thanks again!

[daphreeek]

The <div> moving is not what you want because once it has scrolled off screen, it just leaves a blank space! You need 2 scroll each image on its own and check to see if each image is off screen and if it is then make it goto the end of the scroll so it keeps scrolling around constantly.

The HTML tag marque (i think thats it) does a similar thing but on each scroll it leaves a gap which would look silly. Plus I think it only works in IE.

Try this script I wrote from scratch:

<script>
// CONFIG:

target = "_top";

height = 150;
speed = 3;

// as many images as u want:
images = new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg");

// width of images (same order as above):
widths = new Array(100, 60, 120, 170, 100);

// link for each image:
links = new Array("1.php", "2.php", "3.php", "4.php", "5.php");

// alternate text for images:
alts = new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg");



// CODE:
positions = new Array();
x = 0;
i = 0;

for (i=0; images[i]; i++) {
	document.write("<a href='" + links[i] + "' target='" + target + "'>");
	document.write("<img src='" + images[i] + "' style='position:absolute; top:0px; ");
	document.write("left:" + x + "px; width:" + widths[i] + "px; height:" + height + "px;' ");
	document.write("alt='" + alts[i] + "' id='img_" + i + "' border=0></a>");

positions[i] = x;

x += widths[i];
}

width = x;

function scroll() {
	for (i=0; images[i]; i++) {
		positions[i] -= speed;

	if (positions[i] + widths[i] < 0) {
		positions[i] += width;
	}

	img = document.getElementById("img_" + i);
	img.style.left = positions[i];
}


setTimeout("scroll()", 100);

}

scroll();


</script>

Just remember that it needs to have more images than can fit into the width of the frame or it will show some gaps.

For example, if the width of your frame is 500pixels and your largest image is 200pixels wide, then you will need to have at least a width 700pixels total for the widths of your images or it will show a gap in each rotation.

Also, all the images need 2 b the same height - and that height needs to be set at the top of the script.

AND as an added bonus - that script works in IE6 and NN6 when i tested it 🙂

Feel free to add me to ur links if ya want 🙂 Hope the script works how you want.

• Matt

http://daphreeek.kicks-ass.net

[brianb]

Hmmm....Ok, I think i understand the JAVASCRIPT here, but I need to translate your ARRAYS to work with my PHP generated page.

Any ideas on how to do this?

[Code_guy]

I'll first anwser your last question:

To use the script above you would need to write php code that would output javascript code to declare the arrays of images, widths, links and alternate texts.

If you have that in the database, (or change the database so that you have a corresponding column for each of the arrays) it's not so hard to do.

$imageStr = "images = new Array(";
$widthStr = "widths = new Array(";
...
// query your database ... I assume you know how
// let's say you got the result in $result (using mysql)

$coma = "";
while ($row = mysql_fetch_assoc($result)) {
     $imageStr .= $coma . "'" . $row['image'] . "'";
     $widthStr .= $coma . "'" . $row['width'] . "'";
     ...
     $coma = " ,";
}

$imageStr .= ");\n";
$widthStr .= ");\n";
?>
// the javascript code

...
...

height = 150;
speed = 3;

// as many images as u want:
<?= $imageStr ?>

// width of images (same order as above):
<?= $widthStr ?>

...

I would still use the method with the two div's though. That way you can dump any kind stuff in the div's, format it with tables etc. even add javascript and event handlers ... whatever.

The way this would work is that you have two div's with identical content which is at least as wide as the iframe it's in. That way when one div scrolls completly of the screen the other still covers the width of the iframe.
Let's say you need 5 items to cover the width of the iframe.
If this week you have 7 items you just write them to each div.
div1 div2
|01|02|03|04|05|06|07| |01|02|03|04|05|06|07|

you scroll by moving div1 left with div2 folowing seemlessly behind

if the next week you only have 4 items you write them to each div twice
div1 div2
|01|02|03|04|01|02|03|04| |01|02|03|04|01|02|03|04|

ok some code...

<html>
...

<?php
// query your database ... same as before
$itemCount = mysql_num_rows();

$output = "";
$coma = "";
while ($row = mysql_fetch_assoc($result)) {
     $output .= "<td>";
     $output .= "<img src='$path" . $row['img'] . "'>"; // stuff like this
     ... // use what ever formating and data from this row
     $output .= "</td>";
}

$output2 = "<table><tr>";
for ($i=1; $i<(7/$itemCount); $i++){ // if it takes 7 items to fill the width
     $output2 .= $output;
}
$output2 .=  "</tr><table>";
...

?>
<body>
<div id='div1' style='position: absolute; top: 0'><?= $output2 ?></div>
<div id='div2' style='position: absolute; top: 0'><?= $output2 ?></div>
</body>
<script>

// the 4 lines below will work with ie5.5+ and ns6+
// if you want to support other browsers you need test
// HTTP_USER_AGENT and ouput diferent code for each browser
function moveToX(id, x){
     document.getElementById(id).style.left = x + "px";
}
div1Width = document.getElementById('div1').offsetWidth;

time=10;
distance = 1;

continue = true; // for good measue you should have a way to stop
// you could for ex with a mouse over event set this to false to pause scrolling
// then on mouseout set it to true and call scroll()

x = 0; 
function scroll(){ 
     if ((div1Width - x) < 0) x = 0; 
     moveToX('div1', x); 
     moveToX('div2', x + div1Width); 
     if (continue) setTimeout('scroll()', speed); 
     x -= distance; 
} 
</script>

[brianb]

Wow....Ok, now I'm officially REALLY confused.

I tried the script posted above calling on my database etc, and am getting parse errors.

Gonna try again in the morning...

Please keep posting ideas! Thanks!

bye the way, anyone know how FOX does at the very firts link I posted?

Plus, will the above script work if my content is being generated on Monday of every week in a way I won't even know how many selections there will be from week to week? (Hope that makes sense.)

[Code_guy]

I skiped through a lot of stuff with ... in the code, because i don't know what kind of data you have in the database and how you want to format it.
Can you post your code as you filled it in?

In my version $itemCount would hold the number of selections that match your query. As you explained the query, matches rows that pertain to the current week.
How ever many rows there are that match on monday or any other day, that's how many different selections will be scrolling.
1,2 or 100 dosn't matter.

[brianb]

Ok...let's try this...maybe you can help me get my code into your some way or another...

Here's my PHP code that I'm querying my DB with. Also, there's a function not listed (doesn't really matter) that deals with entries that have no images asscoiated with it...it then prints a NO IMAGE image...should make sense:

<?PHP

require_once( "/myglobals" );

// This Week's Movies
$sql = "SELECT filmID, title FROM $film_table WHERE YEARWEEK(date, 1)-1=YEARWEEK(NOW(), 0) ORDER BY title";

$res = mysql_query ( $sql );
//mysql_debug($sql, $res);

//number of columns in your table
$ncols = 1;

//begin the table
echo "<table border=0 cellspacing=0 cellpadding=3>\n";

{

   echo "<tr>\n";
   for( $col=1; $col<=$ncols; $col++ )

   while ( $arr = mysql_fetch_row($res) )
   {
      echo "<td align='center' valign='top'>\n";

     //print out a poster for the current film
     $image_a = "/movies/images/thumbs/$arr[0].jpg";         
     $html_a = "<a href='/movies/film.php?filmID=$arr[0]' class='film' target='_top'>\n"
           . "<img src='/movies/images/$arr[0].jpg' border=1 vspace=3><br>\n"
           . ( fix_title($arr[1]) )
           . "</a>\n";
     $alt_html_a = "<a href='/movies/film.php?filmID=$arr[0]' class='film' target='_top'>\n"
           . "<img src='/movies/media/none.gif' width=134 height=199 border=1 vspace=3><br>\n"
           . ( fix_title($arr[1]) )
           . "</a>\n";
     printImage($image_a, $html_a, $alt_html_a);

  echo "</td>\n";

   }//end columns loop
   echo "</tr>\n";

}//end rows loop

echo "</table>\n";
?>

[Code_guy]

<?PHP

require_once( "/myglobals" );

// This Week's Movies
$sql = "SELECT filmID, title FROM $film_table WHERE YEARWEEK(date, 1)-1=YEARWEEK(NOW(), 0) ORDER BY title";

$res = mysql_query ( $sql );
$itemCount = mysql_num_rows($res);
if ($itemCount==0) die("nothing this week");

$output = "";
while ( $arr = mysql_fetch_row($res) ){
      $output .= "<td align='center' valign='top'>\n";

     //print out a poster for the current film
     //check this part to make sure it's what you wanted
     if (is_file("/movies/images/thumbs/$arr[0].jpg")){
     		$output .= "<a href='/movies/film.php?filmID=$arr[0]' class='film' target='_top'>\n"
           . "<img src='/movies/images/$arr[0].jpg' border=1 vspace=3><br>\n"
           . ( fix_title($arr[1]) )
           . "</a>\n";
     }
     else {
     		$output .= "<a href='/movies/film.php?filmID=$arr[0]' class='film' target='_top'>\n"
           . "<img src='/movies/media/none.gif' width=134 height=199 border=1 vspace=3><br>\n"
           . ( fix_title($arr[1]) )
           . "</a>\n";
     }

  $output .= "</td>\n";
}

$output2 = "<table onmouseover='continue=false' onmouseout='startScroll()'><tr>";
for ($i=1; $i<(7/$itemCount); $i++){ // if it takes 7 items to fill the width
     $output2 .= $output;
}
$output2 .=  "</tr><table>";

?>

<html>
<body>
<div id='div1' style='position: absolute; top: 0'><?= $output2 ?></div>
<div id='div2' style='position: absolute; top: 0'><?= $output2 ?></div>
</body>
<script>

function moveToX(id, x){
     document.getElementById(id).style.left = x + "px";
}
div1Width = document.getElementById('div1').offsetWidth;

time=10;
distance = 1;

x = 0; 
function scroll(){ 
     if ((div1Width - x) < 0) x = 0; 
     moveToX('div1', x); 
     moveToX('div2', x + div1Width); 
     if (continue) setTimeout('scroll()', speed); 
     x -= distance; 
} 

function startScroll(){
     continue = true;
     scroll();
}

document.onload = startScroll;
</script>
</html>

load that in your iframe and see what happens
you will need fix_title in the script

[vaska]

sorry...but i'm going to chime in...

you really want it to scroll automatically like that?

from a design (usability) standpoint that's very annoying. and from my experience with scrollers they work to varying degrees at varying speeds with varying results...it's hard to predict what will happen and i've seen MANY a scroller that seemed fine but were in fact detrimental to the whole page...

how about a design solution instead in addition to the php instead of a scroller? let your users KNOW that the information is there...give them the first one or two results...and make them completely aware that more information is available...

i like using iframes and it's nice that newer netscape can use this capability...

i created a newsboard using an iframe and some nice javascript but after it was finished i took out the iframe...the javascript does a hide/reveal thing which is pretty cool...

if you're curious to see the newsboard (although we are creating text and articles for this site now - so it's really a mess) -> http://www.radishbeet.com/index2.php

jv

[vaska]

ps: i think a flash solution might be better assuming your images were small and your code was good...but flash is flash and can be hard for some to load and others to use properly...

[brianb]

Damn, damn and double damn....

Getting a parse error.

Parse error: parse error in /testerer.php on line 3

Attaching my script (with globals not included)...

[Code_guy]

You have a Ê instead of space through the whole document.

I did search and replace.
Try it now: