javascript werkt wel in IE maar niet in FF

snietsel · 22 mrt 2010

op deze webpagina http://www.fotogravin.nl/GOOD.html heb ik een javascript waardoor de achtergrond heel mooi van kleur veranderd. Dit gebeurt echter alleen in IE en niet in FF. Voorheen werkte het in FF ook. Nu heb ik echter een DOCTYPE bovenaan staan en wil het niet meer. Omdat ik de boel wel graag netjes enzo wil hebben (mét DOCTYPE) probeer ik al dagen uit te vissen waar het aan ligt. Hier komt het denk ik door: <body onLoad="doit()" bgcolor="#dbdbc7">

het javascript waar ik het over heb is deze:
[JS]<script type="text/javascript">
//<![CDATA[

var hexChars = "0123456789ABCDEF";

function Dec2Hex (Dec) {
var a = Dec % 16;
var b = (Dec - a)/16;
hex = "" + hexChars.charAt(b) + hexChars.charAt(a);
return hex;
}

function bgChanger (end, step) {

if ( !step ) {
step = steps;
begin = document.bgColor.substr(1,6);
// alert(begin);
redA = begin.charAt(0) + begin.charAt(1);
red_valA = parseInt(redA,'16');
redB = end.charAt(0) + end.charAt(1);
red_valB = parseInt(redB,'16');
red_int = ((red_valB - red_valA) / step) * -1;
grnA = begin.charAt(2) + begin.charAt(3);
grn_valA = parseInt(grnA,'16');
grnB = end.charAt(2) + end.charAt(3);
grn_valB = parseInt(grnB,'16');
grn_int = ((grn_valB - grn_valA) / step) * -1;
bluA = begin.charAt(4) + begin.charAt(5);
blu_valA = parseInt(bluA,'16');
bluB = end.charAt(4) + end.charAt(5);
blu_valB = parseInt(bluB,'16');
blu_int = ((blu_valB - blu_valA) / step) * -1;
red = red_valA;
grn = grn_valA;
blu = blu_valA;
}
else
step = step -1 ;

red -= red_int;
red_round = Math.round(red);
red_hex = Dec2Hex(red_round);
grn -= grn_int;
grn_round = Math.round(grn);
grn_hex = Dec2Hex(grn_round);
blu -= blu_int;
blu_round = Math.round(blu);
blu_hex = Dec2Hex(blu_round);
document.bgColor = red_hex + grn_hex + blu_hex;

if ( step <= 0 ) {
document.bgColor = end;
// alert(count);
if ( ++count >= 10 ) count=0;
setTimeout("bgChanger('"+bgs[count]+"')", speed)
}
else
setTimeout("bgChanger('"+end+"','"+step+"')", speed)
}

var bgs=new Array("dbdbc7","eee3d0", "e4e0d9", "dbd1d3", "f2e4f0", "e1e1f2", "e3ebee", "e3eee8", "eaf2e0", "f3f3db");
var red, green, blue, red_int, green_int, blue_int;
var count = Math.round(9*Math.random());
var steps = 50;
var speed = 400;

function doit() {
document.bgColor = bgs[count++];
if ( count==10 ) count=0;
setTimeout("bgChanger('"+bgs[count]+"')", 2000);
}

//-->
//]]>
</script>[/JS]

Ik weet wel wat van html en css, maar javascript is voor mij behoorlijk abracadabra. Sorry hoor, maar als iemand weet hoe dit op te lossen.... zou heeel fijn zijn! http://www.helpmij.nl/forum/images/smilies/smile.gif

dankdank alvast
groeten!
Ans

majstro · 22 mrt 2010

Ik denk dat het komt doordat het bgcolor-attribuut niet meer ondersteund wordt in de laatste HTML- en XML-versies. Kennelijk ondersteunt FireFox daarom ook document.bgColor niet bij die versies. De oplossing is om de DOM API te gebruiken. Je creëert dan eerst een referentie naar het element waarvan je de stijl wilt aanpassen, bijvoorbeeld met x = document.getElementById(id), waarbij "id" de waarde van het id-attribuut van de body-tag is. En vervolgens pas je de stijl via die referentie aan: x.style.backgroundColor = kleurcode.

