CTRL + F移动溢出：隐藏<div>

Question

I am trying to create a slider but discovered that if a user were to use CTRL + F , the position and the <div> element's offset changed and so the slider no longer works the way is should.

HTML:

<div style="width:100px; height:150px;">
    <div style="width:100px; height:100px; overflow:hidden;">
        <div id="slider" style="width:200px; height:100px; right:0; position:relative;">
            <div style="width:100px; height:100px; float:left;">visible</div>
            <div style="width:100px; height:100px; float:left;">hidden</div>
        </div>
    </div>
    <input id="sliderbuttonprev" type="button" style="float:left;" value="Prev">
    <input id="sliderbuttonnext" type="button" style="float:right;" value="Next">
</div>

JavaScript (jQuery):

$(document).ready(function() { 
    $("#sliderbuttonnext").click(function(){
        $("#slider").animate({right:"+=100px"});
    });
    $("#sliderbuttonprev").click(function(){
        $("#slider").animate({right:"-=100px"});
    });
});

Is there a way to stop CTRL + F finding the hidden sections?

jsFiddle Demo

Answer 1

You cannot prevent browsers from finding hidden content, but you could potentially disable it for the slides.

For example, if you specify the content within CSS, the browser won't move the content. For example, see here > Is it possible to disable Ctrl + F of find in page?

<div class="word-foobar"></div>

.word-foobar:before {
    content: "Foobar";
}

As nickf has suggested, you could easily write some JavaScript code to convert actual text to this method.

Answer 2

http://jsfiddle.net/TaZL2/2/

If you change your animation to marginLeft instead of the right property, the content doesn't seem to scroll when searching. (Chrome/Mac OSX)

However, a user would still see there was a match and be stumped as to where it could be.

 $("#sliderbuttonnext").click(function () {
     $("#slider").animate({
         marginLeft: "-=100px"
     });
 });
 $("#sliderbuttonprev").click(function () {
     $("#slider").animate({
         marginLeft: "+=100px"
     });
 });

Answer 3

i came up with a solution that uses a variable to track the position of the main wrapping div and hides ".hide()" the content div that's not visible. hidden content is not visible to ctrl f.

HTML:

<div style="width:100px; height:150px;">
<div style="width:100px; height:100px; overflow:hidden;">
    <div id="slider" style="width:200px; height:100px; right:0; position:relative;">
        <div style="width:100px; height:100px; float:left;">
            <div id="id1">visible</div>
        </div>
        <div style="width:100px; height:100px; float:left;">
            <div id="id2">hidden</div>
        </div>
    </div>
</div>
<input id="sliderbuttonprev" type="button" style="float:left;" value="Prev">
<input id="sliderbuttonnext" type="button" style="float:right;" value="Next">

JQuery

<script>
var pos = 0;
function showfunct(x){
   if(x==0)$("#id1").show();
   if(x==100)$("#id2").show();
}

function hidefunct(x){
   if(!(x==0))$("#id1").hide();
   if(!(x==100))$("#id2").hide();
}
showfunct(pos);
hidefunct(pos);
$(document).ready(function() { 

$("#sliderbuttonnext").click(function(){
    pos+=100;
    showfunct(pos);
    $("#slider").animate({right:"+=100px"});
    $("#slider").promise().done(function(){
        hidefunct(pos);
    });
});
$("#sliderbuttonprev").click(function(){
    pos-=100;
    showfunct(pos);
    $("#slider").animate({right:"-=100px"});
    $("#slider").promise().done(function(){
        hidefunct(pos);
    });
});
}); 
</script>