|
JavaScript - Noobie Question - Screen Redraw Stuff
Just wondering if it's possible to prevent a page displaying until the content is fully loaded.
I have a form with a load of check boxes that reloads itself on each user click and it would be nice to smooth things out a little, e.g. hold a screenshot of the page until the reload is complete and then instantly show that one. Stupid question? Cheers, Nick Similar TutorialsHello, I am working on making a starting hub website for myself. I have four images that are the background image in a table. I would like to have all four pictures be something different every time the page is loaded. Currently I can only get one image to rotate and the rest just show blank with no picture at all. I would like to have all four pictures show and have them rotate their image on page refreshes. Is this possible using just Javascript and HTML? Here is my code: This is my Javascript Code: <script type="text/javascript"><!--
var backgroundImages=new Array(5);
backgroundImages[0]="images/backgrounds/firework.jpg";
backgroundImages[1]="images/backgrounds/friends.jpg";
backgroundImages[2]="images/backgrounds/firework.jpg";
backgroundImages[3]="images/backgrounds/friends.jpg";
backgroundImages[4]="images/backgrounds/tigers.jpg";
onload=function(){
var e=(document.getElementById)?document.getElementById("myTableId"):(document.all)?document.all.myTableId:(document.layers)?document.myTableId:null;
if(!e)return true;
e.style.backgroundImage="url("+backgroundImages[Math.floor(Math.random()*backgroundImages.length)]+")";
}
//--></script>
and here is how I am calling the elements inside of the table: Code: <table cellpadding="1" cellspacing="0" border="0"> <tr> <td id="myTableId" width="302" height="422"> <a href="http://www.meachaverse.com/" target="_blank">meachaverse</a><br /> <a href="http://www.mittnmusic.com/" target="_blank">mittnmusic</a><br /> <a href="http://worldbycarey.blogspot.com/" target="_blank">worldbycarey</a><br /> <a href="http://www.certaingravity.com" target="_blank">certaingravity</a><br /> </td> <td id="myTableId" width="302" height="422"> <a href="http://www.meachaverse.com/" target="_blank">meachaverse</a><br /> <a href="http://www.mittnmusic.com/" target="_blank">mittnmusic</a><br /> <a href="http://worldbycarey.blogspot.com/" target="_blank">worldbycarey</a><br /> <a href="http://www.certaingravity.com" target="_blank">certaingravity</a><br /> </td> ANY Help with this would be much appreciated!!! The site is http://davenport80.comli.com Hi, I'm trying to update an element on my page after every iteration of a loop. I'm using a simple innerHTML to achieve this, however, what happens is the page freezes during the entirety of the loop, and finally updates when the loop finishes. PHP Code: // below function is triggered by clicking some element function go() { for (var i = 1; i < len; ++i) { document.getElementById("output").innerHTML += "Processing #" + i; doStuff(); } } Ideally, I'd like the output to update and scroll down as the function processes the data. Is the problem that innerHTML can't keep up with the speed at which the for loop progresses? I want to redraw or refresh my Canvas in Javascript. How to do it? I'm completely new to Java Script, but about a year ago I decided to learn how to build a website from scratch. I am confident with HTML and CSS, but Java seems to be flying over my head. Could anybody possibly help me with my coding? I'm sure the problem is obvious, but I don't know if this is the right place to post this sort of beginnier question. So if it is not, please redirect me to where I can. Thanks a lot! Quote: <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <html> <head> <title></title> </head> <body> <script type="text/javascript"> function addzero(zero) { return zero; } var d = new Date(); var time=d.getHours function tod1 () { document.write("The time is "); document.write(addzero(d.getHours())); document.write(":"); document.write(addzero(d.getMinutes())); } function tod2 () { document.write("The time is "); document.write(addzero(d.getHours()+1)); document.write(":"); document.write(addzero(d.getMinutes())); } function tod3 () { document.write("The time is "); document.write(addzero(d.getHours()+2)); document.write(":"); document.write(addzero(d.getMinutes())); } function tod4 () { document.write("The time is "); document.write(addzero(d.getHours()+3)); document.write(":"); document.write(addzero(d.getMinutes())); } if (time>10) { alert("Good morning"); } </script> <p id="city"></p> <form name="form" action="wtf.php" method="post"> Vancouver: <input type="radio" name="city" id="Vancouver" onchange="tod1()"> Calgary: <input type="radio" name="city" id="Calgary" onchange="tod2()"> Winnipeg: <input type="radio" name="city" id="Winnipeg" onchange="tod3()"> Toronto: <input type="radio" name="city" id="Toronto" onchange="tod4()"> </form> </body> </html> hey , i got 2 function , the one working and the other one is'nt heres the functions : Code: var toDisplay = "f";
function human(){
var toAdd = toDisplay.substring(0,1);
setTimeout(human , 500);
document.getElementById('box').innerHTML += toAdd;
}
human(); // works (display "f" every half a sec)
function human2(toDisplay2){
var toAdd = toDisplay2.substring(0,1);
var t = setTimeout("human2(toDisplay2)" , 500);
document.getElementById('box').innerHTML += toAdd;
}
human2("dsd"); // not working (only display "d" and stop)
the first function works ( keep printing "f" every 0.5 sec ) the second function only work once and than stop ( print "d" and than stop ) what's the problem with the second function? thanks , Mor. Code: <body>
<title>Array Games</title>
<script type="text/javascript">
var City = new Array();
var uNoGo = false;
var endIt = false;
alert("Hello! This program does two things! One, it asks for five cities. It stores the city names in an array cause arrays are what we're doing this chapter. Then it tells you the city names VIA said array! Secondly, it asks you for a number between 1 and 250,00. It then checks if the number is a perfect square! Uses Binary Search. ;)");
while(!endIt)
{
for(var i=0;i<5;i++)
{
City[i] = prompt("Please enter in a city name!","");
}
for(var i=1;i<6;i++)
{
var msg += "\n" + "Your number " + i + " city is: " + City[i-1];
}
alert(msg);
while(!uNoGo)
{
var Sq = prompt("Enter in a number between 1 and 250,000.", "");
if(Sq >= 1 && Sq <= 250000)
{
var Mebe = Math.sqrt(Sq);
if(Math.round(Mebe)*Math.round(Mebe)==Sq)
{
alert("Gratz! Your number is a perfect square.");
}
else
{
alert("We're sorry, the number you have chosen is not a perfect square. It may be a circle but we don't know. Good luck next time!");
}
uNoGo = true;
}
else
{
alert("You entered in something invalid! WARNING NUCLEAR MELTDOWN IMMINENT!");
}
}
var cont = prompt("Do you want to ride again? Type N to stop, anything else to continue.","");
if(cont=="\\")
{
alert("As you came around the corner... SSSSSSSSSSSSSSSSSS. There goes your dirt house.");
}
if(cont=="N" || cont=="n")
{
endIt=true;
alert("Thank you, come again.");
}
}
</script>
</body>
</html>
I am trying make this codes work in a browser as javascript but nothing shows up hey all, what it says in the title, this block of code wont work and i dont know why. the first prompt box appears but not the "can vote, but can't drink" reply. can anyone offer any ideas? <!DOCTYPE html> <html> <head> <title>legal age</title> <script type="text/javascript"> var your_age = prompt("how old are you?"); if ((age > 18) && (age < 21)) { document.writeln("can vote, but can't drink."); } </script> </body> </html> kind regards, Redd . Hi! All I would like to have a way to do my application using a simple way. I have a genealogy site, since a long time ago. I have near 10,000 pages (10,000 names) on a free hoster. Everything works fine. But I'd like to do the conversion from my FTW (Familky tree maker) to html page ,myself. I've use VB6 (Visula Basic 6) to do the conversion of all the pages, including all the html code on each page to link to other page. Like ,click on the father's name or the childre's name and it load the html page of this INDIVIDUAL. First : I know very well VB6 , moderate in HTML , poor in Javascript. Second : I have 10,000 pages (One for each individual), so is there a way to only have a template page (on the server side = my hoster) and a few text file (.txt) to pick up the data. Cause there are only 40-50 string data to put on each page but a lot of html code to make a good looking page. So having a template html page that we can just add at the right place ,the data of this individual then send it would be much smaller. So instead of a lot of pages there will be only a few. Third : I'd like to place on the viewable page, 3 cascading "selection list". The first one will be populated with the letter from A to Z , from the HTML code. The second list would have all the name of the family , like Smith, Johnson, rimes etc , ordered. I already have a text file of those names. And the third list , will have all the first name like Daniel Steve, Leann, ordered too, and I also have this ordered text file. So in a few click , we will be able to go to another individual. Have try a lot of things but never been able to do it. I like to keep the text file for data, as it's very easy to change using VB6 and easy to read, too. As written before, it must be easy to understand. I don't mind giving a small donation to have it, cause I really try hard to do it without been able to do it working. And it could be useful to other, too. Thanks at advance. hey guys, I'm not the quickest running in the race, but I'm slowly learning JavaScript. I'm attempting to use the jQuery iviewer to control the viewing of images. I'm essentially making my own slideshow. In any event, I'm trying to tag a map along with the image. The only way I know of doing this is with standard markup doing usemap="#map_name". so here's my JavaScript code, and the HTML to follow. Code: var $ = jQuery;
$(document).ready(function(){
$("#viewer").iviewer(
{
src: "images/page11.jpg",
update_on_resize: false,
initCallback: function ()
{
var object = this;
$("#in").click(function(){ object.zoom_by(1);});
$("#out").click(function(){ object.zoom_by(-1);});
$("#fit").click(function(){ object.fit();});
$("#orig").click(function(){ object.set_zoom(100); });
$("#update").click(function(){ object.update_container_info();});
},
onMouseMove: function(object, coords) { },
onStartDrag: function(object, coords) { return false; },
onDrag: function(object, coords) { }
});
$("#viewer2").iviewer(
{
src: "images/page11.jpg",
update_on_resize:false,
initCallBack: function ()
{
document.images[0].useMap = "#map1";
}
});
});
And the 'scaler' Code: function scalecoordimages(elImage, amount){
var elMap = getMap(elImage)
elImage.width *= amount;
elImage.height *= amount;
if (null != elMap){
for (var intLoop = 0; intLoop < elMap.areas.length;
intLoop++) {
var elArea = elMap.areas[intLoop];
var coords = elArea.coords.split(",");
var scaledCoords = "";
for (coords in coords) {
scaledCoords += (coords[coord] * amount) + ",";
}
elArea.coords = scaledCoords;
}
}
}
and now the HTML where this is all delivered. Code: <div class="wrapper">
<div id="viewer2" class="viewer" style="margin: 50px auto;"></div>
</div>
the 'wrapper' is because in Safari the overflow doesn't hold properly and breaks. the Map is just rectangles...it's below > Code: <map name="map1" id="map1">
<area class="hotspot" shape="rect" coords="105, 1110, 371, 1125" href="" onMouseOver="tooltip.show('<ul>Northeast States:<br /><li>Connecticut</li><li>Maine</li> <li>Massachusetts</li><li>New Hampshire</li><li>Rhode Island</li><li>Vermont</li><li>New Jersey</li><li>New York</li><li>Pennsylvania</li></ul>');" onMouseOut="tooltip.hide();" >
<area class="hotspot" shape="rect" coords="105, 1135, 371, 1150" href="" onMouseOver="tooltip.show('<ul>Midwest States:<br /><li>Indiana</li><li>Illinois</li><li>Michigan</li><li>Ohio</li><li>Wisconsin</li><li>Iowa</li><li>Kansas</li><li>Minnesota</li><li>Missouri</li><li>Nebraska</li><li>North Dakota</li><li>South Dakota</li></ul>');" onMouseOut="tooltip.hide();"></area>
<area class="hotspot" shape="rect" coords="105, 1160, 371, 1175" href="" onMouseOver="tooltip.show('<ul>Southern States:<br /><li>Delaware</li><li>Florida</li><li>Georgia</li><li>Maryland</li><li>North Carolina</li><li>South Carolina</li><li>Virginia</li><li>West Virginia</li><li>Alabama</li><li>Kentucky</li><li>Mississippi</li><li>Tennessee</li><li>Arkansas</li><li>Louisiana</li><li>Oklahoma</li><li>Texas</li></ul>');" onMouseOut="tooltip.hide();"></area>
<area class="hotspot" shape="rect" coords="105, 1185, 371, 1200" href="" onMouseOver="tooltip.show('<ul>Western States:<br /><li>Arizona</li><li>Colorado</li><li>Idaho</li><li>New Mexico</li><li>Montana</li><li>Utah</li><li>Nevada</li><li>Wyoming</li><li>Alaska</li><li>Californai</li><li>Hawaii</li><li>Oregon</li><li>Washington</li></ul>')" onMouseOut="tooltip.hide();"></area>
</map>
Any help is appreciated. Thank you. Hello, Problem 1: I have a function and it sets a value to a certain number according to the input. However, I don't want the function to print out the value to the screen, but instead temporarily save it for me to use throughout the whole script. I am a newbie and please help me. For example, I make this code: function add1(x) { var x = x + 1 return x; } and I call the function: add1(0); document.write("value = " + x + "<BR>"); Whenever I do this, document.write doesn't print out value = 1, it doesn't even print anything except for the headers, etc. Is there anyway to set the var x to be a value valid throughout the whole script instead of just the function itself? I really need help on this, thanks. Problem 2: I want to get a code working. Basically, I use a ram to "ram the gate". I set the damage done each turn, and the Gate's Health too. So for example, my ram's damage is 10 and the gate's health is 200. It would take 20 times to totally breach the gates(i.e., for gate health to become 0). When I use the following code, the total damage is the same throughout the whole looping until the gatehealth reaches 0 which makes it boring, is there anyway to modify or improve the script such that when I loop, the MiscDamage would be different for all the turns? thanks! Once again I apologize for asking such a noob-ish and very strange.... question. Quote: <script language="JavaScript" type="text/javascript"> <!-- // Begin function RamGates(Ram, Attack, Gate) { //introducing variables to be used var BaseDamage = 0; var FullDamage = 0; var MiscDamage = 0; var TotalDamage = 0; var GateHealth = 0; switch (Ram) { //ignore this part just comparing ram types case "Explosive": BaseDamage="10"; break; case "Wooden": BaseDamage="20"; break; case "Steel": BaseDamage="30"; break; case "", "?": default: BaseDamage="Failed to recognize Ram"; } switch (Attack) { //ignore this just comparing attack values case 0: FullDamage = BaseDamage; break; case 1: FullDamage = (BaseDamage*2)-8; break; case 2: FullDamage = (BaseDamage*2)-6; break; case 3: FullDamage = (BaseDamage*2)-4; break; case 4: FullDamage = (BaseDamage*2)-2; break; case 5: FullDamage = BaseDamage*2; break; case "", "?": default: FullDamage="Failed to recognize Attack"; } switch (Ram) { //this part is what i need help on, i need the loop function to keep using this to generate different "lucky damages" each time to make it interesting, i.e., first ram = 11 second ram = 16 third ram = 14 and so on..... case "Explosive": MiscDamage = Math.floor(Math.random()*21+10); break; case "Wooden": MiscDamage = Math.floor(Math.random()*6+0); break; case "Steel": MiscDamage = Math.floor(Math.random()*11+5); break; case "", "?": default: MiscDamage="Failed to recognize Ram"; } switch (Gate) { //ignore this part just comparing gate types to generate gate health case "Wooden": GateHealth = 50; break; case "Brick": GateHealth = 75; break; case "Small Stone": GateHealth = 90; break; case "Large Stone": GateHealth = 120; break; case "Granite": GateHealth = 140; break; case "Iron": GateHealth = 175; break; case "R Iron": GateHealth = 190; break; case "Thick Iron": GateHealth = 210; break; case "Steel": GateHealth = 230; break; case "R Steel": GateHealth = 250; break; case "Thick Steel": GateHealth = 275; break; case "Steel Iron Mix": GateHealth = 280; break; case "Thick Steel Iron Mix": GateHealth = 300; break; case "Strong Ruby Steel Mix": GateHealth = 400; break; case "Strong Sapphire Steel Mix": GateHealth = 450; break; case "R Thick Large Diamond Steel Mix": GateHealth = 500; break; case "", "?": default: GateHealth = "Failed to recognize Gate"; } TotalDamage = FullDamage + MiscDamage; with (document) { write ("Soldiers, " + "RAM THE GATES!" + "<BR>"); } while (GateHealth >= 0) //loops until gate health is lower than 0 { //need help! how to make it such that the loop will rerun the switching of ram for generating random misc(lucky) damages document.write ("Lucky Damage done = " + MiscDamage + "<BR>"); document.write ("Total Damage done = " + TotalDamage + "<BR>"); var GateHealth = GateHealth - TotalDamage document.write("Current GateHealth = " + GateHealth + "<BR>"); } } RamGates("Explosive", 5, "R Thick Large Diamond Steel Mix"); //function calling // End --> </script> ... like if you input text, you can't select it by sweeping it with the mouse, or shift-left arrow. Which I thought were out of the box features. You can see it in the bottom right corner of the map here. I don't think the autocomplete has anything to do with it (I disconnected that and nothing changed) but maybe because it gets made by innerhtml? any suggestions welcome. So how do i get to backgroundColor value to change it? a.backgroudColor('black'); or how ? Code:
var a = makeDiv(p.age , {
backgroundColor: 'gray',
color: 'white',
padding: '2px 6px',
fontSize: '15pt',
});
Hi all, I'm quite new to Javascript, and I'm stuck with a problem here. I have a website, I won't go in to detail, but it generates some javascript code for the user. Well, that's the idea. The user puts this javascript on his or her website. Now everytime the page with that javascript is loaded, a page on my server is called, and is supposed to display something on the place of the javascript of that website. I however have not the slightest clue how to do this. The script on my server has to get some values from a database (I'll be doing this with php). Therefore are some variables needed, like ID's. Those are put in the javascript at the website of that person. (I know they could just change it, but that'd only disadvantage them) And example of the code the person with the website would get is this: (This was also generated on user basis somewhere, which does about the same thing) Code: <script language="javascript" type="text/javascript" charset="utf-8"> var border = '#000000'; id = 1337; </script> <script language="JavaScript" type="text/javascript" src="http://somesite.com/scriptname.php"> </script> If you don't understand what I'm trying to do here, please ask, because I might not've explained it clear enough. Thanks, lordstyx. [edit] Someone said to look in the direction of XMLHttpRequest. I don't really know what that is, but I'll try and find a bit more info about it. hey guys. got acouple questions for my website. im more of a html guy.. and i usually find my scripts online. i reeaaallly appreciate all answers! i have a box: <img id="imgSearch" src="" alt="Websites" /> <input type="button" value="Toggle Search" id="btnSearch" /> ^being the button to toggle between websites. basically i'd like this button to toggle between different websites when clicked. secondly: changing span tag colors html code: Traffic Light: <span id="trafficLight"></span> <input type="button" value="Prevent Accident" id="btnTraffic" /> i'd like to change the color of this span id by pressing the button. so in this case it would change red, yellow green and last: changing the font in a bold tag bold by pressing a button html code: (note, the font weight in normal in css for bold) <b>i want this bold when you hit the button!</b> <input type="button" value="Set Bold" id="btnBold" /> I was working on a tutorial for some ajax uploading stuff and I ran across a new function syntax I don't recognize. I am not a Javascript pro, but I am not a newbie either. here is the code I am working on: Code: function handleFileSelect(e){
var files = e.target.files;
var output = [];
for(var i=0,f;f=files[i];i++){
if(f.type.match('image.*')){
var reader = new FileReader();
reader.onload = (function(theFile){
return function(e){
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="',e.target.result,'" title="',theFile.nbame,'" />'].join('');
document.getElementById('list').insertBefore(span,null);
};
})(f);
reader.readAsDataURL(f);
}
}
document.getElementById('list').innerHTML = '<ul>'+output.join('')+'</ul>';
}
document.getElementById('files').addEventListener('change',handleFileSelect,false);
To be a little more clear, the code in question is that is the very middle. The syntax I don't understand is: Code: class.event = (function(arguments){
//stuff you put in a function...
})(more Arguments?);
I tried to customize a simple one to learn for myself and I wrote this: Code: var a = 'A';
var b = 'B';
test = (function(t){
alert(t);
alert(b);
})(b);
test(a);
The browser would alert 'B' and that's it. The console would tell me that 'test is not a function.' OK, so I am confused. The topmost code works. What I am wondering is what the syntax is called for creating a function (or event listener?) that way, and how it works. Although if I new what it was called I could just google how it works. I want to have a screen (50% transparent white) pop up over an image on rollover with a button that, when pushed, will swap the image with a different one. Anyone know the easiest way to do this. The image is in a scrolling bunch of images similar to this: http://kellyperso.com
Hi I have the code below which geocodes a postcode and returns a lat a long value. Its standard code from Google maps. I just want to print these values to a screen. I tried document.write(value) but this produces nothing. Any help would be greatly appreciated. Code: <script type="text/javascript">
var localSearch = new GlocalSearch();
function usePointFromPostcode(postcode)
{
localSearch.setSearchCompleteCallback(null,
function()
{
if (localSearch.results[0])
{
var resultLat = localSearch.results[0].lat;
var resultLng = localSearch.results[0].lng;
}
document.write(resultLat+resultLng);
//alert("Latitude: " + resultLat + "\nLongitude: " + resultLng + " q");
});
localSearch.execute(postcode + ", UK");
}
</script>
TIA Stew All- I have a page coded that pulls files from a directory using PHP then sets them up using a Flash type player to stream the video. My problem is that I have to resize the video window for each computer I play it on. They all have different resolutions. I was able to use: Code: <script type="text/javascript" src="/jwplayer/swfobject.js"></script>
<script type="text/javascript">
var x = (+screen.width);
var y = (+screen.height);
if (x == '1920' & y == '1080')
{
var xn = 1440;
var yn = 900;
document.write(xn);
document.write(yn);
}
if (x == '1024' & y == '600')
{
var xn = 900;
var yn = 400;
document.write(xn);
document.write(yn);
}
swfobject.registerObject("player","9.0.98","/jwplayer/expressInstall.swf");
</script>
To pull out the current Resolution of the user and pass to a variable the resolution I want the video to be. Here is where the video code is Code: <object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="900" height="400">
<param name="movie" value="/jwplayer/player.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<?
echo "<param name='flashvars' value='file=../Movies$full_dir.mp4 =../Movies$full_dir.jpg' />";
?>
<object type="application/x-shockwave-flash" data="/jwplayer/player.swf" width="900" height="400">
<param name="movie" value="/jwplayer/player.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<?
echo "<param name='flashvars' value='file=../Movies$full_dir.mp4&image=/Movies$full_dir.jpg' />";
?>
<p><a href="http://get.adobe.com/flashplayer">Get Flash</a> to see this player.</p>
</object>
</object>
In the video part, where it says Height and Width, I just need to have it take the 2 variables i created depending on the resolution used. Variables xn or yn. Any ideas? Please Please help! been stumped on this all afternoon!! Thanks Defyer! I use a program that produce a graphic (imagine a sinusoid, more or less). There is no opportunity to obtain from the program an output of the coordinates of the points of this curve. I desperately tried a way to achieve this, for example using a program that transform a normal raster image in a vector, and after read the vector, but all this is not precise nor accurate. I wonder if there is a way to obtain this result. Bye I wish to create an applett, which i am working on, Though I want to know if there is any way to: 1) Take screenshots of entire web page 2) Take screenshots of a certian part of the web page selected by the user with a Rectangle tool 3) Take screenshots of a certian part of the web page selected by the user with a FreeForm tool Im not asking for a full code or anything, But I just wish to know in what way could i go about this? |
|||||||