|
JavaScript - How Would You Answer This Question[code]
eeeeeee
Similar TutorialsHi I need a java script code that it allow users to post their questions and I can answer them . How can I do so ? Best regards Hey guys, basically Im creating a webpage for my univeristy degree, and I've decided to script a quiz, basically there will be several multi choice questions, and these will add to one answer, heres an example: Whats your favourite genre of music? (choice1) (choice2) (choice3) Whats your favourite favourite musical instrument? (choice1) (choice2) (choice3) etc answer = blahblahblah Heres my questions code here, as you can see im using values, im trying to create the answers by adding the values up, for example answer 1=5 2=10 3=100 <div id="quiz"> <h4> 1) What is your favourite genre of music?</div> <div class="qselections"> <input type="radio" value="1" name="question1">a)Rock<br> <input type="radio" value="2" name="question1">b) Punk<br> <input type="radio" value="3" name="question1">c) Metal<br> <input type="radio" value="4" name="question1">d)Electronica/Dance/Club<br> </div> <br> <div class="qheader"> 2) What is your favourite decade of music></div> <div class="qselections"> <input type="radio" value="1" name="question2">a) 60's<br> <input type="radio" value="2" name="question2">b) 70's<br> <input type="radio" value="3" name="question2">c) 80's<br> <input type="radio" value="4" name="question2">d) 90's<br> <input type="radio" value="5" name="question2">d) 00's<br> </div> <br> <div class="qheader"> 3) Which is your favourite instrument?</div> <div class="qselections"> <input type="radio" value="1" name="question3">a) Guitar<br> <input type="radio" value="2" name="question3">b) Drums<br> <input type="radio" value="3" name="question3">c) DJ Decks<br> <input type="radio" value="4" name="question3">d) Piano<br> </div> <br> <div class="qheader"> 4) Do you prefer handheld or console?</div> <div class="qselections"> <input type="radio" value="1" name="question4">a) Handheld<br> <input type="radio" value="100" name="question4">b) Console<br> <h4> </div> Im just curious how to script this? I havent done anything this difficult before, Im wondering how I would code this.. The only quiz I have done before is via prompts, any help will be much apprieciated! P.s feel free to ask any questions if it is to help! hey guys i'm very new to javascript and am learning all of it from the internet so i couldn't find any place with what i wanted my problem is: i want to have a variable that if its == to x or y it gives 1 thing and if else its another this is what i got #code# function woo() { ret = prompt("What's Your Name?"); if (ret == 'x','y') { alert ("hey " + ret + ", now try a random name") } else { alert ("No.. " + ret + " isn't your name. Try again") } } #/code# so the problem with that is, it always gives me the first option almost like every answer is the correct one and not just x,y imo the problem is with the line if (ret == 'x','y') so how do i write more than 1 answer to the "if" command? I have been asking around other forums for this question....no one seems to be able to help. But reading through here you guys seem quite a bit smarter and I'm sure you can point me in the right direction What I need is a simple loading page that is for LOOKS only...the site I am redirecting to is very small and does not take very long to load...but for marketing purposes a loading page will make my business strategy look much more legit. I am linking to an affiliate page with a discount link. The problem is most people aren't actually sure if the discount link works...so I want to make a loading page where it says something like "Activating Discount". SO basically I have: My website>>>(link)>>>HTML Loading Page>>>(Redirects after 5 sec or so)>>>Afilliate Landing Page I'll put a loading wheel on the page like this one: But what I really want it to do is switch the messages its displaying so maybe it says "Loading Site Content" for 1 second then switches to "Activating Discount" for 1 second then switches again to "Validating Referrer" or something like that. THANK you so much for any help you can give me You guys rock! I have just used an Analysis Quiz tool (on this page http://javascript.about.com/library/blquizf.htm) to create a quiz which doesn't have right or wrong answers but adds the scores of the answers together. It all works nicely, HOWEVER I require 5 answers as opposed to the maximum of four which has been offered on this site. The (partial) code is: Code: var quiz = new Array(); var r = 0;
var analPage = 'result.html';
quiz[r++] =('93726~71~1. How often do you have a drink containing alcohol?~Never~Once a month or less~2 to 4 times a month~2 to 3 times a week~0~3');
quiz[r++] =('48844~37~How many units of alcohol do you have on a typical day when you are drinking?~1-2~3-4~5-6~7-9~0~3');
I thought it would be straight forward and I could add another option at the end of each string and then change the scoring e.g. quiz[r++] =('93726~71~1. How often do you have a drink containing alcohol?~Never~Once a month or less~2 to 4 times a month~2 to 3 times a week~4 or more times a week~0~4'); but this didn't work ... please help! Thank you [Hi all! I am obviously new to Javascript, blah blah blah, etc ... Please help me by pointing out what is wrong with my code while changing as little as possible ... and if you could also please explain the part that says t = total( parseFloat(a,10), parseFloat(b,10), parseFloat(c,10), parseFloat(d,10)); if(!isNaN(t)) f.value = t; as I copied that portion from someone and I really don't understand it. Thank you soooo much!] <html> <head> <title>Problem 3</title> <style type="text/css"> body { background-color:blue; font-family:verdana; font-size:large; } input { width: 60px; } </style> <script type="text/javascript"> var f = (a*0.1)+(b*0.15)+(c*0.25)+(d*0.2)+(e*0.3) if ( grade5Obj.value.length < 1 ) alert("Please enter a grade in every box!"); else displayObj.value=ourText + nameObj.value + '!'; }; function update() var a = document.getElementById( 'grade1' ).value, b = document.getElementById( 'grade2' ).value, c = document.getElementById( 'grade3' ).value, d = document.getElementById( 'grade4' ).value, e = document.getElementById( 'grade5' ).value, f = document.getElementById( 'ans' ), t=0; t = total( parseFloat(a,10), parseFloat(b,10), parseFloat(c,10), parseFloat(d,10)); if(!isNaN(t)) f.value = t; </script> </head> <body> <form action="" method="post"> <p>Enter the first grade <input id="grade1" onkeyup="update()"><br> <p>Enter the second grade <input id="grade2" onkeyup="update()"><br> <p>Enter the third grade <input id="grade3" onkeyup="update()"><br> <p>Enter the fourth grade <input id="grade4" onkeyup="update()"><br> <p>Enter the fifth grade <input id="grade5" onkeyup="update()"><br> <p>Your final grade is <input name="finalGrade" readonly="true"> <input type="button" value="Click me!" onclick="finalGrade value=document.getElementById( 'ans' )"></p> </form> </body> </html> I need to alert the answer 31 but keep getting 34. It has to go like this ticket*reward+cost. It would be 24+4+3=31. I would need to times the tickets by rewards then add the cost after. How would I alert this? Code: <html>
<head>
<link rel="stylesheet" type="text/css" href="movie_ticket.css" />
<title>Movie</title>
<script type="text/javascript">
function ticketOrder()
{
var cost;
var ticket;
var reward;
var movie;
movie=document.movieTicket.selUpcomingMovie.value;
if(document.movieTicket.radTicket[0].checked)
{
ticket=document.movieTicket.radTicket[0].value;
ticket=parseInt(ticket);
}
if(document.movieTicket.radTicket[1].checked)
{
ticket=document.movieTicket.radTicket[1].value;
ticket=parseInt(ticket);
}
if(document.movieTicket.radTicket[2].checked)
{
ticket=document.movieTicket.radTicket[2].value;
ticket=parseInt(ticket);
}
if(document.movieTicket.radTicket[3].checked)
{
ticket=document.movieTicket.radTicket[3].value;
ticket=parseInt(ticket);
}
if(document.movieTicket.radTicket[4].checked)
{
ticket=document.movieTicket.radTicket[4].value;
ticket=parseInt(ticket);
}
if(document.movieTicket.radReward[0].checked)
{
reward=document.movieTicket.radReward[0].value;
reward=parseInt(reward);
}
else if(document.movieTicket.radReward[1].checked)
{
reward=document.movieTicket.radReward[1].value;
reward=parseInt(reward);
}
if(document.movieTicket.chkPopcorn.checked)
{
var popcorn=document.movieTicket.chkPopcorn.value;
popcorn=parseInt(popcorn);
cost=popcorn;
}
if(document.movieTicket.chkSoda.checked)
{
var soda=document.movieTicket.chkSoda.value;
soda=parseInt(soda);
cost=soda;
}
if(document.movieTicket.chkCandy.checked)
{
var candy=document.movieTicket.chkCandy.value;
candy=parseInt(candy);
cost=candy;
}
alert(ticket*reward+"cost");
}
</script>
</head>
<body>
<div id="Header">
<h2>The Chicago Movie Palace</h2>
<p><h2>We have the best ticket prices!!</h2></p>
</div>
<div id="main_content">
<form name="movieTicket">
How many tickets would you like to order?<br />
1 Ticket<input type="radio" name="radTicket" value="1" /><br />
2 Tickets<input type="radio" name="radTicket" value="2" /><br />
3 Tickets<input type="radio" name="radTicket" value="3" /><br />
4 Tickets<input type="radio" name="radTicket" value="4" /><br />
5 Tickets<input type="radio" name="radTicket" value="5" /><br />
Are you a member of our theater?<br />
Yes<input type="radio" name="radReward" value="8" /><br />
No<input type="radio" name="radReward" value="10" /><br />
Would you like any food or drinks with your movie?<br />
Popcorn ($4)<input type="checkbox" name="chkPopcorn" value="4" /><br />
Soda ($3)<input type="checkbox" name="chkSoda" value="3" /><br />
Candy ($3)<input type="checkbox" name="chkCandy" value="3" /><br />
Which movie would you like to see?
<select name="selUpcomingMovie">
<option value="Immortals">Immortals</option>
<option value="J Edgar">J Edgar</option>
<option value="Sherlock Holmes:A Game of Shadows" >Sherlock Holmes:A Game of Shadows</option>
</select>
<p><input type="button" name="btnSubmit" value="Order Tickets" onclick="ticketOrder()" /></p>
</div></form>
<div id="location_info">
<p><span class="highlight">4789 N. Potterville St.</span></p>
<p><span class="highlight">Telephone Number 1-312-589-6217</span></p>
</div>
</body>
</html>
Hey guys! I've been searching for a multi-answer script for a 'sort of' quiz I'm making (it's not really a quiz, but I figure it's a similar concept). Example of what I want: Please Select which recipe you'd like: [checkbox1] Chocolate Brownies [checkbox2] Chocolate Chip Cookies [checkbox3] Strawberry Cake [checkbox4] Apple Pie |Submit| If they choose only Chocolate Brownies, then it'll take them to a page with just the brownie recipe, but if they choose Chocolate Brownies and Chocolate Chip Cookies it should take them to a second page I'll make with both recipes on it, etc. I know it's a lot of pages based on how many possible selections, but that's as far as my knowledge goes on how to do this. Any help would be SO appreciated! Thanks, Shia EDIT: I'd like the new information to appear in a new window for easy printing. HELP PLEASE!! Really need to get this working tonight!! I am applying for a design job and must be able to show my portfolio electronically!! **If there is a reason no one is answering, please tell me** I dont think it is that far off, but clearly something is stopping the rollover effectst for all projects EXCEPT "annual report" which is what i want the others to be like. Please, please, please help me!! Visit link: http://twentyfourdesigns.com/portfolio2.asp to see example of what i have and what isnt working. PLEASE HELP!! (Visit link: http://twentyfourdesigns.com/portfolio.asp to see how the code worked BEFORE separating out into jumps/anchors (only works in ff and safari at the moment...i'll worry about ie later as i only need it to work on a mac at the moment) **page code** Code: < <head>
<title>Welcome to Twenty-Four Designs</title>
<link rel="favicon" HREF="http://twentyfourdesigns.com/favicon.ico" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="js/mootools.js" type="text/javascript"></script>
<script src="js/noobslide.js" type="text/javascript"></script>
<script src="js/portfolio.js" type="text/javascript"></script>
</head>
<body>
<div id="wrap">
<div id="header"><img src="Images/24designsLogo.png" alt="Twenty-four Designs Logo" width="264" height="92" class="photo" /><a href="mailto:deb@twentyfourdesigns.com"><img src="Images/DebSmithContact.png" width="279" height="92" class="photo2" alt="Deborah Smith's Portfolio" /></a></div>
<div id="slide-mask">
<div id="slide-images">
<img src="Images/PortfolioImages/MiddlefieldFront.png" alt="" />
<img src="Images/PortfolioImages/MiddlefieldSpread1.png" alt="" />
<img src="Images/PortfolioImages/MiddlefieldSpread2.png" alt="" />
<img src="Images/PortfolioImages/MiddlefieldSpread3.png" alt="" />
<img src="Images/PortfolioImages/MiddlefieldSpread4.png" alt="" />
<img src="Images/PortfolioImages/MiddlefieldSpread5.png" alt="" />
<img src="Images/PortfolioImages/MiddlefieldBack.png" alt="" />
<img src="Images/PortfolioImages/VerizonDroidWrap.png" alt="" />
<img src="Images/PortfolioImages/VerizonCavsInvite.png" alt="" />
<img src="Images/PortfolioImages/VerizonSMBGuide.png" alt="" />
<img src="Images/PortfolioImages/DCPressKitFront.png" alt="" />
<img src="Images/PortfolioImages/DCPressKitInside1.png" alt="" />
<img src="Images/PortfolioImages/DCPressKitInside2.png" alt="" />
<img src="Images/PortfolioImages/DCPressKitBack.png" alt="" />
<img src="Images/PortfolioImages/PerfcoPC1.png" alt="" />
<img src="Images/PortfolioImages/PerfcoPC2Cover.png" alt="" />
<img src="Images/PortfolioImages/PerfcoPC2inside.png" alt="" />
<img src="Images/PortfolioImages/PerfcoBillInsert.png" alt="" />
<img src="Images/PortfolioImages/CenturyCatalogFront.png" alt="" />
<img src="Images/PortfolioImages/CenturyCatalogSpread1.png" alt="" />
<img src="Images/PortfolioImages/CenturyCatalogSpread2.png" alt="" />
<img src="Images/PortfolioImages/CenturyCatalogSpread3.png" alt="" />
<img src="Images/PortfolioImages/UCCConcept1Cover.png" alt="" />
<img src="Images/PortfolioImages/UCCConcept1Spread1.png" alt="" />
<img src="Images/PortfolioImages/UCCConcept1Spread2.png" alt="" />
<img src="Images/PortfolioImages/UCCConcept2Cover.png" alt="" />
<img src="Images/PortfolioImages/UCCConcept2Spread1.png" alt="" />
<img src="Images/PortfolioImages/UCCConcept2Spread2.png" alt="" />
<img src="Images/PortfolioImages/UCCConcept2Spread3.png" alt="" /></div>
</div></div>
<div id="slider">
<ul class="navigation">
<li><a href="#AnnualReport">Annual Report :</a></li>
<li><a href="#Verizon">Verizon Wireless :</a></li>
<li><a href="#PressKit">Press Kit :</a></li>
<li><a href="#Perfco">Perfco :</a></li>
<li><a href="#Century">Century Windows :</a></li>
<li><a href="#UCC">United Church of Christ</a></li>
</ul>
<div class="scroll">
<div class="panel" id="AnnualReport"><p class="text"><strong>Middlefield Banc. 2008 Annual Report</strong> : Printed Four Color Process on Coated Paper</p>
<div id="slide-thumbs">
<img src="Images/PortfolioImages/MiddlefieldFront.png" alt="" />
<img src="Images/PortfolioImages/MiddlefieldSpread1.png" alt="" />
<img src="Images/PortfolioImages/MiddlefieldSpread2.png" alt="" />
<img src="Images/PortfolioImages/MiddlefieldSpread3.png" alt="" />
<img src="Images/PortfolioImages/MiddlefieldSpread4.png" alt="" />
<img src="Images/PortfolioImages/MiddlefieldSpread5.png" alt="" />
<img src="Images/PortfolioImages/MiddlefieldBack.png" alt="" /></div></div>
<div class="panel" id="Verizon"><p class="text"><strong>Verizon Wireless</strong> : Slide One - Motorola Droid Box Sleeve : Slide Two - Cleveland Cavaliers' VIP Invite : Slide Three - Small Business Guide (Internal Website)</p>
<div id="slide-thumbs">
<img src="Images/PortfolioImages/VerizonDroidWrap.png" alt="" />
<img src="Images/PortfolioImages/VerizonCavsInvite.png" alt="" />
<img src="Images/PortfolioImages/VerizonSMBGuide.png" alt="" /></div></div>
<div class="panel" id="PressKit"><p class="text"><strong>Rock. Ride. Remember. Press Kit</strong> : Printed Four Color Process on Coated Paper : All Over Dull with Spot Varnish : Custom Die Cut </p>
<div id="slide-thumbs">
<img src="Images/PortfolioImages/DCPressKitFront.png" alt="" />
<img src="Images/PortfolioImages/DCPressKitInside1.png" alt="" />
<img src="Images/PortfolioImages/DCPressKitInside2.png" alt="" />
<img src="Images/PortfolioImages/DCPressKitBack.png" alt="" /></div></div>
<div class="panel" id="Perfco"><p class="text"><strong>Perfco Bill Insert and Postcards</strong> : Printed Digital on Coated Paper : Variable Printed with Target Company's Name</p>
<div id="slide-thumbs">
<img src="Images/PortfolioImages/PerfcoPC1.png" alt="" />
<img src="Images/PortfolioImages/PerfcoPC2Cover.png" alt="" />
<img src="Images/PortfolioImages/PerfcoPC2inside.png" alt="" />
<img src="Images/PortfolioImages/PerfcoBillInsert.png" alt="" /></div></div>
<div class="panel" id="Century"><p class="text"><strong>Century Windows' Catalog Pages</strong> : Printed Four Color Process on Coated Paper</p>
<div id="slide-thumbs">
<img src="Images/PortfolioImages/CenturyCatalogFront.png" alt="" />
<img src="Images/PortfolioImages/CenturyCatalogSpread1.png" alt="" />
<img src="Images/PortfolioImages/CenturyCatalogSpread2.png" alt="" />
<img src="Images/PortfolioImages/CenturyCatalogSpread3.png" alt="" /></div></div>
<div class="panel" id="UCC"><p class="text"><strong>United Church of Christ Coffee Table Book Concepts</strong> : Concept 1 - Vellum Wrap on Cover with Spot UV : Concept 2 - Spot UV on Cover</p>
<div id="slide-thumbs">
<img src="Images/PortfolioImages/UCCConcept1Cover.png" alt="" />
<img src="Images/PortfolioImages/UCCConcept1Spread1.png" alt="" />
<img src="Images/PortfolioImages/UCCConcept1Spread2.png" alt="" />
<img src="Images/PortfolioImages/UCCConcept2Cover.png" alt="" />
<img src="Images/PortfolioImages/UCCConcept2Spread1.png" alt="" />
<img src="Images/PortfolioImages/UCCConcept2Spread2.png" alt="" />
<img src="Images/PortfolioImages/UCCConcept2Spread3.png" alt="" /></div></div>
</div>
</div>
</body>
**css** Code: * {
margin-left: auto ;
margin-right: auto ;;
padding: 0;
outline: none;
/*outline: 0;*/
}
p.text{
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
line-height: 16px;
color: #000
}
p.text2{
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
line-height: 16px;
font-weight: bolder;
color: #3c2639;
}
/* ********************************** */
#slide-mask {
position:relative;
left:0;
margin:0;
padding:0;
width:920px;
height:650px;
overflow:hidden;
margin-left:auto;
margin-right:auto;
}
#slide-images {
position:relative;
left:0;
width:9000px;
height:650px;
margin-left:auto;
margin-right:auto;
}
#slide-images img {
width:920px;
height:650px;
}
#slide-thumbs {
background-color:none;
width:880px;
height:75px;
left:0;
margin-left:auto;
margin-right:auto;
}
#slide-thumbs img {
width:106px;
height:75px;
cursor:pointer;
}
/* ********************************** */
#slider {
position:relative;
left:0;
width: 900px;
overflow:hidden;
margin-left:auto;
margin-right:auto;
}
.scroll {
position:relative;
height: 105px;
width: 900px;
overflow-y: hidden;
background: none;
margin-left:auto;
margin-right:auto;
}
#scrollContainer div.panel {
height: 105px;
width: 900px;
overflow:hidden;
margin-left:auto;
margin-right:auto;
}
ul.navigation {
list-style: none;
margin: 0;
padding: 0;
padding-bottom: 9px;
}
ul.navigation li {
display: inline;
margin-right: 10px;
}
ul.navigation a {
text-decoration:none;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
border: none;
color: #3c2639;
font-weight: bolder;
text-transform:uppercase;
}
ul.navigation a:hover {
text-decoration:none;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
border: none;
color: #5a447a;
font-weight: bolder;
text-transform:uppercase;
}
ul.navigation a.selected {
text-decoration:none;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
border: none;
color: #3c2639;
font-weight: bolder;
text-transform:uppercase;
}
ul.navigation a:focus {
text-decoration:none;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
border: none;
color: #3c2639;
font-weight: bolder;
text-transform:uppercase;
}
/* ********************************** */
body {
width: auto;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-image: url(Images/bckgrnd.jpg);
background-repeat: repeat-x;
background-position: center top;
}
#wrap {
float: none;
width: 1000px;
height: auto;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#header {
width: 1000px;
height: 100px;
margin-left: auto ;
margin-right: auto ;
padding-top: 7px;
}
.photo {
float: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.photo2 {
float: right;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.photo3 {
margin-left: auto ;
margin-right: auto ;
}
a:link {
text-decoration:none;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
border: none;
color: #3c2639;
font-weight: bolder;
text-transform:uppercase;
}
a:visited {
text-decoration:none;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
border: none;
color: #3c2639;
font-weight: bolder;
text-transform:uppercase;
}
a:active {
text-decoration:none;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
border: none;
color: #3c2639;
font-weight: bolder;
text-transform:uppercase;
}
a:hover {
text-decoration:none;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
border: none;
color: #5a447a;
font-weight: bolder;
text-transform:uppercase;}
**portfolio.js ** Code: // JavaScript Document
window.addEvent("domready", function ()
{
var effect = {property:'left',duration:700, transition:Fx.Transitions.Linear, wait:false};
var nS = new noobSlide({
box: $('slide-images'),
items: [0,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],
size:925,
handles: $$('#slide-thumbs img'), handle_event: 'mouseenter',
fxOptions: effect,
onWalk: function(currentItem,currentHandle){
$each($$(this.handles), function(handle,index){
handle.get('tween', {property: 'opacity', duration: 'short'}).start(1);
});
currentHandle.get('tween', {property: 'opacity', duration: 'short'}).start(0.5);
},
});
});
I also use the mootools.js and noobslide.js... This is my first post on this website. It has a very clean design to it. I think I am going to enjoy myself here :P I am taking a class. And I am very sorry if this post does not belong here. It is a JavaScript class so, my guess was here. My professor has giving us three page sources from random sites. I can not figure this out though. This question has a page source from some random math test website. What we are to do with this page source is to figure out the ten correct answers to the question in the page source. No, not by doing the math, but figuring out where in the page source it is hiding. I can not find them for the life of me. I got the other two problems, but of course this is the hardest one Thank you for your help I put the page source in a notepad attach to this post. (My professor has removed parts of codes that included the name of the website he had gotten it off of. He also said the page source may need to be decoded.) I think I found what I am looking for. If you look where question one starts. Itll have <input type="hidden" name="corAns" value="27478035"> But, the answers are A, B, C, and D which would be 1, 2, 3, and 4 for D. So is <input type="hidden" name="numAns" value="4"> The correct line? I think that is to easier. He said this assignment was the hardest out of the three, and well, that was to easy? This question probably has an obvious answer, but I'm an ActionScript guy and not a JS guy. I was just playing around with getting intervals to work with JS and ran into this weirdness. The page in question is he http://erikphansen.com/intervaltest.html It will remove the text on the page and add new text every 500ms. Click anywhere to stop it. It works fine in Safari. In Firefox it runs once, then seems to cause Firefox to just hang. The spinner just runs on the tab and nothing gets updated. To make things more unusual, refreshing the page in Firefox doesn't do anything. Here is the code: Code: theCounter = 0;
function writeText(arg)
{
theCounter++
document.write("<p>" + arg + " " + theCounter + "</p>")
}
function stopTheStuff()
{
clearInterval(myInterval);
alert("we stopped it");
}
// Two different ways of setting intervals have the same issue...
// ...and both work in Safari for Mac
// myInterval = setInterval("writeText('write this: ')", 500);
myInterval = setInterval(writeText, 500, "write this: ");
document.onclick = stopTheStuff;
Help show a newbie the way! Thanks a lot, Erik Hi guys (and gals) Working on my uni essay, and really struggling here with a resolution to this part of code. Maybe I shouldnt be looking for the answer, but more so on where I am going wrong. What I am meant to do is replace the spaces in sString with the actual word 'space' i.e hello 'everyone' = 'hellospaceeveryone' Any help would be appreciated! Code: function substituteSpaces(aString)
{
sRet = '';
for (var iA = 0; iA < aString.length; iA++)
{
if (iA = 0)
sRet = sRet + ' ';
//sRet = sRet + 'space';
//var nextLetter = aString.charAt(iA);
// sRet = sRet + nextLetter;
}
}
sSpace = substituteSpaces('a string with spaces');
alert ("Hello");
I am completely new to javascript but I have found a script that will do what I am looking to do. I do have one question about this script that I am sure one of you will have the answer to. Is there way to get the code below to run one time through the urls listed and then stop, without just restarting with the first url and running the script again. Thanks ahead of time for you answers. Code: Troy Wolf <troy@troywolf.com>
Simply define your "slides" in the javascript slides[] array below.
-->
<html>
<head>
<title>SiteShow 1.0</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<style>
/* Change body background-color to change fade out color. */
body.siteshow { margin:0; padding:0; background-color:#000000; }
#menu
{
font-family:Arial;
font-size:9pt;
display:none;
opacity:0.00;
-mozopacity:0.00;
filter:alpha(opacity=0);
position:absolute;
top:10px;
left:10px;
padding:5px;
background-color:#000000;
color:#FFFFFF;
border:3px dotted #999999;
}
#menu a { color:#ffffff; }
#menu a:hover { text-decoration:none; }
#title { font-size:11pt; font-weight:bold; letter-spacing:2; }
#slides { font-size:9pt; line-height:16pt; }
.button { width:60px; font-size:9pt; letter-spacing:1; }
</style>
<script type="text/javascript">
var current_idx = 0;
var slides = new Array();
var menuwin;
var show_timer;
var menu_timer;
var menu;
var content;
var loaded = true;
// Define your "slides". 3 values for each a
// 1. Duration in seconds.
// 2. Title to be used in menu.
// 3. Source URL. Can be full URI or a relative URL.
slides[1] = new Array(15, "WAMP HOWTO", "http://www.troywolf.com/articles/wamp_howto.htm");
slides[2] = new Array(15, "PHP Proxy", "http://www.troywolf.com/articles/php/class_http/proxy.phps");
slides[3] = new Array(15, "HTTP class", "http://www.troywolf.com/articles/php/class_http/");
slides[4] = new Array(15, "Session class", "http://www.troywolf.com/articles/php/class_session/");
slides[5] = new Array(15, "RSS Consumption", "http://www.troywolf.com/articles/php/class_xml/rss_example.php");
slides[6] = new Array(15, "PHP Exchange WebDAV", "http://www.troywolf.com/articles/php/exchange_webdav_examples.php");
slides[7] = new Array(15, "vCard class", "http://www.troywolf.com/articles/php/class_vcard/");
function MenuInit()
{
var html = "";
for(idx=1; idx<slides.length; idx++) {
html += '<a href="javascript:Navigate('+idx+')">' +
slides[idx][1] + "</a><br />\n";
}
document.getElementById("slides").innerHTML = html;
menu.style.display = "block";
}
function MenuShow()
{
clearTimeout(menu_timer);
opacity('menu', 0, 90, 500);
menu_timer = setTimeout("MenuHide()", 3500);
}
function MenuHide()
{
opacity('menu', 90, 0, 500);
}
function Pause()
{
clearTimeout(show_timer);
document.getElementById('play').style.display = "block";
document.getElementById('pause').style.display = "none";
}
function Navigate(slide_idx)
{
clearTimeout(show_timer);
if (current_idx == 0) {
if (!slide_idx) { slide_idx = 1; }
current_idx = slide_idx;
content.src = slides[current_idx][2];
document.getElementById('play').style.display = "none";
document.getElementById('pause').style.display = "block";
show_timer = setTimeout("Navigate()", slides[current_idx][0]*1000);
return;
}
if (slide_idx) {
current_idx = slide_idx;
content.src = slides[current_idx][2];
document.getElementById('play').style.display = "block";
document.getElementById('pause').style.display = "none";
return;
}
loaded = false;
current_idx++;
if ( current_idx == slides.length) { current_idx = 1; }
opacity('content', 100, 0, 500);
document.getElementById('play').style.display = "none";
document.getElementById('pause').style.display = "block";
show_timer = setTimeout("Navigate()", slides[current_idx][0]*1000);
return;
}
function opacity(id, opacStart, opacEnd, millisec)
{
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;
//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
if (opacEnd == 0) { setTimeout("FadeOutTrigger('"+id+"')",((timer-1) * speed));; }
//if (opacEnd == 0) { FadeOutTrigger(id); }
} else if(opacStart < opacEnd) {
if (opacStart == 0) { FadeInTrigger(id); }
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}
//change the opacity for different browsers
function changeOpac(opacity, id)
{
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
function FadeOutTrigger(id)
{
//alert('FadeOut: '+id);
switch(id) {
case "menu":
document.getElementById(id).style.display = "none";
break;
case "content":
content.src = slides[current_idx][2];
//setTimeout("opacity('content', 0, 100, 500)", 1000);
break;
default:
break;
}
}
function FadeInTrigger(id)
{
//alert('FadeIn: '+id);
switch(id) {
case "menu":
document.getElementById(id).style.display = "block";
break;
case "content":
//opacity('content', 0, 100, 500);
break;
default:
break;
}
}
function FadeInContent()
{
if (!loaded) {
opacity('content', 0, 100, 500);
loaded = true;
}
}
function LoadTrigger()
{
//self.resizeTo(1366,768);
menu = document.getElementById('menu');
content = document.getElementById('content');
Navigate();
MenuInit();
MenuShow();
}
window.onload = LoadTrigger;
</script>
</head>
<body class="siteshow">
<iframe id="content" name="content" style="width:100%; height:100%;" frameborder="no" scrolling="auto" src="" onmouseover="MenuShow();" onload="FadeInContent();" ></iframe>
<div id="menu">
<div id="title">SiteShow Menu</div>
<div id="slides">
</div>
<p>
<input id="pause" class="button" style="display:block;" type="button" value="pause" onclick="Pause()" />
<input id="play" class="button" style="display:none;" type="button" value="play" onclick="Navigate()" />
</p>
</div>
</body>
</html>
what does this code mean "obj.to"? The code is here - Code: clearTimeout( obj.to ); I just want to know what does "to" mean here? Hi, I made some changes to the following example: http://docs.jquery.com/Plugins/validation#Example Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
</style>
<script>
$(document).ready(function(){
$("#commentForm").validate();
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<input id="cname" name="name" size="25" class="required" value="Name" onfocus="if (this.value == 'Name') {this.value=''}" onblur="if(this.value == '') { this.value='Name'}" />
</p>
<p>
<input id="cemail" name="email" size="25" class="required email" value="Email" onfocus="if (this.value == 'Email') {this.value=''}" onblur="if(this.value == '') { this.value='Email'}" />
</p>
<p>
<input id="curl" name="url" size="25" class="url" value="URL" onfocus="if (this.value == 'URL') {this.value=''}" onblur="if(this.value == '') { this.value='URL'}" />
</p>
<p>
<textarea id="ccomment" name="comment" cols="35" rows="5" class="required" onfocus="if (this.value == 'Comment') {this.value=''}" onblur="if(this.value == '') { this.value='Comment'}">Comment</textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</body>
</html>
I know how to add custom validation methods for the required fields Name, Email, and Comment. But I just don't know how to validate the optional filed URL. I've searched everywhere to no avail! Any help is greatly appreciated! Desparate hello all i'm almost newbie to Javascript. i found this for instant search : demo : http://www.johnboy.com/scripts/insta...-php/index.php index.php PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Instant Search With Arrow Key Navigation Using jQuery and PHP</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="search.js"></script> <script> //arrow key navigation $(document).keydown(function(e){ //jump from search field to search results on keydown if (e.keyCode == 40) { $("#s").blur(); return false; } //hide search results on ESC if (e.keyCode == 27) { $("#results").hide(); $("#s").blur(); return false; } //focus on search field on back arrow or backspace press if (e.keyCode == 37 || e.keyCode == 8) { $("#s").focus(); } }); // $(document).ready(function() { //clear search field & change search text color $("#s").focus(function() { $("#s").css('color','#333333'); var sv = $("#s").val(); //get current value of search field if (sv == 'Search') { $("#s").val(''); } }); // //post form on keydown or onclick, get results $("#s").bind('keyup click', function() { $.post("results.php", //post $("#search").serialize(), function(data){ //hide results if no more than 2 characters if (data == 'hide') { $('#results').hide(); } //show results if more than 2 characters if (data != 'hide') { $("#results").html(data); if (data) { $("#results").show(); } } }); }); // //hide results when clicked outside of search field $("body").click(function() { $("#results").hide(); }); // }); </script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Instant Search Using jQuery & PHP</h1> <h2>Example keywords (website, jquery, php, launch)<br /> <br /> </h2> <form id="search" name="search" method="post" action="" autocomplete="off"> <input name="s" type="text" id="s" value="Search" /> <div id="results"></div> </form> <br /> <br /> <br /> <a href="http://www.johnboy.com/blog/tutorial-instant-search-with-arrow-key-navigation-using-jquery-and-php">Back to Article & Source Code</a> </body> </html> results.php PHP Code: <?php require_once('mysql_connect.php'); //only show results if two or more characters have been typed - max of 50 characters $len = strlen(str_replace(" ","",$_POST[s])); //don't count blank spaces if ($len < 3 || $len > 50) { echo 'hide'; die; } // //get results if search string is longer than 3 characters if ($len > 3) { record_set('results', " SELECT news_title, news_heading, MATCH (news_title,news_text) AGAINST ('".strip_tags($_POST[s])."*' IN BOOLEAN MODE) AS ranking FROM jbp_blog_articles WHERE MATCH (news_title,news_text) AGAINST ('".strip_tags($_POST[s])."*' IN BOOLEAN MODE) AND news_type = 1 ORDER BY ranking DESC LIMIT 0,8 "); } ?> <ul> <!--display user's initial search term--> <li><a class="link" href="#" title="<?php echo $_POST[s]; ?>"><?php echo "$_POST[s]"; ?></a></li> <!----> <?php if ($totalRows_results) do { ?> <li><a class="link" href="/blog/<?php echo $row_results[news_heading]; ?>" target="_blank" title="<?php echo $row_results[news_title]; ?>"><?php echo "$row_results[news_title]"; ?></a></li> <?php } while ($row_results = mysql_fetch_assoc($results)); ?> </ul> search.js PHP Code: /* * Author: Marco Kuiper (http://www.marcofolio.net/) * Customizations by JBP noted in comments below */ var currentSelection = 0; var currentUrl = ''; // Register keydown events on the whole document $(document).keydown(function(e) { switch(e.keyCode) { // User pressed "up" arrow case 38: navigate('up'); break; // User pressed "down" arrow case 40: navigate('down'); break; // User pressed "enter" case 13: if(currentUrl != '') { window.location = currentUrl; } break; } }); // Add data to let the hover know which index they have for(var i = 0; i < $("#results ul li a").size(); i++) { $("#results ul li a").eq(i).data("number", i); } // Simulate the "hover" effect with the mouse $("#results ul li a").hover( function () { currentSelection = $(this).data("number"); setSelected(currentSelection); }, function() { $("#results ul li a").removeClass("search_hover"); currentUrl = ''; } ); function navigate(direction) { // Check if any of the menu items is selected if($("#results ul li .search_hover").size() == 0) { currentSelection = -1; } //JBP - focus back on search field if up arrow pressed on top search result if(direction == 'up' && currentSelection == 0) { $("#s").focus(); } // if(direction == 'up' && currentSelection != -1) { if(currentSelection != 0) { currentSelection--; } } else if (direction == 'down') { if(currentSelection != $("#results ul li").size() -1) { currentSelection++; } } setSelected(currentSelection); } function setSelected(menuitem) { //JBP - get search result to place in search field on hover var title = $("#results ul li a").eq(menuitem).attr('title'); $("#s").val(title); // $("#results ul li a").removeClass("search_hover"); $("#results ul li a").eq(menuitem).addClass("search_hover"); currentUrl = $("#results ul li a").eq(menuitem).attr("href"); } style.css PHP Code: #search { position:relative; display:block; height:35px; width:500px; padding: 0px; margin: 0px auto 0px auto; } #results { border:1px solid #CCCCCC; width:500px; display:none; z-index: 300; line-height:0; margin-top:-3px; margin-left: 0px; } #results ul { list-style:none; padding:0px; margin:0px; } #results ul li { background-color:#FFFFFF; text-align: left; } #results ul li:hover { background-color:#EBEBEB; } #results ul li a { line-height:20px; text-decoration:none; padding: 5px; display: block; color: #333333; } .search_hover { background-color:#EBEBEB!important; color:#232323!important; } body { padding: 50px; text-align: center; background-color: #FFFFFF; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 13px; } body a { text-decoration: none; } #s { outline:none; width: 480px; padding: 10px; border: 1px solid #CCCCCC; color: #CCCCCC; z-index: 200; position: relative; height: auto; } .go { padding: 9px; font-weight: bold; width: 60px; margin-left: -4px; border: 0px solid #CCCCCC; height: auto; font-size: 16px; background-color: #F7F7F7; } h1 { font-family: Georgia, "Times New Roman", Times, serif; padding: 0px; margin-bottom: 10px; font-size: 30px; color: #333333; } h2 { font-family: Georgia, "Times New Roman", Times, serif; padding: 0px; font-size: 12px; color: #999999; margin: 0px; font-style: italic; font-weight: normal; } now i just want to edit one thing, when you search for something, results are shown under the search field, when you click on each result, goes to a link. i want when clicking on a result, not going to link, just show that result string on the search field. could you please tell how to do it? where should i edit in script? thanks in advanced I am trying to get a Javascript "script" to do a function for me. I am trying to write a a script that will run while the webpage is open, that is selected a randomized 9 digit number Less than 350000000 that will be put into a textbox and submitted. I want a adjustable time when it submits. Could this be made into an <iframe>? Also, this has to do it to a different website, not the one locally being opened. Thank you for your help. Hey guys, this should be a very easy fix for someone who knows Javascript (which I don't). The following code allows the class "ul.slideshow-nav li" to control the navigation of the slideshow, I want to adjust this script to allow "ul.slideshow-nav li" AND "ul.slideshow-nav2 li" to do this, possible? Code: $slideshow = {
context: false,
tabs: false,
timeout: 8000,
fx: 'scrollLeft',
slideSpeed: 900,
tabSpeed: 900,
init: function() {
this.context = $('#content-slideshow');
this.tabs = $('ul.slideshow-nav li', this.context);
this.tabs.remove();
this.startSlideshow();
},
startSlideshow: function() {
$('div.slideshow > ul', $slideshow.context).cycle({
fx: $slideshow.fx,
pager: $('ul.slideshow-nav', $slideshow.context),
pagerAnchorBuilder: $slideshow.startTabs,
befo $slideshow.Tabactive,
timeout: $slideshow.timeout,
speed: $slideshow.slideSpeed,
fastOnEvent: $slideshow.tabSpeed,
pauseOnPagerHover: true,
pause: true
});
},
startTabs: function(i, slide) {
return $slideshow.tabs.eq(i);
},
Tabactive: function(currentSlide, nextSlide) {
var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);
if(activeTab.length) {
$slideshow.tabs.removeClass('on');
activeTab.parent().addClass('on');
}
}
};
$(function() {
$slideshow.init();
});
Hey folks, Forgive me in advance if this is not the correct place to post this thread. I am a new member to this forum and need a little assistance. I have some script to create a quiz but need a little more detail. Does anyone know some code I can insert, and where to randomize the questions. Secondly if I have a test bank of 100 questions but want to limit the test to 20 questions what code would I need to insert that as well. Any assistance is very much appreciated. thank you. kenster |
|||||||