blog.frande.dk » JavaScript http://blog.frande.dk imagine a world without me Fri, 02 Jul 2010 20:50:38 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 JavaScript Picture Slider http://blog.frande.dk/2009/03/24/javascript-picture-slider/ http://blog.frande.dk/2009/03/24/javascript-picture-slider/#comments Tue, 24 Mar 2009 15:15:50 +0000 Kristian Ellebæk Frandsen http://blog.frande.dk/?p=199
Hello, I was coding this little Picture Slider in JavaScript for a colleague and thought: Why not just share it with everybody else? So here it is people… It is not advanced, it is not high-tech… but it is simple! <html>   <head>     <title>Picture Slider</title>       <script type="text/javascript">     // Setup     var [...]]]>

Hello,

I was coding this little Picture Slider in JavaScript for a colleague and thought: Why not just share it with everybody else?

So here it is people… It is not advanced, it is not high-tech… but it is simple!

  1. <html>
  2.  
  3. <head>
  4.     <title>Picture Slider</title>
  5.  
  6.     <script type="text/javascript">
  7.     // Setup
  8.     var imagePath = "images/"; // Path to image-folder
  9.     var images = new Array("image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg"); // filenames of the images
  10.     var slideInterval = 1.5; // amount of seconds before sliding to the next image.
  11.  
  12.    // Variabels
  13.     var curImage = 0;
  14.  
  15.     // Fucntions   
  16.     function startSlide() {
  17.         setTimeout("nextSlide()", slideInterval * 1000);
  18.     }
  19.  
  20.     function nextSlide() {
  21.         var viewer = document.getElementById("imageViewer");
  22.         curImage = curImage + 1;
  23.  
  24.         if (images[curImage] == null)
  25.             curImage = 0;
  26.  
  27.         viewer.src = imagePath + images[curImage];
  28.  
  29.         setTimeout("nextSlide()", slideInterval * 1000);
  30.     }
  31.  
  32.     // Start the slider
  33.     startSlide();
  34.     </script>
  35. </head>
  36.  
  37. <body>
  38.  
  39.     <h1>Picture Slider</h1>
  40.     <br />
  41.     <img id="imageViewer" src="images/image1.jpg">
  42.  
  43. </body>
  44.  
  45. </html>

Just change the variables under the “setup” in the start of the JavaScript-code and change the src-parameter on the img-tag of the picture to show the first picture. Then the script will work.

Have fun !!

/KEF

]]> http://blog.frande.dk/2009/03/24/javascript-picture-slider/feed/ 0 JavaScript & CSS: styleFloat virker ikke i Firefox http://blog.frande.dk/2008/05/11/javascript-css-stylefloat-virker-ikke-i-firefox/ http://blog.frande.dk/2008/05/11/javascript-css-stylefloat-virker-ikke-i-firefox/#comments Sun, 11 May 2008 07:39:56 +0000 Kristian Ellebæk Frandsen http://blog.frande.dk/?p=50 Halløj,

Jeg sad forleden dag med et problem i Javascript, hvor jeg satte style-indstillingen styleFloat til at være ‘left’ på en span.
Det virkede fint i Internet Explorer, Opera osv., men i Firefox ville den bare ikke højrestille min span.

Jeg brugte en hel del tid på at undersøge problemet, og til sidst fik jeg det da også løst. Det hele startede med, at jeg sad med mit JavaScript-kode. Koden tilføjede en ekstra div (for nemhedens skyld kalder vi den fremover for sekundær div) til en i forvejen oprettet div (og for nemhedens skyld igen kalder vi denne for primær div). Den sekundær div indeholdte en span (der indeholdte noget tekst), mens den til sidst indeholdte et link. Den sekundære div havde desuden fået sat align=”right”. Planen var at linket skulle stå helt til højre, mens min span så skulle floates til venstre.

Da min kode i JavaScript ikke virkede, besluttede jeg mig for at udføre en test af det i ren HTML og CSS. Jeg lavede derfor en stump kode, der teste det. Og det virkede fint. Så nu var jeg 100 % klar over, at problemet var i JavaScript.

Efter noget søgen på internettet (Google er tilsyneladende min ven) fandt jeg et forum, hvori problemet stod beskrevet. I JavaScript, når man forsøger at sætte en float-indstilling på et element, skal man bruge style.styleFloat = <left|right|none>. Den brugte jeg også på mit element, men i følge diverse fora-indlæg, så fortolker Firefox ikke “styleFloat”. Dvs. Firefox sætter ikke en style=”float: left;” på elementet. Den eneste udvej for at løse problemet er tilsyneladende at lave en CSS-klasse, som nedenstående:

  1. .floatLeft
  2. {
  3.     float: left;
  4. }

Derefter skal man i JavaScript i stedet for at sætte indstillingen style.styleFloat = ‘left’, sætte className-indstillingen til ‘floatLeft’ (som er navnet på den CSS-klasse, jeg lavede).

Efter en kort test kunne jeg konstatere, at løsningen hjalp. Det er ikke en særlig dejlig løsning, men når Firefox ikke kan finde ud af det, så må man jo gå forbi problemet.

]]> http://blog.frande.dk/2008/05/11/javascript-css-stylefloat-virker-ikke-i-firefox/feed/ 0