|
JavaScript - Scriptaculous Making All The Cells Within A Table Droppable Spaces
Hi
I am trying to make all the cells within a table droppable spaces, using the scriptaculous library. However I am not able to do so, and I am not certain why. The table cells are creating within the javascript. I then try to apply the droppables to the table cells through iteration, through the function when the document loads. It does not seem to be working. The document accesses an external php page and has inline php within a div element. I am uncertain if by having the draggable elements instantiated within the php script, that this would be causing any problem, as I cannot see how this would be, the php draggables all appear to be corresponding to the css in the document. Any help with the droppables would be appreciated. I have set up a css class hover, so that when the draggable passes over the droppable the edges of the droppable area should be turning blue, but this is not happening. Not sure what the problem is. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<META name="generator" content="Free Script Editor, see www.freescripteditor.com">
<TITLE>Email Client</TITLE>
<link rel="stylesheet" type="text/css" href="http://localhost/email/styles/style1.css"/>
<script src="javascript/prototype.js" type="text/javascript"></script>
<script src="javascript/scriptaculous.js" type="text/javascript"></script>
<script src="javascript/dragdrop.js" type="text/javascript"></script>
<script src="javascript/controls.js" type="text/javascript"></script>
<script src="javascript/effects.js" type="text/javascript"></script>
<script type="text/javascript">
var xmlhttp = false;
//check if we are using IE
try {
//If the javascript version is greater than 5.
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
alert ("You are using Microsoft Internet Explorer.");
}
catch(e)
{
//if not, then use the older active x object.
try {
//if we are using Internet Explorer
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
alert("You are using Microsoft Internet Explorer");
}
catch (E)
{
xmlhttp = false;
}
}
//If we are using a non-IE browser, crea a javascript instance of the object
if(!xmlhttp && typeof XMLHttpRequest != 'undefined')
{
xmlhttp = new XMLHttpRequest();
alert ("You are not using Microsoft Internet Explorer");
}
function getmessage(inbox_id)
{
var object = document.getElementById('content');
var server = "getmessage.php?inbox_id=" +inbox_id;
xmlhttp.open("GET", server);
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
object.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
function addTable()
{
var dv = document.getElementById("right");
var table = document.createElement("table");
var tbody = document.createElement("tbody");
var x = 0;
//create the table rows
for(var j =0; j <=2; j++)
{
var row = document.createElement("tr");
//create the table columns
for (var k =0; k<=4;k++)
{
x++;
var cell = document.createElement("td");
var celltext = document.createTextNode(x);
cell.appendChild(celltext);
cell.setAttribute("className", "droparea");
cell.setAttribute("id", "x");
row.appendChild(cell);
}
//add the row to the end of the table body
tbody.appendChild(row);
}
table.appendChild(tbody);
dv.appendChild(table);
table.setAttribute("className", "tbl");
}
document.observe("dom:loaded", function()
{
var dh;
var cells = document.getElementsByTagName('td');
for (var z = 0; z <= cells.length; z++)
{
dh = cells[z].getAttribute('id');
if(dh)
{
Droppables.add('dh', {accept:'draggable', hoverclass: 'hover'});
}
}
});
</script>
</HEAD>
<BODY onload="addTable()">
<div class="container" id="container">
<!--header div - for message 'new', 'reply' -->
<div class="header">
<script type="text/javascript" src="buttons/header_nav.js"></script>
</div>
<!-- end of header div-->
<!--Begin the div class left - this will hold the inbox emails for review-->
<div class="left">
<?PHP
include ($_SERVER['DOCUMENT_ROOT'].'\email\database_connect\connect.php');
$str = "id";
$i = 0;
$inbox_query = "select i.inbox_id, i.to, i.subject, i.sent, i.message from inbox as i";
$inbox_result = mysql_query($inbox_query);
while($row = mysql_fetch_array($inbox_result))
{//start while trainer query
$inbox_id = $row['0'];
$to = $row['1'];
$subject= $row['2'];
$sent = $row['3'];
$message = $row['4'];
$i++;
echo "<div class='draggable' id='$str$i'>
$inbox_id $to $sent <a href='#' onclick='getmessage($inbox_id)'>$str$i $subject
$message</a>
<script type='text/javascript'>
new Draggable('$str$i', {scroll: window});
</script>
</div>";
}//end while inbox query
?>
</div> <!--end left div-->
<!--begin the right div - this is the right side of the screen frame for
postponed email area-->
<div class="right" id="right">
</div>
<!--end the right div element-->
<!--begin the main content div - this will hold sent message-->
<div class="content" id="content" overflow="auto">
</div>
<!--end content div-->
</div>
</BODY>
</HTML>
Similar TutorialsSo I am using JavaScript to make a table on a page and what I want to do is have the JavaScript create the table, and then allow the user to fill it with data. I have been able to make the JavaScript create the table, my question is how to reference the cells in my script that adds data to the cell. I want the users to be able to click a button an add data into different cells so i figured giving them each an Id and referring to that Id in the button is the best way to do it. How can I edit my code to give each cell a different Id? Or is there a better way of doing this? My table code looks like this (i have filled it with random data so it is not just a blank table). <code> <script type="text/javaScript"> window.onload = fnInit; function fnInit() { // Declare variables and create the header, footer, and caption. var oTable = document.createElement("TABLE"); var oTHead = document.createElement("THEAD"); var oTBodyam = document.createElement("TBODY"); var oTBodypm = document.createElement("TBODY"); var oTFoot = document.createElement("TFOOT"); var oCaption = document.createElement("CAPTION"); var oRow, oCell; var i, j; // Declare stock data that would normally be read in from a stock Web site. var heading = new Array(); heading[0] = ""; heading[1] = "Monday"; heading[2] = "Tuesday"; heading[3] = "Wednesday"; heading[4] = "Thursday"; heading[5] = "Friday"; var block = new Array(); block[0] = "8:30"; block[1] = "9:55"; block[2] = "11:20"; block[3] = "12:45"; block[4] = "2:10"; block[5] = "3:35"; block[6] = "5:00"; block[7] = "6:30"; var stock = new Array(); stock[0] = new Array(block[0],"88.625","85.50","85.81","99.54","55.46"); stock[1] = new Array(block[1],"102.75","97.50","100.063","49.54","55.46"); stock[2] = new Array(block[2],"56.125","54.50","55.688","99.54","55.46"); stock[3] = new Array(block[3],"71.75","69.00","69.00","99.54","55.46"); stock[4] = new Array(block[4],"71.75","69.00","69.00","99.54","55.46"); stock[5] = new Array(block[5],"71.75","69.00","69.00","99.54","55.46"); stock[6] = new Array(block[6],"71.75","69.00","69.00","99.54","55.46"); stock[7] = new Array(block[7],"71.75","69.00","69.00","99.54","55.46"); // Insert the created elements into oTable. oTable.appendChild(oTHead); oTable.appendChild(oTBodyam); oTable.appendChild(oTBodypm); oTable.appendChild(oTFoot); oTable.appendChild(oCaption); // Set the table's border width and colors. oTable.border=1; oTable.bgColor="lightslategray"; // Insert a row into the header and set its background color. oRow = document.createElement("TR"); oTHead.appendChild(oRow); oTHead.setAttribute("bgColor","lightskyblue"); // Create and insert cells into the header row. for (i=0; i<heading.length; i++) { oCell = document.createElement("TH"); oCell.innerHTML = heading[i]; oRow.appendChild(oCell); } // Insert rows and cells into bodies. for (i=0; i<stock.length; i++) { var oBody = (i<3) ? oTBodyam : oTBodypm; oRow = document.createElement("TR"); oBody.appendChild(oRow); for (j=0; j<stock[i].length; j++) { oCell = document.createElement("TD"); oCell.innerHTML = stock[i][j]; oRow.appendChild(oCell); } } </code> Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
window.onload = function(){
document.getElementById("t").innerHTML = "<table border='1' id='myTable'>" + "<tr><td>" + names.join("<tr><td>") + "</td></tr>" + "</table>";
}
var names = ["Marble","Jarque","Dino","Pineapple"];
function abc(){
if(document.getElementById('myTable').rows[0].cells[0].innerHTML==names[0]){names.sort()}
else if(document.getElementById('myTable').rows[0].cells[0].innerHTML==names[2]){names.sort().reverse()}
else {names.sort()}
document.getElementById("t").innerHTML = "<table border='1' id='myTable'>" + "<tr><td>" + names.join("<tr><td>") + "</td></tr>" + "</table>";
}
</script>
</head>
<body>
<div id="t"></div>
<input type="button" value="sort" onclick="abc()" />
</body>
</html>
First time sort: no problem But when it comes to the blue-highlighted parts It cannot do the sort().reserve() What's wrong with the codes? I am confuseif i use JS.. its should be in <head> but table should be in <body>.. how am i going to use that.. and put images in that table cell using JS??
Hi All, I tried to add links to open local xml files in browser in a dynamic table cells. I need help. I tried all ways but I think I miss something. I can open them without table just by document.write(xmlfile location). Here is my code. please help. function showResultsTable(searched, srchedname) { // get the reference for the body var mybody = document.getElementsByTagName("body")[0]; // creates a <table> element and a <tbody> element mytable = document.createElement("table"); mytable.setAttribute('id', 'resulttable'); mytablebody = document.createElement("tbody"); // creating all cells var mycurrent_cell = new Array(); for(var j = 0; j < srchedname.length; j++) { // creates a <tr> element mycurrent_row = document.createElement("tr"); mycurrent_cell[0] = document.createElement("td"); currenttext = document.createTextNode(j); mycurrent_cell[0].appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell[0]); mycurrent_cell[1] = document.createElement("td"); link = document.createElement("a"); link.name = ""+srchedname[j]); link.href = "C:\\AAA\\TestCasesList.xml"; mycurrent_cell[1].appendChild(link); mycurrent_row.appendChild(mycurrent_cell[1]); mycurrent_cell[2] = document.createElement("td"); currenttext = document.createTextNode(searched[j]); mycurrent_cell[2].appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell[2]); // appends the row <tr> into <tbody> mytablebody.appendChild(mycurrent_row); } // appends <tbody> into <table> mytable.appendChild(mytablebody); // appends <table> into <body> mybody.appendChild(mytable); // sets the border attribute of mytable to 2; mytable.setAttribute("border", "2"); } Hello everyone. I want to move my image through table cells by using arrow buttons. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Move</title>
<style type="text/css" >
table
{
background-color:#FFCC00;
margin-top: 100px;
margin-bottom: 100px;
}
</style>
</head>
<body onload="setup()">
<script type="text/JavaScript" onkeydown="handleKey(event)">
document.write('<table border="1" cellspacing="0" cellpadding="10">');
var count =0
for (var row=0; row<20; row++) {
document.write('<tr>');
for (var col=0; col<20; col++) {
idnmr = count
count++
document.write('<td style="border:0"; id="idnmr";>');
document.write('</td>');
}
document.write('</tr>');
}
function setup() {
row=0;
col=0;
insertKnight(row,col);
}
function handleKey(e) {
if (typeof e !='object') e=window.event;
if (e.type == 'keydown' && (e.keyCode ==27 || (e.keyCode >= 37 && e.keyCode <=40))) {
switch (e.keycode) {
case 37:
dC= -1;
dR = 0;
break;
case 38:
dC= +1;
dR=0;
break;
case 39:
dC = 0;
dR = +1;
break;
case 40:
dC= 0;
dR=-1;
break;
}
emptyCell(row,col);
function emptyCell(row,col)
{
var id = 'r' + row + 'c' + col;
var cell= document.getElementById(id);
if(cell) cell,innerHTML='';
}
row +=dR;
col +=dC;
//insert image
insertKnight(row,col);
return false;
function insertKnight(row,col) {
var id = 'r' + row + 'c' + col;
var cell = document.getElementById(id);
var colour = cell.className;
if (colour != 'white') {
var knight='cherry.png';
}
else {
var knight= 'cherry.png';
function eraseImage(row,col) {
var id = 'r' + row + 'c' + col;
document.getElementById(id).innerHTML = '';
}
cell.innerHTML = '<img src=" ' + knight + ' " alt="' + colour + 'knight" />';
}
document.getElementById('debug').innerHTML = 'r='+row+' c='+col;
function drawImage(row,col) {
var id = 'r' + row + 'c' + col;
document.getElementById(id).innerHTML = '<img src="cherry.png"/>';
}
</script>
</body>
</html>
This is my code. Now i have problems with the eraseImage and drawImage functions. They just don't work. Any help will be appreciated. Thank you Hello, I'm Stephen Martin, an undergraduate Psychology student and researcher. Although I am a self-proclaimed tech geek, the extent of my knowledge ends abruptly at any sort of coding. I need help from anyone who is willing. The paradigm: I am currently investigating the decision making strategies in a particular population (I cannot reveal too much, lest our study be scooped by competing researchers in the field). The paradigm that we use is built through a package called MouseLabWeb (http://www.mouselabweb.org/). MLWeb basically provides an interface for researchers to create a html/php/js/css website that presents a grid (table). A small example is shown on the aforementioned website. The javascript functions allow each participant's events to be recorded, timestamped, and written to a MySQL database. This allows the researcher to know which cells the participant viewed, in what order, for how long, and ultimately to which decision the participant came. Additionally, the PHP/HTML creates the table, but the data within it is populated by the javascript. This is a blessing and a curse. Here is why. The problem: The javascript offered by MLWeb allows the cells to be randomized. This is necessary, because in such paradigms, counter-balancing is required, otherwise there would be order effects (e.g., people tend to automatically read from the upper left) that are not controlled for. So the order of the columns and rows are randomized, the data which is then placed into the html/php table. For the current study, we want the cells corresponding to particular types of information to be shaded differently. For example, we'd want cells that contain bad information to be dark, cells that contain neutral info to be grey, and cells that contain good information to be white. The problem is that setting these values (style="background-color: #XXXXX) only applies to the table as created by the PHP. It only affects the position, and does not consider the information that it is filled with. We want the information that a cell is filled with to dictate what background-color the cell is. Example of the problem (A,B,C are the different types of info, with the surrounding character implying shading) What we want: Unrandomized: [.A.] [|B|] [#C#] Randomized: [#C#] [.A.] [|B|] What the problem is: Randomized: [.C.] [|A|] [#B#] Again, thank you for reading this long post. I'm up for any suggestions! TL;DR The website uses PHP to render a table and javascript to populate it. Javascript randomizes the column and row order upon each visitation, thus randomizing the cells. How do I make javascript issue a background-color change to each cell according to the information that it is populated with. Hey. so, I know how to add the row, and cells, I did that...except now I need to add properties to the cells (class, ID, onclick etc)...just wondering how I go about doing that. Here is what I have so far: Code: function add_new_proj(){
new_proj_id = prompt("What would you like the new Project Number to be?","xxx-xxxxx");
var table=document.getElementById('projectDisplay').insertRow(1);//creates a var which adds one row to the table
//the variables are finding the correct cell to enter the data into the new row (based on an array 0 based system)
var projectID=table.insertCell(0);
var ProjectName=table.insertCell(1);
var Client=table.insertCell(2);
var ClientProjectID=table.insertCell(3);
var delete_cell=table.insertCell(4);
projectID.innerHTML = new_proj_id;
ProjectName.innerHTML ="";
Client.innerHTML = "";
ClientProjectID.innerHTML = "";
delete_cell.innerHTML = "<span class='delete' id='$ProjKey-d' onclick='delete_edit_proj(\"ajax_modify_proj.php\",this.id)'> Delete </span>";
}
this is an example of what the cells look like (the ones that already exist, generated via PHP code): PHP Code: echo "<td class='projectTd' id='2tdName-$j' onclick='editTd(this.id);'> $ProjName </td>"; So yeah..I need the new cells to pretty much look like that >.< with a class, id, and onclick event. any help would be great! thanks Writing Table Cells and Switch Statements I am to create a function and purpose is to write blank tables cells to make up horizontal bar. function will have 2 parameters=(partyType and percent partyType parameter stores variables of D,R,I,G or L percent parameter store percentage rounded to nearest integer so I am to make a switch and break statements /commands then have to create a For Loop in counter variable goes up from 1 through value of parmeter increments of 1 heres the code I created for this one Code: function createBar(partyType,percent){ // script element to create blank cells
switch(partyType) {
case "D": document.write("<td class='dem'></td>");
break;
case "E": document.write("<td class='rep'></td>");
break;
case "I": document.write("<td class='ind'></td>");
break;
case "G": document.write("<td class='green'></td>");
break;
case "L": document.write("<td class='lib'></td>");
break;
}
var barText = partyType
for (i=0; i < percent; i++)
{
document.write(barText);
So what improvements should I make? should my loop be before everything? Thanks Ok. I'm going to start by saying I'm a complete novice. I am having a hell of time finding specific codes for the things I need. I'm pretty impressive I've gotten this far. So I am trying to make a portfolio website, for myself, which has thumbnails on the left(which I'll crop in photoshop because it is easier for me than having to do any coding) which will make the main image on the right change. At the same time, I want it to change the text below to correspond to the current image. Now I have the images swapping alright, except that the thumbnails that have the onClick function in them won't sit inside the table I have inside the table. I don't understand why that happens. I can work around this, and just get rid of that table. Another problem is that even though I defined the collumns as each being 20%, they are not all the same size. I am using percentages so that the site will function regardless of screen resolution. Anyway, here is my current code. Ignore the image names, I'm just using what random images I have at hand while I test things out. Code: <html>
<head>
<script type="text/javascript">
function swap(image) {
document.getElementById("main").src = image.href;
}
</script>
</head>
<body>
<table width="80%" align="center">
<tr><td colspan="5">I'll put a header image here.</td>
</tr>
<tr>
<td width="20%"><center>Print</center></td>
<td width="20%"><center>Motion</center></td>
<td width="20%"><center>Photo</center></td>
<td width="20%"><center>Misc</center></td>
<td width="20%"><center>Resume</center></td>
</tr>
<tr>
<td colspan="2"><table align="left">
<td colspan="100%">Catagory 1
</td>
<tr>
<a href="mario.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
<a href="../Jpg/cattits.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
<a href="bowie.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
</tr>
<td colspan="100%">Catagory 2
</td>
<tr>
<td><img src="../Jpg/sluticon.jpg" /></td>
<td><img src="../Jpg/sluticon.jpg" /></td>
</tr>
</table></td>
<td colspan="3">
<img id="main" src="bowie.jpg" width="400">
</td>
</tr><td colspan="5">
<p>Description goes here</p></td>
<tr>
</tr>
</table>
</body>
</html>
Hi, I'm having trouble with trying to access a selected value of a drop down menu in a table. I have menus in columns 3 and 4, named cred and grade respectively, from rows 2 onwards, and I'm using a function to access them. How do I access the value's for manipulating other variables? Here is what I have so far: Code: function f(tableID){
var len = document.getElementById(tableID).rows.length;
for(var i = 1; i<len; i++){
var c = document.getElementById(tableID).rows[i].cells[2].childNodes[0];
credits = c.options[c.selectedIndex].text;
}
}
Your help would be really appreciated I am trying to persuade the javascript to fade from one image into the next, but I'm only succeeding at fading into nothing, and then making the next image appear. The effect can be seen he http://userpages.bright.net/~toddw/orbit/aheader0.html The effect that I am trying to achieve is he http://userpages.bright.net/~toddw/orbit/aheader9.html the problem with the second example is that I can't figure out how to add the navigation controls,… so I thought it would be easier to address the crossfade with the first example. Code: var openBtn2 = "images/Button_open.gif";
var solidBtn2 = "images/Button_solid.gif";
var intervalID2;
var showing2 = 1;
var truckArray = new Array("","truck1","truck2","truck3","truck4");
var truckbtnArray = new Array("","truckBtn1","truckBtn2","truckBtn3","truckBtn4");
var inProgress2 = false;
function swapTruck(next) {
if (inProgress2) return;
inProgress2 = true;
if (next == 0) { next = showing2 + 1; } //if swapTruck is not called from a button
if (next == 5) { next = 1; } ***//if its the last news item
new Effect.Fade(truckArray[showing2], { duration: 0.3});
setTimeout(function() {
$(truckbtnArray[showing2]).src = openBtn2
$(truckbtnArray[showing2]).style.cursor = "pointer"
$(truckbtnArray[next]).src = solidBtn2
$(truckbtnArray[next]).style.cursor = "default"
new Effect.Appear(truckArray[next], { duration: 0.3})
showing2 = next
inProgress2 = false
}, 300);
clearInterval(intervalID2);
intervalID2 = setInterval("swapTruck(0)", 25000);
}
Event.observe(window, 'load', function() { //this binds the function() to the event window.onload
intervalID2 = setInterval("swapTruck(0)", 25000);
$("truckBtn1").src = solidBtn2;
$("truckBtn2").src = openBtn2;
$("truckBtn2").style.cursor = "pointer";
$("truckBtn3").src = openBtn2;
$("truckBtn3").style.cursor = "pointer";
$("truckBtn4").src = openBtn2;
$("truckBtn4").style.cursor = "pointer";
});
My html looks like this: <!-- define images for fading into each other --> <div id="slider"> <div id="truck1"><img src="c5_app_2.jpg" title="" /></div> <div id="truck2" style="display:none;"><img src="infolink_main.jpg" title="" /></div> <div id="truck3" style="display:none;"><img src="rr5700_app_2.jpg" title="" /></div> <div id="truck4" style="display:none;"><img src="c5_app_1.jpg" title="" /></div> </div> <!-- navigational buttons for image fade --> <div class="truck_buttons"> <img src="(EmptyReference!)" onClick="swapTruck(1)" id="truckBtn1"> <img src="(EmptyReference!)" onClick="swapTruck(2)" id="truckBtn2"> <img src="(EmptyReference!)" onClick="swapTruck(3)" id="truckBtn3"> <img src="(EmptyReference!)" onClick="swapTruck(4)" id="truckBtn4"> </div> OK. I'm super new to any kind of java script. What I want is a menu that, when clicked, changes the background color of a table cell to blue. When a different option is clicked, the current highlighted table should turn back to gray and the new selection should be blue. Well, I have all of that working. What I need now is just to have the first option start out highlighted and to become unhighlighted when another option is clicked. Any help would be awesome!!!! Thanks!!!!!! Code: <html>
<head><title>menu</title>
<script type="text/javascript">
var element = null;
function select(xx)
{
if ( element ) {
element.style.backgroundColor='gray';
}
element = xx;
xx.style.backgroundColor='navy';
}
</script>
<style type="text/css">
a {text-decoration:none; color:white}
a:visited {color:white}
a:active {color:white}
a:hover {color:white}
table#lay_menu {width:100%; margin:0px}
table#lay_menu td {text-align:center; width:20%}
.menu {text-align:center; background-color:gray; }
.start {text-align:center; background-color:navy; }
</style>
</head>
<body>
<table id="layout">
<tr>
<td width="188">
<a href="#">
<div class="menu" onClick="select(this)">Artists</div>
</a></td>
</tr>
<tr>
<td><a href="#">
<div class="menu" onClick="select(this)">CPAs</div>
</a></td>
</tr>
<tr>
<td><a href="#">
<div class="menu" onClick="select(this)">Doctors</div>
</a> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
Greetings, I am using the javascript scriptaculous library. On my Green Products webpage, if the user clicks "Subcategory", "Maximum Price", "Business Name", or "Search For", a green dialogue box should appear giving the user a tooltip. This works great for browsers other than IE. I am getting the following error: Quote: Message: Object doesn't support this property or method Line: 543 Char: 3 Code: 0 URI: http://www.green-watch.org/scriptaculous/src/effects.js Message: Object doesn't support this property or method Line: 529 Char: 3 Code: 0 URI: http://www.green-watch.org/scriptaculous/src/effects.js This is a fairly common library. What is the solution to this problem? Always seems to be problems with IE... Thanks in advance for any solutions or suggestions. Sincerely, Travis Walters Hello, To start I want to say I'm a newbie at coding/programming and all that so I would appreciate a lot if the explanations would be more thorough. I have a wordpress website (so i guess it can run javascript) and I want to create these tables where certain rows could be clicked and would expand for more information, I made an image for an illustration http://i44.tinypic.com/hurdoz.png . I would so appreciate any help that could tell simple steps how to achieve this, I guess this is a trivial problem to some of you but to me.. i don't know where to begin so yeah, I'm waiting for anything :] Hello all..I am new to this forum and also new to html and js. I started college at the ripe old age of 55 and I have to take this course for my required degree I have a table 5 across with thumbnails inside and a larger cell at the bottom with a picture of me. I need to write a javascript function that will make the big picture change when I click on the thumbnail...there is also a smaller cell at the bottom that would change that text to a description as well,when thumbnail clicked. Ihave no clue where to start. Any help would be much appreciated!! Thanks In advance <style> .table th {border-style: solid; border-color: red;background-color: #CCCCFF; } </style> <body> <table border="1" class="table"> <thead> <th colspan = "5">Click an Image to Enlarge </th> </thead> <tbody> <tr> <td> <img src = "Thumbnails/ada1838-thumb.JPG" alt = "ada1838-thumb" > </td> <td> <img src = "Thumbnails/adaplaque-thumb.JPG" alt = "adaplaque-thumb"> </td> <td> <img src = "Thumbnails/babbageborn-thumb.JPG" alt = "babbageborn-thumb"> </td> <td> <img src = "Thumbnails/aediagram-thumb.JPG" alt = "aediagram-thumb"> </td> <td> <img src = "Thumbnails/babbage1860-thumb.JPG" alt = "babbage1860-thumb"> </td> </tr> <tr><td colspan= "5" ><img src= "All_Images/Me@home.JPG" alt = "Me @ Home" width = "800px" height= "800px" align="center"> </td> </tr> <thead> <th colspan = "5"> </th> </thead> </table> </body> </html> I've been banging my head for two days now trying to figure out how i can swap td cells. There are a lot of examples of how to order rows, but i can seem to find any on how to swap td cells. Has anyone a good referal for this.
I am trying to build a 2-column table with a slidedown effect in each cell: http://www.inroadsracing.com/team5.html Thought I would be clever and copy the first cell into the others and change the content. If you click on 'continue,' you will see the issue I am trying to solve. Is the cause a float issue? Div? Something else? Thanks, -Bo So <br/> creates a brake but is there a way to make "tab" space?
Hi guys, The code in question is www.spectral.og.uk/test5/work2.htm I am trying to change the main 'SPECTRAL' video content mid-right when I click on the 'Change Movie' at the bottom. Eventually I want to be able to do this from the thumbnails but Im just running a simple test first. So I defined the function 'ChangeMOVIE' on line 14 using document.getElementById & innerHTML, etc, to replicate the flash player script contents that are incidentally ID'd as "BIGCHANGE" (ie, part of the main flash player on line 249) but simply replacing a different name for the video when it reaches the Flashvars "&file=Splash.flv" to something else to effect the change of video content I'm after, 'Olay.flv' I think. I have tried so hard to research into this but it just doesn't work. Is the problem to do with that :- 1) You can't ID something within <script>, ie BIGCHANGE in this instance. 2) innerHTML is only really for text replacement, not the amount of script I've stuck into it to replace within the whole <TD> cell with ID 'VID' (ie the main flash player) even though I've used delimiters and everything within the innerHTML data to try and not confuse it with apostrophes within speach marks, etc Any thoughts where I'm going wrong? Maybe Im barking up the wrong tree on this! Thanks so much guys for any headsup on a solution to this as I've been up all night for about a week on this! Dom Hey Guys, I am a student doing my Cert IV in IT and am having a bit of trouble with some code. I have a form that when a letter is entered it returns a message saying you need to enter numbers in, and am trying to find a way of it checking if there are spaces in the numbers entered at the same time as checking if a number has been entered. My code looks as follows: Code:
<html>
<head>
<title>Activity 2.25</title>
</head>
<script type="text/javascript">
function validateform()
{
var element;
var BikeMoney;
var TVMoney;
var iPodMoney;
var CarPrice;
var flag;
flag="OK"
element=document.getElementsByTagName('input');
for(counter=0; counter<element.length; counter++)
{
switch (element[counter].type)
{
case "submit":
break;
default:
if(isNaN(element[counter].value))
{
alert("You will need to enter a number into " + element[counter].name);
flag="NotOK"
}
else
{
BikeMoney=element[0].value;
TVMoney=element[1].value;
iPodMoney=element[2].value;
CarPrice=element[3].value;
}
}
}
if(flag=="OK")
if ((Number(BikeMoney)) && (Number(TVMoney)) && (Number(iPodMoney)) && (Number(CarPrice)))
{
TotalMoney = parseFloat (BikeMoney) + parseFloat (TVMoney) + parseFloat (iPodMoney)
if(TotalMoney >= CarPrice)
{
alert("The total money is " + TotalMoney + " and the car price is " + CarPrice + " and you can afford the car");
}
else
{
alert("The total money is " + TotalMoney + " and the car price is " + CarPrice + " and you cannot afford the car");
}
}
else
{
alert("Enter numbers Please");
}
}
</script>
<body>
<form name="input form" method="post" action="">
<table>
<tr><td>Enter money from bike sale</td><td><input type="text" name="Bike Money"></td></tr>
<tr><td>Enter money from TV sale</td><td><input type="text" name="TV Money"></td></tr>
<tr><td>Enter money from iPod sale</td><td><input type="text" name="iPod Money"></td></tr>
<tr><td>Enter the price of the car</td><td><input type="text" name="Car Price"></td></tr>
<tr><td></td><td><input type="submit" value="Submit Details" onclick=validateform()></td></tr>
</table>
</form>
</body>
</html>
|
|||||||