JavaScript - A Table From A Div Contents
Hi,
How I build a table based on a list under a <DIV></DIV> like this? printing: 1 and: 3 typesetting: 2 industry: 2 has: 2 been: 1 s: 1 standard: 1 ever: 1 since: 1 1500s: 1 when: 1 an: 1 unknown: 1 printer: 1 took: 1 a: 2 galley: 1 type: 3 scrambled: 1 Regards Bob Similar TutorialsI am building an e-learning lesson in Lectora that will be deployed to a SCROM compatible learning management system. The lesson is converted into HTML before that happens. My table of contents is around 100 pixels wide but some of the page names are longer than that and do not display fully when viewed in a browser. What I am trying to do is this: The page name for this page is very, very long and I can't see it all. Blah blah Would become The page name for this page is very, very long and I can't see it all. Blah blah I've been led to believe there is javascript that will do that. Good morning! I am Brazilian, sorry if there is a clerical error because I used the Google translator. I'm having trouble recovering in JS content of the columns of a <TABLE>. I did many searches but found nothing that could help me. I appreciate any help. Thank you! Manoel Zancheta Hi all, What I am trying to achieve. I have a php page that has a button on it when clicked shows a div (previously hidden) in the middle of the page this div contains a table with rows. Each row has an image acting as a button and a series of fields that are populated from a database. One of the fields is a quantity box I want to be able to change the value in this box and click on the submit img and have it submit this info (including the altered quantity) back to the php page or to the submit function so that I can then access the values. I have absolutly no idea how to start this. I have very limited javascript experience. the submit looks something like (at the moment) Code: echo '<a href="#" onclick="javascript: document.getElementById(\'stockitemid\').value = '.$stockline->purchaseitemid.'; submitbutton(\'addLineFromStock\')" >'.$purchaseLineImg.'</a>'; and then I was trying to alert in the submit function something like: Code: alert(document.getElementById('stockitemid').value); my div td fields look like Code: <td> <input type="text" size="3" name="sid[<?php echo $stockline->purchaseitemid; ?>]" id="stockitemid<?php echo $count; ?>" value="<?php echo $stockline->purchaseitemid; ?>" /> </td> <td> <input type="text" size="3" name="stockqty[<?php echo $stockline->purchaseitemid; ?>]" id="stockquantity" value="<?php echo $stockline->quantitysupplied; ?>" /> </td> Any help would be greatly appreciated Thanks Kate Hey thanks in advance to anyone who can take a peak at my code and hopefully point me in the correct direction. I have been working on my final project in my javascript class for a bit, and there are a few erros I cant seem to find through firebug or error console. It is due this evening at midnight, so anyone that could help, I really need this assignment for a decent grade. Basically there are two issues so far, one needs to be solved so the other can be as well. First, line 103 - 105 should create a hyperlink to the specified id, but is doesn't return a number. so the link goes no where it is this code: PHP Code: //create hypertext link to the section heading var linkItem = document.createElement("a"); linkItem.innerHTML = n.innerHTML; linkItem.href = "#" + n.id; Next I belive there is a problem with the function expandCollapseDoc(), that might fix itself when the other problem is solved. The document should expand and collapse with the menu. Here is my javascript code: PHP Code: /* New Perspectives on JavaScript, 2nd Edition Tutorial 7 Tutorial Case Author: Mike Cleghorn Date: 2-15-10 Filename: toc.js Global Variables: sections An array contain the HTML elements used as section headings in the historic document Functions List: addEvent(object, evName, fnName, cap) Adds an event hander to object where evName is the name of the event, fnName is the function assigned to the event, and cap indicates whether event handler occurs during the capture phase (true) or bubbling phase (false) makeTOC() Generate a table of contents as a nested list for the contents of the "doc" element within the current Web page. Store the nested list in the "toc" element. levelNum(node) Returns the level number of the object node. If the object node does not represent a section heading, the function returns the value -1. createList() Goes through the child nodes of the "doc" element searching for section headings. When it finds a section heading, a new entry is added to the table of contents expandCollapse() Expands and collapse the content of the table of contents and the historic document expandCollapseDoc() Goes through the child nodes of the "doc" element determining which elements to hide and which elements to display isHidden(object) Returns a Boolean value indicating whether object is hidden (true) or not hidden (false) on the Web page by examining the display style for object and all its parent nodes up to the body element */ function addEvent(object, evName, fnName, cap) { if (object.attachEvent) object.attachEvent("on" + evName, fnName); else if (object.addEventListener) object.addEventListener(evName, fnName, cap); } addEvent(window, "load", makeTOC, false); var sections = new Array("h1","h2","h3","h4","h5","h6"); var sourceDoc; //document on which TOC is based on function makeTOC(){ var TOC = document.getElementById("toc"); TOC.innerHTML = "<h1>Table of Contents</h1>"; var TOCList = document.createElement("ol"); TOC.appendChild(TOCList); sourceDoc = document.getElementById("doc"); //generate list items containing section headings createList(sourceDoc, TOCList); } function levelNum(node) { for (var i = 0; i < sections.length; i++) { if(node.nodeName == sections[i].toUpperCase()) return i; } return -1; //node is not section heading } function createList(object, list) { var prevLevel = 0; //level of the pervious TOC entry var headNum = 0; //running count of headings for (var n = object.firstChild; n != null; n = n.nextSibling) { //loop through all nodes in object var nodeLevel = levelNum(n); if (nodeLevel != -1) { //node represents a section heading //insert id for the section heading if necessary headNum++; //create list item to match var listItem = document.createElement("li"); listItem.id = "TOC" + n.id; //create hypertext link to the section heading var linkItem = document.createElement("a"); linkItem.innerHTML = n.innerHTML; linkItem.href = "#" + n.id; //append the hypertext to the list entry listItem.appendChild(linkItem); if (nodeLevel == prevLevel) { //append the entry to the current list list.appendChild(listItem); } else if (nodeLevel > prevLevel) { //append entry to new nest list var nestedList = document.createElement("ol"); nestedList.appendChild(listItem); list.lastChild.appendChild(nestedList); //add plus/minus box beffore the text var plusMinusBox = document.createElement("span"); plusMinusBox.innerHTML = "--"; addEvent(plusMinusBox, "click", expandCollapse, false) nestedList.parentNode.insertBefore(plusMinusBox, nestedList.previousSibling); list = nestedList; prevLevel = nodeLevel; } else if (nodeLevel < prevLevel) { //append entry to a higher-level list var levelUp = prevLevel - nodeLevel; for (var i = 1; i<= levelUp; i++) {list = list.parentNode.parentNode;} list.appendChild(listItem); prevLevel = nodeLevel; } } } } function expandCollapse(e) { var plusMinusBox = e.target || event.srcElement; var nestedList = plusMinusBox.nextSibling.nextSibling; //Toggle the plus and minus symbol if (plusMinusBox.innerHTML == "--") plusMinusBox.innerHTML = "+" else plusMinusBox.innerHTML = "--"; //Toggle display of nested list if(nestedList.style.display == "none") nestedList.style.display = "" else nestedList.style.display = "none"; //expand/collapse doc to match TOC expandCollapseDoc(); } function expandCollapseDoc() { var displayStatus = ""; for (var n = sourceDoc.firstChild; n != null; n = n.nextSibling) { var nodeLevel = levelNum(n); if (nodeLevel != -1) { //determain display status of TOC entry var TOCentry = document.getElementById("TOC" + n.id); if (isHidden(TOCentry)) displayStatus = "none" else displayStatus = ""; } if (n.nodeType == 1) { //apply to current status for the node n.style.display = displayStatus; } } } function isHidden(object) { for (var n = object; n.nodeName != "BODY"; n = n.parentNode) { if (n.style.display = "none") return true; } return false; } the html was too long, so i uploaded it to my webspace you can check out the almost working version at http://www.kinetic-designs.net/final/usconst.htm Again thank you so much! Any questions just ask! Hi I want to get javascript to show or hide a row in a table depending on whether a value is held by a variable collected in a mulitple part formmail. If only 1 adult fills in their name on the earlier form there is no need to show the row which asks him to agree to membership on a later form page. This is what Ive got so far Code: <form name="frm3" method="post" action="bookingscript.php"> <input type="hidden" name="adult2fn" value="$adult2name" /> <script Language="JavaScript"> var name1 = document.frm3.adult2fn.value; if(name1 =="") {alert("hello");document.getElementById("hidden_row").style.display = 'none';} else {alert("no way");document.getElementById("hidden_row").style.display = '';}; </script> <table border="1"> <tr> <td>Always visible</td> </tr> <tr id="hidden_row"> <td>Hide this</td> </tr> <tr> <td>Always visible</td> </tr> </table> </form> If $adult2name is blank then name1 is blank and the row does not show, else $adult2name contains a name, name1 is not blank and the row shows. I have tried displaying the hidden form field (by changing it to text), and adding my own content, also putting in my own values instead if $adult2name and the Alerts appear as appropriate, but the whole table disappears whilst the alert is on and reappears when the alert is OKed for either condition of the if. Same in Firefox and IE7 & 8 Could someone please tell me the error of my ways. Many thanks Richard I am working on a project where I have 5 XML files that I bring into HTML and display the tables on one browser page. I would like for the row of the tables to change depending on what is in the "status" field. There will only be the following inputs in that column - "IS" which is in stock(green), "OS" which is out of stock(red), and "PO" which is Pre-Order(blue). 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=iso-8859-1" /> <title>ABC Book Store</title> <style type="text/css"> <!-- .style1 { font-size: 10pt; } --> </style> <script> function ld_fiction() { var doc=nb_fiction.XMLDocument; doc.load("fiction.xml"); document.getElementById("head_id").innerHTML="Fiction "; } function Id_nfiction() { var doc_s=nb_nfiction.XMLDocument; doc_s.load("nfiction.xml"); document.getElementByID("head_id_d").innerHTML="NonFiction"; } function ID_selfhelp() { var doc_t=nb_selfhelp.XMLDocument; doc_t.load("selfhelp.xml"); document.getElementByID("head_id_e").innerHTML="SelfHelp"; } function ID_reference() { var doc_u=nb_ref.XMLDocument; doc_u.load("ref.xml"); document.getElementByID("head_id_f").innerHTML="Reference"; } function ID_mags() { var doc_v=nb_mags.XMLDocument; doc_v.load("mags.xml"); document.getElementByID("head_id_g").innerHTML="Mags"; } </script> <XML id="nb_fiction" src="fiction.xml"></XML> <XML id="nb_nfiction" src="nfiction.xml"></XML> <XML id="nb_selfhelp" src="selfhelp.xml"></XML> <XML id="nb_ref" src="ref.xml"></XML> <XML id="nb_mags" src="mags.xml"></XML> <object id="nb_fiction" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" width="0" height="0"></object> <object id="nb_nfiction" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" width="0" height="0"></object> <object id="nb_selfhelp" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" width="0" height="0"></object> <object id="nb_ref" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" width="0" height="0"></object> <object id="nb_mags" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" width="0" height="0"></object> <body> <table width="30%" border="0" align="left" cellspacing="1" font size="10"> <tr bgcolor="#CCCCCC"> <td colspan="2"> <table id="FICTIONTABLE" table width="100%" datasrc="#nb_fiction" font size="1" border="0" align="center" bordercolor="#FFFFFF"> <caption> <span>Fiction </span> </caption> <thead> <tr> <th span class="style1">Stock No.</th></span> <th span class="style1">Title</th></span> <th span class="style1">Author</th></span> <th span class="style1">Status</th></span> <th span class="style1">Price</th></span> <th span class="style1">Publisher</th></span> <th span class="style1">Year of Release</th></span> </tr> </thead> <tbody> <tr> <td><span class="style1" datafld="stock"></td></span> <td><span class="style1" datafld="title"></td></span> <td><span class="style1" datafld="author"></td></td></span> <td><span class="style1" datafld="status"></td></span> <td><span class="style1" datafld="price"></td></span> <td><span class="style1" datafld="publisher"></td></span> <td><span class="style1" datafld="year"></td></span> </tr> </tbody> </table> </td> </tr> </body> </html> I only included the first part of the html code along with the first table, but there is a table for each xml file. You can also probably tell how the XML files are structured by looking at the way they are displayed in the tables. I think what I want to do can be accomplished with JavaScript, but I have no idea how to do it and it's the only thing I have left before I'm done. Any help would really be appreciated and thanks in advance. Hi I need to produce some code to get the contents of the particular TD I am running a function in. I have the following code which works fine up the point of wanting to delete a row. In order to make it work again I have to go into the code and adjust all the numbers in the functions (not sure that's the correct terminology) Code: <head> <script language='javascript'> exchRate = '1.12'; function gettheUKP(which) { // This is the line I think I need to change var x = document.getElementsByTagName("span")[which].innerHTML; var s = Math.round(x / exchRate); document.write('(£' + s + ')') } </script> </head> <body> <table cellspacing="0" cellpadding="0" class="charges"> <tr> <td><strong><span>368</span>€</strong> <script type="text/javascript">gettheUKP(0);</script></td> </tr> <tr> <td><strong><span>471</span>€</strong> <script type="text/javascript">gettheUKP(1);</script></td> </tr> <tr> <td><strong><span>598</span>€</strong> <script type="text/javascript">gettheUKP(2);</script></td> </tr> <tr> <td><strong><span>720</span>€</strong> <script type="text/javascript">gettheUKP(3);</script></td> </tr> <tr> <td><strong><span>998</span>€</strong> <script type="text/javascript">gettheUKP(4);</script></td> </tr> </table> </body> So in essence I think I need to change the highlighted line to say "get the contents on the span within this TD". Is this possible? Thanks I'm working on stripping specific HTML tags in order to do a selected string comparison. Stripping the tag, done. Re-calibrating the selection start and end points, done. Capturing the tags for re-insertion, done. Getting the start point of the tag, done. What I am having trouble with is finding the content between the tag so that I can put it back after altering the selected text. <span class="something">find this content!</span> Any ideas are more than welcome! Thanks, Hey. I have been pulling out my hair trying to do this. I am printing out the contents of a DIV tag but it does not print the css with it. Just the basic text For example: .testDiv { border: 1px solid #0F0; margin-right: 300px; text-decoration: underline; font-weight: bold; } The print does not change the text according to the css. Why is this? Thanks in advance for any help. Marc Hi.. Im currently working on my project and I have a big problem with changing the layout of tabs. Basically, when I launch my GUI, it will display "No Data Available" in my view tab. In my Add tab, I have the admin panel whereby the user enters the data to be stored and display. the problem now lies when displaying. It is a juke ringtone gallery whereby when there are data being stored in the database, it will display the following in a Gridlayout; I applied the ChangeListener to the JTabbedPane which is tp. I added tabs using tp.add. I declared this in my ChangeListener: if(tp.getSelectedIndex() == 0) createViewPanel(); else if(tp.getSelectedIndex()==1) createAddPanel(); where createViewPanel() is for the View tab and createAddPanel() is for the Add tab. i also called the respective tabs using frameView = (JPanel)tp.getComponent(0); to get the layout for View tab and frameAdd = (JPanel)tp.getComponent(1); to get the layout for the Add tab. What methods need I use so that I can display the different data in the specific GridLayout to be displayed in the View tab or what other ways can I do it? Hi all! First post here (obviously)... I seem to have an issue with getting javascript to recognize the value of a variable. Code: for(var m=1; m<=86; m++) { var currgroup = "group" + m; alert(currgroup); if(currgroup.Contains(point)) { var userNG = m; var foundNG = true } else { var foundNG = false; } } If you see where I alert the value of currgroup, it displays "Group1" as it should... so the next line should be Group1.Contains(point); but it errors out as "currgroup.Contains(point) is not a function". If however I hard code it with Group1.Contains(point) it works fine. Is there a way to tell JS explicitly that I want it to use the variable contents instead of the name that I'm missing? Thanks a bunch for any and all help, Matt Hey all, Hopefully I can explain this so it makes sense. I have a div with some buttons in it going horizontally. Kind of like a top menu of sorts. The div is of a fixed width and these buttons are spaced evenly across it. What I would like to do (and the hardest part is finding the right words for all this) is add more buttons. But because of the limited space I want to leave the current buttons as they are but provide a way, either by hovering over the left or right end of the div ideally or clicking << or >> types of links to 'cycle' through the buttons. So end result would be the user would see lets say 5 buttons upon load but be able to access the other buttons by cycling/scrolling left or right. It would be great if the buttons would loop around so they would never reach the 'end' going left or right. Does this make sense? I haven't been able to find anything close to this but that could possibly be because I am not sure what to call it. Thanks for any help! I'm sorry this is simple, but: Code: function printInput(f){ var ifr = window.frames['printFrame']; var v1=readCookie('lesson'); if (v1==1){v2='WORKNOTEPAD1'} if (v1==2){v2='WORKNOTEPAD2'} if (ifr){ ifr.document.getElementById('content').innerHTML=f. v2 .value.replace(/\n/g,'<br />'); ifr.focus(); ifr.print(); } else { something } } In this line: Code: ifr.document.getElementById('content').innerHTML=f. v2 .value.replace(/\n/g,'<br />'); How can I make it stop erroring and act as if the "v2" were, say, "WORKNOTEPAD2"? If the line contains the string it all works fine. It must be so simple... Hi guys I was wondering if its possible to add contents within a div to a javascript array. Something like this: Code: <script type="text/javascript"> function returnArray() { var divContent = document.getElementById('images'); var matchImage = divContent.match(/<img/); /* add images into array somehow */ alert('This is ' +ImageArray[1]); } </script> <div id="images"> <img src="image1.jpg" alt="image" /> <img src="image2.jpg" alt="image" /> <img src="image3.jpg" alt="image" /> </div> Thanks for any info. Hi friends, I am very well aware that ctrl-a and ctrl-c will not copy images (only the text) in ms-word/openoffice writer. so, the better option is to convert the doc into html and place the contents of the html in Tinymce editor. (This is what i want to accomplish). I know this thing can be done in javascript but i dont know how. Please tell me or any guidance to copy the contents of word(text and images at one go) into a tinymce editor. Any help would be highly appreciated. Thanks, aras Right. I'm trying to create a little game (If you can call it that) where every time the user hovers over a <div> which contains a button, said <div> moves to a random point on the page. I've tried a way of moving the item and Googled extensively but have not yet come up with a way of doing it. This is my current code: Code: if(document.getElementById) { var carrier = document.getElementById(btnarea); carrier.style.top = randomHeight + "px"; } if(document.getElementById) { var carrier = document.getElementById(btnarea); carrier.style.left = randomWidth + "px"; } Which does not work. I hover over the <div> and the button, yet nothing happens. I can click the button, which seems to be the only thing working right now. I have a feeling the issue could be with another part of the code, but I wanted to see what you people thought first. Any ideas? You can see it working (Or not) at http://zeroerror.co.uk/public/clickme.php. Thanks in advance. @ http://jsfiddle.net/defencedog/cu5VJ/ I am having problem in understanding the operation of js with regards to this line Code: $('.' + x[i].id).text(x[i].innerHTML); or Code: $('.' + x[i].id).html(x[i].innerHTML); I want to understand why I ain't able to produce desired results while using this instead Code: $('.' + x[i].id).innerHTML(x[i].innerHTML); I use a PHP page to set elements of a text file on our web server and I want to create a javascript function to intermitently check the contents of that file and if an element in that file matches a criteria I want to act on it... So, I do this <script type="text/javascript"> t = setInterval("CHECKFILE()",5000); </script> This calls the CHECKFILE function every 5000ms <script type="text/javascript"> function CHECKFILE(){ } </script> How, in the CHECKFILE function can I read from a file called FILE.txt for example?? In PHP I can use $myFile = "FILE.txt"; $theData = file($myFile); And this gives me an array, with each element containing one line from the file Can I do similar in Javascript? Or can I add PHP into the JS to do it for me? Thanks I need to make a javascript that when I am at a page within a game I play and click the javascript, it will get the value of a table cell, separate them to x and y variables and then put the values into a link that opens. The open link is of a php script that uses $_GET for the values of the variables to query my database. I am terrible at javascript and have been trying to do this for 2 days now with no success. So I hope I can find help here. Here's the scripts so it is easier to understand: This is part of the html page that is from the game. I need to have the javascript get 432|608 and assign x=432 and y=608 in this case, although those number change, the place in the table that that they are displayed do not change. <td>Coordinates:</td> <td><a href="game.php?village=19392&s=map&x=432&y=608">432|608</a></td> <html> <head> <title></title> <meta http-equiv="Content-Language" content="de"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Page-Enter" content="revealTrans(Duration=0.1,Transition=4)"> <link rel="stylesheet" type="text/css" href="kingsage.css"> <link rel="shortcut icon" href="favicon.ico" type="image/ico"> <script src="js/kingsage.js?hash=1e4c479f8ba66202f3b1bfb74414eef4" type="text/javascript"></script> <script src="js/mootools-1.2-core-nc.js?hash=1e4c479f8ba66202f3b1bfb74414eef4" type="text/javascript"></script> <script src="js/mootools-1.2-more.js?hash=1e4c479f8ba66202f3b1bfb74414eef4" type="text/javascript"></script> <script src="js/map_src.js?hash=1e4c479f8ba66202f3b1bfb74414eef4" type="text/javascript"></script> </head> <body> <script type="text/javascript"> //<![CDATA[ lang = new Array(); lang['DAY'] = 'Day'; lang['DAYS'] = 'Days'; //]]> </script> <div style="background: rgb(0, 0, 0) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" align="center"> <table style="border-collapse: collapse; height: 100%;" width="100%" cellpadding="0" cellspacing="0"> <tbody> <tr valign="top"> <td width="50%" align="right"> <br> </td> <td style="width: 840px;"> <table style="border-collapse: collapse; width: 840px; height: 100%;" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="lay_content" valign="top"><a name="head2"></a> <div class="contentpane"> <table class="borderlist" style="width: 420px;"> <tbody> <tr> <th colspan="2">Abandoned settlement</th> </tr> <tr> <td>Coordinates:</td> <td><a href="game.php?village=19392&s=map&x=432&y=608">432|608</a></td> </tr> <tr> <td>Points:</td> <td>390</td> </tr> <tr> <td>Player:</td> <td><br> </td> </tr> <tr> <td>Alliance:</td> <td><a href="game.php?village=19392&s=info_ally&id="></a><br> </td> </tr> </tbody> </table> <br> </div> </td> </tr> </tbody> </table> </td> <td width="50%" align="left"> <br> </td> </tr> </tbody> </table> </div> <div id="settlement" style="display: none;"></div> <script type="text/javascript"> //<![CDATA[ startCounter(); //]]> </script> </body> </html> Here's the php script that will process the x and y Code: <?php putenv("TZ=Europe/Berlin"); session_start(); include("includes/config.php"); $username = $_GET['username']; $pass = $_GET['pass']; $x = $_GET['x']; $y = $_GET['y']; $now = time(); //confirm user can make claim global $conn; $q = "SELECT password FROM users WHERE username = '$username' AND active = 1"; $result = mysql_query($q,$conn); if(!$result || (mysql_numrows($result) < 1)) { $data = "Your identity can not be authenticated"; } else { $dbarray = mysql_fetch_array($result); if($pass == $dbarray['password']) { $continue = true; } else { $data = "Your password can not be authenticated"; } } //if can claim then check the village if($continue) { $q = "SELECT * FROM `claims` WHERE x = '$x' AND y = '$y' AND state = 1"; $village = mysql_query($q, $conn); $result = mysql_fetch_assoc($village); if(!$result) { $can_claim = true; } elseif($result) { if($result['username'] == $username) { $data = "You already have an active claim on ($x|$y)"; } elseif($result['username'] <> $username) { $claimer = $result['username']; $data = "$claimer already has an active claim on ($x|$y)"; } } if($can_claim == true) { global $conn; $claim_made = time(); $claim_expires = $claim_made + 432000; $state = 1; $q = "INSERT INTO `claims` (x, y, username, claim_made, claim_expires, state) VALUES ('$x', '$y', '$username', '$claim_made', '$claim_expires', '$state')"; $add_claim = mysql_query($q, $conn); if($add_claim) { $data = "Success! You claimed ($x|$y)"; } else { $data = "Error: Your claim on ($x|$y) did not complete."; } } echo "<SCRIPT>alert(\"$data\");</SCRIPT>"; } ?> The javascript should link to this php script and send the variables like this: 'http://twv-kingsage.tw-family.us/auto_add_claim.php?username=username&pass=md5_password&x="+x+"&y="+y' Can someone tell me how to extract the values for x and y from the page and get them to the link? Thanks for the help, it is much appreciated. See http://forums.mathannotated.com/gui-...-layout-4.html. When you click the "More" tab, the browser forgets the active tab styling and current tab contents; I don't want these to change - all I want to change on the click "More" tab action is the navigation tab. But my browser should maintain the styling for the last active tab and continue to display its corresponding tab contents. Yet it forgets these details when the user clicks "More". In particular, when user navigates back and forth between the two tab sets, whatever was the last styled active tab remains styled as such. Browser should remember this. Code: $(document).ready(function() { //When page loads... $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active ID content return false; }); //Your additions //When page loads... $("#button_set_2").hide(); //Hide 2nd button set; added by YOU //On Click Event: hide 1st button set, show 2nd $("li#more_forward").click(function() { $("#button_set_1").hide(); $("div#button_set_2").show(); }) //On Click Event: hide 2nd button set, show 1st again $("li#more_backward").click(function() { $("#button_set_2").hide(); $("div#button_set_1").show(); }) }); |