My webpage won’t display JavaScript in Chrome or Firefox

Topic

New Reply

I am working on a webpage that runs perfectly in IE, but the JavaScript I used for shooting stars (which greatly enhances the beauty of the page, in my opinion) won’t work in Chrome or Firefox. I have checked, and I have Java enabled in both Chrome and Firefox. Here is my page (still in the works): http://www.angelrob.com/Christmas2015/Christmas15.html Can anyone tell me how I can get Chrome and Firefox to use the JavaScript? I have searched online, but found nothing so far that works. I am an amateur, so PLEASE DO talk down to me! I am also 72 years old.

DCGranny43

Reply | Quote

Replies

Outside of the problem you mentioned the only issue I had with your page was having to activate QuickTime. Of course it had to first be updated.

I have you beat, 35 for the 40th time.

Before you wonder "Am I doing things right," ask "Am I doing the right things?"

Reply | Quote

This actually seems like a fun thing to tweak. Would you be okay with me working on it over the weekend and I’ll try to get the script to work in more modern browsers? I don’t think it’s anything more than the script having a reliance on browser detection TBH. If we abstract that out using jQuery then we could get it up and running quite quickly as it’s simply a question of creating and then moving elements in the DOM.

Reply | Quote

Here you go, you’ll need to include jQuery and then this should work:

Code:

        
        
            var images = [
            	“data:image/gif;base64,R0lGODlhAwADAKEBAICAgP///////////yH5BAEKAAAALAAAAAADAAMAAAIERBx3BQA7”,
            	“data:image/gif;base64,R0lGODlhBQAFAMIDAAAAAICAgMDAwP///////////////////yH5BAEKAAIALAAAAAAFAAUAAAMJKDKqvCO+51QCADs=”,
            	“data:image/gif;base64,R0lGODlhBwAHAKECAAAAAMDAwP///////yH5BAEKAAMALAAAAAAHAAcAAAIMnGU5qOLnIotqVWsKADs=”,
            	“data:image/gif;base64,R0lGODlhCQAJAKECAAAAAMDAwP///////yH5BAEKAAMALAAAAAAJAAkAAAIQnCenuCa/nnSyJlQjbJerAgA7”,
            	“data:image/gif;base64,R0lGODlhCwALAKECAAAAAMDAwP///////yH5BAEKAAMALAAAAAALAAsAAAIUnC2nl8vSHIxvQmRz0xT36jChqBQAOw==”];
            var Amount = 10;
            var Ypos = [];
            var Xpos = [];
            var Zpos = [];
            var SpeedX = [];
            var SpeedY = [];
            var ScrXpos = [];
            var ScrYpos = [];
            var Speed = [];
            var Size = [];
            var Step = [];
            var WinHeight = $(window).height() – 20;
            var WinWidth = $(window).width() – 70;

            $(function(){
                for(var i = 0; i < images.length; i++){
                    var flake = $("
“, {
                    	“style”:”position:absolute;top:0px;left:0px;”
                    }).append($(“
“, {
                    	“style”:”position:relative”
                    }).append($(““, {
                    	“style”:”position:absolute;top:0px;left:0px;”,
                        “id”: “si”+i,
                        “src”: images[i]
                    })));
                    $(“body”).append(flake);
                }
                for (var i = 0; i < Amount; i++){
                  Speed[i] = (i+1) * 6 / Amount + 4; //speed range from 4 to 10
                  Xpos[i] = (Math.random() * WinWidth – WinWidth / 2) * (Amount – i / 3) / Amount;
                  Ypos[i] = (Math.random() * WinHeight – WinHeight / 2) * (Amount – i / 3) / Amount;
                  Zpos[i] = Math.random() * 900 * (Amount – i / 3) / Amount + 100;
                }
                fly();
            });
            function fly(){
            	var WinHeight = $(window).height() – 40;
            	var WinWidth = $(window).width() – 90;
            	var hscrll = $(window).scrollTop();
            	for (var i = 0; i  WinWidth
                        ||
                        ScrXpos[i]  WinHeight
                        ||
                        ScrYpos[i] < 0
                        ||
                        Zpos[i] <= 0)
                    {
              			Speed[i] = (i + 1) * 6 / Amount + 4;
              			Xpos[i] = (Math.random() * WinWidth – WinWidth / 2) * (Amount – i / 3) / Amount;
              			Ypos[i] = (Math.random() * WinHeight – WinHeight / 2) * (Amount – i / 3) / Amount;
              			Zpos[i] = Math.random() * 900 * (Amount – i / 3) / Amount + 100;
             		}
             		ScrXpos[i] = Xpos[i] / Zpos[i] * 100 + WinWidth / 2;
             		ScrYpos[i] = Ypos[i] / Zpos[i] * 100 + WinHeight / 2;
            		$("#si"+i).css("left", ScrXpos[i]);
                    $("#si"+i).css("top", ScrYpos[i] + hscrll);
            	}
                setTimeout(function(){
                    fly();
                }, 20);
            }
        

Working here.

There’s an odd issue whereby the scroll bars suddenly appear and I’ve base64 encoded the image to reduce the requirements for added image files. Should be easy enough for you to work out what does what. The interesting thing about reusing old code is that it used to require lots of browser detection. jQuery means that that isn’t needed anymore… in fact it could be argued that modern browsers should all act pretty much the same. You’ll probably need to wrap it all in a $(function(){…}) within your script tag as well.

Hope that helps.

EDIT

I’ve included everything you’ll need to implement it on the link. Just copy and paste the code to the head of your page and it should work… probably remove the old one first though.

Reply | Quote