|
JavaScript - Using Ajax To Build A Menu Dynamically - Problems
Hello,
I'm very new to javascript and am probably dabbling in stuff that I shouldn't if I am new to it. Nonetheless I've exhausted my resources and am seeking some answers from people who know what they're talking about. I've got this XML file: Quote: <?xml version="1.0" encoding="utf-8"?> <Menu> <Section> <Title>Product Information</Title> <Topic url="howto.html">How to use This Product</Topic> <Topic url="product.html">Product Overview</Topic> <Topic url="sysreq.html">System Requirements</Topic> </Section> ..... </Menu> There's more data than that but for brevity that's the way it's constructed and repeats with several Titles and Topics. Here's the JS i'm using to build a dynamic menu. The goal is to pick up the data and build an Accordion menu out of it: Quote: if (window.XMLHttpRequest) { xhttp=new XMLHttpRequest(); //create ajax var } else { xhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE } xhttp.open("GET","menu.xml",false); xhttp.send(""); xmlDoc=xhttp.responseXML; document.write("<div class='acc'>"); var x=xmlDoc.getElementsByTagName("Section"); for (i=0;i<x.length;i++) { document.write("<dt>"); document.write("<a href='#'>" + x[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue + "</a></dt>"); document.write("<dd><ul>"); var y=xmlDoc.getElementsByTagName("Topic")[0].childNodes[0]; for (foo=0;foo<x.length;foo++) { document.write("<li class='acc_item'><a href='#'>" + x[i].getElementsByTagName("Topic")[0].childNodes[0].nodeValue + "</a></li>"); } document.write("</ul></dd>"); } document.write("</div>"); It creates the menu correctly... to a point. It has the correct styling, the accordion works perfectly, it has the correct Titles in the correct places, but when I "expand" one of the Titles it lists the first topic only, and lists it 5 times (the same amount of Titles I have). It then repeats this for every section. Example: Product Information How to Use This Product How to Use This Product How to Use This Product How to Use This Product How to Use This Product I'm not very confident in the syntax, or what it is exactly doing. Any guidance would be very appreciated. Please keep in mind I'm very new. Thanks! Similar TutorialsI have a table that has a series of dropdowns. Each dropdown is build with JavaScript based on the values of the prior dropdowns. The data for each of these dropdowns comes from a series of XML files which are loaded into a series of arrays on loading. This is all working. What I need (but can't figure out) is how to dynamically build a sub-table within a specific cell of the parent table based on the values of the prior dropdowns and if the prior dropdowns are changed, how do delete (not just hide) the dynamic table and rebuild it based on the values of the new dropdowns. I am having trouble writing this javascript for my work, normally I would do this in ASP or PHP, but the environment I am working with will only allow javascript for dynamic function. The form has two different select boxes and based on your options selected for select box #1 and select box #2, the hidden input field "redirect" (which is currently empty) would then populate dynamically with the URL associated with that combination mentioned below. The hidden redirect input field (now containing dyanmically generated data) would then pass the new value via HTTP_POST to .net script that will handle the redirect processing step fed to it. Here are the mappings: If selections = Elementary & Vocabulary = http://www.widget.com/content/elem-vocab If selections = Elementary & Writing = http://www.widget.com/content/elem-writing If selections = Elementary & ELD = http://www.widget.com/content/elem-eld If selections = Middle School & Vocabulary = http://www.widget.com/content/midscl-vocab If selections = Middle School & Writing = http://www.widget.com/content/midscl-writing If selections = Middle School & ELD = http://www.widget.com/content/midscl-eld If selections = High School & Vocabulary = http://www.widget.com/content/hiscl-vocab If selections = High School & Writing = http://www.widget.com/content/hiscl-writing If selections = High School & ELD = http://www.widget.com/content/hiscl-eld Here's a snippet of a different method that I tried, but it did not work. I think the above mentioned method would probably be best. Code: <script language="javascript" type="text/javascript">
<!--
function build() {
document.fillgaps.redirect.value = "http://www.widget.com/content/" + document.fillgaps.grade.value + "-" + document.fillgaps.solution.value ;
//print example: http://www.widget.com/content/ELM-VOC
return true;
}
-->
</script>
<form name="fillgaps" action="http://www.widget.com/submit.aspx" method="post" onSubmit="return build();">
<input type="hidden" name="redirect" value="">
<table class="elqFormTable" border="0" cellspacing="2" cellpadding="2">
<tr>
<td valign="top">Grade:</td>
<td>
<select name="grade">
<option value="ELM">Elementary</option>
<option value="MID">Middle School</option>
<option value="HIG">High School</option>
</select>
</td>
</tr>
<tr >
<td valign="top">Solution:</td>
<td>
<select name="solution">
<option value="VOC">Vocabulary</option>
<option value="WRI">Writing</option>
<option value="ELD">ELD</option>
</select>
<!--truncated code -->
Can somebody help me to find the problem with the below given code, its not working. $(document).on('keyup', ".add_commi", function() { typingTimer = setTimeout(doneTyping, doneTypingInterval); var pro = $(this).attr('id'); var selectvalue = $(this).html(); var id = pro.slice(-2); var amount = $('#amount'+id).html(); var rate = $('#v_rate'+id).html(); //alert('working'); var data = 'cur_amount='+cur_amount +'&cur_rate='+cur_rate+'&commision='+selectvalue; $.ajax({ type: "POST", dataType: "json", url: "http://localhost/agent/buy-currency-calculations/", data: data, success: function(output){ var cus_rate = output.cus_rate; var total = output.total; var tot_commision = output.commision; alert(cus_rate, total, tot_commision); $('#curr_rate'+id).html(cus_rate); $('#tot'+id).html(total); $('#tot_commi'+id).html(tot_commision); } }); return false; }); Reply With Quote 01-09-2015, 02:53 PM #2 Dormilich View Profile View Forum Posts Senior Coder Join Date Jan 2010 Location Behind the Wall Posts 3,532 Thanks 13 Thanked 372 Times in 368 Posts cur_amount, cur_rate and selectvalue are supposedly primitive values (like numbers) but you fetch them as HTML code which the interpreting server script certainly can’t process. (if it should be indeed primitives, you should rather consider using form elements for that). despite that jQuery has a method to fetch values off a form, which might be easier to implement, but that depends on the used HTML code. additionally, in your browser’s dev tools you can check the network pane for what values are sent/received in the AJAX call. I have a form for user to enter an "id" and after clicking the Get Results button, it will retrieve information from database and alert on the screen. By using the scripts as shown, I am able to get the results from IE8 but I always get a "</body>" tag at the starting point. Also, when using firefox, it shows me nothing. As this is the first time I am trying out AJAX, can any experts out there tell me what have I done wrong?? Thanks in advance~ HTML code Code: <form name="user" method="post"> Enter your id : <input name="id" type="text" maxlength="30" size=30" value=""> <input name="get_result" type="submit" size="20" value="Get Results" OnClick="submitData()"> </form> My javascript Code: function submitData(){
var id = user.id.value;
var ajaxRequest;
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}
catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Your browser does not support AJAX!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var result = ajaxRequest.responseText;
alert(result);
}
}
var queryString = "?id=" + id;
ajaxRequest.open("GET", "check.php" + queryString, true);
ajaxRequest.send(null);
}
My php file - check.php Code: <?PHP
include "../lib/opendata.php"; //<--just the database connection thingy
$id = $_GET['id'];
$result = mysql_query("SELECT * FROM user WHERE id = '$id'");
$db=mysql_fetch_assoc($result);
$name=$db['name'];
echo $name;
}
?>
Hi there, I am trying to make a view that stacks images on top of one another. As the user uses mouseup or mousedown (+ LMB click) the user can scroll through the images. I am trying to use Ajax to load the new image when the user mousesup. RIght now nothing happens on mouseup. Can someone tell me what I am doing wrong please? thank you. FYI: no errors on Firebug, hence I am posting here. Code: $("#filmviewer").mouseup(function(){
alert("t");
});
html Code: <div id="filmviewer" style="width:400px;"> <img src="pic_1.jpg" /> </div> The problem is when I click and mouseup over the image the alert("t") does not fire. what am I doing wrong? My problem has to do with having more then two drop down menus and disabling selected items. In this example whenever anyone selects an option from either of the drop-down menus the opposing drop-down menu greys out the selection: Code: <script type="text/javascript">
function updateSelect(changedSelect, selectId) {
var otherSelect = document.getElementById(selectId);
for (var i = 0; i < otherSelect.options.length; ++i) {
otherSelect.options[i].disabled = false;
}
if (changedSelect.selectedIndex == 0) {
return;
}
otherSelect.options[changedSelect.selectedIndex].disabled = true;
}
</script>
Code: <select id="subject1" name="indication_subject[]" onchange="updateSelect(this,'subject2');" > <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> </select> <select id="subject2" name="indication_subject[]" onchange="updateSelect(this,'subject1');" > <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> </select> The above code works perfect. My problem is extending this to even more drop-down menus. I'm not a javascript guy but my logic was thinking something like this: Code: ARRAY = "subject1, subject2, subject3"; <select id="subject1" name="indication_subject[]" onchange="updateSelect(this,'ARRAY');" > ...either an array to include multiple drop-down menus or what about something like this? Code: <select id="subject2" name="indication_subject[]" onchange="updateSelect(this,'subject1, subject2, subject3, subject4');" > Obviously I know my code solutions don't work, however, I'm hoping they can provide someone with clarity with respect to what I'm trying to accomplish. I sincerely would appreciate anyone's help on this. I am wondering if I can get the value of a drop down box that was created using ajax. I have a div tag holding the spot on item.php and when the user make a selection it calls my getitem.php which returns a drop down with the populated items. PHP Code: <option value="0"></option> <? while($row = mysql_fetch_array($result)) { ?> <option value="<? echo $row['itemnum']?>" > <? echo $row['itemname']?> </option> <? } echo "</select>"; mysql_close($con); ?> The drop down list is then inserted here on the item.php PHP Code: <!-- Dynamic item list based off catagory--> <div id="txtItem"> </div> So I have no tag handler since they were all created back on the getitem.php page. What is the best way to do this? I would love the have the drop down tags on item.php but how do I dynamically populate the list then? Any help would be great. Thanks Hi, I'm new to these forums so if anything is out of the ordinary let me know for next time or so I can correct it - please. I am also not very good with javascript but I am trying to learn the whole concept. Anyways, I am supposed to create pull down menus when I open this page: Code: <?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>
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Tutorial Case
The 221B Blog
Author:
Date:
Filename: holmes.htm
Supporting files: menus.js, logo.jpg, sh.jpg, shblog.css
-->
<title>The 221B Blog</title>
<link href="shblog.css" rel="stylesheet" type="text/css" />
<script type="text/javascirpt" src="menus.js"></script>
</head>
<body>
<div id="page">
<form id="searchForm" action="">
<div id="logo">
<img src="logo.jpg" alt="The 221B Blog" />
<input id="searchTxt" type="text" size="20" />
<label for="searchTxt">Search</label>
</div>
<div id="menu1" class="menu">
<a href="#">The Adventures of Sherlock Holmes</a>
</div>
<div id="menu1List" class="menuList">
<ul>
<li><a href="#">A Scandal in Bohemia</a></li>
<li><a href="#">The Red-headed League</a></li>
<li><a href="#">A Case of Identity</a></li>
<li><a href="#">The Boscombe Valley Mystery</a></li>
<li><a href="#">The Five Orange Pips</a></li>
<li><a href="#">The Man with the Twisted Lip</a></li>
<li><a href="#">The Blue Carbuncle</a></li>
<li><a href="#">The Speckled Band</a></li>
<li><a href="#">The Engineer's Thumb</a></li>
<li><a href="#">The Noble Bachelor</a></li>
<li><a href="#">The Beryl Coronet</a></li>
<li><a href="#">The Copper Beeches</a></li>
</ul>
</div>
<div id="menu2" class="menu">
<a href="#">The Memoirs of Sherlock Holmes</a>
</div>
<div id="menu2List" class="menuList">
<ul>
<li><a href="#">Silver Blaze</a></li>
<li><a href="#">The Yellow Face</a></li>
<li><a href="#">The Stock-broker's Clerk</a></li>
<li><a href="#">The "Gloria Scott"</a></li>
<li><a href="#">The Musgrave Ritual</a></li>
<li><a href="#">The Reigate Puzzle</a></li>
<li><a href="#">The Crooked Man</a></li>
<li><a href="#">The Resident Patient</a></li>
<li><a href="#">The Greek Interpreter</a></li>
<li><a href="#">The Naval Treaty</a></li>
<li><a href="#">The Final Problem</a></li>
</ul>
</div>
<div id="menu3" class="menu">
<a href="#">The Return of Sherlock Holmes</a>
</div>
<div id="menu3List" class="menuList">
<ul>
<li><a href="#">The Empty House</a></li>
<li><a href="#">The Norwood Builder</a></li>
<li><a href="#">The Dancing Men</a></li>
<li><a href="#">The Solitary Cyclist</a></li>
<li><a href="#">The Priory School</a></li>
<li><a href="#">Black Peter</a></li>
<li><a href="#">Charles Augustus Milverton</a></li>
<li><a href="#">The Six Napoleons</a></li>
<li><a href="#">The Three Students</a></li>
<li><a href="#">The Golden Pince-Nez</a></li>
<li><a href="#">The Missing Three-Quarter</a></li>
<li><a href="#">The Abbey Grange</a></li>
<li><a href="#">The Second Stain</a></li>
</ul>
</div>
<div id="menu4" class="menu">
<a href="#">The Case Book of Sherlock Holmes</a>
</div>
<div id="menu4List" class="menuList">
<ul>
<li><a href="#">The Illustrious Client</a></li>
<li><a href="#">The Blanched Soldier</a></li>
<li><a href="#">The Mazarin Stone</a></li>
<li><a href="#">The Three Gables</a></li>
<li><a href="#">The Sussex Vampire</a></li>
<li><a href="#">The Three Garridebs</a></li>
<li><a href="#">Thor Bridge</a></li>
<li><a href="#">The Creeping Man</a></li>
<li><a href="#">The Lion's Mane</a></li>
<li><a href="#">The Veiled Lodger</a></li>
<li><a href="#">Shoscombe Old Place</a></li>
<li><a href="#">The Retired Colourman</a></li>
</ul>
</div>
<div id="menu5" class="menu">
<a href="#">His Last Bow</a>
</div>
<div id="menu5List" class="menuList">
<ul>
<li><a href="#">Wisteria Lodge</a></li>
<li><a href="#">The Cardboard Box</a></li>
<li><a href="#">The Red Circle</a></li>
<li><a href="#">The Bruce-Partington Plans</a></li>
<li><a href="#">The Dying Detective</a></li>
<li><a href="#">The Disappearance of Lady Frances Carfax</a></li>
<li><a href="#">The Devil's Foot</a></li>
<li><a href="#">His Last Bow</a></li>
</ul>
</div>
<div id="menu6" class="menu">
<a href="#">The Novels</a>
</div>
<div id="menu6List" class="menuList">
<ul>
<li><a href="#">A Study in Scarlet</a></li>
<li><a href="#">The Sign of the Four</a></li>
<li><a href="#">The Hound of the Baskervilles</a></li>
<li><a href="#">The Valley of Fear</a></li>
</ul>
</div>
<ul id="linkList">
<li><a href="#">Home</a></li>
<li class="newGroup"><a href="#">Essays</a></li>
<li><a href="#">Fan Fiction</a></li>
<li><a href="#">Art</a></li>
<li class="newGroup"><a href="#">Discussion Forum</a></li>
<li class="newGroup"><a href="#">Holmes on the Web</a></li>
<li><a href="#">The 221B Museum</a></li>
<li><a href="#">Jeremy Brett Page</a></li>
<li><a href="#">Basil Rathbone Page</a></li>
<li><a href="#">The Baker Street Irregulars</a></li>
<li class="newGroup"><a href="#">Holmes Radio Podcast</a></li>
<li><a href="#">Holmes Audiobooks</a></li>
<li class="newGroup"><a href="#">About Arthur Conan Doyle</a></li>
<li><a href="#">Victorian England</a></li>
<li><a href="#">Strand Magazine</a></li>
<li><a href="#">The Holmes Atlas</a></li>
<li class="newGroup"><a href="#">Other Fictional Detectives</a></li>
<li class="newGroup"><a href="#">About the WebMaster</a></li>
<li><a href="#">Issues Archive</a></li>
</ul>
<div id="main">
<img src="sh.jpg" alt="" style="float: right; margin: 0px 0px 5px 5px" />
<p id="firstp">
The most famous of fictional detectives, Sherlock Holmes
first appeared in print in 1887, in stories written by the Scottish author
and physician, Sir Arthur Conan Doyle. Holmes is famous for his use
of deductive reasoning to solve difficult and complex cases. Almost
all Holmes stories are told in the first-person narration of
Dr. John Watson, Holmes' closest friend and confidant.</p>
<p>Doyle wrote four novels and 56 short stories in the Sherlock Holmes
canon. The first Holmes tale was the novel, <i>A Study in Scarlet</i>,
which chronicled the meeting of Holmes and Watson and covered their
first case together. As Doyle wrote additional tales, the Sherlock Holmes
stories grew in popularity, becoming a regular feature of <i>The
Strand Magazine</i>. Desiring to explore other literary pursuits, Doyle
grew tired of the detective and killed off Holmes in the short story
<i>The Final Problem</i>. However, public acclaim and a desire for more
Holmes stories eventually persuaded Doyle to resurrect the popular
detective, bringing him back in <i>The Adventure of the Empty House</i>.</p>
<p>Doyle's final Holmes story, <i>His Last Bow</i>, appeared in 1914, but
that did not end the public's fascination with Holmes and Watson. Basil
Rathbone brought the character to the silver screen in 14 movies
loosely based on Doyle's original stories. In more recent years,
Jeremy Brett played Holmes to great critical acclaim over four seasons of
the BBC series, <i>The Adventures of Sherlock Holmes</i>. In all, Holmes
has been played by over 70 actors appearing in over 200 films.</p>
<p>To enjoy online versions of the Sherlock Holmes short stories and novels,
select entries from the menu at the top of this page.</p>
</div>
</form>
</div>
</body>
</html>
Here is my javascript file: Code: /*
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Tutorial Case
Author:
Date:
Filename: menus.js
-------------------------------------------------------------
Function List:
init()
Initializes the contents of the holmes.htm Web page, setting
the display property of the pull-down menus and the initial
values of the global variables
moveMenu()
Moves the active menu from one pull-down menu to another
changeMenu()
Change the active menu displayed in the document
closeOldMenu()
Closes the active menu
rollDown()
Applies a roll-down effect the opening of the active menu
-------------------------------------------------------------
Global Variable List:
activeMenu
An object variable pointing to the currently active and open menu
timeID
A variable containing the id of a timed command using the setInterval method
clipHgt
The current height of the active menu as it is being rolled down
-------------------------------------------------------------
*/
window.onload = init;
var activeMenu = null;
var clipHgt = 0;
var timeID;
function init() {
var menus = new Array();
var allElems = document.getElementsByTagName("*");
for (var i = 0; i < allElems.length; i++) {
if (allElems[i].className == "menu") menus.push(allElems[i]);
}
for (var i = 0; i < menus.length; i++) {
menus[i].onclick = changeMenu;
menus[i].onmouseover = moveMenu;
}
document.getElementById("logo").onclick = closeOldMenu;
document.getElementById("linkList").onclick = closeOldMenu;
document.getElementById("main").onclick = closeOldMenu;
}
function moveMenu() {
// this function moves the pull-down menu from one title to another
if (activeMenu) {
closeOldMenu();
menuID = this.id + "List";
activeMenu = document.getElementById(menuID);
activeMenu.style.clip = "rect(0px, 150px, 0px, 0px)";
activeMenu.style.display = "block";
timeID = setInterval("rollDown()", 1);
}
}
function changeMenu() {
// this function changes the pull-down menu displayed in the document
closeOldMenu();
menuID = this.id + "List";
activeMenu = document.getElementById(menuID);
activeMenu.style.clip = "rect(0px, 150px, 0px, 0px)";
activeMenu.style.display = "block";
timeID = setInterval("rollDown()", 1);
}
function closeOldMenu() {
if (activeMenu) {
clearInterval(timeID);
activeMenu.style.display = "none";
activeMenu = null;
}
}
function rollDown() {
clipHgt = clipHgt + 10;
if (clipHgt < 400) {
activeMenu.style.clip = "rect(0px, 150px," + clipHgt + "px, 0px)";
} else {
clearInterval(timeID);
clipHgt = 0;
}
}
The book's tutorial instructed me to copy down every thing I did yet it doesn't work at all! I've tried on Safari, IE, and Firefox. Can someone tell me what I'm doing wrong? EDIT: Here is the CSS file. Code:
/*
New Perspectives on JavaScript, 2nd Edition
Tutorial 4
Tutorial Case
Author:
Date:
Filename: shblog.css
This file contains styles used in the holmes.htm file.
*/
* {padding: 0px; margin: 0px; line-height: 1.2}
body {background-color: white;
font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
font-size: 12px}
#page {position: absolute; top: 0px; left: 10px; width: 850px}
a {text-decoration: none; color: black}
p {margin: 15px 0px}
ul {list-style-type: none}
#logo {position: absolute: top: 0px; left: 0px;
width: 100%; height: 108px; background-color: white; z-index: 3}
#logo img {float: left}
#logo label {float: right; margin-top: 15px; margin-right: 10px}
#logo input {float: right; margin-top: 15px; background-color: ivory}
.menu {position:absolute; top: 110px; width: 140px; height: 35px; z-index: 3;
border: 1px solid black; color: black; background-color: rgb(212, 212, 212);
text-align: center}
.menu a {display: block; width: 140px; height: 35px; color: black}
.menu a:hover {background-color: rgb(151, 151, 151); color: white}
#menu1, #menu1List {left: 0px}
#menu2, #menu2List {left: 141px}
#menu3, #menu3List {left: 282px}
#menu4, #menu4List {left: 423px}
#menu5, #menu5List {left: 564px}
#menu6, #menu6List {left: 705px}
.menuList {position: absolute; top: 146px; width: 140px; z-index: 2;
background-color: ivory; border: 1px solid black; display: none}
.menuList li {margin: 5px}
.menuList a {display: block; width: 132px}
.menuList a:hover {background-color: rgb(151, 151, 151); color: white}
#linkList {position: absolute; top: 160px; left: 5px; width: 175px;
border-right: 1px solid black}
#linkList li {line-height: 1.5}
#linkList .newGroup {margin-top: 15px}
#linkList a:hover {text-decoration: underline overline;
color: red; background-color: ivory}
#main {position: absolute; top: 160px; left: 190px; z-index: 1}
#firstp {margin-top: 0px}
#firstp:first-line {font-variant: small-caps; font-weight: bold}
#firstp:first-letter {float: left; font-size: 400%; font-family: 'Times New Roman', serif;
line-height: 0.8; margin: 0px 5px 0px 0px}
I need a jump menu, that when an item is selected the next jump menu pops up with more selections to be made is this possible? Hi, I'm just learning javascript. I need one script for the following data. I'm having three headings. heading 1 heading 2 heading 3 on clicking heading 1 it opens subheading 1 subheading 2 on clicking subheading 1 it opens subsubheading 1 subsubheading 2 My problem is when I open heading 1 it opens subheading 1 and 2, when I open heading 2, contents of heading 1 must disappear(switch contents) and only contents of heading 2 must appear. When I use style display: none, contents are moving on opening others. I could use some help. I'm technically a CSS/Javascript newbie, so I have no idea where to start. I've been researching the past few hours, but I'm completely lost. If anyone could help, I would greatly appreciate it. I don't need someone to build the whole thing for me. What I could use, is an example. Basically a simple setup that someone could create real quick would help. For the example, if anyone has the time and willing to help, make this type of simple setup. I basically look at wow's talent cal, but this isn't a wow talent calculator. It's for a different game. I still need 3 trees. You don't have to put in a ton of icons or mouseover tooltips. I would like this though(for a quick setup): 3 talent trees 2 talent points per tree each talent has at least 1 talent point that can be added tooltip that could say like "0%" with 0 talent points in it, and say "33%" when 1 talent point is added. If possible make the 2nd tier unactive until 1st tier has the point in it. This would be a simple setup. I don't know how to go about doing it. But, if someone could create something like this, and perhaps a "howto" of how to add new talents, like where to add them in the script files, it would be appreciate. I know this is a lot of work, but any help ie appreciated. I want to create a 'go forward' and 'go back' link on each of roughly 100 pages. Rather than insert a hyperlink (a href) I would like to build it from an array or list, because the actual links may change. So I was hoping there may be a way to do something like this: link xxx.html+1 or xxx.html-1 I have no idea if this is even the right forum for this! Thanks for your help. Hi I am new here, am having a terrible problem with animation build up. have searched and found various codes to stop,but can't implement in the .js in a way that works. Maybe am putting in wrong place. Wondering if anyone can help, would really appreciate it. Following is the code: Thank you Code:
var droplinemenu={
arrowimage: {classname: 'downarrowclass', src: 'down.gif', leftpadding: 5}, //customize down arrow image
animateduration: {over: 200, out: 600}, //duration of slide in/ out animation, in milliseconds
buildmenu:function(menuid){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
if (!this.istopheader)
$subul.css({left:0, top:this._dimensions.h})
var $innerheader=$curobj.children('a').eq(0)
$innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
$innerheader.append(
'<img src="'+ droplinemenu.arrowimage.src
+'" class="' + droplinemenu.arrowimage.classname
+ '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />'
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
if ($targetul.queue().length<=1) //if 1 or less queued animations
if (this.istopheader)
$targetul.css({left: $mainmenu.position().left, top: $mainmenu.position().top+this._dimensions.h})
if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
$mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
$targetul.slideDown(droplinemenu.animateduration.over)
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(droplinemenu.animateduration.out)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
}) //end document.ready
}
}
I'm currently using an automation software to automate a series of steps I perform on my computer. One of the tasks involves hundreds of If/Then loops, extracts text from websites using an embedded web browser, computes equations and write text files. The thing is, in order to share this with somebody else, they also need the same automation software installed, and then need to import it. So it's a process I'm trying to replace by creating a small program with a GUI that involves a simple installation on the user's PC (or ideally without installation). The language must be flexible enough to perform the same actions that I listed above - and more preferably. I'm a complete novice with anything besides HTML/CSS so I'm looking for A flexible programming language that isn't rocket science to learn from scratch and is ideal for small stand-alone programs The ability to create a GUI. I'd be happy to read any good reference you have about the language/design knowledge needed for GUI's. Thanks in advance I am building a portion of html in a javascript loop. Everything is working great except for the function call I am trying to build inside the div. The resulting html when rendered in a page looks like Code: <div onclick="ShowMyPopupSetRead(" a','a','a','a')=""><u style="color: blue; cursor: pointer"> Hello </u></div>
you can see the quotation in the beginning of the function call throws the whole thing off. Below you can see how I am building the string. Code: var assembledCall = "onclick='ShowMyPopupSetRead('" + subject + "','" + sender + "','" + reciever + "','" + id + "')";$('#MailTable').append("<div " + assembledCall + "><u style='color: blue; cursor: pointer'> " + subject + " </u></div>");
can any one see where my problem is? Hi, I am hoping I just need to be pointed in the right direction with this. I have Page1. When Page1 body onloads it uses Ajax to call PartA Within PartA I have a message board so members can write messages which will be sent to my database in PartA[1] and immediately posted for view on to PartA[2]. As I want to have my request to the server updating regularly I want to have PartA[2] on a timed loop to refresh - I do not need the content of PartA[1] to refresh. So the order of events would look like this: Page1 | onload call | v PartA / \ V V PartA[1] PartA[2] (loads once) (constantly refreshes) What I am not sure about is that I have <body> and <head> attributes in Page1 only. I have already used my body onload to call PartA (and can't use it to call PartA[2] before PartA has loaded anyway). I do not want the user to have to click a button or do anything to call up PartA[2]. So my question is how would I get PartA[2] to automatically load within PartA? I hope I have made this clear, but if I haven't let me know and I will try again. I know I'm missing something ever so small but maybe you guys can help... Thanks all <code> <script type="text/javascript"> function insertLink() { var lnk = prompt("Enter Link [http://www.url.com]"); var href = lnk.value; var lnkBuild = '<a href=" + href + "></a>' alert(lnkBuild); } } </script> </code> Hi, I'm new to Javascript and need to help with something, I'll try and explain this as best as I can but feel free to ask questions if it doesn't make sense. I'm basically building a javascript/html calculator but I need the calculation to appear gradually in a table, the table need to be 3 columns accross and add a row each time a calculation button is pressed, the first column can remain blank for now but will need to contain a text field eventually, second column needs to show the calculation symbol, third column shows the number. Here's an example: 4+2+7-5=8 |Blank| | 4 | |Blank| + | 2 | |Blank| + | 7 | |Blank| - | 5 | |Blank| = | 8 | Here's the code I have so far so you can get a feeling of what it looks like, this table need to go into the area div and will replace what is currently the 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>
<title>Sample Widget</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="basic.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="basic.js"></script>
<meta name="generator" content="Nokia WRT extension for Visual Studio 2.0" />
<script type="text/javascript" language="javascript">
function UpdateInput(a, b) {
var MyElement = document.getElementById("Input");
MyElement.innerHTML = MyElement.innerHTML + a;
var MyElement = document.getElementById("Area");
MyElement.innerHTML = MyElement.innerHTML + b;
}
function Calculate() {
var result = eval(document.getElementById("Input").innerHTML);
var total = document.getElementById("Total");
total.innerHTML = result;
var MyElement = document.getElementById("Area");
MyElement.innerHTML = MyElement.innerHTML + '<br>=' + result;
}
</script>
</head>
<body onLoad="init()">
<div id="Main">
<table cellpadding="0" cellspacing="0" width="100%">
<div id="Area">
</div>
</table>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="style1">Total:</td>
<td>
<div id="Total"></div>
</td>
</tr>
<tr>
<td colspan="2">
<div id="Input"></div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="Images/plus.png" onclick="UpdateInput('+','<br>+')" /></td>
<td><img src="Images/minus.png" onclick="UpdateInput('-','<br>-')" /></td>
<td><img src="Images/times.png" onclick="UpdateInput('*','<br>*')" /></td>
<td><img src="Images/divide.png" onclick="UpdateInput('/','<br>/')" /></td>
</tr>
<tr>
<td><img src="Images/7.png" onclick="UpdateInput(7,7)" /></td>
<td><img src="Images/8.png" onclick="UpdateInput(8,8)" /></td>
<td><img src="Images/9.png" onclick="UpdateInput(9,9)" /></td>
<td><img src="Images/percent.png" onclick="UpdateInput('%','<br>%')" /></td>
</tr>
<tr>
<td><img src="Images/4.png" onclick="UpdateInput(4,4)" /></td>
<td><img src="Images/5.png" onclick="UpdateInput(5,5)" /></td>
<td><img src="Images/6.png" onclick="UpdateInput(6,6)" /></td>
<td><img src="Images/oneoverx.png" /></td>
</tr>
<tr>
<td><img src="Images/1.png" onclick="UpdateInput(1,1)" /></td>
<td><img src="Images/2.png" onclick="UpdateInput(2,2)" /></td>
<td><img src="Images/3.png" onclick="UpdateInput(3,3)" /></td>
<td><img src="Images/plusminus.png" /></td>
</tr>
<tr>
<td><img src="Images/0.png" onclick="UpdateInput(0,0)" /></td>
<td><img src="Images/dot.png" onclick="UpdateInput('.','.')" /></td>
<td><img src="Images/equals.png" onclick="Calculate()" /></td>
<td><img src="Images/sub.png" /></td>
</tr>
</table>
</div>
</body>
</html>
ok i have a script which will make a copy of the html in a div and place it into another div the problem with this it creates a duplicate element with the same id so what i want to know is can i create a new id based off old ids using a generic type script Code: function scope(e)
{
var popin = document.getElementById('popin');
popin.innerHTML = "<div class='container'>"+e.innerHTML+"</div>";
popin.style.display = "block";
}
this code is designed for taking content in a small div and placing it into a larger div to increase the viewing area so what i would need is sumthing that can look for Code: id="sum text" and maybe amend it to Code: id="sum textP" or sumthing to that extent if sum1 could point me in the right direction that would be great if my post is not clear enough just ask me to be more specific or sumthing and i will see what i can do to try and make it more clear if needed |
|||||||