Ich habe versucht, einen Schieberegler zu erstellen, habe jedoch festgestellt, dass sich die Position und der Versatz des <div> -Elements geändert haben, wenn ein Benutzer STRG + F verwendet funktioniert nicht mehr so wie es sein soll.

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"});
    });
});

Gibt es eine Möglichkeit, zu verhindern, dass STRG + F die versteckten Abschnitte findet?

jsFiddle Demo

3
Raiser94 27 Nov. 2013 im 16:55

2 Antworten

Beste Antwort

Ich habe eine Lösung gefunden, die eine Variable verwendet, um die Position des Hauptverpackungs-Div zu verfolgen und ".hide ()" das nicht sichtbare Inhalts-Div zu verbergen. versteckter Inhalt ist für Strg f nicht sichtbar.

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>
0
Raiser94 2 Dez. 2013 im 07:42

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

Wenn Sie Ihre Animation in marginLeft anstelle der Eigenschaft right ändern, scheint der Inhalt bei der Suche nicht zu scrollen. (Chrome / Mac OSX)

Ein Benutzer würde jedoch immer noch sehen, dass es eine Übereinstimmung gibt, und wäre ratlos, wo es sein könnte.

 $("#sliderbuttonnext").click(function () {
     $("#slider").animate({
         marginLeft: "-=100px"
     });
 });
 $("#sliderbuttonprev").click(function () {
     $("#slider").animate({
         marginLeft: "+=100px"
     });
 });
0
ahren 27 Nov. 2013 im 13:10