|
JavaScript - Walter Zorn Graphics: Any Alternatives, Or Suggestions?
As it is, I'm using Walter Zorn's JS Graphics Library in an attempt to write a small screensaver-type-thing for jailbroken iPhones/iPod touches. However, on my mom's AMD Athlon 64 3000+, the drawing gets pretty laggy, so you can imagine how utterly choppy it is on my iPod. The look I'm going for is the Windows XP Mystify screen saver, with corners bouncing around the screen. So, my first question is this: are there any alternatives for this sort of thing, short of manually generating a video, gif, or multiple images to switch through, or is there any way to make my code more efficient for the CPU? (Code below)
NOTE: I know I could make it look a lot nicer by making a 'corner' class, and having each corner be an object (and even nicer by using an array of 'corners'). But I'm not sure that would help the CPU's calculations much, and make the code more efficient as a whole. Code: <div id="Mystify">
<script type="text/javascript">
var mystifyCanvas = new jsGraphics("Mystify");
var tetraCorner1x = Math.floor(Math.random()*300) + 5;
var tetraCorner1y = Math.floor(Math.random()*460) + 5;
var tetraCorner2x = Math.floor(Math.random()*300) + 5;
var tetraCorner2y = Math.floor(Math.random()*460) + 5;
var tetraCorner3x = Math.floor(Math.random()*300) + 5;
var tetraCorner3y = Math.floor(Math.random()*460) + 5;
var tetraCorner4x = Math.floor(Math.random()*300) + 5;
var tetraCorner4y = Math.floor(Math.random()*460) + 5;
go1x = true;
go1y = false;
go2x = true;
go2y = true;
go3x = false;
go3y = true;
go4x = false;
go4y = false;
function MystifyJavaScript()
{
mystifyCanvas.clear();
mystifyCanvas.setColor("#ff0000");
mystifyCanvas.setStroke(2);
if (go1x)
{
tetraCorner1x++;
if (tetraCorner1x > 315)
{
go1x = false
}
}
else
{
tetraCorner1x--;
if (tetraCorner1x < 5)
{
go1x = true
}
}
if (go1y)
{
tetraCorner1y++;
if (tetraCorner1y > 475)
{
go1y = false
}
}
else
{
tetraCorner1y--;
if (tetraCorner1y < 5)
{
go1y = true
}
}
if (go2x)
{
tetraCorner2x++;
if (tetraCorner2x > 315)
{
go2x = false
}
}
else
{
tetraCorner2x--;
if (tetraCorner2x < 5)
{
go2x = true
}
}
if (go2y)
{
tetraCorner2y++;
if (tetraCorner2y > 475)
{
go2y = false
}
}
else
{
tetraCorner2y--;
if (tetraCorner2y < 5)
{
go2y = true
}
}
if (go3x)
{
tetraCorner3x++;
if (tetraCorner3x > 315)
{
go3x = false
}
}
else
{
tetraCorner3x--;
if (tetraCorner3x < 5)
{
go3x = true
}
}
if (go3y)
{
tetraCorner3y++;
if (tetraCorner3y > 475)
{
go3y = false
}
}
else
{
tetraCorner3y--;
if (tetraCorner3y < 5)
{
go3y = true
}
}
if (go4x)
{
tetraCorner4x++;
if (tetraCorner4x > 315)
{
go4x = false
}
}
else
{
tetraCorner4x--;
if (tetraCorner4x < 5)
{
go4x = true
}
}
if (go4y)
{
tetraCorner4y++;
if (tetraCorner4y > 475)
{
go4y = false
}
}
else
{
tetraCorner4y--;
if (tetraCorner4y < 5)
{
go4y = true
}
}
mystifyCanvas.drawLine(tetraCorner1x, tetraCorner1y, tetraCorner2x, tetraCorner2y);
mystifyCanvas.drawLine(tetraCorner2x, tetraCorner2y, tetraCorner3x, tetraCorner3y);
mystifyCanvas.drawLine(tetraCorner3x, tetraCorner3y, tetraCorner4x, tetraCorner4y);
mystifyCanvas.drawLine(tetraCorner4x, tetraCorner4y, tetraCorner1x, tetraCorner1y);
mystifyCanvas.paint();
window.setTimeout("MystifyJavaScript()", 10);
}
MystifyJavaScript();
</script>
</div>
Please keep in mind, there's a LOT of repeat code, so you only have to read any one part once. To test/see/use the code, you'll need to download wz_graphics.zip. Then download the attached txt file to the same directory as the unzipped wz_graphics, change it to .html instead of .txt, and open it. Similar TutorialsHello! I'm using Walter Zorn's Drag & Drop script on my page: http://www.accentironwork.com/railings%20design.html The script works just fine. But there is a problem when the visitors are trying to print out their design. All "draggble" elements are getting shifted in relation to the rest of the page (try to move "draggble" elements, and then go to Print Preview to see what happens). The page layout is centered on the screen: #maincontainer{margin: 0 auto; /*Center container on page*/} Drag & Drop script recalculates positions of elements from the Top Left corner. If I change margin to left, than everything prints out just fine, without shifting. I'd like to keep my page layout centered on the screen and I know nothing about Java programming. How to make necessary changes to the Drag & Drop script to achieve proper page printing? Drag & Drop script path: http://www.accentironwork.com/Drag-Drop/wz_dragdrop.js CCS path: http://www.accentironwork.com/css/globalstyles.css Thanks in advance! Hi - I wrote some code that uses the eval function. I am in the process of rewriting the code to improve on it where possible (a learning exercise). I have read that eval is evil because of security concerns and that the eval'd code is not compiled prior to runtime. I don't think my use of eval presents a security concern. However, I wonder if there is some way to replace the eval function with a more natural technique. I have done this using eval(); also using a new Function method. I have tried using a window[] method but I can't get that to work. OK, on the the actual code: The purpose of the javascript is to count keystrokes. I have a bunch of global counter variables declared in this fashion: Code: MyLib.CountQ=0; MyLib.CountW=0; MyLib.CountE=0; MyLib.CountR=0; MyLib.CountT=0; MyLib.CountY=0; MyLib.CountU=0; MyLib.CountI=0; MyLib.CountO=0; MyLib.CountP=0; When the Count function is called I want to update the appropriate counter. Thus: MyLib.Count'+varkeyname+'+=1; Where varkeyname is 'q' or 'w' or 'e' etc. Code: //MyLib is a global variable namespace.
function Count() {//updates counters
var varkeyname= specialchars(MyLib.KeyName);//identity of the key pressed.
var stra="Count"+varkeyname;// string used to change an html value.
//var strb=eval("MyLib.Count"+varkeyname+"+=1");//original eval function that worked just fine.
var strb='return MyLib.Count'+varkeyname+'+=1';//string to update a counter.
var myfunc= new Function(strb);//Function intended to replace the eval function - this also works just fine.
document.getElementById(stra).value = myfunc();
...
You can see that I have replaced the eval function with another function - but since this is also not compiled prior to runtime I don't think this is an improvement. I have read about using the window[string] method but I can't get it to work. This is not a critical issue but I'd appreciate any comments. Thanks, Jim Hello again, I've continued to study and work on JavaScript. I've had some problems with the document.write() function. When I try to do a math problem, the whole content of the page clears out and only displays the solution. For example: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function jahava()
{
var h = 1
var r = 4
var t = 5
document.write(h += r += t)
}
</script>
</head>
<body>
<button OnClick="jahava()">Click Me!</button>
</body>
</html>
So If I put other content, like the button I was displaying (which I wanted to stay visible), the function would make them all disappear. I would again appreciate any help towards this matter. Sincerely, Taro B. PS; This is not a calculator related problem, just in-general. Hi Guys, I am a novice at javascript. I possibly need an alternative to document.write to output specifically the value contained in Code: {exp:lg_ml:translate key="phrase[i]"}
This syntax is cms specific and carries a value like horse or a translated version of it like Pferd in German. The below code outputs: {exp:lg_ml:translate key="cat"}{exp:lg_ml:translate key="dog"}{exp:lg_ml:translate key="horse"} but I want it to output in the source code of my template so it can execute correctly with predetermined values and not just on screen as the syntax instead of the actual value it holds, if you know what I mean. Anyway after hours of trying and 5 cups of cheap Nescafe coffee I need to achieve exactly the below with an alternative possibly to document.write? I also need to keep the loop. Thanks Code: <html>
<body>
<script type="text/javascript">
var i;
var phrase = new Array();
phrase[0] = "cat";
phrase[1] = "dog";
phrase[2] = "horse";
for (i=0;i<phrase.length;i++)
{
document.write("{exp:lg_ml:translate key=\""+phrase[i] +"\"}");
}
</script>
</body>
</html>
Here's the code: Code: for (var i = 1; i < 5; i++)
var pl = eval("player" + i)
var namepl = eval("document.charInput.name" + i + ".value");
var skillpl = eval("document.charInput.skill" + i + ".value");
var genderpl = eval("document.charInput.gender" + i + ".value");
switch (skillpl) {
case "warrior":
pl = new player(namepl, skillpl, genderpl, 20, 15, 0, 5, 5, 2, 2, 3, 3, 0, 0);
logEntry("black", namepl + " is now a warrior.");
break;
case "mage":
pl = new player(namepl, skillpl, genderpl, 15, 10, 20, 2, 5, 5, 5, 2, 3, 0, 0);
logEntry("black", namepl + " is now a mage.");
break;
case "healer":
pl = new player(namepl, skillpl, genderpl, 15, 10, 20, 2, 5, 5, 5, 2, 3, 0, 0);
logEntry("black", namepl + " is now a healer.");
break;
case "archer":
pl = new player(namepl, skillpl, genderpl, 20, 15, 0, 3, 3, 2, 2, 5, 5, 0, 0);
logEntry("black", namepl + " is now an archer.");
break;
}
}
Each player has three form values: document.charInput.name1.value document.charInput.skill1.value document.charInput.gender1.value In the case of the 2nd-4th player, it changes to name2.value, etc. Based on these three inputs, I need to iterate through all four players and make the player object for each of them, as I've done above. If anybody has any ideas on how to correct this or an alternative method, please help. hey guys i have graphic on the right side of the screen that is not in view and i am scrolling it to the left. Is there away to remove the bottom scrollbar permanently through using a mask or something. if i have an item scrolling from the left the scroll bar does not show, but on the right it does. an help be appreciated. Hey guys, as of now these lines of code... Code: function lettergrade(grade) {
if (grade >= 9){
document.write("A")
}
else if (grade >= 8){
document.write("B")
}
else if (grade >= 7){
document.write("C")
}
else{
document.write("F | Warning, your letter grade is very low.")
}
};
function goletter() {
document.write("Sam's letter grade on the test is: " + lettergrade(sam) + ", <br \> Sally's letter grade on the test is: " + lettergrade(sally) +
", <br \> Donald's letter grade on the test is: " + lettergrade(donald))
}
...are supposed to display the "____'s letter grade on the test is: A" or the respective letter, but instead it is displaying this... ABF | Warning, your letter grade is very low.Sam's letter grade on the test is: undefined, Sally's letter grade on the test is: undefined, Donald's letter grade on the test is: undefined Any ideas as to why this is happening? I am a novice javascript user so if there are any good alternatives that are pretty basic i'm open to ideas. Thanks guys. I am looking to create a Stylesheet for YouTube, to make it look nicer and customise it completely I wanted to change the logo, but its a graphic. I was wondering if it would be possible to do this by linking to one hosted on Flickr? Or is there another trick? Folks, I have been in IT for many years, but completely new to javascripting and ajax etc. I develop web sites and the php, html coding etc is no issue, its just that I have never needed to do any javascript coding and therefore have not used it at all. Picking it up should present little problem, but as of this moment, I am a complete tyro, and I need to get moving on this requirement ASAP. I have a requirement which I haver never before needed to address. I would be grateful for some pointers to resources (I have searched and searched..... ) which I could use to develop the functionality I need. After that rambling intro, here is the actual issue..... I need to have a variety of areas on a single picture on the website, each of which if clicked on, will go to a different article. Rather than try to explain, here is a link which does a similar thing, although this one is in Flash (which I also don't know): http://www.comcare.gov.au/virtual_wo...fice/reception I need to do pretty much the same thing, though with a different picture and words of course. The website will be a Joomla based site. I hope I have gived enough information, and indeed, hope that I have posted to the right area! Any assistance or thoughts at all would be greatly appreciated. regards to all, Mike Hi, I'm newer than a newbie. I wrote a website in html, which has an ecommerce that sends the purchase to paypal. My client wants to offer a coupon. I found code in javascript that validates the coupon, but I want to be able to tell PayPal the discounted amount as this discount will not apply to all customers. PayPal Merchant Services told me that I can not use a variable in the following line: <input name="amount" type="hidden" value="132" /> Is there a way I can use Javascript to do the following? At this time, this code doesn't give me an error, but it doesn't send the amount to PayPal either. <script language="javascript">function validate(text1,text2) { if (text1 == text2) { document.write('<input name="amount" type="hidden" value="0" />') } if (text1 !== text2) { document.write('<input name="amount" type="hidden" value="125" />') }} </script> Thanks for any help. http://vietnamthereandback.com/mainpage.html The arrows next to the songs previews are randomly appearing/disappearing on page refresh. There are always 8 arrows, but each refresh shows the arrows in different places. This has really got me stumped. If anyone has any thoughts, I'd really appreciate hearing them. The basic button/arrow code is below. The only thing that changes in the MP3 file name. <code> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="30" height="30"> <PARAM NAME=movie VALUE="http://www.vietnamthereandback.com/Clips/audioplay.swf?file=http://www.vietnamthereandback.com/Clips/reflections.mp3&auto=no&sendstop=yes&repeat=1&buttondir=http://www.vietnamthereandback.com/Clips/buttons/negative_small&bgcolor=0xffffff&mode=playpause"> <PARAM NAME=quality VALUE=high> <PARAM NAME=wmode VALUE=transparent> <embed src="http://www.vietnamthereandback.com/Clips/audioplay.swf?file=http://www.vietnamthereandback.com/Clips/reflections.mp3&auto=no&sendstop=yes&repeat=1&buttondir=http://www.vietnamthereandback.com/Clips/buttons/negative_small&bgcolor=0xffffff&mode=playpause" quality=high wmode=transparent width="30" height="30" align="" TYPE="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object> </code> Ello~ I was just wondering if ^^ anyone could look at this code and tell me where there are errors... or any suggestions so i could clean up the code a bit, so it would work :] that way i could figure it out Thank you for your time~ ^_^ Code: <html>
<head> <title> RETAKES </title>
<script type="text/javascript" src="http://dave-reed.com/book/random.js"> </script>
<script type="text/javascript">
function TakeTest( )
// simulates a student's test taking by generating random values for the grades
// and allowing up to a certain number of retakes displaying the apropriate messages
// algorithm:
// set up: max num of retakes at 3 and passing grade at 70
// generate a random grade between 1-100 and
// IF equal or greater than the passing grade display "Your initial passing grade: ..."
// ELSE: setup the count of retakes at 0
// DO: increment the count for retakes
// generate a random grade between 1-100 and display "Your retake grade: " ..."
// WHILE: the retake count is less or equal to the max number of retakes AND the grade IS NOT a passing grade
// afterwards: either the iteration ended with a passing grade OR not, so check for which condition occurred
// IF after the retakes the grade is a passing grade then display "You Passed with a grade of: ... after ... retake(s)"
// ELSE display "You still failed after " ... " retakes."
{
var retake, passGrade, grade;
retake = 0;
grade = randomInt(1, 100);
passGrade = 70;
if (grade >= passGrade) {
document.getElementById("text").value = document.getElementById("text").value + "Your initial passing grade: " + grade;
}
else {
retake = 0;
do {
retake++;
grade = randomInt(1, 100);
document.getElementById("text").value = document.getElementById("text").value + "Your retake grade: " + grade;
while (retake <= 3 && grade != passGrade)
}
}
if (retake <= 3 && grade == passGrade) {
document.getElementById("text").value = document.getElementById("text").value + "You passed with a grade of " + grade + " after " + + " retake(s)";
}
else {
document.getElementById("text").value = document.getElementById("text").value + "You still failed after " + retake + " retake(s)";
}
}
</script>
</head>
<body>
<div style="text-align:center">
<h2>Student Test taking simulation</h2>
<p> <input type="button" value="Take the Test" onclick="TakeTest()"> </p>
<p> <textarea id="text" rows="60" cols="25">READY TO GO!</textarea> </p>
</div>
</body>
</html>
Hi all! I'm new to the forum and hope to get some help on how to make my javascript shorter then how its now. Now i have 8 functions doing the same thing, but i dont know how to make it to one function, if possible. I have worked much with PHP with the other code on the website, so if u have sugestions with that feel free to make them. It are working with some checkboxes, if u press the first checkbox u will get a textfield after every checkbox exept the first one. If u just press one checkbox u get a textfiled after that one. P.S. All the code bellow are working together. Javascript code Code: <script type="text/javascript">
function showHide1()
{
if(document.getElementById('64bitxref2').style.display == 'none')
{
document.getElementById('64bitxref2').style.display = '';
document.getElementById('64bitxref3').style.display = '';
document.getElementById('64bitxref4').style.display = '';
document.getElementById('64bitxref5').style.display = '';
document.getElementById('64bitxref6').style.display = '';
document.getElementById('64bitxref71').style.display = '';
document.getElementById('64bitxref72').style.display = '';
document.getElementById('64bitxref73').style.display = '';
document.getElementById('64bitxref8').style.display = '';
}
else
{
document.getElementById('64bitxref2').style.display = 'none';
document.getElementById('64bitxref3').style.display = 'none';
document.getElementById('64bitxref4').style.display = 'none';
document.getElementById('64bitxref5').style.display = 'none';
document.getElementById('64bitxref6').style.display = 'none';
document.getElementById('64bitxref71').style.display = 'none';
document.getElementById('64bitxref72').style.display = 'none';
document.getElementById('64bitxref73').style.display = 'none';
document.getElementById('64bitxref8').style.display = 'none';
}
}
function showHide2()
{
if(document.getElementById('64bitxref2').style.display == 'none')
{
document.getElementById('64bitxref2').style.display = '';
}
else
{
document.getElementById('64bitxref2').style.display = 'none';
}
}
function showHide3()
{
if(document.getElementById('64bitxref3').style.display == 'none')
{
document.getElementById('64bitxref3').style.display = '';
}
else
{
document.getElementById('64bitxref3').style.display = 'none';
}
}
function showHide4()
{
if(document.getElementById('64bitxref4').style.display == 'none')
{
document.getElementById('64bitxref4').style.display = '';
}
else
{
document.getElementById('64bitxref4').style.display = 'none';
}
</script>
html code (with possible php help) Code: <form method="post" action="index.php?id=2">
<table border="0">
<tr>
<td colspan="2">
<input type="text" name="search" value="<? echo $keyword; ?>" size="80" maxlength="250" />
<input type="submit" name="send" value="Sök">
<br />
</td>
</tr>
<tr width="100%">
<td>
<input id="checkbox1" type="checkbox" onClick="showHide1()" value="allt"/>
<label for="allt">Allt</label>
</td>
<td width="90%">
<input name="64bitxref1" type="text" value="" id="64bitxref1" style="display:none" size="32" maxlength="32"><br />
</td>
</tr>
<tr>
<td>
<input id="checkbox2" type="checkbox" onClick="showHide2()" value="fotograf"/>
<label for="foto">Fotograf</label><br />
</td>
<td width="90%">
<input name="64bitxref" type="text" value="" id="64bitxref2" style="display:none" size="32" maxlength="32"><br />
</td>
</tr>
<tr>
<td>
<input id="checkbox3" type="checkbox" onClick="showHide3()" value="plats"/>
<label for="plats">Plats</label><br />
</td>
<td width="90%">
<input name="64bitxref" type="text" value="" id="64bitxref3" style="display:none" size="32" maxlength="32"><br />
</td>
</tr>
<tr>
<td>
<input id="checkbox4" type="checkbox" onClick="showHide4()" value="fritext"/>
<label for="fritext">Fritext</label><br />
</td>
<td width="90%">
<input name="64bitxref" type="text" value="" id="64bitxref4" style="display:none" size="32" maxlength="32"><br />
</td>
</tr>
</table>
</form>
I hope the code could be to help i put in there, and thanks in advance. /Spikey In order to learn "cool" javascript such as rollovers that you find on websites today; what would any of you guys reccomend me doing. I want to learn how to make my webpage interactive and i know what i want to do; i just dont know how to do it any suggestions are welcome; thank you You know the deal: you have something (tooltip-like) that pops up on mouseover and disappears again on mouseout. But sometimes, the mouse moves too fast (speedy Gonzalez?), and the event doesn't get trapped. So your tooltip thingy stays popped, and doesn't go away till another mouseover-mouseout happens. Any suggestions for avoiding this scenario?
I have a search box on my website, that gets users from my database using php. And uses Javascript to display suggestions as the users type. What I'd like to be able to is to use the arrows to toggle down through the different suggestions. Any ideas how I would go about doing this? Here's the javascript part of the code: Code: function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();
/* -------------------------- */
/* SEARCH */
/* -------------------------- */
function autosuggest() {
q = document.getElementById('search-q').value;
// Set te random number to add to URL request
nocache = Math.random();
http.open('get', 'lib/search.php?q='+q+'&nocache = '+nocache);
http.onreadystatechange = autosuggestReply;
http.send(null);
}
function autosuggestReply() {
if(http.readyState == 4){
var response = http.responseText;
e = document.getElementById('results');
if(response!=""){
e.innerHTML=response;
e.style.display="block";
} else {
e.style.display="none";
}
}
}
An intranet site I've been working on is getting demo'd next week and I'm pretty proud of its functionality. It looks pretty good too but the biggest eyesore are the listboxes. The navigation column on the left of the page has 3 large listboxes, each one housing between a dozen and several hundred options related to employees, meeting rooms, etc. For that sort of directory functionality a listbox is pretty much the only way to go. The annoying part is that listboxes haven't really changed in 20 years. I sure wish IE supported listbox background images but since it doesn't I'm left with changing the border or changing the background color. I don't know if you've played with that but a listbox looks just as cheap with a mono blue, red, or purple background as it does with white Does anyone know some code for livening it up? Thanks. Hello, I have an existing php contact form which incorporates php validation (required name with only characters, valid email address format, and minimum message length) and re-captcha. I would like to add some "real time" validation to the fields on my form (there are 3 fields - name, email and message) before the "Submit" button is pressed. For example when the user tabs from one text box to the next but hasn't filled in the required information. I am totally new to any type of java, but am I right in thinking I need either JavaScript, Ajax or JQuery to perform real-time validation? If so, which should I be looking into and are there any basic examples of form validation? I want to keep my pup validation as I'm aware that php is client-side but still needed as people can turn Java off in their web browsers. Any tips and pointers will be very much appreciated! Thankyou, Tom |
|||||||