Results 1 to 4 of 4
  1. #1
    Lurker
    Join Date
    Aug 2015
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    My webpage won't display JavaScript in Chrome or Firefox

    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

  2. #2
    Silver Lounger
    Join Date
    Mar 2014
    Location
    Forever West
    Posts
    2,072
    Thanks
    0
    Thanked 259 Times in 248 Posts
    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.

  3. #3
    New Lounger
    Join Date
    Oct 2010
    Location
    Cambridge, UK
    Posts
    17
    Thanks
    1
    Thanked 4 Times in 4 Posts
    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.

  4. #4
    New Lounger
    Join Date
    Oct 2010
    Location
    Cambridge, UK
    Posts
    17
    Thanks
    1
    Thanked 4 Times in 4 Posts
    Here you go, you'll need to include jQuery and then this should work:

    Code:
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
            <script>
                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 = $("<div></div>", {
                        	"style":"position:absolute;top:0px;left:0px;"
                        }).append($("<div></div>", {
                        	"style":"position:relative"
                        }).append($("<img/>", {
                        	"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 < Amount; i++){
                 		Zpos[i] -= Speed[i];
                 		if (
                            ScrXpos[i] > WinWidth
                            ||
                            ScrXpos[i] < 0
                            ||
                            ScrYpos[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);
                }
            </script>
    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.
    Last edited by annoyingmouse; 2015-08-28 at 04:05. Reason: Improved answer

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •