Multidesk.be » Forums » Webdevelopment & -scripting » Java script en Firefox ?

  • Pagina
  • 1 van 1
0 gasten lezen dit onderwerp.
^ Onderwerp geschreven door een gast op maandag 8 februari 2010 om 14:42:39.
Ik vroeg me af wat het probleem kan zijn dat scripts die ik van internet heb en gewoon werken onder Explore, niet werken onder Firefox?

Het betreft een script om plaatjes in te laten schuiven en een script voor een klok.
Ik kan geen fouten vinden (voor zover ik er verstand van heb)
Zijn er andere scripts nodig voor Firefox?
Of zijn er aanpassingen nodig om ze op alle browsers te laten werken?
^ Reactie #1 geschreven door thekid op maandag 8 februari 2010 om 15:04:17.
thekid's avatar
Multiviteit: 5273
Moderator
eigenlijk zijn er aanpassingen nodig om ze op internet explorer te laten werken, scripts in een uniform geschreven javascript werken normaal gezien op alle browsers

je kan evt wel eens de scripts hier delen, dan kunnen we meehelpen met deze aan te passen
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #2 geschreven door een gast op dinsdag 9 februari 2010 om 21:44:55.
Bedankt voor je reactie!!

Hierbij het script van de inkomende plaatjes.
(werkt dus wel onder Explore, maar niet onder Firefox of Google Chroom.


<script language="JavaScript1.1">
<!-- Beginning of JavaScript -

var imgurl=new Array("images/shopfoto-left1.jpg", "images/shopfoto-left2.jpg", "images/shopfoto-left3.jpg", "images/shopfoto-left4.jpg", "images/shopfoto-left5.jpg")

var x_finalpos=0

var y_finalpos=0

var standstill=6

// hierna niets meer aanpassen
var x_slices=6
var y_slices=4
var imgpreload=new Array()
for (i=0;i<=imgurl.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=imgurl[i]
}
var imgheight
var imgwidth
var screenheight
var screenwidth
var x_step=new Array()
var y_step=new Array()
var x_randompos=0
var y_randompos=0
var i_loop=0
var max_loop=20
var i_image=0
var width_slice
var height_slice
var cliptop=0
var clipbottom=height_slice
var clipleft=0
var clipright=width_slice
var spancounter=0
var pause=10
standstill=1000*standstill

function initiate() {
screenheight=document.body.clientHeight-imgheight-30
screenwidth=document.body.clientWidth-imgwidth-30
width_slice=Math.floor(imgwidth/x_slices)
height_slice=Math.floor(imgheight/y_slices)
cliptop=0
clipbottom=height_slice
clipleft=0
clipright=width_slice
i_loop=0
spancounter=0
if (document.all) {
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
var thisspan=eval("document.all.span"+spancounter+".style")
x_randompos=Math.ceil(screenwidth*Math.random())
y_randompos=Math.ceil(screenheight*Math.random())
thisspan.posLeft=x_randompos
thisspan.posTop=y_randompos
thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
clipleft+=width_slice
clipright+=width_slice
spancounter++
}
clipleft=0
clipright=width_slice
cliptop+=height_slice
clipbottom+=height_slice
}
}
explode_IE()
}

function changeimage() {
spancounter=0
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
var thisspan=eval("document.all.span"+spancounter+".style")
thisspan.posLeft=-5000
thisspan.posTop=-5000
spancounter++
}
}
spancounter=0
if (i_image>imgurl.length-1) {i_image=0}
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
var thisinnerspan=eval("span"+spancounter)
thisinnerspan.innerHTML="<img src='"+imgurl[i_image]+"'>"
spancounter++
}
}
imgwidth=document.all.span0.offsetWidth
imgheight=document.all.span0.offsetHeight
i_image++
initiate()
}

function explode_IE() {
spancounter=0
if (i_loop<=max_loop-1) {
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
var thisspan=eval("document.all.span"+spancounter+".style")
x_step[spancounter]=(x_finalpos-thisspan.posLeft)/(max_loop-i_loop)
y_step[spancounter]=(y_finalpos-thisspan.posTop)/(max_loop-i_loop)
thisspan.posLeft+=x_step[spancounter]
thisspan.posTop+=y_step[spancounter]
spancounter++
}
}
i_loop++
var timer=setTimeout("explode_IE()",pause)
}
else {
spancounter=0
clearTimeout(timer)
var timer=setTimeout("changeimage()",standstill)
}
}

if (document.all) {
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
document.write("<span id='span"+spancounter+"' style='position:absolute;left:-5000px'></span>")
spancounter++
}
}
spancounter=0
}

if (document.all) {window.onload=changeimage}
// - End of JavaScript - -->
</script>
^ Reactie #3 geschreven door thekid op dinsdag 9 februari 2010 om 23:31:18.
thekid's avatar
Multiviteit: 5273
Moderator
hebde gij nen website waarop je dit scriptje gebruikt? :) 't is altijd leuk om eens te kijken wat het juist doet
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #4 geschreven door thekid op woensdag 10 februari 2010 om 01:48:35.
thekid's avatar
Multiviteit: 5273
Moderator
Ik heb er zomaar random iets van gemaakt, omdat ik denk dat het zoiets is :)

zou normaal op alle browsers moeten werken, 'k heb het wel nog maar onder linux getest (mozilla)

om wat voorbeelden te hebben heb ik de afbeeldingen van een meeting gebruikt, hopelijk geen probleem :)

http://users.telenet.be/kidsoftware/tester2.html

Code hier
CODE
  1. <html>
  2. <head>
  3. <title>Tester Gast</title>
  4.         <style type="text/css">
  5.         .floatpic
  6.         {
  7.                 position: absolute;
  8.                 display: block;
  9.                 overflow: hidden;
  10.                 z-index: 100;
  11.         }
  12.         .label
  13.         {
  14.                 position: absolute;
  15.                 display: block;
  16.                 z-index: 101;
  17.                 background-color: #333333;
  18.                 padding: 3px;
  19.                 text-align: center;
  20.                 font-weight: 800;
  21.                 left: 10px;
  22.                 color: #ffffff;
  23.                 font-family: 'Verdana';
  24.                 font-size: 9px;
  25.                 letter-spacing: +1px;
  26.                 top: 10px;
  27.         }
  28.         .masterpic { left: 10px; top: 10px; position: absolute; display: block; visibility: hidden; }
  29.         </style>
  30.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  31.         <script text="text/javascript">
  32.         /*
  33.        
  34.                 Copyright - thekid 2010 - multidesk.be
  35.                
  36.                 License: GPL
  37.                
  38.                 Please include this message in your sourcecode!
  39.        
  40.         */
  41.         var imgs = new Array();
  42.         var SLICE_COUNT_X = 20, SLICE_COUNT_Y = 10;
  43.         var label = document.createElement('div');
  44.         label.className = 'label';
  45.         label.id = 'label';
  46.        
  47.         function addImg(imgurl)
  48.         {
  49.                 var index = imgs.length;
  50.                 imgs[index] = new Array();
  51.                 imgs[index][0] = new Image();
  52.                 imgs[index][0].src = imgurl;
  53.                 imgs[index][1] = -5000;
  54.                 imgs[index][2] = -5000;
  55.                 imgs[index][3] = document.createElement('div');
  56.                 imgs[index][3].id = 'image-' + index;
  57.                 imgs[index][3].className = 'masterpic';
  58.                 imgs[index][3].innerHTML = '<img src="' + imgurl + '" />';
  59.                 document.body.appendChild(imgs[index][3]);
  60.         }
  61.        
  62.         function createClips(x)
  63.         {
  64.                 imgs[x][4] = new Array();
  65.                 label.innerHTML = imgs[x][0].src;
  66.                 label.style.width = imgs[x][3].style.width;
  67.                 label.style.height = imgs[x][3].style.height;
  68.                 var sh = Math.ceil(parseInt(imgs[x][3].offsetHeight) / SLICE_COUNT_Y);
  69.                 var sw = Math.ceil(parseInt(imgs[x][3].offsetWidth) / SLICE_COUNT_X);
  70.                 imgs[x][3].width = sw + 'px';
  71.                 imgs[x][3].height = sh + 'px';
  72.                 for (var wclip = 0; wclip < SLICE_COUNT_X; wclip++)
  73.                 {
  74.                         var clipleft = wclip * sw,
  75.                             clipright = (wclip + 1) * sw;
  76.                         for (var vclip = 0; vclip < SLICE_COUNT_Y; vclip++)
  77.                         {
  78.                                 var cliptop = vclip * sh,
  79.                                     clipbottom = (vclip + 1) * sh;
  80.                                 var index = imgs[x][4].length;
  81.                                 imgs[x][4][index] = document.createElement('div');
  82.                                 document.body.appendChild(imgs[x][4][index]);
  83.                                 imgs[x][4][index].className = 'floatpic';
  84.                                 imgs[x][4][index].style.left = Math.floor(screen.width * Math.random());
  85.                                 imgs[x][4][index].style.top = Math.floor(screen.width * Math.random());
  86.                                 imgs[x][4][index].style.width = sw + 'px';
  87.                                 imgs[x][4][index].style.height = sh + 'px';
  88.                                 imgs[x][4][index].id = 'clip-' + x + '-' + wclip + '-' + vclip;
  89.                                 imgs[x][4][index].innerHTML = '<img src="' + imgs[x][0].src + '" style="margin-left: -' + clipleft + 'px;margin-top: -' + cliptop + 'px;" />';
  90.                         }
  91.                 }
  92.                 moveClips(currentPic);
  93.         }
  94.        
  95.         function destroyClips(x)
  96.         {
  97.                 for (var i = 0; i < imgs[x][4].length; i++)
  98.                 {
  99.                         document.body.removeChild(imgs[x][4][i]);
  100.                 }
  101.                 imgs[x][4] = new Array();
  102.                 createClips(currentPic);
  103.         }
  104.        
  105.         var currentIndex = 0;
  106.         var rebuildAtLeft = 10, rebuildAtTop = 10;
  107.         var currentPic = 0;
  108.         var moveTimeout = 30;
  109.         var pauseTimeout = 5000;
  110.         var loops = 100;
  111.  
  112.         function moveClips(x)
  113.         {
  114.                 var moved = 0;
  115.                 var col = 0, row = 0;
  116.                 for (var i = 0; i < imgs[x][4].length; i++)
  117.                 {
  118.                         var distancex = parseInt(imgs[x][4][i].style.left) - parseInt(rebuildAtLeft) - (col * parseInt(imgs[x][4][i].style.width));
  119.                         var distancey = parseInt(imgs[x][4][i].style.top) - parseInt(rebuildAtTop) - (row * parseInt(imgs[x][4][i].style.height));
  120.                         if (Math.abs(distancex) > 5 | Math.abs(distancey) > 5)
  121.                         {
  122.                                 moved++;
  123.                                 imgs[x][4][i].style.left = parseInt(imgs[x][4][i].style.left) - (distancex / (3 + Math.ceil(10 * Math.random())));
  124.                                 imgs[x][4][i].style.top = parseInt(imgs[x][4][i].style.top) - (distancey / (3 + Math.ceil(10 * Math.random())));
  125.                         }
  126.                         else
  127.                         {
  128.                                 imgs[x][4][i].style.left = parseInt(rebuildAtLeft) + (col * parseInt(imgs[x][4][i].style.width));
  129.                                 imgs[x][4][i].style.top = parseInt(rebuildAtTop) + (row * parseInt(imgs[x][4][i].style.height));
  130.                         }
  131.                         row++;
  132.                         if (row >= SLICE_COUNT_Y)
  133.                         {
  134.                                 row = 0;
  135.                                 col++;
  136.                         }
  137.                 }
  138.                 if (moved == 0)
  139.                 {
  140.                         setTimeout('destroyClips(' + currentPic + ');', pauseTimeout);
  141.                         // switch picture
  142.                         document.getElementById('image-' + currentPic).style.visibility = 'visible';
  143.                         document.getElementById('image-' + ((currentPic > 0) ? currentPic - 1 : imgs.length - 1)).style.visibility = 'hidden';
  144.                         currentPic++;
  145.                         if (currentPic >= imgs.length)
  146.                                 currentPic = 0;
  147.                 }
  148.                 else
  149.                 {
  150.                         setTimeout('moveClips(' + currentPic + ');', moveTimeout);
  151.                 }
  152.         }
  153.        
  154.         </script>
  155. </head>
  156. <body>
  157. </body>
  158. <script type="text/javascript">
  159.         addImg('http://s.multidesk.be/events/walibi08/pics/collage.jpg');
  160.         addImg('http://s.multidesk.be/events/walibi08/pics/map.jpg');
  161.         addImg('http://s.multidesk.be/events/walibi08/pics/scan2.jpg');
  162.         addImg('http://s.multidesk.be/events/walibi08/pics/scan1.jpg');
  163.         for (var x = 38; x <= 74; x++)
  164.                 if (x != 41 & x != 42 & x != 46 & x != 47)
  165.                 addImg('http://s.multidesk.be/events/walibi08/pics/' + x + '.jpg');
  166.        
  167.         document.body.appendChild(label);
  168.         setTimeout('createClips(0);', 1000);
  169. </script>
  170. </html>


Aanvulling

'k heb het ondertussen getest op firefox, chrome, opera, konqueror, internet explorer 8

man, ie8 heeft nen tragen js renderer :s

voor het op ie8 iets vlotter te laten draaien stel ik voor dat je de SLICE_COUNT_X & SLICE_COUNT_Y wat vermindert :)
Deze tekst werd het laatst bewerkt voor 2.34 % door thekid op woensdag 10 februari 2010 om 02:04:03.
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #5 geschreven door thekid op woensdag 10 februari 2010 om 12:33:30.
thekid's avatar
Multiviteit: 5273
Moderator
werkt zelfs op de BeZillaBrowser op Haiku :D
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
  • Pagina
  • 1 van 1

Snel-antwoordformulier
Toon uitgebreid antwoordformulier Bericht nalezen Bericht plaatsen