...

View Full Version : Newbie STUCK on compatibility problem



grittykitty
07-06-2011, 01:06 AM
I adapted (well, attempted to, at least) a quote/testimonial rotation script to fit into my website. The script works PERFECTLY on Firefox but after making my modifications, I killed it in IE...and being a total n00b to JavaScripting.....I'm totally stumped.

In Firefox, the script shows at the proper height. In Internet Explorer, the script is only shown at ~40 pixels and doesn't seem to be rotating through the different quotes (it still fades but it fades the same quote back and forth).

The obvious question: HOW DO I FIX IT?!!?

Original script was found at: http://www.caodesigns.com/blog/tutorials/create-a-javascript-rotating-quote-section.php?postID=33

My script is at: http://www.digitalctrl.org/help.html (right sidebar, in the "Testimonials" box).

But something I want to know for future reference.......what is it that causes things to be formatted differently across browsers? This cross browser INcompatability is giving me grey hairs. ;)

I've been lurking around your community for a while now.....I hope you gents don't mind my first post being a question. :)

If I need to reformat my post or do anything else to get assistance, please let me know so I can take care of it. :)

bullant
07-06-2011, 01:19 AM
.......what is it that causes things to be formatted differently across browsers? This cross browser INcompatability is giving me grey hairs. ;)


The most frequent cause is probably invalid html and/or css.

If you put your web page's url through the w3c validator (http://validator.w3.org/) it currently spits out 25 errors and 5 warnings.

You document is using html5 which is not yet officially released by the w3c and browser support for html5 currently varies between the browser manufacturers. The w3c validator for html5 is also not yet complete.

Bottom line: if you want to minimise the risk of browser incompatability my suggestion is to write validated XHTML or HTML4 and CSS2 code until HTML5 is officially released.

low tech
07-06-2011, 01:24 AM
Hi

error line 1 in

menu/script.js


Should only have javascript ---- yours seems to be full with HTML etc

in fact it looks the same as your Index page:(

LT

bullant
07-06-2011, 01:31 AM
I adapted (well, attempted to, at least) a quote/testimonial rotation script to fit into my website. The script works PERFECTLY on Firefox but after making my modifications, I killed it in IE...and being a total n00b to JavaScripting.....I'm totally stumped.


Maybe use this text rotation (with fade in/out) demo as a guide.

The testimonials start rotating automatically 1 second after the page finished loading.

You can add as many testimonials as you like to the html without having to touch the javascript.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#ssContainer div {
display: none;
filter:alpha(opacity=100);
opacity: 1;
}
</style>
<script type="text/javascript">
var curDiv = 0;
var fadeTimer;
var speed = 50;
var opacStep = 0.5;
var dirn = -1;
var curOpac = 10;
function fade(){
if(fadeTimer){clearInterval(fadeTimer);}
fadeTimer = setInterval(setOpacity,speed);
}
function setOpacity() {
curOpac = curOpac + (opacStep * dirn);
if(curOpac < 0){
swapDiv();
curOpac = 0;
dirn = 1;
fade();
return;
}
if(curOpac > 10){
curOpac = 10;
clearInterval(fadeTimer);
dirn = -1;
setTimeout(fade,1500);
return;
}
setOpacityCSS();
}
function swapDiv(){
for(i=0; i < oSsDivs.length; i++){
oSsDivs[i].style.display = 'none';
}
curDiv = (++curDiv > oSsDivs.length-1)? 0 : curDiv;
setOpacityCSS();
oSsDivs[curDiv].style.display = 'block';
}
function setOpacityCSS(){
if(typeof(oSsDivs[curDiv].style.opacity) == 'string'){
oSsDivs[curDiv].style.opacity = curOpac/10;
} else {
oSsDivs[curDiv].style.filter = 'alpha(opacity=' + curOpac*10 + ')';
}
}
window.onload=function(){
oSsDivs = document.getElementById('ssContainer').getElementsByTagName('div');
oSsDivs[curDiv].style.display = 'block';
setTimeout(fade,1000);
}
</script>
</head>
<body>
<div id="ssContainer">
<div>Testimonial 1</div>
<div>Testimonial 2</div>
<div>Testimonial 3</div>
<div>Testimonial 4</div>
<div>Testimonial 5</div>
</div>
</body>
</html>

grittykitty
07-06-2011, 08:09 PM
low_tech, thanks for the heads up. :) Turns out that menu/script.js pointed to......... ??? (read: nothing, a 404 page). Looks like it was for an extended menu script I started a while back but lost the motivation to fix. ...heh.

I did what I could to clear up the validation issues. There are two outstanding as I can't seem to figure out a way to remove the iframe border via CSS. Does anyone know if there is a way to remove iframe borders without specifying a border:0 in the target document (both targets point to other websites, one being Facebook).

bullant, thanks for the help. I'll be trying that here shortly and reporting back as soon as I can. :)

grittykitty
07-06-2011, 09:25 PM
bullant, THANK YOU x(a million). ;)

Works great and was super easy. I really, really appreciate it. :)

Hope you mates don't mind me asking a million questions... Is there a way to improve the text quality on IE8? It seems that the anti-aliasing on both text and images is removed when running through the script.

Also, does this multitude of issues still apply in IE9? I am considering installing it but may hold off so I can ensure that issues are corrected for IE8 users (I'm assuming that the majority of users in the US are using IE8).

bullant
07-07-2011, 01:45 AM
bullant, THANK YOU x(a million). ;)

Works great and was super easy. I really, really appreciate it. :)

Hope you mates don't mind me asking a million questions... Is there a way to improve the text quality on IE8? It seems that the anti-aliasing on both text and images is removed when running through the script.

Also, does this multitude of issues still apply in IE9? I am considering installing it but may hold off so I can ensure that issues are corrected for IE8 users (I'm assuming that the majority of users in the US are using IE8).

you're welcome :)

Would really need to see your actual code in order to try to work out your image quality issue.

Regarding "...this multitude of issues...", if you mean using html5 then probably yes but to a lesser extent because I believe IE9 is more html5 compliant than IE8.

But as I mentioned earlier, html5 is not officially released by the w3c yet and browser support for it varies. Also, there is a good chance that the final released html5 will at least in parts be different to what it is today.

Unless you must use html5 specific elements, my suggestion still is to use the Strict Doctype of either html or xhtml.

grittykitty
07-07-2011, 02:56 AM
Well...the issue with setting things to strict or another doctype is that the validation practically crashes.

When switching through the various HTML/XHTML types, I get 70-85 errors. Definitely enough to take me gasp a few times. ;)

Now, as far as the actual quality of the transition:

Lansing Computer Repair (http://www.digitalctrl.org) - The right sidebar, underneath the "Testimonials" header.

It's perfectly usable and since it's working just fine across all browsers, I'm willing to keep it as-is for now. I've been looking for something like this for quite some time now. :)

bullant
07-07-2011, 04:31 AM
Well...the issue with setting things to strict or another doctype is that the validation practically crashes.

When switching through the various HTML/XHTML types, I get 70-85 errors. Definitely enough to take me gasp a few timesIn your first post you said


This cross browser INcompatability is giving me grey hairs. ;)


Unfortunately if you have invalid html, the probability of having browser incompatibility issues is increased significantly.

If you change your doctype, like I suggested, you would also need to adjust the html to conform to that doctype.

When your code passes the w3c validator, the chances of browser incompatibility are reduced significantly.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum