|
JavaScript - Trouble With Prototypes - Extending An Image Object To Make A Snowflake
In the spirit of the season, I wanted to make it snow on my website. So I began digging. Eventually I ended up with a script that moved an image element down the page in a snowflake-like manner. The problem with it was it was dependant on an img element for every flake - simply no poor programming when using an Object Oriented programming language.
So I decided I wanted to extend (in Java-speak; most of my programming background is in Java) the in-built Image object. The new object's src variable will lead to an image of the type of flake it is. (I want to be able to have more variance in images than a simple dot.) The new object will have a function that will allow it to move. A separate, unrelated function will control when each flakes move. I did some more research and read about prototyping on JavaScript Kit and here, but I still cant seem to get this to work. JS Lint says it's bug-free, but Firefox says "move()" is an invalid function. I am presuming the problem lies in my inability to fully grasp how to extend objects in JavaScript. Code: <html>
<head>
<script type="text/javascript">
Image.prototype.dFlake=dotFlake;
function dotFlake(xLocation,yLocation){
this.src = "simpleDotFlake.png";
this.x = xLocation;
this.y = yLocation;
}
dotFlake.prototype.move = fall;
function fall(){ // ^^ Belongs to dotFlake class.
this.style.position="absolute";
this.style.top = this.y;
this.style.left = this.x;
this.y= this.y + 1; // Falling is constant.
if (Math.random() > 0.5){ // Random direction, though.
this.x = this.x + 1;
} else{
this.x = this.x - 1;
}
}
function snow(flakes){ // Allows addition of different flakes later.
for (i in flakes){
i.move();
}
timer = setTimeout("snow()",1);
}
function startSnow(){
basicFlakes = new Array(new dotFlake(0,0));
snow(basicFlakes);
}
</script>
</head>
<body onload="startSnow()">
<h1>This is test text.</h1>
<img id="basicFlake" src="./simpleDotFlake.png" width="10" height="10" />
</body>
</html>
Any and all input is much appreciated. Thank you! Similar TutorialsHi all, The result of the code below is slightly surprising to me. If you define an object type through a prototype, and that object has a property which is a hash, the value of that hash is shared between all instances of that type. I understand the way around this (e.g. define "myHash" as its own object, and call this.myHash = new MyHash() in the object's constructor), but can someone describe to me exactly why the property "a" and the property "myHash" behave differently in the example below? Code: var MyType = function() {}
MyType.prototype = {
a: null,
myHash: {
b: null
}
}
var instance1 = new MyType();
var instance2 = new MyType();
instance1.a = "a1";
instance2.a = "a2";
instance1.myHash.b = "b1";
instance2.myHash.b = "b2";
alert(instance1.a); // = "a1"
alert(instance1.myHash.b); // = "b2"
Thanks! Can somebody please link me to a good guide or tutorial for prototypes? Thanks im using a mootools popup box to play a youtube video its using javascript to control the "close" button.. and the close button uses this function Code: clickClose: function(){
$(this.box).effect('opacity',{ wait:true, duration:this.fadeSpeed, transition:Fx.Transitions.linear }).chain(function(){
}).start(this.opacity,0); this.box.setStyle('display','none');
this.isVisible = false;
},
seeing as ow i have a playing video in the box...that simply wasnt enough..because the video would continue playing after the box is closed... (you would ehar audio) so i modified the code by adding Code: this.box.setStyle('display','none');
this did the TRICK!!! ....in firefox.....sadly Internet Explorer is refusing to destroy that video upon click.... are there any ideas as to how i can destroy that video across all browsers when that button is clicked....i say "destroy" because im mad! lol but i simply want the video to dissapear...off the screen and off the site with no mysterious audio afterwards. Hey, I am using prototypes (library) ajax methods and one of them is properties. I am passing in the name value pairs: var itemFilter = "MajorCat: Shoes", parameters: { q : qry ,fq: itemFilter }, But when I request, it gives me this in the url: MajorCat%3AShoes That won't work, the search application on the backend doesn't filter properly because of the "%3A" instead of ":". When I manually pass in via the url: MajorCat: Shoes (at the end of the query) it works. So, that ":" is getting encoded. How do I get that IN the hash and make sure the request is unencoded when it goes out? thanks Hello, I am trying to move an image down 20px each time the button is clicked, but I can only get it to move down once. I see what I am doing wrong, but I'm not sure how to fix it. I don't know how to store the updated position of the image in a variable. Code: <center>
<input type="button" value="Click" onClick="moveDown()"/>
</center>
<img id="Ball" src="ball.jpg" style="position:absolute; top:100; left:100;"/>
<script language="JavaScript">
var Image = document.getElementById("Ball");
var Position = 100;
function moveDown()
{
Image.style.top = Position + 20
}
</script>
Thanks, Celia hi there, i am a novice at this and have copied and pasted code to try and acheive what i need but am having trouble. I have two functions, one to show random ads but the second is to show the "ads" in a larger image in a different place when mouseover. Although this code works i now want to adapt it to show a slightly different picture. Here is the code i am using and a presume the problem lies with the showIt(this.src) as i dont want it to show the same picture. Any help would be great. Thank you here is the script i am using <head> <script type="text/javascript" src="??????????.js"></script> <script type="text/javascript"> function showIt(imgsrc) { var holder = document.getElementById('imageshow'); var newpic= new Image(); newpic.src=imgsrc; holder.src=imgsrc; holder.width =300; holder.height=300; } </script> </head> and here is the main body code <a href="http://www.???????.com/" rel="nofollow" target="_blank"><img src="???????.jpg" width="100" height="100" border="1" onmouseover="showIt(this.src)"></a>' I am currently working in Microsoft Frontpage designing a website for a friend. I was trying to make a JS alert come up when I mouse over an image and I have had no luck at all. This is the bit of code where The alert needs to be. I am a bit new to Javascript so I apologize if this was a stupid question. Code: <img border="0" src="../gallery%20pictures/Home.png" width="468" height="60"><br> <br> <p align="center"> <img <FORM src="../gallery%20pictures/THE%20BUTTON.png" width="388" height="372"> <br> </p> <p> </p> </body> </html> Background on my task: My page accepts a url with various parameters passed in querystring. One of the parameter is the URL of the Image I wish to display on the page. I save this URL in a variable "imagesource" To ensure the image is not bigger than the size permitted, I use image object to get the height and width of the image. Now here's my code: function foo(){ ...... var imagesource = URL of the image; .... var newImg = new Image(); newImg.src = imagesource; var height = newImg.height; var width = newImg.width; .... } Now, say if, imagesource = http://www.yourwebsite.com/yourimage.jpg I expect newimage.src to be http://www.yourwebsite.com/yourimage.jpg But I get newimage.src = http://www.mywebsite.com/http://www.yourwebsite.com/yourimage.jpg Browser in use : IE 8 (if it matters in this case) Am I wrong in my assumption to begin with? Good day, I have the following code: Code: var img = new Image(); img.myProperty = 'something'; I've tried Image.prototype.myProperty and a few other things. It seems IE just doesn't want me extending the Image object. Is there a known work-around? Thanks How to extend the constructor for the date object of the javasccript so that whenever a call is made to the constructor, I want to perform a particular action? Basically how to define wrappers for default javascript methods or objects like Date() so that I can perform some action and then invoke the original method? So basically if I have something like var a = new Date(); I want it to (say) alert the value of the date everything Date() is called and then execute the default date constructor. TIA I've pared this down as much as I can to demonstrate the issue. What can I do to make the slide in go over the top of the image rather than underneath as at present? Code: <html>
<head>
<title>slidein</title>
<style>
#headerstudy {width:980px;height:280px;margin:0 auto;padding:0;}
#mainbook {position:absolute;top:7.5em;left:15.4m;border:0 none}
</style>
<script>
// *************** TRANSLATE
var master = new Object("element")
master.curLeft = 0; master.curTop = 10;
master.gapLeft = 0; master.gapTop = 0;
master.timer = null;
function moveAlong(layerName, paceLeft, paceTop, fromLeft, fromTop)
{
clearTimeout(eval(layerName).timer)
var el = document.getElementById(layerName);
if(eval(layerName).curLeft != fromLeft)
{
if((Math.max(eval(layerName).curLeft, fromLeft) - Math.min(eval(layerName).curLeft, fromLeft)) < paceLeft)
{
eval(layerName).curLeft = fromLeft;
}
else if(eval(layerName).curLeft < fromLeft)
{
eval(layerName).curLeft = eval(layerName).curLeft + paceLeft;
}
else if(eval(layerName).curLeft > fromLeft)
{
eval(layerName).curLeft = eval(layerName).curLeft - paceLeft;
}
el.style.left = eval(layerName).curLeft + 'px';
}
if(eval(layerName).curTop != fromTop)
{
if((Math.max(eval(layerName).curTop, fromTop) - Math.min(eval(layerName).curTop, fromTop)) < paceTop)
{
eval(layerName).curTop = fromTop;
}
else if(eval(layerName).curTop < fromTop)
{
eval(layerName).curTop = eval(layerName).curTop + paceTop;
}
else if(eval(layerName).curTop > fromTop)
{
eval(layerName).curTop = eval(layerName).curTop - paceTop;
}
el.style.top = eval(layerName).curTop + 'px';
}
eval(layerName).timer=setTimeout('moveAlong("'+layerName+'",'+paceLeft+','+paceTop+','+fromLeft+','+fromTop+')',30);
}
function setPace(layerName, fromLeft, fromTop, motionSpeed)
{
eval(layerName).gapLeft = (Math.max(eval(layerName).curLeft, fromLeft) - Math.min(eval(layerName).curLeft, fromLeft)) / motionSpeed;
eval(layerName).gapTop = (Math.max(eval(layerName).curTop, fromTop) - Math.min(eval(layerName).curTop, fromTop)) / motionSpeed;
moveAlong(layerName, eval(layerName).gapLeft, eval(layerName).gapTop, fromLeft, fromTop);
}
var expandState = 0
function expand()
{
if(expandState == 0)
{
setPace("master", 121, 10, 10);
expandState = 1;
}
else
{
setPace("master", -120, 10, 10);
expandState = 0;
}
}
</script>
</head>
<body>
<div id="master" style="position: absolute; left: -120px; top: 11px; width: 350px; height: 0px">
<div id="menu2" style="position: absolute; left: 117px; top: 12px">
<table border="0" width="18" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<a href="javascript:expand();" onfocus="this.blur()">
<img name="menutop" border="0" src="http://aapress.com.au/images/translate.gif" width="23" height="152"></a></td>
</tr>
</table>
</div>
<div id="screen" style="position: absolute; left: -138px; top: 12px; ">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0px; padding:0px; border:1px solid #000000;" bgcolor="#FFFFFF">
<tr>
<td style="padding-left:0px; height:0px; line-height:15px; background-color:#000000;">
<a href="http://www.labpixies.com" style="font-family: Arial,Verdana; font-size:12px; font-weight:bold; text-align:left; text-decoration:none; color:#ffffff;">
Gadget by LabPixies.com</a></td>
</tr>
<tr>
<td>
<iframe allowtransparency="true" align="top" scrolling="no" width="256" height="135" frameborder="0" src="http://cdn.labpixies.com/campaigns/babylon/babylon.html" target="_self">
</iframe></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var sidemenu = document.getElementById('master');
function FixY()
{
sidemenu.style.top = '80px';
}
setInterval("FixY()",100);
</script>
<div id="headerstudy">
<img id="mainbook" src="http://aapress.com.au/images/booksblank.jpg" width="572" height="285">
</div>
</body>
</html>
I have this code... I want to be able to make each image fade from one to the other. Like this... http://www.dynamicdrive.com/dynamici...nslideshow.htm Is there a way to do that with this code? Code:
<script type="text/javascript">
// Simple Javascript Time based Image Swap
var Pics = new Array();
var counter = 0;
// Use this section to change the image paths
function LoadImages()
{
Pics[1] = new Image();
Pics[1].src = "images/pic1.jpg";
Pics[2] = new Image();
Pics[2].src = "images/pic2.jpg";
Pics[3] = new Image();
Pics[3].src = "images/pic3.jpg";
Pics[4] = new Image();
Pics[4].src = "images/pic4.jpg";
Pics[5] = new Image();
Pics[5].src = "images/pic5.jpg";
Pics[6] = new Image();
Pics[6].src = "images/pic6.jpg";
Pics[7] = new Image();
Pics[7].src = "images/pic7.jpg";
Pics[8] = new Image();
Pics[8].src = "images/pic8.jpg";
Pics[9] = new Image();
Pics[9].src = "images/pic9.jpg";
Pics[10] = new Image();
Pics[10].src = "images/pic10.jpg";
Pics[11] = new Image();
Pics[11].src = "images/pic11.jpg";
Pics[12] = new Image();
Pics[12].src = "images/pic12.jpg";
Pics[13] = new Image();
Pics[13].src = "images/pic13.jpg";
Pics[14] = new Image();
Pics[14].src = "images/pic14.jpg";
Pics[15] = new Image();
Pics[15].src = "images/pic15.jpg";
Pics[16] = new Image();
Pics[16].src = "images/pic16.jpg";
Pics[17] = new Image();
Pics[17].src = "images/pic17.jpg";
document.pic1.src = Pics[1].src;
}
//Time in miliseconds
function timedImage()
{
counter ++
if (counter > 17) {
counter = 1;
}
document.pic1.src = Pics[counter].src;
t=setTimeout("timedImage()",5000);
}
</script>
Hi I was wondering I really like the image viewer Gamespot uses. example: http://www.gamespot.com/wii/action/s...&tag=thumb%3B1 Anyone know how to make one like that? Thanks for any replies. Hiya, I created this thread on the html forum but I'm not sure if it can be done with javascript, so I'll post here as well. I was wondering if there's a way to make various sections of the image clickable? The sections on the image are not rectangular so I can't make divs. I don't think I can use imagemap either since that only works for making one clickable area right? I already cut out these sections in photoshop and saved them with alpha background, and created a "glowing" version of each section, since I want to make it so that when mouse hovers over it, it will glow. But I can't stack them on top of each other, since if I do that only the topmost layer will be clickable for those areas where they will overlap with rectangular divs. This is example of what I mean: Thanks I'm a designer and HTML/CSS coder only. I'd like to ask the community for the simplest solution on making an image swap to different image when the user clicks one of the many thumbnails. It's pretty standard gallery functionality, "click the thumbnail to see the big version". I'm hoping to get some JavaScript that is easy to configure even though I don't know how to write JavaScript. Here's a link to the page: http://clientzone.thermostudios.com/.../bouquets.html The thumbnails are on the left and the replicable image on the right. Thanks in advance. hi, on my website http://zend.warrencreative.com/gemini-group/index.html I am using thickbox, if you click on Subscribe to newsletter at the top it opens up a box, I need to change type="button" to type="image" but this doesn't work?! is there any other way? Code: <a class="newsletter thickbox" href="#TB_inline?height=325&width=365&inlineId=myOnPageContent&modal=true">Subscribe to eNewsletter</a> <div id="myOnPageContent" class="hidden"><p>Please enter your Name:</p><p><input type="text" name="name" class="textbox"></p><p>Please enter your Email:</p><p><form action="#"><input type="text" name="email" class="textbox"></p><p> </p><p><input type="button" value="Send" class="thickbox" title="add a caption to title attribute / or leave blank" alt="#TB_inline?height=325&width=365&inlineId=myOnPageContent1"> <input onclick="tb_remove()" type="image" alt="cancel button" src="images/cancelbutton.jpg"></form></p></div> <div id="myOnPageContent1" class="hidden"><p>Thank you for subscribing</p><input onclick="tb_remove()" type="image" alt="cancel button" src="images/cancelbutton.jpg"></div> thanks in advance I am working on a site for someone, and they asked me to have a small link-bar that has small thumbnail pictures next to every link. He wants the picture next to each link to change weekly, and what I was thinking of was having a small directory of imgs, he will have 31 in total, and name them 1-31.png, and have something similar to this: var now = new Date(); var dd = now.getDate(); [code] if (dd==1) document.write('<img src="pic1.gif">') else if (dd==2) document.write('<img src="pic2.gif">') else if (dd==3) document.write('<img src="pic3.gif">') else if (dd==4) [code] but what I am looking for mostly is for the ability for it to loop back through, so that after the 31st week, it starts right back to the first. I was wondering if there are any sites dedicated to ending javascript objects using the prototype property to give them features like trimming string, removing elements of arrays by name, removing duplicates in arrays, etc. Granted I have functions to do this but there's probably a ton of other good ones out there. Most things I've seen are frameworks like JQuery (which is awesome) but it doesn't extend these objects.
Hi, every time I try and alert: [ { number:0, secondnumber:0 }, { number:2, secondnumber:1 }, { number:1, secondnumber:2 } ] it just shows [object object], [object object], [object object]. Why is this and what can I do to make the record be shown as it is above in an alert? Thanks. |
|||||||