|
JavaScript - Creating A Simple Table <div> Using Dom
Hi
I was wondering if someone could help me. I successfully implemented a number of sortable lists, using a table in html. However I wanted to table cells to be scrollable, which does not apparently work, I tried overflow: auto;, overflow: hidden; and overflow: scroll; in css and it did not work, the table cells kept moving to fit the draggable content. I checked on the internet and found that as stated, table cells cannot be made scrollable. Therefore I decided to do it all with div elements. However I want the div elements structured in a 5 x 3 format. Therefore I thought I would implement it in dom. However I am a newby to dom. I have created the following code, which is simple but repetitive, the function createTable simply creates the div elements (1,2,3,4,5...) and writes the class and id attributes to each. I then appended several of the elements into a div container I created, called divcontainer with a class right. There is also a div element already in the document, class and id = 'right'. I therefore tried to add the divcontainer to this. The function however is causing a page error and none of the dom div elements are loading. Any help appreciated. I would simply prefer to create the divcontainer and append the div elements. Should I take out the div element right already in the document and instead use something like document.body.appendChild(divcontainer) or something similar. Also the function call createTable() should I use window.onload = function(){} instead. 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 src="javascript/builder.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 createTable()
{
var divright = document.getElementById('right');
var divcontainer = createElement('div');
divcontainer.setAttribute('class', 'right');
var div1 = document.createElement('div');
div1.writeAttribute('class', 'droparea');
div1.writeAttribute('id', 'sortList1');
var div2 = document.createElement('div');
div2.writeAttribute('class', 'droparea');
div2.writeAttribute('id', 'sortList2');
var div3 = document.createElement('div');
div3.writeAttribute('class', 'droparea');
div3.writeAttribute('id', 'sortList3');
var div4 = document.createElement('div');
div4.writeAttribute('class', 'droparea');
div4.writeAttribute('id', 'sortList4');
var div5 = document.createElement('div');
div5.writeAttribute('class', 'droparea');
div5.writeAttribute('id', 'sortList5');
var div6 = document.createElement('div');
div6.writeAttribute('class', 'droparea');
div6.writeAttribute('id', 'sortList6');
var div7 = document.createElement('div');
div7.writeAttribute('class', 'droparea');
div7.writeAttribute('id', 'sortList7');
var div8 = document.createElement('div');
div8.writeAttribute('class', 'droparea');
div8.writeAttribute('id', 'sortList8');
var div9 = document.createElement('div');
div9.writeAttribute('class', 'droparea');
div9.writeAttribute('id', 'sortList9');
var div10 = document.createElement('div');
div10.writeAttribute('class', 'droparea');
div10.writeAttribute('id', 'sortList10');
var div11 = document.createElement('div');
div11.writeAttribute('class', 'droparea');
div11.writeAttribute('id', 'sortList11');
var div12 = document.createElement('div');
div12.writeAttribute('class', 'droparea');
div12.writeAttribute('id', 'sortList12');
var div13 = document.createElement('div');
div13.writeAttribute('class', 'droparea');
div13.writeAttribute('id', 'sortList13');
var div14 = document.createElement('div');
div14.writeAttribute('class', 'droparea');
div14.writeAttribute('id', 'sortList14');
var div15 = document.createElement('div');
div15.writeAttribute('class', 'droparea');
div15.writeAttribute('id', 'sortList15');
divright.wrap("divcontainer");
divcontainer.appendChild(div1);
divcontainer.appendChild(div2);
divcontainer.appendChild(div3);
}
window.onload = function()
{
Sortable.create('container1', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7' , 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList1', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList2', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList3', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList4', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList5', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList6', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList7', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList8', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList9', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList10', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList11', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList12', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList13', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList14', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
Sortable.create('sortList15', {tag: 'div', only: 'draggable', constraint: false,
containment: ['container1', 'sortList1', 'sortList2', 'sortList3', 'sortList4', 'sortList5', 'sortList6', 'sortList7', 'sortList8', 'sortList9', 'sortList10', 'sortList11', 'sortList12', 'sortList13', 'sortList14', 'sortList15'], dropOnEmpty: true});
}
</script>
</HEAD>
<BODY>
<div class="container" id="container">
<!--header div - for message 'new', 'reply' -->
<div class="header">
</div>
<!-- end of header div-->
<!--Begin the div class left - this will hold the inbox emails for review-->
<div class="left" id='container1'>
<?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)'>$subject</a>
</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" onload="createTable()">
</div>
<!--end the right div element-->
<!--begin the main content div - this will hold sent message-->
<div class="content" id="content" overflow="auto">
<!--end content div-->
</div>
</BODY>
</HTML>
Similar TutorialsI have just completed my JS studies and wish to try 3 things to test what I have learned, first I wish to create a simple animation, then I'll attempt my own slideshow and last a specific script. First, can I try the animation on this specific forum? If not then is there another forum for this on this board or do I have to go to an animation specific site please?
I'm trying to create a type of virtual pagination that's simple, semantic, and SEO friendly. The concept is like this website: www.doner.com In the bottom right hand corner, if you select a city, different contact information appears. My theory is to assign a class name to the hyperlink, then have a DIV with a matching ID. For example... Code: <a href="#" class="michigan">Michigan</a> <a href="#" class="ohio">Ohio</a> <a href="#" class="illinois">Illinois</a> <div id="michigan"> Michigan container </div> <div id="ohio"> Ohio container </div> <div id="illinois"> Illinois container </div> The JavaScript I have written so far is... Code: var anchor = document.getElementsByTagName('a').className; // grab all hyperlinks and their classes
var div = document.getElementsByTagName('div').getElementByID; // grab all divs and their IDs
if (anchor = div) { // check to see if a hyperlink's class has a matching div ID
div.style.display = "none";
if (anchor.onclick) { // if the hyperlink is clicked...
div.style.display = "visible"; // make matching div ID visible
}
}
Nothing works yet, and I don't know where to continue. The DIVs aren't even hidden upon loading. Can anyone help me? Hey guys. This should be extremely easy for you to answer. This is actually for an intro to computers class I am taking and I am completely stumped. Basically I have to create a really simple Pythagorean Theorem calculator and this is what I have so far: [CODE] <html> <head> <title>A Pythagoras Conversion</title> </head> <script type="text/javascript"> var right_leg, left_leg, hypotenuse; alert ("This calculates the hypotenuse of a right-angled triangle using the Pytahgorean Thereom. Press <OK> to continue!"); right_leg=prompt("Enter the length of the right leg."); left_leg=prompt("Enter the length of the left leg."); sq1 = right_leg*right_leg; sq2 = left_leg*left_leg; hypotenuse = math.sqrt(sq1 + sq2); alert ("The Hypotenuse= "); </script> <body> </body> </html> [CODE] Everything works except for when it comes to it actually calculating. The calculation window never pops up. Please tell me what I am doing wrong in the calculation here....it is driving me nuts. :/ Thanks so much... Hi all, new here. Hope this makes sense. In Salesforce, I am adding what they call an "S-Control" via HTML/JavaScript that will display an alert if certain field criteria are met. The alert would be a reminder to hit the "Submit for Approval" button if the Quote Estimate is equal to or greater than $50,000. For testing purposes I added another criteria, that the Opportunity name must = Test and Stage must = Proposal/Price Quote. Here's what I've come up with so far, taking from other examples, but I receive no alert, so I'm wondering where it went wrong. Code: <html>
<head>
<script type="text/javascript" language="javascript" src="/js/functions.js"></script>
<script type="text/javascript" src="/soap/ajax/10.0/connection.js"></script>
<script type="text/javascript">
function throwalert()
{
// Begin by creating 3 variables for the criteria to be met.
var oppname = "{!Opportunity.Name}";
var isstatus = "{!Opportunity.StageName}";
var quoteest = "{!Opportunity.Quote_Estimate__c}"
// Now create a function which will decide if the criteria is met or not and throw alert message.
//var oppname= "Test"
//var quoteest >= "50000"
//var isstatus = "Proposal/Price Quote"
var msgg = "The quote estimate for this opportunity is equal to or greater than $50,000. Remember to submit this opportunity for approval. "
if ((oppname == "Test") && (quoteest >= 50000) && (isstatus == "Proposal/Price Quote"))
{
alert(msgg);
}
else
{
window.parent.location.replace = "{URLFOR($Action.Opportunity.View, Opportunity.Id,null,true)};"
}
}
</script>
</head>
<body onload="throwalert()";>
</body>
</html>
I am trying to create a simple HTML table with the squares of numbers and for some reason the loop is not triggering. Code: Code: <table border="1">
<tr><td><h2>Table of Squares</h2></td></tr>
<tr><td>
Number
</td>
<td>
Square
</td></tr>
<tr>
<script language="JavaScript">
for(i = 1, fact = 1; i < 10; i++, fact = i*i) {
document.write("<td>" + i + " </td><td> " + fact + "</td>);
document.write("</tr><tr>");
}
document.write("</tr></table>");
</script>
When I run the page all that comes up is the start of the table that is written before the script executes. Also is there any way I could use a debugger to catch this on my own? I tried the firefox debugger but it didn't catch anything when I ran it through, maybe I was just doing it wrong. Any help is appreciated thanks! Forgive me, I come from a ColdFusion background and DOM manipulation is not one of my strongest assets. I am trying to dynamically create (and also delete) a row inside a table, which contains three cells that each have three form elements (a input box, a select drop-down box that is populated by a query to a database, and a textarea). Now all the JavaScript/jQuery examples I've seen for dynamically creating elements are very basic, nothing this complex. Could I get some help?! This is what I'm trying to dynamically create so that the user can add more options but also delete them. Would the jQuery clone() function be a good choice for this? Code: <tr> <td> <input type="text" id="rejectName" /> </td> <td> <select id="divSelectReason"> <option value="" selected="true">Enter Rejection Reason</option> <cfoutput query="queryReasonReturn"> <option>#codeAndReason#</option> </cfoutput> </select> </td> <td> <textarea id="editReason" cols="30"></textarea> </td> </tr> Now when a row is dynamically created I also have to access those values as well, so I would assume using a variable that counts each row created, and appends that iteration to the name of that particular element. I have a table which has the number of rows depended on what the number is in the spinner. This does work e.g If I enter 25 in spinner it comes up with 25 rows, if I enter 7 in spinner comes with 7 rows. So my problem is this: What I have is a textarea where the user enters in their question and then submits the question, the question should be inserted and appear under the "Question" column. The problem is that everytime I submit a question into the table, it creates a new row. So if I had 20 empty rows in the table because I stated in the spinner I wanted 20 questions, then what happens is everytime I submit a question, it adds a new row every time, I want the question to be inserted in a current row starting from 1st row add going down 1 row every time a question is submitted. I have attached a document with this question which will show you how I want it to be displayed and what is displays currently and would hopefully explain it better for you if you are a bit confused. Code: Below is my javascript code:
function insertQuestion() {
var table = document.getElementById("qandatbl");
var tableBody = table.tBodies[0];
var textarea = document.getElementById("questionTxt");
var row = document.createElement("tr");
tableBody.appendChild(row);
var enumeratorCell = document.createElement("td");
enumeratorCell.className = "qid";
row.appendChild(enumeratorCell);
var questionCell = document.createElement("td");
questionCell.className = "question";
row.appendChild(questionCell);
var weightCell = document.createElement("td");
weightCell.className = "weight";
row.appendChild(weightCell);
var answerCell = document.createElement("td");
answerCell.className = "answer";
row.appendChild(answerCell);
var questionText = textarea.value;
var questionContent = document.createTextNode(questionText);
questionCell.appendChild(questionContent);
}
Html code of table and text area with submit button: Code: // table where questions will be inserted into
<table>
<?php
$spinnerCount = $_POST['textQuestion'];
if($spinnerCount > 0) {
for($i = 1; $i <= $spinnerCount; $i++) {?> // this get the number of questions from the spinner
<tr>
<td class="qid"><?php echo $i; ?></td>
<td class="question"></td>
<td class="weight"></td>
<td class="answer"></td>
</tr>
</table>
Code: //Text Area and submit button to submit questions <form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post"> <table id='middleDetails' border='1'> <tr> <th class='tblheading' colspan='2'>SESSION DETAILS</th> </tr> <tr> <td id="questionNum">Question No </td> </tr> <tr> <td id="questionContent">Question:</td> <td id="questionTextarea"><textarea rows="5" cols="40" id="questionTxt" name="questionText"></textarea></td> </tr> <tr> <td id="addQuestionRow" colspan='2'><input id="addQuestion" type="button" value="Add Question" name="addQuestionBtn" onClick="insertQuestion()" /></td> </tr> </table> </form> Hi, I'm very new to Javascript and I'm stuck. I am trying to create a js script that will prompt the user for a times table (example the 5 times table, the 7 times table, etc.) & prompt the user for 2 more values; the 'start' number and 'end' number. So there would be 3 numbers total the user must input. The script should present a 'warning' message if the user inputs letters or negative numbers. I have come very close to getting it too work but can't quite get past the last hurdle. Upon entering the 3 numbers, the output should look similar to this: (the 5 times table starting with 1 and ending with 12) The 5 times table 5 * 1 = 5 5 * 2 = 10 5 * 3 = 15 5 * 4 = 20 5 * 5 = 25 5 * 6 = 30 5 * 7 = 35 5 * 8 = 40 5 * 9 = 45 5 * 10 = 50 5 * 11 = 55 5 * 12 = 60 I have placed the js script code on pastebin.com and below. The pastebin link is: http://pastebin.com/2NZPiFH9 Code: function writeTimesTable(timesTable, timesByStart, timesByEnd)
{
for (;timesByStart <= timesByEnd; timesByStart++)
{
document.write(timesTable + " * " + timesByStart + " = " +
timesByStart * timesTable + "<br>");
}
}
var timesTable;
while ( (timesTable = prompt("Enter the first number in the times table. Enter -1 to exit.", -1)) != -1)
{
while (isNaN(timesTable) == true)
{
timesTable = prompt(timesTable + " is not a valid number, please retry.",-1);
}
if (timesTable == -1)
{
break;
}
document.write("<br>The " + timesTable + " times table<br>");
writeTimesTable(timesTable,1,12);
}
Hi, I am trying to create a radio button that when clicked shows a table. IF you can recommend a way to do it without Javascript that would be MOST helpful. Otherwise here is what I've got so far: [CODE]<input type="radio" name="product" onclick="OnProductClick(this)" value="Stats" />Statistics <input type="radio" name="product" onclick="OnProductClick(this)" value="Tradinghistory" /> Trading History </p> <script type="text/javascript"> var c = true; var b = true; function OnProductClick(product) { if ((c) && (product.value == "Stats")) { document.getElementById('St').style.display = "block"; c = false; b = true; } else if ((b) &&(product.value == "Tradinghistory")) { document.getElementById('TrdH').style.display = "block"; c = true; b = false; } } </script>[CODE] Where St and TrdH are 2 seperate div ids for 2 different tables. Please Help. Many Thanks I imagine this would be very simple for someone who knows javascript. I want to have three fields. First field is "posted speed limit", second field is "actual speed" and third field will be the output field. All the script needs to do it subtract the posted speed from the actual speed and add a ZERO to the end; which is the amount of the speeding ticket. The minimum fine is $100, however. So, 5 miles over the speed limit would be $100 (minimum value) 15 miles over the speed limit would be $150 (add a zero) 35 miles over the speed limit would be $350. etc. I know very little Javascript, if anyone could help me out with this, I'd appreciate it. Thanks, Sean My issue is that I have a javascript function applied on page load via an addLoadEvent function call in the head to every row (dynamic number of records retrieved) on a table. On every row of the table I also have an element (image or button) that performs a different function that is assigned on the element itself. Unfortunately, when I click the element it also performs the function that was applied to the row in the page load. Is there any way to not call this function on element click? I know usually you include code, but due to the nature of the work I am limited in that respect. Basically its: Code: <script type="text/javascript">
addLoadEvent(function() { function1(1); })
//function1 makes the table rows do something appearance wise.
</script>
<tr>
<td></td>
<td></td>
<td>
<img src="pics/delete.png" alt="Delete" onclick="function2();">
</td>
</tr>
I apologize if my post doesn't conform to the general guidelines of proper posting on this board. I'm new on this site. Hi i am looking to create a js pop up to display an amazon widget which relates to an item on my page. so i've found this on the net http://blazonry.com/javascript/windows.php but im not very javascript minded and dont know where to start. so i have tried this Code: <img src="images/listen.png" border="0" alt="Preview Songs" title="Preview Songs" onclick="window.open("song_preview.php?id=<?php echo $row['ASIN']?>","Window1","menubar=no,width=430,height=360,toolbar=no");" />
but it loads a blank pop up at the same time the page loads up and not when an image is clicked? plus when i first loaded the page it said pop up blocked which sucks!! on the example i didnt get that, any reason why??? any help is appreciated thanks Luke i need to create a div as i click down and move while pressing the mouse button and the div will increase in size as i move the mouse while still pressing the mouse button. how can i accomplish this task Hi everyone, I want the source code of creating forum in JavaScript language.ASAP
So yeah, I'm making a science fair project, and need to know if someone could make the script below work into being invincible. Code:
<Style Type="Text/CSS">
<!--
Input{}
.blokje{
Height:48px;
Width:48px;
Font-Size:16pt;
Font-Weight:900;
Font-Family:Comic Sans MS,Arial,Verdana;
Text-Align:Center;
}
.knopje{
Width:144px;
}
-->
</Style>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Rob van der Ven (vennie@wanadoo.nl) -->
<!-- Web Site: http://home.wanadoo.nl/vennie -->
<Center>
<Form>
<Input Type="Button" Title="Click here to play again" Name="beurten" Width="164px" Class="knopje" Value="Player 1" onClick="wie = 'Player 1'; initieer()">
<Table CellPadding="0" CellSpacing="0" Border="0">
<Script Language="JavaScript">
<!--//
for (i = 1; i < 10; i++) {
if (i % 3 == 1) {document.write('<Tr>');}
document.write('<Td><Input Type="Button" Name="' + i + '" Value=" " Class="blokje" onClick="wijzig(this.form,this)"></Td>');
if (i % 3 == 0) {document.write('</Tr>');}
}
//-->
</Script>
</Table>
<Input Type="CheckBox" Title="Click here to change from 2 players or computergame" Name="automaat" Value="2 players" Id="autmat" onClick="if (this.value == 'Computer') {this.value = '2 players'; auto = 0} else {this.value = 'Computer'; auto = 1}; wie = 'Player 1'; initieer();"><Label For="autmat">against the computer</Label>
<Table CellPadding="0" CellSpacing="0" Border="1">
<Tr BgColor="Silver">
<Td Align="Center"> Player 1 </Td>
<Td Align="Center"> Player 2 </Td>
<Td Align="Center"> Tie </Td>
</Tr>
<Tr BgColor="Silver">
<Td Align="Center"><Input Style="BackGround-Color:Transparent;Border:Solid 0px;Text-Align:Center" Type="Text" Size="3" ReadOnly Title="Player 1" Name="speler1" Value="0"></Td>
<Td Align="Center"><Input Style="BackGround-Color:Transparent;Border:Solid 0px;Text-Align:Center" Type="Text" Size="3" ReadOnly Title="Player 2" Name="speler2" Value="0"></Td>
<Td Align="Center"><Input Style="BackGround-Color:Transparent;Border:Solid 0px;Text-Align:Center" Type="Text" Size="3" ReadOnly Title="Tie" Name="Tie" Value="0"></Td>
</Tr>
</Table>
</Form>
</Center>
<Script Language="JavaScript">
<!--//
timerID = xtal = ytal = ztal = auto = 0;
wie = 'Player 1';
function initieer(){
clearTimeout(timerID);
cel = new Array(0,0,0,0,0,0,0,0,0,0);
aanv = new Array(); strat = verd = leeg = aanv;
beurt = wissel = 1; wint = keren = 0;
document.forms[0].speler1.value = xtal;
document.forms[0].speler2.value = ytal;
document.forms[0].tie.value = ztal;
if (wie != 'Start') {
for (i in cel) {
cel[i] = 0; if (i > 0) {document.forms[0].elements[i].value = ''};
}
}
document.forms[0].beurten.value = wie;
}
function zetten() {
clearTimeout(timerID);
if (aanv[0] > 0) {
slag = aanv[Math.floor(Math.random() * 10) % aanv.length]
} else if (verd[0] > 0) {
slag = verd[Math.floor(Math.random() * 10) % verd.length];
} else if (strat[0] > 0) {
slag = strat[Math.floor(Math.random() * 10) % strat.length];
} else {
slag = leeg[Math.floor(Math.random() * 10) % leeg.length];
}
if (beurt == 0 && slag > 0) {document.forms[0].elements[slag].click()};
}
function win() {
if ( cel[1] + cel[2] + cel[3] == 3 ||
cel[4] + cel[5] + cel[6] == 3 ||
cel[7] + cel[8] + cel[9] == 3 ||
cel[1] + cel[4] + cel[7] == 3 ||
cel[2] + cel[5] + cel[8] == 3 ||
cel[3] + cel[6] + cel[9] == 3 ||
cel[1] + cel[5] + cel[9] == 3 ||
cel[3] + cel[5] + cel[7] == 3
) {
if (confirm("Player 1: You win !!!\nDo you want to play again?"))
{
wint = 1;
xtal++; wie = 'Player 1'; timerID = setTimeout('initieer()',800)
} else {
xtal++; wie = 'Start'; timerID = setTimeout('initieer()',800)
};
}
if ( cel[1] + cel[2] + cel[3] == 30 ||
cel[4] + cel[5] + cel[6] == 30 ||
cel[7] + cel[8] + cel[9] == 30 ||
cel[1] + cel[4] + cel[7] == 30 ||
cel[2] + cel[5] + cel[8] == 30 ||
cel[3] + cel[6] + cel[9] == 30 ||
cel[1] + cel[5] + cel[9] == 30 ||
cel[3] + cel[5] + cel[7] == 30
) {
if (confirm(((auto == 1) ? ('Computer wins, sorry') : ('Player 2: You win !!')) + "!\nDo you want to play again?")) {
ytal++; wie = 'Player 1'; timerID = setTimeout('initieer()',800)
} else {
ytal++; wie = 'Start'; timerID = setTimeout('initieer()',800)
};
}
}
function wisselen(beurt){
if (wissel == 1) {
if (beurt == 0) {
beurt = 1;
wie = "Player " + 1
}
else {
if (auto == 0) {beurt = 0;
wie = "Player " + 2} else {beurt = 0; wie = "Computer";}
}
if (keren == 9
) {
if (confirm("Tie!!!\n\nDo you want to play again?")) {
ztal++; wie = 'Player 1'; timerID = setTimeout('initieer()',800)} else
{ztal++; wie = 'Start'; timerID = setTimeout('initieer()',800)};
}
}
else {
beurt = beurt;
}
wissel = 1;
return(beurt);
}
function wijziging(klik) {
plek = cel[klik]; geklikt = klik;
if (plek == 0){
if (beurt == 0){
xo = "O";
plek = 10;
} else {
xo = "X";
plek = 1;
}
cel[klik] = plek; keren++;
}
else {
if (plek == 10){
xo = "O";}
if (plek == 1){
xo = "X";}
wissel = 0
}
return(xo);
}
function verdedig() {leeg = new Array(); verd = new Array();
for (i = 1; i < 10; i++) { oud = cel[i]; cel[i] = 1;
if ( (cel[1] + cel[2] + cel[3] == 3 ||
cel[4] + cel[5] + cel[6] == 3 ||
cel[7] + cel[8] + cel[9] == 3 ||
cel[1] + cel[4] + cel[7] == 3 ||
cel[2] + cel[5] + cel[8] == 3 ||
cel[3] + cel[6] + cel[9] == 3 ||
cel[1] + cel[5] + cel[9] == 3 ||
cel[3] + cel[5] + cel[7] == 3) && oud == 0
) { verd[verd.length] = i}
cel[i] = oud;
if (cel[i] == 0) {
if (keren != 1) {leeg[leeg.length] = i} else
if (cel[5] == 0) {leeg[0] = 5; leeg[1] = 10 - geklikt} else
if (i % 2 != 0) {leeg[leeg.length] = i}
};
}
}
function aanval() {aanv = new Array();
for (i = 1; i < 10; i++) { oud = cel[i]; cel[i] = 10;
if ( (cel[1] + cel[2] + cel[3] == 30 ||
cel[4] + cel[5] + cel[6] == 30 ||
cel[7] + cel[8] + cel[9] == 30 ||
cel[1] + cel[4] + cel[7] == 30 ||
cel[2] + cel[5] + cel[8] == 30 ||
cel[3] + cel[6] + cel[9] == 30 ||
cel[1] + cel[5] + cel[9] == 30 ||
cel[3] + cel[5] + cel[7] == 30) && oud == 0
) { aanv[aanv.length] = i}
cel[i] = oud;
}
}
function strategie() {strat = new Array();
for (i = 1; i < 10; i++) { oud = cel[i]; cel[i] = 10;
if ( (cel[1] + cel[2] + cel[3] == 20 ||
cel[4] + cel[5] + cel[6] == 20 ||
cel[7] + cel[8] + cel[9] == 20 ||
cel[1] + cel[4] + cel[7] == 20 ||
cel[2] + cel[5] + cel[8] == 20 ||
cel[3] + cel[6] + cel[9] == 20 ||
cel[1] + cel[5] + cel[9] == 20 ||
cel[3] + cel[5] + cel[7] == 20) && oud == 0
) {
if (keren != 3) {strat[strat.length] = i} else if (i % 2 != 0) {strat[strat.length] = i}
}
cel[i] = oud;
}
}
function wijzig(form,element){
wijziging(element.name);
element.value = xo;
beurt = wisselen(beurt);
form.beurten.value = wie;
verdedig(); aanval(); strategie(); win();
if (auto == 0 || wint == 1) {return} else {
timerID = setTimeout('zetten()',600)
}
}
initieer();
Hey All, I've currently working on making a calendar for my website. How do I go about creating a password for it? So that the admin can add events to it. Cheers Guys!!! I am writing a function that alerts a user that they did not enter a password what change do I need to make to this code to correct my issue it isn't doing anything [CODE] <script language = Javascript> function validate(){ if(document.login.pw.value==""); alert("Your id and or password is incorrect"); return false; } else return true; } </script> [CODE] I have asked to create a chatbox, which acts just like a messenger which I type a text in the textbox and press send to show output to the messagebox. However, in my code, I have 2 bugs which is bothering me. The first one is whenever I press spacebar, a "+" sign appear. The second is the first text disappeared whenever I type the second text. Please help me. Code: <html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
var isShift=null;
var isNN = (navigator.appName.indexOf("Netscape")!=-1);
var OP = (navigator.appName.indexOf("Opera")!=-1);
if(OP)isNN=true;
var key;
function shift(event){
key = (isNN) ? event.which : event.keyCode;
if (key==16)isShift=1;
}
function process(event){
key = (isNN) ? event.which : event.keyCode;
if(document.layers&&event.modifiers==4){
isShift=1;
}
if (key==13&&isShift!=1){
document.myForm.submit();
}
if (key!=16)isShift=null;
}
function retrieve(){
document.myForm.text1.focus();
if(location.search.length>0){
blubb=unescape(location.search.split('=')[1]);
document.myForm2.text2.value=blubb;
}
}
//-->
</script>
</head>
<body onload="retrieve()">
<form name="myForm">
<textarea name="text1" onkeypress="process(event)" onkeydown="shift(event)" cols="50" rows="7"></textarea><input type="submit" accesskey="s" value="Send">
</form><br><br>
This second textarea is just to show, that the line breaks "arrive":<br>
<form name="myForm2">
<textarea name="text2" cols="50" rows="7"></textarea>
</form>
</body>
</html>
I have searched and scoured the web looking for a script like this. I have found different scripts that do certain aspects of what I am looking for, but not ONE that does it all. I am hoping you can help bring my search to an end! I need a script that when a user tries to leave a page, either by typing in a URL in the address bar or clicking an external link they get a Javascript (not pop up window) dialog box asking if they would like to complete a survey. If they click OK they are then redirected to the survey page. If they click cancel it allows them to go on their way to the external link. It needs to be able to decipher between internal and external links. The script needs to work with both IE and FF. This is a must. Safari would be a plus. I would like, BUT IS IN NO WAY A NECESSITY, for the script to also be cookie based in that the user doesn't see it if they've seen it within 7 or 14 days. I really hope you all can help me here as I am lost! If you need any other info from me please let me know! so now that i figured out how to add items in an array and i got the percent of each item from the total i have a table that looks something like this...(sorry the alignment is screwed up) Name Votes Percent 1.2.3.4.5.6.7.8.9.10..... Bob 45 14% Bill 86 26% George 122 37% Sam 79 24% the numbers One through Ten represent empty columns (i technically need 100 but i didnt write that out yet... so what i am trying to do is initially take the number i get from the percentage and fill in the amount of cells with a certain color.... so 14% would fill 14 of 100 cells..and this would create a bar graph..In theory I know how it should work I just can get any of the right syntax..here is the code i am working with... Code: var votes = new Array();
votes[0] = 45;
votes[1] = 86;
votes[2] = 122;
votes[3] = 79;
var ppl = new Array();
ppl[0] = "Bob";
ppl[1] = "Bill";
ppl[2] = "George";
ppl[3] = "Sam";
//var party = new Array();
//party[0] = "(D)";
//party[1] = "(R)";
//party[2] = "(I)";
//party[3] = "(G)";
function getPercent(){
var theSum = 0;
for(var i = votes.length;i--;)
{
theSum += votes[i]
}
for(i=0;i<ppl.length;i++)
{
document.write("<tr><td>"+ppl[i]+"</td><td>");
document.write(votes[i]+"</td><td>");
var pct = document.write(Math.round(votes[i]/theSum*100)+"%"+"</td></tr>");
}
//var total = document.write(numbers[numbers.length-1]); *property to get array length
}
function createBar(){
}
thanks in advance for any help! |
|||||||