|
JavaScript - Conflicting Javascript Coding
I am an amateur web designer and could really use your help.
I'm working on a test page right now (http://www.piscatawayacres.com/test.html). I'm trying to have 3 effects going on at the same time, but due to my inexperience with Javascript (I, in fact, copied and pasted most of it), I can't get them to work. To complicate things, my test page works to a certain extent, but when I copy and paste the coding to other pages (like alpacas.html, sheep.html, goats.html, etc.) it ceases to work. I have no idea why it does this. The 3 effects I want to have work: 1. Javascript rollover buttons. 2. A Javascript slideshow--the square picture above the buttons should be changing. 3. I want the image and the buttons to follow the user down the page as they scroll. For some reason though, the buttons (on the couple of pages they work at all) cease to work except at the very top of the page or the very bottom, but not in between. I've been struggling with this obstacle for a long time, so I would greatly appreciate any help someone could give. Thanks so much for your help. PAC P.S. I want to emphasize that some of the coding works on the test.html page, but WON'T work when I copy and paste it elsewhere. I can only assume it is because of conflicts with the coding. I know my coding is not flawless.... Similar TutorialsHi there, I am having trouble getting two javascript's to work at the same time. I am creating a long page that uses anchor links and the jquery.js to scroll the page to these. I am also trying to use lightbox.js to generate a 'contact us' form in a lightbox. Each function works stand alone but not when combined. The head of my html looks like this... Quote: <!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> <title>Acudrill | Specialists in Diamond Core Drilling and Sawing</title> <meta name="keywords" content="acudrill, core diamond drilling, diamond sawing, chasing, lintel installation and erection, " /> <meta name="description" content="Acudrill - Specialists in Diamond Core Drilling and Sawing" /> <meta name="Creation Design and Communication Ltd" content="Acudrill" /> <!-- CSS --> <link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen,projection"/> <link rel="stylesheet" type="text/css" href="css/text.css" media="screen,projection"/> <link rel="stylesheet" type="text/css" media="all" href="css/901_12_25.css" /> <!-- JavaScript --> <script type="text/javascript" src="scripts/prototype.js"></script> <script type="text/javascript" src="scripts/lightbox.js"></script> <script type="text/javascript" src="jquery.js"></script> <script> function goToByScroll(id){ $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow'); } </script> </head> The prototype.js and lightbox.js work fine together but the scrolling (jquery.js) does not. When removing the prototype.js and lightbox.js the jquery.js functions. I'm sure I'm just confusing everyone but I hope you can see what I mean. The functions are to run when selecting from the navigation... Quote: <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="javascript:void(0)" onClick="goToByScroll('1')">Home</a></li> <li><a href="javascript:void(0)" onClick="goToByScroll('2')">Services</a></li> <li><a href="javascript:void(0)" onClick="goToByScroll('3')">Case Studies</a></li> <li><a href="contact.html" class="lbOn">Contact</a></li> <li><a href="#"><orange>Acublog</orange></a></li> </ul> </div> You can see how each link should scroll to a section of the page, apart from contact that should bring up a lightbox. Hope some one can help me with this. Thanks, p.s I have read this article but this has not helped as the scripts do not include 'onLoad" Hi All, I have been racking my brain over this the last few days, and am hoping I can get help with an issue I am having. The website i am working on is using Wordpress as a CMS. I created a custom splash page that features 3 tabs that operate using CSS/Javascript to show and hide content in DIVs. One of those DIVs contains the login form to the rest of the site, and is housed in a sub-DIV generated by short code from a plugin. I am no expert with JavaScript, but understand that its code displays a given div while hiding the others, by telling the active div to Code: display:block; and the inactive ones to Code: display:none; . The problem is that the div that contains the login form, which has a plugin-generated div within it, is being hidden, so that when the page is loaded, everything appears, but when you click the other tabs and return to it, it disappears. You can see what I mean by going to http://le-raq.com/test/tab. For whatever reason, the sub div is being told to Code: display:none; (as verified by Firebug). Any idea of what code i can put in to stop this? Im banging my head against a wall here. Here is the code to the site as reviewed in Firebug: Code: <script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>LE-RAQ.com | Independent Street/ Urban Wear</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="http://le-raq.com/home.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://le-raq.com/site/wp-content/themes/theunstandard/cufon-yui.js" type="text/javascript"></script>
<script src="http://le-raq.com/site/wp-content/themes/theunstandard/League_Gothic_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('#plink', {hover: true});
Cufon.replace('.links', {hover: true});
Cufon.replace('#slink', {hover: true});
</script>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?t=160852
function show_visibility(IDS){
hide_visibility();
document.getElementById(IDS).style.display = 'block';
}
function hide_visibility(){
var sel = document.getElementById('lnks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
}
</script>
</head>
<body>
<div id="maindivbox">
<div id="leftbox">
<script type="text/javascript"><!--
var img = new Array();
img.push("http://www.le-raq.com/indeximages/SplashLEFT2.png");
img.push("http://www.le-raq.com/indeximages/splashslide2.png");
var num = 1;
for(i=0;i<num;i++) {
rand = Math.floor(Math.random()*img.length);
document.write("<img src=\"" + img[rand] + "\" />");
}
//--></script>
<br><br>
<center><iframe src="http://www.facebook.com/plugins/like.php?href=facebook.com/pages/le-raqcom/148545595176936&layout=standard&show_faces=true&width=450&action=like&font=segoe+ui&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe></center>
<br><center><p style="font-family:'Arial Black', Gadget, sans-serif; font-size:9px;">Copyright © 2010 LE-RAQ.com, a division of <a href="http://nxtlvl-media.com">NXTLVL Media, LLC</a> - All Rights Reserved</p></center>
</div>
<div id="rightboxtop" align="left">
<img src="http://www.le-raq.com/smlogo.png" style="margin-top:10px;"></img>
</div>
<div id="middlerightbox" >
<div style="width:100%; height:30px; margin-bottom:10px;"" align=center>
<p id="slink" style="margin-top:10px;"> <a href="#login" onclick="show_visibility('logintab')" class="tab">LOGIN</a> | <a href="#subscribe" onclick="show_visibility('subscribe')" class="tab">SUBSCRIBE</a> | <a href="#howitworks" onclick="show_visibility('howitworks')" class="tab">HOW</a></p>
</div>
<div id='lnks' style="margin-top:35px;">
<!--LOGIN/REGISTER-->
<DIV id="logintab" style="margin: 20px 20px; display: block;">
<li><h2>Welcome, Administrator</h2>
<div class="login" id="theme-my-login1">
<div class="tml-user-avatar"><img alt='' src='http://0.gravatar.com/avatar/c6cdbf9cbd96c836560d6031fc24027d?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G' class='avatar avatar-50 photo' height='50' width='50' /></div>
<ul class="tml-user-links"><li><a href="http://le-raq.com/test/wp-admin/">Dashboard</a></li>
<li><a href="http://le-raq.com/test/wp-admin/profile.php">Profile</a></li>
<li><a href="http://le-raq.com/test/?action=logout&_wpnonce=d9d35f125f">Log out</a></li>
</ul>
</div></li>
</DIV>
<!--END LOGIN/REGISTER-->
<!--Subscribe-->
<DIV id="subscribe" style="margin: 20px 20px; display: none;">
<P id="plink" style="margin-top: 20px; margin-left: 10px; color:#FFFFFF;"> SIGN UP FOR OUR FREE PRE-LAUNCH<BR>NEWSLETTER, AND GET FIRST DIBS ON THE<BR>HOTTEST APPAREL AND DEALS!!<br><br>JOIN NOW AND YOU CAN ALSO EARN UP TO $15*!!</P>
</DIV>
<!--END Subscribe-->
<!--Howitworks-->
<DIV id="howitworks" style="margin: 20px 20px; display: none;">
</DIV>
<!--END Howitworks-->
</div>
</div>
<div id="rightboxbottom">
<p style="font-family:'Arial Black', Gadget, sans-serif; font-size:9px; margin-top:10px;">*<strong>THE FINE PRINT</strong>: Offer available to only the first 1,500 Subscribers. Earn $10 in store credit for signing up with LE-RAQ.com and an extra $5 in store credit for inviting a friend, to a limit of $15 store credit. Offer may end without notice.<br><br>
PRIVACY NOTICE: Your privacy is important to us. Therefore, we will not sell or rent your information to anyone else for any reason.<br> QUESTIONS?: Contact <a href="mailto: info@le-raq.com">info@le-raq.com</a> </p>
</div>
</div>
<script src="chrisdomroll.js">
/****************************************************
* DOM Image rollover v3.0: By Chris Poole http://chrispoole.com
* Script featured on http://www.dynamicdrive.com
* Keep this notice intact to use it :-)
****************************************************/
</script>
</body>
</html>
<!-- Dynamic Page Served (once) in 0.749 seconds -->
Thanks in advance!! I have some kind of conflict in my Javascript he http://www.SonomaCountyFamilyLaw.com Drop down menu pops up when one scrolls over "Family Law," but rollover images do not load on other menu items as they should I am relatively new to Javascript; would much appreciate any assistance. Thank you kindly.... Here is the code in question: Code:
<script type="text/javascript">function mmLoadMenus() {
if (window.mm_menu_0514172011_0) return;
window.mm_menu_0514172011_0 = new Menu("root",298,24,"Arial, Helvetica, sans-serif",14,"#FFFFFF","#020056","#3C3A7D","#FFFFFF","left","middle",5,0,100,-5,7,true,true,true,5,true,true);
mm_menu_0514172011_0.addMenuItem("DIVORCE","location='divorce.html'");
mm_menu_0514172011_0.addMenuItem("CUSTODY","location='custody.html'");
mm_menu_0514172011_0.addMenuItem("ADOPTION/GUARDIANSHIP","location='adoption.html'");
mm_menu_0514172011_0.addMenuItem("PRIVATE JUDGING & SETTLEMENTS","location='private.html'");
mm_menu_0514172011_0.hideOnMouseOut=true;
mm_menu_0514172011_0.bgColor='#FFFFFF';
mm_menu_0514172011_0.menuBorder=1;
mm_menu_0514172011_0.menuLiteBgColor='#FFFFFF';
mm_menu_0514172011_0.menuBorderBgColor='#434089';
mm_menu_0514172011_0.writeMenus();
} // mmLoadMenus()var switchTo5x=false;
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
menu_02_over = newImage("assets/menu_02-over.jpg");
menu_06_over = newImage("assets/menu_06-over.jpg");
menu_08_over = newImage("assets/menu_08-over.jpg");
menu_10_over = newImage("assets/menu_10-over.jpg");
menu_12_over = newImage("assets/menu_12-over.jpg");
menu_14_over = newImage("assets/menu_14-over.jpg");
preloadFlag = true;
}
}
// -->
</script>
<!-- End Preload Script -->
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher:'04ce05ad-19c3-4812-98d3-7e46a3d579db'});</script>
<script language="JavaScript" src="mm_menu.js" type="text/javascript"></script>
</head>
<body onload="preloadImages();">
<script language="JavaScript1.2" type="text/javascript">mmLoadMenus();</script>
hey all, I'm using a js script for horizontal scrolling as well as a little script that changes the class of a tag when it's clicked, but the latter doesn't work with the horizontal scrolling script. not really sure why, i'm pretty new to javascript, any help would be awesome.. here's the horizontal scrolling: http://code.google.com/p/wplatformer...5e4d03a48bfc07 and the onclick change: <script language="JavaScript" type="text/javascript"> /*<![CDATA[*/ var Lst; function CngClass(obj){ if (Lst) Lst.className=''; obj.className='selected'; Lst=obj; } /*]]>*/ </script></head> <body> <style type="text/css"> #nav .selected { opacity:1.00;} </style> <div id="nav"> <a href="#home" id="hlink" onClick="CngClass(this);" style="margin-left:130px">home</a> <a href="#foamo" class="flink">foamo</a> <a href="#book" class="blink">book</a> <a href="#portfolio" class="plink">portfolio</a> <a href="#contact" class="clink">contact</a> </div> </body> I'm trying to get a javascript lightbox and a background image resize script to work on the same webpage but one's causing the other to work incorrectly. If anyone can help combine the 2 into a working script it would be hugely appreciated: <!-- BG script --> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> <script type="text/javascript" src="supersized.2.0.js"></script> <script type="text/javascript"> $(function(){ $.fn.supersized.options = { startwidth: 640, startheight: 480, vertical_center: 1, slideshow: 0, }; $('#supersize').supersized(); }); </script> <!-- lightbox script --> <script type="text/javascript" src="imagezoom.js"></script> <script type="text/javascript" src="mootools-1.2.4-core-yc.js"></script> <link href="imagezoom.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> window.addEvent("domready", function() { initImageZoom(); }); </script> Im pretty sure I have some javascript conflicts on my site. Can any one offer advice on how to correct this. Heres a link to a page where there are problems. Every time I refresh that page in IE8 it loads differently - sometimes it loads OK and others it stops loading before the end - a symptom of the js problems I believe? http://tinyurl.com/ocqsmv I am adding a Facebook Like button to my website using their JavaScript SDK. Everything looks good in Firefox, but in Internet Explorer 8 I'm getting a page error, and after the Like button is pressed, it produces a white box underneath, obscuring the next several lines (despite adding a height parameter). The error message says: Message: Object doesn't support this property or method XFBML Line: 16 Char: 2517 Code: 0 URI: http://static.ak.facebook.com/connec.../Connect/XFBML I experimented with a blank page http://www.positivelyfeminine.org/re.../cd/blank1.htm and everything looked fine until I added the Intense Debate code. So, I think there is some kind of conflict between the Facebook and the Intense Debate code but can't figure out where. Any suggestions would be appreciated! I am wanting a script to find and replace numbers in text it is not working for me so will someone help? I believe that this will work. Code: findAndReplace('(1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31|32|33|34|35|36|37|38|39|40|41|42|43|45|46|47|48|49|50|51|52|53|54|55|56|57|58|59|60|61|62|63|64|65|66|67|68|69|70|71|72|73|74|75|76|77|78|79|80|81|82|83|84|85|86|87|88|89|90|91|92|93|94|95|96|97|98)', '(d)');
However, I need the variable a to equal whatever number it finds. (e.g. 27 --> a=27) I have no idea on how to do that These are theformulas that i need it to do Code: var a = _____ var b = 100 - a var c = 17932 % b var d = a + c 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" -->
I have a code that I implemented on my site. I was wondering if there was a way to had an active link within the 'blurb' section? I'm not familiar with Javascript... var blurb = new Array(); blurb[0]="Text 1" blurb[1]="Text 2" blurb[2]="Text 3" blurb[3]="Text 4" blurb[4]="Text 5<br>More text<br>Add a link" blurb[5]="www.link.com" for (i=0; i < aryImages.length; i++) { var preload = new Image(); preload.src = aryImages[i]; } function swap(imgIndex) { document['imgMain'].src = aryImages[imgIndex]; TheText = blurb[imgIndex]; document.getElementById('blurbarea').innerHTML=TheText; } Any help would be great!! I'm not a coder myself but I could use some help and am willing to pay if it's within reason. It's for a site I'm putting together for a hobby of mine. Here's a description of what I need done: http://masterengraver.com/ambigrams/test.html Please drop me an email with price for your time if you can do this. Thanks! / ~Sam I have a basic Javascript slideshow that flicks through a series of 6 jpg images very quickly. I also have a button that i need coded so that when a user clicks on the button, the script for the slide show slows down the speed of the flicking images slowly over the coarse of ten seconds and stops on an image. How do i go about coding the button in javascript? I hope this makes sense. Thankyou Here is my code so far. var i, imgs, pic; function rotate() { pic.src=imgs[i]; (i===(imgs.length -1))? i=0:i++; setTimeout(rotate,500); } function diceroll() { pic=document.getElementById("yes"); imgs=["photo1.jpg", "photo2.jpg","photo3.jpg","photo4.jpg","photo5.jpg"]; var preload=new Array(); for(i=0;i<imgs.length;i++) { preload[i]=new Image(); preload[i].src=imgs[i]; } i=0; rotate(); } Okay, I am relatively new to Java and am going to be taking a class on it next fall. For now though, I am trying to code for a client I am currently working with and am hopelessly lost. The client I am working with has an ecommerce site with Network Solutions which uses aspx. It allows you to code html and link to css, java (pretty much anything except php). The problem I am having is that they currently have their product descriptions coded in div tags: <div id='alternatebg'> <div id='detailsgreybox'><div id='alternatename'><p>Alternate Name</p></div></div> <div id='pd2'><p>Not Available</p></div> </div> <div id='usebg'> <div id='detailsgreybox'><div id='use'><p>Use</p></div></div> <div id='pd3'><p>Chemicals</p></div> </div> What they want to happen is for the sections that have 'Not Available' as the answer to not show up on the live page. I have tried to use <ns:if condition="..."> but do not know how to call for it to see if the div says 'Not Available'. Any help is greatly appreciated as I can not move forward until I can figure this out. Hi Experts, I'm new to this forum and need your help regarding javascript. I am creating a roster for my team with a web interface. Ex: A picture is attached for your reference The time is in IST (+5:30) I have created a drp down list which has PST, EST,CST time. I need to write a code so that whenever I select any of these times (PST,EST,CST, MST, IST) , it should automatically update the table. Please help. Regards, Indy Hi, I'm fairly new to javascript & am trying to learn it using best methods. I have been using various books & some video tutorials, such as lynda.com. I've noticed when I do google searches for example tutorials, 9 times out 10, the javascript has been coded into the html file. As a newbie I find it takes a very long time to redo the coding into the separate .js file. And if the coding is relatively complex (and most of it appears that way to someone new to this) I can't get it too work using a separate file for the javascript. I wanted to ask anyone very familiar with this, their suggestions regarding good places for tutorials where the .js file is separated. Apparently there are advantages to having it separate and it's considered best practices from what I've come to understand. Also most of the results from google searches pulls up out-dated coding and/or tutorials that suggest you should already understand what is being referred too. I'm trying to avoid learning it the wrong way. I'm willing to put in the effort, however I don't want to pick up bad habits. Any help is very appreciated. If this was not as clear as I intended it to be, please ask any specifics and I'll try my best to answer. -Todd Hi, I'm still in the early stages of learning Javascript so I'm not sure how (or if it's possible) to do this. I know HTML, CSS, etc... just not too familiar with Javascript. Here's the deal.... I run a website that features a chat room written in Perl for CGI. The chat room will automatically email a user their password if it's forgotten but there is one issue.....it does not have the "Forgot Password?" link. To achieve the Lost Password page, the user must enter an invalid password FIRST on the login screen, otherwise they cannot get to that option and are often requesting assistance. What I had in mind was an easier way for the user to get their password since new novice members are not sure how to get to the lost password page. I'm not trying to edit the Perl code for the chat, but I wanted to build a "Forgot Password?" page using a Javascript code that will automatically take their username from the "username" login field and direct them to the lost password page which would be "chat2.cgi?action=send_pwd&name=..." I'm sorry if this is confusing, I'm not sure that I am explaining this right. When the user enters an invalid password, it takes them to the lost password page which contains a link "lost password" and will automatically email them their login details when clicked on. When they click that link, the URL contains the string "chat2.cgi?action=send_pwd&name=username" What I would like to do is put a link on the login page (like most normal chat rooms have) that says "Forgot Password?". When clicked on, I want it to take them to a page where all they have to do is enter their username in a form and click Submit, then have a Javascript code automatically extract their username from that field and insert their username automatically to the end of that URL (chat2.cgi?action=send_pwd&name=...) where ... would be the name extracted from that form field. This would result in the browser taking them to that URL which would trigger the chat to automatically email the password. Can I do this with Javascript?? If so, any help would be greatly appreciated! I'm working on a new custom theme for my WordPress based site, and up until now I've been using the following PHP code to color code links based on whether the post was in the "Wii" category, "Xbox" category, or "PlayStation" category: PHP Code: <li> <?php if (in_category(3) ) { ?> <a style="color:#990000;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? }elseif (in_category(4) ) { ?> <a style="color:#669900;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? }elseif (in_category(7) ) { ?> <a style="color:#0099cc;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? } else { ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? } ?> </li> Thing is, I've now installed a plugin called "Recently Popular" that logs all visits and can output which posts were viewed the most in the past X days/weeks/months/etc. and the author has it set up to only allow HTML formatting via this line: PHP Code: <?php get_recently_popular(1, 'WEEK', 5, 0, 0, '<a href="%post_url%" rel="bookmark" title="%post_title%">%post_title%</a>'); ?> I've tried sticking PHP in the line, but it only takes HTML. I've tried sticking one of these lines in each of the conditional statements above, but realized that this line outputs the entire "Recently Popular" list, not just one item - so everything would end up being the same color still. I contacted the plugin author, who said that without hardcoding there's no way to get around this via the plugin, but that outputting it normally and running it through JavaScript might give me a way to apply CSS styling to it after it's been rendered. I'm not experienced with JavaScript, unfortunately... does anyone know how I can do this? Hello, I'm new to this forum. I want to improve my ability to write JavaScript and am looking for a friendly place to find some constructive criticism and suggestions on my code. This script does not have any practical use (that I can think of); it calculates prime numbers. It is just an exercise. I am looking for suggestions on all aspects from the CSS/aesthetics to the HTML and of course the JavaScript. I posted the script here. One definite thing that bugs me is the cursor is not in the text field when the page loads. Also it would be better if the user had the option of hitting the return key in addition to the submit button. Suggestions appreciated. Code: <!DOCTYPE html>
<html lang="en">
<head>
<title>Prime Number Calculator</title>
<style type="text/css">
form{
width: 200px;
border: solid 3px blue;
border-style: double;
padding:5px;
text-align:center;
background-color:#eee;
}
#title{
text-align:center;
border: solid 1px blue;
background-color:#fff;
margin:5px;
padding:0px;
}
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var candidates = new Array();
function calculatePrimes(form){
var max = form.input.value;
//Check to make sure input is a number
if(isNaN(max)){
alert("Dude, you must enter a number!");
}
for(i=2; i<=max; i++){candidates[i]=i;}
var i=2;
for(i=2; i<Math.sqrt(max); i++){
if (candidates[i]!=0){
var j=i*i;
while(j<max){
candidates[j] = 0;
j=j+i;
}
}
}
//Pull the primes out of the candidates
i=2;
var primesOut = "";
for(i=2; i<max; i++){
if(candidates[i]!= 0){
primesOut = primesOut + ((i>2)?", " : "" ) + candidates[i];
}
}
form.output.value = primesOut;
}
</script>
<head>
<body>
<form>
<h2 id="title">Prime-Number Calculator</h1>
Check up to:<input type="text" name="input" size="5" value="100" \> <br />
<textarea rows="5" cols="20" name="output"></textarea>
<input name="calc" value="Find!" type=button onClick="calculatePrimes(this.form)">
</form>
</body>
</html>
Hi I have been trying to create a form using Django for a very long time but have not been able to get it to look the way I want. Someone suggested to me that I should use Javascript (Jquery) to do this. Here's what I want to do. For the form I want, there are certain statuses at the bottom, like "Done", "Incomplete" and etc. When the form is filled in, the person will click on one of these statuses. What I want this button to do is to save the page/form and also to generate a few new links relating to the status selected. For example, if the person selects "Done" this should save the form and generate two new buttons. One that says "Close" which would take you to the home page, and one that says "Continue" which would take you to the next form. My problem is that I'm new to Django and have no experience with Javascript. So if anyone could help or give me hints that would be greatly appreciated. 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 |
|||||||