|
JavaScript - Changing Text..and Keeping It!
Okay, I have this code,
Code: <script type="text/javascript">
function changeText2(){
var userInput = document.getElementById('userInput').value;
document.getElementById('boldStuff2').innerHTML = userInput;
}
</script>
<p>Welcome to the site <b id='boldStuff2'>dude</b> </p>
<input type='text' id='userInput' value='Enter Text Here' />
<input type='button' onclick='changeText2()' value='Change Text'/>
A fairly simple one, and it is great, but I want to change it so that the text you type in stays there! Forever! For example, a person visits the site and types in "Hello" then the option of changing the text again disappears, and every visitor after that sees "Hello" (or whatever the first person types). Is this possible? Can anyone help me out! Similar TutorialsHi guy not the greatest with javascript i use it now and then. so far i have this code working correctly. Currently on mouse-over its changes the img background of imgholder. this is the HTML Code: <div id="imgholder">
</div>
<div id="myController2">
<span class="jFlowControl2">No 1 </span>
<span class="jFlowControl2">No 2 </span>
</div>
<div id="mySlides2">
<div>
<a onmouseover="changeImg(this, 'img2.jpg');" class="vm" href="vulnerabiliy.htm" title="Vulnerability Management"></a>
<a onmouseover="changeImg(this, 'img3.jpg');" class="grc" href="it_grc.htm" title="IT Governance, Risk and Compliance"></a>
<a onmouseover="changeImg(this, 'img4.jpg');" class="pci" href="pci.htm" title="Payment Card Industry Data Security Standard"></a>
<a onmouseover="changeImg(this, 'img5.jpg');" class="gcs" href="gcs.htm" title="Government Connect Code of Connection"></a>
<a onmouseover="changeImg(this, 'img1.jpg');" class="pt" href="penetration.htm" title="Penetration Testing"> </a>
<a onmouseover="changeImg(this, 'img6.jpg');" class="as" href="application.htm" title="Application Security"> </a>
<!--span class="jFlowNext2 NextFlash"> </span-->
</div>
<div>
<!--span class="jFlowPrev2 BackFlash"> </span-->
</div>
</div>
</div>
This is the script Code: <script language="javascript" type="text/javascript" src="inc/js/changeImg.js"></script>
function changeImg(e, imgName)
{
URL_prefix = 'http://www.website.co.uk/surecloud';
// set image url
image_url = new Array();
image_url[0] = URL_prefix+"/images/img1.jpg";
image_url[1] = URL_prefix+"/images/img2.jpg";
image_url[2] = URL_prefix+"/images/img3.jpg";
image_url[3] = URL_prefix+"/images/img4.jpg";
image_url[4] = URL_prefix+"/images/img5.jpg";
image_url[5] = URL_prefix+"/images/img6.jpg";
preload_image_object = new Array();
for(var i = 0; i < image_url.length; i++)
{
preload_image_object[i] = new Image();
preload_image_object[i].src = image_url[i];
}
document.getElementById('imgholder') .style.background="transparent url('images/" + imgName + "') no-repeat";
}
currenly if you hover over any of the <a> a css class is applied css code Code: #flash a.grc:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../../images/animated_nav.gif) no-repeat scroll -148px -59px;
}
what i need to do is keep this class applied over the last <a> that is hovered. so what i would like to do is change the class of the last <a> hover so it stays active until another one is hovered. does this make sense? any help or guidance would be appreciated I am trying to change text in one cell of a table when a user selects an item from a select menu. The data for the select menu is being pulled from a database (which works fine). The select menu is displayed as expected; however the text in the div tag always comes up as "undefined" The code below is part of a PHP script (thus \" instead of ") I would like to employ a method that does not require extra Javascript in the <head> section as in this instance the code is being output from an include that is called long after the <head> area of the document is processed. Here is what I have Code: <tr><td><select name=\"race\" onchange=\"document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].extrainfo\">
<option selected=\"selected\" value=\"\">Select Race</option>\n";
$sql = mysql_query("SELECT * FROM races");$i=1;
while ($row = mysql_fetch_array($sql)){
$output .= "<option value=\"$i\" ExtraInfo=\"{$row['des']}\">{$row['race']}</option>\n";
$i++;
}
$output .= "</select></td>
<td><div id=\"ExtraInfo\">Select Race</div></td></tr>
Any help will be greatly appreciated. I found a solution to my problem: by replacing: Code: <select name=\"race\" onchange=\"document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].extrainfo\">
with this: Code: <select name=\"race\" onchange=\"document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].getAttribute('extrainfo')\">
I'm building a template editor and need some help changing some of the variables. Part 1. Only at DEALERNAME. Must present coupon at time of write-up. Cannot be combined with any other offer. 1 coupon per customer per transaction. Expires: 00/00/00.s I need to be able to fill out two fields to change DEALERNAME and 00/00/00. I found a way to do this but it required the output to be in a field. I need it the output to look no different than before. Part 2. I'm using this to change some text via radio button but I would like an option to select how many details are there is the first place. Say they only want 1 or 2 details and not 3. Head Code: <script language="javascript" type="text/javascript">
function detail1a(){
document.getElementById("detail1").innerHTML = "Up to 5 Quarts";
}
function detail1b(){
document.getElementById("detail1").innerHTML = "Synthetic Oil Extra";
}
function detail1c(){
document.getElementById("detail1").innerHTML = "Lube Chassis";
}
function detail2a(){
document.getElementById("detail2").innerHTML = "Up to 5 Quarts";
}
function detail2b(){
document.getElementById("detail2").innerHTML = "Synthetic Oil Extra";
}
function detail2c(){
document.getElementById("detail2").innerHTML = "Lube Chassis";
}
function detail3a(){
document.getElementById("detail3").innerHTML = "Up to 5 Quarts";
}
function detail3b(){
document.getElementById("detail3").innerHTML = "Synthetic Oil Extra";
}
function detail3c(){
document.getElementById("detail3").innerHTML = "Lube Chassis";
}
</script>
Body Code: <span style="font-weight: bold;">Offer Details</span><br /> <p style="margin: 8px 10px"> Detail 1<br /> <input type="radio" name="on/off" onclick="detail1a();" />Up to 5 quarts<br /> <input type="radio" name="on/off" onclick="detail1b();" />Synthetic Oil Extra<br /> <input type="radio" name="on/off" onclick="detail1c();" />Lube Chassis<br /> </p> <p style="margin: 8px 10px"> Detail 2<br /> <input type="radio" name="on/off" onclick="detail2a();" />Up to 5 quarts<br /> <input type="radio" name="on/off" onclick="detail2b();" />Synthetic Oil Extra<br /> <input type="radio" name="on/off" onclick="detail2c();" />Lube Chassis<br /> </p> <p style="margin: 8px 10px"> Detail 3<br /> <input type="radio" name="on/off" onclick="detail3a();" />Up to 5 quarts<br /> <input type="radio" name="on/off" onclick="detail3b();" />Synthetic Oil Extra<br /> <input type="radio" name="on/off" onclick="detail3c();" />Lube Chassis<br /> </p> Output Code: <ul> <li><span id="detail1">Detail 1</span></li> <li><span id="detail2">Detail 2</span></li> <li><span id="detail3">Detail 3</span></li> </ul> I currently have an image and underneath it there are 6 thumbnails. When I run the cursor over them the big image changes. This works fine. However, I would like to have text beside the big picture that also changes depending on the thumbnail over which I am hovering. I have tried to work it out myself but failed miserably. I have tried forums, but can't find what I need. My code as it stands at the moment is: <script type="text/javascript"> if (document.images) {image0 = new Image; image0.src = "i/p0.png"; image1 = new Image; image1.src = "i/p1.png"; image2 = new Image; image2.src = "i/p2.png"; image3 = new Image; image3.src = "i/p3.png"; image4 = new Image; image4.src = "i/p4.png"; image5 = new Image; image5.src = "i/p5.png"; image6 = new Image; image6.src = "i/p6.png"; }</script> and <img class="img" src="i/p0.png" align="left" width="300" name="rollimg" title='blah' alt="blah"/> <span class="inverse-text"><this is where I want changing text to appear as I roll over thumbnails.</span> <br clear="all"/> <span onmouseover="document.rollimg.src=image0.src;"><img src="i/tb/t0.jpg" class="img" width="70" alt="blah" title="blah"/></span> <span onmouseover="document.rollimg.src=image1.src;"><img src="i/tb/t1.gif" class="img" width="70" alt="blah" title="blah"/></span> <span onmouseover="document.rollimg.src=image2.src;"><img src="i/tb/t2.gif" class="img" width="70" alt="blah" title="blah"/></span> <span onmouseover="document.rollimg.src=image3.src;"><img src="i/tb/t3.gif" class="img" width="70" alt="blah" title="blah"/></span> <span onmouseover="document.rollimg.src=image4.src;"><img src="i/tb/t4.gif" class="img" width="70" alt="blah" title="blah"/> <span onmouseover="document.rollimg.src=image5.src;"><img src="i/tb/t5.gif" class="img" width="70" alt="blah" title="blah"/> <span onmouseover="document.rollimg.src=image6.src;"><img src="i/tb/t6.gif" class="img" width="70" alt="blah" title="blah"/> Ideally if you could tell me how to update the above script and code, so that it works, I would be very grateful. Hello, I'm learning javascript and made this little program that takes the price, qty, adds tax and gives you a total. I put in an if statement so that if qty is 0, it becomes 1 then does the calcs. However, if I put in say price 5 and qty 2, qty is changing to false and it doesn't calc. Here it is: http://heresmary.com/test/Bought.html I'm taking a JavaScript class in school and we are working with forms and summary pages. We were never taught how to change the font color and bgColor when we go to the summary page after an onSubmit. Can anyone fill me in on how it is done?
Hi, am newbie in this domain ,so i appreciate any help of you. Am making a site for tattoos and i see somewhere an application in Java for changing text, it was simple text box where you write the text you want and down you choose the Font and down you have the text you want in the wanted fond. Thank you!
Is it possible to dynamically change the value of text on a page as the user types into a text box? E.g. like: You Are Typing: <script> var keyword = document.getElementById('string'); document.write(keyword); </script> Or I could probably insert it into a function and loop it over and over again or is there a better way? I work at a college radio station and our brand new website just went live, but we're having one particular issue... We have a set list of shows that air each day, and on the site we have a marquee tag on the homepage that scrolls through showing each show and its broadcast time. Right now we're stuck changing this schedule each day by hand, but it's tough considering we're all college students ourselves and sometimes our own schedules simply don't allow the time. Is there a code that would allow this kind of a daily update to happen automatically? The format for the schedule is such: 4 - 5 pm // "Show 01" 5 - 6 pm // "Show 02" 6 - 8 pm // "Show 03" 8 - 10 pm // "Show 04" 10 - 12 am // "Show 05" Any help would be very much appreciated! I am looking for an input text that links to a iframe. . ? To begin, we need some simple HTML elements: A basic form; An Input text that will contain the URLs we want to use; An iFrame that will display the page we select from the input text. Thanks in advance Stickers Hi all, I hoping somebody can help me. I'm trying to acheive a line of text (with multiple links on each line) that change at set intervals. The code below seems to be working but I can only get working links on the first line that appears. Please can somebody help a gal out? xo [CODE] <html> <head> <title>Rotating Text</title> <script type="text/javascript"> var rotatingTextElement; var rotatingText = new Array(); var ctr = 0; function initRotateText() { rotatingTextElement = document.getElementById("textToChange"); rotatingText[0] = rotatingTextElement.innerHTML; rotatingText[1] = "why won't you work!?!?!?"; rotatingText[2] = "purdy please"; setInterval(rotateText, 5000); } function rotateText() { ctr++; if(ctr >= rotatingText.length) { ctr = 0; } rotatingTextElement.innerHTML = rotatingText[ctr]; } window.onload = initRotateText; </script> </head> <body> <span id="textToChange">log into your <a href="http://www.hotmail.com/">please</a> policy.</a> | can you <a href="http://www.google.com"> me?</a> </span> </body> </html> Yeah that was a loooong title. Hopefully it's clear enough Right now, my div changes opacity if it's moused over qua the following code: Code: style="opacity:0.3;filter:alpha(opacity=30)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.3;this.filters.alpha.opacity=30 but this isn't quite optimal, cause if the user mouses out, it changes back to fade, and the user can't quite see what he's entering. So I would like the div to have opacity=1 when one of the textfields in it is active and opacity=0 when it's not. Is there a way to do that? //deafdigit So I need some help with figuring out how to reset both my text boxes when I click a different radio button so that I can give another value in the textbox area. I am trying to do it without a reset button. Any helpful ideas? I am just confused with the process of resetting the values of both the text boxes in the code.Hmmm......lol I feel like the answer is to put it inline in the <input> tag... Code: <body>
<div id="content">
<h1>Convert temperature</h1>
<input type="radio" name="conversion_type" id="to_celcius" onclick="document.getElementById('degrees_celcius').disabled=this.checked;" />From Fahrenheit to Celcius<br />
<input type="radio" name="conversion_type" id="to_fahrenheit" onclick="document.getElementById('degrees_fahrenheit').disabled=this.checked;" />From Celcius to Fahrenheit<br />
<br />
<label>Degrees Fahrenheit:</label>
<input type="text" id="degrees_fahrenheit" class="disabled" /><br />
<label>Degrees Celcius:</label>
<input type="text" id="degrees_celcius" class="disabled"/><br />
<br />
<input type="button" id="convert" value="Convert" /><br />
<br />
</div>
</body>
Hi, i am having some problems keeping the formatting of elements the same for html and javascript, i have a seperate css file for all the formatting of the tags in html, and when i use javascript i want it to stay the same. eg. when i use <h2> Heading </h2> below it wont print the same style as above, the color is the same, but the text is bigger and bold. <script type="text/javascript"> document.write("<h2> Heading </h2>); </script> Any help will be greatly appreciated. Thanks I want to keep the exact same formatting for both, using the Hi All, I am opening window using following code : Code: <script>window.open('Results.aspx?sorttype=text&sort=OTName&sortname=Document&sortorder=ascending','Results','top=0,left=0,height=715,width=" & sRsultWindowSize & ",toolbar=no,status=yes,resizable=yes,scrollbars=no,location=no')</script>
I want to keep new window top of the parent window. How can i achieve that ? Thanks for your help -John hi, i'm trying to keep a copy of a variable at 4 digits.. this is what i came up with.. it's working but i'm only a noob, so i would very like to know is there any other simpler and/or elegant way to do this.. also i would appreciate it if you could point out any bad syntax or something.. Code:
page = 100
function makeit4digits(){
page4digit = page
if (page<10)
{
page4digit = "000"+ page
}
else if (page<100)
{
page4digit = "00"+ page
}
else if (page<1000)
{
page4digit = "0"+ page
}
}
I've noticed that if you declare a variable in one function, then call another function, the variables cannot be accessed in that function. Is there any way to get the value of a variable declared in a different function?
Beginner here, so please bear with me... Essentially, I'm trying to put together a survey which keeps a running total at the bottom of the page that is updated each time the user makes a choice. So, something like this: Checkbox A - $5.00 Checkbox B - $10.00 Checkbox C - $20.000 Total _____ (Where Total is a textbox.) Originally, I thought this would be easy -- I could just include the onClick attribute in the input tags and call a function each time a checkbox is selected. The problem is that the survey software I'm using doesn't seem to allow me to alter the input tags. Basically, I can create the survey using their customized software and it generates the form, input tags, etc. I can then add customized html/javascript before and after each question. All the code I add appears within the same form. So, is there an easy way to solve this problem without altering the input tags? Hello everyone, I have done a lot of research looking for answers on this one but unable to find anything that helps. I have a couple of questions on a page and each are contained in there own form. The questions themselves use checkboxes. I would like the page to not refresh and jump to the top of the page after they submit there answer. So on questions that use radio buttons I have been using Code: <input type="submit" value="Submit" onclick="get_radio_value(); return false;" /> for the submit buttion and that works perfect. I try and use it on questions that use checkboxes and it doesnt work so as a work around I am using the form's action attribute to set it to a link on the page. Here is my form code: Code: <form name="question2" action="#q2">2. <strong>Multiple choice:</strong><a name="q2"></a> Which patient or patients could be transferred to another hospital under the EMTALA Act?<br /> <input type="checkbox" value="a" name="aquestion" />Smith, Bill<br /><input type="checkbox" value="b" name="bquestion" />Wells, Patricia<br /> <input type="checkbox" value="c" name="cquestion" />Hamilton, Larry<br /> <input type="checkbox" value="d" name="dquestion" />Rodriquez, Brad<br /><input type="checkbox" value="e" name="equestion" />Baker, Madison<br /><input type="checkbox" value="f" name="fquestion" />Kahn, Brent<br /> <input type="checkbox" value="g" name="gquestion" />Cahill, Mark<br /><input type="submit" onclick="get_radio2_value()" value="Submit" /></form> <script type="text/javascript" src="first_triage_java_clinical.js"> </script> and here is the javascript code if it helps: Code: function get_radio2_value()
{
var w = 400;
var h = 400;
var wleft = (screen.width/2)-(w/2);
var wtop = (screen.height/2)-(h/2);
var wrong = "<html><head><style type='text/css'> * {margin: 0; padding:0; border:0;}</style>\
<title>Incorrect, try again!</title></head><body><bgsound src='Plbt.wav'>\
<a href='javascript:window.close()'><img src='wrong.jpg'></a></body></html>";
var right = "<html><head><style type='text/css'> * {margin: 0; padding:0; border:0;}</style>\
<title>You are Correct!</title></head><body>\
<a href='javascript:window.close()'><img src='right.jpg'></a></body></html>";
var correct = "false";
if (document.question2.cquestion.checked)
{
if(document.question2.dquestion.checked)
{
if(document.question2.equestion.checked)
{
if(document.question2.fquestion.checked)
{
if(document.question2.gquestion.checked)
{
var correct = "true";
}
}
}
}
}
if (document.question2.aquestion.checked)
{ var correct = "false"; }
if (document.question2.bquestion.checked)
{ var correct = "false"; }
if (correct != "true")
{ var popup = window.open('','','resizeable=no,scrollbars=no,width=221,height=112, top='+ wtop +', left='+ wleft);
popup.document.write(wrong);
pops.document.close();
}
else
{ var popup = window.open('','','resizeable=no,scrollbars=no,width=221,height=112, top='+ wtop +', left='+ wleft);
popup.document.write(right);
pops.document.close();
}
}
hi there, i have a problem which is there is some javascript codes keeping the #usemap tag from working here is my webpage Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta content='text/html; charset=windows-1256' http-equiv='Content-Type' />
<title>Assiut map</title>
<script src="shiftzoom.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript">
<!--
if(document.images&&document.createElement&&document.getElementById){
document.writeln('<style type="text/css">');
document.writeln('img.shiftzoom { visibility: hidden; }');
document.writeln('<\/style>');
}
shiftzoom.defaultCurpath = 'images/cursors/';
//-->
</script>
</head>
<body>
<div id="content">
<div style="float: left; width:700px; height:300px; border:1px solid gray; margin-right: 1em; margin-bottom: 0.25em;">
<div style="width:700px; height:300px; background: url(images/indicator.gif) 50% 50% no-repeat;">
<img id="map" usemap="#map" class="shiftzoom" onLoad="shiftzoom.add(this,{showcoords:false,zoom:100});" src="assiut.jpg" width="700" height="300" alt="large image" border="0" />
</div></div></div>
<map name="map" id="map">
<area shape="circle" coords="250,160,15" href="#nowhere" title="Ahmed house<br>name:ahmed<BR>Class:1-1" alt="" />
<area shape="circle" coords="110,164,15" href="#nowhere" title="Mohamed house<br>name:Mohamed<BR>Class:2-1" alt="" />
<area shape="circle" coords="190,362,15" href="#nowhere" title="Mostafa house<br>name:Mostafa<BR>Class:3-1" alt="" />
</map>
</body>
</html>
the .js file in attachments which have somthing that keeps the #usemap from working, would be so thankful if anyone could help thanks |
|||||||