|
JavaScript - Help With Simple Flash Clock To Html Javascript
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 Similar TutorialsHi... 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 !! 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! Javascript for clock: Code: function showTime (dateObj) {
thissecond=dateObj.getSeconds();
thisMinute=dateObj.getMinutes();
thisHour=dateObj.getHours();
// change thisHour from 24-hour time to 12-hour time by:
// 1) if thisHour < 12 then set ampm to "a.m." otherwise set it to "p.m."
var ampm = (thisHour < 12) ? "a.m." : "p.m.";
// 2) subtract 12 from the thisHour variable
thisHour = (thisHour > 12) ? thisHour - 12 : thisHour;
// 3) if thisHour equals 0, change it to 12
thisHour = (thisHour == 0) ? 12 : thisHour;
// add leading zeros to minutes and seconds less than 10
thisMinute = thisMinute < 10 ? "0"+thisMinute : thisMinute;
thisSecond = thisSecond < 10 ? "0"+thisSecond : thisSecond;
return thisHour + ":" + thisMinute + ":" + thisSecond + ampm;
}
HTML for page: Code: <?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">
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 3
Tutorial Case
The Chamberlain Civic Center
Author:
Date:
Filename: ccc.htm
Supporting files: back.jpg, calendar.css, calendar.js, ccc.css, ccc.jpg, logo.gif
-->
<title>The Chamberlain Civic Center</title>
<link href="ccc.css" rel="stylesheet" type="text/css" />
<link href="calendar.css" rel="stylesheet" type="text/css" />
<script src="calendar.js" type="text/javascript"></script>
</head>
<body>
<div id="head">
<script type="text/javascript">
calendar("March 25, 2011");
</script>
<img src="ccc.jpg" alt="Chamberlain Civic Center" />
</div>
<div id="links">
<table><tr>
<td><a href="#">Home</a></td><td><a href="#">Tickets</a></td>
<td><a href="#">Events</a></td><td><a href="#">Tour</a></td>
<td><a href="#">Directions</a></td><td><a href="#">Hours</a></td>
<td><a href="#">Packages</a></td><td><a href="#">Contact Us</a></td>
</tr></table>
</div>
<div id="main">
<p id="firstp"><img src="photo.jpg" alt="" />March is another banner month
at the Chamberlain Civic Center, with performances of the award-winning
musical, <span>The Producers</span> by the Broadway Touring Company on
March 4, 5, and 6. Tickets are going fast, so order yours today.</p>
<p>Celebrate the season on March 11 with the Chamberlain Symphony and their
special selection of classical music with Spring themes. The next day,
March 12, exercise your mind by attending the Charles Dickens mystery
<span>Edwin Drood</span>.</p>
<p>Jazz lovers have a lot to celebrate in March with a visit from <span>The
Jazz Masters</span> on the 17th. Then on March 24, enjoy the music of The
Duke with <span>An Ellington Tribute</span> performed by the Jazz Company
of Kansas City.</p>
<p>Pins, bottles, plates, and chairs are flying at the Chamberlain Civic
Center in March. <span>The Taiwan Acrobats</span> return with another
amazing performance on Sunday, March 13. On March 20, the <span>Madtown
Jugglers</span> get into the act with their unique blend of comedy, juggling,
and madness.</p>
<p>Enjoy a classical brunch every Sunday afternoon with music provided by the
Carson Quartet. Seating is limited, so please reserve your table.</p>
</div>
<address>
The Chamberlain Civic Center ·
2011 Canyon Drive ·
Chamberlain, SD 57325 ·
(800) 555-8741
</address>
</body>
</html>
CSS for page: Code: /*
New Perspectives on JavaScript, 2nd Edition
Tutorial 3
Tutorial Case
Filename: ccc.css
This file contains styles used in the ccc.htm file
*/
body {margin: 0px; background: white url(back.jpg) repeat-y scroll 820px 0px}
#head {width: 750px; height: 150px; padding: 5px}
#links {clear: right; width: 750px; padding: 0px}
#links table {width: 750px; font-family: Arial, Helvetica, sans-serif;
font-size: 8pt; margin: 0px}
#links table td {text-align: center; background-color: white;
border: 1px solid black; letter-spacing: 5; padding: 2px}
#links table a {text-decoration: none; color: rgb(223,29,29); width: 100%}
#links table a:hover {color: white; background-color: rgb(223,29,29)}
#main {width: 750px; font-family: Arial, Helvetica, sans-serif; padding: 10px}
#main p {text-align: justify; font-size: 9pt}
#firstp:first-line {font-variant: small-caps}
#main img {float: right; margin: 0px 0px 10px 10px}
#main p span {color: rgb(223,29,29)}
address {width: 750px; font-size: 8pt; font-style: normal; color: rgb(223,29,29);
font-family: Arial, Helvetica, sans-serif; text-align: center;
border-top: 1px solid rgb(223,29,29); padding-bottom: 10px}
Does anyone know how to put my clock into my HTM and CSS files to have it appear at the top left of the page? Please, help. Thanks. I am pretty new to javascript and descided to test my skills by making a javascript clock using the computers time it works but I know the way I am doing it isn't very good you can see the code below Code: <!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>clock</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var minutes = 0;
var seconds;
var hour = 0;
var minute = new Date().getMinutes();
minutes += minute;
var hours = new Date().getHours();
hour += hours;
var time_period = "";
if(hour > 12){
hour = hour-12;
time_period = "PM";
}else {
time_period = "AM";
}
function working_clock(){
var time = new Date;
seconds = time.getSeconds();
var clock = document.getElementById('clock');
if(seconds == 59){
minutes+=1;
}
if(minutes == 60){
minutes = 1;
hour++;
}
if(minutes < 10){
var minute_digit_two = 0;
clock.innerHTML = ("time: "+hour+":"+minute_digit_two +minutes+":"+seconds+" "+time_period);
}else {
clock.innerHTML = ("time: "+hour+":"+minutes+":"+seconds+" "+time_period);
}
setTimeout("working_clock()",1000);
}
window.onload = working_clock;
</script>
</head>
<body>
<div id="clock"></div>
</body>
</html>
heres where you can see it in action http://the-test.comoj.com/files/working-clock.html im just asking if there are any errors or if theres a better way to do this Hello everybody. I need to make a javascript (and only javascript, no php and such) clock, that the hours and the minuets can be updated manually by an html form with 2 fields. I cant find a way to do this. thanks in advance, danbb. Hi Everyone, I'm new to this forum, and would love to get some help! I have a digital clock for my HTML website, which is created using images and javascript functions. This is the clock I used: http://www.ricocheting.com/code/java.../digital-clock I want to ammend it so that it displays a different color image between 8am and 5pm automatically. Something like: if (hr >= 08 && hr <=17 ) { //24 hour format run the time function to display clock images in yellow } else { run the time function to display clock images in green } Hope someone can help me with this code!! Hi everyone, I am new to javascript, i have not read any books, but i am trying to figure out the language on the go. I am stuck with a simple program that i am trying to create for a class project. Any suggestions or help would much appreciated. My code is very simple in which i would like to convert a number value into different format of temperature. My code is listed below, it is not working in the browser. Help me fix it. ********************************************************* <!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> <meta content="text/html" http-equiv="Content-Type" /> <title>E6B temp conversion</title> <script type="text/javascript"> function ConvertTempToC(TempConversionC) { var temperature = TempConversionC.F.value; if (temperature.length > 0) { TempConversionC.TempC.value = Math.round(5/9 * (temperature - 32)); document.write(TempConversionC.TempC.value); } } </script> </head> <body> <b>Fahrenheit to Celsius</b> <br/> <input size="6" name="F"/> <br/> <input onclick="ConvertTempToC(this.form)" value="Calculate Celsius" type="button" name="Submit11"/> <br/> <input readonly="readonly" size="6" name="TempC"/> </body> </html> Thanks for clicking on the link and i presume while you are here on my thread yo u will try to help me So here is the situation. I am building webpage that displays a clock , a ticker box and a countdown(alarm clock). I have found many previously coded alarm clocks/countdown timers but they dont do what i need. Then what do you need you might be asking yourself?! - I need a countdown timer with background in MySQL database(there will be multiple events in that database) and then checks which is the next one( Alarms will be in HH:MM format so they can be activated every day), after the check it displays a countdown(logical eh?) until that event - when it reaches that event it should redirect to some other site(which will return user to the same site after 15 min pause) and then All over again, check which is next, countdown , redirect , AGAIN This website is designed not to be clicked or anything - it should work by itself. Are YOU able to help me? (Just a fair warning - Im a newb in javascript so dont be too harsh on me) hello all, this is my first time on this site and i can usally find all the information i need on google. However iv run into a problem while coding a countdown timer for students in my school i will be hosting it as a mobile website. what im having problems with is getting not the system time, but 1 syncronized time source ex. The official U.S.time or any other single time source if that one will not be the best. any suggestions? ps. i am completely new to js so make any suggestions and please explain throughly. Thanks! I am very new to javascript and really can't figure out what I am doing wrong. I am trying to make a 1 page store that allows you to type in an item and select the color and size you want for that item. If you don't fill in a field, an alert message should tell you that. If all the fields are filled in, a "thank you for purchasing ____________" message should appear in a text area at the bottom of the page. This is my current code: Code: <html>
<head>
<script>
function processform()
{
if ( document.form1.item1.value == "")
{
alert("No Item Chosen")
}
else
{
chosen = ""
len = document.form1.c1.length
for (i = 0; i <len; i++) {
if (document.form1.c1[i].checked) {
chosen = document.form1.c1[i].value
}
}
if (chosen == "") {
alert("No Color Chosen")
}
}
else {
itemname = document.form1.item1.value;
itemcolor = document.form1.c1.value;
itemsize = document.form1.size.value;
document.form1.txtarea1.value = "Thank you for purchasing a " + itemsize + " " + itemcolor + " " + itemname;
}
}
</script>
</head>
<body>
<h1>Store</h1>
<br/><br/>
<form name="form1">
<h4>What item would you like to buy?</h4>
<input type="text" name="item1" value="" /><br />
<br/><br/>
<h4>Color</h4>
<input type="radio" name="c1" value="blue" /> Blue<br />
<input type="radio" name="c1" value="red" /> Red<br />
<input type="radio" name="c1" value="green" /> Green<br />
<input type="radio" name="c1" value="yellow" /> Yellow<br />
<br/><br/>
<h4>Size</h4>
<select name="size">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="extra large">Extra Large</option>
</select>
<br/><br/>
<button onclick="processform()">Purchase</button>
<br/><br/>
<textarea rows="2" cols="40" name = "txtarea1"> </textarea>
</form>
</body>
</html>
When I press the purchase button, no alert message is shown, nor does anything get displayed in the textarea. What am I doing wrong? Hi, I have a webpage with a world clock. On the clock page are 12 buttons (World Cities). When the user clicks these buttons. The time for the relevant world city is displayed. (The time is updated by an on.click function for each individual button. That either subtracts or adds the hours from GMT. For example. If the time is GMT 18:00:00. The user clicks the Paris button and the function adds 1 hour to result in 19:00:00) However. If the GMT time is for example 21:00:00 and the user clicks the Tokyo button (GMT+9 hours). The time displayed is 30:00:00. So I have been trying to work out how I can stop the time adding past 23:59:59. This is probably so simple which is probably why I cant find any help online. It has stumped me and any help would be appreciated. I have copied and pasted my code below in the hope that helps. Thanks in advance if you can offer any advice. Code: <script>
function start() {
GMToffset = 0;
t=setInterval('digitalclock()',500);
}
function digitalclock()
{
var today=new Date();
var hours=today.getHours() + GMToffset;
var minutes=today.getMinutes();
var seconds=today.getSeconds();
minutes=checkTime(minutes);
seconds=checkTime(seconds);
hours=checkTime(hours);
document.getElementById('txt').innerHTML=hours+":"+minutes+":"+seconds;
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
function updatetime1() {
GMToffset = -3;
}
function updatetime2() {
GMToffset = -4;
}
function updatetime3() {
GMToffset = -7;
}
function updatetime4() {
GMToffset = -10;
}
function updatetime5() {
GMToffset = -11;
}
function updatetime6() {
GMToffset = -13;
}
function updatetime7() {
GMToffset = +9;
}
function updatetime8() {
GMToffset = +8;
}
function updatetime9() {
GMToffset = +7;
}
function updatetime10() {
GMToffset = +1;
}
function updatetime11() {
GMToffset = +0;
}
function updatetime12() {
GMToffset = +3;
}
</script>
<div align="center">
<input type="button" onclick="updatetime1()" value="Time in Buenos Aires" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime2()" value="Time in New York" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime3()" value="Time in San Francisco" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" /><br>
<input type="button" onclick="updatetime4()" value="Time in Hawaii" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime5()" value="Time in Fiji" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime6()" value="Time in Sydney" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" /><br><br>
<body onload="start()">
<div id="txt"></div>
</div>
<div align="center">
<input type="button" onclick="updatetime7()" value="Time in Tokyo" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime8()" value="Time in Hong Kong" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime9()" value="Time in Bangkok" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" /><br>
<input type="button" onclick="updatetime10()" value="Time in Rome" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime11()" value="Time in London" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime12()" value="Time in Moscow" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
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 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. 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 there javascript i can use to keep certain tabs open on a flash drop down menu?
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! 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 can Javascript talk to the flash plugin to access the microphone functionality? if so how can i do this? 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) |
|||||||