Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Browser ctrl+f find on the page shows result behind the static header

I have created a page, which has a Header, that stays where it is, even if I scroll the page.

The issue is, when I do a browser based word find by hitting Ctrl+f key, and try to search something on my webpage, the search goes behind the Header div. And I have scroll down to see the searched work (which gets highlighted for the part the browser searched).

I noticed that gmail has a header also, which also stays stationary on scroll of the page, and they do handle this "find" issue as well.

Any suggestions of how can I fix this.

Providing a sample source of my page below:

    <html>

<head>
<style> 
#masthead {
    background-color: #131623;
    border-bottom: 4px solid #FFFFFF;
    border-top: 0 none;
    left: 0;
    min-width: 980px;
    position: fixed;
    top: 0;
    width: 100%;
}
#masthead {
    border-bottom: 0 none;
    border-top: 4px solid #171A23;
    left: 0;
    min-width: 980px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 900;
}
#masthead {
    border-bottom: medium none;
    border-top: 0 none;
    box-shadow: none;
    overflow: visible;
    position: fixed;
}
#masthead {
    background-color: #131623;
    border-bottom: 4px solid #FFFFFF;
    border-top: 1px solid #666666;
    left: 0;
    min-width: 980px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 900;
}

div, p, span, a, li, strong {
    font-family: Arial,sans-serif;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, li, fieldset, form, label, legend {
    border: 0 none;
    font-size: inherit;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}
</style>
</head>
<body>
<div id="masthead">
  <div id="universal-nav" style="height:40px; background-color:#eaeaea;" >

  </div>
  <div class="menu-subtabs" style="height:30px; background-color:#fafafa;"">
        <h2>SalesOne</h2>


  </div>
</div>
</br></br></br></br></br>
<table border="0" summary="Content Block">
    <tr>
        <td>
            <p xmlns="">
                <a href="#Win">Win Summary</a>
                <br/>
                <a href="#Client">Client</a>

                <br/>
                <a href="#Overview">Project Overview</a>
                <br/>
            </p>
            <p xmlns="" id="Win">
                <strong>
                    <font color="#008000">Win Summary</font>
                </strong>

            </p>
            <p xmlns="">
                Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.</p>


            <p xmlns="" id="Client">
                <font color="#008000">
                    <strong>Customer</strong>
                </font>
            </p>
            <p xmlns="">
                <a href="http://www.yara.com/">Yara International ASA</a>Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.Located in Norway, Yara International ASA is the world&#153;s leading chemical company that converts energy, natural minerals and nitrogen from the air into essential products for farmers and industrial customers. Through their environmental and industrial products, they help safeguard air and water quality and preserve food quality.
            </p>


            <p xmlns="" id="Overview">
                <strong>
                    <font color="#008000">Project Overview</font>
                </strong>
            </p>
            <p xmlns="">
                ITS Enterprise Services - security services will provide hosted and managed services as part of SO project for data center hosting and management. The security components include:</p>

        </td>

    </tr>
</table>
</body>
</html>
</html>

Thanks in advance, Zeeshan

like image 470
Zeeshan Rang Avatar asked Jan 14 '13 10:01

Zeeshan Rang


People also ask

How does Ctrl F work in browser?

"Control+F" (or "Command+F" on a Mac) is the keyboard shortcut for the Find command. If you're in a document or in a web browser, pressing the Ctrl key + the F key will bring up a search box in the top right corner of the screen.

How does Ctrl F work in Chrome?

Ctrl+F in an Internet browser In all major Internet browsers (e.g., Chrome, Edge, Firefox, Opera), pressing Ctrl + F opens the find box that lets you search for characters, text, and phrases on the current page. This shortcut is extremely helpful when trying to find specific text in a long document or article.

Can Ctrl F be tracked?

Nope, not possible. On some browsers you can catch the key combination Ctrl + F , but you can't spy on what the user searched for. On other browsers you can't catch Ctrl + F at all.

How do I stop Ctrl F?

To disable Ctrl + F of find in page with JavaScript, we can attach a keydown event listener. And then we can listen for key with key code 114 or press of the control key and key with key code 70 and prevent the default action in either case.


1 Answers

By the way you describe it I imagine that you overlay the header div over the page using position: fixed and z-index, or perhaps using javascript.

Instead, try the following:

<div class="header">this is the header</div>
<div class="content" style="overflow: scroll;">
  this is the content div, if the content becomes to large it will scroll
</div>

The overflow: scroll attribute will make a div scrollable, instead of the whole page. This will keep your header visible, without putting content behind the header.

Hope this helps!

like image 99
rmhartog Avatar answered Sep 28 '22 03:09

rmhartog