HTML Help

semiotically · Joined: 28 May 2009 Posts: 20

Hi I downloaded a JS code, ascroll.js, for a Horizontal Scrollbar, myself new to JS.

It works really well offline with both 'background-color' and 'background-image' settings defined.

Yet Online it works well with 'background-color' and very jagged/ rough with 'background-image'.

I utilise a repeating background, I have stretched to great widths, reduced it to tiny filesize ~15kb, to no avail, can someone please explain why it affects the JS Scrollbar when the image is called from ther server?

Then perhaps implement a workaround...

The site is http://www.semiotically.com/ I have removed the background-image from the Scrollbar for the moment.

Thanks,

Sem.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3593 Location: Biloxi, MS

First, you shouldn't be calling the image from their server. That's called hotlinking and is a form of bandwidth theft. If they gave permission to hotlink, then no problem.

Do you have the link to where you got the menu code? There's a possibly they gave you a download link for the image(s) to use on your own server.

semiotically · Joined: 28 May 2009 Posts: 20

sorry the image is on my server (bluehost): uploaded via FTP.

semiotically · Joined: 28 May 2009 Posts: 20

Hi the scrolling is too fast I know! hehe It's for my grandad who's new to computers and mice, just kidding...

OK seriously have posted a link to comparison with 'background-images', you won't miss it:

http://www.semiotically.com/

Thank you guys,

Sem.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3593 Location: Biloxi, MS

OK. Just took a look at the site. Might try correcting these coding errors first: Quote: Result: 0 errors / 108 warnings

