I’ve been searching and playing with this script for the past few hours and finally got it work!
<script type="text/javascript">
function fnSelect(objId)
{
fnDeSelect();
if (document.selection)
{
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(objId));
range.select();
}
else if (window.getSelection)
{
var range = document.createRange();
range.selectNode(document.getElementById(objId));
window.getSelection().addRange(range);
}
}
function fnDeSelect()
{
if (document.selection)
document.selection.empty();
else if (window.getSelection)
window.getSelection().removeAllRanges();
}
</script>
<div id="mydiv">Hi, How are you?</div>
<input type="button" value="Copy Code" onClick="fnSelect('mydiv')">
But for the life of my I can’t figure out how to grab all instances of the same div. For example, the function will only grab “Hi,”
Actually, I’ve failed for not being specific. I figured out how to use your initial code to highlight the div. I understand now that it must be a name or class. The way I was highlighting allowed me to click CTRL-C to copy the contents of the highlighted div. With your example it doesn’t.
You can’t, at least not later than 30 minutes after you’ve created the post. In that time you can click “edit” and then “delete”.
I’ve closed the other thread with a link to this one
]I don’t think any of us was struggling to understand what you were asking. Rather we were trying to lead you to the answer, not just give you it. It seems we failed.
<script type="text/javascript">
function highlight (item) {
var items = document.getElementsByName (item);
var j=items.length;
for (var i=0; i<j; i++) {
items[i].className = "highlight";
}
}
</script>
<style type="text/css">
.highlight {
background: #FF0000;
color: #0000FF;
}
</style>
<h1>This is one way to highlight the target DIVs</h1>
<form>
<input type="button" value="Select/Highlight" onClick="highlight('thisone')"><br><br>
<?php
$i = 0;
while ($i < 20){
$i++;
echo '<div name="thisone">Highlight this DIV - '.$i.'</div>';
echo '<br />';
echo '<div>I Like Numbers</div>';
echo '<br />';
}
?>
</form>
Here’s a crystal clear example. Through this in your browser and it will all make sense…
<script type="text/javascript">
function fnSelect(objId)
{
fnDeSelect();
if (document.selection)
{
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(objId));
range.select();
}
else if (window.getSelection)
{
var range = document.createRange();
range.selectNode(document.getElementById(objId));
window.getSelection().addRange(range);
}
}
function fnDeSelect()
{
if (document.selection)
document.selection.empty();
else if (window.getSelection)
window.getSelection().removeAllRanges();
}
</script>
<h1>How Do I Only Highlight the Numbers?</h1>
<form>
<input type="button" value="Select/Highlight" onClick="fnSelect('mydiv')">
<?PHP
$i = 0;
while ($i <= 100){
ob_flush();
flush();
$i++;
echo "<div class=\\"my class\\" id=\\"mydiv\\">$i</div>";
echo "<br />";
echo "<div id=\\"anotherdiv\\">I Like Numbers</div>";
echo "<br />";
// wait for 1 second
usleep(1000000);
}
?>
</form>
TriLLi - your solution works however does not allow the user to right-click as a means of copying. The original script does. It also only works when the ‘div’ code already exists in the html page - where mine is being echoed out through php. The original script is able to highlight the exhoed text.
siteguru - your script invokes a pop-up, I’m not too sure where to take it from there.
Nevertheless, I do appreciate the time both of you have invested.
So if .getElementById(ID) will only return the first instance the id and the fact that I can only have one div with one id then changing it to a class seems like the easy first step.
TriLLi - I’ve been playing with your original code to see if I can get it to work:
<script type="text/javascript">
function mark_same_elements(id, tag)
{
var el = document.getElementsByTagName(tag);
for(var i = 0; i < el.length; i++)
{
if(el[i].getAttribute('mydiv').toLowerCase() == id.toLowerCase())
{
el[i].setAttribute('myclass', 'mydiv');
}
}
}
</script>
<input type="button" value="Copy Code" onClick="mark_same_elements('mydiv', 'myclass')">
<div class="myclass" id="mydiv">
<?PHP echo "Hello World!" ?>
</div>
and also one tip HTML element attribute id should be unique on whole page, and javascript method .getElementById(ID) will return first element with that ID because it works with the presumption that there are no duplicates in HTML. This rule is related to all elements not just those with same tag name.
Thanks - I appreciate it. But being a complete noob I can’t get it to work. In fact, I can’t select anything now. This is what I have:
<script type="text/javascript">
function mark_same_elements()
{
fnDeSelect();
var el = document.getElementById('mydiv');
for(var i = 0; i < el.length; i++)
{
if(el[i].getAttribute('mydiv')() == id())
{
el[i].setAttribute('classassignedtodiv', 'mydiv');
}
}
}
function fnDeSelect()
{
if (document.selection)
document.selection.empty();
else if (window.getSelection)
window.getSelection().removeAllRanges();
}
</script>
I used the ‘fnDeSelect’ function correctly? Being a new php guy I can see the code does the following?
var el = document.getElementById(‘mydiv’);
creates a variable ‘el’ and gets the div ‘mydiv’
if(el[i].getAttribute(‘rawresults’)() == id())
An if statement for the checking the variable ‘el’ to see if it is equal
el[i].setAttribute(‘classassignedtodiv’, ‘mydiv’);
if it is then it changes the attribute?
To reiterate all I want to do is have a button that grabs every instance of the same div id (not multiple divs or classes). The trick is that the same id may be spread throughout the page:
<div id="mydiv">Hi,</div>//Highlight me
<div id="div2"></div>
<div id="mydiv">how</div>//Highlight me
<div id="div2"></div>
<div id="mydiv">are</div>//Highlight me
<div id="div2"></div>
<div id="mydiv">you?</div>//Highlight me
<div id="mydiv">Hi,</div>//Highlight me
<div id="div2"></div>
<div id="mydiv">how</div>//Highlight me
<div id="div2"></div>
<div id="mydiv">are</div>//Highlight me
<div id="div2"></div>
<div id="mydiv">you?</div>//Highlight me
.highlight
{
border: 1px solid green !important;
}
function mark_same_elements(id, tag)
{
var el = document.getElementsByTagName(tag);
for(var i = 0; i < el.length; i++)
{
if(el[i].getAttribute('id').toLowerCase() == id.toLowerCase()) {
el[i].className = el[i].className + ' highlight';
}
}
}
when this function is called all elements with tag name provided as parameter and with id provided as parameter will contain class ‘highlight’ whichwill assign green border to them.
You can change fields of this class for example you can add also background but be sure to use !important after field value in order to overwrite same attributes inherited by selected element.
It seems we failed.
