|
JavaScript - Output To Content Div Using Custom Function Showit
Hi Guys, Before I get started explaining my problem I would like to make it clear that this is a university web scripting assignment so I will not be asking for answers just advice as im stuck.
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<style>
body{font-family: Arial,sans-serif; background-color: #86bfc9;}
#content{float:right; width: 75%;}
</style>
<script type = "text/javascript">
function showit(what,where)
{
var node = document.getElementById(where);
while( node.firstChild )
node.removeChild( node.firstChild );
node.appendChild( document.createTextNode(what) );
}
function hello()
{
alert("I'm a Computer Solutions Degree student,\n get me out of here");
}
function timestable()
{
str="you code times table here";
showit(str,"Results");
}
function formattedtimestable()
{
str="you code formatted times table here";
showit(str,"Results");
}
function alerttimestable()
{
str="you code alert times table here";
// you code here
alert(str);
}
</script>
</head>
<body>
<h1>JavaScript Exercises </h1>
<div id="content"> <div id = "Results"></div> </div>
<a href="#" OnClick = "hello()">Hello Alert</a> <br/><br/>
<a href="#" OnClick = "timestable()">Times Tables</a> <br/><br/>
<a href="#" OnClick = "alerttimestable()">Times table in an alert box</a>
<br/><br/>
<a href="#" OnClick = "formattedtimestable()">Times Tables in a Table</a>
<br/><br/>
</body>
</html>
I have been given this skeleton code and need to created the relevant times tables so a times table in a alert box, a times table in a table and a standard times table. Now the problem isn't creating the table as that's easy the problem is with the showit function. When I use the function it only prints the string once and nothing else so for example if I did for(x = 0; x< 9; x++) { showit(x, "Result"); } it will only show 8 not 1-2-3-4-5-6-7-8. or if i did showit("Danny", "Result"); showit("Joe", "Result"); it will only output Joe not Danny. The content needs to go in the content div and I cant make it output more than one thing which of course is a problem as I need to output the times tables. Sorry for the poor explanation. Hope someone can shed some light on this Many Thanks Danny Similar TutorialsI am trying to implement a credit card check function in the validation script. But whenever i enable the function it bypasses all previous validation checks and just inputs the data, where am i going wrong with this function? Code: function CheckCreditCard(cardtype, cardnumber)
{
var frm = document.forms["OrderForm"];
if (cardtype == "Visa") {
var re = /^4\d{3}-?\d{4}-?\d{4}-?\d{4}$/;
} else if (cardtype == "Master Card") {
var re = /^5[1-5]\d{2}-?\d{4}-?\d{4}-?\d{4}$/;
} else if (cardtype == "American Express") {
var re = /^3[4,7]\d{13}$/;
}
if (!re.test(cardnumber)) return false;
cardnumber = cardnumber.split("-").join("");
var checksum = 0;
for (var i=(2-(cardnumber.length % 2)); i<=cardnumber.length; i+=2) {
checksum += parseInt(cardnumber.charAt(i-1));
}
for (var i=(cardnumber.length % 2) + 1; i<cardnumber.length; i+=2) {
var digit = parseInt(cardnumber.charAt(i-1)) * 2;
if (digit < 10) { checksum += digit; } else { checksum += (digit-9); }
}
if ((checksum % 10) == 0)
return true;
else
sfm_show_error_msg('error message goes here');
return false;
}
HTML Code is: Code: <script language="JavaScript" type="text/javascript">
var frmvalidator = new Validator("OrderForm");
frmvalidator.EnableOnPageErrorDisplaySingleBox();
frmvalidator.EnableMsgsTogether();
frmvalidator.EnableFocusOnError(false);
// other attributes went here but were removed
frmvalidator.setAddnlValidationFunction("CheckCreditCard");
</script>
FULL Javascript: Attached at a txt file, was too large to post here. The statement does what I want it to do, except if there is multiple instances of the word, it only outputs one, how can I work it so all instances are output in red? (while still using .slice) var phrase = prompt("Enter a messate: ", 'Message'); var searchFor = prompt("Enter search text: ", 's'); var matchPhrase = ""; var searchIndex = -1; /* if there's a match, create a text string by * add the phrase text from before the match, * add <font> tags around the match text, * add the rest of the phrase from after the match */ searchIndex = phrase.indexOf(searchFor); if (searchIndex >=0 ) { // Copy text from phrase up till the match. matchPhrase += phrase.slice(0, searchIndex); matchPhrase += '<font color="red">' + searchFor + '</font>'; matchPhrase += phrase.slice(searchIndex + searchFor.length); phrase++ } else { matchPhrase = "No matches" } document.writeln(matchPhrase); Reply With Quote 01-31-2015, 09:08 AM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts Use a regular expression. Hello, As the title states, I have a problem with a function that hides content contained in DIV tags. Here is the function: Code: <script language="JavaScript">
function toggle(id) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
</script>
Now, the function itself works perfectly. The problem that I have is that it doesn't work the way I need it to. I have 4 links that need to show the content of a corresponding DIV section. When a link is clicked I need it to check the state of the other 3 DIVs and hide any that are open, then display the content for the link that was clicked. I can tell from the function I am using that it already checks the state of any 1 given DIV then acts accordingly (shows if hidden, hides if shown). While this works, I am having a hard time figuring out how to modify it to suit my needs. I am completely new to JavaScript but I do know some VB so I am not a stranger to programming in general. What I would like is some direction on how to modify the above function to handle the logic I need. I would prefer instruction on how I should go about it so I can get some experience, but any help is appreciated. Thanks! PS, I am setting the display property of all 4 DIVs to NONE by default via embedded CSS. Hi, I am not entirely sure what I am doing wrong here, and I have been looking at this for ages, so apologies in advance if I have become so bleary eyed I can't see something simple. I use php to create buttons based on values pulled for a table. The problem I have is when you click on the first button the javascript function works great, when you click on the next button you get the same output even though it should be different results. I am working in ff and I can see on my firebug console that the javascript function is being called, but it is not passing the new value of the second or third button, it just keeps repassing the value of the first button. So not entirely sure where I am going wrong here. My page is: Code: <script type="text/javascript">
function loadXMLDoc2(File,ID,Msg){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}
var params=Msg;
xmlhttp.open("POST",File,true);
xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
<head>
<body>
<?php
$con = mysql_connect("localhost","user","password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("mydb", $con);
$result = mysql_query("SELECT DISTINCT theme FROM goods WHERE category='{$_POST['category']}'
ORDER BY theme DESC");
while($row = mysql_fetch_array($result)){
echo '<input type="text" class="hidden" name="theme" id="theme" value="' . $row['theme'] . '" ><input type="button" class="button3" name="product" id="product" value="' . $row['product'] . '" onClick="loadXMLDoc2(\'getShow.php\',\'txtHint\',\'theme=\'+encodeURI(document.getElementById(\'rtheme\').value))" > ';
}
echo '<br /><br />
<div id="txtHint"><div>
<br />
<br />';
mysql_close($con);
?>
And getShow.php produces a table with a list of product images, names and prices, based on theme. So basically not sure where I am going wrong here? Hi all, I am using xmlhttp.open();xmlhttp.send(); to send a php content to a div. This php content is again using the same method to get php content from a further page. The content of the div, does not seem to be using the css and javascript files defined in the calling pages <head> section. Does anyone know why this is? Is there a workaround or solution to this problem? It might be easier to understand looking at the code, so Background info: Javascript file: scripts.js client.php ----> loads data from: display_client.php display_client.php ----> loads data from: display_brand.php Code: client.php http://pastebin.com/4EFn9YRf display_client.php http://pastebin.com/BGZAKre2 display_brand.php http://pastebin.com/0a4Pg3gg scripts.js http://pastebin.com/er4dkmPc Thanks! I am looking for a custom pop up box, but there is only 3 kinds (Alert, Confirm, Prompt). Neither of those will work. This is what I want to do. http://www.youtube.com/watch?v=zr0F6elv-vg I have a successful translator that has random letter, number and symbols assigned to various letters problem is it only lets assign 1 character to 1 letter when i want to assign 4 characters to each letter to ensure the code cant be broken here is a snipet of what im working with its different then normal translators....
Code: <script language="javascript">
function translate() {
if (document.form1.elements[0].checked == true) {
EtoA()
} else if (document.form1.elements[1].checked == true) {
AtoE()
} else {
}
}
function EtoA() {
var toggle = "false"
var xlate = document.form1.elements[4].value
var xlation = ""
document.form1.elements[5].value = ""
for (var i = 0; i <= xlate.length; i++) {
tempa = xlate.charAt(i)
if ( tempa == "[") {
toggle = "true"
i++
} else if ( tempa == "]") {
toggle = "false"
i++
}
tempa = xlate.charAt(i)
if (toggle == "true") {
tempb = tempa
} else if(tempa == "a") {
tempb = "9"
} else if(tempa == "b") {
tempb = "a"
} else if(tempa == "c") {
tempb = "0"
} else if(tempa == "d") {
tempb = "c"
} else if(tempa == "e") {
tempb = "3"
} else if(tempa == "f") {
tempb = "b"
} else if(tempa == "g") {
tempb = "4"
} else if(tempa == "h") {
tempb = "?"
} else if(tempa == "i") {
tempb = "5"
} else if(tempa == "j") {
tempb = "6"
} else if(tempa == "k") {
tempb = "e"
} else if(tempa == "l") {
tempb = "+"
} else if(tempa == "m") {
tempb = "x"
} else if(tempa == "n") {
tempb = "7"
} else if(tempa == "o") {
tempb = "v"
} else if(tempa == "p") {
tempb = "1"
} else if(tempa == "q") {
tempb = "t"
} else if(tempa == "r") {
tempb = "q"
} else if(tempa == "s") {
tempb = "g"
} else if(tempa == "t") {
tempb = "n"
} else if(tempa == "u") {
tempb = "<"
} else if(tempa == "v") {
tempb = ">"
} else if(tempa == "w") {
tempb = "^"
} else if(tempa == "x") {
tempb = "!"
} else if(tempa == "y") {
tempb = "@"
} else if(tempa == "z") {
tempb = "#"
} else if(tempa == "A") {
tempb = "9"
} else if(tempa == "B") {
tempb = "a"
} else if(tempa == "C") {
tempb = "0"
} else if(tempa == "D") {
tempb = "c"
} else if(tempa == "E") {
tempb = "3"
} else if(tempa == "F") {
tempb = "b"
} else if(tempa == "G") {
tempb = "4"
} else if(tempa == "H") {
tempb = "h"
} else if(tempa == "I") {
tempb = "5"
} else if(tempa == "J") {
tempb = "6"
} else if(tempa == "K") {
tempb = "e"
} else if(tempa == "L") {
tempb = "f"
} else if(tempa == "M") {
tempb = "x"
} else if(tempa == "N") {
tempb = "7"
} else if(tempa == "O") {
tempb = "v"
} else if(tempa == "P") {
tempb = "1"
} else if(tempa == "Q") {
tempb = "t"
} else if(tempa == "R") {
tempb = "q"
} else if(tempa == "S") {
tempb = "g"
} else if(tempa == "T") {
tempb = "n"
} else if(tempa == "U") {
tempb = "<"
} else if(tempa == "V") {
tempb = ">"
} else if(tempa == "W") {
tempb = "^"
} else if(tempa == "X") {
tempb = "!"
} else if(tempa == "Y") {
tempb = "@"
} else if(tempa == "Z") {
tempb = "#"
} else if(tempa == "1") {
tempb = "}"
} else if(tempa == "2") {
tempb = "{"
} else if(tempa == "3") {
tempb = "("
} else if(tempa == "4") {
tempb = "'"
} else if(tempa == "5") {
tempb = "|"
} else if(tempa == "6") {
tempb = "`"
} else if(tempa == "7") {
tempb = ":"
} else if(tempa == "8") {
tempb = ";"
} else if(tempa == "9") {
tempb = "="
} else if(tempa == "0") {
tempb = ")"
} else if(tempa == "~") {
tempb = "R"
} else if(tempa == "!") {
tempb = "T"
} else if(tempa == "@") {
tempb = "F"
} else if(tempa == "#") {
tempb = "Y"
} else if(tempa == "$") {
tempb = "K"
} else if(tempa == "%") {
tempb = "J"
} else if(tempa == "^") {
tempb = "H"
} else if(tempa == "&") {
tempb = "G"
} else if(tempa == "*") {
tempb = "X"
} else if(tempa == "_") {
tempb = "V"
} else if(tempa == "-") {
tempb = "B"
} else if(tempa == "+") {
tempb = "M"
} else if(tempa == "=") {
} else if(tempa == "<") {
tempb = "N"
} else if(tempa == ">") {
tempb = "U"
} else if(tempa == ".") {
tempb = "S"
} else if(tempa == ",") {
tempb = "W"
} else if(tempa == "?") {
tempb = "."
} else if(tempa == ":") {
tempb = ","
} else if(tempa == ";") {
tempb = "$"
} else {
tempb = tempa
}
xlation = document.form1.elements[5].value
document.form1.elements[5].value = xlation + tempb
}
}
function AtoE() {
var toggle = "false"
var xlate = document.form1.elements[4].value
var xlation = ""
document.form1.elements[5].value = ""
for (var i = 0; i <= xlate.length; i++) {
tempa = xlate.charAt(i)
if ( tempa == "[") {
toggle = "true"
i++
} else if ( tempa == "]") {
toggle = "false"
i++
}
tempa = xlate.charAt(i)
if (toggle == "true") {
tempb = tempa
} else if(tempa == "9") {
tempb = "a"
} else if(tempa == "a") {
tempb = "b"
} else if(tempa == "0") {
tempb = "c"
} else if(tempa == "c") {
tempb = "d"
} else if(tempa == "3") {
tempb = "e"
} else if(tempa == "b") {
tempb = "f"
} else if(tempa == "4") {
tempb = "g"
} else if(tempa == "?") {
tempb = "h"
} else if(tempa == "5") {
tempb = "i"
} else if(tempa == "6") {
tempb = "j"
} else if(tempa == "e") {
tempb = "k"
} else if(tempa == "+") {
tempb = "l"
} else if(tempa == "x") {
tempb = "m"
} else if(tempa == "7") {
tempb = "n"
} else if(tempa == "v") {
tempb = "o"
} else if(tempa == "1") {
tempb = "p"
} else if(tempa == "t") {
tempb = "q"
} else if(tempa == "q") {
tempb = "r"
} else if(tempa == "g") {
tempb = "s"
} else if(tempa == "n") {
tempb = "t"
} else if(tempa == "<") {
tempb = "u"
} else if(tempa == ">") {
tempb = "v"
} else if(tempa == "^") {
tempb = "w"
} else if(tempa == "!") {
tempb = "x"
} else if(tempa == "@") {
tempb = "y"
} else if(tempa == "#") {
tempb = "z"
} else if(tempa == "9") {
tempb = "A"
} else if(tempa == "a") {
tempb = "B"
} else if(tempa == "0") {
tempb = "C"
} else if(tempa == "c") {
tempb = "D"
} else if(tempa == "3") {
tempb = "E"
} else if(tempa == "b") {
tempb = "F"
} else if(tempa == "4") {
tempb = "G"
} else if(tempa == "?") {
tempb = "H"
} else if(tempa == "5") {
tempb = "I"
} else if(tempa == "6") {
tempb = "J"
} else if(tempa == "e") {
tempb = "K"
} else if(tempa == "+") {
tempb = "L"
} else if(tempa == "x") {
tempb = "M"
} else if(tempa == "7") {
tempb = "N"
} else if(tempa == "v") {
tempb = "O"
} else if(tempa == "1") {
tempb = "P"
} else if(tempa == "t") {
tempb = "Q"
} else if(tempa == "q") {
tempb = "R"
} else if(tempa == "g") {
tempb = "S"
} else if(tempa == "n") {
tempb = "T"
} else if(tempa == "<") {
tempb = "U"
} else if(tempa == ">") {
tempb = "V"
} else if(tempa == "^") {
tempb = "W"
} else if(tempa == "!") {
tempb = "X"
} else if(tempa == "@") {
tempb = "Y"
} else if(tempa == "#") {
tempb = "Z"
} else if(tempa == "}") {
tempb = "1"
} else if(tempa == "{") {
tempb = "2"
} else if(tempa == "(") {
tempb = "3"
} else if(tempa == "'") {
tempb = "4"
} else if(tempa == "|") {
tempb = "5"
} else if(tempa == "`") {
tempb = "6"
} else if(tempa == ":") {
tempb = "7"
} else if(tempa == ";") {
tempb = "8"
} else if(tempa == "=") {
tempb = "9"
} else if(tempa == ")") {
tempb = "0"
} else if(tempa == "R") {
tempb = "~"
} else if(tempa == "T") {
tempb = "!"
} else if(tempa == "F") {
tempb = "@"
} else if(tempa == "Y") {
tempb = "#"
} else if(tempa == "K") {
tempb = "$"
} else if(tempa == "J") {
tempb = "%"
} else if(tempa == "H") {
tempb = "^"
} else if(tempa == "G") {
tempb = "&"
} else if(tempa == "X") {
tempb = "*"
} else if(tempa == "V") {
tempb = "_"
} else if(tempa == "B") {
tempb = "-"
} else if(tempa == "M") {
tempb = "+"
} else if(tempa == "N") {
tempb = "<"
} else if(tempa == "U") {
tempb = ">"
} else if(tempa == "S") {
tempb = "."
} else if(tempa == "W") {
tempb = ","
} else if(tempa == ".") {
tempb = "?"
} else if(tempa == ",") {
tempb = ":"
} else if(tempa == "$") {
tempb = ";"
} else {
tempb = tempa
}
xlation = document.form1.elements[5].value
document.form1.elements[5].value = xlation + tempb
}
}
Can anyone help me out in assigning more then one character? Multple characters work when going english to my custom assignments but it cant translate back from my custom assignments to english. I'm trying to create a custom drop down and using the code below it works pretty well - only one problem is if i have more than one drop down, all the links will only activate the first drop down. Any ideas on how I would fix that? Code: function toggle() {
var ele = document.getElementById("dropdown-items");
var text = document.getElementById("dropdown-menu");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
I already have a sort function that but wish to provide my users with the ability to specify custom sorts - days of the week, months etc. Assuming that I have a function that will return day of week (ie 'Mon' = 0, "Tue" = 1, "Wed" = 2 ... etc) can anyone show me how I would incorporate this into a sort routine? Many thanks in advance should you respond to this. Hey guys, I'm trying to call the following custom tag: <mvt:item name="category_tree" /> from a JS function: <script language="javascript" type="text/javascript"> <!-- function left_nav_bar () { document.write('Categories:'); document.write('<mvt:item name="category_tree" />'); } //--> </script> But the custom tag is not executing in the browser. Am I calling it wrong from my JS code? I wanted a custom look for my list menu. Here is what I came up with... http://schrene.web44.net/List-Menu.html I created it using divs with text overflow to get the scroll bar. Here is my code Code: <div id="colorList"> <center> <div class="mySelect" onClick="myFunction()">Abalone</div> <div class="mySelect" onClick="myFunction()">Acorn</div> <div class="mySelect" onClick="myFunction()">Adobe</div> <div class="mySelect" onClick="myFunction()">Allspice</div> <div class="mySelect" onClick="myFunction()">Antarctica</div> <div class="mySelect" onClick="myFunction()">Anthracite</div> <div class="mySelect" onClick="myFunction()">Aqualite</div> <div class="mySelect" onClick="myFunction()">Arctic Blueberry</div> <div class="mySelect" onClick="myFunction()">Arctic Ice</div> <div class="mySelect" onClick="myFunction()">Arctic Lime</div> <div class="mySelect" onClick="myFunction()">Cilantro</div> <div class="mySelect" onClick="myFunction()">Cinnabar</div> <div class="mySelect" onClick="myFunction()">Clam Shell</div> <div class="mySelect" onClick="myFunction()">Clove</div> <div class="mySelect" onClick="myFunction()">Cobalt</div> <div class="mySelect" onClick="myFunction()">Cocoa Brown</div> <div class="mySelect" onClick="myFunction()">Concrete</div> <div class="mySelect" onClick="myFunction()">Copperite</div> <div class="mySelect" onClick="myFunction()">Cottage Lane</div> <div class="mySelect" onClick="myFunction()">Designer White</div> <div class="mySelect" onClick="myFunction()">Doeskin</div> <div class="mySelect" onClick="myFunction()">Dove</div> <div class="mySelect" onClick="myFunction()">Earth</div> </center> </div> It worked great but it loses the scroll bar on iPhone. I want something that works for mobile web as well as traditional.. Does anybody have any ideas how to create a list menu like this??? Any help would greatly be appreciated Hi I have a table that sorts in jquery and I have one column that I would like to always remain the same while the other columns sort around it. What I want is for the order of the column to always be Great, Bad, Failure while every other column can be sorted and I don't want to the column to sort alphabetically. What is the easiert way for me to do this?
Hi I have been looking to create custom buttons in an alert box I would like them to say Go and Cancel instead of OK and cancel Code: onClick="if(confirm('Would you like to continue?'))
Hi all, The question is hopefully relatively simple. if I have an object say Code: [
var SampleObject = function(id){
SampleObject.id = id;
SampleObject.age= 22;
}
Is there a way to create an event that triggers every time the age member value changes? Thanks Ollie. Hello, I am trying to make a custom select menu. Here is what I have so far: http://mikewgd.com/wp-content/portfo...custom-select/ Im just stuck at getting the <li> to become selected and etc... I am using this as reference: http://v2.easy-designs.net/articles/replaceSelect/ -- Im not using there script exactly Im doing it a different way. Im doing it more as a dropdown menu Code: <ul class="select">
<li class="selected">
cheese
<ul class="drop">
<li>milk</li>
<li>bread</li>
<li class="selected">cheese</li>
<li>pickles</li>
<li>salsa</li>
</ul>
</li>
</ul>
I'm trying to understand how a custom object can call a function within itself. Say I have something like this: Code: function functiontest()
{
this.prop1 = '',
this.prop2 = '',
this.options = {initiallevels:0},
this.prop3 = '/blah',
this.prop4 = true,
this.function4 = function(x)
{
console.log(x)
},
this.init = function(options)
{
this.uid=options.uid
this.t=options.target
document.getElementById(this.t).addEventListener('click',function(){this.uid.function4(this.t)},false)
}
}
myfun1=new functiontest
myfun1.init({uid:'myfun1',target:'target1'})
myfun2=new functiontest
myfun2.init({uid:'myfun2',target:'target2'})
And the html: Code: <html> <head></head> <body> <div id="target1">T1</div> <br> <div id="target2">T2</div> </body> </html> I don't know what to put in the part in bold to set the click event listener and have it call function4 within the functiontest object. I've tried a bunch of different things and nothing worked. Please help, thanks! Hi, I want to build a custom calendar using javascript. On load of page for which date schedule are there, it should show dark black dot at left-top corner of particular date for current month. There are 3 button below the calendar as prev mnth,create schedule,next mnth. when prev is clicked it should works same as on load for previous month, similarly for next mnth. Pls help its urgent. Thanks http://becompleteamerica.com/index.p...tact&Itemid=80 It works awesome in all browsers but IE 7 & 8. The custom "alert" is actually a dialog box, with a background fader underneath it, kind of like lightbox. Any ideas why IE doesn't play nice? Thx I am building a custom slideshow that is pulling data from an xml sheet to create each "Slide" each slide consists of several elements on the xml sheet. I have javascript currently putting together the correct information and creating a new div for each "slide". What I need is to display the first div(slide) and then hit a next button to get to display the next div(slide). Below the first set of code is a snapshot of code simply to illustrate that it is creating the correct divs. Those divs all have content in them I just took the code from firebug. 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>
<body>
<div id="page-wrap">
<button id="nextButton2">next('div')</button>
<button id="prevButton2">prev('div')</button>
<div id="start" style="background: none repeat scroll 0% 0% red;"></div>
<div id="link_Babbling Brook" class="art">
<div id="link_Botany 101" class="art">
<div id="link_Cracking Up" class="art">
<div id="link_Eclipse" class="art">
<div id="link_Equinox" class="art">
<div id="link_Foliage Fluoresced" class="art">
<div id="link_In Vein" class="art">
<div id="link_Microscopic" class="art">
<div id="link_Pickup Sticks" class="art">
<div id="link_Relief" class="art">
<div id="link_Rhubarb" class="art">
<div id="link_Snow Dyed Shibori" class="art">
<div id="link_Symmetry" class="art">
<div id="link_Undulations" class="art">
<div id="link_Willow Mist" class="art">
<div id="link_Wired" class="art">
</div>
</body>
</html>
Javascript code Code: if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
$(document).ready(function () {
$.ajax({
type: "GET",
url: "sites.xml",
dataType: "xml",
success: function (xml) {
$(xml).find('art').each(function () {
var id = $(this).attr('id');
var name = $(this).find('name').text();
var full = $(this).find('large').text();
var detail = $(this).find('detail').text();
var thumb = $(this).find('thumb').text();
var category = $(this).find('category').text();
var dimensions = $(this).find('dimensions').text();
var description = $(this).find('description').text();
var detailthumb = '<img src= " ' + thumb + ' " />';
var detailfull = '<iframe name= "portfolio ' + name + ' " src=" ' + detail + ' " iframe/>';
var large = '<iframe height="482px" width="786px" class="image-frame" name= "portfolio ' + name + ' " src= " ' + full + ' " />';
$('<div class="art" id="link_' + name +'"></div>').html('<div id="portfolio-content" class="' + name +'"><div class="thumb"><a href= " ' + detail + ' " target= "portfolio ' + name + ' ">' + detailthumb + '<br/></a>(Click for Detail)</div><div class="image">' + large + "</div><div class='text'><h1>" + name + "</h1>" + category + "<br/>" + dimensions + "<br/>" + description + "</div></div>").appendTo('#page-wrap');
});
var $currElement = $("#start");
$currElement.css("background", "red");
$("#nextButton2").click(function () {
if(!$currElement.next('div').length){
alert("No element found!");
return false;
}
$currElement = $currElement.next('div');
$("div,p").css("background", "");
$currElement.css("background", "red");
});
var $currElement = $("#start");
$currElement.css("background", "red");
$("#prevButton2").click(function () {
if(!$currElement.prev('div').length){
alert("No element found!");
return false;
}
$currElement = $currElement.prev('div');
$("div,p").css("background", "");
$currElement.css("background", "red");
});
}
});
});
Im currently running out of ideas of how else to attack this. This page will be navigated to by clicking on a thumbnail that will then open that particular element. How do I also get it to open to the correct element in the xml sheet. PLEASE HELP |
|||||||