|
JavaScript - How To Create Multiple Instances Using Js Dynamically
Hi,
I have written a code below: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function emailRowContent(isSelected, emailAddress, severity)
{
var emailRowObj = document.getElementById('emailRow');
emailRowObj.childNodes[1].childNodes[0].checked = isSelected;
emailRowObj.childNodes[3].childNodes[0].value = emailAddress;
emailRowObj.childNodes[5].childNodes[0].checked = severity;
}
function LoadUp()
{
var emailAddressListObj = document.getElementById('emailAddressList');
var arrayOfEmails = new Array(5);
for (i = 0; i < 5; i++)
{
arrayOfEmails[i] = new emailRowContent( "checked", "fjkum@unknown.com" + i, i );
//emailAddressListObj.appendChild( arrayOfEmails[i] ); /* Somehow this line breaks */
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body onload="javascript:LoadUp();">
<div id="emailRow" class="emailRowClass">
<div><input type="checkbox" class="checkbox1"></div>
<div><input type="text" class="textfield"></div>
<div><input type="checkbox" class="checkbox2"></div>
</div>
<div id="emailAddressList" class="emailAddressClass"></div>
</body>
</html>
Basically, what I want to do is to dynamically create 5 instances of "emailRow" onto the web page making use of Javascript DOM. But have no success in getting it to work. Can anyone shed some light? Mike Similar TutorialsI want to have multiple instances of jcarousellite on the same page, but as you can see, they both scroll together. I am javascript brain dead, so any help would be appreciated, even if it's something obvious. http://goo.gl/vMLPA I found the following guide, but I need my hand held. http://myintarweb.com/dispatch/multiple-jcarouselite I'm working on code for my forums that will allow users to post text which can be moused over to display an image that will follow the cursor (provided the cursor is hovering above the specific text). The code works, but it obviously can't be used for more than one picture per page because getElementById finds the first div and always displays it onmouseover of any attempted mouseover text. The Javascript in <head> is Code: <script type="text/javascript">
// Pop up code begin
function ShowPopup(hoveritem)
{
hp = document.getElementById("hoverpopup");
// Set popup to visible
hp.style.visibility = "Visible";
}
function HidePopup()
{
hp = document.getElementById("hoverpopup");
hp.style.visibility = "Hidden";
}
// Follow mouse script begin
var divName = 'hoverpopup'; // div that is to follow the mouse
// (must be position:absolute)
var offX = 5; // X offset from mouse position
var offY = 5; // Y offset from mouse position
function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}
function follow(evt) {if (document.getElementById) {var obj = document.getElementById(divName).style;
obj.left = (parseInt(mouseX(evt))+offX) + 'px';
obj.top = (parseInt(mouseY(evt))+offY) + 'px';}}
document.onmousemove = follow;
</script>
So the display code is Code: <a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">text here</a> <div id="hoverpopup" style="visibility:hidden; position:absolute;"><img src="url here"></div> I just want to be able to have more than one instance on each page and still be able to declare the image url in the body and not within the javascript. Im using the following script: Code: <script type="text/javascript">
function unhide(hiddentext) {
var item = document.getElementById(hiddentext);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
<style type="text/css">
.unhidden { display: block; }
.hidden { display: none; }
</style>
to hide and unhide a block of text on my page, using onclick events. the problem is its not allowing me to use it multiple times in a page. when i use a second instance of it, both stop working. the above demonstrated script is working with the following elements: middle (approx) of page: Code: <td class="desc_cell"><strong>Download Station</strong><br />
17" Macbook Pro<br /><a href="javascript:unhide('itemlist');" onclick="changeText(this,'Hide Item List');" id="text1link"]Old Text>Click Here For Full Item List</a><div id="hiddentext" class="hidden">list of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes here</div>
</td>
bottom of page: [code]<p align="center" style="citylist">Allen Park MI, Anchor Bay Gardens MI, Anchor Bay Harbor MI, Anchor Bay Shores MI, Andersonville MI,<a href="javascript:unhide('hiddentext');" onclick="changeText(this,' View Less...');" id="text1link"]Old Text>View More...</a></p><div id="hiddentext" class="hidden">Armada MI, Auburn Heights MI, Auburn Hills MI, Austin Corneorth Farmington MI, Northville MI, Norton MI, Novi MI, Oak MI, Oak Grove MI, Oak Park MI, Oakley Park MI, Oakwood MI, Orchard Lake MI, Ortonville MI, Oxbow MI, Oxford MI, Perry Lake Heights MI, Pleasant Ridge MI, Plymouth MI, Point Lakeview MI, Pontiac MI, Preston Coom MI, Wolcott Mills MI, Wolverine Lake MI, Wood Creek Farms MI, Woodhaven MI, Wyandotte MI, Yates MI, and many more!</div> The statement does what I want it to do, except if there is multiple instances of the word, it only outputs one, how can I work it so all instances are output in red? (while still using .slice) var phrase = prompt("Enter a messate: ", 'Message'); var searchFor = prompt("Enter search text: ", 's'); var matchPhrase = ""; var searchIndex = -1; /* if there's a match, create a text string by * add the phrase text from before the match, * add <font> tags around the match text, * add the rest of the phrase from after the match */ searchIndex = phrase.indexOf(searchFor); if (searchIndex >=0 ) { // Copy text from phrase up till the match. matchPhrase += phrase.slice(0, searchIndex); matchPhrase += '<font color="red">' + searchFor + '</font>'; matchPhrase += phrase.slice(searchIndex + searchFor.length); phrase++ } else { matchPhrase = "No matches" } document.writeln(matchPhrase); Reply With Quote 01-31-2015, 09:08 AM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts Use a regular expression. So I want to swap an image when it's clicked on (and then swaps right back after release) and currently I have working code for this, HOWEVER (and the reason for my post) I want this to be a redundant image, so it would be the same image used about 25 times on the page (same image, with same image swap effect) it's basically a download button then slightly changes it's style when clicked on. The problem is that my current code requires me to give each image it's own specific id / name and I have to recreate more sript code for each image id as well. The following example code would be what is currently required for just 2 images (they are the exact same image with exact same swap) but as you can see for every additional download button on the page I have to add a new id for it and a bunch of additional code, so it's quite ridiculous as to how much code is required for 25 of the exact same images on the page. in the header I have: Code: <script language="JavaScript">
<!--
// PRELOADING IMAGES
if (document.images) {
downloadbtn_down=new Image(); downloadbtn_down.src="images/download_pressed.png";
downloadbtn_up =new Image(); downloadbtn_up.src ="images/download.png";
}
if (document.images) {
downloadbtn2_down=new Image(); downloadbtn2_down.src="images/download_pressed.png";
downloadbtn2_up =new Image(); downloadbtn2_up.src ="images/download.png";
}
// EVENT HANDLERS
function pressButton(btName) {
if (document.images)
eval('document.'+btName+'.src='+btName+'_down.src');
}
function releaseButton(btName) {
if (document.images)
eval('document.'+btName+'.src='+btName+'_up.src');
}
//--></script>
and for each image in the body I have (example is for 2 images): Code: <a href="indexpg.htm"
onMouseDown="pressButton('downloadbtn');return true;"
onMouseUp="releaseButton('downloadbtn');return true;"
onMouseOut="releaseButton('downloadbtn');return true;"
onClick="return true;"
><img id=downloadbtn width=422px height=80px border=0
alt="Download"
src="images/download.png"
></a>
<a href="indexpg.htm"
onMouseDown="pressButton('downloadbtn2');return true;"
onMouseUp="releaseButton('downloadbtn2');return true;"
onMouseOut="releaseButton('downloadbtn2');return true;"
onClick="return true;"
><img id=downloadbtn2 width=422px height=80px border=0
alt="Download"
src="images/download.png"
></a>
I want to be able to just use the same piece of code without having to add a new id for every download button on the page and tons of redundant code, especially since the image is the same it doesn't make sense to have to give each one a specific id and specific javascript for each of those id's. I would think this would be quite simple, but I know nothing about javascript, and I have searched a lot without any luck. PLEASE HELP ME! I have this script which is set to generate random anagrams of my name in rotation which works fine, but I can't work out how to put multiple instances of it on one page. if someone could point me in the right direction i'd be very grateful. thanks the code is var quotations = new Array() quotations[0]= "germaine arnold" quotations[1]= "endearing moral" quotations[2]= "analog reminder" quotations[3]= "regained normal" quotations[4]= "renaming ordeal" quotations[5]= "nominal regrade" quotations[6]= "arraigned lemon" quotations[7]= "ringleader moan" quotations[8]= "mineral groaned" function display() { a=Math.floor(Math.random()*quotations.length) document.getElementById('quotation').innerHTML=quotations[a] setTimeout("display()",5000) } and i'm calling the function using: <div id="quotation"> <SCRIPT type="text/javascript">display()</SCRIPT> </div> Hi, I have the following function to dynamically create an image (in this case a toolbox button): Code: function createButton(srcid,bttn)
{
if (bttn=='mag') {s='Magnify';h='Magnify';o='DoZoom(event,\'0\',\''+srcid+'\')';}
if (bttn=='frz') {s='Pause';h='Freeze/Unfreeze';o='setPicture(\''+srcid+'\',0)';}
if (bttn=='swp') {s='Swap';h='Swap maps';o='setPicture(\''+srcid+'\',2)';}
btn=document.createElement('img');
btn.setAttribute('src','toolbox/'+s+'.gif');
btn.setAttribute('width','16px');
btn.setAttribute('height','16px');
btn.setAttribute('id',bttn+'btn_'+srcid);
btn.setAttribute('class','button');
btn.setAttribute('name','Toolbox');
btn.setAttribute('title',h);
btn.setAttribute('onclick',o);
document.getElementById('ctrlDiv').appendChild(btn);
}
which works fine in IE8 and IE9, but in IE7 it refuses to pick up the style 'button'. I've even tried putting in btn.class='button' but JS throws up an error. If I specify the style by btn.style.position='Absolute' it picks this up OK. However, it won't respond to the onclick event either. I have heard that setAttribute is buggy with IE7, which is why I tried to specify each attribute directly. The style sheet for class button is: Code: .button
{
position: absolute;
left: 5;
top: 5;
z-index: 1;
}
(BTW, no link to a website as this is local on my machine atm) TIA, Gerald. How do I dynamically create a <select> with <options> in Javascript?
Can someone see what is wrong with this code: Code: frm=document.createElement('form')
frm.action="/cgi-sys/formmail.pl"
frm.method="POST"
fld=document.createElement('textarea')
fld.appendChild(document.createTextNode(simpleCart.items))
frm.appendChild(fld)
It is supposed to dynamically create a textarea and fill it up with the return of simpleCart.items() Hi there, so i am working on a website, and on it there is a video with youtube api. I need to hide all Table-rows that are not during each 5 second time frame. So for example, when it is at 0:36, it will hide all TR's besides the TR that has to do with the video between 0:35 and 0:40. Each TR displays a start time, content, and end time. Here is what the tables currently look like. Code: <table width="600" class="table" >
<tr class="item-titles">
<td width="75" class="none">Start</td>
<td width="400">Caption</td>
<td width="75">End</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(0, false)">0</a></td>
<td><a href="javascript:player.seekTo(0, false)"></a></td>
<td><a href="javascript:player.seekTo(5, false)">5</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(5, false)">5</a></td>
<td><a href="javascript:player.seekTo(5, false)"></a></td>
<td><a href="javascript:player.seekTo(10, false)">10</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(10, false)">10</a></td>
<td><a href="javascript:player.seekTo(10, false)"></a></td>
<td><a href="javascript:player.seekTo(15, false)">15</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(15, false)">15</a></td>
<td><a href="javascript:player.seekTo(15, false)"></a></td>
<td><a href="javascript:player.seekTo(20, false)">20</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(20, false)">20</a></td>
<td><a href="javascript:player.seekTo(20, false)"></a></td>
<td><a href="javascript:player.seekTo(25, false)">25</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(25, false)">25</a></td>
<td><a href="javascript:player.seekTo(25, false)"></a></td>
<td><a href="javascript:player.seekTo(30, false)">30</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(30, false)">30</a></td>
<td><a href="javascript:player.seekTo(30, false)"></a></td>
<td><a href="javascript:player.seekTo(35, false)">35</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(35, false)">35</a></td>
<td><a href="javascript:player.seekTo(35, false)"></a></td>
<td><a href="javascript:player.seekTo(40, false)">40</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(40, false)">40</a></td>
<td><a href="javascript:player.seekTo(40, false)"></a></td>
<td><a href="javascript:player.seekTo(45, false)">45</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(45, false)">45</a></td>
<td><a href="javascript:player.seekTo(45, false)"></a></td>
<td><a href="javascript:player.seekTo(50, false)">50</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(50, false)">50</a></td>
<td><a href="javascript:player.seekTo(50, false)"></a></td>
<td><a href="javascript:player.seekTo(55, false)">55</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(55, false)">55</a></td>
<td><a href="javascript:player.seekTo(55, false)"></a></td>
<td><a href="javascript:player.seekTo(60, false)">60</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(60, false)">60</a></td>
<td><a href="javascript:player.seekTo(60, false)"></a></td>
<td><a href="javascript:player.seekTo(65, false)">65</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(65, false)">65</a></td>
<td><a href="javascript:player.seekTo(65, false)"></a></td>
<td><a href="javascript:player.seekTo(70, false)">70</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(70, false)">70</a></td>
<td><a href="javascript:player.seekTo(70, false)"></a></td>
<td><a href="javascript:player.seekTo(75, false)">75</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(75, false)">75</a></td>
<td><a href="javascript:player.seekTo(75, false)"></a></td>
<td><a href="javascript:player.seekTo(80, false)">80</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(80, false)">80</a></td>
<td><a href="javascript:player.seekTo(80, false)"></a></td>
<td><a href="javascript:player.seekTo(85, false)">85</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(85, false)">85</a></td>
<td><a href="javascript:player.seekTo(85, false)"></a></td>
<td><a href="javascript:player.seekTo(90, false)">90</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(90, false)">90</a></td>
<td><a href="javascript:player.seekTo(90, false)"></a></td>
<td><a href="javascript:player.seekTo(95, false)">95</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(95, false)">95</a></td>
<td><a href="javascript:player.seekTo(95, false)"></a></td>
<td><a href="javascript:player.seekTo(100, false)">100</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(100, false)">100</a></td>
<td><a href="javascript:player.seekTo(100, false)"></a></td>
<td><a href="javascript:player.seekTo(105, false)">105</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(105, false)">105</a></td>
<td><a href="javascript:player.seekTo(105, false)"></a></td>
<td><a href="javascript:player.seekTo(110, false)">110</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(110, false)">110</a></td>
<td><a href="javascript:player.seekTo(110, false)"></a></td>
<td><a href="javascript:player.seekTo(115, false)">115</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(115, false)">115</a></td>
<td><a href="javascript:player.seekTo(115, false)"></a></td>
<td><a href="javascript:player.seekTo(120, false)">120</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(120, false)">120</a></td>
<td><a href="javascript:player.seekTo(120, false)"></a></td>
<td><a href="javascript:player.seekTo(125, false)">125</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(125, false)">125</a></td>
<td><a href="javascript:player.seekTo(125, false)"></a></td>
<td><a href="javascript:player.seekTo(130, false)">130</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(130, false)">130</a></td>
<td><a href="javascript:player.seekTo(130, false)"></a></td>
<td><a href="javascript:player.seekTo(135, false)">135</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(135, false)">135</a></td>
<td><a href="javascript:player.seekTo(135, false)"></a></td>
<td><a href="javascript:player.seekTo(140, false)">140</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(140, false)">140</a></td>
<td><a href="javascript:player.seekTo(140, false)"></a></td>
<td><a href="javascript:player.seekTo(145, false)">145</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(145, false)">145</a></td>
<td><a href="javascript:player.seekTo(145, false)"></a></td>
<td><a href="javascript:player.seekTo(150, false)">150</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(150, false)">150</a></td>
<td><a href="javascript:player.seekTo(150, false)"></a></td>
<td><a href="javascript:player.seekTo(155, false)">155</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(155, false)">155</a></td>
<td><a href="javascript:player.seekTo(155, false)"></a></td>
<td><a href="javascript:player.seekTo(160, false)">160</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(160, false)">160</a></td>
<td><a href="javascript:player.seekTo(160, false)"></a></td>
<td><a href="javascript:player.seekTo(165, false)">165</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(165, false)">165</a></td>
<td><a href="javascript:player.seekTo(165, false)"></a></td>
<td><a href="javascript:player.seekTo(170, false)">170</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(170, false)">170</a></td>
<td><a href="javascript:player.seekTo(170, false)"></a></td>
<td><a href="javascript:player.seekTo(175, false)">175</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(175, false)">175</a></td>
<td><a href="javascript:player.seekTo(175, false)"></a></td>
<td><a href="javascript:player.seekTo(180, false)">180</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(180, false)">180</a></td>
<td><a href="javascript:player.seekTo(180, false)"></a></td>
<td><a href="javascript:player.seekTo(185, false)">185</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(185, false)">185</a></td>
<td><a href="javascript:player.seekTo(185, false)"></a></td>
<td><a href="javascript:player.seekTo(190, false)">190</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(190, false)">190</a></td>
<td><a href="javascript:player.seekTo(190, false)"></a></td>
<td><a href="javascript:player.seekTo(195, false)">195</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(195, false)">195</a></td>
<td><a href="javascript:player.seekTo(195, false)"></a></td>
<td><a href="javascript:player.seekTo(200, false)">200</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(200, false)">200</a></td>
<td><a href="javascript:player.seekTo(200, false)"></a></td>
<td><a href="javascript:player.seekTo(205, false)">205</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(205, false)">205</a></td>
<td><a href="javascript:player.seekTo(205, false)"></a></td>
<td><a href="javascript:player.seekTo(210, false)">210</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(210, false)">210</a></td>
<td><a href="javascript:player.seekTo(210, false)"></a></td>
<td><a href="javascript:player.seekTo(215, false)">215</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(215, false)">215</a></td>
<td><a href="javascript:player.seekTo(215, false)"></a></td>
<td><a href="javascript:player.seekTo(220, false)">220</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(220, false)">220</a></td>
<td><a href="javascript:player.seekTo(220, false)"></a></td>
<td><a href="javascript:player.seekTo(225, false)">225</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(225, false)">225</a></td>
<td><a href="javascript:player.seekTo(225, false)"></a></td>
<td><a href="javascript:player.seekTo(230, false)">230</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(230, false)">230</a></td>
<td><a href="javascript:player.seekTo(230, false)"></a></td>
<td><a href="javascript:player.seekTo(235, false)">235</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(235, false)">235</a></td>
<td><a href="javascript:player.seekTo(235, false)"></a></td>
<td><a href="javascript:player.seekTo(240, false)">240</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(240, false)">240</a></td>
<td><a href="javascript:player.seekTo(240, false)"></a></td>
<td><a href="javascript:player.seekTo(245, false)">245</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(245, false)">245</a></td>
<td><a href="javascript:player.seekTo(245, false)"></a></td>
<td><a href="javascript:player.seekTo(250, false)">250</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(250, false)">250</a></td>
<td><a href="javascript:player.seekTo(250, false)"></a></td>
<td><a href="javascript:player.seekTo(255, false)">255</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(255, false)">255</a></td>
<td><a href="javascript:player.seekTo(255, false)"></a></td>
<td><a href="javascript:player.seekTo(260, false)">260</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(260, false)">260</a></td>
<td><a href="javascript:player.seekTo(260, false)"></a></td>
<td><a href="javascript:player.seekTo(265, false)">265</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(265, false)">265</a></td>
<td><a href="javascript:player.seekTo(265, false)"></a></td>
<td><a href="javascript:player.seekTo(270, false)">270</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(270, false)">270</a></td>
<td><a href="javascript:player.seekTo(270, false)"></a></td>
<td><a href="javascript:player.seekTo(275, false)">275</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(275, false)">275</a></td>
<td><a href="javascript:player.seekTo(275, false)"></a></td>
<td><a href="javascript:player.seekTo(280, false)">280</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(280, false)">280</a></td>
<td><a href="javascript:player.seekTo(280, false)"></a></td>
<td><a href="javascript:player.seekTo(285, false)">285</td>
</tr>
</table>
And you can see the page at http://134.117.226.43:8000/check_sub...ty/test101/91/ any help ? I currently have a page which, when the user clicks a button creates a new row displaying a form. I also have other forms on this page however so I was wondering if anyone knew how to close a form using javascript? Thanks for any help. My code to create the table row and form are below... Code: myform = document.createElement("form");
myform.method = "post";
myform.action = "editdetails.php";
myform.id = "editemail";
myform.name = "editemail";
var a=document.getElementById('editdetailstable').insertRow(2);
var b=document.getElementById('editdetailstable').insertRow(3);
var x=a.insertCell(0);
x.innerHTML="New Email: ";
x.align = "right";
var y=a.insertCell(1);
y.innerHTML="<input type='text' name='email' id='email' />";
var z=b.insertCell(0);
z.innerHTML="<input type='button' value='Change' />"
z.colSpan = "2";
z.align = "center";
Let's say I would want to create a custom object with properties. The properties would get their values from text input fields. The only thing that I can't get is how to assign variables to the new instances of the object.Here's my go at it: //First create object prototype function Obj(prop1,prop2,prop3) { this.prop1=prop1; this.prop2=prop2; this.prop3=prop3; this.showProps=showProps; //This method will show all props } //Array for storing each object instance var Objects=new Array(),i=-1; //---Now the HTML code <form name="myform" onSubmit="Objects[i++]=new Obj(text1.value,text2.value,text3.value)"> <b>Age:</b><input name="text1"> <b>Sex:</b><input name="text2"> <b>Location:</b><input name="text3"> <input type="submit"> </form> Ok,so knowing that each array element can store anything,including another object I used an Array to store each object instance.But is there any other way of storing objects? like in variables. Hello all, I am doing a website project and in that currently I am designing a product page. I have to design add values to text boxes and drag and drop the text boxes in the workspace and delete the text boxes the user does not want and have to draw a graphical line between the text boxes which are in order. I have designed and coded everything except the graphical line part. I am a learner in javascript and Can we draw a graphical line dynamically between the text boxes in the webpage? If we can draw, can anyone let me know the tutorial for that so that I can learn and start coding as I have to submit that project soon. Thank you. I'm slowly scraping away errors from a page im working on and ive found this forum to be very helpful- down to one more that i wanted to post on. sample page is he http://darrenlasso.com/freelance/loo.../lookbook.html Works fine in most all browsers except for IE8- ive even had to include built in ie7 compatibility to get it to work at all. Problem is most likely associated with my js, which is: Code: function ShowPage(frame)
{
frames[0].location = frame+'.html'
}
and html is: Code: <div id="thumb1"><a onmouseover="ShowPage('frame1')"onclick="ShowPage('frame1')" rel="nofollow" target="mainbox"></a></div>
<div id="thumb2"><a onmouseover="ShowPage('frame2')"onclick="ShowPage('frame2')" rel="nofollow" target="mainbox"></a></div>
<div id="thumb3"><a onmouseover="ShowPage('frame3')"onclick="ShowPage('frame3')" rel="nofollow" target="mainbox"></a></div>
etc etc.. Which is just something i found online - probly isnt right for what im trying to accomplish. If you go to the site- you navigate by hovering over/clicking the images at the top and that loads a new page into the iframe below. Id like to be able to fix the errors and get it working without having to force ie7 compatibility if possible too. Any help is much appreciated Hi, i have got this piece of code: Code: var f = [];
var x = 1;
f[0] = function(){alert(x);};
var x = 2;
f[1] = function(){alert(x);};
f[0]();
f[1]();
I would like to display the number 1 at first and then 2. but this code produces number 2 for both alerts. I was able to achieve what i want with "new" constructor when creating functions but this is not a good practice and after all i am passing these functions as an event handler and it cant be done with "new" keyword because it is throwing error. I think there are some solutions with arrays e.g the x would be an array of numbers, but i don't like it. Am i missing something important? Thanks for your replies. i am creating a header for a webpage. the header has two text menus (no images). the first menu (menu A) is like this: link 1a / link 2a / link 3a the second menu (menu B) is like this: link 1b link 2b link 3b i would like to use javascript/css to do the following: when you rollover link 1a, three things happen: link 1a changes color, link 1b changes color, and and link 1b adds a line of text (so it reads: link 1b : text 1b) i would also like- and this is where i am having trouble- for the following to happen: when you rollover link 1b, link 1b changes color and adds the additional text, as well as link 1a changes color. it doesn't seem so bad when i write it out here, but i can't figure out how to do it. any help is appreciated. I am using this script that gets messed up when you resize the window. I figured out that I could use this other script to do stuff just after the window gets resized. Code: (function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
// usage:
$(window).smartresize(function(){
// code that takes it easy...
});
So I re-instantiate the misbehaving script in there so it fires whenever the window is resized (I changed it to 500 so it really only fires once after you are done resizing). This fixes it. The new instance doesn't have a problem but the old instance is still there and messed up. so I use. $($.misbehaving-script).remove(); just before instantiating after window resize, which gets rid of broken instance. Problem solved.. Except that messes up a different script! It's driving me crazy. Any advice would of course be very welcome. I'm trying to find a script that will replace all instances of HTML code within a page. I saw the Javascript replace method. How can I leverage this on my page to replace every instance of a certain piece of code? Pretend this is a <div> in my page: <div style="width:340px;">Try this code out.</div> How could I convert all instances of this code to: <div style="width:340px;">Try this testing stuff.</div> Thanks for any help! Hi I need help with spawning in my game. I have this code: Code: function spawnEnemy()
{
var shapes = [LeftBlock, RightBlock, middleRightBlock, middleLeftBlock, middleBlock];
var shape = shapes[Math.floor(Math.random() * shapes.length)];
var RandomBlock = new THREE.Object3D();
RandomBlock.add(shape);
blocks.push(RandomBlock);
for (var i = 0; i < blocks.length; i++) {
RandomBlock = blocks[i];
scene.add(RandomBlock);
hit = false;
}
}
function startSpawningEnemies()
{
repeater = setInterval(function() {
spawnEnemy();
newBlock = false;
}, 1000);
}
Basically it chooses a random object in the array 'shapes' and it adds the shape to the scene every second. But the problem is that when I have, for example a 'Leftblock' on screen and it randomly gets called again, Leftblock will get reset to the starting position, so basically I cant have 2 of the same type of block on screen at once. So I want want every block in the array to be an entirely new instance of a block, rather than the same. Here is a code pen so you can see what is happening My Codepen Thanks in advance Reply With Quote 01-31-2015, 12:06 PM #2 Lesshardtofind View Profile View Forum Posts Visit Homepage New Coder Join Date Sep 2013 Location Houston Posts 20 Thanks 0 Thanked 4 Times in 4 Posts Hey I apologize in advance this will probably be a long post, but to get to the root of your problem it takes a bit of explaining to show how I fixed it. If you don't want to read about all the changes and why I did them if you scroll to the bottom of this post the last code snippet is the new working code. Firstly I'd like to make a few comments. 1. Try to avoid using so many globals that is what is confusing the whole thing. 2. Even though JavaScript isn't a classical language. Using some OOP approaches can simplify your code quite a bit. Now to what your actual problem was. You only had one instance of meshes for each type of block/paddle or whatever you call it. Even though you created new 3d objects you still were just passing it the values of the current existing Meshes. In order to get around this I simplified your code a lot. I removed around 200 lines of code and created a few objects to make things easier. I don't know that I can explain every single thing I did, but creating objects is very useful for instance instead of making a ton of variables for each box you can make an Object called Box and then create a new instance of it. Since your Box also needs a mesh you can create that inside of the box as well. Code: function Box(w, h, d, q, m){
var CoreInfo = {
width: w,
height: h,
depth: d,
quality: q,
material: m
};
var Mesh = GetNewMesh(CoreInfo);
this.setMeshY = function(y){
Mesh.position.y = y;
}
this.setMeshX = function(x){
Mesh.position.x = x;
}
this.getCoreInfo = function(key){
return CoreInfo[key];
}
this.setCoreInfo = function(key, val){
CoreInfo[key] = val;
}
this.getAllInfo = function(){
return CoreInfo;
}
this.getMesh = function(){
return Mesh;
}
this.setShadows = function(r, c){
Mesh.receiveShadow = r;
Mesh.castShadow = c;
}
}
// you will notice that it calls this to get a MESH instead of using 5+ serperate calls you can now wrap it into a function that takes an assoc array.
function GetNewMesh(info){
var Q = info["qaulity"];
return new THREE.Mesh(
new THREE.BoxGeometry(
info["width"],
info["height"],
info["depth"],
Q, Q, Q),
info["material"]);
}
With this object you can create new instances of boxes just by passing all the variables it needs and save it into a new object. example use: Code: var BlockMat = new THREE.MeshLambertMaterial({color: 0x3c00ff});
var Abox = new Box(10, 160, 10, 1, BlockMat);
As you can see the Box requires 5 arguments to construct. They are width, height, depth, quality, and material; You will also notice there are functions inside of the Box to call functionality they are setMeshY(y): This sets the Y position of the mesh as the y value passed to it; setMeshX(x): This sets the X position of the mesh as the x value passed to it; getCoreInfo(key): This gets some CoreInfo based on a string or "key" that you pass it. EX use Box.getCoreInfo("width"); setCoreInfo(key, value): This sets some CoreInfo based on a string or "key" that you pass it. EX use Box.setCoreInfo("width", 100); getAllInfo(): Returns ALL CoreInfo in an assoc array that is accessed by a "key." EX use var AllInfo = Box.getAllInfo(); AllInfo["width"]; getMesh: Returns The mesh object setShadows: Allows you to set shadows by passing true or false for the receive and cast arguments. Now some of your enemy boxes needed two boxes so I further created a object called Double Box; These are very much the same as a box. Just all methods need to be passed an index as well. These are identical to your original objects as Paddle1 is now at index 0, and Paddle2 is at index1 for each respective object. With those objects created we can Delete a TON of your global variables and clean some stuff up. As a matter of fact the more I looked at it you didn't even NEED globals for your set enemy paddle types at all. I was able to wrap them all up into a function that will return an object like you wanted by being passed a string. Code: function GetBlock(type){
if(type == "m"){
var temp = new DoubleBox(10, 75, 10, 1, BlockMat, 10, 75, 10, 1, BlockMat);
var obj = new THREE.Object3D();
obj.add(temp.getMesh(0));
obj.add(temp.getMesh(1))
temp.setMeshX(0, fieldWidth/2);
temp.setMeshY(0, -60);
temp.setMeshX(1, fieldWidth/2);
temp.setMeshY(1, 60);
return obj;
}
else if(type == "mr"){
var temp = new DoubleBox(10, 30, 10, 1,BlockMat, 10, 110, 10, 1,BlockMat);
var obj = new THREE.Object3D();
obj.add(temp.getMesh(0));
obj.add(temp.getMesh(1));
temp.setMeshX(0, fieldWidth/2);
temp.setMeshY(0, -80);
temp.setMeshX(1, fieldWidth/2);
temp.setMeshY(1, 40);
return obj;
}
else if(type == "ml"){
var temp = new DoubleBox(10, 30, 10, 1, BlockMat, 10, 110, 10, 1, BlockMat);
var obj = new THREE.Object3D();
obj.add(temp.getMesh(0));
obj.add(temp.getMesh(1));
temp.setMeshX(0, fieldWidth/2);
temp.setMeshY(0, 80);
temp.setMeshX(1, fieldWidth/2);
temp.setMeshY(1, -40);
return obj;
}
else if(type == "l"){
var temp = new Box(10, 160, 10, 1, BlockMat);
var obj = new THREE.Object3D();
obj.add(temp.getMesh());
temp.setMeshX(fieldWidth/2);
temp.setMeshY(20);
return obj;
}
else if(type == "r"){
var temp = new Box(10, 160, 10, 1, BlockMat);
var obj = new THREE.Object3D();
obj.add(temp.getMesh());
temp.setMeshX(fieldWidth/2);
temp.setMeshY(-20);
return obj;
}
}
While this could be cleaned up and do some extra error checking it now does EXACTLY what you need it to. You can call this function and pass it a string for each type of block you want. It will return a NEW instance of that type of block without sharing meshes as you had previously programmed it to. now you can call this function in the spawn enemy function Code: function spawnEnemy() //total enemies starts at 0 and every-time you add to array
{
var shapes = ["l", "r", "mr", "ml", "m"]; // these are the strings that pass to the GetBlock(type) function as type
var shape = shapes[Math.floor(Math.random() * shapes.length)];
blocks.push(new THREE.Object3D().add(GetBlock(shape))); // now you just pass the function to the THREE.Object3d().add() accepting shape as a parameter.
for (var i = 0; i < blocks.length; i++) {
RandomBlock = blocks[i];
scene.add(RandomBlock);
hit = false;
}
}
I know I made a lot of changes and there are still plenty more that could reduce your code even further, but when I finally got to a point where it was working the way you wanted to I figured I'd hand it back over to you. HERE is the final code that works if you want to copy paste it over to test it. Code: //scene object variables
var renderer, scene, camera, pointLight, spotLight;
var hit;
var newBlock = false;
//field variables
var fieldWidth = 500, fieldHeight = 200;
function GetNewMesh(info){
var Q = info["qaulity"];
return new THREE.Mesh(
new THREE.BoxGeometry(
info["width"],
info["height"],
info["depth"],
Q, Q, Q),
info["material"]);
}
function Box(w, h, d, q, m){
var CoreInfo = {
width: w,
height: h,
depth: d,
quality: q,
material: m
};
var Mesh = GetNewMesh(CoreInfo);
this.setMeshY = function(y){
Mesh.position.y = y;
}
this.setMeshX = function(x){
Mesh.position.x = x;
}
this.getCoreInfo = function(key){
return CoreInfo[key];
}
this.setCoreInfo = function(key, val){
CoreInfo[key] = val;
}
this.getAllInfo = function(){
return CoreInfo;
}
this.getMesh = function(){
return Mesh;
}
this.setShadows = function(r, c){
Mesh.receiveShadow = r;
Mesh.castShadow = c;
}
}
function DoubleBox(B1w, B1h, B1d, B1q, B1m, B2w, B2h, B2d, B2q, B2m) {
var Boxes = [];
Boxes[0] = new Box(B1w, B1h, B1d, B1q, B1m);
Boxes[1] = new Box(B2w, B2h, B2d, B2q, B2m);
this.setMeshY = function (index, y) {
Boxes[index].setMeshY(y);
}
this.setMeshX = function (index, x) {
Boxes[index].setMeshX(x);
}
this.getCoreInfo = function (index, key) {
return Boxes[index].getCoreInfo(key);
}
this.setCoreInfo = function (index, key, val) {
Boxes[index].setCoreInfo(key, val);
}
this.getAllInfo = function (index) {
return Boxes[index].getAllInfo();
}
this.getMesh = function (index) {
return Boxes[index].getMesh();
}
this.setShadows = function (index, r, c) {
Boxes[index].setShadows(r, c);
}
}
var BlockMat = new THREE.MeshLambertMaterial({color: 0x3c00ff});
var Player = new Box(10, 30, 10, 1, new THREE.MeshLambertMaterial({color: 0x4AA02C}));
function GetBlock(type){
if(type == "m"){
var temp = new DoubleBox(10, 75, 10, 1, BlockMat, 10, 75, 10, 1, BlockMat);
var obj = new THREE.Object3D();
obj.add(temp.getMesh(0));
obj.add(temp.getMesh(1))
temp.setMeshX(0, fieldWidth/2);
temp.setMeshY(0, -60);
temp.setMeshX(1, fieldWidth/2);
temp.setMeshY(1, 60);
return obj;
}
else if(type == "mr"){
var temp = new DoubleBox(10, 30, 10, 1,BlockMat, 10, 110, 10, 1,BlockMat);
var obj = new THREE.Object3D();
obj.add(temp.getMesh(0));
obj.add(temp.getMesh(1));
temp.setMeshX(0, fieldWidth/2);
temp.setMeshY(0, -80);
temp.setMeshX(1, fieldWidth/2);
temp.setMeshY(1, 40);
return obj;
}
else if(type == "ml"){
var temp = new DoubleBox(10, 30, 10, 1, BlockMat, 10, 110, 10, 1, BlockMat);
var obj = new THREE.Object3D();
obj.add(temp.getMesh(0));
obj.add(temp.getMesh(1));
temp.setMeshX(0, fieldWidth/2);
temp.setMeshY(0, 80);
temp.setMeshX(1, fieldWidth/2);
temp.setMeshY(1, -40);
return obj;
}
else if(type == "l"){
var temp = new Box(10, 160, 10, 1, BlockMat);
var obj = new THREE.Object3D();
obj.add(temp.getMesh());
temp.setMeshX(fieldWidth/2);
temp.setMeshY(20);
return obj;
}
else if(type == "r"){
var temp = new Box(10, 160, 10, 1, BlockMat);
var obj = new THREE.Object3D();
obj.add(temp.getMesh());
temp.setMeshX(fieldWidth/2);
temp.setMeshY(-20);
return obj;
}
}
//ball variables
var reftBlock, lightBlock, middleRightBlock, middleLeftBlock, middleBlock, RandomBlock;
//game-related variables
var score = 0;
var repeater;
var blocks = [];
var collidableMeshList = [];
function setup()
{
// update the board to reflect the max score for match win
document.getElementById("winnerBoard").innerHTML = "Move in the gaps!";
// set up all the 3D objects in the scene
createScene();
// and let's get cracking!
draw();
}
function createScene()
{
// set the scene size
var WIDTH = 640,
HEIGHT = 360;
// set some camera attributes
var VIEW_ANGLE = 50,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
var c = document.getElementById("gameCanvas");
// create a WebGL renderer, camera
// and a scene
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setClearColorHex(0xffffff);
camera =
new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR);
scene = new THREE.Scene();
// add the camera to the scene
scene.add(camera);
// set a default position for the camera
// not doing this somehow messes up shadow rendering
//camera.position.z = 320;
// start the renderer
renderer.setSize(WIDTH, HEIGHT);
// attach the render-supplied DOM element
c.appendChild(renderer.domElement);
// set up the playing surface plane
var planeWidth = fieldWidth,
planeHeight = fieldHeight,
planeQuality = 10;
// create the plane's material
var planeMaterial =
new THREE.MeshLambertMaterial(
{
color: 0xffffff
});
// create the table's material
var tableMaterial =
new THREE.MeshLambertMaterial(
{
color: 0x3c00ff
});
// create the ground's material
var groundMaterial =
new THREE.MeshLambertMaterial(
{
color: 0xffffff
});
// create the playing surface plane
var plane = new THREE.Mesh(
new THREE.PlaneGeometry(
planeWidth * 1.25, // 95% of table width, since we want to show where the ball goes out-of-bounds
planeHeight,
planeQuality,
planeQuality),
planeMaterial);
scene.add(plane);
plane.receiveShadow = true;
var table = new THREE.Mesh(
new THREE.BoxGeometry(
planeWidth * 1.15, // this creates the feel of a billiards table, with a lining
planeHeight * 1.04,
100, // an arbitrary depth, the camera can't see much of it anyway
planeQuality,
planeQuality,
1),
tableMaterial);
table.position.z = -51; // we sink the table into the ground by 50 units. The extra 1 is so the plane can be seen
scene.add(table);
table.receiveShadow = true;
scene.add(Player.getMesh());
startSpawningEnemies();
Player.setShadows(true, true)
/*collidableMeshList.push(MiddleBlock.getMesh(0), MiddleBlock.getMesh(1),
MiddleLeftBlock.getMesh(0), MiddleLeftBlock.getMesh(1), MiddleRightBlock.getMesh(0),
MiddleRightBlock.getMesh(1), RightBlock.getMesh(), LeftBlock.getMesh());*/
// set paddles on each side of the table
Player.setMeshX(-fieldWidth/2 + Player.getCoreInfo("width"));
//collidableMeshList.push(RandomBlock);
// finally we finish by adding a ground plane
// to show off pretty shadows
var ground = new THREE.Mesh(
new THREE.BoxGeometry(
1000,
1000,
3,
1,
1,
1 ),
groundMaterial);
// set ground to arbitrary z position to best show off shadowing
ground.position.z = -132;
ground.receiveShadow = true;
scene.add(ground);
// // create a point light
pointLight =
new THREE.PointLight(0xffffff);
// set its position
pointLight.position.x = -1000;
pointLight.position.y = 0;
pointLight.position.z = 1000;
pointLight.intensity = 2.9;
pointLight.distance = 10000;
// add to the scene
scene.add(pointLight);
// add a spot light
// this is important for casting shadows
spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(0, 0, 460);
spotLight.intensity = 1.5;
spotLight.castShadow = true;
scene.add(spotLight);
// MAGIC SHADOW CREATOR DELUXE EDITION with Lights PackTM DLC
renderer.shadowMapEnabled = true;
}
function draw()
{
// draw THREE.JS scene
renderer.render(scene, camera);
// loop draw function call
requestAnimationFrame(draw);
cameraPhysics();
playerPaddleMovement();
enemyPaddleMovement();
collision();
//addScore();
}
function addScore()
{
if (RandomBlock.position.x < Pad.getMesh().position.x*2 && newBlock == false) {
console.log("pass");
newBlock = true;
if (hit == false) {
score++;
}
else {
score--
}
document.getElementById("scores").innerHTML = score;
}
}
function enemyPaddleMovement()
{
if(score < 10)
{
for (var i = 0; i < blocks.length; i++) {
blocks[i].position.x -= 3;
}
}
if(score >= 10)
{
for (var i = 0; i < blocks.length; i++) {
blocks[i].position.x -= 5;
}
}
}
function playerPaddleMovement()
{
if (Key.isDown(Key.D))
Player.setMeshY(80);
else if (Key.isDown(Key.F))
Player.setMeshY(40);
else if (Key.isDown(Key.H))
Player.setMeshY(0);
else if (Key.isDown(Key.J))
Player.setMeshY(-40);
else if (Key.isDown(Key.K))
Player.setMeshY(-80);
}
//Handles camera and lighting logic
function cameraPhysics()
{
// move to behind the player's paddle
camera.position.x = Player.getMesh().position.x - 100;
camera.position.y += (Player.getMesh().position.y - camera.position.y) * 0.05;
camera.position.z = Player.getMesh().position.z + 100 + 0.04 * (Player.getMesh().position.x);
// rotate to face towards the opponent
camera.rotation.y = -60 * Math.PI/180;
camera.rotation.z = -90 * Math.PI/180;
}
//Handles paddle collision logic
function collision()
{
var originPoint = Player.getMesh().position.clone();
for (var vertexIndex = 0; vertexIndex < Player.getMesh().geometry.vertices.length; vertexIndex++)
{
var ray = new THREE.Raycaster( originPoint, Player.getMesh().geometry.vertices[vertexIndex] );
var collisionResults = ray.intersectObjects( collidableMeshList );
if ( collisionResults.length > 0)
{
console.log("true");
hit = true;
}
}
}
function resetBall()
{
}
//checks if either player or opponent has reached 7 points
function matchScoreCheck()
{
}
function spawnEnemy() //total enemies starts at 0 and every-time you add to array
{
var shapes = ["l", "r", "mr", "ml", "m"];
var shape = shapes[Math.floor(Math.random() * shapes.length)];
blocks.push(new THREE.Object3D().add(GetBlock(shape)));
for (var i = 0; i < blocks.length; i++) {
RandomBlock = blocks[i];
scene.add(RandomBlock);
hit = false;
}
}
function startSpawningEnemies()
{
repeater = setInterval(function() {
spawnEnemy();
newBlock = false;
}, 1000); //this calls spawnEnemy every spawnRate
/////////spawn 'spawnAmount' enemies every 2 seconds
}
I also commented out your addScore() function because it references RandomBlock which is not defined in its scope and the error message was annoying for debugging. I also commented out the collision as you will need to think of a new method for doing that. Most likely just build a function that accepts an array and then just pass it your blocks array and let it loop through it. Overall cool game good luck to ya. Don't hesitate to reach out if you have any other questions. Reply With Quote Users who have thanked Lesshardtofind for this post: TeaAnyOne (01-31-2015) 01-31-2015, 02:31 PM #3 TeaAnyOne View Profile View Forum Posts New to the CF scene Join Date Jan 2015 Posts 4 Thanks 2 Thanked 0 Times in 0 Posts Wow! I didn't expect such a huge reply, it seems that my original code has changed a lot and I will have to give it a hard look through it to understand it. I will contact you if I have any questions, I have a lot of work ahead of me. Thanks a lot Reply With Quote 01-31-2015, 04:45 PM #4 TeaAnyOne View Profile View Forum Posts New to the CF scene Join Date Jan 2015 Posts 4 Thanks 2 Thanked 0 Times in 0 Posts I suppose I do have one more question. How do I get the position.x of the Randomblocks. I tried using a for loop like this: for (var i = 0; i < blocks.length; i++) { if (blocks[i].position.x === Player.getMesh().position.x*2 && newBlock === false) { console.log("pass"); newBlock = true; if (hit === false) { score++; } else { score--; } } document.getElementById("scores").innerHTML = score; } } it works but it seems kind of buggy as it stops counting to 10 when it changes speed. Is there another way to retrieve the position? Reply With Quote 01-31-2015, 07:43 PM #5 Lesshardtofind View Profile View Forum Posts Visit Homepage New Coder Join Date Sep 2013 Location Houston Posts 20 Thanks 0 Thanked 4 Times in 4 Posts That should work for getting the position since the Blocks are objects of type THREE.Object3d so any methods they have should work for you. You may be having problems because you never despawn enemies ultimately getting a huge number of 3d objects in your array blocks, or you may find your position requirement doesn't mathematically work with your speed up. Sometimes just using a few extra console.logs to track your numbers inside of functions that don't seem to be working can help you to get an idea of what values it is seeing for the numbers and when. It might make the problem super obvious. This more like shotgun debugging which is discouraged by many, but I found it to help a lot when I was first learning code. Ultimately you want to understand your logic in each function and how it can fail when you program it, and then use error checking to make sure no parameters get outside of your allowed variance. Reply With Quote Users who have thanked Lesshardtofind for this post: TeaAnyOne (01-31-2015) 01-31-2015, 08:27 PM #6 TeaAnyOne View Profile View Forum Posts New to the CF scene Join Date Jan 2015 Posts 4 Thanks 2 Thanked 0 Times in 0 Posts OK ill see if I can get it working. Thanks for all your help! It helped me a lot. Reply With Quote 01-31-2015, 08:31 PM #7 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts Originally Posted by Lesshardtofind Ultimately you want to understand your logic in each function and how it can fail when you program it, and then use error checking to make sure no parameters get outside of your allowed variance. Very well said! Hi, I have a question about an oop/class style form of javascript programming. I have stripped the code down to the basic minimum. The problem is I have created two instances of the same class and have entered data into those classes. But as you will see the two separate instances of the class appear to share the same data. How do I get my class structure working so separate instances will retain their separate data? Here is the code: Index.html Code: <html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
debugger;
// Do this because a page resart seems to keep old data
function SetGlobals()
{
var ui;
var el;
// Arr00
ui = document.getElementById("Arr00");
el = arr0.arrayGet(0);
ui.innerHTML = el.m_String;
// Arr01
ui = document.getElementById("Arr01");
el = arr0.arrayGet(1);
ui.innerHTML = el.m_String;
// Arr10
ui = document.getElementById("Arr10");
el = arr1.arrayGet(0);
ui.innerHTML = el.m_String;
// Arr11
ui = document.getElementById("Arr11");
el = arr1.arrayGet(1);
ui.innerHTML = el.m_String;
}
function MyOnLoad()
{
SetGlobals();
}
</script>
</head>
<body onload="MyOnLoad()" style="width:100%; height: 100%; padding: 0 0 0 0; margin: 0 0 0 0; overflow: hidden; background:#000000">
<div id="divScreen" style="display: block; width:100%; height="100%">
<div id="divMenu" style='float: left; background:#00FF00; border-color: #000000; border-width: 1px;'>
<table>
<tr>
<td>
Array 0/String 0: <label id="Arr00"></label>
</td>
</tr>
<tr>
<td>
Array 0/String 1: <label id="Arr01"></label>
</td>
</tr>
<tr>
<td>
Array 1/String 0: <label id="Arr10"></label>
</td>
</tr>
<tr>
<td>
Array 1/String 1: <label id="Arr11"></label>
</td>
</tr>
</table>
</div>
<div id="divMain" style='height: 100%; background:#0000FF; margin-left: 250px; border-color: #000000; border-width: 1px;'>
</div>
</div>
</body>
</html>
Test.js Code: var BaseARR = function()
{
_arr = []; // new Array();
// Public functions that can access private members
this.Add = function(arg)
{
var i, addAt;
if(arg==null || (addAt = FindEnterPos(arg))<0)
return false;
// since adding and not deleting anything, nothing of value will be returned
_arr.splice(addAt, 0, arg);
return true;
};
// This finds the entry position for in
FindEnterPos = function(arg)
{
return (_arr.length + 1);
};
this.arrayGet = function(i)
{
return ((_arr != null && i >= 0 && i < _arr.length) ? _arr[i] : null);
};
};
var stringId = function(id, str)
{
// public has a this. , privates have just var
this.m_Id = id; // int
this.m_String = str; // string
};
// This so allow statics
var stringIdARR = function()
{
BaseARR.call(this);
};
|
|||||||