|
JavaScript - Simple Table
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 Similar TutorialsHi 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 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 guys i having some problems with jquery plugin table sorter on a dynamic table. if i use it on a regular html table it works fine,but on my dynamic table its not working. if someone could look at my code and see if i done something wrong i would appreciate it . Thanks will43 Code:
<script type="text/javascript" src="table sorter/jquery.tablesorter/jquery-latest.js" ></script>
<script type="text/javascript" src="table sorter/jquery.tablesorter/jquery.tablesorter.js" ></script>
<script type="text/javascript"/>
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
<form id="form1" name="form1" method="post" action="">
<label for="Position">Position</label>
<select name="Position" id="Position">
<option>QB</option>
<option>HB</option>
<option>FB</option>
<option>WR</option>
<option>TE</option>
<option>RG</option>
<option>RT</option>
<option>C</option>
<option>LG</option>
<option>LT</option>
<option>CB</option>
<option>LB</option>
<option>SS</option>
<option>FS</option>
<option>DE</option>
<option>DT</option>
<option>P</option>
<option>K</option>
</select>
<input type="submit" name="Summit" id="Summit" value="Submit" />
</form>
<p> </p>
<p> </p>
<table width="950" border="1" cellpadding="3" cellspacing="3" class="tablesorter" id="myTable">
<thead>
<tr>
<th bgcolor="#FF0000">id</th>
<th bgcolor="#FF0000">Team</th>
<th bgcolor="#FF0000">FirstName</th>
<th bgcolor="#FF0000">LastName</th>
<th bgcolor="#FF0000">Position</th>
<th bgcolor="#FF0000">Year</th>
<th bgcolor="#FF0000">Overall</th>
<th bgcolor="#FF0000">Speed</th>
</tr>
</thead>
<?php do { ?>
<tbody>
<tr>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['id']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Team']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['FirstName']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['LastName']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Position']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Year']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Overall']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Speed']; ?></td>
</tr>
</tbody>
<?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
</table>
Hello all i have to implement simple LIFO algorithm ( if i can call it like this .. ) say i have html table and and i fetching data i like thet the last data that fetched to be the first record in the table for example : im fetching the string "111" so it will be the first record next im fetching the string "222" now the string "111" will be the second and the string "222" will be the first .. and so on hi all, i have a table, just a basic table with 6 rows. depending on the value of the first <td>thevalue</td> i want to start a end the existing table and start a new one. the newly added table (i hope) will contain all the remaining <tr><td></td></tr> nodes until i run into the next check that will close the newly added table and begin a new table again etc.... i can get the correct node (tr) after i find the value in the td im looking for, and then try a : document.createElement("table"); , but my problem is that this newly created table tag comes with an automatically created </table> element / tag, so i end up with just inserting a new blank table after a row instead of inserting a new table tag that has all the remaining tr and tds under it. hope that makes sense. my entire test page is: (click the text link and an alert will show the output with the new <table></table> after the row that my check is looking for (first td with a 2) -------------------------------------------------------------------- Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function reformatMe() {
var divObj = document.getElementById('reformatMe');
var numRows = document.getElementsByTagName("tr");
var z = "1";
for (i = 0; i < numRows.length; i++) {
if (numRows[i].childNodes[0].innerHTML == "2") {
var markStart = numRows[i];
alert(markStart.nextSibling);
var closeTable = document.createElement("/table");
var addTable = document.createElement("table");
//var tbody = document.createElement("tbody");
//addTable.appendChild(tbody);
addTable.setAttribute("id", "subOptionID" + z);
if(numRows[i+1] != null){
numRows[i].parentNode.insertBefore(addTable, numRows[i+1]);
}
z++;
}
}
alert(divObj.innerHTML);
}
</script>
</head>
<body>
<a href="#" onclick="reformatMe();">reformat table</a>
<div id="reformatMe">
<table border="1" cellpadding="4" cellspacing="2" id="menuItemID1">
<tr><td>1</td> <td>1</td> <td>How would you like your food prepared?</td> <td>1</td> <td>1</td> <td>0</td></tr>
<tr><td>1</td> <td>1</td> <td>Choose two of the following sides</td> <td>0</td> <td>2</td> <td>0</td></tr>
<tr><td>1</td> <td>1</td> <td>What do you want on your Baked Potato?</td> <td>0</td> <td>2</td> <td>1</td></tr>
<tr><td>2</td> <td>1</td> <td>What type of dressing do you want on your salad?</td> <td>1</td> <td>1</td> <td>1</td></tr>
<tr><td>1</td> <td>1</td> <td>Do you want fries?</td> <td>1</td> <td>1</td> <td>0</td></tr>
<tr><td>1</td> <td>1</td> <td>Do you want ketchup on your fries?</td> <td>1</td> <td>1</td> <td>1</td></tr>
</table>
</div>
</body>
</html>
I have a master page with a table that contains main content and side bar content. The main content is where the different pages of the site are shown, and the side bar content has stuff like email and friends lists. The mail list is on a model popup and when opened will ajax populate the table with rows containing image, subject, sender, time, all in different td's. When I click a row, the message pops up. From the message I can choose to reply or delete. When I delete I want to fade out the row that was deleted. I can wait the 10 seconds until the list does a refresh but I would rather have this cool visual effect. My problem is I am having difficulty selecting the tr I want. My table has an id of MainMailTable and when I check it does not have the ct100: added in front. Here is what I am trying: Code: $('#MainMailTable:tr:has(td:contains(' + subject + '))').fadeOut(1000);
I am trying to find the row that contains the subject of the message I want to delete. I guess that isnt really unique, and maybe I should add a hidden td with an id to the row (can Jquery get a hidden field?). But I would like to be able to get this first step to work. When I try: Code: $('tr:has(td:contains(' + subject + '))').fadeOut(1000);
the whole page disappears, so I think I may be close. Thank you in advance for any assistance. I've tried using this to do it, but it isn't working... string.replace(/(<table([^>]+)table>)/ig,""); Hi Folks, I've been trying to learn Javascript, I'm fluent with CSS, HTML and not to bad with jQuery and PHP. But I've been trying to learn the core fundamentals of JavaScript. Basically, I have a friend who has a strange take on the English language, so I wanted to make him a translator, so that you could input one of his misspellings and it would bring up the proper word. <html> <head> <script type="text/javascript" src="js/modernizr.js"></script> <script type="text/javascript"> // Mox spellings function checkMox () { var bm = document.forms["transMox"]["mox"].value; if (bm == "wid") { document.write("wid = with"); } else { document.write("Please enter a Moxism"); } }; </script> </head> <body> <header> <div id="title"> <h1>I drink!</h1> <h2>Therefor I am...</h2> </div> <nav> <ul> <li>The history of Moxisms</li> <li>Examples of Moxisms</li> <li>The man himself...</li> </ul> </nav> </header> <h3>Welcome to the Big Mox translator</h3> <form id="transMox" action="#output" method="post" onsubmit="return checkMox()"> <input type="text" id="mox">Enter a Moxism</input> <br /> <input type="submit" id="submit" onSubmit="checkMox();">G0!</input> </form> <div id="output"> </div> </body> </html> Obviously that's just for one word, so I wondered how to structure more words into an array or something? Anyway, cheers in advance for the help guys! Hi, Im trying to make an imacro/javascript script that checks a webpage for names, and if either of the names are found, i want the script to alert me, if not, continue looping/reloading the page. Im not at all good with javascript, imacro is more sort of my thing, however what i do have, doesnt seem to do anything. var links = document.getElementsByTagName('a'); for (var i in links){ if (links[i].value == "Simon" || links[i].value == "James"){ alert("ATTENTION"); } } i dont know if its something simple i'm missing, or whether im nowhere near, but ive spent all day trying to do this, and lost all patience. Any suggestion/fixes? Hello, Below is my Javascript, CSS and HTML code for the navigation menu on http://033691f.netsolhost.com/stnew/ -- a test site for my company. Note: I did not write the Javascript code nor do I know how to write javascript. I take no credit. When the page first opens, the navigation shows fully expanded for a second, then collapses all. I would like to cut out the expanded view if possible and have the page load with the menu fully collapsed. Is there any way that would work? Thank you in advance for any input! Code: function initMenus() {
$('ul.menu ul').hide();
$.each($('ul.menu'), function(){
var cookie = $.cookie(this.id);
if(cookie === null || String(cookie).length < 1) {
$('#' + this.id + '.expandfirst ul:first').show();
}
else {
$('#' + this.id + ' .' + cookie).next().show();
}
});
$('ul.menu li a').click(
function() {
var checkElement = $(this).next();
var parent = this.parentNode.parentNode.id;
if($('#' + parent).hasClass('noaccordion')) {
if((String(parent).length > 0) && (String(this.className).length > 0)) {
if($(this).next().is(':visible')) {
$.cookie(parent, null);
}
else {
$.cookie(parent, this.className);
}
$(this).next().slideToggle('normal');
}
}
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
if($('#' + parent).hasClass('collapsible')) {
$('#' + parent + ' ul:visible').slideUp('normal');
}
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#' + parent + ' ul:visible').slideUp('normal');
if((String(parent).length > 0) && (String(this.className).length > 0)) {
$.cookie(parent, this.className);
}
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenus();});
Code: <ul id="menu1" class="menu" style="margin-top:20px;"> <li><a class="m0" href="index.php" style="background-color:#222; color:#fff;">HOME</a></li> <li><a class="m1" href="">WHO WE ARE ...</a> <ul><li><a href="">Company Overview</a></li> <li><a href="">Clientele</a></li> <li><a href="">Multimedia</a></li> <li><a href="">Careers</a></li> <li><a href="">Contact Us</a></li> </ul> </li> <li><a class="m1" href="">WHAT WE DO ...</a> <ul><li><a href="">Promotional Products</a></li> <li><a href="">Screen Printing</a></li> <li><a href="">Embroidery</a></li> <li><a href="">Signage</a></li> <li><a href="">Web Design</a></li> </ul> </li> <li><a class="m3" href="">FIND PRODUCTS ...</a> <ul><li><a href="">Web Search</a></li> <li><a href="">Online Catalogs</a></li> </ul> </li> <li><a class="m4" href="">SUPPORT TOPICS ...</a> <ul><li><a href="">General Information</a></li> <li><a href="">Available Brands</a></li> <li><a href="">Artwork Submissions</a></li> <li><a href="">Color & Substrate Charts</a></li> <li><a href="">Dartman Game</a></li> </ul> </li> <li><a class="m5" href="http://www.screentek.net/blog">READ OUR BLOG</a></li> </ul> Code:
ul.menu { border-bottom:1px solid #ccc; }
ul.menu, ul.menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 240px;
}
ul.menu a {
display: block;
text-decoration: none;
}
ul.menu li {
margin-top: 0px;
border-top:1px solid #ccc;
font-size:10pt;
font-family: Segoe-B;
}
ul.menu li a {
background: #fff;
color: #333;
padding: 3px 20px;
}
ul.menu li a:hover {
background: #2b76b7;
color:#fff;
}
ul.menu li ul li a {
background: #fff;
color: #2b76b7;
padding-left: 35px;
font-size:10pt;
font-family: Segoe-R;
}
ul.menu li ul li a:hover {
background: #eee;
border-left: 5px #000 solid;
padding-left: 25px;
color:#333;
}
.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 { padding-left: 1em; }
.indent2 { padding-left: 2em; }
.indent3 { padding-left: 3em; }
.indent4 { padding-left: 4em; }
.indent5 { padding-left: 5em; }
Hey guys! I need a simple JavaScript word translator where the user can type a sentence into a text box and then be presented with what they just typed in on the page but with any programmed word replacements. I want to be able to programme in the words myself for replacement so no Google; this will be a personal offline thing and isn't used to translate a language. For example, if I programmed the word " chocolate " to be replaced with " strawberry ", and " a lot " to be replaced with " loads ", and typed into the text-box: "I like chocolate sauce a lot ". It would then display the sentence on the page, but with the word alterations. Therefore looking like this: "I like strawberry sauce loads ". That being just an example. I want to be able to easily add additional word replacements without hassle using only JavaScript, I don't want it to translate the text on the page or anything, just what you type into the text-box. So let's pretend the words were programmed as follows: . cat = dog, . love = adore . very much = a lot And I typed into the text-box the following: "I have a cat, and I love her very much. " On the same page, it would then display this text: "I have a dog, and I adore him a lot. " I cannot use other code as I am only fond with JavaScript. I would need the text-box to automatically be selected by default everytime the page is loaded, and then for it to clear everytime you click 'Submit' or press the [Enter] key, ready for the next sentence to be typed in. I know this is a lot to ask but I didn't know who else to turn to. Anyways, I know you'll know this WAY better than me, ha; hope you can help! Cheers guys!!! Hello all, I have a translation script that I want to modify to use select boxes instead of divs, but I have a little problem with what I have. Bascially, the user selects an option and it changes the text in between the ' ' (VALUE) to whatever the value of the option is: Code: <select onchange="updateLangTo('VALUE')">
<option value="en">English</option>
<option value="ar">Arabic</option>
</select>
So how would JavaScript be able to accomplish this? Please help if you can. My problem is that i have simple paypal form. When user select 10 accounts then below textbox shows amount to be paid. But when i click at paypal it again multiply with accounts and shows multiple amount at paypal page. For example if you select 10 then amount will be 18.5$ but after clicking at pay button it shows amount at paypal page $185.00 Code: <body>
<form name="frm1" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="accounts@freelanceswitch.com"><br />
<strong>How Many Acounts you want</strong>
<select name="quantity" onchange="calculate()" id="quantity">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
</select>
<br />
<input type="hidden" name="no_shipping" value="0">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="AU">
<input type="hidden" name="bn" value="PP-BuyNowBF">
<input type="hidden" name="return" value="http://net.tutsplus.com/payment-complete/">
<br />
<p>$
<input type="text" name="amount" id="amount" value="0" readonly="readonly"/>
<br />
<input type="submit" value="Pay with PayPal!">
</p>
</form>
<script type="text/javascript">
function calculate (){
ac=document.getElementById('quantity').value;
var z=1.85;
total =ac*z;
document.frm1.amount.value=total;
}
</script>
</body>
Hey guys, I'm new to jquery and I'm sure this is a VERY simple problem.. Here's my code Quote: <style type="text/css"> #box { background: red; width: 300px; height: 300px; display: none; } </style> <script type="text/javascript"> $(function() { $('a').click(function() { $('#box').slideDown(4000); }); }); </script> </head> <body> <div id="box"></div> <a href="#">Click Me!</a> </body> </html> As you can see it's pretty simple, I've made the box slideIn. My problem is I want to make a separate button to slide it back out, but because I've used the "a" tag it's associating all links with the same function, how do I get around this? I'm sure it's really simple! Thanks i have this simple js example to click Delete Post and then give the user two options. If they click yes then they go that page...but how do i set it to where when they click cancel it goes back to "Delete Post" ??? i suck at javascript Code: <html>
<body>
<p><b>Delete Post</b></p>
<script type="text/javascript">
window.onclick=function(){
document.getElementsByTagName("p")[0].innerHTML="<b><a href='#'>Delete</a> || Cancel</b>"
}
</script>
</body>
</html>
Ok I am looking for a simple bmi calculator that calculates body mass index then in a seperate table calculates what a target weight should be based on the goal bmi. no need for making it look fancy, just functionality for now. thanks!
Hello, Just trying to combine php variable with some javascript in a simple if ... else. This is the script code in php: Code: <script type="text/javascript">
var the_rad_val=<?php echo $N_rad_val;?>;
if (the_rad_val.value='n')
{
function removeLink();
}
else
{
function restoreLink();
}
</script>
This is how it looks in the browser (source) Code: <script type="text/javascript">
var the_rad_val=n;
if (the_rad_val.value='n')
{
function removeLink();
}
else
{
function restoreLink();
}
</script>
The 2 functions a Code: function removeLink() {
document.getElementById("mydiv").style.visibility = "hidden";
}
function restoreLink() {
document.getElementById("mydiv").style.visibility = "visible";
} // end function
Guess I did something wrong because the "mydiv" is visible when it shouldn't be Can someone help me out as I am not too good with javascript . Thank you. . Hi. i was given a task to set up a simple website to display a picture send by IPcamera to survey a construction site. I found a sample code to do such thing, but there is one problem. IP camera sends pictures with different filenames. I would need some way to pass a filename of the newest .jpg picture to this script, or a way to simply show the newest .jpg in certain folder without defining a file name? Im not sure if this question should be in javascript forum or do i need php for this. Anyway thanks in advance, if someone is kind enough to give advice. Im having problems with the following code and not sure why it only seems to be a problem when i call for the amount1 variable in the discountedPriceString variable it returns as undefined. but if i just request amount1 in the alert it works fine. Could someone just explain where i have gone wrong Thanks Code: <script>
DISCOUNT_RATE = 0.25;
var price = parseFloat(prompt('Enter the normal price','0.00'));
var discountedPriceString = 'The sale price is $' +amount1 ;
var amount1 = '';
// Apply the discount to the price
discount1 = price * DISCOUNT_RATE;
amount1 = price - discount1
// Add the new price to the string using toFixed()
amount1 = (amount1.toFixed(2));
alert(discountedPriceString);
</script>
|
|||||||