By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,598 Members | 1,894 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,598 IT Pros & Developers. It's quick & easy.

how to refer to window in DIV from within another DIV

P: 2
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:

Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript">
  2. var NS4 = (document.layers); 
  3. var IE4 = (document.all); 
  4. var win = window; 
  5. var n = 0;  
  6. function findInPage(str) { 
  7. var txt, i, found; 
  8. if (str == "") return false; 
  9. if (NS4) { if (!win.find(str)) while(win.find(str, false, true)) n++; 
  10. else n++; 
  11. if (n == 0) alert("Not found."); } 
  12. if (IE4) { txt = win.document.body.createTextRange(); 
  13. for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) 
  14. { txt.moveStart("character", 1); txt.moveEnd("textedit"); } 
  15. if (found) { 
  16. txt.moveStart("character", -1); txt.findText(str);; txt.scrollIntoView(); n++; } 
  17. else { if (n > 0) { n = 0; findInPage(str); } 
  18. else alert("Not found."); } } return false; } </script>
The short code for the box itself that of cause goes into the BODY section:
Expand|Select|Wrap|Line Numbers
  1. <form name="search" onSubmit="return findInPage(this.string.value);"> 
  2. <div align="center"> 
  3. <p><font size=3> <input name="string" type="text" size=15 onChange="n = 0;"> </font> 
  4. <input type="submit" value="Search Page"> </p> </div> 
  5. </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
Expand|Select|Wrap|Line Numbers
  1. 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.
Aug 3 '08 #1
Share this Question
Share on Google+
3 Replies

Expert Mod 15k+
P: 16,027
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?
Aug 3 '08 #2

P: 2
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:
Expand|Select|Wrap|Line Numbers
  1. <body>
  2. <nobr>
  3. <div id="menu"><div id="header">
  4. *** here comes the PHP code to create the menubar ***
  5. </div></div>
  6. </nobr>
  7. <div id="content">
  8. ***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 ***
  9. </div>
  10. </body>
If it matters, here is the CSS that makes the menu DIV fixed:
Expand|Select|Wrap|Line Numbers
  1. #menu { 
  2. width:100%; 
  3. position:fixed; 
  4. margin:0; 
  5. top:0px; 
  6. display:block; 
  7. height:30px; 
  8. background-color::#fff; 
  9. z-index:5; }
The CSS for the content DIV reads:
Expand|Select|Wrap|Line Numbers
  1. #content {
  2.   display:block;
  3.   height:100%;
  4.   position:relative;
  5.   top:36px;
  6.   max-height:100%;
  7.   overflow:auto;
  8.   padding-left:10px;
  9.   z-index:4;
  10. }
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).
Aug 3 '08 #3

Expert Mod 15k+
P: 16,027
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.
Aug 4 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.