pepernoot · 22 mrt 2010

chrome

in chrome doet ie het wel...

maar waar het misschien aan licht is dat je begint met: [JS]var hexChars = "0123456789ABCDEF";[/JS]
Hoofdletters en later..
[JS]var bgs=new Array("dbdbc7","eee3d0", "e4e0d9", "dbd1d3", "f2e4f0", "e1e1f2", "e3ebee", "e3eee8", "eaf2e0", "f3f3db");[/JS]

geen hoofdletters... misschien ligt het daaraan dat ff dit niet leest.

dat je [JS]var bgs=new Array("DBDBC7","EEE3D0", "enz...");[/JS]
of je moet er een # teken voor zetten

je zou het ook
en waar is dit voor?? staat onderaan[JS]//-->
//]]>[/JS]

<body onLoad="doit()" bgcolor="#dbdbc7"> wat load hij hiermee??

majstro · 22 mrt 2010

Ik denk dat het komt doordat het bgcolor-attribuut niet meer ondersteund wordt in de laatste HTML- en XML-versies. Kennelijk ondersteunt FireFox daarom ook document.bgColor niet bij die versies. De oplossing is om de DOM API te gebruiken. Je creëert dan eerst een referentie naar het element waarvan je de stijl wilt aanpassen, bijvoorbeeld met x = document.getElementById(id), waarbij "id" de waarde van het id-attribuut van de body-tag is. En vervolgens pas je de stijl via die referentie aan: x.style.backgroundColor = kleurcode.

That Guy · 22 mrt 2010

-->
[JS]document.body.style.backgroundColor = '#hhhhhh';[/JS]:thumb:

snietsel · 22 mrt 2010

majstro zei:
Ik denk dat het komt doordat het bgcolor-attribuut niet meer ondersteund wordt in de laatste HTML- en XML-versies. Kennelijk ondersteunt FireFox daarom ook document.bgColor niet bij die versies. De oplossing is om de DOM API te gebruiken. Je creëert dan eerst een referentie naar het element waarvan je de stijl wilt aanpassen, bijvoorbeeld met x = document.getElementById(id), waarbij "id" de waarde van het id-attribuut van de body-tag is. En vervolgens pas je de stijl via die referentie aan: x.style.backgroundColor = kleurcode.

Sorry, snap ik niet. Het gaat me er ook niet om de achtergrond 1 kleurtje te geven, dat lukt me wel via css, maar om dat script te laten werken waardoor die achtergrond alsmaar heel langzaam van kleur verandert.
of begrijp ik je verkeerd?

snietsel · 22 mrt 2010

pepernoot zei:
in chrome doet ie het wel...

maar waar het misschien aan licht is dat je begint met: [JS]var hexChars = "0123456789ABCDEF";[/JS]
Hoofdletters en later..
[JS]var bgs=new Array("dbdbc7","eee3d0", "e4e0d9", "dbd1d3", "f2e4f0", "e1e1f2", "e3ebee", "e3eee8", "eaf2e0", "f3f3db");[/JS]

geen hoofdletters... misschien ligt het daaraan dat ff dit niet leest.

dat je [JS]var bgs=new Array("DBDBC7","EEE3D0", "enz...");[/JS]
of je moet er een # teken voor zetten

je zou het ook
en waar is dit voor?? staat onderaan[JS]//-->
//]]>[/JS]

<body onLoad="doit()" bgcolor="#dbdbc7"> wat load hij hiermee??

dank voor je snelle reactie. Heb ook even de boel in Chrome bekeken.
Ik zie in Chrome niet de kleuren die ik eerst had. Er zitten daar behoorlijke knalkleuren tussen. Het horen allemaal vrij subtiele kleuren en kleurovergangen te zijn. Dus in Chrome gaat ook iets fout met "kleurvertaling".

