|
JavaScript - Blinking Cursor
I would like to create a caret for a textarea like the one he
http://www.dynamicdrive.com/forums/s...4576#post74576 it works great if I want a white background but when I changed it to black and tried to change the textarea's text color to yellow: Code: <textarea type="text" id="setter" style="color:yellow;"onkeydown="writeit(this, event);moveIt(this.value.length, event)" onkeyup="writeit(this, event)" onkeypress="writeit(this, event);"></textarea> I don't see anything on the screen other than the blinking cursor Similar TutorialsHi Community, I am running simple web cam streaming to html. Let me explain how it works: First C code grabs frame from web cam and PHP code send the image to the client where exists receiver php code. It saves the submitted image to disk and javascript updates image every 0.1 sec or less. it is working fine but there is blinking. So I changed Javascript to avoid blinking (changed to other script). In this case streaming is fine but after 2-5 sec it stops updating. here is script: <head> <title> Streaming</title> </head> <body> <!-- <img name="frame" src="" border="0" /> --> <img src="" id="webcam1" width="640" height="480" border="5" alt="Camera1"/> <script language="javascript"> document.images.webcam1.src = "http://my_IP_address/img.jpg"; document.images.webcam1.onload = Start; function LoadImage() { uniq1 = Math.random(); document.images.webcam1.src = "http://my_IP_address/img.jpg?"+uniq1; document.images.webcam1.alt = uniq1; } function Start() { setTimeout("LoadImage();", 70); } </script> </body> </html> Where is mistake? Why it stops updating after 2-5 seconds every time. Please help! Thank you Hi Everyone, I am interested to create one neon light effect using javascript (let's call it a club logo animation), Now I know, that I can achieve image blinking effect using javascript, but when I use this effect, the image blinks continuously. I would like to blink it only for 2-3 times. also I would like to blink four images, one after anohter, and sometimes two together. I know it seems bit complicated, but not for experts like this forum have Thanks in advance for your help. http://www.primedesigning.com/ellis/ I'm working on a site for a friend and I can't figure out what's causing this blinking! Hover over one of the 3 pictures in the "Products" section to see what I'm talking about (the larger, expanded picture and its border blinks on and off). BTW, this site is still under construction. Any design ideas you guys may have would be appreciated too Thanks for any help! I have written a small code in Javascript which does the work of blinking all the content inside any tag with the name 'blink' here is the code <html> <body> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <script type="text/javascript"> function blinkText() { var x=document.getElementsByName('blink'); for(i=0;i<x.length;i++) { if(x[i].style.visibility=='visible') x[i].style.visibility='hidden'; else x[i].style.visibility='visible'; } } setTimeout('blinkText()',500); </script> </body> </html> I use a Ubuntu system and work on Mozilla 3.6.18 This hides the text successfully but does not display it again What can be wrong here? Can anyone please help me I need a javascript that will print out the X and Y of the mouse on the screen as I move the mouse and keep up to date. The X and the Y must also be stored in a variable. (Trying to increase my knowledge of javascript so that I can make my web sites better and my experiments are all in making games) I have some own cursor with a .cur file. But it's very annoying to try changing each part from the css to the new cursor. Is there no aviable script in JS or HTML or CSS or whatever there is, that i can press the link for all cursor like: Pointer, defaut, wait, stop, link and so on. So they all changes into my own? Without having those white cursor. Hi, Would you please try the following in IE: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
<script>
$(document).ready(function(){
$("#curl").focus(function(){
if( this.value == this.defaultValue ) {
$(this).val("http://");
}
});
$("#commentForm").validate();
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<input id="cname" name="name" size="25" class="required" value="Name" />
</p>
<p>
<input id="cemail" name="email" size="25" class="required email" value="Email" />
</p>
<p>
<input id="curl" name="url" size="25" class="url" value="URL" />
</p>
<p>
<textarea id="ccomment" name="comment" cols="22" class="required">Comment</textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</body>
</html>
As you see the cursor goes back to the beginning of the field if you focus on the URL field. It works with no problem in other browsers. How can it be corrected? Thanks for any help! I'm trying to write a function that is similar to the ctrl+f functionality you get in IE, where you have a search string and when you click 'next' the whole string if matched is highlighted by the cursor. This works fine for inputs and text areas using the following code: Code: function setCaretPos(obj, start, end)
{
var range = obj.createTextRange();
range.moveStart('character', start);
range.moveEnd('character', end - obj.value.length);
range.select();
}
But now I need to get it to work for normal text in a text node that is in the HTML/DOM. Is there an equivalent way of making the above method work for text in text nodes? Alternatively is there a way to make the browser (IE) at least focus on some text in a text node? (I could then highlight it with CSS styles). Do you guys have any idea how I could move a div around a page on mouse down? Like drag and drop it where I want it to be on the page and grab its x,y position? If you guys have any code snippets or tips that would be greatly appreciated thanks! i need typing cursor back in first text box after clicking ok of alert [CODE] <html> <head> <script type='text/javascript'> function player() { document.getElementById("Player2").value= document.getElementById("Player1").value; } function notEmpty(elem, helperMsg){ if(elem.value.length == 0){ alert(helperMsg); elem.focus(); return false; } return true; } </script> </head> <body> <form> Player:<input type="Name" id="Player1" onkeyup="player()"/> <input type="Name" id="Player2" DISABLED /> <input type='button' onclick="notEmpty(document.getElementById('Player2'), 'Please fill in player field!')" value='Submit' /> </form> </body> </html> [ICODE] Good day! In my javascript code I have a function for the enter key. I want to add cursor key in that function/ I research about the coding for cursor key but I can't find the code same on what I want to happen. Here is the code: Code: <script language="javascript">
function handleEnter(e, nextfield)
{
var characterCode = (e && e.which)? e.which: e.keyCode;
if(characterCode == 13)
{
document.getElementById(nextfield).focus();
return false;
}
else
{
return true;
}
}
</script>
<input type='text' name='plt' onkeypress='return handleEnter(event,\"b0\");' />
Thank you I've got the following html code for a button - how can I get the cursor to turn into the hand shape when the mouse is over the button? Thanks PHP Code: <INPUT NAME="btn_cancel" TYPE="button" VALUE="Cancel" onClick="cancel_button_click()";> I have this image map and I need to change the cursor to finger on mouse over: <map name="Map" > <area shape="rect" coords="0,61,121,140" onClick="scr_valid(1)"> <area shape="rect" coords="175,101,445,204" onClick="scr_valid(0)" > </map> Adding href (<area shape="rect" coords="175,100,445,203" onClick="scr_valid(0)" href="#" >) does not work. Any body could help please? Thank you. Hi, Need to put a cursor in a password form on page load here is what I got that does not work. This will be used on a touch screen Code: <script type = "text/javascript">
var count = 2;
function validate() {
var pw = document.myform.pword.value;
var valid = false;
/*Failed attempt to put cursor in myform on page Load */
function setCursor(myform){
return set;
}
var pwArray = ["1701", "Password2", "Password3", "Password4"]; // the corresponding passwords;
for (var i=0; i <pwArray.length; i++) {
if (pw == pwArray[i]) {
valid = true;
break;
}
}
if (valid) {
alert ("Login was successful");
window.location = "030.html";
return false;
}
var t = " tries";
if (count == 1) {t = " try"}
if (count >= 1) {
alert ("Invalid password. You have " + count + t + " left.");
document.myform.pword.value = "";
setTimeout("document.myform.pword.select()", 25);
count --;
}
else {
alert ("Still incorrect! You have no more tries left!");
document.myform.pword.value = "";
document.myform.pword.disabled = true;
return false;
}
}
</script>
Thank you for any help. it is required to locate the typing cursor in field after when click ok on java alert thanks in advance !! hello all member help me quick i am create a one form in 10 texbox. i am copy other web Url link when i am paste in textbox cursor not move automatically to the second textbox. and when paste the second textbox the cursor move the not third textbox. please help me how can move automatically cursor textbox only past. not mixmim leg using. only using paste. send completely code java script and input code quickly thanks In javascript normally when you call .focus() on a textbox id, it places the cursor inside the textbox. Trying the same on ipad does not place the cursor in the text field and the keypad does not pop up. How to place cursor and bring up the keypad on ipad using javascript? Any help is appreciated 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>
I'm not very well versed in javascript. I'm trying to make a bookmarklet that when I click it will either append text to what I've already written or insert the predefined text at the cursor's position in a textarea. Also the browser I'm trying to do this on is Chromium. Here's what I have: Code: javascript:void((function(){document.getElementsByTagName('textarea')[0].value='ಠ_ಠ'})())
...but this of course changes the entire value of the text field to: ಠ_ಠ ...rather than appending or inserting at the cursor position. I'm guessing append would be the simplest, though cursor position would be most efficient. So if you can help in anyway, please do! Thanks. Hi all, I'd like to use the bbcode editor at http://php-login-script.com/bbdemo.php. Currently that script doesn't set the focus on the textarea after tag insertion. I've tried to to make it by inserting textarea.focus() at the end of their function, like Code: function doAddTags(tag1,tag2,obj)
{
textarea = document.getElementById(obj);
// Code for IE
if (document.selection)
{
textarea.focus();
var sel = document.selection.createRange();
//alert(sel.text);
sel.text = tag1 + sel.text + tag2;
}
else
{ // Code for Mozilla Firefox
var len = textarea.value.length;
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var scrollTop = textarea.scrollTop;
var scrollLeft = textarea.scrollLeft;
var sel = textarea.value.substring(start, end);
//alert(sel);
var rep = tag1 + sel + tag2;
textarea.value = textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
textarea.scrollTop = scrollTop;
textarea.scrollLeft = scrollLeft;
}
textarea.focus();
}
But, in IE that sets the cursor the end of the last inserted tag and in FF the cursor moves at the end of the whole text in textarea. How can i set it ine between the tags(say ), after insert? Thanks. |
|||||||