I need a Javascript or Ajax to load SWF files in a folder.
/swfdir
|_ test_1.swf
|_ test_2.swf
|_ test_3.swf
.
.
.
|_ test_50.swf
A folder has number of swf files. I want load all of them one by one, by replacing existing one. each flash should play for 10 secs, then it must be replaced with next swf file.
Please provide me a working snippet.
UPDATE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject 2 static publishing example page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
function loadSWFObjects() {
var i=1;
for(i=1;i<=50;i++) {
document.getElementById("mySWF").innerHTML =
"<object type=\"application/x-shockwave-flash\" data=\"SWFObjects/test_"i".swf\" width=\"300\" height=\"120\">";
}
}
</script>
</head>
<body>
<div>
<object id="mySWF" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="120">
<object type="application/x-shockwave-flash" data="SWFObjects/test_1.swf" width="300" height="120">
</object>
</div>
</body>
</html>
How to call that function after loading the page? This code is not working for me :(
Any help indeed.
thanks
At a minimum, your code isn't working because you have a syntax error here -- you're not concatenating your "i" value:
document.getElementById("mySWF").innerHTML =
"<object type=\"application/x-shockwave-flash\" data=\"SWFObjects/test_"i".swf\" width=\"300\" height=\"120\">";
It should be like this:
.../test_" + i + ".swf...
Given your requirement, you'd be much better off using something like Flowplayer. If you just use javascript, all you can do is something like setInterval(), and javascript won't know anything about the state of the swf -- if something prevents the swf from playing within 10 seconds (or whatever you set the interval at), the script will load the next swf anyway -- very brittle design. Flowplayer uses playlists where you can define a list of any length, and the next video will only play once the previous is done -- regardless of how long it takes. Take a look at this sample. I use JSON to return dynamic lists of variable length. Use whatever server-side language is at your disposal to inspect your file system and return the list of file names.
If you simply cannot use Flowplayer, note that HTML object syntax varies according to browser/version. I see that you're loading swfobject.js, yet you're not using any swfobject functionality. Why? Take a look at the swfojbect javascript API.
That said, the following script will handle the interval functionality:
var loadSWFObjects = function() {
var i = 1;
var sInt = setInterval(function() {
if(i >= 50) {
clearInterval(sInt);
}else{
i++;
}
document.getElementById("mySWF").innerHTML = "<object type=\"application/x-shockwave-flash\" data=\"SWFObjects/test_" + i + ".swf\" width=\"300\" height=\"120\">";
}, 10000);
}
And just do this if you want it to occur on page load:
window.onload = loadSWFObjects;
If you need a more flexible/modern onload handler, try this or google.
Related
I'm a noob and new to web-development and i'm overwhelmed with the multitude of languages. I got the basic understanding on whats going on but I still don't know where I am getting stuck.
I have a DS18B20 connected to my Raspberry Pi and I am able to fetch the temperature in the terminal. I am running the WebIOPi successfully as well and able to see the temperature in its default web page under Devices. So I was hoping to create my own web page that would do the exact same thing with other options for future. I got a hold of some tutorials on WebIOPi and i got 4 files. An HTML file, the JavaScript file, the CSS file and a Python file. In my understanding the HTML file contains the logic and links to other things like clickable buttons and backgrounds etc. The CSS file contains the background and maybe text, the JavaScript file contains animation and buttons? Here I get confused. Last but not least the Python file is what runs the code that contains sensor model and libraries. I configured the Webiopi config file with my sensors serial number as mentioned here: http://webiopi.trouch.com/OneWireTemp.html. I am loosely trying to follow this tutorial where I got most parts of the code: http://webiopi.trouch.com/Tutorial_Devices.html.
Now when I log into the webpage from my browser the background is displayed correctly, but nothing else. There is no box or button showing the temperature. Pictures are attached. I was hoping for a button like attached in the picture.
Any guidance or help would be appreciated!
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WebIOPi | UNB Temperature</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
<script type="text/javascript" src="/scripts/bacon.js"></script>
<link rel="stylesheet" type="text/css" href="/styles/bacon.css">
<script type="text/javascript">
// declare few global variables
var tmp;
webiopi().ready(init);
// defines function passed to webiopi().ready()
function init() {
// setup helpers to remotely control devices
tmp = new Temperature("tmp");
// automatically refresh UI each seconds
setInterval(updateUI, 1000);
}
// function called through setInterval
function updateUI() {
// call Temperature.getCelsius REST API
// result is asynchronously displayed using the callback
tmp.getCelsius(temperatureCallback);
}
// callback function used to display the temperature
function temperatureCallback(sensorName, data) {
// jQuery functions
$("#bt_heater").text(data + "°C");
}
bacon.js
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<div align="center">
<button id="bt_mode" onclick="toggleMode()"/><br>
<button id="bt_heater" onclick="toggleHeater()"/>
</div>
</body>
</html>
bacon.css
body {
background-color:#000000;
background-image:url('/img/wall.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
script.py
import webiopi
GPIO = webiopi.GPIO
AUTO = True
def loop():
if (AUTO):
tmpwebiopi.deviceInstance("tmp")
celsius = tmp.getCelsius()
print ("Temperature: %f" % celsius)
webiopi.sleep(1)
I do not know about your specific case, but to me it seems quite obvious that there is nothing to see here. You have been mixing up things quite a bit.
To clarify things
The HTML contains the logical structure of your website
the CSS contains the look and feel (design)
the JavaScript and the Python files contain (UI)-Logic
This is quite coarse and might deviate, but it should suffice as a start and should apply here.
The obvious errors in your code
The HTML file is incomplete. It should not stop in the middle of the script-section, there should be markup defining the buttons you want to display. Currently there is none, hence there is nothing to see (but the HTMl-body, which is added automatically - and since the background color is defined for the body it is displayed)
The JavaScript file does not actually contain JavaScript, but HTML, which is most likely not correct
At the moment all your JavaScript is located within the script-section of your HTML file. This is fine as long as your are just trying to work it out, but renders a separate JS-file useless at the moment.
All in all your HTML file should look more like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WebIOPi | UNB Temperature</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
<script type="text/javascript" src="/scripts/bacon.js"></script>
<link rel="stylesheet" type="text/css" href="/styles/bacon.css">
<script type="text/javascript">
// declare few global variables
var tmp;
webiopi().ready(init);
// defines function passed to webiopi().ready()
function init() {
// setup helpers to remotely control devices
tmp = new Temperature("tmp");
// automatically refresh UI each seconds
setInterval(updateUI, 1000);
}
// function called through setInterval
function updateUI() {
// call Temperature.getCelsius REST API
// result is asynchronously displayed using the callback
tmp.getCelsius(temperatureCallback);
}
// callback function used to display the temperature
function temperatureCallback(sensorName, data) {
// jQuery functions
$("#bt_heater").text(data + "°C");
}
</script></head>
<body>
<div align="center">
<button id="bt_mode" onclick="toggleMode()"/><br>
<button id="bt_heater" onclick="toggleHeater()"/>
</div>
</body>
</html>
My Current code that is WORKING but with minor style problems.
.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WebIOPi | UNB Temperature</title>
<script type="text/javascript" src="/webiopi.js"></script>
<link rel="stylesheet" type="text/css" href="/styles/bacon.css">
<script type="text/javascript">
// declare few global variables
var tmp;
webiopi().ready(init);
// defines function passed to webiopi().ready()
function init() {
// setup helpers to remotely control devices
tmp = new Temperature("tmp");
// automatically refresh UI each seconds
setInterval(updateUI, 1000);
}
// function called through setInterval
function updateUI() {
// call Temperature.getCelsius REST API
// result is asynchronously displayed using the callback
tmp.getCelsius(temperatureCallback);
}
// callback function used to display the temperature
function temperatureCallback(sensorName, data) {
// jQuery functions
$("#temp_disp").text(data + "°C");
}
</script></head>
<body>
<div align="center">
<button id="temp_disp" />
</div>
</body>
</html>
.CSS
body {
background-color:#000000;
background-image:url('/img/wall.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
Current view of the webpage!
I'm actually trying to access variable of other HTML file using JS.
I mean, I have a file (file1.htm) that open dialog box and I would like to send information of the file selected to another file (file2.htm) and modify a value in this file. I found solution but only for JS files, and not HTML :/
I had already done it with 2 files but file1a was the parent of the other, so I used
parent.framWin = window; in file2a and
framWin.divX=document.getElementById("one").offsetWidth; for example in file1a to modify the variable divX in file2a (I'm pretty sure this is not the best solution, but it works ;) ). Here, in this case, file1 and file2 are not parent, and they are just located in the same folder.
I tried <script type="text/javascript" src="file1.htm"> to access var but it doesn't seem to work.
Do you have any idea how I can accomplish this?
Thanks a lot!
(Here's my code :
file1.htm :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>SiteMap</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
</style>
<script type="text/javascript">
<!--
function OK(e){
var name = document.getElementById("dialog").value;
//Here I would like to do something like File2.NameSpace1 = name;
//And File2.modifyMyName(); // But here, it's another question, to use JS script in another file ;)
}
//-->
</script>
</head>
<body >
<form action='' method='POST' enctype='multipart/form-data'>
<input type='file' name='userFile' onchange="OK()" id="dialog">
</form>
</body>
</html>
and file2.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>SiteMap</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<script type="text/javascript">
<!--
var NameSpace1;
function modifyMyName(){
document.GetElementById("first").src = NameSpace1;
}
//-->
</script>
</head>
<body>
<div>
<img src ="" id="first" />
</div>
</body>
I know this won't work properly because there are some errors here in the syntax. But the problem is visible ;)
Thanks again :)
You can't simply modify the content of file on the server using client side code.
The examples you've cited just change the data that is loaded into the browser at the time the code runs while leaving the data on the server untouched.
There are two approaches you can take to this:
Store the changes in the browser.
In page one, use localstorage to record information about the change you want to make. (You'd probably want to convert the image into a data: scheme URL to achieve this given your example code).
In page two, have some more JS that reads from localstorage and uses that information to make the change to itself after it loads.
Send the changes to the server.
Submit a form (so you don't need to use client side code at all) or use Ajax to send information about the change to the server.
Have server side code read it and then store it in a session (if you want the change to be on a per-user basis) or somewhere more permanent (in a database if you are sensible but you could modify the file directly) (if you want it to be shared between users).
Page two would then be a server side program that would read that data and use it to generate the page.
You can use localStorage to perform this operation.
function OK(e){
var name = document.getElementById("dialog").value;
window.localStorage.setItem('dialogValue', "Name");
}
And In your file2.html
function modifyMyName(){
var NameSpace1 = window.localStorage.getItem('dialogValue');
document.GetElementById("first").src = NameSpace1;
}
Working on a solution for a client where they want to have three websites within one browser window, to interact with them without having to have multiple windows displayed. Originally I thought iframes would work, but the software used disables that functionality somehow, so after doing some research, I found that objects might do a similar function.
One issue that I'm having is that I want to be able to have sub windows have their content changed based upon actions in another object. For example if I have a link in object three to load a link into object two, I could. However I'm not having much luck in having them communicate between each other. Does anyone know of a way this can be achieved, if it can at all?
The current code that I'm working with to perform this action.
<html>
<head>
<title>AAA</title>
<script language="JavaScript">
function doPage(targetObjectPane) {
var objTag = document.getElementById(targetObjectPane);
if (objTag != null) {
objTag.setAttribute('data', 'http://www.toronto.ca/');
alert('Page should have been changed');
}
}
</script>
</head>
<body>
<div style="width:100%;height:100%;">
<div style="float:left;width:65%;height:100%;">
<object name="frameone" id="frameone" data="http://www.tsn.ca/" standby="loading data" title="loading" width="100%" height="100%" type="text/html">
Alternative Content
</object>
</div>
<div style="float:right;width:35%;height:100%;">
<object name="frametwo" id="frametwo" data="http://www.cbc.ca/" standby="loading data" title="loading" width="100%" height="50%" type="text/html">
Alternative Content
</object>
<object name="framethree" id="framethree" data="test.html" standby="loading data" title="loading" width="100%" height="50%" type="text/html">
Alternative Content
</object>
</div>
</div>
</body>
</html>
And within object frameThree,
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
Test
</body>
</html>
In a nutshell, the javascript attempt to manipulate object content has ran into undefined errors, as I assume being seperate sites, none of them can see each other as children of the same browser window. The current execution of doPage shows the function is undefined. If that function code is moved to test.html, then the referenced object name frameTwo is not found.
Because of same-origin protections in a browser, you cannot manipulate content across different domains. So from one domain, you cannot reach into another site's contents (in a frame or iframe) if that other site has a different domain.
Looking at your code, I think you probably want this:
Test
to be this:
Test
because "frametwo" needs to be passed to doPage('frameTwo') as a string.
When I try your code, I find that the <object> does not change the HTML it is displaying when the data attribute is changed. I don't know if that's by design or not. But, if you create a new <object> with the new data reference and insert it to replace the prior one, it does work like this:
function doPage2(targetObjectPane) {
var objTag = document.getElementById(targetObjectPane);
if (objTag) {
// create new object tag with new data reference
var newObj = document.createElement("object");
newObj.width = "100%";
newObj.height = "50%";
newObj.data = "http://www.toronto.ca/";
newObj.type = "text/html";
newObj.id = "frametwo";
newObj.name = "frametwo";
// insert new object tag
objTag.parentNode.insertBefore(newObj, objTag);
// remove old object tag
objTag.parentNode.removeChild(objTag);
}
}
Working demo: http://jsfiddle.net/jfriend00/K7r32/
Here's the situation:
Client wants a looping SWF file to pause for two seconds before it begins playing all over again (it's a nice build animation on a logo, but the logo doesn't stay on the screen for very long because the movie repeats so users can't see the logo for long. This is irrelevant, but good back story.)
They provided me with a SWF file, but not FLA. When I asked for the FLA I was told the hard drive that contained the FLA crashed and it cannot be retrieved. So, that is pretty much a dead-end.
Before I go and try to de-compile the SWF and all that fun stuff, I wanted to know if there was any way that this could be done with HTML and Javascript. That is:
Have the SWF loop
Pause the movie for two seconds before it restarts
What do you think?
This isn't easily possible with javascript, but it is very easy if you load the swf into another swf. You then have access to the main timeline of the original swf and you'd be able to control it. If you want to control a movie called targetMovie.swf you can do something like this:
var loader:Loader = new Loader();
loader.load(new URLRequest("targetMovie.swf"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
addChild(loader);
var logoMovie:MovieClip;
function onComplete(evt:Event):void{
logoMovie = MovieClip(loader.content);
// call pauseMovie at end of timeline
logoMovie.addFrameScript(logoMovie.totalFrames-1, pauseMovie);
}
function pauseMovie():void{
logoMovie.stop();
// delay for two seconds;
setTimeout(function(){
logoMovie.play();
}, 2000);
}
You could simulate this entirely in javascript with swfObject. You would need to time how long the animation is, add two seconds, and make that the time before the script restarts. heres a working example with the homestarrunner intro:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn-history/r409/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">
$(document).ready(function(){
startSwf()
})
var restartTime = 24500 //in milliseconds
function stopSwf(){
swfobject.removeSWF("swfLoop");
startSwf();
}
function startSwf() {
$("body").append("<div id='swfLoop'></div>");
swfobject.createSWF({data:"http://homestarrunner.com/newintro.swf", width:400, height:300}, null, "swfLoop");
setTimeout('stopSwf()', restartTime);
}
</script>
</head>
<body></body>
</html>
plug that in here: http://htmledit.squarefree.com/
Try this http://www.permadi.com/tutorial/flashjscommand/
I have been playing around with Scala/Lift/Comet/Ajax etc. recently. I came across a problem which boils down to this:
Summary
I want to update a specific div (by id) when a certain event occurs. If the div does not exist yet, it must be created and appended to the HTML body.
Currently I cannot get this to work when using the Lift framework.
Source File
LIFT_PROJECT/src/main/webapp/static/mouseViewTest.html:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
updateOrCreateMouseDiv('123', 'coords')
});
function updateOrCreateMouseDiv(uniqueId, coords) {
if ($('#mouse_'+uniqueId).length == 0) {
$('body').append('<div id=' + uniqueId + '>' + coords + '</div>');
}
$('#mouse_'+uniqueId).html(coords)
}
// ]]>
</script>
</head>
<body></body>
</html>
The Error
If I open the above file directly in a browser (file:///LIFT_PROJECT/src/main/webapp/static/mouseViewTest.html) it works i.e. a new div is created.
But if I run it through Lift/Jetty (http://localhost:8080/static/mouseViewTest) I get the following JavaScript error:
Chrome:
Uncaught Error: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7
Firefox (Firebug):
An invalid or illegal string was specified" code: "12
Comparing the Sources in Browser
When comparing the page sources in the browser, I can see only one difference, namely: Lift adds the following JavaScript just before the closing </body> tag:
<script type="text/javascript" src="/ajax_request/liftAjax.js"></script>
<script type="text/javascript">
// <![CDATA[
var lift_page = "F320717045475W3A";
// ]]>
</script>
Questions
Does anyone have an idea why this happens?
If I would want to move the JavaScript code into the Scala file (using Lift's JavaScript and jQuery support), what would the code look like?
Please note: When I used Jq("body") ~> JqAppend() to create new divs, it worked. I just didn't know how to check whether the div id already existed. Thats why I moved the code into the template, planning on using Lift's Call function to execute the JS function. And thats when these problems started...
Thanks!
I recently ran into a similar problem and, from what I've gathered, the problem is because the page when served by lift is served as XHTML and there are some issues when writing to the DOM if the page is XHTML vs. HTML. I don't know whether this is a bug with jQuery or Safari or if it's just something that's not possible in XHTML, but a quick way to fix it is to modify your Boot.scala to tell Lift to not use XHTML as the mime type with this line:
LiftRules.useXhtmlMimeType = false