|
JavaScript - Trouble Creating Simple Virtual Pagination
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? Similar TutorialsHi, thanks for taking the time to read this. I believe it is a very simple problem however I cannot get it to work, when I run it I enter info into the prompt and it seems to get stuck in a loop. Basically A prompt asks for user to enter a code (has to be either R or r or C or c) though when I enter one of those in it won't work. Code: <html>
<head>
<title>Water Usage</title>
<script type="text/javascript">
// Setting our variables based on user input
var code;
var kl_c;
var kl_r;
var kl_c_cost;
var kl_r_cost;
code = prompt("Please Enter Code");
while ((code != "R") || (code != "C") || (code != "r") || (code != "c") || (code ==""))
{
alert("Please Enter C for Commercial or R for Residential");
window.location.reload(true);
}
if ((code == "C") || (code == "c"))
{
kl_c = prompt("Please Enter The Kilolitres Of Water Consumed");
kl_c_cost = (kl_c * 0.2)
alert("The Total amount of water used for this Residential property is " + kl_c + " Kilolitres and the total cost is $" + kl_c_cost);
}
else if ((code == "R") || (code == "r"))
{
kl_r = prompt("Please Enter The Kilolitres Of Water Consumed");
kl_r_cost = (kl_r * 0.6)
alert("The Total amount of water used for this Residential property is " + kl_r + " Kilolitres and the total cost is $" + kl_r_cost);
}
</script>
</head>
<body>
</body>
</html>
Can some please help me. I'm really new at this and is having trouble with this simple example Code: <html>
<head>
<script type="text/javascript">
//Below i was trying to set up a var pam that includes some text
//and the value of form field name pamcheck and then display that result of pam on the screen
//using a check box with a value of 'pale ale malt' hoping that when the ckeck box is checked
//and then user clicks submit the result would be displayed on the screen as
// 'Your selected malt is Pale ale malt'
function pamff1() {
pam = ("<p>Your selected malt is <p>" + pamcheck);
document.write(pam);
}
</script>
</head>
<body>
<form onsubmit="pamff1();">
<input type="checkbox" name="pamcheck" value="Pale ale malt" >
<input type="submit" value="Submit">
</form>
</body>
</html>
So frustrating that lately I've been having trouble with the simplest of code, and this is about as simple as it gets. Matched it up with every similiar example I can find both in books and on the net, and it seems to be perfectly valid code, but when I run it, nothing. :S 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 language="javascript" type="text/javascript">
function favouriteColour() {
var index = document.getElementById("select1").options[document.getElementById("select1").selectedIndex].value;
document.getElementById = "Your favourite colour is " + index;
}
</script>
</head>
<body>
<select id="select1">
<option></option>
<option id="black" onchange="favouriteColour()">Black</option>
<option id="white" onchange="favouriteColour()">White</option>
<div id="favcolour"></div>
<option>
</select>
</body>
</html>
Thanks in advance. Hello.. I'm in a Web Development basics class at my College. We are about two weeks in as we've blew through HTML and CSS. Anyway.. to the question. So for this class I need to make a website with terms and their definitions. The definitions have to be in Javascript and make them show up with an alert. The problem is, I can't figure out how to have unique functions that I can somewhat link with the button. Quote: <html> <head> <script type="text/javascript"> function show_alert() { alert('term definition ONE ') } </script> </head> <body> <input type="button" value="term definition ONE " onclick="show_alert()" /> <input type="button" value="term definition TWO " onclick="show_alert()" /> </body> </html> Making a new button would just link to the script that's in the <head> giving the same definition. It's almost like I need to give each function a variable that matches up with each button, since I have multiple terms.. I hope you get what I'm trying to say. I 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?
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>
I'm trying to make an xhtml form that validates itself through a javascript function. I have the form up but for some reason I can't get it to validate. I'm not even sure if I linked things correctly. Here's what I have: the xhtml file <?xml version = ″1.0″ encoding = ″utf-8″ ?> <!DOCTYPE html PUBLIC ″-//W3C//DTD XHTML 1.0 Strict//EN″ http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <script src="gas24.js" type="text/javascript"></script> <h2> Registration Form </h2> <title> Javascript Form Validation Homework </title> </head> <body> <table border=""> <form name="validation_form" method="post" onsubmit="return validate()"> <tr> <td> <t>Name: <input type="text" name="YourName" size="10" maxlength="10"/> </td> </tr> </br> <tr> <td> E-mail Address: <input type="text" name="YourEmail" size="10" maxlength="24"/> </td> </tr> </br> <tr> <td> Password: <input type="password" name="YourPassword" size="10" maxlength="10"/> </td> </tr> </br> <tr> <td> Re-Type Password: <input type="password" name="passwordConfirmed" size="10" maxlength="10"/> </td> </tr> </br> <tr> <td> Your Gender: <input type="radio" name="MaleBox" Value="Male"> Male <input type="radio" name="FemaleBox" Value="Female"> Female </td> </tr> </br> <tr> <td> Comments: <input type="text" name="Comments" size="100" maxlength="500" value=""/> </td> </tr> <tr> <td> <input type="submit" value="Submit"/> </td> </tr> </form> </table> <p></p> </body> </html> The javascript file: I've tried two things. This: <SCRIPT LANGUAGE="JavaScript"> function validation() { var x=document.forms["validation_form"]["YourName"].value; if (x==null || x=="") { alert("First name must be filled out"); return false; } } And this: function validation() if ( document.validation_form.YourName.value == "" ) { alert( "Please type your name."); valid = false; } if ( document.validation_form.YourPassword.value =! "document.validation_form.Confirm.value" ) { alert ( "Please confirm your password." ); valid = false; } I would greatly appreciate it if somebody could tell me what I'm doing wrong. 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>
Hello all, Ok i been practising on this a bit, trying to make a virtual keypad where someone would click and have the numbers he / she clicked display in the text box. source goes like this , am new to this dont know how to go about it. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<meta name="generator" content="Web Page Maker">
<style type="text/css">
/*----------Text Styles----------*/
.ws6 {font-size: 8px;}
.ws7 {font-size: 9.3px;}
.ws8 {font-size: 11px;}
.ws9 {font-size: 12px;}
.ws10 {font-size: 13px;}
.ws11 {font-size: 15px;}
.ws12 {font-size: 16px;}
.ws14 {font-size: 19px;}
.ws16 {font-size: 21px;}
.ws18 {font-size: 24px;}
.ws20 {font-size: 27px;}
.ws22 {font-size: 29px;}
.ws24 {font-size: 32px;}
.ws26 {font-size: 35px;}
.ws28 {font-size: 37px;}
.ws36 {font-size: 48px;}
.ws48 {font-size: 64px;}
.ws72 {font-size: 96px;}
.wpmd {font-size: 13px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;}
/*----------Para Styles----------*/
DIV,UL,OL /* Left */
{
margin-top: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<form name="form1" style="margin:0px">
<input name="formtext1" type="text" style="position:absolute;width:200px;left:712px;top:168px;z-index:2">
</form>
<div id="text1" style="position:absolute; overflow:hidden; left:385px; top:172px; width:368px; height:28px; z-index:1">
<div class="wpmd">
<div><font class="ws11">Please Enter the Password with virtual keyboard :</font></div>
</div></div>
<div id="table1" style="position:absolute; overflow:hidden; left:576px; top:221px; width:114px; height:98px; z-index:3">
<div class="wpmd">
<div><TABLE bgcolor="#FFFFFF" border=0 bordercolorlight="#C0C0C0" bordercolordark="#808080">
<TR valign=top>
<TD width=26><label>
<input type="submit" name="Submit" value="1">
</label>
<BR></TD>
<TD width=27><input type="submit" name="Submit2" value="2">
<BR></TD>
<TD width=22><input type="submit" name="Submit3" value="3">
<BR></TD>
<TD width=20><input type="submit" name="Submit4" value="4">
<BR></TD>
</TR>
<TR valign=top>
<TD width=26><input type="submit" name="Submit5" value="5">
<BR></TD>
<TD width=27><input type="submit" name="Submit6" value="6">
<BR></TD>
<TD width=22><input type="submit" name="Submit7" value="7">
<BR></TD>
<TD width=20><input type="submit" name="Submit8" value="8">
<BR></TD>
</TR>
<TR valign=top>
<TD width=26><BR></TD>
<TD width=27><input type="submit" name="Submit9" value="9">
<BR></TD>
<TD width=22><input type="submit" name="Submit10" value="0">
<BR></TD>
<TD width=20><BR></TD>
</TR>
</TABLE>
</div>
</div></div>
</body>
</html>
Kindly help someone ... Reply With Quote 12-26-2014, 12:27 PM #2 vwphillips View Profile View Forum Posts Visit Homepage Senior Coder Join Date Mar 2005 Location Portsmouth UK Posts 4,540 Thanks 3 Thanked 513 Times in 500 Posts Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<meta name="generator" content="Web Page Maker">
<style type="text/css">
/*----------Text Styles----------*/
.ws6 {font-size: 8px;}
.ws7 {font-size: 9.3px;}
.ws8 {font-size: 11px;}
.ws9 {font-size: 12px;}
.ws10 {font-size: 13px;}
.ws11 {font-size: 15px;}
.ws12 {font-size: 16px;}
.ws14 {font-size: 19px;}
.ws16 {font-size: 21px;}
.ws18 {font-size: 24px;}
.ws20 {font-size: 27px;}
.ws22 {font-size: 29px;}
.ws24 {font-size: 32px;}
.ws26 {font-size: 35px;}
.ws28 {font-size: 37px;}
.ws36 {font-size: 48px;}
.ws48 {font-size: 64px;}
.ws72 {font-size: 96px;}
.wpmd {font-size: 13px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;}
/*----------Para Styles----------*/
DIV,UL,OL /* Left */
{
margin-top: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<form name="form1" style="margin:0px">
<input name="formtext1" type="text" style="position:absolute;width:200px;left:712px;top:168px;z-index:2">
</form>
<div id="text1" style="position:absolute; overflow:hidden; left:385px; top:172px; width:368px; height:28px; z-index:1">
<div class="wpmd">
<div><font class="ws11">Please Enter the Password with virtual keyboard :</font></div>
</div></div>
<div id="table1" style="position:absolute; overflow:hidden; left:576px; top:221px; width:114px; height:98px; z-index:3">
<div class="wpmd">
<div><TABLE bgcolor="#FFFFFF" border=0 bordercolorlight="#C0C0C0" bordercolordark="#808080">
<TR valign=top>
<TD width=26><label>
<input type="button" name="Submit" value="1">
</label>
<BR></TD>
<TD width=27><input type="button" name="Submit2" value="2">
<BR></TD>
<TD width=22><input type="button" name="Submit3" value="3">
<BR></TD>
<TD width=20><input type="button" name="Submit4" value="4">
<BR></TD>
</TR>
<TR valign=top>
<TD width=26><input type="button" name="Submit5" value="5">
<BR></TD>
<TD width=27><input type="button" name="Submit6" value="6">
<BR></TD>
<TD width=22><input type="button" name="Submit7" value="7">
<BR></TD>
<TD width=20><input type="button" name="Submit8" value="8">
<BR></TD>
</TR>
<TR valign=top>
<TD width=26><BR></TD>
<TD width=27><input type="button" name="Submit9" value="9">
<BR></TD>
<TD width=22><input type="button" name="Submit10" value="0">
<BR></TD>
<TD width=20><BR></TD>
</TR>
</TABLE>
</div>
</div></div>
<script type="text/javascript">
<!--
function Enter(p){
document.getElementById('formtext1').value+=p.value;
}
var p=document.getElementById('table1').getElementsByTagName('INPUT');;
for (var z0=0;z0<p.length;z0++){
p[z0].onclick=function(){ Enter(this); }
}
//-->
</script>
</body>
</html>
I am trying to create a virtual pet using javascript and HTML. the pet responds to the 2 buttons I have created on my page, and the text in the two boxes as well as the photo on the page changes depending on the state of the pet. I can't seem to get my buttons to work and I don't know what code I would use to change the picture of the pest. Any help would be appreciated. my file is attached as a .txt file. GeoKBD.js and Geo.js is a virtual keyboard that is intended to simplify support for Georgian Writing. for Geo.js this code working fine: Code: onkeypress="return makeGeo(this,event);" But i dont know code with same function for GeoKBD.js Please help me Hey guys. Been trying to mod an existing open source virtual keyboard script by adding a scramble function for security purposes which scrambles the keyboard after each click. Quite new to javascript and have spent a full week studying OOP for Javascript and testing it out, but to no avail. Partially i guess that the script is too complex for a newbie like me. Would appreciate it alot if i could get some tips/ guidience. Here's the full script: http://www.greywyvern.com/code/javas...yboard.user.js Excerpts of what i'm trying to work on: An attempt to get it to randomise (without any clicking yet) The numpad is apparently stored in an array so i tried to pass it into a sorting algorithm. Doesn't work and actually i have no idea if i'm even trying in the right direction. Would appreciate any help! Code: /* ***** Layout Number Pad ************************************* */
this.VKI_numpad = [
[["$"], ["\u00a3"], ["\u20ac"], ["\u00a5"]],
[["7"], ["8"], ["9"], ["/"]],
[["4"], ["5"], ["6"], ["*"]],
[["1"], ["2"], ["3"], ["-"]],
[["0"], ["."], ["="], ["+"]]
];
function fisherYates (VKI_numpad) {
var i = this.VKI_numpad.length;
if ( i == 0 ) return false;
while ( --i ) {
var j = Math.floor( Math.random() * ( i + 1 ) );
var tempi = this.VKI_numpad[i];
var tempj = this.VKI_numpad[j];
this.VKI_numpad[i] = tempj;
this.VKI_numpad[j] = tempi;
alert ('This line is read');
}
}
fisherYates(VKI_numpad);
Hello, I am trying to create a virtual room painter where a user can choose from one of our photos and when they choose a certain wall color or finish, that color or finish will overlay overtop the chosen photo. I would also like an option where they can share or save the finished photo. Here is an example: Glidden Paint - Virtual Room Painter And Paint Color Visualizer | Glidden.com (I think that this will be done using javascript but I am not sure.) Thanks Reply With Quote 01-09-2015, 10:59 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts That Glidden version was done using Flash. Flash is going to be much better at something like this than JavaScript will. Essentially, if someone imports a photo and (say) designates a wall area to be repainted, you have to find the bounds of that area. How do you do that? Find adjacent pixels that are within some percentage of being the same color? Maybe. But what do you do if there is a corner in/on the wall? How do you detect that and make the part around the corner a separate area? etc. etc. etc. JavaScript *can* inspect individual pixels, but figuring out the edges of various shapes and colors in an image is not trivial. I read the posting guidelines but I still have questions that I would love to be answered by anyone willing to tolerate me. I started studying javascript when I decided that I wanted to create a dynamic webpage after viewing some books that were made to pageflip with Javascript and after viewing a ton of animations. So I figured since everyone keeps saying Javascript is simple that if all I wanted to do was to make a book extend outwards on mouseover and then open up on click and flip pages which they already have a code for that it wouldn't be so difficult. I've read everything I could practiced a little bit, I'm not fluent but I do have a goal and a time. The problem for me comes up with figuring out what I need to do in order to make it appear as if the book is coming out of a book shelf. There is a lot of information on animations where flat objects rise above clouds. I am thinking that I would have to use some sort of sprite of a row of books both sorta sideways where you can see the side of the book as well as the edge, and both a row of books on a shelf, or perhaps a row of books with some of the books being pulled out and then on mouse over animate the scene so that it looks like the book is being pulled out. Would that work? Or is there a simpler way? Another way or I don't know. Is there a code that can make it look like a book is extending outwards without an animation or would I need to create an animation for that? Thank you. I want to do virtual ipod for ipad, iphone, android by javascript & HTML. Quote: http://farm.vumon.vn/mediastore/phuc.../ipod-nano.jpg I found this plugin: Quote: http://yuilibrary.com/yui/docs/dial/...teractive.html maybe, it's nearly the same, but I want to find only javascript. not allow jQuery, because, I want to launch app for ipad, iphone, android apps. I need help with pagination setup for my javascript image display. The images I have now display when I select a certain category dynamically but I don't know how to implement javascript pagination into this code. I also don't know how to call it in my display page so that the images appear in a box and has separation in between them cause right now the images all display but connected to one another. I am new to javascript and the coding world so I really hope someone can help me out cause I've been trying to figure out how for the past 2 weeks now. Right now I have the code: Code: <div id="ImageContainer"></div>
<br />
<script type="text/javascript"><!--
function ShowGallery()
{
// get parent for image container and remove image container
var parentcontainer = document.getElementById("ImageContainer").parentNode;
parentcontainer.removeChild(document.getElementById("ImageContainer"));
// get current image gallery information from dropdown
var dropdown = document.getElementById("catDropDown");
var selectedoption = dropdown.getElementsByTagName("option")[dropdown.selectedIndex];
var count = parseInt(selectedoption.getAttribute("Count"));
// if there are not images in the category, return - "select a category" falls into this case as well
if(count<=0)
return;
// populate images in image elements
var container = document.createElement("div");
container.setAttribute("id","ImageContainer");
for(var i=0;i<count;i++)
{
var img=document.createElement("img");
img.setAttribute("src","images/th/thumb_"+dropdown.value+(i<9?"0":"")+(i+1)+".jpg");
img.setAttribute("alt","images/th/thumb_"+dropdown.value+(i<9?"0":"")+(i+1)+".jpg");
container.appendChild(img);
}
// Insert new image container back with new contents
parentcontainer.appendChild(container);
}
Hi. does anyone know how websites like www.fmylife.com or mylifeisaverage.com do their pagination? Do they just store all the posts in a database and then call them out? I'm asking this because I am wondering how I should paginate. Thanks
Hi, I have a table with a list of items which currently show 8 items per page. I want to have an input box at the top of the page so if I want a different amount of items to be shown i enter the number and the page alters the pagination to what ever number is entered. Hope this makes sense. Thanks for any help |
|||||||