|
JavaScript - Highlight Row And Col Of Table
Similar TutorialsReferring to following link, I get no idea on what the highlight code do, I would like to retrieve the web page using direct URL coding without using function. Does anyone have any suggestions? Thanks in advance for any suggestions http://www.dailyfx.com.hk/calendar/index.html function setFilter(field, value){ var params = {}; params["type"] = "calendar"; params["date"] = "2011-12-06" $('#calTable').load("/inc/process.php", params, function(data){ $(this).html(gbBig5(data)); }); } Hi I am doing validation on a form, but instead of throwing an alert on empty fields I want to highlight those fields indicating error. if all are empty, then i would like to show only 1 generalized error message "Pls. fill the highlighted textboxes.". how do i do this and thanks in advance. Hi, I have say 12 pics on a page, in 3 rows of 4. The rows of pics are there so that a choice can be made from each row and I'm using a function <script> var highlight_color = '#FF0033'; function toggle_highlight(id) { var images = document.getElementsByTagName('img'); for (var i = 0; i < images.length; i++) { var image = images[i]; image.style.borderColor = image.id == id ? highlight_color : 'white'; } } </script> to toggle a border colour change so that you can see what was chosen from each row. The function I have used is fine in that it works, but I can only choose one picture and have the border changed, then if I click on another row the first border that changed obviously changes back and the new selection is highlighted. I don't really know where to go from here. Any help will be much appreciated. Thank you. Hello, I have an image that contains two links; however, you cannot tell unless you happen to mouseover the right area and a message appears "Click here..." How do I highlight the area so that the user knows the links are there? This is the url: http://jaxpubliclibrary.org/progs/jpl/foote.html Thank you for your help, Elbee Hi guys, I wonder if anyone can help me here, got this below code for a page im working on, what you'll notice is that when you hover over 'order' a sub menu appears, what I need help on is this, how do I make the 'order' remain highlight while Im hovering over the sub menus. hope im making sense. thanks in advance. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test </title>
<style type="text/css">
#menu {width:800px; height:36px; text-align:left; background:url(red.gif);}
#menu li a {display:block; width:80px; margin-top:5px; height:24px; color:#000;
text-decoration:none; padding:0 10px 0 10px; font: bold 12px/22px verdana;}/* This sets the default properties*/
#menu li a:hover{padding:0 9px; border:1px solid #000; background:#444; color:#fff; line-height:24px}/* This sets the hover properties*/
#menu ul {width: 100%;margin: 0 75px auto;} /* This centres the menu 100px from the left*/
#menu li
{ margin: 0; padding: 0; list-style: none; float: left;}
#sddm div
{ position: absolute; visibility: hidden; margin: 0; background: #EAEBD8; border: 1px solid #5970B2}
#sddm div a {position: relative; display: block; margin: 0; width: auto; white-space: nowrap; text-align: left; text-decoration: none;
background: lightgrey; border-left:1px solid black; color: #2875DE;}
#sddm div a:hover{ background: #49A3FF; color: #FFF}
/* End navigation bar styling. */
/* This is just styling for this specific page. */
body { font: small/1.3 Arial, Helvetica, sans-serif; }
div { text-align:center; }
div#page { border:1px solid lightgrey; width:800px; margin:0 auto; padding:5px; text-align:left;}
div#header { border:2px solid lightgrey; width:796px; height:100px;}
div#content { border:2px solid lightgrey; width:796px; min-height:500px; _height:500px}
div#footer { border:2px solid red; width:750px; height:30px;}
</style>
<script type="text/javascript">
<!--
var timeout = 1;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
// -->
</script>
</head>
<body>
<div id="page">
<div id="header">Header</div>
<div id="menu">
<ul id="sddm">
<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Order</a>
<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Visa Credit Card</a>
<a href="#">Paypal</a>
</div>
</li>
<li><a href="#">Home</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
I've Googled this without success. I have a webpage with an iframe which is on my same server. My parent page is a form which posts to the iframe page. The iframe page is a shell script that is used to telnet to routers and process commands and display the commands and responses. I need to have a highlight text option on the parent page for what is displayed in the iframe. Is this possible to do this with Javascript and if so, can you share that with me? Hi, On my webpage I have an embedded link that jumps the users up to a text box for logging in. I'm trying to find a way so when they click that link, it will not only jump up to the text box but highlights it as well. I then want the highlight color to fade back to normal. I've been searching around but I can't find something that will work. Any ideas? I'm trying to highlight the row color when the input field is changed but get an error. Can someone please help. TRACY Code: <script type="text/javascript">
function toggle(trid){
var edited_row_bgcolor = '#FAEBD7';
var elm = document.getElementById(trid);
document.elm.style.background = edited_row_bgcolor;
}
</script>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr id="Child1">
<td width="50%">
<input onchange="toggle('Child1');" type="text" name="T1" size="20">
</td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"><input type="text" name="T1" size="20"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"><input type="text" name="T1" size="20"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"><input type="text" name="T1" size="20"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"><input type="text" name="T1" size="20"></td>
<td width="50%"></td>
</tr>
</table>
Hey guys, So, I am using the highlight.js library to highlight posted code. It is working fine, however in IE it centers everything within my <pre><code>...</code></pre> area. This is because my body has the attribute: text-align: center; This is specifically because IE doesn't respond to: margin: 0 auto. So, how could I go about fixing this? Here is the code. Code: <html>
<head>
<link rel="stylesheet" href="highlight/styles/sunburst.css">
<script src="highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<style type="text/css">
pre
{
overflow: auto;
}
p hover
{
position: relative;
width: 100%;
height: 80%;
z-index: 99;
}
body
{
margin: 0px;
text-align: center;
}
.spacer1
{
height: 7%;
}
.sub_title
{
text-align: center;
font-size: 1.7em;
font-family: monospace;
font-weight: bold;
}
.sub_title2
{
text-align: center;
font-size: 1.4em;
font-family: monospace;
font-weight: bold;
}
.text_norm
{
font-size: 1.2em;
font-family: monospace;
text-align: left;
}
.code_cont
{
width: 90%;
height: 40%;
background-color: #CCCCCC;
border: 1px solid #333333;
margin: 0 auto;
overflow: auto;
text-align: left;
}
#container
{
background-color: #999999;
width: 80%;
height: auto;
margin: 0 auto;
overflow: hidden;
padding-bottom: 5%;
}
#title_cont
{
background-color: #333333;
width: 100%;
height: 10%;
display: table;
text-align: center;
}
#title
{
color: #ffffff;
font-size: 2.4em;
font-family: monospace;
font-weight: bold;
display: table-cell;
vertical-align: middle;
}
#summary_cont
{
width: 90%;
margin: 0 auto;
}
#ex_cont
{
width: 90%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="container">
<div id="title_cont">
<span id="title">Dynamically Expanding Textarea Script</span>
</div>
<div id="summary_cont">
<div class="sub_title">SCRIPT SUMMARY</div>
<br />
<div id="summary_body" class="text_norm">This script adds a feature on all textarea's in a page allowing them
to dynamically change height according to their content. The script goes at the very bottom of the body. The
script first makes an array of all the textareas on the page, and then modify's the onfocus, onblur</div>
</div>
<div class="spacer1"></div>
<div class="sub_title2">Code(Goes at bottom of <body>)</div>
<pre class="code_cont">
<code>
<script type="text/javascript">
////////////////////////////////////
// Auto Expand Textarea Script //
////////////////////////////////////
//This script gives every textarea//
//the property of expanding and //
//returning to original size //
//relative to its conetnt. //
////////////////////////////////////
// Insert at end of body tag //
////////////////////////////////////
//Sniffer is the variable holding the recursive setTimeout function
var sniffer;
//textareas is the array of every textarea element found on the page
var textareas = document.getElementsByTagName('textarea');
//If user is viewing through IE, set overflow to visible, everything
//else is already taken care of.
if (navigator.appName == 'Microsoft Internet Explorer')
{
for(var i=0; i %lt; textareas.length; i++)
{
textareas[i].style.overflow = "visible";
}
}
else
{
//This function dynamically changes the height of the textarea in focus
function tAreaSniffer(tArea, prevVal)
{
//This makes sure the textarea doesn't change height if no changes
//have been detected recently.
var curVal = tArea.value;
if(curVal != prevVal)
{
tArea.style.height = 1 + "px";
tArea.style.height = tArea.scrollHeight + "px";
}
//This is a recursive call that will execute 50 milliseconds after here.
sniffer = setTimeout(function(){tAreaSniffer(tArea, curVal)}, 50);
}
//This cycles through every textarea on the page and assigns different properties
//and methods as can be seen below. Onfocus property means when a textarea has
//focus, the script tAreaSniffer will run. When it loses focus the function will stop.
//Overflow hidden ensures that no scrollbar will be present, and minHeight is to make
//sure the textarea never gets smaller than its originally intentded height.
for(var i=0; i < textareas.length; i++)
{
textareas[i].onfocus = function(){tAreaSniffer(this, this.value);};
textareas[i].onblur = function(){clearTimeout(sniffer);};
textareas[i].style.overflow = "hidden";
textareas[i].style.minHeight = textareas[i].offsetHeight + "px";
}
}
</script>
</code>
</pre>
<div class="spacer1"></div>
<div id="ex_cont">
<div class="sub_title2">Example</div>
<div class="text_norm">Below are several textareas. This is meant to demonstrate the script's universal
power, in the sense that it will modify each and every textarea object. To test the script, simply type,
or copy and paste text into the textareas. They should change accordingly.</div>
<div>
<textarea cols="42" rows="6"></textarea>
<textarea cols="42" rows="6"></textarea>
<textarea cols="42" rows="6"></textarea>
<textarea cols="42" rows="6"></textarea>
</div>
</div>
</div>
<script type="text/javascript">
////////////////////////////////////
// Auto Expand Textarea Script //
////////////////////////////////////
//This script gives every textarea//
//the property of expanding and //
//returning to original size //
//relative to its conetnt. //
////////////////////////////////////
// Insert at end of body tag //
////////////////////////////////////
//Sniffer is the variable holding the recursive setTimeout function
var sniffer;
//textareas is the array of every textarea element found on the page
var textareas = document.getElementsByTagName('textarea');
//If user is viewing through IE, set overflow to visible, everything
//else is already taken care of.
if (navigator.appName == 'Microsoft Internet Explorer')
{
for(var i=0; i < textareas.length; i++)
{
textareas[i].style.overflow = "visible";
}
}
else
{
//This function dynamically changes the height of the textarea in focus
function tAreaSniffer(tArea, prevVal)
{
//This makes sure the textarea doesn't change height if no changes
//have been detected recently.
var curVal = tArea.value;
if(curVal != prevVal)
{
tArea.style.height = 1 + "px";
tArea.style.height = tArea.scrollHeight + "px";
}
//This is a recursive call that will execute 50 milliseconds after here.
sniffer = setTimeout(function(){tAreaSniffer(tArea, curVal)}, 50);
}
//This cycles through every textarea on the page and assigns different properties
//and methods as can be seen below. Onfocus property means when a textarea has
//focus, the script tAreaSniffer will run. When it loses focus the function will stop.
//Overflow hidden ensures that no scrollbar will be present, and minHeight is to make
//sure the textarea never gets smaller than its originally intentded height.
for(var i=0; i<textareas.length; i++)
{
textareas[i].onfocus = function(){tAreaSniffer(this, this.value);};
textareas[i].onblur = function(){clearTimeout(sniffer);};
textareas[i].style.overflow = "hidden";
textareas[i].style.minHeight = textareas[i].offsetHeight + "px";
}
}
</script>
</body>
</html>
I have some table rows with an item, item description and a text field named "qty" for the quantity. If a user types a number above 0 in the "qty" field, I would like it to highlight the table row. If a user gos back and deletes the number already in the text field I would like the table row to return to it's default state. How can I do this?
Hi all, I have a vertical menu consisting of CSS rollovers. When clicked, each one dynamically loads a new Flash movie via Javascript, within the same page. This works fine. However, what I would really like, is to have each menu item highlighted after it has been clicked, to show the user what is being shown. This could be the same image as is displayed in the active CSS state. Does anyone know how I can do this? Because each link is simply dynamically loading flash movies, and not going to a new html page, I can't simply add an ID element. Take a look at a basic example I've mocked up, and see the code below: CSS: Code: #navlist {
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
font-weight:bold;
list-style:none;
}
#navlist a {
display:block;
width:155px;
color:#fff;
text-decoration:none;
background:url(../images/tab.gif) no-repeat;
padding-top: 7px;
padding-right: 4px;
padding-bottom: 6px;
padding-left: 10px;
}
#navlist a:hover {
background-position:0 -29px;
color: #1e5ebd;
}
#navlist a:active {
background-position:0 -58px;
color:#1e5ebd;
}
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Page</title>
<link href="css/guided-tour-box.css" rel="stylesheet" type="text/css" />
<script>
function changeFlash(url){
var d=document;
(d.all)? d.all("flashMov1").movie = url :
d.embeds["flashMov2"].src = url;
}
</script>
</head>
<body>
<!-- Tour Box Begins Here -->
<div id="box">
<div id="titleBar"></div>
<div id="content">
<div id="menu">
<ul id="navlist">
<li><a href="javascript: changeFlash('f1.swf')">Menu Item 1</a></li>
<li><a href="javascript: changeFlash('f2.swf')">Menu Item 2</a></li>
<li><a href="javascript: changeFlash('f3.swf')">Menu Item 3</a></li>
</ul>
</div>
<div id="videoDisplay">
<object id=flashMov1
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"
width="233" height="156">
<param name="movie" value="sb-main.swf" />
<param name="quality" value="high" />
<param name="SCALE" value="exactfit" />
<embed src="sb-main.swf"
width="233" height="156" name=flashMov2 quality=high
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" scale="exactfit"> </embed>
</object>
</div>
</div>
</div>
<!-- Tour Box Ends Here -->
</body>
</html>
Hi I have the code below. I am trying to get the radio button selector to highlight on mouseover and remain highlighted until focus is taken away from the highlighted selector. [CODE] <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body > <div onmouseup="setBack(Radio1,1)" style="width:1000px; height:1000px"> <input id="Radio1" type="radio" name="RadioGroup" /><label id="lblRadio1" for="Radio1" title="Radio1" onmouseover="setBack(Radio1, 2)" >Radio1</label> <div onmouseup="setBack(Radio2, 1)" style="width:1000px; height:1000px"> <input id="Radio2" type="radio" name="RadioGroup" /><label id="lblRadio2" for="Radio2" title="Radio2" onmouseover="setBack(Radio2,2)">Radio2</label> </div> </div> <p> </p> <p> </p> <script type="text/javascript"> function setBack(rdo, area) { switch (area) { case 1: rdo.style.background = "White"; break; case 2: rdo.style.background = "Blue"; break; default: rdo.style.background = "White"; break; } } </script> </body> </html> [CODE] Trying to have my navigation have an on click and selected state, but I am not able to do so with this code (website is: http://bit.ly/rgwsite ) Code: $('nav li a').click(function() {
$(this).parent().addClass('on').siblings().removeClass('on');
});
nav li is as follows Code: <nav>
<li class="highlt">
<a href="index.php" class="home"><span>Home</span></a>
</li>
The reason we need to use a jquery/javascript action to add the class to the navigation is because it doesn't refresh when a new page loads. For instance, when you're on the home page and click on the tab "Experience RGW", it only loads the content for that page below the header (within the "#ajax" div). Currently, none of these scripts are working. There is no reason they shouldn't... could there be something else causing the page not to recognize the jquery script and run it on-click? The main reason I ask is because I've tried to test the function and add an alert, but even that didn't work Hi all I have created a single page horizontally scrolling website comprised of 5 sections with a fixed navigation bar in the top right of the screen at http://www.clickmunki.com and I am trying to figure out how to highlight the active section of the site in the nav bar as the user navigates through the site so that the user knows exactly which section of the site they are in. I assumed this would be a pretty basic thing to try and do but I have not been able to achieve it so far. I have tried a few different methods but no success as yet. Can anyone point me in the right direction as to how best achieve this? Can I do it just using css or would i need some js? Any assistance would be very much appreciated.111 Kind regards Anne This is my js: Code: $(".nav").click(function(){
$(".nav.a").toggle("fast");
$(this).toggleClass("active");
});
This is my css; Code: .nav {
text-align: center;
overflow: hidden;
margin: .3em ;
width: 500px;
position: fixed;
padding: 0px 0px 0 830px;
}
.nav a {
position: relative;
float: left;
padding: 2.2em 0 3.1em;
width: 20%;
text-decoration: none;
color: #484848;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s; }
.nav a:hover {
color: #c6342e; }
.effect {
position: absolute;
left: 120%;
-webkit-transition: 0.7s ease-in-out;
-moz-transition: 0.7s ease-in-out;
-o-transition: 0.7s ease-in-out;
-ms-transition: 0.7s ease-in-out;
transition: 0.7s ease-in-out; }
.nav a:nth-child(1):hover ~ .effect {
left: 66.3%; }
.nav a:nth-child(2):hover ~ .effect {
left: 73.8%; }
.nav a:nth-child(3):hover ~ .effect {
left: 81.2%; }
.nav a:nth-child(4):hover ~ .effect {
left: 89%; }
.nav a:nth-child(5):hover ~ .effect {
left: 96.4%; }
/* ----- dot effect -----*/
.ph-dot-nav:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 1px;
background: #484848;
bottom: 40px;
}
.ph-dot-nav a:after {
content: "";
position: absolute;
width: 6px;
height: 6px;
bottom: 38px;
left: 50%;
margin-left: 0px;
background: #484848;
border-radius: 100%; }
.ph-dot-nav .effect {
width: 10px;
height: 10px;
bottom: 36px;
margin-left: -5px;
background: #fff;
border-radius: 100%;
z-index:999;}
Hi, Here's the slideshow embed code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Slideshow</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#large {width:448px; height:336px; background:#000 url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg) no-repeat center;}
#thumbs {padding-top:12px; overflow:auto; white-space:nowrap; width:448px;}
img {padding:1px; width:80px; height:60px;}
img:hover {background:#00F;}
</style>
</head>
<body>
<div id="large"></div>
<div id="thumbs">
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg)';">
<img src="http://lh3.googleusercontent.com/-JU5a-eDnOSg/Thc7g5UkwLI/AAAAAAAAABI/9aCyCMixWb4/s800/thumb2.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg)';">
<img src="http://lh4.googleusercontent.com/-TdbbNGFbDNk/Thc7g0IBSsI/AAAAAAAAABM/pxpntZaTVoQ/s800/thumb3.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg)';">
</div>
</body>
</html>
I wonder how I can highlight the active thumbnail so its background remains blue until I click another one. I also like to avoid the inline JavaScript. Any feedback to improve the coding is appreciated! Best regards Mike Hi all, Please forgive me if this is a dumb question. Is it possible to highlight the contents of all text and/or textareas within one form simultaneously? I've tried to do it using the funciton below, it cycles through allright, but only highlights each field whilst it is in focus, then loses it when it moves to the next field. The result is that only the last text/textarea within the form is highlighted. My aim is to highlight all fields for subsequent spell checking. Any help would be appreciated. Code:
<html>
<head>
<script type="text/javascript">
function SelectText(){
var fields = document.getElementsByTagName("input");
for (var i = 0; i < fields.length; i++){
var node = fields[i];
if (node.getAttribute('type') == "text"){
node.focus();
node.select();
}
}
}
</script>
</head>
<body>
<form id="form1" action="">
<p></p>
<input type="text" id="one" style="width:500px;">
<p></p>
<input type="text" id="two" style="width:500px;">
<p></p>
<input type="button" value="Select Text" onclick="javascript:SelectText();">
</form>
</body>
</html>
I need to highlight rows in a dropdownlist. I need to do this inside a function. I have a textbox filled with the indexes of the rows which need to be highlighted - e.g. by changing the background colour to blue. This is my function: function HighlightSelection() { var myList = document.getElementById('dropdown'); var myString = document.getElementById('textbox').value; var listitem; if (myString.length>0){ var mySplitResult = myString.split(";"); var thisInx; for (i = 0; i < mySplitResult.length; i++) { thisInx = mySplitResult[i] listitem = myList.options[thisInx]; // listitem.style.color='red'; } } } the index (thisInx) is correct - but setting its color does not work. 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. Firstly, I'm not trying to 'fix' the code below. (eg: not interested in links to other drag & drop scripts). I'm mearly trying to understand what's happening & what I've missed or done wrong. For instance, why in FF & IE does it wait until after onmouseup (release) before moving the object, because it works fine with a DIV with only text in it, but not with a DIV with an image in it, or a stand alone image. In Chrome it seems to highlight the image and onmousemove also highlights the surrounding areas. I've tried forcing focus() & blur() & covering with a higher zIndexed transparent DIV but nothing seems to work. Any help in understanding would be greatly appreciated. dragscript.js Code:
document.onmousemove = mouseXY;
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;
var mouseX = 0;
var mouseY = 0;
var drag;
var dragObject = null;
var mouseOffsetX;
var mouseOffsetY;
function mouseXY(e) {
e = e || window.event;
if (e.pageX || e.pageY) {
mouseX = e.pageX; mouseY = e.pageY;
}
else if (e.clientX || e.clientY) {
mouseX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
document.getElementById('mouseposX').value = mouseX;
document.getElementById('mouseposY').value = mouseY;
if (dragObject) {
document.getElementById(dragObject.id).style.left = mouseX - mouseOffsetX;
document.getElementById(dragObject.id).style.top = mouseY - mouseOffsetY;
}
}
function mouseDown(x) {
if (!x) var x = window.event;
if (x.target) drag = x.target;
else if (x.srcElement) drag = x.srcElement;
if (drag.nodeType == 3) drag = drag.parentNode;
if (drag.className == 'dragable') {
dragObject = drag;
document.getElementById('ObjectId').value = dragObject.id;
mouseOffsetX = mouseX - document.getElementById(dragObject.id).offsetLeft;
mouseOffsetY = mouseY - document.getElementById(dragObject.id).offsetTop;
}
}
function mouseUp() {
dragObject = null;
document.getElementById('ObjectId').value = '';
}
test.html Code: <html>
<head>
<META HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<script type="text/javascript" src="dragscript.js"></script>
<style type="text/css">
.dragable {position:absolute; left:200; top:200; border:2px solid black;}
</style></head><body>
MouseX : <input id="mouseposX" type="text" size=3>
MouseY : <input id="mouseposY" type="text" size=3>
dragObject Id : <input id="ObjectId" type="text" size=10>
<image id="image1" class="dragable" src="test.gif" border=0>
</body></html>
Many thanks, Paul PS: Login for posting timeout too short. |
|||||||