Log in

View Full Version : DD Crawler - Everything is one column


Csigs
10-05-2011, 07:55 PM
1) Script Title: DD Text and Image Crawler 1.5

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm

3) Describe problem:

I'm trying to get the crawler to scroll through various world clocks (The time in Washington, Moscow, Sydney, etc), but when I plug in the scripts for each one it just displays them as one long column and repeatedly scrolls through that one column. I tried putting the <span> </span> tags around each element but that didn't help.

Here's a copy of the script and what it appears as on my site. I'm a novice with this kind of stuff so I apologize if the solution is obvious or if I'm attempting something that can't be done.

Site: http://diplomunion.com - It's on the left


<script type="text/javascript" src="http://diplomunion.com/crawler.js">
/* Text and/or Image Crawler Script v1.5 (c)2009-2011 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
updated: 4/2011 for random order option, more (see below)
*/

</script>

<div class="marquee1" id="mycrawler2">
<span><!-Local Time Clock widget - HTML code - localtimes.info --><div align="center" style="margin:15px 0px 0px 0px"><div align="center" style="width:140px;border:1px solid #ccc;background:#fff ;color: #fff ;font-weight:bold"><a style="padding:2px 1px;margin:2px 1px;font-size:13px;line-height:16px;font-family:arial;text-decoration:none;color:#000 ;" href="http://localtimes.info/Oceania/New_Zealand/Wellington/"><img src="http://localtimes.info/images/countries/nz.png" border=0 style="border:0;margin:0;padding:0">&nbsp;&nbsp;Wellington Time</a></div><script type="text/javascript" src="http://localtimes.info/clock.php?continent=Oceania&country=New+Zealand&city=Wellington&color=black-white&widget_number=1000"></script></div><!-end of code--></span>

<span><!-Local Time Clock widget - HTML code - localtimes.info --><div align="center" style="margin:15px 0px 0px 0px"><div align="center" style="width:140px;border:1px solid #ccc;background:#fff ;color: #fff ;font-weight:bold"><a style="padding:2px 1px;margin:2px 1px;font-size:13px;line-height:16px;font-family:arial;text-decoration:none;color:#000 ;" href="http://localtimes.info/Oceania/Australia/New_South_Wales/Sydney/"><img src="http://localtimes.info/images/countries/au.png" border=0 style="border:0;margin:0;padding:0">&nbsp;&nbsp;Sydney Time</a></div><script type="text/javascript" src="http://localtimes.info/clock.php?continent=Oceania&country=Australia&city=Sydney&color=black-white&widget_number=1000"></script></div><!-end of code--></span>

*Similar script repeated several times. Removed so could fit in post.*

</div>

<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '600px',
'margin': '0 auto',
'height': '75px'
},
inc: 1, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 1,
neutral: 150,
savedirection: true,
random: false
});
</script>
jscheuer1
10-06-2011, 02:36 PM
I'd try a table, something more like:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://diplomunion.com/crawler.js">
/* Text and/or Image Crawler Script v1.5 (c)2009-2011 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
updated: 4/2011 for random order option, more (see below)
*/

</script>
<style type="text/css">
#mycrawler2 table, .marquee0 table{
white-space: normal;
border-collapse: collapse;
border-width: 0
}
#mycrawler2 td, .marquee0 td{
white-space: normal;
width: 142px;
margin: 0;
padding: 0;
border-width: 0
}
</style>

</head>
<body>
<div id="mycrawler2"><table>
<tr>

<td><!-Local Time Clock widget - HTML code - localtimes.info --><div align="center" style="margin:15px 0px 0px 0px"><div align="center" style="width:140px;border:1px solid #ccc;background:#fff ;color: #fff ;font-weight:bold"><a style="padding:2px 1px;margin:2px 1px;font-size:13px;line-height:16px;font-family:arial;text-decoration:none;color:#000 ;" href="http://localtimes.info/Oceania/New_Zealand/Wellington/"><img src="http://localtimes.info/images/countries/nz.png" border=0 style="border:0;margin:0;padding:0">&nbsp;&nbsp;Wellington Time</a></div><script type="text/javascript" src="http://localtimes.info/clock.php?continent=Oceania&country=New+Zealand&city=Wellington&color=black-white&widget_number=1000"></script></div><!-end of code--></td>