Heb de hoofdletters klein gemaakt, maar dat helpt niet... jammer
Heb # voor de kleurcodes gezet, maar dat gaf weer andere vieze (smaken verschillen) knalkleuren tussendoor. Dan gebeurt er blijkbaar ook iets vreemds.

Dat //]]> is erin gezet door "HTML Tidy" . Het bleek dat javascript tussen CDATA tags moest //<![CDATA[

en die <body onLoad="doit()"> ik neem aan dat deze geladen wordt:
function doit() {
document.bgColor = bgs[count++];
if ( count==10 ) count=0;
setTimeout("bgChanger('"+bgs[count]+"')", 2000);

Als je nog suggesties hebt, dank!
groet
Ans

snietsel · 22 mrt 2010

Vegras zei:
-->
[JS]document.body.style.backgroundColor = '#hhhhhh';[/JS]:thumb:

kun je dit iets uitgebreider toelichten? is voor mij geen gesneden koek (integendeel ;-)

That Guy · 22 mrt 2010

het was de code die majstro in text uitlegde. Als je in je 1e script-post regel 55:[JS]document.bgColor = red_hex + grn_hex + blu_hex;
[/JS]vervangt met [JS]document.body.style.backgroundColor = '#' + red_hex + grn_hex + blu_hex;[/JS]doet het mischien iets

Ik denk dat het komt omdat je nu een kleur opgeeft in de vorm rrggbb in plaats van #rrggbb - maar dit is maar n vermoeden

snietsel · 24 mrt 2010

Vegras zei:
het was de code die majstro in text uitlegde. Als je in je 1e script-post regel 55:[JS]document.bgColor = red_hex + grn_hex + blu_hex;
[/JS]vervangt met [JS]document.body.style.backgroundColor = '#' + red_hex + grn_hex + blu_hex;[/JS]doet het mischien iets

Ik denk dat het komt omdat je nu een kleur opgeeft in de vorm rrggbb in plaats van #rrggbb - maar dit is maar n vermoeden

DANK JE! Heb het aangepast. Krijg nu in elk geval wel achtergrondkleuren in FF (voorheen bleef het gewoon wit) maar de overgangen gaan schokkeriger dan in IE en er zitten foute kleuren tussen. In het Firebug venster zie ik dat er bij bepaalde waarden NULL staat. Bijv. bij Blu en Blu_Int en Green, etc. Snap niet waarom dat in IE dan wel goed gaat. Pff, dit is moeilijk zeg. Misschien moet ik naar een alternatief voor dit script gaan zoeken. ..
gr
Ans

That Guy · 24 mrt 2010

Dat komt omdat er meer van dit soort rare constructies inzitten: regel 18 en 70 bv:[JS]begin = document.bgColor.substr(1,6);
[/JS]het punt is dat er zoiets mee wordt gedaan:[JS]redA = begin.charAt(0) + begin.charAt(1);[/JS]ofwel, het pakt de 1e 2 characters, waarvan verwacht wordt dat het # rr ggbb is - maar dat klopt niet, want het is #r rggbb. Dus tsja... ik zou een nieuwe zoeken, dit is echt een vreselijk slecht script

(en dan helemaal die settimeouts, maargoed)

snietsel · 26 mrt 2010

opgelost met jquery color.js

HA! het is gelukt. Heb het oude script eruit gegooid. Ik vond een jquery plugin: color.js die zeer bruikbaar was. Heb hetzelfde effect ermee kunnen bereiken en het ziet er goed uit in IE, FF en Chrome.http://www.fotogravin.nl/GOOD.html

Ik heb nu dit in de HEAD:

HTML:

<script type="text/javascript">
$(document).ready(function(){
function animate_background() {
		$("body")
			//.animate({ queue: false, duration:  50000 })
			.animate({ backgroundColor: "#dbdbc7" }, 5000)
			.animate({ backgroundColor: "#eee3d0" }, 5000)
			.animate({ backgroundColor: "#e4e0d9" }, 5000)
			.animate({ backgroundColor: "#dbd1d3" }, 5000)
			.animate({ backgroundColor: "#f2e4f0" }, 5000)
			.animate({ backgroundColor: "#e1e1f2" }, 5000)
			.animate({ backgroundColor: "#e3ebee" }, 5000)
			.animate({ backgroundColor: "#e3eee8" }, 5000)
			.animate({ backgroundColor: "#eaf2e0" }, 5000)
			.animate({ backgroundColor: "#f3f3db" }, 5000, 'swing', animate_background);
}

$(document).ready(function(){
    animate_background(); 
});
});
</script>

en dan de body

HTML:

<body bgcolor="#dbdbc7">

dit is het gebruikte jquery color.js
[JS]/*
* jQuery Color Animations
* Copyright 2007 John Resig
* Released under the MIT and GPL licenses.
*/

(function(jQuery){

// We override the animation for all of these color styles
jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i,attr){
jQuery.fx.step[attr] = function(fx){
if ( fx.state == 0 ) {
fx.start = getColor( fx.elem, attr );
fx.end = getRGB( fx.end );
}

fx.elem.style[attr] = "rgb(" + [
Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0),
Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0),
Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0)
].join(",") + ")";
}
});

