|
JavaScript - Function() Link To <textarea> Display Problems
Hi,
I am just a noob and this is my first go at javascript and html I am trying to figure out how to display info from an array in the <textarea>, I have tried a number of things nothings worked and I know it must be something simply but have tried a number of things I also have to clear the <textarea> after it displays the info mentioned above and I think I have that sorted but I also have to have the <textarea> display all signup info stored in the array when a user clicks on a button Here's the code Code: function show()
{
var myArray = new Array();
myArray[0] = document.getElementById('fullname').value; myArray[1] = document.getElementById('Address').value; myArray[2] = document.getElementById('Phone').value;
document.writeln('Thank you for signingup,' + ' ' + myArray[0] + '. Your details will be confirmed by E-mail to ' + myArray[2] );
document.writeln("<br>")
document.writeln('Details:')
document.writeln("<br>")
for (var i=0; i<myArray.length; i++)
{document.write(myArray[i] + "<br />"); }
}
Thanks Similar TutorialsHello there, I am having trouble with a javascript snippet that adds text to a textarea when you click on the link. Problem is that when you regularly type into the textarea, the links no longer add text. Here is the links: Code: <a href="javascript:insertText('<b></b> ','textIns');" onClick="void(0)">Bold</a>
Here is the javascript Code: <script type="text/javascript">
function insertText(val,e) {
document.getElementById(e).innerHTML+=val;
}
</script>
Any ideas or suggestions? Hi, I am having trouble searching for text in a textarea in all browsers. I display formatted text in a textarea with tinyMCE editor. Some of the text contains blanks ('______') which the user needs to find and fill in (usually with a number). I have written a new button on the toolbar of the editor which will find and highlight the blank when clicked. The user will click the button, fill in the text, click the button, fill in the text, etc. In IE the blanks are highlighted just fine. The only problem is: user clicks button and first blank is highlighted. User fills in the text then clicks the button again. Second blank should be highlighted but it skips right to the third blank. If you don't fill anything in, the next blank will be highlighted. If you highlight and then fill anything in, the next blank is skipped and the following blank is highlighted. Any thoughts? But my worst problem is with Mozilla. I get an error. It does not act like setSelectionRange(pos, pos+len(str)) is a valid function call. I receive the following error: "component returned failure code: 0x800004005 (NS_ERROR_FAILURE)[nsIDOMNSHTML TextareElement.setSelectionRange]" Here is my function: var win = window; var n = 0; var str = '______'; function FindBlanks() { var txt, i, found; win = tinyMCE.get('txtPolicy').getDoc(); if (str == "") return false; if (window.execScript) { txt = win.body.createTextRange(); //Find the nth match from the top of the page for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) { txt.moveStart("character", 1); txt.moveEnd("textedit"); } // If found, mark it and scroll it into view if (found) { txt.moveStart("character", -1); txt.findText(str); txt.select(); txt.scrollIntoView(); // n = i--; n++; } //Otherwise, start over at the top of the page and find first match else { if (n > 0) { n = 0; alert("End of document has been reached."); } //Not found anywhere, give message. else alert("No blanks found."); } } else { //document.getElementById('txtPolicy').setFocus; var ht = '______'; if (ht.length == 0) { alert('highlightText has zero lenth'); return false; } var str2 = document.getElementById('txtPolicy').value; var startPos = str2.indexOf(ht); if (startPos == -1) { alert('No blanks found'); return false; } document.getElementById('txtPolicy').focus(); document.getElementById('txtPolicy').setSelectionRange(startPos, startPos + ht.length); return true; if (n == 0) alert ("No blanks found."); } return false; } Can anyone help me with this? Thanks. This is just a goofy little project to add to my learning, but I've come across a problem that would be nice to solve. It is not a TinyMCE or other JS editor replacement, just something to play with for the holidays! In the following program, you can create an HTML template then add/modify common elements and display the results. I can place tags around highlighted areas and insert/append functions where the cursor is positioned. Works OK so far. The problem is when the text exceeds the <textarea> boundaries and I try to tag or insert at cursor, the display reverts to the first line of the <textarea> display. I would like to keep the displayed area within the boundaries and just push down the inserted text. Problem: Is there a simple way to accomplish this task or do I just have to put-up with the bouncy display whenever I insert code into the area? Code: <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Simple JS Editor</title>
<!--
One annoyance: When <textarea> content exceeds size of element
additional entries cause display to JUMP to beginning
of the area being edited.
-->
<style type="text/css">
.tags { background-Color:lightblue; }
.objs { background-Color:pink; }
.ctrl { background-Color:lime; }
</style>
<script type="text/javascript" language="javascript"> <!-- External: src="InsertText.js"></script -->
// function insertAtCursor(myField, myValue) {
function InsertText(myField, myValue) {
//IE support
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
}
//MOZILLA/NETSCAPE support
else if (myField.selectionStart || myField.selectionStart == '0') {
// else if (myField.selectionStart != 'undefined') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
myField.selectionStart = startPos + myValue.length;
myField.selectionEnd = startPos + myValue.length;
} else { myField.value += myValue; }
myField.focus(); // new entry here
}
// calling the function
// insertAtCursor(document.formName.fieldName, value);
</script>
<script type="text/javascript"> <!-- External: src="InsertCode.js"></script -->
// Modified from:
// http://www.codingforums.com/showthread.php?t=134113 - Author Kor
// http://www.codingforums.com/showthread.php?t=182713
var HTMLstart = ['<!DOC HTML>',
'<html>','<head>','<title> Untitled </title','',
'<style type="text\/css"><\/style>','',
'<script type="text\/javascript">',
' function $_(IDS) { return document.getElementById(IDS); }',
'<\/script>','',
'</head>','<body>','','<h1> Test </h1><hr>','',
'</body>','</html>'
];
var RBtnStart = ['<input type="radio" name="RBtn" value="0">RBtn 1',
'<input type="radio" id="RBtn" name="RBtn" value="1">RBtn 2',
'<input type="radio" id="RBtn" name="RBtn" value="2">RBtn 3',''
];
var CBoxStart = ['<input type="checkbox" id="CBox0" name="CBox0" value="A">CBox A',
'<input type="checkbox" id="CBox1" name="CBox1" value="B">CBox B',''
];
var SBoxStart = ['<select id="SBox" name="SBox">',' <option value="">Pick</option>',
' <option value="1">1</option>',' <option value="2">2</option>',
' <option value="3">3</option>',' <option value="4">4</option>',
' <option value="5">5</option>',' <option value="6">6</option>',
'</select>',''
];
var TblsStart = ['<table border="1">','<caption> Table </caption',
' <tr>',' <td> 1 </td>',' <td> 2 </td>',' </tr>',
' <tr>',' <td> 3 </td>',' <td> 4 </td>',' </tr>',
'</table>',''
];
var ULstart = ['<ul>',' <li> 1 </li>',' <li> 2 </li>',' <li> 3 </li>','</ul>',''];
var OLstart = ['<ol>',' <li> A </li>',' <li> B </li>',' <li> C </li>','</ol>',''];
var DLstart = ['<dl>',' <dt> A </dt>',' <dt> B </dt>',' <dt> C </dt>','</dl>',''];
function formatText(el,tag){
var selectedText = document.selection
?document.selection.createRange().text
:el.value.substring(el.selectionStart,el.selectionEnd); // IE:Moz
if (selectedText == "") {return false}
var newText='<'+tag+'>'+selectedText+'</'+tag+'>';
if(document.selection) { document.selection.createRange().text=newText; } // IE
else { // Moz
el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value.length);
}
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return false">
<textarea id="myTextarea" name="myTextarea" rows="18" cols="80"
style="font-family: monospace; font-size: 12pt; float: left;"></textarea>
<div style="float: left;"><h3 class="tags">Enclose (highlighted)</h3>
<input class="tags" value="Bold" onclick="formatText (myTextarea,'b');" type="button">
<input class="tags" value="Italic" onclick="formatText (myTextarea,'i');" type="button">
<input class="tags" value="Underline" onclick="formatText (myTextarea,'u');" type="button">
<br>
<input class="tags" value="h1" onclick="formatText (myTextarea,'h1');" type="button">
<input class="tags" value="h2" onclick="formatText (myTextarea,'h2');" type="button">
<input class="tags" value="h3" onclick="formatText (myTextarea,'h3');" type="button">
</div>
<div style="float: left;"><h3 class="objs">Insert</h3>
<button class="objs" onClick="InsertText(this.form.myTextarea,RBtnStart.join('\n'))">RBtn</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,CBoxStart.join('\n'))">CBox</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,SBoxStart.join('\n'))">SBox</button>
<br>
<!--
<button class="objs" onclick="alert('Not coded yet')">1D-Array</button>
<button class="objs" onclick="alert('Not coded yet')">2D-Array</button>
<button class="objs" onclick="alert('Not coded yet')">Populate</button>
<br>
<button class="objs" onclick="alert('Not coded yet')">Toggle</button>
-->
<button class="objs" onClick="InsertText(this.form.myTextarea,TblsStart.join('\n'))">Tabel</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,'<br>')">br</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,'<p>')">p</button>
<br>
<button class="objs" onClick="InsertText(this.form.myTextarea,ULstart.join('\n'))">ul-li</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,OLstart.join('\n'))">ol-li</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,DLstart.join('\n'))">dl-dt</button>
</div>
<div style="float: left;"><h3 class="ctrl">Control</h3>
<button class="ctrl" onclick="document.getElementById('myTextarea').value=HTMLstart.join('\n')">Template</button>
<button class="ctrl" onClick="javascript:this.form.myTextarea.focus();this.form.myTextarea.select();">
Highlight Text to Copy</button>
<button class="ctrl" onclick="document.getElementById('myTextarea').value=''">
Clear</button>
<p>
<button class="ctrl" onclick="document.getElementById('myEditResults').innerHTML = document.getElementById('myTextarea').value">
Display</button>
</div>
<div id="myEditResults" style="float:left; border: 1px solid red; height: 20em; width: 70em; overflow:auto;">
</div>
<br style="clear: both;">
</form>
</body>
</html>
Hi guys. I am a newbie here on this forum. I have tried to learn how to use javascript on HTML forms however I just couldn't find the answers to my questions on the net. Perhaps I am not using the correct 'terms' when searching so I decided to join a forum like this to ask help. Anyway, I have a form with multiple inputboxes and lists and my goal is to generate and display all the accumulated information to a textarea so that the user can copy it afterwards. I have an idea how I could make it work but I am not entirely sure how to put it on a code. I actually have a number of questions on this so let me start off with the first one. I am eager to learn javascript so I would post my questions one after the other as my questions get answered. That way I get to learn how to build the code from the top. So my first one is this.. 1. I would like to know how to display a user input on an inputbox to a textarea. My html form is like this: Code: <html>
<head>
<script language="javascript">
function generateLogs (form)
{
TW_Logger.tickDoc.value = TW_Logger.name.value;
}
</script>
</head>
<body>
<form name="TW_Logger">
<label for="name_id">Name: </label>
<input type="text" name="name" id="name_id"/><br /><br />
<label for="logs_id">Ticket Documentation: </label><br />
<textarea cols="53" rows="5" name="tickDoc" id="tickDoc_id">
</textarea><br /><br />
<label></label>
<input type="submit" value="Generate Logs" class="button1" onclick="generateLogs(this.form) " />
</form>
</body>
</html>
I don't know what I did wrong but the script is not working. I appreciate any help I can get from anyone. Thanks! Hi, i have this jquery script on my photo galery page, it detects left and right key down on keyboard and acts uppon key down. Is there any way to deactivate it when I click on a text area that is located below each photo? this must be a common issue I think... Textareas id="comment_" Code: <script type="text/javascript">
$(document).keydown(function(e){
if (e.keyCode == 37) {
window.location = "photo.php?phot=$prev_file_p&p_id=$prev_file"
return false;
}
else if (e.keyCode == 39) {
window.location = "photo.php?phot=$next_file_n&p_id=$next_file"
return false;
}});
</script>
How to: pass local variable from <head> JS function to <body> textarea I have a JS function in the head that calculates a variable. the function is triggered by the vevent of a button click. when calculation is done, how is it sent back to the page and placed in a textarea or textbox....?? /Beginner issues :/ I'm having to write a program in javascript that appends a html table to show numerical values... Here is my code which I'm stuck at... Code: <!DOCYTYPE html>
<html>
<head><title>Numeric Bases</title>
<style type="text/css">
body { padding: 2em; margin: 0px auto; background-color: white; color: #222; font-family: "Helvetica", "Arial", sans-serif;}
h1 {border-bottom: 1px solid #aaa; text-align: center; }
p#countdown { font-size: 150px; text-align: center; margin: 0; padding: 0;}
table { width: 50%; margin: 0 auto; }
caption { font-size: xx-large; font-weight: bold; }
thead > tr {background-color: #aaa; }
td, th { text-align: center; padding: 1em; border: 1px solid #ccc; }
tr.alternate { background-color: #eee; }
</style>
<script type="text/javascript" src="num-bases1.js"></script>
</head>
<table>
<caption>Numerical values in various bases</caption>
<thead><tr><th>Dec</th><th>Binary</th><th>Octal</th><th>Hex</th></tr></thead>
<tbody></tbody>
</table>
</body></html>
Code: /*
* The following function should generate table cells
* that contain an integer (in base 10), and its equivalent
* in Binary (base 2), Octal (base 8), and Hexidecimal (base 16).
*/
var num_bases = function(max_number) {
output = '';
for ( var count = 1; count <= max_number; count++){
var binary = count.toString(2);
var octal = count.toString(8);
var hex = count.toString(16);
output += '<tr><td>' + count + '</td><td>' + binary + '</td><td>' + octal + '</td><td>' +
hex + '</td></tr><tr class="alternate"><td colspan="4"></td></tr>';
}
// TODO:
// Write a for loop that appends HTML for the
// table row and cells to the output.
//
// The following is an example of a table row:
//
// <tr> <td>4</td> <td>100</td> <td>4</td> <td>4</td> </tr>
//
// Every other row should have an "alternate" class:
//
// <tr class="alternate">
document.getElementById('num-bases').innerHTML = output;
}
window.onload = function() {
num_bases(50);
}
I was having some problems getting my function to only perform when I click the shoot button. Right now I have it where if you click the buttons and it plays the whole game. I was wondering if there is some way to maybe hide it and then just print the results only when I press the shoot button. I posted my game here its the front page. http://mmoloot4u.com/ I am trying to find out so things so far i thought about doing this, but im not sure the best way. Could i remove assignments from document.getElementByIf('whatever').value from the onclick code for rock, paper, and scissors. Instead define corresponding variables in your <script> area and assign to those variables. Then in 'shoot' you can assign those variables to the corresponding element values? // JavaScript Document function open_tab(el){ if(document.getElementById(el).style.display == "none"){ document.getElementById(el).style.display = "block"; } } function close_tab(el){ if(document.getElementById(el).style.display == "block"){ document.getElementById(el).style.display = "none"; } } Pretty basic code, works great in FireFox and Chrome in both HTML and ASPX pages. However in IE it only works properly in the .aspx pages. There are a series of links so when you click it hides the div's which are set to display:"block", except for one "div" which won't change to display"none" and I don't know why. Hi I'm trying to finish integrating my affiliate program and i'm having problems on the last bit.. basically how do i get this to work? basically i need the id token to be displayed... Code: <input name="radiobutton" type="radio" onclick="window.location.href='http://tracking.alpharooms.com/idevaffiliate.php?alpha_id=552&alpha_keyword= <script language="JavaScript" type="text/javascript" src="http://www.theholidaymakers.me.uk/affiliates/display.php?token=id"></script> &alpha_url=http://www.alpharooms.com/cheap-flights.aspx/?cob=64'; " value="radiobutton" /> the display.php file is below PHP Code: <?PHP ############################################################# ## iDevAffiliate Version 5.2 ## Copyright - iDevDirect.com L.L.C. ## Website: [url]http://www.idevdirect.com/[/url] ## Support: [url]http://www.idevsupport.com/[/url] ## Email: [email]support@idevdirect.com[/email] ############################################################# /* -------------------------------------------------------------- You can alter the CSS below but do not remove the Java Script Tags. They are required because this file is being called via Java Script. Any invalid coding adjustments to this page will result in Java Script errors in the page you've placed the Java Script code snippet. Adjustments to this file are not supported by iDevDirect. We highly suggest making a backup of the original display.php file before making changes. If you're wondering what the variable $idev represents, that is the affiliate ID number and is obtained from the /includes/tracking.php file. -------------------------------------------------------------- */ $token_tag_id = ""; $token_tag_username = "Affiliate Username"; $token_tag_phone = "Affiliate Phone"; $token_tag_name = "Affiliate Name"; $token_tag_company = "Affiliate Company"; $token_tag_city = "Affiliate City"; $token_tag_state = "Affiliate State"; $token_tag_zip = "Affiliate Zip Code"; $token_tag_website = "Affiliate Website"; ?> document.write('<style type="text/css">'); document.write('<!--'); document.write('p.idev {'); document.write('font-size: 12px;'); document.write('font-family: Arial, Helvetica, sans-serif;'); document.write('font-weight: bold;'); document.write('}'); document.write('-->'); document.write('</style>'); <?PHP $time_now = time(); include ("API/config.php"); include ("includes/validation_functions.php"); include ("includes/tracking.php"); // SANITIZE AND SET INCOMING TOKEN VARIABLE // ----------------------------------------------------------- $token = check_type('token'); if ($idev) { // GET AFFILIATE DATA // ----------------------------------------------------------- $aff_data = mysql_query("select username, phone, f_name, l_name, company, city, state, zip, url from idevaff_affiliates where id = '$idev'"); if (mysql_num_rows($aff_data)) { $aff_data = mysql_fetch_array($aff_data); $affiliate_username = $aff_data['username']; $affiliate_phone = $aff_data['phone']; $affiliate_fname = $aff_data['f_name']; $affiliate_lname = $aff_data['l_name']; $affiliate_name = $affiliate_fname . " " . $affiliate_lname; $affiliate_company = $aff_data['company']; $affiliate_city = $aff_data['city']; $affiliate_state = $aff_data['state']; $affiliate_zip = $aff_data['zip']; $affiliate_website = $aff_data['url']; } } // ----------------------------------------------------------- // DISPLAY TOKEN : AFFILIATE ID // ----------------------------------------------------------- if (($token == 'id') || (!$token)) { if ($idev) // ----------------------------------------------------------- { $token_id = $idev; } else { $token_id = "N/A"; } // ----------------------------------------------------------- print "document.write(\"<p class='idev'>$token_tag_id $token_id</p>\");"; } // ----------------------------------------------------------- // DISPLAY TOKEN : AFFILIATE USERNAME // ----------------------------------------------------------- if ($token == 'username') { if ($idev) // ----------------------------------------------------------- { $token_username = $affiliate_username; } else { $token_username = "N/A"; } // ----------------------------------------------------------- print "document.write(\"<p class='idev'>$token_tag_username: $token_username</p>\");"; } // ----------------------------------------------------------- // DISPLAY TOKEN : AFFILIATE PHONE // ----------------------------------------------------------- if ($token == 'phone') { if (($idev) && ($affiliate_phone)) // ----------------------------------------------------------- { $token_phone = $affiliate_phone; } else { $token_phone = "N/A"; } // ----------------------------------------------------------- print "document.write(\"<p class='idev'>$token_tag_phone: $token_phone</p>\");"; } // ----------------------------------------------------------- // DISPLAY TOKEN : AFFILIATE NAME // ----------------------------------------------------------- if ($token == 'name') { if (($idev) && ($affiliate_name)) // ----------------------------------------------------------- { $token_name = $affiliate_name; } else { $token_name = "N/A"; } // ----------------------------------------------------------- print "document.write(\"<p class='idev'>$token_tag_name: $token_name</p>\");"; } // ----------------------------------------------------------- // DISPLAY TOKEN : AFFILIATE COMPANY // ----------------------------------------------------------- if ($token == 'company') { if (($idev) && ($affiliate_company)) // ----------------------------------------------------------- { $token_company = $affiliate_company; } else { $token_company = "N/A"; } // ----------------------------------------------------------- print "document.write(\"<p class='idev'>$token_tag_company: $token_company</p>\");"; } // ----------------------------------------------------------- // DISPLAY TOKEN : AFFILIATE CITY // ----------------------------------------------------------- if ($token == 'city') { if (($idev) && ($affiliate_city)) // ----------------------------------------------------------- { $token_city = $affiliate_city; } else { $token_city = "N/A"; } // ----------------------------------------------------------- print "document.write(\"<p class='idev'>$token_tag_city: $token_city</p>\");"; } // ----------------------------------------------------------- // DISPLAY TOKEN : AFFILIATE STATE // ----------------------------------------------------------- if ($token == 'state') { if (($idev) && ($affiliate_state)) // ----------------------------------------------------------- { $token_state = $affiliate_state; } else { $token_state = "N/A"; } // ----------------------------------------------------------- print "document.write(\"<p class='idev'>$token_tag_state: $token_state</p>\");"; } // ----------------------------------------------------------- // DISPLAY TOKEN : AFFILIATE ZIP // ----------------------------------------------------------- if ($token == 'zip') { if (($idev) && ($affiliate_zip)) // ----------------------------------------------------------- { $token_zip = $affiliate_zip; } else { $token_zip = "N/A"; } // ----------------------------------------------------------- print "document.write(\"<p class='idev'>$token_tag_zip: $token_zip</p>\");"; } // ----------------------------------------------------------- // DISPLAY TOKEN : AFFILIATE WEBSITE // ----------------------------------------------------------- if ($token == 'website') { if (($idev) && ($affiliate_website) && ($affiliate_website != "http://")) // ----------------------------------------------------------- { $token_website = "<a href=\'$affiliate_website\' target=\'_blank\'>$affiliate_website</a>"; } else { $token_website = "N/A"; } // ----------------------------------------------------------- print "document.write(\"<p class='idev'>$token_tag_website: $token_website</p>\");"; } $affiliate_logo = "$logo_default"; // ----------------------------------------------------------- // DISPLAY TOKEN : AFFILIATE LOGO // ----------------------------------------------------------- if ($token == 'logo') { // ----------------------------------------------------------- // GET LOGO/IMAGE DATA // ----------------------------------------------------------- if (isset($idev)) { $logo_data = mysql_query("select filename from idevaff_logos where id = '$idev' and approved = '1'"); if (mysql_num_rows($logo_data)) { $logo_data = mysql_fetch_array($logo_data); $affiliate_logo = $logo_data['filename']; $logo_location = $base_url . "/logos/" . $affiliate_logo; } else { $logo_location = $logo_default; } } // ----------------------------------------------------------- list($width, $height, $type, $attr) = getimagesize("$logo_location"); // ----------------------------------------------------------- print "document.write(\"<img border='0' src='$logo_location' width='$width' height='$height'>\");"; } ?> HELP IS NEEDED, THANKS IN ADVANCE. Hello I need to not publicly display phone number inside my website page (I use Joomla CMS). In fact the main goal is of course to be able to show the number but not to be crawled by search engine.. So in practice instead to see this: Phone: 013456789 I would like to see this: Phone: Click here for see the number By clicking on that link the number must be displayed... My website for display the phone field use this php code: Code: <?php echo $CustomFields->field('my_phone',$listing); ?>
I asked in some forum and some people tell me is possible to customize this php code with javascript for let me hide/show the field value but I don't have a single idea how to do this because I'm not a programmer... I take a look in all javascript libraries but I don't find any javacript ready for use for let me implement it inside the php code... Anybody have a suggestion please ? many thank Evening all, I am new here and seeking some helping modifying this existing code that I found so that it will allow me to run 3 scrollers within the same page. I have tried to rename the variables and other elements within the script but still no luck.... I appreciate the responses: Code: <script type="text/javascript">
var goleftimage='images/left_arrow_1.jpg'
var gorightimage='images/right_arrow_1.jpg'
var menuwidth=380
var menuheight=60
var scrolldir="normal"
var scrollspeed=6
var menucontents='<nobr><center>SCROLLING CONTENT HERE</center></nobr>'
var iedom=document.all||document.getElementById
var rightdircode='onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"'
var leftdircode='onMouseover="moveright()" onMouseout="clearTimeout(righttime)"'
if (scrolldir=="reverse"){
var tempswap=leftdircode
leftdircode=rightdircode
rightdircode=tempswap
}
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-5000">'+menucontents+'</span>')
var actualwidth=''
var cross_scroll, ns_scroll
var loadedyes=0
function fillup(){
if (iedom){
cross_scroll=document.getElementById? document.getElementById("test2") : document.all.test2
cross_scroll.innerHTML=menucontents
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2
ns_scroll.document.write(menucontents)
ns_scroll.document.close()
actualwidth=ns_scroll.document.width
}
loadedyes=1
}
window.onload=fillup
function moveleft(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px"
}
else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))
ns_scroll.left-=scrollspeed
}
lefttime=setTimeout("moveleft()",50)
}
function moveright(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)<0)
cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px"
else if (document.layers&&ns_scroll.left<0)
ns_scroll.left+=scrollspeed
}
righttime=setTimeout("moveright()",50)
}
if (iedom||document.layers){
with (document){
write('<table border="0" cellspacing="0" cellpadding="1">')
write('<td valign="middle"><a href="#" '+leftdircode+'><img src="'+goleftimage+'"border=0></a> </td>')
write('<td width="'+menuwidth+'px" valign="top">')
if (iedom){
write('<div style="position:relative;width:'+menuwidth+'px;height:'+menuheight+'px;overflow:hidden;">')
write('<div id="test2" style="position:absolute;left:0;top:0">')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+menuwidth+' height='+menuheight+' name="ns_scrollmenu">')
write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>')
}
write('</td>')
write('<td valign="middle"> <a href="#" '+rightdircode+'>')
write('<img src="'+gorightimage+'"border=0></a>')
write('</td></table>')
}
}
</script>
I will include this within a php page and the menu contents will be dynamically pulled from a database, I can handle populating the menucontents however, I have failed to be able to have more than one scroller on the page at once. Thanks I'd like to create a website similar to http://www.picfog.com which displays images posted to Twitpic and Yfrog via Twitter. Could anyone help me with the following: Given a feed/list of messages containing links to images, display the images that are linked to. For example, take these two Twitter messages: omgsage: http://twitpic.com/cw3i3 - This is the cutest kitty ever ellievolia: Our evening! http://twitpic.com/cw3hx Using Javascript how do I extract the link part of each message, convert this to point to the actual thumbnail and then display the thumbnails on the web page? Thanks in advance! Hi all we are in desperate need of a solution, we have tried and search different methods but none of us can figure it out. Basically we need to find a word which is inside a class and display a link. So something like this find a word equal to "1 line custom" then display this <a href="/1-line-custom.htm">click here</a> I'm not sure if this is really simple or not. Any help would be much appreciated. Thanks Will Hi, all! I'm a "fresh" newbie, JS self-taught from the great resources provided in this forum. I want to better currently working page but lack enough knowledge atm. The situation is this: * Multimedia database - audio clips and corresponding video clips to some of the audio ones. * Dynamic content page showing the latest (by date) 5 or 10 clips with their info from db. * Links provided for each clip, both to listen in a new popup window and to download the clip. Accomplished so far: everything of the above *only* for the audio clips (and video ones but separately on a different page). Every record in the data base has an audio clip and some of them, not all, have a video clip. E.g. there are records only with audio clips and there are records both with audio and video clips. My question is is it possible wherever there's a video clip in the db in an already displayed db-record on the page to display 'watch' and 'download' icon for it together with already shown audio icons ('listen' and 'download')? Conditional displaying. I read about combination between JS and CSS in almost similar situation but don't know how to apply it in my situation due to my little knowledge base at this moment. So, any help will be highly appreciated and useful as it will push me forward in learning JS. I'm almost sure this is possible as it's not a complicated issue. I can post my so far working code, if requested. If not provided enough info on the issue, let me know. Thank you in advance! How do I get a function in the head to turn on or show an image in the body area? I am a struggling noob, but tutorials will not teach me. If I wanted to document.write, or in this case use an alert box, I would not have a question. I feel I understand the functions below, but these are not real world examples of anything, at least that I would ever use. I don't know how to help myself. But I do know, I need to get the part of alert("Hello") changed into something somehow the image will act on, see and display after the 3 second delay. This is the website I got this code from. http://www.w3schools.com/js/js_timing.asp If I can see how to get a function to really do something, would be a big help for me in understanding JS. This is not a school project, my school doesn't offer any programming. I have been at this all day trying to find a tutorial that would help me. Thanks so much for your help. Code: <html>
<head>
<script type="text/javascript">
function timeMsg()
{
var t=setTimeout("alertMsg()",3000);
}
function alertMsg()
{
alert("Hello"); Somehow this has to show my image.
}
</script>
</head>
<body">
<form>
<input type="button"
value="show my Image"
onClick="timeMsg()" />
</form>
<img />
</body>
</html>
Hello, I have a function that I call that tells me the checked value of a group of radio boxes. You pass in the form name and radio group name and it gives you the value of the one that is checked. I have a dynamic list of existing shipto addresses that a user can select one in order to have something shipped to a previously used shipto address. If I have more than one, my code works but if there is only one radio option and they click it, the object is deemed undefined. I need for this function to handle a single radio option on the page as it is possible in some cases. Here is my code Code:
function get_radio_checked_value( form_name, radio_name )
{
var radioObj = document.forms[ form_name ].elements[ radio_name ];
for(var i = 0; i < radioObj.length; i++)
{
if(radioObj[i].checked)
return radioObj[i].value;
}
}
And my usage is usually like this Code: var tempradio = get_radio_checked_value( 'frm_shipto', 'rad_shipto' ); In the above example if I have more than one address / radio option, tempradio holds the correct value otherwise if just one address available it holds undefined Any help would be greatly appreciated. Hi guys, I've been breaking my brains for few hours, I already searched online and I found nothing so far. What I wanna do.... I have 5 different images linked to 5 different websites. Once the image is clicked, the first link will be displayed in an iframe, and the image will change to the second one. Once we click on the second image, the second link will be displayed using the same iframe, and so on. The code changes the images,but I dunno how to deal with the link to the websites. This is the code: Code: <html>
<head>
<title>Testing...</title>
</head>
<script type="text/javascript">
imgs=Array("1.png","2.png","3.png","4.png","5.png");
links=Array("www.vbct.ca","www.cnn.com","www.castanet.net","www.yahoo.com","www.cubaweb.cu");
var x=0;
function change() {
document.getElementById("changes").src=imgs[++x];
if (x==4) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
<body>
<div>
<iframe src="http://www.vbct.ca" style="border: 0; position:relative; top:0; left:0; right:0; bottom:0; width:100%; height:400px;" name="page" width="100%"></iframe>
</div>
<br /><br />
<div>
<a href="#" target="page"><img src="1.png" id="changes" alt="alttext" onmousedown="change()" style="cursor: pointer;" /></a>
</div>
</body>
</html>
And this is the link to the test page: http://www.virtualbc.ca/sites/test/ Hello! I am working on creating a basic calorie calculator with Javascript and my code is not showing the results after the user makes their selections. I've created a simple function to obtain the user's weight, activity and duration info but when I use the GetElementById to retrieve the result, it does not show up. Any help would be much appreciated to make this work. Thanks. Code: <head>
<script type="text/javascript">
var myActivity = new Array();
myActivity[100] = "6.670";
myActivity[200] = "3.811";
myActivity[300] = "3.343";
myActivity[400] = "3.343";
myActivity[500] = "3.343";
myActivity[600] = "4.765";
myActivity[700] = "4.765"
function CalorieBurner() {
//user prompt
var caloriesBurned;
var myForm = document.form;
//processing
var caloriesBurned = (myForm.duration[formElement.value] * (myActivity[formElement.value] * 3.5 * myForm.weight[formElement.value])/200);
FormElement = myForm.activity[myForm.activity.selectedIndex];
document.getElementById("caloriesBurned").innerHTML = "You will burn " + caloriesBurned + "calories doing " + myForm.duration[formElement.value] + "minutes of " + FormElement.text;
}
</script>
</head>
<body>
<form name="form">
Enter your weight: <input type="text" name="weight" />
<br /><br />
Select an activity:
<br />
<select name="activity">
<option value="100"> Backpacking, Hiking with pack </option>
<option value="200"> Bagging grass, leaves </option>
<option value="300"> Bathing dog </option>
<option value="400"> Carpentry, general</option>
<option value="500"> Carrying infant, level ground </option>
<option value="600"> Carrying infant, upstairs </option>
<option value="700"> Children's games, hopscotch... </option>
</select>
<br /><br /><br />
Enter the duration of your activity (in minutes): <input type="text" name="duration" />
</form>
<br /><br /><br />
<input type="button" value="Results" name="btnUpdate" onClick="CalorieBurner()"/>
<br /><br /><br />
<div id="caloriesBurned"></div>
</body>
</html>
|
|||||||