On the symantec site (www.symantec.com) there is a neat piece of code where as your mouse passes over four sections in the middle of the page a border is placed around each of the sections. Any suggestions how this is done?
View 2 Replies
[Cod]...
What trying to achieve is to have a div which when you mouseover a div and h4 within will change properties.This is working but when you mouseover the div and pass over either the border of the containing div or the h4 text the animate/fadeTo repeat again. Is someone able to tell what Im doing wrong? Also you may notice the function is effecting more than one container div at a time which is not what Im going for.
Is there a way to seperate them like this or somehow?
[Code]...
I've tested across IE7,Firefox, Chrome, Safari and the only browser I experience this issue in is Opera. I have 3 icons at the bottom of the page (facebook, rainbow, charity logo) and on mouseover the whole site expands downwards (it's not supposed to do that). I've googled for reasons why it would do this but have found none. [URL]...
View 1 Replies View RelatedI've got a list of DIVs on a page, each one with it's own unique id, i.e.
Code HTML4Strict:
<div id="event1">
...
</div>
<div id="event2">
[code]...
This is OK, but what I really want is the ability to take the parameter specified in the URL (the #event2), and use it to somehow highlight that specific DIV.I figure the easiest way of doing this is to modify the DIV and add a class to it, such as class="highlight", then use CSS to set a different background colour - but I know very little about JavaScript,
I want to highlight the clicked area on an image by placing another image
on it. But it replaced the whole image, not the clicked area.
<head>
<script language="JavaScript" type="text/javascript">
function changeImagemap(newImage) {
if (js > 1.0) document ['plan'].src = eval(newImage + ".src");
}
</script>
<MAP NAME="MyMap">
<AREA SHAPE="rect" COORDS="216,358,237,378" alt="West Right 5"
onClick="changeImagemap('selected');self.status='selected' return true" >
<AREA SHAPE="rect" COORDS="216,378,237,398" alt="West Right 4">
<AREA SHAPE="rect" COORDS="216,399,237,419" alt="West Right 3">
<AREA SHAPE="rect" COORDS="216,419,237,439" alt="West Right 2">
<AREA SHAPE="rect" COORDS="216,439,237,459" alt="West Right 1">
<AREA SHAPE="rect" COORDS="270,491,291,511" alt="South Left 1">
<AREA SHAPE="rect" COORDS="289,494,310,514" alt="South Left 2">
<AREA SHAPE="rect" COORDS="310,495,331,515" alt="South Left 3">
<AREA SHAPE="rect" COORDS="330,495,351,515" alt="South Left 4">
<AREA SHAPE="rect" COORDS="349,494,371,515" alt="South Left 5">
<AREA SHAPE="rect" COORDS="369,495,390,515" alt="South Left 6">
<AREA SHAPE="rect" COORDS="390,495,411,515" alt="South Left 7">
</MAP>
</head>
<body>
<p>img name="plan" USEMAP="#MyMap" ismap border="0" src="Plan.jpg" width="837"
height="694"></p>
</body>
I'm trying to write an application to demonstrate to a friend how to
highlight text in javascript, only problem is he wants it to be on divs
only.
So say for example you have a page, and you select some text in the div
(this is static text, not a form or anything) and you click "highlight"
is there a way to wrap style tags around that highlighted text using
javascript, without refreshing the page?
I was wondering if there is any way with onload that I can highlight (blue
color) the select box field while simultaneously placing the mouse cursor or
focus on a text box immediately below it?
I have a jQuery script running on my site that makes it so when you click on a thumbnail, a different overflow:hidden div is scrolled to the anchor point that thumbnail was linking to.I want to make it so the thumbnail that you clicked becomes selected (and all over thumbnails become unselected). This could be with a border, a shadow, an image appearing behind it, opacity - basically anything (preferably an image appearing behind it).
View 5 Replies View RelatedAlright so for my website (I've totally revamped it and what not) I want to make a code highlighter for source code / tutorials I've posted. At the moment I'm just using some css:
div.code
{
font:1em "Courier New";
margin: 10px auto 10px auto;
background-color: #FFFFFF;
border: thick solid #555555;
color: #000000;
white-space: pre;
font-size: 12;
}
So the code stays neat and in a box. But what I want to do now is somehow make a small javascript function that scans the text inside the html file etc :
[Code]...
and can format it so float and int is blue, "hello world" is red etc. As from the javascript I've done myself I can't see it being to hard. I'm just unsure how to scan for text inside like I have above.
et me know how can I highlight a selected portion of an html document with javascript such that the selected portion is repeatedly shown highlighted on each and every page refresh.
View 1 Replies View RelatedI need to perform dynamic row highlighting on a table of mine using an external Javascript file.So far i have linked the sheet, and written some code but it seems not to be working or i have done it wrong. The following is my javascript code.
var rows = document.getElementByTagName('tr');
for (i=0;i<rows.length;i++) {
rows[i].onmouseover = highlight;
[code]....
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:
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).
The first page with the menu works just fine, but when you go to any of the other pages it won't let you highlight the text to copy and paste - in certain circumstances. It works fine on my home computer which is running Windows XP. I've been able to work with it in all browsers. On Windows Vista and Windows 7 there are issues. The only real difference is the previous/next page menu and the switch div script which is written in Javascript. This is the only thing I can think that's interfering. I've only tested Internet Explorer and Chrome in Vista (don't know about Chrome in 7) but it inhibits in both browsers.
Might there be any work arounds? On 14.html which is the Index (as in book, not the main web page) the switch div is gone but it's still not working. However, I tested just the switch div script on another web-site without the previous/next page menu and that also doesn't work.
[Code]...
i am creating a search method tht searches the string entered in the text box in the given page having table. i want to highlight the found word ( matching part )...
but i dont kw hw to exactly get the table colums and apply the highlight method
i am creating a search method tht searches the string entered in the text box in the given page having table. i want to highlight the found word ( matching part )...i can do that but with createTextRange its getting the first match word and than exits
is it possible to create certain part of the page and not the whole page(document.body.createTextrange()) for search like only one column of table and not the whole page contents
I have written a simple webpage that presents a table. A JS function
allows the viewer to click on a cell and each cell with the same
content has the background color changed to lime green. Each cell that
was previously highlighted has the background color changed back to
white. This works great with Firefox but does not work correctly with
IE. In IE, none of the previously highlighted cells has the background
color changed back to white. How can I modify the syntax so that it
will work in both browsers? Below is the JS function...
I'm currently working on a project which is essentially a clickable
world map. I have successfully mapped the image and using a
OnMouseOver = "Continent()" OnMouseOut = "World()" command in each
mapping line ie. <area shape="poly" onmouseover="NA()"
onmouseout="World()" coords="(lotsonumbers)".
In my continent functions I change the image using something like:
function Africa()
{document.images[35].src="/_View/images/maps/worldmaps/world.africa.jpg";
return true;}
This gives me the "highlighting" effect I was looking for when people
mouse over the continent.
However! my problem now is that I need to find a way to essentially
link that with a cell within the same table as the mapped image. There
is a list of the continents in the column next to the map (the map has
all the rows merged in that column). I need it so that if I run the
mouse over the continent or that cell both of them highlight at the
same time. I see the best way of doing this as having both call the
World or Continent function. However I have been unable to find any
way of setting a specific cell's background or text from within a
function.
I have a gridview, and when a user clicks a row, the row should be highlighted. If the user clicks another row, this newly clicked row should be highlighted, but the other row should loose its highlighting. That means, that only one row can be highlighted at a time.
[Code]...
I'm trying to make a php/jquery-based puzzle game where I have a standard html table (#puzzlegrid) generated by php, and I want to highlight certain parts of it when the mouse is hovering over it. I have one table where there are four different parts (split in the middle vertically and horizontally), separated by id's. The left and topmost cells has id="empty", all the rows beneath these has id="row-clues", the columns next to "empty" has id="column-clues" and finally the bottom-right cells has id="playing-grid", which the hover-function belong to. The number of #column-clues and #column-rows can vary, both in the count of rows and columns. I can give a example code if it's necessary.
As for the jquery-part, I simply want to highlight (add a css class) the current row and column when i hover over the #playing-grid cells. That means selecting all #column-clues and all #column-rows cells that exist on the same row/column the mouse is hovering over. This is what I have so far
$("#puzzlegrid td#playing-grid").hover(function() {
var current_rowIndex = $(this).parent()[0].rowIndex;
var current_columnIndex = $(this).parent().children().index($(this));
$("tr").eq(rowIndex).addClass("highlight");
[Code]....
I've tried a for-loop and each() without luck, as far as my jquery skills goes (and that's not far ). Is it possible to use the index for highlighting several columns, or do I have to do it another way? I can change the HTML code if that's necessary.
When moving a mouse over a table cell, how can I highlight only the column and row header cells without highlighting whole column and row in addition to the current cell which I can do? My guess is using coords in some way, unless there a quicker, cleaner method?
View 5 Replies View RelatedI have a regular expression that returns multiple matches. For e.g. If the user types a string "980ee,34223,werw" in a textbox, the regular expression match returns "ee" and "werw". I would like to highlight both "ee" and "werw" in the textbox.
View 1 Replies View RelatedI was wondering how you allow the user to highlight text they've typed (in a form) and click a button to edit its style (placing tags around the highlighted text).
Could someone explain this a little further and perhaps provide an example.
However, I am confused as to how I can highlight the current day of the month, so that any one looking at the calendar knows what the date is. I would like to make the current day background color red and the text white.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScripted Dynamic Table</title>
<script type="text/javascript">
[Code]....
There's a CSS code which is:
<style type="text/css">
tr.hi td, td.hi {
background-color: #ccc;
}
table.extra tr.hi td, table.extra td.hi {
color: red;
text-decoration: underline overline;
background-color: transparent;
}
</style>
1. Could anyone explain to me the naming of tr.hi td, td.hi? Why couldn't they just name it tr.hi, td.hi?
Further down the page, there's a code:
parent_row.className += ' hi'
2. Why not += ".hi"?
I'm using a multiselect box on my website, similar to this one:
<Select Name="multiselect[]" multiple="multiple">
<option>This is option 1</option>
<option>This is option 2</option>
[code]...
Now I want to set option 1, option 2 and option 3 as selected (highlighted) in javascript. I tried something like this:
document.taakform.elements['multiselect[]'].selectedIndex = "1"
document.taakform.elements['multiselect[]'].selectedIndex = "2"
document.taakform.elements['multiselect[]'].selectedIndex = "3"
Of course this doesn't work
I'm using a multiselect box on my website, similar to this one:
<Select Name="multiselect[]" multiple="multiple">
<option>This is option 1</option>
<option>This is option 2</option>
<option>This is option 3</option>
<option>This is option 4</option>
</select>
Now I want to set option 1, option 2 and option 3 as selected (highlighted) in javascript. How would I go about doing this? I tried something like this:
document.taakform.elements['multiselect[]'].selectedIndex = "1"
document.taakform.elements['multiselect[]'].selectedIndex = "2"
document.taakform.elements['multiselect[]'].selectedIndex = "3"
