Daniel Daniel - 26 days ago 6
CSS Question

Searching for text (Ctrl+F) across hidden spans

Is it possible to search for text using your browser's Ctrl+F function across three

span
tags if the middle tag is set to hidden? For example:

<span class="visibleText">Trying</span>
<span class="hiddenText">to search</span>
<span class="visibleText">text.</span>


If
.hiddenText
is set to
display:none
, the web browser will show "Trying text." If you search using Ctrl+F in a web browser, however, you will stop matching the string after "Trying ". You can highlight the whole phrase "Trying text" and press Ctrl+F, which will pop the phrase into your search box, but clicking the find-next-match button will yield no results.

Is there any way of making that whole phrase searchable? For an example, check out: http://jsfiddle.net/surrealmind/qo2ens33/.

Answer

This works

http://jsfiddle.net/qo2ens33/2/

HTML

<span class="visibleText">Trying</span>
<div class="hiddenText"><span>to search</span></div>
<span class="visibleText">text</span>

CSS

.hiddenText{
    width:0px;
    height:0px;
    overflow:hidden;
    display:inline-block;
}

This works too

http://jsfiddle.net/ctwheels/qo2ens33/5/

HTML

<span class="visibleText">Trying</span>
<span class="hiddenText">to search</span>
<span class="visibleText">text</span>

CSS

.hiddenText {
    position:absolute;
    opacity:0;
    width:0px;
}

Not sure if this is what you're looking for


Ok, I think this is what you're looking for... You can't (as far as I know) search for two separate spans together, so what I've done is I've added the visible spans together

http://jsfiddle.net/ctwheels/qo2ens33/6/

Using this code:

JS

var numberOfElements = $(".visibleText").length;
for (var i = 1; i < numberOfElements; i++) {
    $(".visibleText:eq(0)").append(" " + $(".visibleText:eq(1)").text());
    $(".visibleText:eq(1)").remove();
}