// Color Conversion functions from highlightFade
// By Blair Mitchelmore
// http://jquery.offput.ca/highlightFade/

// Parse strings looking for color tuples [255,255,255]
function getRGB(color) {
var result;

// Check if we're already dealing with an array of colors
if ( color && color.constructor == Array && color.length == 3 )
return color;

// Look for rgb(num,num,num)
if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];

// Look for rgb(num%,num%,num%)
if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];

// Look for #a0b1c2
if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];

// Look for #fff
if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];

// Otherwise, we're most likely dealing with a named color
return colors[jQuery.trim(color).toLowerCase()];
}

function getColor(elem, attr) {
var color;

do {
color = jQuery.curCSS(elem, attr);

// Keep going until we find an element that has color, or we hit the body
if ( color != '' && color != 'transparent' || jQuery.nodeName(elem, "body") )
break;

attr = "backgroundColor";
} while ( elem = elem.parentNode );

return getRGB(color);
};

// Some named colors to work with
// From Interface by Stefan Petre
// http://interface.eyecon.ro/

var colors = {
aqua:[0,255,255],
azure:[240,255,255],
beige:[245,245,220],
black:[0,0,0],
blue:[0,0,255],
brown:[165,42,42],
cyan:[0,255,255],
darkblue:[0,0,139],
darkcyan:[0,139,139],
darkgrey:[169,169,169],
darkgreen:[0,100,0],
darkkhaki:[189,183,107],
darkmagenta:[139,0,139],
darkolivegreen:[85,107,47],
darkorange:[255,140,0],
darkorchid:[153,50,204],
darkred:[139,0,0],
darksalmon:[233,150,122],
darkviolet:[148,0,211],
fuchsia:[255,0,255],
gold:[255,215,0],
green:[0,128,0],
indigo:[75,0,130],
khaki:[240,230,140],
lightblue:[173,216,230],
lightcyan:[224,255,255],
lightgreen:[144,238,144],
lightgrey:[211,211,211],
lightpink:[255,182,193],
lightyellow:[255,255,224],
lime:[0,255,0],
magenta:[255,0,255],
maroon:[128,0,0],
navy:[0,0,128],
olive:[128,128,0],
orange:[255,165,0],
pink:[255,192,203],
purple:[128,0,128],
violet:[128,0,128],
red:[255,0,0],
silver:[192,192,192],
white:[255,255,255],
yellow:[255,255,0]
};

})(jQuery);[/JS]

lijkt wel oké hè? ik ben d'r blij mee!!!
groeten!
Ans

javascript werkt wel in IE maar niet in FF

snietsel

Gebruiker

majstro

Nieuwe gebruiker

pepernoot

Gebruiker

majstro

Nieuwe gebruiker

That Guy

Meubilair

snietsel

Gebruiker

snietsel

Gebruiker

snietsel

Gebruiker

That Guy

Meubilair

snietsel

Gebruiker

That Guy

Meubilair

snietsel

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy