Bogdan Lungu » JavaScript http://www.bogdan-net.com Internet and Web Development Sun, 06 Sep 2009 16:37:51 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 A JQuery plugin http://www.bogdan-net.com/archives/44 http://www.bogdan-net.com/archives/44#comments Wed, 21 Jan 2009 17:04:40 +0000 Lungu Bogdan http://www.bogdan-net.com/?p=44 This day I wanted to create a simple slide show composed from 5-7 images. I stopped over this plugin of Jquery called “jQuery Cycle Plugin”. It has a bunch of effects you can use and is very easy to install, run and configure for your needs.
http://malsup.com/jquery/cycle/

]]> http://www.bogdan-net.com/archives/44/feed 0 Valid XHTML 1.0 Strict pages with flash on them http://www.bogdan-net.com/archives/33 http://www.bogdan-net.com/archives/33#comments Mon, 16 Jul 2007 20:31:56 +0000 Lungu Bogdan http://www.bogdan-net.com/archives/33 Everyone knows there is a problem in having a valid XHTML 1.0 strict page when you want to use some flash on it. In another post I described how this can be done but unfortunately that thing wasn't complying with the XHTML 1.0 strict instead was fine for the pages validating using the Transitional Standard of W3C XHTML specifications.
Now I came back on this subject with a solution that fix the "Strict" problem, for this I appealed to a little help from Javascript using the getElemementById method.
To insert a flash code in a web page according to the adobe specification you have to use a code almost similar with this one:

PLAIN TEXT
CODE:
  1. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="590" height="400">
  2.     <param name="movie" value="swf/flash.swf">
  3.     <param name="quality" value="high">
  4.     <embed src="swf/flash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="590" height="400"></embed>
  5.   </object>

Above code will insert an flash movie with the width of 590 and the height of 400, the flash movie is called flash.swf and it is situated in the swf directory. This code will cause some errors (I will not tell you here which) and the page fails to validate.
My method is to remove all the flash code from the page and to insert it using a small external javascript file.
The javascript file we will call it flash.js and place it in the /js directory inside the site root and should have the following content:

PLAIN TEXT
CODE:
  1. function flash(){
  2. document.getElementById('flash').innerHTML = "<object width=\"590\" height=\"400\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"><param value=\"swf/flash.swf\" name=\"movie\"/><param value=\"high\" name=\"quality\"/><embed width=\"590\" height=\"400\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" quality=\"high\" src=\"swf/flash.swf\"/></object>";
  3. }

Be careful to write all this code on a single line because it is a string and a string in javascript can't be stretched on multiple lines. As you see we are using the document.getElementById('flash').innerHTML method to write some content on a div with the id flash. The page should have the following code:

PLAIN TEXT
CODE:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html>
  4. <head>
  5. <title>Insert valid Flash in XHML 1.0 Strict</title>
  6. <script type="text/javascript" src="js/flash.js">   
  7. </script>
  8. <style type="text/css">
  9. #flash {
  10. width: 590px;
  11. height: 400px;
  12. background-color: #777;
  13. }
  14. </style>
  15. </head>
  16. <body onload="flash()">
  17. <h1>Insert flash animation using javascript</h1>
  18. <div id="flash"></div>
  19. </body>
  20. </html>


The result will display a valid page with a flash on it. As you see we include the javascript external file and we load the flash() function from it using the body event onload. The flash code is not displayed and everything we have at View source is the empty div.
That's all.

]]> http://www.bogdan-net.com/archives/33/feed 1 SWFIR – great way to style images http://www.bogdan-net.com/archives/22 http://www.bogdan-net.com/archives/22#comments Sat, 10 Mar 2007 19:41:24 +0000 Lungu Bogdan http://www.bogdan-net.com/archives/22 SWFIR (swf Image Replacement), it is a great way to add some style to images inside a web page escaping from the limitations imposed by the HTML but respecting the standard design concepts. This is done using JavaScript and Flash. Using swfir is simple and you don't need any advanced knowledge about Flash or JavaScript. Just download the swfir_v1.zip and unzip it, then upload the 2 files (swfir.js and swfir.swf) from it to the same directory in your website. To make it work all you need to do is include the JavaScript file and then to choose the images that will be styled and features applied to them.
The .js file need to be included in the "head" of the document:

PLAIN TEXT
PHP:
  1. <script type="text/javascript" src="swfir.js"></script>

I will use some styling features to the following image:

PLAIN TEXT
PHP:
  1. <img src="picture.jpg" alt="Here is some alt text" id="pic2" />

To call swfIR at work you have to use something like:

PLAIN TEXT
PHP:
  1. <script type="text/javascript">
  2. window.onload = function(){
  3.   round = new swfir();
  4.   round.specify('src', 'swfir.swf');
  5.   round.specify('border-color', '#cccccc');
  6.   round.specify('border-width', '1');
  7.   round.specify('border-radius', '10');
  8.   round.specify('shadow-blur', '5');
  9.   round.swap("#pic2");
  10. }
  11. </script>

The code above need to be situated inside the "body" section. I used some parameters (there are more that can be used/tested) to style my "pic2" image.
The result is something like this:

Example

It works fine in Firefox 2.0 and IE 6.0, unfortunately on some cumputers with SP2 failed to run in IE 6.0, nut sure why but you can write to the SWFIR team.

]]> http://www.bogdan-net.com/archives/22/feed 0