PDA

View Full Version : Bug in Code or on Server? is that possible?



Al Fresco
12-09-2007, 11:08 AM
1) Script Title: Scrollable Content 11

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm

3) Describe problem: Four months ago I created a site which uses Scrollable content script II. It worked great until a few weeks ago when it started changing to Japanese. I have no idea why. It works for a couple of days after reposting then changes. Could it be a bug on the server or is it something in the code? Please help.
The page in question is: http://petersearle.com/list.html

Twey
12-09-2007, 02:03 PM
More like Chinese :)

Anyway, it's probably just the browser's content-type autodetection fouling up on something. Apply a proper content-type with a charset to both pages and all should be OK.

Al Fresco
12-09-2007, 11:47 PM
Hi Twey. Thanks for your help but I'm afraid its still all Greek to me.:confused: I thought it did have a "proper content-type with a charset"? I have noticed some strange text appearing in the copyright notice. Is it possible for added volume on the page to effect it? I will change it again and hope for the best. In the meantime here is the weird text:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>peter searle::archive</title>
<link rel="stylesheet" type="text/css" href="main.css" />

<style type="text/css">
table.one
{
table-layout: fixed;
}

#loadarea {
font-family:Arial, Helvetica,sans-serif;
}
#loadarea img {
font-family:Arial, Helvetica,sans-serif;
border:1px solid #999;
background: #fff;
padding:0.2em;
}


</style>

<script type="text/javascript" src="thumbnailviewer2.js" defer="defer">

