Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS "overflow-x:hidden" conflicts with browser Ctrl+F horizontal move off screen word highlight

CSS Conflict

html {overflow-x:hidden;}

with
Web Browser Command

Ctrl + F  or find() or keyword search


Problems:

Site is horizontal scroll design that jumps to previous(Left) or next(Right) to a predetermined width/step/section without a visible horizontal scroll bar.

document.onkeydown = function(evt) {
evt = evt || window.event;
switch (evt.keyCode) {
    case 37:
        leftArrowPressed();
        window.location.href = '#one';
        break;
    case 39:
        rightArrowPressed();
        window.location.href = '#two';
        break;
}
};


When I invoke a Ctrl+F to find words, the page will not follow the highlighter off screen left or right. Except when Overflow-x: visible and that only scrolls to the word not the entire screen width/step/section that the word is in.

  • Overflow-x:hidden; removes the browsers ability to scroll horizontally;
  • Overflow-x:visible; browsers only scrolls to word not next section when in horizontal overflow;


Can I follow the browser ctrl+f word highlighter feature at predetermined width steps/sections?

Can I invoke the key-press when ctrl+f word highlighter moves off screen?

Is it possible to capture the highlighted word coordinates( x , y)?

Functioning Test Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Alpha Test</title>

<style type="text/css">
* {
margin:0;
padding:0;
}
html {
height:100%;
overflow-x:hidden;
}
body {
height:100%;
}
#wrap {
min-height:100%;
width:200%;
}
#one, #two {
width:50%;
float:left;
}
</style>

<script type="text/javascript">
document.onkeydown = function(evt) {
    evt = evt || window.event;
    switch (evt.keyCode) {
        case 37:
            window.location.href = '#one';
            break;
        case 39:
            window.location.href = '#two';
            break;
    }
};
</script>

</head>
<body>

<div id="wrap">

<div id="one">
<iframe id="frame" src="https://wiki.videolan.org/" frameborder="0" marginwidth="" width="100%" height="100%" align="bottom">Browser not compatible.</iframe>
<!END URL-iFrame></div>

<div id="two">
<iframe id="frame" src="http://imdb.com" frameborder="0" marginwidth="" width="100%" height="100%" align="bottom">Browser not compatible.</iframe>
<!END URL-iFrame></div>

</div>
</body>
</html>
like image 875
Understood Avatar asked Nov 08 '13 06:11

Understood


1 Answers

Overflow-x and overflow-y had always problems, even in the newest browsers. Both can have "hidden", "visible" and "scrollbar" ("auto" is only a combo of "visible" and "scrollbar"), which is thus 9 combinations.

But in the practice only 5 of them works, I reply: even in the newest Chrome! And what yet worser is: there is a difference between the browsers, which 5 is this...

Sometimes (in depends on your actual problem) a workaround is possible, if you combine overflow-x, overflow-y and overflow. Sometimes some JS-tricking is the solution. General and beautiful solution doesn't exist.

ctrl/f has with it probably nothing direct to do, it is an indirect cause of your problem, because the body of your page will be probably resized, when the search-widget of the browser appears. You could reproduce this problem probably with a vertical resize of the browser window, too.

like image 95
peterh Avatar answered Sep 24 '22 03:09

peterh