line 6 column 1 - Warning: <meta> element not empty or not closed
line 7 column 1 - Warning: <meta> element not empty or not closed
line 8 column 1 - Warning: <meta> element not empty or not closed
line 26 column 1 - Warning: <div> missing '>' for end of tag
line 33 column 10 - Warning: missing </a> before <p>
line 35 column 242 - Warning: <embed> is not approved by W3C
line 36 column 33 - Warning: discarding unexpected </a>
line 39 column 123 - Warning: inserting implicit <a>
line 39 column 123 - Warning: discarding unexpected </iframe>
line 39 column 25 - Warning: missing </iframe>
line 38 column 10 - Warning: missing </a> before </li>
line 41 column 6 - Warning: missing <li>
line 42 column 168 - Warning: inserting implicit <a>
line 42 column 168 - Warning: discarding unexpected </iframe>
line 42 column 25 - Warning: missing </iframe>
line 41 column 10 - Warning: missing </a> before </li>
line 44 column 6 - Warning: missing <li>
line 45 column 6 - Warning: <embed> is not approved by W3C
line 45 column 6 - Warning: <embed> element not empty or not closed
line 48 column 6 - Warning: <embed> is not approved by W3C
line 48 column 6 - Warning: <embed> element not empty or not closed
line 50 column 10 - Warning: missing </a> before <div>
line 60 column 18 - Warning: discarding unexpected </a>
line 62 column 110 - Warning: inserting implicit <a>
line 62 column 110 - Warning: discarding unexpected </iframe>
line 62 column 25 - Warning: missing </iframe>
line 61 column 10 - Warning: missing </a> before </li>
line 63 column 21 - Warning: missing <li>
line 64 column 124 - Warning: inserting implicit <a>
line 64 column 124 - Warning: discarding unexpected </iframe>
line 64 column 25 - Warning: missing </iframe>
line 63 column 25 - Warning: missing </a> before </li>
line 65 column 21 - Warning: missing <li>
line 66 column 135 - Warning: inserting implicit <a>
line 66 column 135 - Warning: discarding unexpected </iframe>
line 66 column 25 - Warning: missing </iframe>
line 65 column 25 - Warning: missing </a> before </li>
line 67 column 21 - Warning: missing <li>
line 68 column 141 - Warning: inserting implicit <a>
line 68 column 141 - Warning: discarding unexpected </iframe>
line 68 column 25 - Warning: missing </iframe>
line 67 column 25 - Warning: missing </a> before </li>
line 69 column 21 - Warning: missing <li>
line 71 column 10 - Warning: missing </a> before <li>
line 73 column 11 - Warning: missing </a> before <div>
line 83 column 18 - Warning: discarding unexpected </a>
line 85 column 11 - Warning: missing </a> before <div>
line 95 column 2 - Warning: discarding unexpected </a>
line 98 column 113 - Warning: inserting implicit <a>
line 98 column 113 - Warning: discarding unexpected </iframe>
line 98 column 122 - Warning: <br> element not empty or not closed
line 98 column 113 - Warning: missing </a> before <div>
line 98 column 25 - Warning: missing </iframe>
line 102 column 109 - Warning: inserting implicit <a>
line 102 column 109 - Warning: discarding unexpected </iframe>
line 102 column 118 - Warning: <br> element not empty or not closed
line 102 column 109 - Warning: missing </a> before <div>
line 102 column 25 - Warning: missing </iframe>
line 106 column 107 - Warning: inserting implicit <a>
line 106 column 107 - Warning: discarding unexpected </iframe>
line 106 column 116 - Warning: <br> element not empty or not closed
line 106 column 107 - Warning: missing </a> before <div>
line 106 column 25 - Warning: missing </iframe>
line 110 column 106 - Warning: inserting implicit <a>
line 110 column 106 - Warning: discarding unexpected </iframe>
line 110 column 115 - Warning: <br> element not empty or not closed
line 110 column 106 - Warning: missing </a> before <div>
line 110 column 25 - Warning: missing </iframe>
line 39 column 25 - Warning: <iframe> proprietary attribute "alt"
line 42 column 25 - Warning: <iframe> proprietary attribute "alt"
line 48 column 6 - Warning: <embed> attribute "width" has invalid value "800px"
line 48 column 6 - Warning: <embed> attribute "height" has invalid value "350px"
line 62 column 25 - Warning: <iframe> anchor "voila" already defined
line 62 column 25 - Warning: <iframe> proprietary attribute "alt"
line 62 column 25 - Warning: <iframe> attribute "height" has invalid value "350px"
line 62 column 25 - Warning: <iframe> attribute "width" has invalid value "800px"
line 64 column 25 - Warning: <iframe> anchor "voila" already defined
line 64 column 25 - Warning: <iframe> proprietary attribute "alt"
line 64 column 25 - Warning: <iframe> attribute "height" has invalid value "350px"
line 64 column 25 - Warning: <iframe> attribute "width" has invalid value "800px"
line 66 column 25 - Warning: <iframe> anchor "voila" already defined
line 66 column 25 - Warning: <iframe> proprietary attribute "alt"
line 66 column 25 - Warning: <iframe> attribute "height" has invalid value "350px"
line 66 column 25 - Warning: <iframe> attribute "width" has invalid value "800px"
line 68 column 25 - Warning: <iframe> anchor "voila" already defined
line 68 column 25 - Warning: <iframe> proprietary attribute "alt"
line 68 column 25 - Warning: <iframe> attribute "height" has invalid value "350px"
line 68 column 25 - Warning: <iframe> attribute "width" has invalid value "800px"
line 70 column 25 - Warning: <img> attribute "height" has invalid value "350px"
line 98 column 25 - Warning: <iframe> proprietary attribute "alt"
line 98 column 25 - Warning: <iframe> attribute "height" has invalid value "340px"
line 98 column 25 - Warning: <iframe> attribute "width" has invalid value "800px"
line 102 column 25 - Warning: <iframe> proprietary attribute "alt"
line 102 column 25 - Warning: <iframe> attribute "height" has invalid value "340px"
line 102 column 25 - Warning: <iframe> attribute "width" has invalid value "800px"
line 106 column 25 - Warning: <iframe> proprietary attribute "alt"
line 106 column 25 - Warning: <iframe> attribute "height" has invalid value "340px"
line 106 column 25 - Warning: <iframe> attribute "width" has invalid value "800px"
line 110 column 25 - Warning: <iframe> proprietary attribute "alt"
line 110 column 25 - Warning: <iframe> attribute "height" has invalid value "340px"
line 110 column 25 - Warning: <iframe> attribute "width" has invalid value "800px"
line 114 column 25 - Warning: <img> attribute "height" has invalid value "350px"
line 41 column 6 - Warning: trimming empty <li>
line 44 column 6 - Warning: trimming empty <li>
line 63 column 21 - Warning: trimming empty <li>
line 65 column 21 - Warning: trimming empty <li>
line 67 column 21 - Warning: trimming empty <li>
line 69 column 21 - Warning: trimming empty <li>
Ignore the line numbers unless they match ones you can reproduce in your editor.

CSS Errors
HTML Errors

Some errors may not be correctable if they come from a frame page you have no control over.

Coding to a XHTML 1.0 Transitional DocType requires stricter coding requirements.

Was trying to track down the part to control scroll speed if any. Too many scripts listed on your pages so do you have link where you found horizontal scroller?

semiotically · Joined: 28 May 2009 Posts: 20

Hi the file is: ascroll.js

It's pretty much a CPU issue the scrolling, I've tested on various family machines and the result correlates to this.

I will create Images that link to the Iframes, instead of keeping them open continuously (some will remain).

I might consider slowing the scrolling too once I've finished the other. I will amiss the background images as I prefer the functionality.

I downloaded Safari and it works like Opera, Firefox and IE, so maybe it was still loading the JS.

I've taken a lot of stick on the use of Iframes, it seems there is also support:

- http://forums.whirlpool.net.au/forum-replies-archive.cfm/605736.html
- http://www.dynamicdrive.com/forums/showthread.php?t=18597

It's still ongoing so I'm not concerned yet with the parsing as long as I can still get results I am looking for across the browsers I am testing for.

Thanks guys.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3593 Location: Biloxi, MS

You need to correct the coding errors. I can't stress that enough as parsing of your pages by browsers depends on it.

semiotically · Joined: 28 May 2009 Posts: 20

To put simply, I change it so often that until I settle on a design that works and I can get to work in my fave browser, it's too early to worry...

They all seem to work in firefox, safari, IE and Opera; otherwise please let me know,

thanks.