/***********************************************
* Image Thumbnail Viewer II script- ?0?10?0?110?0?10?0?148 Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>

<body>
<div id="maincontainer">
<div id="topsection"> <img border="0" src="images/name.gif" alt=""/></div>
<div id="contentwrapper">
<div id="loadarea" style="width: 605px" "height:690px"><img border="0" src="images/alex_connock.jpg" alt=""/>
<div class="innertube"> <b> <em></em></b></div>
</div>
</div>

<div id="leftside">
<script type="text/javascript">

/******************************************
* Scrollable content script II- ?0?10?0?110?0?10?0?148 Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/

iens6=document.all||document.getElementById
ns4=document.layers

//specify speed of scroll (greater=faster)
var speed=5

if (iens6){
document.write('<div id="container" style="position:relative;width:385px;height:610px;border:0px solid black;overflow:hidden">')
document.write('<div id="content" style="position:absolute;width:385px;left:0;top:0">')
}
</script>

<ilayer name="nscontainer" width=385 height=460 clip="0,0,175,160">
<layer name="nscontent" width=385 height=460 visibility=hidden>



<!--INSERT CONTENT HERE-->
<table class="one" border="0" width="100%">

<tr>
<td width="40%">Akbal Mohamed Popal</td><td width="60%"> Vice Chancellor of Kabul University</td> </tr>

<tr><td width="40%">Alan Bradley</td><td width="60%">The Wellcome Trust, The Sangar Centre</td> </tr>


<tr><td width="40%">Alan Johnson MP</td><td width="60%">The Secretary of State for Health</td> </tr>

<tr><td width="40%">Albert Roux</td><td width="60%"> Chef, Le Gavroche. </td> </tr>
<tr><td width="40%"></td><td width="60%">Recipient Legion d'honneur</td> </tr>

<tr><td width="40%"><a href="images/alex_connock.jpg" onclick="return false;" style="loadarea img" rel="enlargeimage::click" rev="loadarea" class="noborder"/>Alex Connock</a></td><td width="60%">Ten Alps (co-founder with Sir Bob Geldof)</td> </tr>

<tr><td width="40%"><a href="images/andrea_bocelli1.jpg" onclick="return false;" style="loadarea img" rel="enlargeimage::click" rev="loadarea" class="noborder"/>Andrea Bocelli</a></td><td width="60%">Tenor</td> </tr>

<tr><td width="40%"> Andrew Dilnot CBE</td><td width="60%">Principal, St Hughes Coll., Oxford / </td> </tr>

<tr><td width="40%"></td><td width="60%">documentary presenter</td> </tr>

<tr><td width="40%"> Andrew Winter</td><td width="60%">TV presenter, Selling Houses etc.</td> </tr>

<tr><td width="40%"><a href="images/andy_burnham.jpg" onclick="return false;" style="loadarea img" rel="enlargeimage::click" rev="loadarea" class="noborder"/>Andy Burnham MP</a></td><td width="60%">Chief Secretary to the Treasury</td> </tr>

<tr><td width="40%"><a href="images/andy_harrison.jpg" onclick="return false;" style="loadarea img" rel="enlargeimage::click" rev="loadarea" class="noborder"/>Andy Harrison</a></td><td width="60%">CEO of Easyjet</td> </tr>

<li<tr><td width="40%"><a href="images/andy_sanders.jpg" onclick="return false;" style="loadarea img" rel="enlargeimage::click" rev="loadarea" class="noborder"/>Andy Sanders</td><td width="60%">Co-Founder of the Puccino's franchise</a></td> </tr>

<tr><td width="40%"> Angela Huth</td><td width="60%"> Novelist </td> </tr>

<tr><td width="40%"><a href="images/anita_rodick.jpg" onclick="return false;" style="loadarea img" rel="enlargeimage::click" rev="loadarea" class="noborder"/>Anita Rodick (1942-2007)</td><td width="60%">Founder of The Body Shop</a></td> </tr>

<tr><td width="40%"><a href="images/anne-marie_duff.jpg" onclick="return false;" style="loadarea img" rel="enlargeimage::click" rev="loadarea" class="noborder"/>Anne-Marie Duff</td><td width="60%">Actress</a></td> </tr>

<tr><td width="40%"><a href="images/anthony_horowitz.jpg" onclick="return false;" style="loadarea img" rel="enlargeimage::click" rev="loadarea" class="noborder"/>Anthony Horowitz</td><td width="60%">Childrens author</a></td> </tr>
?tr><td width="40%"><a href="images/anthony_k???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????</td><td width="60%">P??????????????????????????? ??????????????????



And so on..........

Many Thanks.

jscheuer1
12-10-2007, 02:59 AM
You have:



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

on the page, but the server is serving it using UTF-16. Twey would know more about why that's messing things up and how to change it than I do though.

Al Fresco
12-10-2007, 08:15 AM
Hmm. You have me really confused now John. Should I be using a different "Content-Type" or charset? And should I be saving my codes in UTF-16, UTF-8, or western (mac OS roman)? I have never considered this bit before.

jscheuer1
12-10-2007, 08:30 AM
I had hoped Twey would have come back to this thread, but so far he hasn't. As I said, he would know more about it. I usually stick to the client side.

However, I can say that your meta http-equiv="Content-Type" tag is being overridden by the server as UTF 16. That much is clear. Now, from what I can tell from Googling UTF 16, it will cause some characters to be served with some of their bits removed.

Here's where I get a little sketchy, I'm not sure if even charset=iso-8859-1 is what you want, but I know it should be better than UTF 16 for your content. There might be a better one though. So, that needs to be determined, and then, whatever charset is optimal needs to be configured on the server side, or, at the very least, the server needs to be configured to allow your meta http-equiv="Content-Type" tag to set the content type and that should then be set to the optimal charset.

How this (configuring the server) is done is just a bit beyond me though. There are several methods, hopefully you are familiar with one of them. If not, you can ask your host, or if you are hosting your own site, read up on the server software you are using's configuration.

Twey
12-10-2007, 10:18 AM
Hmm. I'm a little unsure of what to do here (or indeed what's happened to result in this situation) since it appears that all the rest of the file is valid UTF-16 except for that bit at the bottom (and bits of the DD copyright notices). How did you create this file?

Converting the whole thing to UTF-8 would probably better since your text is mostly Western -- UTF-16 requires two bytes for everything, but UTF-8 requires only one byte for ASCII-compatible text (at the expense of an extra byte per CJK character).

jscheuer1
12-10-2007, 10:39 AM
Another possibility is that the file itself is corrupt. Was it your intention to include all of those Asian characters?

djr33
12-10-2007, 11:02 AM
I'd suggest making a new file, and cutting/pasting any GOOD chunks and leaving any corrupt bits in first file, rewriting them.

Al Fresco
12-10-2007, 11:11 AM
OK you guys have really blinded me with science now. I'm a little out of my depth but I think we are making progress. I can safely say that there is not meant to be any Chinese.
The original file was created by me using text edit on a mac. Im not sure if I saved as western mac roman, utf-16 or utf-8 :o. I now know that the owner of the site has recently added images/lines to it himself on a mac and i suspect saved it using utf-16. I guess this explains the reason that some of it still works and some doesn't.
1.What should it be written and saved in (western mac roman, utf-16 or utf-8)?
2.And also should it be rich or plain text? I think the problem may be simply that I dont understand these options.

Thanks Heaps Guys.

jscheuer1
12-10-2007, 11:27 AM
All HTML source should be saved as plain text. That is probably the main problem, all, or at least most of those strange looking characters are probably proprietary formating code for whatever you saved the file as.

Plain text, and the character encoding for the plain text document should simply be whatever the default for plain text is.

The character encoding of the source file, the HTML file you will save as plain text with an extension of .htm or .html, is a separate issue than that used by the page when served. They can be related, but they are two separate issues.

Al Fresco
12-10-2007, 12:01 PM
OK John I think that's probably why then. Ah the learning curve!
Thanks John, Twey and Daniel.
I'll upload a new version ASAP and hope for the best.

djr33
12-10-2007, 12:08 PM
I use OSX as well. Never used Text Edit for editing webpages (unless you know how to fix the bugs-- I do occasionally, but only with caution), because it does strange things to the code. HTML is all of the bytes in the file, not just characters displayed in the document by text edit, so that may be part of it. You can likely dig up a new clone of SimpleText somewhere in the apps folder. I'd say use that, or download something better.

Al Fresco
12-10-2007, 12:15 PM
Nice one Daniel. I really learnt something there. What would you suggest as a download for OSX.

Twey
12-10-2007, 12:49 PM
1.What should it be written and saved in (western mac roman, utf-16 or utf-8)?The whole page should be in UTF-8. However, converting it is no good if the editor can't understand it properly.
2.And also should it be rich or plain text? I think the problem may be simply that I dont understand these options.Plain.

jscheuer1
12-10-2007, 01:34 PM
TextEdit does allow you to save as plain text:

http://www.askdavetaylor.com/how_do_i_save_html_files_from_textedit.html

Al Fresco
12-10-2007, 11:50 PM
Thanks John.
I have downloaded Taco Text Editor for OXS and had a play. It seems to work great and keeps things simple. The page is now reloaded : http://petersearle.com/list.html and seems to be working fine.

Just 1 question. It scrolls perfectly well in Safari, OK in Opera..... but causes extreme drowsiness in Firefox and Netscape. Could there be a reason/solution to this?

jscheuer1
12-11-2007, 06:05 AM
FF, Netscape - Mozilla in general (the engine these browsers are based upon) has, for many years been rather choppy with repetitive math scripts such as this one. This includes a great many type of scripts. It gets really bad when two such operations are occurring simultaneously. Fortunately that isn't the case with this script/page. FF is getting better. I have, I believe the latest, official release of FF (2.0.0.11), and it isn't too bad in it, but still is noticeably less smooth than Opera 9.24, IE 7, or Safari 3 Win.

A slower speed (2 seemed pretty good here in FF) would be smoother, but that is a definite trade-off.

Al Fresco
12-11-2007, 07:00 AM
Thanks for looking John.
Thats kinda weird as I have the same version of Firefox (mac) and it just crawls along on 2. I have had to put it up to 12 to see any progress in that browser. (same with netscape/mac).

Could something be coded to recognise different browsers ie. pc/mac as from what you are saying the difference seems huge.

jscheuer1
12-11-2007, 07:19 AM
Detecting Mozilla based browsers such as FF, NS, etc is easy:


if(typeof document.documentElement.style.MozOpacity=='string')
speed=12;

But that would suck on the PC in FF. Not being a Mac person, I can't say with confidence how to detect Mac. I have seen it done like so:


if(navigator.userAgent.indexOf('Mac')!=-1)

and I'm sure that used to work, and very likely still does. So, putting it all together we have:


//specify speed of scroll (greater=faster)
var speed=5;
if(navigator.userAgent.indexOf('Mac')!=-1 && typeof document.documentElement.style.MozOpacity=='string')
speed=12;

You could even go so far as:


//specify speed of scroll (greater=faster)
var speed=5;
if(navigator.userAgent.indexOf('Mac')!=-1 && typeof document.documentElement.style.MozOpacity=='string')
speed=12;
else if(typeof document.documentElement.style.MozOpacity=='string')
speed=2;

But, I would hesitate in wholeheartedly advising this. FF may improve. Its speed on your particular Mac and/or on my particular PC may not be typical for those OS's and there are many non-Mac OS's as well as many Mac OS's, not to mention the actual CPU speed of a given machine.

Al Fresco
12-11-2007, 08:24 AM
That's great John.:)
Works a treat on mac. Hope its not spinning your coffee off your table on the PC?
Thanks a lot for that.

1 further question (hope your not totally bored with this page yet). Would it be possible to have a control that launches the scroll in the middle of the list? Say at "M"..... but still allows you to scroll up or down.
I have one that takes you to the top but the list is so comprehensive that access at the middle would be very user friendly.

jscheuer1
12-12-2007, 02:22 PM
Not exactly, you cannot reliably scroll to a specific entry, but you can scroll to a specific pixel position. This position will vary slightly from browser to browser, but can be about at the middle.

First though, lets correct a minor problem with this script's controls:


<table width="375">
<tr><td><a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><img src="up.gif" border=0></a> <a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img src="down.gif" border=0></a></td></tr>
</table>

You will notice that if you click on the arrows, in at least some browsers, this reloads the page, and/or scrolls the page (not necessarily the scroller, but perhaps that as well) to the top if either has been scrolled down.

That's because of the meaning of # as an href. You can eliminate this by adding a return false onclick event to each a tag (additions red):


<table width="375">
<tr><td><a href="#" onclick="return false;" onmouseover="moveup()" onmouseout="clearTimeout(moveupvar)"><img src="up.gif" border=0></a> <a href="#" onclick="return false;" onmouseover="movedown()" onmouseout="clearTimeout(movedownvar)"><img src="down.gif" border=0></a></td></tr>
</table>

Once we do that, we can put any javascript expression as the href, as it will never be used, so why not put something that will look descriptive in the status bar of the browser? Like:


<table width="375">
<tr><td><a href="javascript:moveup();" onclick="return false;" onmouseover="moveup()" onmouseout="clearTimeout(moveupvar)"><img src="up.gif" border=0></a> <a href="javascript:movedown();" onclick="return false;" onmouseover="movedown()" onmouseout="clearTimeout(movedownvar)"><img src="down.gif" border=0></a></td></tr>
</table>

OK, back to your question. This:


crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"

is one of the two lines in the script that actually moves the scroller. It gets the scroller's top style, strips off the px and makes it a number and subtracts the increment (speed) and then appends px to it again and sets it as the scroller's new style.

We could do this:


crossobj.style.top=Math.floor(crossobj.offsetHeight/-2)+'px';

This sets the style to negative half the height. Now we can have:


<a href="javascript:center();"
onclick="crossobj.style.top=Math.floor(crossobj.offsetHeight/-2)+'px';return false;"><img
src="center.gif" border=0></a>

You will need a 'center.gif' to go with it, perhaps a circle with a dot in the middle, like a target. You could place it between the other two controls in the code:


<table width="375">
<tr><td><a href="javascript:moveup();"
onclick="return false;" onmouseover="moveup()" onmouseout="clearTimeout(moveupvar)"><img
src="up.gif" border=0></a> <a href="javascript:center();"
onclick="crossobj.style.top=Math.floor(crossobj.offsetHeight/-2)+'px';return false;"><img
src="center.gif" border=0></a> <a href="javascript:movedown();"
onclick="return false;" onmouseover="movedown()" onmouseout="clearTimeout(movedownvar)"><img
src="down.gif" border=0></a></td></tr>
</table>