<td><!-Local Time Clock widget - HTML code - localtimes.info --><div align="center" style="margin:15px 0px 0px 0px"><div align="center" style="width:140px;border:1px solid #ccc;background:#fff ;color: #fff ;font-weight:bold"><a style="padding:2px 1px;margin:2px 1px;font-size:13px;line-height:16px;font-family:arial;text-decoration:none;color:#000 ;" href="http://localtimes.info/Oceania/Australia/New_South_Wales/Sydney/"><img src="http://localtimes.info/images/countries/au.png" border=0 style="border:0;margin:0;padding:0">&nbsp;&nbsp;Sydney Time</a></div><script type="text/javascript" src="http://localtimes.info/clock.php?continent=Oceania&country=Australia&city=Sydney&color=black-white&widget_number=1000"></script></div><!-end of code--></td>

<td><!-Local Time Clock widget - HTML code - localtimes.info --><div align="center" style="margin:15px 0px 0px 0px"><div align="center" style="width:140px;border:1px solid #ccc;background:#fff ;color: #fff ;font-weight:bold"><a style="padding:2px 1px;margin:2px 1px;font-size:13px;line-height:16px;font-family:arial;text-decoration:none;color:#000 ;" href="http://localtimes.info/Oceania/Australia/Queensland/Gold_Coast/"><img src="http://localtimes.info/images/countries/au.png" border=0 style="border:0;margin:0;padding:0">&nbsp;&nbsp;Gold Coast Time</a></div><script type="text/javascript" src="http://localtimes.info/clock.php?continent=Oceania&country=Australia&city=Gold+Coast&color=black-white&widget_number=1000"></script></div><!-end of code--></td>

</tr>
</table>

</div>

<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '600px',
'margin': '0 auto',
'height': '80px'
},
inc: 1, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 1,
neutral: 150,
savedirection: true,
noAddedSpace: true
});
</script>
</body>
</html>

Notes: I tried to highlight all the significant changes. The script assigns the class name to the crawler, you should not. Since you have only one, this will be marquee0. I got rid of random: false. That's the default. I added noAddedSpace: true because I think it will work out well with what you're doing.

Instead of a table, floats could be used. The main point is to avoid line breaks between each widget.

The browser cache may need to be cleared and/or the page refreshed to see changes.
Csigs
10-06-2011, 02:53 PM
Thanks, but now when I try and save it, it gives me:

Error

[object Object]
jscheuer1
10-06-2011, 03:11 PM
When you 'try to save it'?
Csigs
10-06-2011, 03:26 PM
As in when I edit the .php file it's contained in on my cPanel.
jscheuer1
10-06-2011, 04:04 PM
Is this a PHP error or a javascript error, or something else?
Csigs
10-06-2011, 04:16 PM
Not really sure, see attached.

EDIT: Attached came out smaller than I expected. Here's a better picture.

http://i11.photobucket.com/albums/a165/kylecsigs/Error.png
jscheuer1
10-06-2011, 05:14 PM
Looks like a cPanel error.

The code I posted is for a standalone page. If you're trying to paste it into an existing page, that might be the problem.

Just use the highlighted changes, apply them to your existing code. Back everything up first because I have another idea.

And if that's not the problem, it could be a cPanel problem of another sort. I have no experience with cPanel.


Added Later:
I do have another method now. It involves knowing the number of clocks though, as a width must be set in style for that. You could keep whatever you had, just change the init to:


<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '600px',
'margin': '0 auto',
'height': '80px'
},
inc: 1, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 1,
neutral: 150,
savedirection: true,
noAddedSpace: true
});
</script>

and add these styles to the page (or add their rules to an existing stylesheet for the page):


<style type="text/css">
#mycrawler2 span, .marquee0 span {
white-space: normal;
display: block;
width: 142px;
margin: 0 4px 0 0;
padding: 0;
float: left;
}
.marquee0 div div {
overflow: hidden;
width: 438px;
}
.marquee0 div div div {
width: auto;
}
#clock_widget { /* with below for some browsers that leave ghost widgets around outside the crawler */
display: none;
}
#mycrawler2 #clock_widget, .marquee0 #clock_widget {
display: inline;
}
#mycrawler2 object, .marquee0 object, #mycrawler2 embed, .marquee0 embed {
width: 142px;
height: 35px;
}
</style>

That red number is important. It's the number of clocks times 146 (140 for each clock, 2 for each clock's left and right border of 1 each and 4 for the right margin of each floated span containing a clock).

You should still get rid of class="marquee1", but it should be changed to class="marquee" instead of being dropped completely. This holds true for the first solution as well.
Csigs
10-07-2011, 05:06 PM
Working! Thanks for all your help, love the scroller