|
JavaScript - Navigation Problems. Need Oo Coding?
Hi guys,
This is the first site I have tried to make with Javascript because I thought it was about time I learned it properly. Apologies if my code is extremely ugly. Suggestions are more than welcome. I have a single large page that the Javascript controls so the viewing screen 'focuses' on the div referenced by the link. It is a 3x3 array of divs with each div being its own 'page' as far as the user is concerned. It would be nice if it worked something like this site only with the links inside each 'pages' div instead of around the outside in a separate frame. I looked at their code and realised it would work well for what I wanted with some modifications (it is a free code tutorial thing so no rage). Turned out it basically needed to be re-written. The navigation I am using works fine so long as the links on the central 'home' div are used but as soon as I copy + paste the working code into one of the other divs they cease to work as links, they still appear but they don't do anything while the ones on the 'home page' still work fine. I have no idea why but I feel like it might have something to do with object oriented coding. I read the two posts on the subject in the FAQ's and can understand the difference between the two styles but don't really know where to go from here. The relevant html code goes like so: Code:
<div id="one" class="elements">
<div class="block25">
<span class="go1"><img src="images/go1.png" alt="One"><h4>ONE</h4></span>
</div>
While the javascript is as thus: Code: $('.go1').click(function(){
$('#one').click();
});
$('#one').click(function(){;
currentId = $('selected').attr('id');
goId = section[0][0];
$target = $('div[id=' + goId +']');
$paneTarget.stop().scrollTo($target, 800, { margin: true } );
$('div[id=' + currentId +'], div[id=' + goId +']').toggleClass('selected');
});
I tried making separate function names for each div's links and calling them something like go11, go12, etc but that didn't seem to fix anything. I just realised that I only duplicated and renamed the first part of the code eg. Code: $('.go12').click(function(){
$('#one2').click();
});
and not the rest. I suppose if I did all of it, the navigation would probably work but I would have 9x more code than I have right now. Edit : Turns out it still doesn't work. I am incredibly stumped by this. Why would it not work even if the function names are different? The only thing that is remaining the same is the div id that is being referenced and animated to. How difficult would it be for me to convert what I have into object oriented code? Would this even be what I need to do? If anyone can help me out then I would be really grateful. Thanks! I know I should take the time to go through tutorials and learn it properly but this site is supposed to be part of a project for uni that is due soon so I don't really have the time. Later I will do some more learning and figure it all out. I'm also wondering how I would go about applying easing to the animation between div's. Should I use some sort of jQuery library or some custom code like this article suggests? Similar TutorialsHey, I'm try to create a web page which slides down sub catagories when menus are clicked on. However, when the divs slide down there seems to be an unwanted 'snap' in the movement. Does anyone know how to solve this? Also, when the menu headings are clicked on the second time (which should slide the menu back up), the menu title disapears?? Heres the coding I've used and the link to the site: http://www.pumphouseapps.co.uk/graph...ents_page.html <script type="text/javascript"> $(document).ready(function() { var SectionName; var SectionNameLengh; var sectionChildName; var childName; $(".Subsection01").toggle( function () { SectionName=this.id; $("#"+SectionName).children().each( function() { var child = $(this); if (!(child.hasClass('MainSectionTitle'))) { child.slideDown(); } } ); /*$(".Subsection02").slideDown();*/ /*SectionNameLengh=this.id.length; sectionChildName= SectionName.slice(0,SectionNameLengh-4); $("#"+sectionChildName).show();*/ }, function () { SectionName=this.id; $("#"+SectionName).children().each( function() { var child = $(this); if (!(child.hasClass('MainSectionTitle'))) { child.slideUp(); } } ); /*$(".Subsection02").slideDown();*/ /* SectionName=this.id; SectionNameLengh=this.id.length; sectionChildName= SectionName.slice(0,SectionNameLengh-4); $("#"+sectionChildName).hide();*/ } ); $(".Subsection03").toggle( function () { SectionName=this.id; $("#"+SectionName).children().slideDown(); /* SectionName=this.id; SectionNameLengh=this.id.length; sectionChildName= SectionName.slice(0,SectionNameLengh-4); $("#"+sectionChildName).show();*/ }, function () { SectionName=this.id; $("#"+SectionName).slideUp(); /*SectionName=this.id; SectionNameLengh=this.id.length; sectionChildName= SectionName.slice(0,SectionNameLengh-4); $("#"+sectionChildName).hide();*/ } ); }); </script> New problem in post #5. Okay, so I'm dipping my hand into JavaScript for the first time now, using it to try and code a calculator for my lab. Basically, it needs to take some numbers as input, do some simple calculations, and spit out some output. I'm rather new to accepting input and passing output so I've been struggling with these parts. I've finally gotten my code to do both, but only in FireFox. IE fails to give output and I'm not sure why. Here's some of the code with unnecessary bits (CSS, text, etc.) removed: Code: <html>
<head>
<script type="text/javascript" src="functions2.js">
function oneFert(recArr,fertArr)
{
/* Calculates the amount of fertilizer needed to meet all recommendations using one fertilizer. */
var amtArr = [recArr[0]/fertArr[0],recArr[1]/fertArr[1],recArr[2]/fertArr[2]];
var lbs = 0;
for(x in amtArr) {
if(amtArr[x]>lbs)
lbs=amtArr[x];
}
return lbs;
}
function toString(lbs,fertArr,area)
{
return "You need to apply "+Math.round(lbs*100)+" lbs of "+fertArr[0]+"-"+fertArr[1]+"-"+fertArr[2]+" for every 1,000 square feet. You will need a <b>total of "+Math.round(lbs*100)*area/1000+" lbs</b> of "+fertArr[0]+"-"+fertArr[1]+"-"+fertArr[2]+" for an area of "+area+" square feet.";
}
</script>
</head>
<body>
<form name="in">
Recommendation<br /> N:<input type="text" name="recn" /> P:<input type="text" name="recp" /> K:<input type="text" name="reck" /> per 1,000 square feet<br />
Fertilizer<br /> N:<input type="text" name="fertn" /> P:<input type="text" name="fertp" /> K:<input type="text" name="fertk" /> (%)<br />
Area<br /><input type="text" name="area" /> square feet (no commas)
<br /><br />
<script type="text/javascript">
<!--
var recArr = [document.in.recn.value,document.in.recp.value,document.in.reck.value];
var fertArr = [document.in.fertn.value,document.in.fertp.value,document.in.fertk.value];
var lbs = 0;
var area = document.in.area.value;
lbs = oneFert(recArr,fertArr);
document.write(toString(lbs,fertArr,area));
// End hiding -->
</script>
<br />
<input type="button" value="Calculate" onclick="history.go(0)" style="width:auto;" />
</form>
</body>
</html>
I'd also appreciate other comments on the code not relating to this one problem. I'm sure there's better ways of doing much of what I've done. (And mind you, this is a very basic prototype.) Also, does anyone know of some good debugging tools for IE? I just found out about Firebug for FF and started using that. Hello all out there I am going to post this in 2 separate views. I am working on an assignment from this link http://books.google.ca/books?id=aG_T2aD ... MonthCell()&source=bl&ots=EJXyGF-tbI&sig=vbgqgua2uSaL6DWp0Rx_BYoZ0z8&hl=en&ei=9C7gTLmiAYaXnAeywLWRDw&sa=X&oi=book_result&ct=result&re snum=1&ved=0CBcQ6AEwAA#v=onepage&q=writeMonthCell()&f=false if u scroll down to case 1 is what I am working on included in the case are 2 other files as to the one i have to work on i used all the proper steps and instructions and i think I have the correcting coding for my form however my program still does not work here is the exact code i am using let me know if anyone sees any errors, as I am convinced i have it correct? Here is my code: <html> <head> <!-- New Perspectives on JavaScript Tutorial 3 Case Problem 1 The Lighthouse Author: John Res Date: November 14 2010 Filename: clist.htm Supporting files: lhouse.css, list.js, logo.jpg --> <title>The Lighthouse</title> <link href="lhouse.css" rel="stylesheet" type="text/css" /> <script type"text/javascript" src"list.js"></script> <script type="text/javascript"> function amountTotal() { // return sum of values to amount array total=0; for(var i=0; i<amount.length; i++) { // set variable to 0 total+=amount[i]; } return total; } </script> </head> <body> <div id="title"> <img src="logo.jpg" alt="The Lighthouse" /> The Lighthouse<br /> 543 Oak Street<br /> Delphi, KY 89011<br/> (542) 555-7511 </div> <div id="data_list"> <script type=”text/javascript”> // set up variables of rows and cellspaces document.write(“<table border=’1′ rules=’rows’ cellspacing=’0′>”); document.write(“<tr><th>Date</th><th>Amount</th><th>First Name</th>”); document.write(“<th>Last Name</th><th>Address</th></tr>”); for (i=0; i< amount.length; i++) { // create a loop in counter of variable starting at 0 and increase of 1 increments if (i%2==0) document.write(“<tr>”); else document.write(“<tr class=’yellowrow’>”); // have every row with a yellow background use a loop document.write(“<td>”+date[i]+”</td>”); document.write(“<td class=’amt’>”+amount[i]+”</td>”); // have values of the dates document.write(“<td>”+firstName[i]+”</td>”); document.write(“<td>”+lastName[i]+”</td>”); document.write(“<td>”); document.write(street[i]+”<br />”); document.write(city[i]+”, “+state[i]+” “+zip[i]); // zip arrays for address document.write(“</td>”); document.write(“</tr>”); } document.write(“</table>”); </script> </div> <div id="totals"> <script type=”text/javascript”> // use script elements in HTML document.write(“<table border=’1′ cellspacing=’1′>”); document.write(“<tr><th id=’sumTitle’ colspan=’2′>Summary</th></tr>”); document.write(“<tr><th>Contributors</th>”); document.write(“<td>”+amount.length+”</td></tr>”); document.write(“<tr><th>Amount</th>”); document.write(“<td>$”+amountTotal()+”</td></tr>”); document.write(“</table>”); </script> </div> </body> </html> thanks everyone if i wanted to create a code that takes the value of a textbox, multipliy it by itself what would i try to do?
hi all, i have tried some coding. it only works partly. the alert message box doesn't display. i am not sure of the error. pls help. <html> <head> <title> my firs web page </title> <script language="javascript"> function abc(){ alert("welcome"); } </script> </head> <body> <script language="javascript"> document.write("<h1 align=center> hesitation kills</h1>"); </script> <form name="form1"> enter your name:<input type="text" name="val"> <input type="button" name="submit" value="display" onlick="abc()"> <input type="button" name="color" value=" GREEN " onclick="document.bgColor='green'"> </form> </body> </html> thanks, breentha A short summary of what I'm trying to do is this: I manually charge credit cards for my bosses online business. Doing this requires me to manually enter information in from his websites back office in to a different browser, using "Navigate, Merchant Plus" (that's a site used for banking etc. and allows you to charge cards through it). I'll be the first to admit I know nothing about coding, and I was just doodling with it trying to see if there's a way to automate this. If I can get the code, I can give it to my boss and he can enter it into the website and have a button you can press to transfer the information out of the fields required to charge the card on to the navigate websites fields where you place the information. A sample of the code off of his website - one of the fields that needs to be transferred is this: <td class="main"><input name="update_info_cc_expires" size="4" value="0412" onChange="updateOrdersField('cc_expires', encodeURIComponent(this.value))"></td> The field it would need to go in to on the navigate is this: <tr> <td align="right" valign="top" width="43%">CVV Code:</td> <td align="left" valign="top"><input type="text" id="x_Card_Code" name="x_Card_Code" size="8" maxlength="6" /></td> </tr> ___________________________________________ So I'm unsure if this is the code needed to do what I'm talking about doing, but hopefully I've grabbed enough of the code for some pro to work with. If someone can tell me how to transfer just that one field in to the other, then I could apply it to the rest of the fields and save my boss the time on doing it, and make it a lot easier and less time consuming for me at work while I'm at it. Thanks and get back to me soon! I really appreciate anyone that takes the time to try to help. Let me know if I need to grab more code than what I did. The code below is part of a working program which inserts "tentpay" and date paid. I'm trying to add the code which is below the comment line(//*). It does nothing? can someone look at it? Code: function calculate_paid(v)
{
var rentdue = document.getElementById("rentdue");
var prevbal = document.getElementById("prevbal");
var misc = document.getElementById("misc");
var late = document.getElementById("late");
var amtpaid = document.getElementById("amtpaid");
var tentpay = document.getElementById("tentpay");
var hudpay = document.getElementById("hudpay");
var datepaid = document.getElementById("datepaid");
var late = document.getElementById("late");
var dateNow = new Date();
var dayNow = dateNow.getDate();
var datePaid = (dateNow.getMonth()+1)+"/"+dateNow.getDate()+"/"+dateNow.getFullYear();
switch(v)
{
case amtpaid:
var tpay = amtpaid.value - hudpay.value;
if(tpay >= 0){tentpay.value = tpay;}
if(amtpaid.value > 0){datepaid.value = datePaid;}
break;
case tentpay:
if(!hudpay.value || hudpay.value == " "){hudpay.value = 0;}
if(!tentpay.value || tentpay.value == " "){tentpay.value = 0;tentpay.select();}
amtpaid.value = parseInt(tentpay.value) + parseInt(hudpay.value);
if(tentpay.value > 0){datepaid.value = datePaid;}
break;
case hudpay:
if(!tentpay.value || tentpay.value == " "){tentpay.value = 0;}
if(!hudpay.value || hudpay.value == " "){hudpay.value = 0;hudpay.select();}
amtpaid.value = parseInt(tentpay.value) + parseInt(hudpay.value);
if(hudpay.value > 0){datepaid.value = datePaid;}
break;
//*
case prevbal:
var balance = parseInt(rentdue.value) + parseInt(prevbal.value) + parseInt(misc.value) - parseInt(hudpay.value);
if(amtpaid.value < balance.value){
prevbal.value = parseInt(balance.value) - parseInt(amtpaid.value);}
if(dayNow.value > 5){late.value = "L";
prevbal.value = prevbal.value + 10;}
break;
}
}
Okay, I'm actually just starting out Javascript so I thought you guys could hopefully help me with a bit of a newb question. I'm trying to start a comic website, and in the process of trying to make the "Previous" and "Next" buttons. Code: <div id="content"> <div id="control"> <div id="prev" style="cursor:pointer" onclick="changeComic()"> <h5>previous</h5> </div> <div id="next" style="cursor:pointer" onclick="comicChange()"> <h5>next</h5> </div> </div> <img id="comic" src="/images/comics/page005.png" alt="there is no alt"> </div> I'm not sure what the Javascript should be really. What I want is, everytime someone clicks the "Previous" button, the src of the img should change from 005 to 004, basically it's just subtracting a "1" from the img src, and the "Next" button does the opposite and adds a "1" to the img src. In my javascript code I have to type in a number in a textbox then click a button. When the button is pressed a popup message will come up displaying the number I typed in the text box. I have no clue how to do it, could someone give me an example? Thanks. P.S. I can't use a prompt. I found this code online to create a like/send buttons for Facebook to put under my posts on my website. When the user clicks "Like" or "Send" I want the content tags from the website to be automatically input into the user's Facebook post: so the Facebook plug-in/post function will attach the picture and link to the site, and have the tags (already associated with the picture within my site's coding) automatically entered as text into the post. I'm not a programmer and thought this might be a good place to get some help. Does something like this already exist that can be altered/edited? I am not familiar with this, and I'm having difficulty trying to explain it. Here is the code I have so far. <!-- Facebook Like+Send script Start --> <b:if cond="data:post.isFirstPost"> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> </b:if> <!-- Facebook Like+Send script End --> <!-- Facebook Like+Send button Start --> <div style='float:left;padding:5px 5px 5px 0;'> <fb:like expr:href='data:post.url' font='' layout='standard' send='true' show_faces='false' width='450' colorscheme='light'></fb:like> </div> <!-- Facebook Like+Send button End --> Right I have written some code very similar to this, and then found the similar code somewhere else, and what I want to do, is to be able to call a couple of different scripts into the one script, I have been at this since 9am uk time and I am bashing my head against a brick wall. Code: <script type="text/javascript">
function Msg1(){
document.getElementById('myText').innerHTML = '<script src="page1.js" type="text/javascript"></script>';
}
function Msg2(){
document.getElementById('myText').innerHTML = '<script src="page2.js" type="text/javascript"></script>';
}
</script>
<input type="button" onclick="Msg1()" value="Show Message 1" />
<input type="button" onclick="Msg2()" value="Show Message 2" />
<p id="myText"></p>
As a personal note, I have asperger (a form of Autism) and ADHD, and I cant sleep until I can either get this to work, or someone who has more of an idea what I am trying to do tells me your not going to get it work, any help will be appreciated Hey, I am new to coding. I'm learning Java, but I'm wondering if that's the first language I should learn, or should I study something else first. Any help would be very appreciated. I would like to learn how to make software programs, design websites, and hopefully develop video games.
I had it working at school but im messing something up here, pretty much whats supposed to happen is I have a page full ofpictures, and when I hover over 1 all of them are supposed to go transparent except for the image highlighted, can anyone point out whats wrong? Also im using mozilla, i dont understand whats wrong, its something with the for statement because the function itself is working as it should. Code: function into(whoseCalling)
{
document.getElementById(whoseCalling).style.borderStyle = "double";
document.getElementById(whoseCalling).style.borderTopColor = "blue";
document.getElementById(whoseCalling).style.borderBottomColor = "red";
document.getElementById(whoseCalling).style.borderLeftColor = "yellow";
document.getElementById(whoseCalling).style.borderRightColor = "green";
document.getElementById(whoseCalling).style.borderWidth = "8px";
for (i=0; i<30; i++)
{
document.getElementById("img" +i).style.opacity = ".5";
}
}
I am trying to build a simple test/questionnaire where the user inputs answers into a form. These answered are then checked with stored data in arrarys to see if they are correct or not. At the end the score is totaled and given to the user PROBLEM im confused at to how to structure the code and also am aware that i am missing several coding functions ect e.g. i know that i need to use 'getelementbyid' somewhere. ANY HELP WOULD BE APPRECIATED, THANK YOU CODE Code: <html>
<script language="text/JavaScript">
function checkanswer()
{
if (q1==answer[0])
{
alert('Right well done u got it correct')
}
else
{
alert ('unlucky you got it wrong')
}
answer = new Arrary();
answer[0] = "blue";
answer[1] = "green";
answer[2] = "red";
</script>
<body>
<form action="qform">
question 1: <input type="text" id="q1" value="" /> <br />
question 2: <input type="text" id="q2" value="" /> <br />
question 3: <input type="text" id="q3" value="" /> <br />
<input type="submit" value="submit" />
</form>
</body>
</html>
ok im new to coding and was woundering is there a way to open up a game through a program that could have an attached macro or anything.. like for example i would have a racing game that u need to shift and i open it with the coded program and it shifts like an automatic. i sorry if its in the wrong section . thanks On my blog, www.finkfinance.com, it loads but with the filing Javascript error: --- Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; MDDS; InfoPath.2; .NET CLR 3.5.30729; .NET CLR 3.0.30729) Timestamp: Tue, 6 Oct 2009 20:30:42 UTC Message: 'offsetParent' is null or not an object Line: 44 Char: 3 Code: 0 URI: http://www.finkfinance.com/wp-conten...tepcarousel.js --- Does anyone know how I can fix this? I'm not a web coder and I'm lost when I open up the stepcaraousel.js file. So, I have a situation in which I have a parent div.. <div id="parent"> </div> On page load that is empty but I have to make an ajax call to grab some XML and populate some structured elements. These elements, could be a few, need to then be appended into the "parent" div. Basically, read in the data, format it then innerHTML or bottom it to parent div. The thing is.. I have access to the prototype library and I can only think of the easy way of.. grab the nodes in the xml and use "new element" to create the display and slot in the xml data. THEN append it to parent and just loop thru the xml nodes and repopulate, append etc.. till done. But I am thinking this is old school. Is there a better, more robust, classier way of doing this. Is there a way to actually "pre=code" the display (and just style hide it) and "read in via jascript" the display and slot in the xml values and append it, then "show" it. like clone it, display it - etc... Something is telling me I can create a display object and slot the xml into it, append it and then keep calling to this display object. but not sure how to begin.... Dear all, I am new here. Need a bit of help. In my company, we have a form that sends an email to a specific address, which is actually our internal helpdesk ticketing system. What we want to do is to make the address of the internal helpdesk ticket system show the person's email address, which is the Requestor_id as mentioned below. This webpage is running on Frontpage Server Extensions. However, when i insert the script in red and tested it on the server, it says that frontpage cannot send out this form due to some errors. Appreciate any form of assistance... Code: <form method="POST" action="--WEBBOT-SELF--" onsubmit="return FrontPage_Form1_Validator(this)" name="FrontPage_Form1" language="JavaScript">
<!--webbot bot="SaveResults" startspan S-Email-Format="HTML/BR"
B-Email-Label-Fields="TRUE" B-Email-Subject-From-Field="FALSE"
S-Email-Subject="ISP Local User Access" S-Builtin-Fields=""
U-Confirmation-Url="../../SuccessMessage.htm"
U-Validation-Error-Url="../../FailureMessage.htm"
S-Email-Address="Reportticket.GlobalServiceDesk@pr1.xxx.com"
S-Email-ReplyTo="<script type="text/javascript">
document.getElementById('Requestor_Email').value;
</script>" --><input TYPE="hidden" NAME="VTI-GROUP" VALUE="0"><!--webbot
bot="SaveResults" endspan i-checksum="43374" -->
Hello everybody, I have a nice search engine but its seems i can't put it twice on the same page: Code: <script language="JavaScript">
function startSearch(){
searchString = document.searchForm.searchText.value;
if(searchString != ""){
searchEngine = document.searchForm.whichEngine.selectedIndex + 1;
finalSearchString = "";
if(searchEngine == 1){
finalSearchString = "http://www.altavista.digital.com/cgi-bin/query?pg=q&what=web&fmt=.&q=" + searchString;
}
if(searchEngine == 2){
finalSearchString = "http://av.yahoo.com/bin/query?p=" + searchString + "&hc=0&hs=0";
}
if(searchEngine == 3){
finalSearchString = "http://www.excite.com/search.gw?trace=a&search=" + searchString;
}
if(searchEngine == 4){
finalSearchString = "http://www.hotbot.com/?SW=web&SM=MC&MT=" + searchString + "&DC=10&DE=2&RG=NA&_v=2&act.search.x=89&act.search.y=7";
}
if(searchEngine == 5){
finalSearchString = "http://www.infoseek.com/Titles?qt=" + searchString + "&col=WW&sv=IS&lk=noframes&nh=10";
}
if(searchEngine == 6){
finalSearchString = "http://www.lycos.com/cgi-bin/pursuit?adv=%26adv%3B&cat=lycos&matchmode=and&query=" + searchString + "&x=45&y=11";
}
if(searchEngine == 7){
finalSearchString = "http://netfind.aol.com/search.gw?search=" + searchString + "&c=web&lk=excite_netfind_us&src=1";
}
location.href = finalSearchString;
}
}
// -->
</script>
<basefont face="Verdana, Arial, sans-serif">
<form name="searchForm">
<table width=320 border cellpadding=3 cellspacing=2 bgcolor=444444>
<tr>
<td bgcolor=lightblue><font size=1 face="Verdana, Arial, sans-serif">Search for:<br>
<td bgcolor=lightblue><font size=1 face="Verdana, Arial, sans-serif">Search from:
<td bgcolor=lightblue>
<tr>
<td bgcolor=navajowhite><input style="background: dddddd" name="searchText" type="text">
<td bgcolor=navajowhite>
<select style="background: dddddd" name="whichEngine">
<option selected>Altavista
<option>Yahoo!
<option>Excite
<option>Hotbot
<option>Infoseek
<option>Lycos
<option>AOL Netfind
</select>
<td bgcolor=navajowhite><input type="button" value="Send" onClick="startSearch()">
</select>
</table>
</form>
Can someone tell me how to put the code twice in the html page without creating a conflict as a result of identical codes? |
|||||||