JavaScript - How To Replicate A Flash Swf By Using Javascript
I'm not too familiar with javascript and usually do most of my animation/linking with flash. However my client does not want flash because it can't be displayed on the iPhone. If you go he
http://www.hosthabitat.com/think/bb2/index.html you will see a menu on the left that starts to scroll through the buttons while showing different images on the right. But if you hover over any button it stops on that image. The buttons are then linked to individual pages. I attempted to try and replicate this technique he http://www.hosthabitat.com/think/bb2/index_test.html However I am not sure how to write or modify my script so that it scrolls through the photos like my flash version does. Any help!!! I'm stuck! Similar TutorialsHi I want a javascript code that replicates the function of SQL group by clause. I tried in several ways but couldnt find the right approach. It would be of great help if someone could guide/do the code for this process. Thanks in advance. Calvin Hi there, A client of mine has asked me to change a flash component on his website to something that will work on the ipad/iphone etc. So my guess is that a javascript created slideshow would do the trick. Check out what I am meaning on this page: http://www.it-world.com.au/ It's the flash with "Our Services" "Our Products" "Contact" in it. Can anyone suggest a very easy javascript that I could manipulate to give this same scrolling effect on the click of a link. It needs to be very easy to make changes to as I have no js skills whatsoever other than copying, pasting and making minor changes to obvious pieces of script. hope someone can help! Thanks, Ross Hi, I'm currently working on a Flash pop-up that can be integrated in several websites. I'm currently testing the code. I've got a flash file with a semi-transparant background that loads over the complete page, it also closes the div with the flash content once the end of the swf is reached. The thing is, I want to prevent the user from scrolling whilst the swf is active. That's why I disabled the overflow-Y. Now I've got a javascript code that is supposed to change the body's overflow to visible again, and I'm calling to this code in the same frame as where I disable the div with the flash in it. But for some reason it isn't working. This is my complete Javascript code: Code: <script type="text/javascript"> <!-- Original: Gregor (legreg@legreg.de) --> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> var ie4 = (document.all) ? true : false; var ns4 = (document.layers) ? true : false; var ns6 = (document.getElementById && !document.all) ? true : false; function hidelayer(lay) { if (ie4) {document.all[lay].style.visibility = "hidden";} if (ns4) {document.layers[lay].visibility = "hide";} if (ns6) {document.getElementById([lay]).style.display = "none";} } function writetolayer(lay,txt) { if (ie4) { document.all[lay].innerHTML = txt; } if (ns4) { document[lay].document.write(txt); document[lay].document.close(); } if (ns6) { over = document.getElementById([lay]); range = document.createRange(); range.setStartBefore(over); domfrag = range.createContextualFragment(txt); while (over.hasChildNodes()) { over.removeChild(over.lastChild); } over.appendChild(domfrag); } } <!-- This is the part I added which I thought would show the scrollbar again after the flashpopup is finished --> function showbar(){ document.getElementsByName('body')[0].style.overflowY = 'visible'; } </script> And in the final frame of my flash animation I first stop the swf, and then call to both functions: //stops the movie stop(); //this is the code that triggers the function to hide the div, and the function that should show the scrollbar getURL("javascript:showbar();"); getURL("javascript:hidelayer('newlayer');"); I've also got an online webtest he http://www.haragara.com/banner_test/ And I've included all the files in a zip Can anyone tell me what I'm doing wrong? Is it possible to use GetVariable() on a variable outside the Main scene timeline? Im trying to get a variable that is set on "sprite 479" that is gonna run on frame #2.. the variable name is "myVariable" Code: function getElement() { var FlashArr = document.getElementsByName('myFlash'); return FlashArr[FlashArr.length-1]; } alert(getElement().GetVariable("myVariable")); I can only get variables located on the MainMovie sprite. Thank you. is there javascript i can use to keep certain tabs open on a flash drop down menu?
I am embedding a flash photo gallery object in an html page. The flash gallery has a param "thumbVisibility" that allows you to set the visibility of the thumbnails with the options "NEVER" and "ALWAYS." I have it set to "NEVER" so that the thumbs do not show when the object loads. That is how I want it. However, I would like to build a javascript method to create a toggle button to switch between "NEVER" and "ALWAYS" so that the thumbnails can be turned on and off by the end user. As a first step, I know that javascript can be used to pass params to flash objects but as a js noob I haven't been able to find a clear and concise tut to figure out how to do this. Of course, the second step is how to do this in a function where I could switch between the two options using a single toggle button. I would greatly appreciate it if someone could suggest an approach to the javascript required to solve this problem. Thanks in advamce for your assistance. hi, I have created a flash video that work on a php table (like php-nuke), this is seen well on my PC, instead with various screen the video size is not good. ON screen big the video is small, on screen small the video is big... How i can made a script that change the dimension of flash video ? any idea ? please help me.. Hi, I'm trying to get my webcam feed embeded as a flash object. I have the url to the swf generated by the webcam software. If I copy and paste the url into IE's address bar, the webcam shows. However, the same url embeded into html does not work. This directly in IE address bar works. But doesn't in any other browser: Code: http://ipaddresshere/axis-cgi/mjpg/video.swf?resolution=320x240&camera=1 I've looked through the code from the webcam (Axis) admin page and copied the code for the flash option. Here is the code: Code: <html> <head></head> <body> <script language="Javascript"> var width = "320"; var height = "240"; var width_height = 'width="' + width + '" height="' + height + '"'; var view_NeedFlashPluginTxt = "You need a Shockwave Flash plugin, get it from:"; document.write('<EMBED src="http://ipaddresshere/axis-cgi/mjpg/video.swf?resolution=320x240'+'&camera=1" ' + 'quality=high bgcolor=#000000 ' + width_height + ' TYPE="application/x-shockwave-flash" swLiveConnect=TRUE' + ' PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">' + '</EMBED>' + '<NOEMBED>' + view_NeedFlashPluginTxt + '<a href="http://www.macromedia.com/shockwave/download/">Macromedia</a>.' + '</NOEMBED><br>'); </script> </body> </html> and this is the html the Javascript outputs: Code: <EMBED height=240 type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash width=320 src=http://ipaddresshere/axis-cgi/mjpg/video.swf?resolution=320x240&camera=1 swLiveConnect="TRUE" bgcolor="#000000" quality="high"> </embed/> Can anyone spot anything wrong with the code or perhaps suggest why it isn't working? Hi can Javascript talk to the flash plugin to access the microphone functionality? if so how can i do this? Hi, I am working on a project in which I have to open my flash demo in a modal window. I got all the code for modal window and it is working great. The only problem is I am not able to open a flash file in modal window. Can any one guide me or suggest me how should I fix this. Thanks in advance. Vikrant I have 3 tabs with a flash video playing in each. If a user clicks on a video and then decides to move to another tab while the video is playing.... the video stops and the tab is switched. I am using the code below to achieve that. Code: onClick=player1.sendEvent('STOP'); player2.sendEvent('STOP'); player3.sendEvent('STOP'); this works fine if I have the tabs appearing in sequence with player1 embedded in the first tab, player2 in the second and player3 in the third. However, I wanted to randomize the tabs, in which case if tab 3 containing player3 appears first and is played and then the user switches to another tab the video keeps playing.... meaning the above code does not work in that instance. I am at a loss here cause i thought that the onClick event should be going through all the players and stopping them. website: http://tinyurl.com/ydalz2r (at the moment the tabs are displayed in sequence) Hi, I need a javascript that detects flash and replace z-index value. i have 2 div. div1 (alternate HTML content) has z-index=-3 and div2 (flash object) z-index=0. If flash is detected, do nothing. if flash is not detected, i would like to set div1 z-index to a positive 3. can someone please help me? Hello, I can tracking outgoing links now for html links. How can I track outgoing links in flash with jquery or something else? Best Regards Code: <html> <head> <meta charset="utf-8"> <title>Tracking outgoing links with JavaScript and PHP</title> </head> <body> <p><a href="http://www.google.com/">Test link to Google</a></p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script> $(function() { $('a').click(function() { $.post('http://www.example.com/trackol.php', { result: 'click' }, 'html'); }); }); </script> </body> </html> from: http://stackoverflow.com/questions/2077823/tracking-outgoing-links-with-javascript-and-php Hi Everyone, I must admit that I'm a newbie in writing javascript. Can anyone help me with a script that will enable me to display a flash movie on one of my sites. I will appreciate all your responses. Thank you. I'm trying to convert A world Population Counter from Flash into HTML/Javascript. But I'm having difficulties and It would be great if someone can help me out. The sample show a analog clock, But the html version I want should use just a digital clock, it's simpler I think http://www.webstylelabs.com/worldclock2.swf http://www.webstylelabs.com/actionscript.txt Here is my code, http://www.webstylelabs.com/clock.html So just plain input digital counter is ok I appreciate any help Hi everyone, I have successfully added Flash to my page but I want the flash animation to be inside the <div id="main">. For some reason when I put the <div id="flashcontent"></div> inside the main div it doesn't show up on the page. Please help. My code is below: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>MikeJamesDesigns</title> <link rel="stylesheet" type="text/css" href="cssEdit.css" /> <script type="text/javascript" src="js/flashobject.js"></script> <script type="text/javascript"> var fo = new FlashObject("bannerISRAEL.swf", "animationName", "450", "60", "8", "#FFFFFF"); fo.addParam("allowScriptAccess", "sameDomain"); fo.addParam("quality", "high"); fo.addParam("scale", "noscale"); fo.addParam("loop", "true"); fo.write("flashcontent"); </script> </head> <body> <!--<div class="tikiImage"> <img src="/Users/MikeJamesRossi/Desktop/cssEdit/images/tiki.png" alt="tikiTorch" height="1040px" width="1100px"/> </div>--> <div id="wrapper"> <div id="sitebranding"> </div><!--end of sitebranding div--> <div id="navigation"> <a href="home">Home</a> | <a href="about">About</a> | <a href="news">News</a> | <a href="images">Images</a> | <a href="home">Faq</a> | <a href="contact">Contact</a> </div><!--end of navigation div--> <div id="main"> <div id="flashcontent"></div> </div><!--end of main div--> </div><!--end of wrapper div--> </body> </html> My css file looks like this: #flashcontent { position: relative; top: 500px; left: 365px; width: 60px; heightx; background-color:red; z-index: ; } Any help would be greatly aprreciated!! Thanks Mike! Hi... Im in between a project in which I have to make and Online Radio for various languages Im using Javascript and HTML/CSS and confused on how and where n which way to get a Radio Player on my the web page!! Also whn if I get a Player on page...How would I go about to Make it to Play a Particular Online Radio!! Im using Javascript and HTML(and im not tooo keen on using FLASH as im not aware of it!!!) Pls sumbody help me on this ASAP !! Thanks !! Basically i have made a small gallery with a lightbox feature, and it half works. What i am trying to do is make the lightbox fade out the flash navigation like the rest of the page but it just seems to overlap my lightbox. Any ideas? Here is the link for the webpage: http://www.frozen-shy.webs.com/arts_signatures.html Here is the javascript code: Code: /* Table of Contents ----------------- Configuration Functions - getPageScroll() - getPageSize() - pause() - getKey() - listenKey() - showLightbox() - hideLightbox() - initLightbox() - addLoadEvent() Function Calls - addLoadEvent(initLightbox) */ // // Configuration // // If you would like to use a custom loading image or close button reference them in the next two lines. var loadingImage = 'loading.gif'; var closeButton = 'close.gif'; // // getPageScroll() // Returns array with x,y page scroll values. // Core code from - quirksmode.org // function getPageScroll(){ var yScroll; if (self.pageYOffset) { yScroll = self.pageYOffset; } else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict yScroll = document.documentElement.scrollTop; } else if (document.body) {// all other Explorers yScroll = document.body.scrollTop; } arrayPageScroll = new Array('',yScroll) return arrayPageScroll; } // // getPageSize() // Returns array with page width, height and window width, height // function getPageSize(){ var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { // all except Explorer windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if(yScroll < windowHeight){ pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if(xScroll < windowWidth){ pageWidth = windowWidth; } else { pageWidth = xScroll; } arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) return arrayPageSize; } // // pause(numberMillis) // Pauses code execution for specified time. Uses busy code, not good. // Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602 // function pause(numberMillis) { var now = new Date(); var exitTime = now.getTime() + numberMillis; while (true) { now = new Date(); if (now.getTime() > exitTime) return; } } // // getKey(key) // Gets keycode. If 'x' is pressed then it hides the lightbox. // function getKey(e){ if (e == null) { // ie keycode = event.keyCode; } else { // mozilla keycode = e.which; } key = String.fromCharCode(keycode).toLowerCase(); if(key == 'x'){ hideLightbox(); } } // // listenKey() // function listenKey () { document.onkeypress = getKey; } // // showLightbox() // Preloads images. Places new image in lightbox then centers and displays. // function showLightbox(objLink) { // prep objects var objOverlay = document.getElementById('overlay'); var objLightbox = document.getElementById('lightbox'); var objCaption = document.getElementById('lightboxCaption'); var objImage = document.getElementById('lightboxImage'); var objLoadingImage = document.getElementById('loadingImage'); var objLightboxDetails = document.getElementById('lightboxDetails'); var arrayPageSize = getPageSize(); var arrayPageScroll = getPageScroll(); // center loadingImage if it exists if (objLoadingImage) { objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px'); objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) + 'px'); objLoadingImage.style.display = 'block'; } // set height of Overlay to take up whole page and show objOverlay.style.height = (arrayPageSize[1] + 'px'); objOverlay.style.display = 'block'; // preload image imgPreload = new Image(); imgPreload.onload=function(){ objImage.src = objLink.href; // center lightbox and make sure that the top and left values are not negative // and the image placed outside the viewport var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2); var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2); objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px"; objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px"; objLightboxDetails.style.width = imgPreload.width + 'px'; if(objLink.getAttribute('title')){ objCaption.style.display = 'block'; //objCaption.style.width = imgPreload.width + 'px'; objCaption.innerHTML = objLink.getAttribute('title'); } else { objCaption.style.display = 'none'; } // A small pause between the image loading and displaying is required with IE, // this prevents the previous image displaying for a short burst causing flicker. if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } if (objLoadingImage) { objLoadingImage.style.display = 'none'; } objLightbox.style.display = 'block'; // After image is loaded, update the overlay height as the new image might have // increased the overall page height. arrayPageSize = getPageSize(); objOverlay.style.height = (arrayPageSize[1] + 'px'); // Check for 'x' keypress listenKey(); return false; } imgPreload.src = objLink.href; } // // hideLightbox() // function hideLightbox() { // get objects objOverlay = document.getElementById('overlay'); objLightbox = document.getElementById('lightbox'); // hide lightbox and overlay objOverlay.style.display = 'none'; objLightbox.style.display = 'none'; // disable keypress listener document.onkeypress = ''; } // // initLightbox() // Function runs on window load, going through link tags looking for rel="lightbox". // These links receive onclick events that enable the lightbox display for their targets. // The function also inserts html markup at the top of the page which will be used as a // container for the overlay pattern and the inline image. // function initLightbox() { if (!document.getElementsByTagName){ return; } var anchors = document.getElementsByTagName("a"); // loop through all anchor tags for (var i=0; i<anchors.length; i++){ var anchor = anchors[i]; if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){ anchor.onclick = function () {showLightbox(this); return false;} } } // the rest of this code inserts html at the top of the page that looks like this: // // <div id="overlay"> // <a href="#" onclick="hideLightbox(); return false;"><img id="loadingImage"></a> // </div> // <div id="lightbox"> // <a href="#" onclick="hideLightbox(); return false;" title="Click anywhere to close image"> // <img id="closeButton"> // <img id="lightboxImage"> // </a> // <div id="lightboxDetails"> // </div> // </div> var objBody = document.getElementsByTagName("body").item(0); // create overlay div and hardcode some functional styles (aesthetic styles are in CSS file) var objOverlay = document.createElement("div"); objOverlay.setAttribute('id','overlay'); objOverlay.onclick = function () {hideLightbox(); return false;} objOverlay.style.display = 'none'; objOverlay.style.position = 'absolute'; objOverlay.style.top = '0'; objOverlay.style.left = '0'; objOverlay.style.zIndex = '90'; objOverlay.style.width = '100%'; objBody.insertBefore(objOverlay, objBody.firstChild); var arrayPageSize = getPageSize(); var arrayPageScroll = getPageScroll(); // preload and create loader image var imgPreloader = new Image(); // if loader image found, create link to hide lightbox and create loadingimage imgPreloader.onload=function(){ var objLoadingImageLink = document.createElement("a"); objLoadingImageLink.setAttribute('href','#'); objLoadingImageLink.onclick = function () {hideLightbox(); return false;} objOverlay.appendChild(objLoadingImageLink); var objLoadingImage = document.createElement("img"); objLoadingImage.src = loadingImage; objLoadingImage.setAttribute('id','loadingImage'); objLoadingImage.style.position = 'absolute'; objLoadingImage.style.zIndex = '150'; objLoadingImageLink.appendChild(objLoadingImage); imgPreloader.onload=function(){}; // clear onLoad, as IE will flip out w/animated gifs return false; } imgPreloader.src = loadingImage; // create lightbox div, same note about styles as above var objLightbox = document.createElement("div"); objLightbox.setAttribute('id','lightbox'); objLightbox.style.display = 'none'; objLightbox.style.position = 'absolute'; objLightbox.style.zIndex = '100'; objBody.insertBefore(objLightbox, objOverlay.nextSibling); // create link var objLink = document.createElement("a"); objLink.setAttribute('href','#'); objLink.setAttribute('title','Click to close'); objLink.onclick = function () {hideLightbox(); return false;} objLightbox.appendChild(objLink); // preload and create close button image var imgPreloadCloseButton = new Image(); // if close button image found, imgPreloadCloseButton.onload=function(){ var objCloseButton = document.createElement("img"); objCloseButton.src = closeButton; objCloseButton.setAttribute('id','closeButton'); objCloseButton.style.position = 'absolute'; objCloseButton.style.zIndex = '200'; objLink.appendChild(objCloseButton); return false; } imgPreloadCloseButton.src = closeButton; // create image var objImage = document.createElement("img"); objImage.setAttribute('id','lightboxImage'); objLink.appendChild(objImage); // create details div, a container for the caption and keyboard message var objLightboxDetails = document.createElement("div"); objLightboxDetails.setAttribute('id','lightboxDetails'); objLightbox.appendChild(objLightboxDetails); // create caption var objCaption = document.createElement("div"); objCaption.setAttribute('id','lightboxCaption'); objCaption.style.display = 'none'; objLightboxDetails.appendChild(objCaption); } // // addLoadEvent() // Adds event to window.onload without overwriting currently assigned onload functions. // function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function'){ window.onload = func; } else { window.onload = function(){ oldonload(); func(); } } } addLoadEvent(initLightbox); // run initLightbox onLoad Any help is much appreciated xx Hi, Sorry for the (HELP!) addition in the title, but i'm just stumped here. I am trying to show and hide div layers when I click on a button in a flash movie. The flash movie is in it's own div and the content below is also in it's own div. Is there a way to call the function from flash so that content in another div is affected? The code to show and hid layers in html is working and is he Code: //visible layers function $_(IDS) { return document.getElementById(IDS); } function setVisible( IDS ) { var obj; var sel = $_('divContent').getElementsByTagName('div'); for (var i=0; i<sel.length; i++) { obj = sel[i].id; if (obj != IDS) { $_(obj).style.display = 'none'; } else { $_(obj).style.display != 'block' ? $_(obj).style.display="block" : $_(obj).style.display="none"; } } } window.onload = function() { setVisible('BIO'); }; </script> </head> <body> <div id="navigation"> <a href="#" onClick="setVisible('BIO'); return false;">Who I Am</a><span class="text4"> |</span> <a href="#" onClick="setVisible('News'); return false;">What's New</a><span class="text4"> |</span> <a href="#" onClick="setVisible('Portfolio'); return false;">Portfolio</a><span class="text4"> |</span> <a href="#" onClick="setVisible('Resume'); return false;">Resume</a> </div> <div id="divContent"> <div id="BIO" class='divElem'> <p>This is my content for bio</p> </div> <div id="News" class='divElem'> <pThis is my content for news</p> </div> <div id="Portfolio" class='divElem'> <p><This is my content for portfolio </p> </div> <div id="Resume" class='divElem'> <p>This is my content for resume</p> </div> </div> </body> Is there a way to call the function in flash on a button? Any help you can give would be GREATLY appreciated. Thanks and forever indebted. Gerry I am running some javascript code which generates a popup window associated with a spell checking program. The way the program works, is that it takes the text out of a text field (passed as an object), spell checks the string, then puts it back into the text area field. My text area is located within a flash form, and I am having trouble pointing to it. I am sure my spell checking program is working, as it works fine if I point to an html text area. Do I have to do something special to point to a flash form object? Here is my code: Code: <!--- Source the JavaScript spellChecker object ---> <script language="javascript" type="text/javascript" src="../Spellchecking/spellerpages-0.5.1/speller/spellChecker.js"> </script> <!--- Call a function like this to handle the spell check command ---> <script language="javascript" type="text/javascript"> function openSpellChecker() { // get the textarea we're going to check <!--- pointer to text area ---> var txt = window.activity.Summary; // give the spellChecker object a reference to our textarea // pass any number of text objects as arguments to the constructor: var speller = new spellChecker( txt ); // kick it off speller.openChecker(); } </script> Also, here is my text area: Code: <cfform format="flash" id="activity1" height="#formheight#" width="100%" style="#formstyle#" timeout="3600" wmode="transparent" name="activity" onLoad="#initVars#; onFormLoad();"> <cftextarea name="Summary" id="Summary" html="yes" maxlength="1000" tooltip="Summarize your entry here. The field has a 1000 character limit. This summary is included in the generated End of the Week reports." onChange="submitTemporary('Summary', Summary.text);requiredContent('summary');" onFocus="if(detailsBox.height>60){detailsBox.height=60;summaryBox.height=220;}"></cftextarea> </cfform> Any help on this issue would be much appreciated. Thanks, AeroNicko |