Forum Moderators: open
Does anyone know a simple way to determine if a snippet of text curently is hidden? In other words, is the text contained within a collpased <div> or <span>?
I have a local-page search algorithm that highlights (selects) a search word or phrase. Unfortunately if the search word or phrase is within a hidden <div> or <span>, then the select() statement that accomplishes the highlighting, generates a runtime error. In other words, if the search word or phrase is contained within a <div style=display:none> or a <span style=display:none>, then the select() code crashes. If the <div> or <span> is expanded (visible), then all is well; however, expanding everything before searching defeats the purpose of the collapsed text.
I know that one approach is something along the lines of
if(textRange.parentNode.style.display=="none")
but this does not address the situation where the hidden text sometimes is buried inside more tags, so the parentNode may not be appropiate. It seems complicated to do recursion, and I just thought there might be an easy, more generalized way.
Thank you for any ideas!
Chris
Here's the routine that crashes when is hits str = [hidden text].
TRange = document.body.createTextRange();
strFound = TRange.findText(str);
if (strFound) {TRange.select();}
I couldn't get the parent element of a text range other than to use the IE method,
[blue]parentElement()[/blue]First, as Martin says, we need a recursive function that climbs up though the ancestry, and returns
[blue]false[/blue][blue]display:none[/blue][blue]true[/blue]It receives the parent element as an argument.
function isDisplayed(parent)
{
var body = document.body
while(parent!= body)
{
if(parent.style.display == "none")
return false
parent = parent.parentNode
}
return true
}
Then you check to see if your text is displayed like this:
if( isDisplayed(TRange.parentElement() )
I've confirmed the wierdness with respect to errors on attempting to select hidden text. It could be because our site is hosted on a somewhat unusual server. As another example of different server behavior, we know that URLs addressed to our server are case-sensitive.
Thank you very much again for the great bread crumbs!
Chris
Just wondering, what if the node of concern has visibility:hidden instead of display:none?
;)
function isDisplayed(parentElement) {
var body=parent.Main.document.body;
while(parentElement!= body) {
if(parentElement.style.display=="none" ¦¦ parentElement.style.visibility=="hidden" ) {
return false;
}
else {
parentElement=parentElement.parentNode;
}
}
return true;
}
I don't know the figures either, but it's quite common to be creating a site on a Windows PC, then uploading it to Apache, with the resulting case problems. I was taught not to use upper-case for filenames ... ever, and this was before I knew the difference between a web server and a nice hot cup of tea, so I don't often get this.
