|
JavaScript - Javascript & 3d Object Manipulation
Hi,
I'm looking for some help, or perhaps an explaination in regards to "click & rotate" an image using your cursor with Javascript. I've seen this a couple of times on various websites and I'm wondering how difficult/expensive it is to develop such an image. I own a clothing company and what I'm looking to do is to create images on my website of a product in which the customer can click on and "rotate" to see a 360 degree view of the product. Think autocad to a degree... Is Javascript the best language to pursue for this function? I'm quite new to this department, so any help/advice is greatly appreciated. Similar TutorialsHello everyone, I am trying to make a canvas element display an image with some text on using canvas.drawImage and canvas.fillText. Only problem is my code is generating a very odd and hard to debug error. Thanks in advance, Alex Code(JS): Code: function runstuff() {
canvasthing = document.getElementById('1');
context = canvasthing.getContext('2d');
purple = new Image();
purple.src = 'img/buttonpurple.png';
purple.onload = function() {
context.drawImage('purple', 0, 0);
};
context.font = '16px Vani';
context.textBaseline = 'top';
context.fillText('Test', 26, 24);
}
Code(html): Code: <!doctype html> <html lang="en"> <head> <title>POB.G</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"> </script> </head> <body onload="runstuff()"> <canvas id="1" width="127" height="128"></canvas> </body> </html> Error: Code: Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: file:///C:/Users/*BlahBlahBlah/script.js :: <TOP_LEVEL> :: line 7" data: no] I am doing my homework for my class, and I don't usually ask for this much help because I get most of them done by myself. However, I am having a really hard time to understand this time. I have lots lots of questions...I tried to follow the instructions that I got from my professor, but it seems not clear enough to me... If anyone can fix or add on my codes, I will be really really appreciated....and here is the instructions and my codes.. If the form validates, instead of returning true, call the GetValues() function followed by the DisplayOutput() function. so, I changed result true to calling functions like this, Code: if (blnError == true){
return false;
}
else {
DisplayOutput();
GetValues();
}
In the .js file, create a PortraitOrder class using the following specifications Properties: portrait, copies, size, buyer Method: CalculateCost () -- determines the size (radio buttons) and then mutiplies the related cost by the number of copies Code: function PortraitOrder(){
var cost;
this.copies = "";
this.portrait = "";
this.size = "";
this.buyer = "";
var CalculateCost = {
met1 : function () {
if(size == 0){
cost = this.copies * 10
}
else if(size ==1){
cost = this.copies * 20
}
else if(size ==2){
cost = this.copies * 10
}
else if(size ==3){
cost = this.copies * 30
}
else{
cost = this.copies * 20
}
}
}
}
Create a new instance of the class named portraits as a global variable in the ,js file -" I don't see why I need this. So I did not create Create a GetValues() function that will retrieve the values from the form fields (document.forms[0].element.value) and assign them the properties of the instance of the PortraitOrder class. use a for loop to retrieve the value from the radio buttons use the prototype property to add a new property named email to the instance of the class retrieve the value from the form field and assign it to the new email property Code: function GetValue(){
this.copies = document.forms[0].Copies.value;
this.buyer = document.forms[0].Buyer.value;
var file = document.getElementsByName('Filename');
for(var i = 0; i < file.length; i++){
if(file[i].checked){
this.portrait = file[i].value;
}
}
var sizes = document.getElementsByName('Size');
for(var i = 0; i < sizes.length; i++){
if(sizes[i].checked){
this.size = sizes[i].value;
}
}
GetValue.prototype.email = document.forms[0].Email.value;
}
Create a DisplayOutput() function that calls the CalculateCost () method for the current instance of the class. displays the image using the value from the portrait property which contains the filename. Be sure to include height and width (and that would be why all of the images had to be the same dimension. These values can be hardcoded. The filename, however, may NOT be hard coded.. it must use the object.property format. displays the buyer, email, copies, size, and cost using the object.property format (document.forms[0].element.value is not permitted) The cost must be formatted as ##.## where # represents a number (Hint: Use a method of the Number class). It is NOT okay just to concatenate .00 to then end of the cost. Code: function DisplayOutput(){
CalculateCost.met1();
document.write("buyer: " + this.buyer);
document.write("Email: " + email);
document.write("Portrait: " + this.portrait);
document.write("Copies: " + this.copies);
document.write("Cost: " + "$"+cost.toFixed(2));
document.write("Thank you");
}
The order form must include the site's header and footer and coordinate with the rest of the site. There is no form processing file, everything is done in the .js file. You may think like, this is horrible codes. And yes, it is. I know probably this is totally odd. This is why I came here for ask help. Also, I spent days to tried, but I could not get any idea...Anyone please help me on this? How can i display a javascript object having [CODE]var myVarr = [{"name":"xyz","age":21}, {"name":"cde","age":25}].[CODE] in a table in jsp page? Regards, Anas I am rather new to javascript programming and not sure if this is the best approach to handle a problem. In setting up a simple image display that can later be modified to a rotator, I am using the following code window.document.display1.src = image1.src; now the question is when modifying that to be more dynamic, where display1,display2,.. can refer to a different image (or set). var Image = "image"; var Display = "display"; for (i=1; i<n; i++){ window.document.this[Display+i].src = this[Image+i].src; } I know the right hand side of the equation is working (alert() displays the right soure), but the problem is the left hand side. I guess because of me not fully understanding the way objects work. why this[] works on the right and not on the left? and how do I resolve it? All your comments, and a push in right direction are appreciated. Hi, I am trying to create an array to pass to JQuery, but after several hours of trying, am falling over. I am trying to use Ajax to populate the javascript FullCalendar. I am trying to pass an arry to the following property: This works: $('#calendar').fullCalendar({ events: [{"id":1112,"title":"Event1","start":"2009-10-10"},{"id":222,"title":"Event2","start":"2009-10-20","end":"2009-10-22"}] }; something like: $('#calendar').fullCalendar({ events: MyJSArray() }; I will be using AJAX to populate MyJSArray(). I have tried the likes of: MyJSArray = new array("id"=>112,"title"=>"Event1", etc); But no joy I don't know how to get a javascript array into that format. I have my database values, but I need to put them into a format that the "Event" will accept. I have used PHP and arrays fine, but coming to grips with JS arrays,etc are a bit finiky at the moment. I am a little stuck, any help or points in the right direction will be much appreciated. Thanks Blueevo. I have several list items in an html document. Each list item has an anchor tag and each anchor has an 'onmouseover' event. Is it possible to get the containing object for the event upon the mouseover? Hi i am confused in one topic and need help, I have a javascript array containing objects like; Object values are ordered as Type, Amount and count. Object 1 => ("A" , 100 ,10) Object 2 => ("C" , 50 ,10) Object 3 => ("A" , 100 ,20) Object 4 => ("B" , 200 ,10) Object 5 => ("A" , 10 ,10) Object 6 => ("B" , 100 ,10) Object 7 => ("C" , 100 ,5) Object 8 => ("C" , 50 ,5) In the end i want to group these objects like ; ("A" , 100,30) (Note : 30 = 20 +10) ("A" , 10,10) ("B" , 200,10) ("B" , 100,10) ("C" , 100,5) ("C" , 50,15) 15 = 10 + 5 How can i do this in javascript, note that the new types will be added to this array ? Hi, My JS Date validation was failing for a date which as per business is a valid date (01/01/0001) - MM/DD/YYYY It seems that the constructor for Date object is doing something funny.. var dayobj = new Date(yearfield, monthfield-1, dayfield) wasn't working for this case whereas teh one mentioned below seems to be working fine : var dayobj = new Date() dayobj.setFullYear(yearfield,monthfield-1,dayfield) What's the trick here ?? I was going through an article on JavaScript objects on "http://www.howtocreate.co.uk/tutorials/javascript/javascriptobject" and there I read Quote: Intrinsic objects - variable types with constructors. * Array * Boolean * Date * Function * Image * Number * Object * Option * Regular Expression * String does it mean that, whenever I want to use any of these objects, I have to create it using new and only then I can use its properties or methods ? 1) There are other objects like document, history, location, navigator, parent and screen. If objects which need to be created using constructor are called intrinsic objects , then what are other objects which can be used without constructor are called as ? Array, Boolean, Image, Date etc all start with capital letter. While document, history, navigator etc start with lower case letter. Why is that ? Is there any difference between objects that start with upper case and those start with lower case ? Are they known by different names ? Thanks Hi all, Have problem from getting data of JavaScript Object ie. Associative Array. Code: var a, table1
a = new ActiveXObject("MyProgID"); a.GetDataFromExcel("C:\\Users\\myFolder\\Desktop\\test.xls","Sheet1")
a.Generate()
table1 = a.writeInTable();
Here writeInTable function returns a 2D Object array from DLL written in VB.Net. So I got the Object to table1. But from table1, I can't access the values but its there. table1 shows values as in this image(Image Attached.) Actually, I tried many ways like tab(0)(0) tab[0][0] tab["0"] tab.(0).(0) tab.[0].[0] Also with toArray(), (new VBArray(tab)).toArray().... I don't know what I am wrong..Can anyone help me on this? Thanks... Shanmugavel.C I'm writing a script in javascript(actually a chrome extension) and I need an object that I can write to it like this(sorry, don't know how to explain it better) and then I convert it to string with format of json. Code: id[129].weekDay[6].hour[23] = 0 Here, id is an array, that each element in it contain another array(weeksDay) and in that array each contain another array(hour). The id indices are unlimited, for weekDay 7 and hour 24. I searched in google but i couldn't find what I wanted. Actually don't know the best keyword to search.(objects in arrays?) I don't know what exactly it is called, I can write it's declaration in VB.NET if that helps you. Hi I am using a custom form elements script in the link below: www_bristolstreet_co_uk/page/find_a_dealer.htm and an error for null object is appearing from this line: active = option[0].childNodes[0].nodeValue; Can anyone please help? I am a novice at Javascript but got this script working perfectly on my local machine - once I loaded it the live site it didn't work... any advice would be greatly appreciated. Hello I am using a timer which goes down from 2 minutes to zero when 'jsp' is called. Timer is written in javascript. I am getting an error that document.form1.timerMin.value=<%=min%> is null or not an object. Here is the code (t.jsp): <% /* Default timer */ int min = 2; int sec = 5; /* Check for timer params */ try { String timerMin = request.getParameter("timerMin"); if (timerMin==null)timerMin=""; if (timerMin != null) { min = Integer.parseInt(timerMin); } String timerSec = request.getParameter("timerSec"); if (timerSec==null)timerSec=""; if (timerSec != null) { sec = Integer.parseInt(timerSec); } } catch(Exception m) { System.out.println("generated exception..............:"+m); } %> <script language="JavaScript" type="text/javascript"> <!-- /* Initialise timer */ var min = <%=min%>; // set the minutes var sec = <%=sec%>; // set the seconds function countDown() { sec--; if (sec == -1) { sec = 59; min--; } /* Write timer state to hidden form fields */ document.form1.timerMin.value=<%=min%> document.form1.timerSec.value=<%=sec%>; time = (min<=9 ? "0" + min : min) + " min and " + (sec<=9 ? "0" + sec : sec) + " sec "; document.getElementById('theTime').innerHTML = time; SD=window.setTimeout("countDown()", 1000); if (min == 0 && sec == 0) { window.clearTimeout(SD); } } window.onload = countDown(); --> </script> <style type="text/css"> <!-- .timeClass { font-family:arial,verdana,helvetica,sans-serif; font-weight:normal; font-size:10pt; } --> </style> <table width="100%"> <tr><td width="100%" align="right"> <span id="theTime" class="timeClass"></span> </td></tr> <form method="post" name="form1" id="form1" action="t.jsp" <td width="50%" valign="middle"> <input type="hidden" name="timerMin" value="<%=min%>"> <input type="hidden" name="timerSec" value="<%=sec%>"> <div align="center"><a href="javascript:form1.submit()" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','/lms/images/submit_0.gif',1)"><img name="Image3" border="0" src="/lms/images/submit_0.gif" width="70" height="30"></a></div> </td> </form> Looking forward for an early reply. Thanks I have 2 drag-able containers, they are created in PHP objects which are linked to a file. The working example can be found he 888x7.com The problem that I'm facing is that I can't click test1, and only test2. Now I originally though that it was something to do with them having the same java-script variables, so I renamed all the variables using a unique ID to each object too no success. Here's the code: PHP file: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<?php
include 'design/compatability.php';
include 'design/meta.php';
?>
<link rel="stylesheet" type="text/css" href="css.css" />
<title></title>
</head>
<body>
<div id="background">
<img src="images/bg1.jpg" class="stretch" alt="" />
</div>
<div id="wrapper">
<?php include 'design/dragdiv.php';
$container = new dragable_box(200, 300, 10, 60, "../designimages/bggrey.png", "test", 1);
$container2 = new dragable_box(590, 400, 10, 10, "../designimages/bggrey.png", "test", 2);
?>
<?php include 'design/toplinks.php'; ?>
</div>
<?php include 'design/footer.php'; ?>
</body>
</html>
Code: <?php
class dragable_box
{
public function __construct($width, $height, $x, $y, $bg, $text, $id)
{
?>
<style type="text/css">
#mydiv<?php echo $id; ?>
{
z-index:10;
background-image:url(<?php echo $bg; ?>);
color:#ffffff;
width: <?php echo $width; ?>px;
height: <?php echo $height; ?>px;
position: absolute;
top: <?php echo $x; ?>%;
left: <?php echo $y; ?>%;
cursor:move;
padding:10px;
}
</style>
<script language="javascript">
var positionx = <?php echo $x; ?>;
var positiony = <?php echo $y; ?>;
var setpositionx = window.innerWidth * positionx / 100;
var setpositiony = window.innerHeight * positiony / 100;
var drag=0;
var xdif=0;
var ydif=0;
var initx=setpositionx;
var inity=setpositiony;
function begindrag<?php echo $id; ?>(event)
{
if(drag==0)
{
floatingd = document.getElementById("mydiv<?php echo $id; ?>");
if(floatingd.style.left=="")
{
floatingd.style.left=initx;
}
if(floatingd.style.top=="")
{
floatingd.style.top=inity;
}
prex=floatingd.style.left.replace(/px/,"");
prey=floatingd.style.top.replace(/px/,"");
drag=1;
xdif = event.clientX-prex;
ydif = event.clientY-prey;
}
else
{
drag=0;
}
}
function mousepos<?php echo $id; ?>(event)
{
floatingd = document.getElementById("mydiv<?php echo $id; ?>");
if(drag==1)
{
floatingd.style.left = event.clientX-setpositionx+"px";
floatingd.style.top = event.clientY-setpositiony+"px";
}
}
</script>
</HEAD>
<BODY onMouseMove="mousepos<?php echo $id; ?>(event)" >
<div id='mydiv<?php echo $id; ?>' onClick="begindrag<?php echo $id; ?>(event)" >
<?php
echo $text;
echo $id;
?>
</div>
<?php } } ?>
I need help being able to select both DIV's, can anyone point me in the right direction? Thanks Firstly let me say, im relatively new to Javascript so im still picking things up.. I have a website that i want to add several mp3's onto. When a user clicks a link i wanted to make javascript change the streaming audio to the one that was selected. My HTML is as follows.. Code: <table style="background-color:Black; color:gold; font-weight:700; font-size:16px">
<tr onClick="Click('http://www.m-hops.co.uk/Music/Motown Flavours.mp3')"><td>
1. Motown Flavours
</td></tr>
<tr onClick="Click('http://www.m-hops.co.uk/Music/All_Around_The_World.mp3')"><td>
2. All Around The World
</td></tr>
<tr><td>
<OBJECT ID="MediaPlayer" WIDTH="290" HEIGHT="50"
CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
STANDBY="Loading Windows Media Player components..."
TYPE="application/x-oleobject">
<PARAM id="TRACK" name="FileName" value="http://www.m-hops.co.uk/Music/Motown Flavours.mp3">
<PARAM name="autostart" value="true">
<PARAM name="ShowControls" value="true">
<param name="ShowStatusBar" value="true">
<EMBED id="sound" TYPE="application/x-mplayer2" src=""
NAME="MediaPlayer" WIDTH="290" HEIGHT="50" ShowControls="1" ShowStatusBar="1" autostart="1">
</EMBED>
</OBJECT>
</td></tr>
</table>
and my Javascript is.. Code: <script language="javascript" type="text/javascript">
function Click(track)
{
document.getElementById('TRACK').value = track;
window.alert(document.getElementById('TRACK').value);
}
</script>
It appears that the right track is being parsed to the javascript but its not changing the audio thats being played. Any ideas?? I know I can use the functions like parseFromString() to access and modify an existing XML documents, but is it possible to use JavaScript to create a blank xml document? I want to take data entered into the client, package it up as XML and use ajax to transmit it to the server. So far I've written my own class to create a simple xml document, but I'd like to do it properly with the inbuilt functions. hi, I am trying to setup an iphone application in Dashcode using what I have he http://www.mypubspace.com/dashtest/order.html Result of expression 'ajaxDisplay' [null] is not an object which is on the following line: Code: ajaxDisplay.innerHTML = ajaxRequest.responseText; is there a way around this? thanks Hi, I'm very new to javascript and I need your help. What I'm trying to do is: I have a html file with javascipt embeded in, in this file I want to use a table object in another javascript file. How do I access this object? Your help is very much appreciated. Regards, lep2 I am currently designing a table as such Code: ___________________________ | TABLE | | | FRAME A |___________________________| | last row clicked | FRAME B |___________________________| the top frame is a table and the bottom frame contains the last row clicked called through onclick. question: if frame B is a php file with a javascript object, how do i call the javascript object's function to print the data? here is what i have so far index.html //this is the source code for the site Code: <html> <frameset rows = "60%, 40%"> <frame src = "table_driver.php" name = "A" id = "FRAME1"> <frame src = "bottom_row.php" name = "B" id = "FRAME2"> </frameset> </html> printJSTable() //prints the table shown in frame A Code: function printJSTable()
{
echo '<script src = "java_script.js"></script>';
echo '<script src="sorttable.js"></script>';
echo '<table class = "sortable" id = "myTable" border = "1">';
echo '<thead id = "header"><tr>';
foreach($this->columns as $header => $order)
{
echo '<th>';
echo $header;
echo '</th>';
}
echo '</tr></thead><tbody>';
$counter = 0;
for($i = 0; $i < $this->numRows; $i++)
{
//IMPORTANT changeRow(this) is JS call
echo '<tr onclick = "changeRow(this)" onmouseover = "mouseOver(this)" onmouseout = "mouseOut(this)">';
foreach($this->data[$i] as $key => $value)
{
echo '<td>';
if($value!="")
echo $value;
else
{
echo '';
}
$counter++;
echo '</td>';
}
echo '</tr>';
}
echo '</tbody></table>';
echo '<form><input id = "'.$this->numRows.'"type = "button" value = "add row" onclick = "addRow(id)"></form>';
}
and this is changeRow(this) which is supposed to create the table in frame b Code: //populates headersArr and rowArr correctly parent.B.obj = new TableData(headersArr, rowArr); parent.B.obj.printTable(); here are the function definitions for TableData Code: function TableData(headers, row)
{
this.headerArr = headers;
this.rowArr = row;
}
TableData.prorotype.printTable = function()
{
for(i=0; i<this.headerArr.length; i++)
{
document.write('<tr><th>');
document.write(this.headerArr[i]);
document.write('</th><td>');
document.write(this.rowArr[i]);
document.write('</td></tr>');
}
}
and then, finally, this is the php file for the bottom frame Code: <html> <head> <link rel = "stylesheet" type = "text/css" href = "style.css"/> <script type = "text/javascript" src="java_script.js"></script> </head> <body> <script> obj = new TableData; </script> </body> </html> what i want to do is populate the variable obj from ^ (bottom_row.php) and then use the print function to print it out. right now it is populating correclt,y but i cant get it to print. The error console says that Value undefined (result of expression parent.B.obj.printTable) is not object. ?? sry for all the code! just didnt want to leave anything out thanks! Hi All, I am using javascript to get the number of rows in my HTML Table by using below code: Code: var oRows = document.getElementById("HTMLTable").getElementsByTagName('tr');
var iRowCount = oRows.length;
Later I am using iRowcount in the FOR loop further in my code as below: Code: for(k=1; k<=iRowCount; k++) {
............................
rest of code ...........
............................
}
This piece of code is working fine (i.e. it handles the functionalities which is needed) but it also opens a new browser window with the error message "Object Required".I have really no idead why this is happening.Can anyone suggest me the reason for this? Thanks in advance. -Anil |
|||||||