how to refer to window in DIV from within another DIV

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • yosibeck
    New Member
    • Aug 2008
    • 2
    #1

    how to refer to window in DIV from within another DIV

    sorry folks, I'm sure this is a newbie question.
    On my website I have one DIV (id="menu") with position:fixed that serves as a fixed menu bar.
    Then comes the second DIV (id="content") that holds the whole content of the site (genealogy reports rendered by PHP from SQL).
    I want to put a Javascript searchbox in the menu, that searches in the content window.
    The present Javascript in the HEAD section of the page says:


    Code:
    <script language="JavaScript">
var NS4 = (document.layers); 
var IE4 = (document.all); 
var win = window; 
var n = 0;  
function findInPage(str) { 
var txt, i, found; 
if (str == "") return false; 
if (NS4) { if (!win.find(str)) while(win.find(str, false, true)) n++; 
else n++; 
if (n == 0) alert("Not found."); } 
if (IE4) { txt = win.document.body.createTextRange(); 
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) 
{ txt.moveStart("character", 1); txt.moveEnd("textedit"); } 
if (found) { 
txt.moveStart("character", -1); txt.findText(str); txt.select(); txt.scrollIntoView(); n++; } 
else { if (n > 0) { n = 0; findInPage(str); } 
else alert("Not found."); } } return false; } </script>
    The short code for the box itself that of cause goes into the BODY section:
    Code:
    <form name="search" onSubmit="return findInPage(this.string.value);"> 
<div align="center"> 
<p><font size=3> <input name="string" type="text" size=15 onChange="n = 0;"> </font> 
<input type="submit" value="Search Page"> </p> </div> 
</form>
    Problem is that this way the search is made within the DIV in which the searchbox code is placed. So when I put the code for the search box in the id=menu DIV, it searches in the menu bar itself.
    I can't put it in the content part (which would make it search there) because then the box scrolls out of sight on the long pages, so you can't make further searches for the string...

    How do I change the Javascript in the HEAD section so that though I place the search box in the menu DIV, it will search in the content DIV.
    I understand that the change has to be made to the
    Code:
    var win = window
    to make it refer to the other DIV, but I don't know how to change that.
    Would greatly appreciate your help.
    Yossi
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      Can you show the code for the second div (just the relevant part)?

      Note that the search script that you're using is very old. What browsers have/are you tested/testing on?

        Comment

        • yosibeck
          New Member
          • Aug 2008
          • 2
          #3
          Hi Acoder,
          Yeah, from the IE4 bit I understood the code is a quite ancient. I was looking around on the web for a page search script (I don't need a site search) and came up with this one. It works fine in IE6 and IE7 but fails miserably in Firefox.
          No doubt I'll have to look around for something more updated.
          If you know of some major sites that might offer such script that would be great.

          Anyhow, I guess also with an updated script I would still have to refer from the menubar to search the content, so I'll show the DIV's you asked for.
          The BODY part goes like this:
          Code:
          <body>
<nobr>
<div id="menu"><div id="header">
*** here comes the PHP code to create the menubar ***
</div></div>
</nobr>
<div id="content">
***Here comes a very large chunk of PHP that creates the interface that makes it possible to search the database and create ancestor and descendants reports ***
</div>
</body>
          If it matters, here is the CSS that makes the menu DIV fixed:
          Code:
          #menu { 
width:100%; 
position:fixed; 
margin:0; 
top:0px; 
display:block; 
height:30px; 
background-color::#fff; 
z-index:5; }
          The CSS for the content DIV reads:
          Code:
          #content {
  display:block;
  height:100%;
  position:relative;
  top:36px;
  max-height:100%;
  overflow:auto;
  padding-left:10px;
  z-index:4;
}
          If you could point out how I can place the searchbox code in the menu DIV but make it search in the content DIV I would be grateful.
          (And if you can refer me to a more updated search script that would be great as well).
          Thanks.

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              Use window.find() (a newer version) for Mozilla/Firefox. Opera doesn't support it, and I don't think Safari does either, though I haven't tested.

              If you want something cross-browser, you'll need to use the Range object.

              As for searching within the div, do you have an iframe within the div. If it's only content, it should search the whole page.

                Comment

                Previous template Next
                Working...