|
JavaScript - Help Needed - Clearing Textarea After 'reset' - Ie Can Onfocus=null Be Reversed?
Hi-
I have a table with numerous textareas that I am able to clear once - the first time the textarea is clicked the default value is cleared and everything is OK. However, at a certain point the user might press a 'Clear' button linked to a function I wrote to reset the values back to the defaults. At this point clicking into the textarea does not clear it. Below is a typical textarea: Code: <textarea rows= "2" cols="15" class="Klabel" id="ta5" onfocus="this.value=''; this.onfocus=null; setbg_color('ta5','#EFA746')" onchange="setbg_color('ta5', '#EBF5FF')">
Type a label
</textarea>
Below are the relevant functions. The Clear function mentioned above just runs 'setbg_color' and 'set_value' for each textarea and sets them to the defaults. Code: function setbg_color(id, color){
document.getElementById(id).style.background=color;
}
function set_value(id, celltype){
document.getElementById(id).value=celltype;
}
Is there anyway to essentially reverse the effects of the this.onfocus=null; statement? I tried something like this.onfocus=true; but that didn't work. An update - I haven't answered the reversing null question but an acceptable solution is to reload the page from within javascript as per http://www.mediacollege.com/internet...ge/reload.html Thanks -Jim ps - As part of my research I came across this http://mvied.com/blog/unobtrusive-input-clear-focus/ which does a smoother job of clearing the textareas but does not solve my question. Similar TutorialsHey guys, First shot at JS so please be gentle! I'm trying to get this script to clear the default value of my input elements on focus. It works well the first time, however, if a user inputs some fresh text, selects something else, then selects the same input element again, it will clear the text they entered. Make sense? Here's the script (thanks in advance!!): Code: <script language="JavaScript">
function clickFocus(input){
input.className = 'focus';
if (input.value = input.defaultValue){
input.value = '';
}
}
function unFocus(input){
input.className = 'entered';
if (input.value == ''){
input.value = input.defaultValue;
input.className = 'normal'
}
}
</script>
<form action="confirmation.php" method="post" enctype="multipart/form-data" name="form" id="form" onsubmit="return checkForm(this)">
<input type="text" name="name" value="Name" onfocus="clickFocus(this)" onblur="unFocus(this)" />
<input type="text" name="email" value="Email" onfocus="clickFocus(this)" onblur="unFocus(this)" />
<input type="text" name="subject" value="Subject" onfocus="clickFocus(this)" onblur="unFocus(this)" />
<textarea type="text" name="message" onfocus="clickFocus(this)" onblur="unFocus(this)" rows="5">Message</textarea>
<input class="submit" name="submit"type="submit" value="Send Message" />
</form>
Hi i have a problem, i've been trying to fix this for the whole day pls see my code below Code: for ($o = 0; $o <= $totalclass; $o++)
{
for($i = 1; $i <= 45; $i++)
{
if ($_SESSION['classification'][$o] == $i)
{
$sql2="SELECT ClassDesc FROM tblclass WHERE ClassID = '$i'";
$result2=mysql_query($sql2);
// If successfully queried
if($result2)
{
while ($row2 = mysql_fetch_assoc($result2))
{
$ClassDesc2 = $row2['ClassDesc'];
}
}
//echo $ClassDesc2;
?>
<tr>
<td bgcolor="FAFAF6" class="small" valign="top">Class <? echo $i; ?></td>
<input type="hidden" name="<? echo "classid[]"; ?>" value="<? echo $i; ?>">
<td bgcolor="FAFAF6">
<textarea name="<? echo "specification[]"; ?>" COLS="50" ROWS="6" class="small" wrap="virtual" tabindex="<? echo $i; ?>"><? echo $ClassDesc2;?></textarea>
<input type="button" value="Reset" onclick="window.reset();" name="reset">
</td>
</tr>
<?
}
}
}
i've trying to create a button or image to reset one textarea (from whole array) and so far i've been unsuccessful. i've seen this on other website and i know it is possible to do this, pls help! Hey all, I'm trying to write what I thought to begin with would be a simple script. All it will do is go out and find every textarea, then change the onblur/onfocus functions to something that I created. Here's my problem, when I am going through each textarea object, I can't seem to find a way to reference the object from within the function. See down in that for loop? When I say tAreaSniffer(i), the i ends up being overwritten each time. This makes the value of i in each object to be 3(since there are 3 textareas). I have used javascript in the past, however now I am getting back into it and having trouble. Thanks guys, Here's my code: Code: <html>
<head>
</head>
<body>
<form>
<textarea name="t1" rows="4" cols="20"></textarea>
<textarea name="t2" rows="4" cols="20"></textarea>
<textarea name="t3" rows="4" cols="20"></textarea>
</form>
<script type="text/javascript">
var sniffer;
var textareas = document.getElementsByTagName('textarea');
var counter = 0;
function tAreaSniffer(tArea)//, oldCont)
{
alert(tArea);
//var curCont; = tArea.value;
counter++;
sniffer = setTimeout(function(){tAreaSniffer(tArea)}, 1000);
}
for(var i=0; i<textareas.length; i++)
{
textareas[i].onfocus = function(){tAreaSniffer(i);};//, textareas[i].value);};
textareas[i].onblur = function(){clearTimeout(sniffer);};
}
alert("HEYO");
</script>
</body>
</html>
Hi I've just found out that a piece of code is not working as expected in certain browsers - but the way in which it goes wrong is not consistent, so maybe it's something wrong with my code. Oddly enough, it works exactly as I was expecting when viewed in IE. Here's the code... any help would be much appreciated. Thanks Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function fillboxAddress() {
if (document.getElementById('tbAddress').innerHTML == '')
{
document.getElementById('tbAddress').innerHTML = 'Address';
}
}
function clearboxAddress() {
if (document.getElementById('tbAddress').innerHTML == 'Address')
{
document.getElementById('tbAddress').innerHTML = '';
}
}
</script>
</head>
<body>
<p><textarea name="tbAddress" rows="2" cols="20" id="tbAddress" onfocus="clearboxAddress()" onblur="fillboxAddress()">Address</textarea></p>
</body>
This is some of the script that I have and it works well. The story is that I have a drop down list and depending on the selection a different set of text is displayed below the list. Code: if (Val == "general")
{
document.getElementById('Link0').innerHTML="<font size=2><a Href='http://www.web1.com/'>web 1</a>"
document.getElementById('Link1').innerHTML="<font size=2><a Href='http://www.web2.com/'>web 2</a>"
However when the selection runs this part of the code:- Code: if (Val == "duties")
{
document.getElementById('Link0').innerHTML=""
document.getElementById('Link1').innerHTML="<font size=2><a Href='http://www.web2.com/'>web3</a>"
The "web 3" text is placed under where the 'Link0' text would have been if there had been some. So basically what I need to do is set the 'Link0' text to nothing and have the 'Link1' text sit in its place. I know I could just put the 'Link1' text in the 'Link0' element but I have other controls on the screen that mean I need to run it as it is. I hope that is clear, cheers Daniel. I need to clear the default value from a textarea when a user clicks on the textarea and then replace it if the user clicks away from the textarea without modifying it. I have managed to accomplish this with the textfields in my forms but I am struggling to get the textarea element to mimic this behavior. Here is the script I am using: Code: addEvent(window, 'load', init, false);
function init() {
var formInputs = document.getElementsByTagName('input');
for (var i = 0; i < formInputs.length; i++) {
var theInput = formInputs[i];
if (theInput.type == 'text' && theInput.className.match(/\binput\b/)) {
/* Add event handlers */
addEvent(theInput, 'focus', inputText, false);
addEvent(theInput, 'blur', replaceDefaultText, false);
/* Save the current value */
if (theInput.value != '') {
theInput.defaultText = theInput.value;
}
}
}
}
function inputText(e) {
var target = window.event ? window.event.srcElement : e ? e.target : null;
if (!target) return;
if (target.value == target.defaultText) {
target.value = '';
}
}
function replaceDefaultText(e) {
var target = window.event ? window.event.srcElement : e ? e.target : null;
if (!target) return;
if (target.value == '' && target.defaultText) {
target.value = target.defaultText;
}
}
HTML: [HTML] <form action="#"> <fieldset> <legend></legend> <input type="text" value="Your Name" id="name" class="input" /> <label for="name">Name Required</label><br/> <input type="text" value="Your Email" id="email" class="input"/> <label for="email">E-mail Required</label><br/> <input type="text" value="Your Website" id="website" class="input"/> <label for="website">Website</label> <textarea rows="15" cols="71">Your Message Goes Here.</textarea> <input type="submit" value="Submit Comment" class="button" /> </fieldset> </form> [/HTML] I am really just trying to get this form to behave the way all other forms on the internet work- where text clears when a user clicks on a form element and replaces itself if the user doesn't enter new text. I have it working on the text field but no the textarea. Help! Hey everyone....I just started learning how to use Javascript and I have a problem.... I have an exercise in which I have to validate a form and write the info of all the fields in a textarea by pressing the submit button.....and I just can't do it. Code: <html>
<head>
<script language="javascript" type="text/javascript">
var radio_selection="";
function ValMode(){
Empty(myForm.name);
Empty(myForm.addr);
Empty(myForm.city);
Empty(myForm.mail);
radioButtons();
Empty2(myForm.multi);
return false;
}
function Empty(x){
if ((x.value.length==0)||(x.value==null)){
alert("Empty field");}
}
function Empty2(x){
if ((x.value==null)){
alert("Select an option");
}
}
function radioButtons() {
if (radio_selection=="")
alert("\nYou must check one of the radio buttons.");
}
</script>
</head>
<body>
<big><b>Example Form</b></big><br><br>
<b>The form</b><br>
<form name="myForm" onsubmit= "return ValMode();" >
Name <input type="text" name="name" size=30><br>
Address <input type="text" name="addr" size=30><br>
City <input type="text" name="city" size=30><br>
E-mail <input type="text" name="mail" size=30><br>
Room Type<br>
<input type="radio" name="personnumb" onClick="radio_selection='One person'">For One person<br>
<input type="radio" name="personnumb" onClick="radio_selection='For Two'">For Two<br>
<input type="radio" name="personnumb" onClick="radio_selection='For three'">For three<br>
<input type="radio" name="personnumb" onClick="radio_selection='Family suite'">Family suite<br>
How did you learn about us?<select name="mutli">
<option selected value="">--Select--
<option>From friend
<option>By chance
<option>Search engine
<option>Advertisement
</select><br>
I'd like additional service as: <br>
<input type="checkbox" name="veg">Vegetarian<br>
<input type="checkbox" name="hand">Handicap<br>
<input type="checkbox" name="allerg">Allergic to various substances<br>
<input type="checkbox" name="pet">Pet owner<br>
<input type="submit" value="submit form"><br>
<input type="reset" value="reset"><br>
<textarea cols=30 rows=10 id="textarea" name="textarea" >When you hit 'Submit' the user input will be written to htis textarea.</textarea>
</form>
</body>
</html>
Here is my code.I left out my sorry efforts of influencing the textarea. Any suggestions? I am looking for a javascript code for this idea under this message ---------------------------------------------------------------------------------------------------------------------------------------------------- I want to create a kind of shopping website so when you click on a image or text it will add some text to a textarea,, it will include the name of item and price of an item Alright I give up! I'm not the type that easily asks for help but I just spent an ungodly amount of time trying to figure this out. This script fades a web pages background when you mouseover a graphic. The problem I'm having is it goes from white to black and I need it to go from black to white. I was able to reverse it like I wanted but the page still initially starts off white instead of black. Setting the pages background to black doesn't fix the problem either. I imagine its easy enough to do but JavaScript is not my forte. Any help would be very much appreciated. Code: <HTML>
<HEAD>
<script language="JavaScript">
<!--
hexa = new Array(16);
for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
function hex(i)
{
if (i < 0)
return "00";
else if (i > 255)
return "ff";
else
return "" + hexa[Math.floor(i/16)] + hexa[i%16];
}
function setbgColor(r, g, b)
{
document.bgColor = "#"+hex(r)+hex(g)+hex(b);
}
// 1 -- white --> black
// -1 -- black --> white
var inc = 1;
var cur_i = 20;
var max_step = 20;
var in_progress = false;
function msover()
{
inc = -1;
if( !in_progress )
step();
}
function msout()
{
inc = 1;
if( !in_progress )
step();
}
function step()
{
// alert(document.bgColor);
setbgColor( Math.floor(255 * cur_i / max_step),
Math.floor(255 * cur_i / max_step),
Math.floor(255 * cur_i /max_step) );
// alert("2:" + document.bgColor);
cur_i += inc;
if( (inc > 0 && cur_i > max_step) || (inc < 0 && cur_i < 0) )
{
cur_i -= inc;
inc = -inc;
in_progress = false;
}
else
{
in_progress = true;
setTimeout("step()", 3);
}
}
// -->
</script>
</HEAD>
<BODY TEXT="#888888" LINK="#1b1b1b" VLINK="#1b1b1b" ALINK="#1b1b1b" bgcolor="white">
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<CENTER><a href="example.com" onMouseOver="msover()"
onMouseOut="msout()"><IMG SRC="example.gif" border=0></A></CENTER>
</HTML>
Hi i have done some reading on the net today because i am getting an error on ie. I did find the javascript twice in my code, once in the header and once here, so i removed it from the header. I also changed to src to the full url. But i am still getting this and i dont know why. the file is located in the root directory. Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; SearchToolbar 1.2; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; msn OptimizedIE8;ENUS) Timestamp: Sat, 30 Jul 2011 16:03:05 UTC Message: 'null' is null or not an object Line: 8 Char: 3894 Code: 0 URI: http://www.mysite.com/swfobject.js Code: <script type='text/javascript' src='$CONST_LINK_ROOT/swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('player.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=$CONST_LINK_ROOT/movies/$sql_array->vid_id.flv');
s1.write('preview');
</script>
<embed src='$CONST_LINK_ROOT/flvplayer.swf?file=$CONST_LINK_ROOT/movies/$sql_array->vid_id.flv&autoStart=false' width='175' height='175' quality='high' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'></embed>
would appreciate any suggestions thanks. i was on 1.5 swfobject i did download 2.2 and im guessing all you do is replace the swfobject.js file to upgrade it, but what happened is it gives me this now. Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; SearchToolbar 1.2; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; msn OptimizedIE8;ENUS) Timestamp: Sat, 30 Jul 2011 16:31:08 UTC Message: 'SWFObject' is undefined Line: 1283 Char: 1 Code: 0 URI: http://www.mysite/video_admin.php?type=v i dont mind going back to the old version i just need to get this working and im soooooooo lost lol ok another update, this is becomming maddening lol. once i have this line in the header php Code: <script type='text/javascript' src='$CONST_LINK_ROOT/swfobject.js'></script> I never have to use it again as long as they header php is included correct? This is what is driving me nuts, im back on 1.5 and it says its undefined Code:
but am in not defining it on this line? ---> var s1 = new SWFObject('player.swf','player','400','300','9');
<script type='text/javascript' src='swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('player.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=$CONST_LINK_ROOT/movies/$sql_array->vid_id.flv');
s1.write('preview');
</script>
Another Update. I am back to the original question. null is null or not an object.. in my search i have found this found a solution. basically Internet Explorer is crappy and doesnt like the setAttribute property so had to change the onchange handler by directly changing the attrbute for the object like so. object.onchange = function() {} i have no idea what they means, does that mean i need to change swfobject.js or does that mean i have to change my xml request. and if it is the swfobject i have no clue what they mean or what lines Hi I am having trouble with a script. I cannot figure out why I get the message: error: null is null or not an object (In IE8) The site is: www.rayburns.com I have check the javascript for the navigation bar and for the rotating images and cannot see what is missing. Not sure what is not being called. Can someone please help with this. Thank you in advance! Hi all, I have a REALLY strange problem - maybe a new set of eyes can help me. Look at these pieces of code: This generates the code Code: <!-- BEGIN code_open -->
<dl class="codebox">
<dt>{L_CODE}:
<a href="#" onclick="autoSelect(this.parentNode.nextSibling); return false;">{L_SELECT_ALL_CODE}</a>
</dt>
<dd>
<pre onfocus="doTest(this)">
<!-- END code_open -->
<!-- BEGIN code_close -->
</pre>
</dd>
</dl>
<!-- END code_close -->
Test JS just for now Code: var doTest = function(a) {
alert(a);
}
The HTML as seen by Firebug Code: <dt>Code: <a href="#" onclick="autoSelect(this.parentNode.nextSibling); return false;">Select all</a></dt><dd> <pre onfocus="doTest(this)"> Test Test Test </code></pre></dd> One little problem... it doesn't work!!! And yes the function being called is accessible. For that matter, simply putting "alert('hello')" into the "onfocus" also fails. I even checked at W3CSchools to verify that: (1) The <pre> element supports "onfocus" (it does). (2) I ran their "Try it" and "onfocus" is working in my browser (Firefox 3.6.17, WinXP 32). What the heck??????????? Any ideas? Thanks! -- Roger Hello The onFocus events I have come across seem to deal with changing the background colour of the field on a Web form, so that the active field is a different colour to the background field of the other form elements. But how would I use onFocus simply to have the cursor moving in the active field (on a Web form it might be the 'name' field for example)? The code I have at the moment looks like this: Code: <!DOCTYPE etc
<head>
<title>Janko</title>
<style type="text/css">
body
{
font-family: Arial, Sans-Serif;
font-size: 13px;
}
#inputArea
{
font-family: Arial, Sans-Serif;
font-size: 13px;
background-color: #d6e5f4;
padding: 10px;
width:310px;
}
#inputArea input, #inputArea textarea
{
font-family: Arial, Sans-Serif;
font-size: 13px;
margin-bottom: 5px;
display: block;
padding: 4px;
width: 300px;
}
.activeField
{
background-image: none;
background-color: #ffffff;
border: solid 1px #33677F;
}
.idle
{
border: solid 1px #85b1de;
background-image: url( 'blue_bg.png' );
background-repeat: repeat-x;
background-position: top;
}
</style>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input, textarea").addClass("idle");
$("input, textarea").focus(function(){
$(this).addClass("activeField").removeClass("idle");
}).blur(function(){
$(this).removeClass("activeField").addClass("idle");
});
});
</script>
</head>
<body>
<h2><a href="www.jankoatwarpspeed.com">Janko At Warp Speed</a></h2>
<p>This example is from the article <a href="http://www.jankoatwarpspeed.com/post/2008/05/22/CSS-Message-Boxes-for-different-message-types.aspx">Enhance your input fields with simple CSS tricks</a></p>
<div id="inputArea">
<label for="txtName">
Name</label>
<input id="Text16" type="text" />
<label for="txtEmail">
Email</label>
<input id="Text17" type="text" />
<label for="txtWebsite">
Subject</label>
<input id="Text18" type="text" />
<label for="txtComment">
Message</label>
<textarea id="Textarea6" rows="4" cols="30"></textarea></div>
</body>
</html>
Many thanks Steve greetings, i have a function that sets the onfocus and onblur event for every item in a table which then tells it to the change the class name. for some reason this doesn't seem to be working with the <select> inputs. i have heard it has something to do with how the option list re-loads itself??? Code: function setTableActivation(){
tableDiv = document.getElementById("tables");
tables = tableDiv.getElementsByTagName("table");
count = tables.length;
for(var h=0;h<count;h++){
var table = tables[h];
table.accessKey = h;
table.onfocus = function(){tables[this.accessKey].className = "activeTable";};
table.onblur = function(){tables[this.accessKey].className = "searchreal";};
for(var i=0;i<table.rows.length;i++){
row = table.rows[i];
row.accessKey = h;
row.onfocus = function(){tables[this.accessKey].className = "activeTable";};
row.onblur = function(){tables[this.accessKey].className = "searchreal";};
for(var j=0;j<table.rows[i].cells.length;j++){
cell = table.rows[i].cells[j];
cell.accessKey = h;
cell.onfocus = function(){tables[this.accessKey].className = "activeTable";};
cell.onblur = function(){tables[this.accessKey].className = "searchreal";};
for (var k = 0; k < cell.childNodes.length; k++) {
if (cell.childNodes[k].nodeType == document.ELEMENT_NODE) {
cell.childNodes[k].accessKey = h;
cell.childNodes[k].onfocus = function(){tables[this.accessKey].className = "activeTable";};
cell.childNodes[k].onblur = function(){tables[this.accessKey].className = "searchreal";};
if(cell.childNodes[k].tagName == "SELECT"){
}
}
}
}
}
}
}
Hi, can someone show me why I cant get the onfocus and onblur to loop thru the function showTextContent() when entering the words one, two, three or four. I have tried for days, googled and lost a lot of hair trying to figure it out. http://www.data-affiliates.com/DL234...5/attempt.html Code: <html>
<!-- Created on: 08.08.2009 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="sdfgdfg">
<meta name="generator" content="AceHTML 6 Pro">
<link rel="stylesheet" href="vid61.css" type="text/css" media="screen" />
<script type="text/javascript">
function toggle(id, status){
document.getElementById(id).style.visibility = status;
}
function myFocus(element)
{
if (element.value == element.defaultValue) {
element.value = '';
}
}
function myBlur(element) {
if (element.value == '') {
element.value = element.defaultValue;
}
}
function populateSearchField(){
var specialChars = "\\.+*?[^]$(){}=!<>|:,-=/";
var ignoreList = ["a", "the"];
var i, j, searchFld, keywords;
if (!(searchFld = document.getElementsByName('formcontent')[0])) return;
if (!(keywords = document.referrer.match(/[pq]=(.*?)&/))) return;
var preg_quote = function(str){return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!<>\|\:])/g, "\\$1");}
keywords = decodeURIComponent(keywords[1]).replace(new RegExp('[' + preg_quote(specialChars) + ']', 'g'), ' ').split(/[\+ ]/);
for (i = 0; i < keywords.length; i++){
for (j = 0; j < ignoreList.length; j++) if (!keywords[i] || (keywords[i] == ignoreList[j])) {
keywords.splice(i--, 1);
break;
}
}
searchFld.value = keywords.join(' ');
}
function keywordMatch(keywords, text) {
var result = 0;
for (var i in keywords) {
if (text.match(new RegExp("(^| )" + keywords[i] + "( |$)", "i"))) {
result++;
};
}
return result;
}
function showTextContent() {
var i, matches = [];
var div, divcontent, divs = document.getElementById("ts-1").getElementsByTagName('div');
var keywords = document.getElementsByName('formcontent')[0].value.split(' ');
for (i = 0; i < divs.length; i++) {
div = divs[i];
divcontent = div.lastChild.nodeValue;
if (keywordMatch(keywords, divcontent)) {
matches.push(div);
}
}
if (matches[0]) {
document.getElementById('take1000').innerHTML = matches.length + " matches / Treffer";
for (i = 0; i < matches.length; i++) {
matches[i].onmouseover(toggle('take1000', 'visible'));
matches[i].onmouseout = null;
}
}
else {
document.getElementById("ts-1").innerHTML = "" ;
matches[i].onmouseover(toggle('notake1000', 'visible'));
}
}
window.onload = function(){
populateSearchField();
showTextContent();
}
</script>
</head>
<body>
<div id="container">
<div id="notake1000">Keine Ergebnisse / No Matches</div>
<div id="take1000"></div>
<div id="ulent">Search this site / Diese Seite durchsuchen :</div><form><input type="text" name="formcontent" value="one" onmouseover="toggle('notake1000', 'hidden');toggle('take1000', 'hidden');" onfocus="myFocus(this); showTextContent();" onblur="myBlur(this); showTextContent();" style="font-family:Arial;color:#ffff40;text-align:center;font-size:12px;font-weight:bold;float:right;margin-left : auto;margin-right : 2px;border: 2px double #AFAFAF;background-color: #5F5F5F;padding:1px;height:18px;width:293px;" /></form>
<div id="ts-1" style="visibility:hidden;">
<div onmouseover="toggle('fo-test1', 'visible');" onmouseout="this.className='ts-1-1';toggle('fo-test1', 'hidden');" onmouseup="this.className='ts-1-3A';" class="ts-1-1"><object id="fo-test1" style="visibility:hidden;" type="application/x-shockwave-flash" data="peelawayok.swf" width="356" height="286"><param name="movie" value="peelawayok.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="menu" value="false" /></object>www.Ihre-domain.de<br />one</div>
<div onmouseover="toggle('fo-test2', 'visible');" onmouseout="this.className='ts-1-2';toggle('fo-test2', 'hidden');" onmouseup="this.className='ts-1-3A';" class="ts-1-2"><object id="fo-test2" style="visibility:hidden" type="application/x-shockwave-flash" data="peelawayok.swf" width="356" height="286"><param name="movie" value="peelawayok.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="menu" value="false" /></object>www.Ihre-domain.de<br />two</div>
<div onmouseover="toggle('fo-test3', 'visible');" onmouseout="this.className='ts-1-3';toggle('fo-test3', 'hidden');" onmouseup="this.className='ts-1-3A';" class="ts-1-3"><object id="fo-test3" style="visibility:hidden" type="application/x-shockwave-flash" data="peelawayok.swf" width="356" height="286"><param name="movie" value="peelawayok.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="menu" value="false" /></object><br />www.Ihre-domain.de<br />three</div>
<div onmouseover="toggle('fo-test4', 'visible');" onmouseout="this.className='ts-1-4';toggle('fo-test4', 'hidden');" onmouseup="this.className='ts-1-3A';" class="ts-1-4"><object id="fo-test4" style="visibility:hidden" type="application/x-shockwave-flash" data="peelawayok.swf" width="356" height="286"><param name="movie" value="peelawayok.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="menu" value="false" /></object><br />www.Ihre-domain.de<br />four</div>
</div>
</div>
</body>
</html>
Realizing that form input placeholders aren't universally recognized among browsers, I began changing all of mine using onblur and onfocus handlers instead. As an example, I used the following code, which works in most cases: Code: <input type="text" name="example" maxlength="5" value="Example" onblur="if(this.value=='') this.value='Example';" onfocus="if(this.value=='Example') this.value='';"/> At first, I coded all of the inputs without a value attribute. But, when the page initially loaded, the fields would load empty, and the value/placeholder wouldn't appear until the field had been "focused" and then "blurred" again. Adding the value attribute seemed to correct that problem, again, for the most part. I have some text fields that appear only after I select a particular radio button or select option. Problem is, when the radio is clicked, the field appears, but even with the value attribute in place, the field appears void. I'm not sure what is different, or what I'm doing wrong. Here's the javascript code with the radio button (note:everything works except that the "placeholder" doesn't show when the field first appears): Code: function showfield() {
document.forms[0].otherRelation.value = "";
document.getElementById("newBox").style.display = "none";
var r = document.forms[0].relation;
var len = r.length;
for (var i =0; i<len; i++) {
if (r[i].checked && r[i].value == "Otherrelation" ) {
document.getElementById("newBox").style.display = "inline";
}
}
}
<input type="radio" name="relation" value="Otherrelation" onclick="showfield()"/>Other
<span id = "newBox" style="display:none">:
<input type = "text" name="otherRelation" size="35" value="Your Relationship" onblur="if(this.value=='') this.value='Your Relationship';" onfocus="if(this.value=='Your Relationship') this.value='';"/>
</span>
Thanks for any help. Sorry so long. Hi all, I am working on a site which is in a frameset. There is content area, a footer and a workqueue on the right. Now what I do is poll the workqueue every 30 seconds, check if there are any changes to any queues and if so, I make them go bold and red and play a beep. That's no problem, that works fine. The trouble is I am trying to make the title flash "New Item" if the window is out of focus (Minimised would be better but dont think that is possible to detect). The flashing bit is no problem, it's the triggering when the windows out of focus that is a problem. Applying events to the window object doesn't work. The closest I have come to making it work is this, but it doesn't work in firefox... Code: var debugwin = window.open("", "newwin", "width=300, height=300, scrollbars=1");
debugwin.document.open();
debugwin.document.write("<HTML><TITLE>Debug Window</TITLE><BODY>");
debugwin.document.write("</BODY></HTML>");
debugwin.document.close();
function addDebug(msg) {
debugwin.document.body.innerHTML = msg + "<BR/>" + debugwin.document.body.innerHTML;
}
<!--<frameset onblur="workitemAlerts.setItemAlerts(false);" onfocus="workitemAlerts.setItemAlerts(true);" id="titleframeset" rows="<%= HEADER_FRAME_RESTORED %>,*,<%= FOOTER_FRAME_HEIGHT %>" framespacing="0" border="0" frameborder="0">-->
<frameset onblur="addDebug('Blur 1st frameset');" onfocus="addDebug('Focus 1st frameset');" id="titleframeset" rows="<%= HEADER_FRAME_RESTORED %>,*,<%= FOOTER_FRAME_HEIGHT %>" framespacing="0" border="0" frameborder="0">
<frame onblur="addDebug('Blur frame 1');" onfocus="addDebug('Focus frame 1');" noresize scrolling="no" framespacing="0" border="0" frameborder="0" id="titlebar" name="titlebar" src="<wfmt:headerpage />">
<frameset onblur="addDebug('Blur 2nd frameset');" onfocus="addDebug('Focus 2nd frameset');" id="mainframeset" cols="10,*,<%= MAIN_FRAME_RESTORED %>" framespacing="0" border="0" frameborder="0">
<frame onblur="addDebug('Blur frame 2');" onfocus="addDebug('Focus frame 2');" noresize framespacing="0" border="0" frameborder="0" name="leftpad" src="mainColourFill.jsp" scrolling="no">
<frame onblur="addDebug('Blur frame 3');" onfocus="addDebug('Focus frame 3');" noresize name="windmain" src="<wfmt:postloginpage />" scrolling="auto">
<frame onblur="addDebug('Blur frame 4');" onfocus="addDebug('Focus frame 4');" noresize framespacing="0" border="0" frameborder="0" name="queues" src="workqueues.jsp" scrolling="no" style="BORDER-RIGHT: gray 1pt solid;">
</frameset>
<frame noresize scrolling="no" framespacing="0" border="0" frameborder="0" name="footerbar" src="footer.jsp">
</frameset>
I have popped up a little window to help me view debug away from the window so I can focus and blur and still see the output to see what events are triggering. IE seems to trigger the events on the <frame> tags fine, which means I can achieve what I need to in IE, however FF isn't playing ball. Anybody know what I can do to detect if the window is out of focus. TIA, Dale Hi, I'm working on a website and am having difficulty figuring out how to have a function triggered when the window becomes active. I am having limited success with: <body onFocus=myFunction();> This works fine with Firefox and Safari, but not Internet Explorer. Is there a way to achieve this in all 3 browsers? Thanks. I am trying to get a text field to increase in size (one time to a predetermined size) when user clicks in the text field. Here is the code that for some reason isn't working for me. Code: <script type='text/javascript'>
function resizeIt()
{
document.getElementById('comment').style.height = 50px;
};
</script>
<input type='text' id='comment' class='urlTextArea' name='url' value=''
size='75' onfocus='resizeIt()'>
|
|||||||