hi there I'm new in java script and recently work on a project, its drag and drop interactive and the codes will load a random background image and a gif at each drag and drop box. everything works fine on google chrome but the project will not load the backgrounds in Firefox.! is there something wrong with codes or firefox ?! stop: function(event, ui) { var images = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg","11.jpg","12.jpg","13.jpg","14.jpg","15.jpg","16.jpg","17.jpg","18.jpg","19.jpg","20.jpg","21.jpg","22.jpg","23.jpg","24.jpg","25.jpg","26.jpg","27.jpg","28.jpg","29.jpg","30.jpg","31.jpg"]; var offset = ui.box.offset(); var a = "ui.box.width()"; var b = "ui.box.height()"; var pic = images[Math.floor(Math.random()*images.length)]; document.getElementById("mmmsh").style.opacity= i; vid.volume = i; uvid.volume = u; ui.box.css({ background:" url('images/de3.gif'), url(images/" + pic + "),", backgroundRepeat: 'no-repeat', borderImage: "url(images/17.jpg) 10 10 round", borderImageSlice: "1% 1%", backgroundSize: "85.3% 27.3% , 100% 100%", borderTopWidth: "1em 1em", paddingleft: "100em 100em", }) } Code (markup): thanks!
it's jQuery not pure javascript. if it works in Chrome you should probably search the solution of the background problem in CSS not javascript. Is the comma before the last quotes necessary? Also there is a space before first url that maybe not a problem but it's not correct I think. Also second url is not in quotes that probably is not the problem though but check. background:" url('images/de3.gif'), url(images/" + pic + "),", Code (markup): Also here document.getElementById("mmmsh").style.opacity= i; vid.volume = i; uvid.volume = u; Code (markup): where the variables i and u are coming from? I don't see them defined. May be global or defined before in the function? The comma here is wrong: paddingleft: "100em 100em", Code (markup):
hi thanks for replay as I see, all this codes works fine in chrome! I and U vars are using to change the volume of page sound, and they works fine on Firefox and chrome, the only thing that dont works on firefox is two backgrounds and loading them! as you see I use two backgrounds in each box creating, one is randome image and second is a gif and I customize each other style by an space something like "paddingleft: "100em 100em", ", maybe you know better way that works with firefox. thanks
Did you made the changes I suggested? Specially background:" url('images/de3.gif'), url(images/" + pic + "),", Code (markup): to background:" url('images/de3.gif'), url(images/" + pic + ")", Code (markup): I can't reproduce the whole code you have so I can't debug my self. I'm guessing the problem is CSS related.