|
JavaScript - Replace Image Of Text With Actual Text.
I need to replace the captions with simple text for download speed purposes. This is controlled by a piece of Javascript written for me.
I need to change the caption image for a text one. The site is here Frank alias effpeetee. Similar TutorialsSo I have a site, It has a few paragraphs. When a customer presses a href, or a navigation link, I want that block of text to change to a different set of paragraphs. For instance Ive got a Div set for the main block of text with general information. When they click a link at the top, I want this text to change to something else, without having to reload the entire page or create a completely new HTML file. I have read on innerhtml and setting particular elements but I cant find any good online resources for using a simple link rather than a button to change a block of text In essence Set block of text to be element "old text" Set block of new text to be element "new text" ( all the while not showing this text on the page until the link is pressed) Classify href as trigger to replace old text with new text. BAM, victory! Any help would be greatly appreciated. Hello, how do I replace text throughout a page? I would like to replace: Code: <IMG SRC="../template/wysiwyg/uploads/image1.jpg"> with: Code: <IMG SRC="template/wysiwyg/uploads/image1.jpg"> removing the: Code: ../ throughout the whole page. Thank you! Hello, I want to replace the text headings with images. I have tried adding an 'img scr' tag but then the menu won't expand. I got the code from here The JavaScript Source: Navigation : Expanding Menu I would appreciate any help. Im working on a 2nd case and I could use some help I need to replace the content of the welcome box Code: <div id="welcome"> Today is<br /> Tuesday, May 29, 2007 <br /><br /> Born today<br /> Ian Fleming (1908) - Author </div> with generated text that displays the current date, and the name of a famous person born on that date. Including comments that describe each of the variables used in writing this code and the functions that the code accesses. How to get this to work? Code: <html> <body> <script type="text/javascript" src="01.js"> <h1>Welcome</h1> <a href="#" onclick="write(); return false;">Click here</a> <div id="info_here"> </div> </body> </html> 01.js Code: function write() {
var a=document.getElementById("info_here");
a.innerHTML=document.write("Hello <br />" + "Thanks for clicking");
}
Hello I have this snippet for controlling the number of characters entered in a textarea. It works. But, if I replace in this code the name "my_form" by "contact-form" and "my_text" by "message", it doesnt ! It looks like the keyword is " my_form ". You change that , and the script will not work! It turns out that I have to change those names because the form as it was already had those names my_form and message before I added this counter And I dont want to replace the names of the form in order to adapt them to this code snippet below. The question is why would the script not work if I have just replaced two words, which dont seem to be keywords of JS programming (my_form and my_text) <html><head> <title>(Type a title for your page here)</title> <script language=JavaScript> <!-- function check_length(my_form) { maxLen = 50; // max number of characters allowed if (my_form.my_text.value.length >= maxLen) { // Alert message if maximum limit is reached. // If required Alert can be removed. var msg = "You have reached your maximum limit of characters allowed"; alert(msg); // Reached the Maximum length so trim the textarea my_form.my_text.value = my_form.my_text.value.substring(0, maxLen); } else{ // Maximum length not reached so update the value of my_text counter my_form.text_num.value = maxLen - my_form.my_text.value.length;} } //--> </script> </head> <body> <form name=my_form method=post> <textarea onKeyPress=check_length(this.form); onKeyDown=check_length(this.form); name=my_text rows=4 cols=30></textarea> <br> <input size=1 value=50 name=text_num> Characters Left </form> </body> </html> Hi I have created the following effects on the images seen here http://techavid.com/design/test3.html . You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code. Here code I have now.... Code:
<style type="text/css" media="screen">
#wrapper {
background: url('_assets/images/sun-inactive.p') no-repeat #777eee;
width: 470px;
margin: 0 auto;
}
a#sun{
background: url('_assets/images/sun-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#sun:hover,
a#sun.active {
background: url('_assets/images/sun.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#plane {
background: url('_assets/images/plane-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#plane:hover,
a#plane.active {
background: url('_assets/images/plane.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#nano {
background: url('_assets/images/nano-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#nano:hover,
a#nano.active {
background: url('_assets/images/nano.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
#popuptext {
float: left;
margin: -30px 0 0 0;
padding: 0 0 0 0px;
font-size: 11px;
}
#popuptext a {
color: #ff6600;
padding: 0 30px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<a id="sun" href="#"></a>
<a id="plane" href="#"></a>
<a id="nano" href="#"></a>
</div>
<div style="clear:both"></div>
<div id="popuptext">1st: <a href="#">Sun</a>
2nd: <a href="#">Airplane</a>
3rd: <a href="#">Nano</a>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// target each link in the navigation div
$('#navigation a').click(function() {
// link that you clicked
clicked = $(this).attr('id');
// make sure that all the others are not active
// except for the clicked one
$('#navigation a').each(function() {
if ($(this).attr('id') == clicked) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
// prevent the default link action
return false;
});
});
</script>
What jquery or javascript code do I need to do this? thanks, chaser As of right now I have a code that will work in IE but wont work in FireFox...go figure. Basically what I want to have happen is when you type in an area code it will provide an output in a predetermined area of the page. For Example: Input- 512 Output - Austin, TX The code that I have doesn't work with firefox and I was just wondering if there was a code that would allow that to happen. Thanks! Hi, I'm a beginner in web programming so please, don't mind if this might look as a dum request. I need an image to move from outside the viewed space, from somwhere on the page where users cannot hav acces, let's say from x position of -439px to 0px, so that the image looks like entering the window. And I need to do this after the user clicks a piece of text that is already on the screen. How can I do that ? In what tag should I include the image ? where should I put de event handler/ listener ? I know I need to change the CSS atributes but how. I tried this and it didn't work in Firefox nor in IE. Code:
THE HTML FILE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Greenbrain</title>
<script language="javascript" type="text/javascript" src="greenbrain.js"></script>
<link rel="stylesheet" type="text/css" href="greenbrain.css">
</head>
<body>
<div id=int; onClick="intr()"> <h1 class="intrare">INTRARE</h1> </div>
<div id=img_intrare> <img src="soare.png"; class="soare"> </div>
</body>
</html>
THE .CSS FILE
body {background-image:url(fondhome.png); position:fixed;}
img.soare {position:absolute; left:-459px; top:100px; z-index:1;}
h1.intrare {z-index:2}
THE .JS FILE
function intr()
{
var x, xi;
x=0;
xi=document.getElementById('img_intrare').style.left;
if(xi!=x) {document.getElementById('img_intrare').style.left = x + "px"}
}
ps: i've been trying for 4 days now to find out how to do this, the answer might be just under my nose but then, my nose would be to big and pidgeons would come and sit on it... Hi, I have a form with 9 text fields and a text area. What I want to do is replace the text in the text area depending on how many fields contain text. For example my text boxes are named 1 to 9, if the user enters text in the first five boxes I want the text area to auto fill with 'you have selected boxes 1 to 5' if the user selects all nine it will say 'you have selected 1 to 9', therefore, the user must complete the text boxes in order. I have it working with an onchange event but i have a button on the form to also auto fill the text boxes and it does not work if this is clicked. Any help would be appreciated! Hi all, Thanks for reading. I'm having an issue trying to accomplish the following - I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after. This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly? Code: <script language="javascript">
fields = 1;
function addMore() {
if (fields = 1) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";
fields = 2;
} else if (fields = 2) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;
} else {
document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;
}
}
</script>
Here is the code in my HTML - Code: <input type="text" name="field1" size="25" /> <span>Field 1.</span> <div id="addedMore"></div> <p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p> Thank you very much. Hi, I have a form setup so that selecting a radio button opens a specific text field. The problem is if the user starts to enter information, then switches to a different radio button (perhaps they chose the wrong radio to start), the text they already started to enter on the previous textfield doesn't get cleared. This will be a problem later when inserting to sql. Here is a summary of the code: Code: <head>
<script type="text/javascript">
function doClick(objRad){
if (objRad.value=="0"){
document.getElementById("textbox").style.display='block';
}
else{
document.getElementById("textbox").style.display='none';
}
if (objRad.value=="1"){
document.getElementById("textbox1").style.display='block';
}
else{
document.getElementById("textbox1").style.display='none';
}
if (objRad.value=="2"){
document.getElementById("textbox2").style.display='block';
}
else{
document.getElementById("textbox2").style.display='none';
}
}
</script>
</head>
<body>
<form action="insert.php" method="post">
<p>Please choose the business type:
<input type="radio" name="rad" value="0" onclick="doClick(this)">
Sole Proprietorship
<input type="radio" name="rad" value="1" onclick="doClick(this)">
Partnership
<input type="radio" name="rad" value="2" onclick="doClick(this)">
Corporation
<div id="textbox" style="display:none">
<input type="text" name="txt">
This is my sole proprietorship info.</div>
<div id="textbox1" style="display:none">
<input type="text" name="txt">
This is my partnership info.</div>
<div id="textbox2" style="display:none">
<input type="text" name="txt">This is my corporation info.
</div>
</form>
</body>
Any help is appreciated, Thanks in advance! Hello. I have a textarea where user can select a text then copy to clipboard (using EditArea script for highlighting) I need append additional information to the selected text so it won't be visible in the textarea, but only appear after copied to clipboard. For example: Code: text line one text line two text line three user selected word "two", hit CTRL+C to copy into clipboard (or used browser's context menu), but in clipboard it should be saved as: "selected word 'two'" What would be the approach? Thank you. im clueless when it comes to javascript, but this is what im trying to find: i have a page that has multiple text areas, i also have 4 links that when clicked i want to add some predefined text into the active text area the one with the text cursor in? The Hyperlinks: Code: <a href="#sc">Shift Changed</a> | <a href="#ol">On Leave</a> | <a href="#ot">OverTime</a> | <a href="#ss">ShiftSwap</a> The textareas: PHP Code: <td><textarea name=details$i rows=4 align=absmiddle cols=16 value="$details[$i]\">$details[$i]</textarea></td> as you can see the textareas are created on the fly based on a php array. would anyone be willing to put some code together for this? or even give me the basics on how i can get the active textarea's name so i can pass that to a script that inserts into a given field? Hi. I have developed a form all working fine but am struggling on the following. I need a checkbox for an item, when the checkbox is true the user can enter text in a text box, only if the checkbox is ticked. I have numerous items I need for this. Hope someone can help. Thanks Hi, Here's a sample form: Code: <form action="#" method="post"> Name:<br /> <input type="text" name="name" value="your name" /><br /> E-mail:<br /> <input type="text" name="mail" value="your email" /><br /> <input type="submit" value="Send"> </form> When you tab to a text input, the value gets highlighted. How can it be disabled? Any help is appreciated! Mike Hi, I'm hoping this will be an easy one for you experts out there. I am working on a convention registration form. What I'm trying to do is have the text "50.00" pop into the COST field when any text (even if it's only one character) is entered into the NAME field. If the text in the NAME field is deleted, the "50.00" should also be deleted. Does anyone have a script that does this? Thanks! Hello there, this is my first post on this forum. I have learned a good bit of PHP and have implemented it for use in my work as a math tutor. My kids are telling me, however, that it is too inconvenient to hit tab or click on the next text box and would prefer to use the old style pencil and paper. I thought of a good idea: Javascript would be able to automatically focus the curser on the next text box if some condition was met. For example: 6+7. If the textbox reads 13, it will focus on the next text box. Otherwise, nothing happens. This kills three birds with one stone; the user will know if they got the question right or wrong and it will move automatically if they got it correct. The problem is I lack any real JavaScript wisdom. I would guess this would be quite simple. The closest thing I have found upon searching was this from the user requestcode, but this has to do with once the user has typed in 4 characters it moves automatically. Code: <SCRIPT LANGUAGE="JavaScript">
function nextbox(fldobj,nbox)
{
if(fldobj.value.length>3)
{document.forms[0].elements[nbox].focus()}
}
</SCRIPT>
</head>
<body onLoad="document.myform.txt1.focus()">
<CENTER>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="txt1" SIZE="4" MAXLENGTH="4" onKeyUp="nextbox(this,1)">
Thank you for the help. Hello everyone, I'm hoping that somebody can point me in the right direction. What I need to do is create a form which people enter text, and it displays over an image immediately on the same page. I have seen this done on so many different websites and can only assume that it's Javascript or Jquery that makes it work. I have seen it work where people enter the desired text, click update, and the text is then displayed over the image, but I've also seen it work where clicking update is not required, and the text is displayed automatically. If anybody can direct me to a script which does this, I'd be very grateful. Any help is appreciated! Many thanks, MG |
|||||||