Embedding search in a menu

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:52

Embedding search in a menu

Poster: eragon
Dated: Sunday October 8 2006 - 5:42:51 BST

I've searched this forum and found topics related to mine, but the solution I've seen is still just out of my reach. I appreciate your patience as I ask what has been asked (and solved) before.

I've made some progress with embedding my Google search form inside one of my menus. Rather than creating duplicate files (one with a menu that works, another that I'm still working on), I hope I can instead just post my code here.

My site is this: http://www.familywebwatch.com

My unedited Google form is:

Code:

<FORM method=GET action=http://www.google.com/custom>
<TABLE bgcolor=#FFFFFF cellspacing=0 border=0>
<tr valign=top><td>
<A HREF=http://www.google.com/search>
<IMG SRC=http://www.google.com/logos/Logo_40wht.gif border=0 ALT=Google align=middle></A>
</td></tr>
<tr>
<td>
<INPUT TYPE=text name=q size=15 maxlength=255 value="">
<INPUT type=submit name=sa VALUE="Google Search">
<INPUT type=hidden name=cof VALUE="S:http://www.familywebwatch.com;GL:0;AH:left;LH:60;L:http://www.familywebwatch.com/fww_banner.jpg;LW:201;AWFID:433b3358113fb253;">
<input type=hidden name=domains value="familywebwatch.com"><br><input type=radio name=sitesearch value=""> Search WWW <br />
<input type=radio name=sitesearch value="familywebwatch.com" checked> Search fww.com
</td></tr></TABLE>
</FORM>

The menu I'm trying to embed the above into is:

Code:

aI("text=Search;showmenu=Search;align=center;itemwidth=80;status=Search;openonclick=1");

If I understand correctly, the showmenu reference is where this form code needs to be. I've tried removing the double quotes on everything (based on my research here), and even tried changing them to single quotes (because...well...my limited knowledge left me thinking that value=_____ looked weird and might be the source of the problem).

The problem is that when I make these changes, the menu doesn't show up at all. I'm at a total loss on what I should do.

Any help is greatly appreciated. Thanks.

Poster: kevin3442
Dated: Sunday October 8 2006 - 11:26:57 BST

Hi,

Did you put type=html in the aI() call for the item that contains the form?

Code:

aI("text=...google form code...;type=html;");

Kevin

Poster: eragon
Dated: Sunday October 8 2006 - 18:12:00 BST

Thanks, Kevin, but I'm still doing something wrong. Here's my code for the search menu:

Code:

with(milonic=new menuname("Search")){
style=dropStyle;
aI("text=<FORM method=GET action=http://www.google.com/custom>
<TABLE bgcolor=#FFFFFF cellspacing=0 border=0>
<tr valign=top><td>
<A HREF=http://www.google.com/search>
<IMG SRC=http://www.google.com/logos/Logo_40wht.gif border=0 ALT=Google align=middle></A>
</td></tr>
<tr>
<td>
<INPUT TYPE=text name=q size=15 maxlength=255 value=>
<INPUT type=submit name=sa VALUE='Google Search'>
<INPUT type=hidden name=cof VALUE=S:http://www.familywebwatch.com;GL:0;AH:left;LH:60;L:http://www.familywebwatch.com/fww_banner.jpg;LW:201;AWFID:433b3358113fb253;>
<input type=hidden name=domains value='familywebwatch.com'><br><input type=radio name=sitesearch value=''> Search WWW <br />
<input type=radio name=sitesearch value='familywebwatch.com' checked> Search fww.com
</td></tr></TABLE>
</FORM>;type=html;");
}

This is the version with ' instead of ". I also tried it without those, but to no avail.

Poster: kevin3442
Dated: Monday October 9 2006 - 5:07:51 BST

Hi eragon,

The main problem is that your form definition is done across several different lines of code. That's OK in html, but the trick here is that you're defining the form inside of a javascript literal string (the double-quoted string passed to aI() ). By breaking it into multiple lines, the string ends prematurely, generating an "unterminated string literal" error. There are several solutions to this problem, as shown in the examples below (using your exact form code).

There's another small issue too: Sometimes, html code embedded in a menu item can confuse the system, where html attributes have the same names as menu properties. To avoid that, you can enclose the entire html string in backward single quotes (`html code goes here`). I've done that in the appropriate places in the examples below.

So, how do you get around the unterminated string problem? Three approaches I can think of (you may want to maximize your browser window

):

(1) Define the entire aI() on one line of code. That's easy to start, but it makes it pretty difficult to edit the form code later. In any case, your Search menu would look like this (with appropriate use of the ` ). And yes, the aI() below really is all on one line (it wraps here). Copy the code from here and paste it into your menu_data.js, you'll see:

Code:

with(milonic=new menuname("Search")){
style=dropStyle;
aI("text=`<FORM method=GET action=http://www.google.com/custom><TABLE bgcolor=#FFFFFF cellspacing=0 border=0><tr valign=top><td><A HREF=http://www.google.com/search><IMG SRC=http://www.google.com/logos/Logo_40wht.gif border=0 ALT=Google align=middle></A></td></tr><tr><td><INPUT TYPE=text name=q size=15 maxlength=255 value=><INPUT type=submit name=sa VALUE='Google Search'><INPUT type=hidden name=cof VALUE=S:http://www.familywebwatch.com;GL:0;AH:left;LH:60;L:http://www.familywebwatch.com/fww_banner.jpg;LW:201;AWFID:433b3358113fb253;><input type=hidden name=domains value='familywebwatch.com'><br><input type=radio name=sitesearch value=''> Search WWW <br /><input type=radio name=sitesearch value='familywebwatch.com' checked> Search fww.com</td></tr></TABLE></FORM>`;type=html;");
}

(2) You can continue a string across multiple lines in javascript, by string concatenation (adding one piece to another), but you have to be careful. In general, it works like this:

Code:

var stringName = "this is a "
  + "string literal that "
  + "spans multiple lines of code.";

The following example shows your Search menu, where aI() contains a long string literal defined across multiple lines.

Code:

with(milonic=new menuname("Search")){
style=dropStyle;
aI("text=`"
  + "<FORM method=GET action=http://www.google.com/custom>"
  + "<TABLE bgcolor=#FFFFFF cellspacing=0 border=0>"
  + "<tr valign=top><td>"
  + "<A HREF=http://www.google.com/search>"
  + "<IMG SRC=http://www.google.com/logos/Logo_40wht.gif border=0 ALT=Google align=middle></A>"
  + "</td></tr>"
  + "<tr>"
  + "<td>"
  + "<INPUT TYPE=text name=q size=15 maxlength=255 value=>"
  + "<INPUT type=submit name=sa VALUE='Google Search'>"
  + "<INPUT type=hidden name=cof VALUE=S:http://www.familywebwatch.com;GL:0;AH:left;LH:60;L:http://www.familywebwatch.com/fww_banner.jpg;LW:201;AWFID:433b3358113fb253;>"
  + "<input type=hidden name=domains value='familywebwatch.com'><br><input type=radio name=sitesearch value=''> Search WWW <br />"
  + "<input type=radio name=sitesearch value='familywebwatch.com' checked> Search fww.com"
  + "</td></tr></TABLE>"
  + "</FORM>"
  + "`;type=html;");
}

(3) Finally, you can combine the multiple-line approach above with the use of a string variable. Define the html code in a string variable across multiple lines, then use the variable in the call to aI(). This is how it would work with your code.

First, define a global variable to hold the html code for the search form. Here, I call the variable mm_searchForm. This would normally be done at the top of your menu_data code, where the other globals are defined.

Code:

var mm_searchForm =
    "<FORM method=GET action=http://www.google.com/custom>"
  + "<TABLE bgcolor=#FFFFFF cellspacing=0 border=0>"
  + "<tr valign=top><td>"
  + "<A HREF=http://www.google.com/search>"
  + "<IMG SRC=http://www.google.com/logos/Logo_40wht.gif border=0 ALT=Google align=middle></A>"
  + "</td></tr>"
  + "<tr>"
  + "<td>"
  + "<INPUT TYPE=text name=q size=15 maxlength=255 value=>"
  + "<INPUT type=submit name=sa VALUE='Google Search'>"
  + "<INPUT type=hidden name=cof VALUE=S:http://www.familywebwatch.com;GL:0;AH:left;LH:60;L:http://www.familywebwatch.com/fww_banner.jpg;LW:201;AWFID:433b3358113fb253;>"
  + "<input type=hidden name=domains value='familywebwatch.com'><br><input type=radio name=sitesearch value=''> Search WWW <br />"
  + "<input type=radio name=sitesearch value='familywebwatch.com' checked> Search fww.com"
  + "</td></tr></TABLE>"
  + "</FORM>";

Now use the mm_searchForm variable in the call to aI(), to build the item in the Search menu. You would do this in the same place that you normally define menus:

Code:

with(milonic=new menuname("Search")){
style=dropStyle;
aI("text=`" + mm_searchForm + "`;type=html;");
}

You should be able to use any one of these examples in your code ereagon.

Sorry for the long-winded explanation. It's my hope that someone in a similar circumstance down the road might come across this thread and find it useful.

Hope that helps,

Kevin

Poster: eragon
Dated: Monday October 9 2006 - 5:45:52 BST

Kevin, this is great! Thanks for taking the time to put all the examples together. We're almost there.

I've tried all three methods and each does get the form inside the menu. Here's the thing: I click on Search and get the form to show, but when I move my move down to enter something in the text field, the two radio buttons (one for Google search and one for searching on my site) disappear. But when I move my mouse back over search, they show up.

Poster: kevin3442
Dated: Monday October 9 2006 - 6:07:08 BST

Well now... that's just strange! It didn't do that in my tests, so I'm going to start by assuming it's related to something in your menu style (was it dropStyle?) or something in the css. I'll have a look when I get a chance. Meantime, you can check thos for any small errors.

Cheers,

Kevin

Poster: kevin3442
Dated: Monday October 9 2006 - 19:49:02 BST

Hi,

With the doctype that you're using, the menu is interpreting the text for the radio buttons as menu item text and therefore applying the oncolor property, which is defined in your dropStyle as oncolor="#fff";... white. In the html code for your search form, the table background color is #FFFFFF... also white. So, you're getting a mouseover effect making the text white on a white background.

Change the oncolor in dropStyle (to black would be my guess).

Cheers,

Kevin

Poster: eragon
Dated: Tuesday October 10 2006 - 5:16:55 BST

That did it! I have some further tweaking to do, but thanks to your keen eye I can at least leave functioning code on the page.

Thanks so much for your help, Kevin!

Poster: Jas
Dated: Friday October 20 2006 - 15:49:12 BST

Hi,

I have copy the exact code in Solution 1 and paste it into my test page, but the menu didnt show up, someone please shed some light, Im in the dark :cry:

Code:

aI("text=Search;showmenu=Search;align=center;itemwidth=80;status=Search;openonclick=1");

Code:

with(milonic=new menuname("Search")){ 
style=dropStyle; 
aI("text=`<FORM method=GET action=http://www.google.com/custom><TABLE bgcolor=#FFFFFF cellspacing=0 border=0><tr valign=top><td><A HREF=http://www.google.com/search><IMG SRC=http://www.google.com/logos/Logo_40wht.gif border=0 ALT=Google align=middle></A></td></tr><tr><td><INPUT TYPE=text name=q size=15 maxlength=255 value=><INPUT type=submit name=sa VALUE='Google Search'><INPUT type=hidden name=cof VALUE=S:http://www.familywebwatch.com;GL:0;AH:left;LH:60;L:http://www.familywebwatch.com/fww_banner.jpg;LW:201;AWFID:433b3358113fb253;><input type=hidden name=domains value='familywebwatch.com'><br><input type=radio name=sitesearch value=''> Search WWW <br /><input type=radio name=sitesearch value='familywebwatch.com' checked> Search fww.com</td></tr></TABLE></FORM>`;type=html;"); 
}

Poster: Ruth
Dated: Friday October 20 2006 - 16:10:35 BST

Hi,

We are going to need some more information. I just copied and added this to the downloaded menu and it works fine, so we need to see your page to see why you are not getting the form.

Ruth

Poster: Jas
Dated: Friday October 20 2006 - 16:25:30 BST

Wow, you are quick, thanks

. I paste the call out in the main menu and the search form at the bottom.

Code:

fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;




with(menuStyle=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;
align="left";
fontfamily="Verdana, Tahoma, Arial";
fontsize="100%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#eeeeee";
offcolor="#000000";
onbgcolor="#ddffdd";
oncolor="#000099";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#999999";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;

}

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
top=135;
orientation="horizontal";
style=menuStyle;
followscroll=1;
screenposition="center";
aI("text=>>>;");
aI("text=Trang Nhà;url=http://www.domain.com/forum/;");
aI("showmenu=Forum;text=Diễn Đàn;url=http://domain.com/forum/index.php?act=idx;");
aI("showmenu=Entertain;text=Giải Trí;");
aI("showmenu=Helper;text=Dịch Vụ;");
aI("text=Đăng Nhập;url=http://domain.com/forum/index.php?act=Login&CODE=00;");
aI("text=Search;showmenu=Search;align=center;itemwidth=80;status=Search;openonclick=1");
}

with(milonic=new menuname("Forum")){
overflow="scroll";
style=menuStyle;
aI("text=Thông Báo;url=http://domain.com/forum/index.php?showforum=16;")
aI("text=Hướng Dẫn - Thắc Mắc - Ý Kiến;url=http://domain.com/forum/index.php?showforum=17;")
aI("text=Kết Bạn/Chào Hỏi/Nhắn Tin;url=http://domain.com/forum/index.php?showforum=15;")
aI("text=Nhỏ To Tâm Sự;url=http://domain.com/forum/index.php?showforum=9;")
aI("showmenu=GiaiTri;text=Giải Trí;url=http://domain.com/forum/index.php?showforum=45;")
aI("text=Sức Khỏe va Làm Đẹp;url=http://domain.com/forum/index.php?showforum=24;")
aI("showmenu=TheGioi;text=Vòng Quanh Thế Giới;url=http://domain.com/forum/index.php?showforum=50;")
aI("text=Nhật Ký - Tùy Bút;url=http://domain.com/forum/index.php?showforum=63;")
aI("text=Thảo Luận;url=http://domain.com/forum/index.php?showforum=25;")
aI("showmenu=Tho;text=Thơ;url=http://domain.com/forum/index.php?showforum=40;")
aI("showmenu=Truyen;text=Truyện;url=http://domain.com/forum/index.php?showforum=37;")
aI("showmenu=VanChuong;text=Văn Chương;url=http://domain.com/forum/index.php?showforum=73;")
aI("text=Văn Hóa/Lịch Sử;url=http://domain.com/forum/index.php?showforum=76;")
aI("showmenu=NhacVN;text=Nhạc Việt Nam;url=http://domain.com/forum/index.php?showforum=12;")
aI("showmenu=NhacHN;text=Nhạc Hải Ngoại;url=http://domain.com/forum/index.php?showforum=13;")
aI("showmenu=DienAnh;text=Điện Ảnh;url=http://domain.com/forum/index.php?showforum=22;")
aI("text=Chia Sẻ Phần Mềm;url=http://domain.com/forum/index.php?showforum=18;")
aI("text=Yêu Cầu Phần Mềm;url=http://domain.com/forum/index.php?showforum=19;")
aI("text=Cafe Thế Kỷ;url=http://domain.com/forum/index.php?showforum=20;")

}

with(milonic=new menuname("GiaiTri")){
style=menuStyle;
aI("text=Đố Vui;url=http://domain.com/forum/index.php?showforum=70;");
aI("text=Trò Chơi;url=http://domain.com/forum/index.php?showforum=71;");
}

with(milonic=new menuname("TheGioi")){
style=menuStyle;
aI("text=Tin Tức;url=http://domain.com/forum/index.php?showforum=61;");
aI("text=Documentation (Tài Liệu);url=http://domain.com/forum/index.php?showforum=69;");
aI("text=Du Lịch;url=http://domain.com/forum/index.php?showforum=62;");
}

with(milonic=new menuname("Tho")){
style=menuStyle;
aI("text=Thi Thơ Đối Đáp;url=http://domain.com/forum/index.php?showforum=2;");
aI("text=Thơ Tình;url=http://domain.com/forum/index.php?showforum=3;");
aI("text=Thơ Sưu Tầm;url=http://domain.com/forum/index.php?showforum=4;");
}

with(milonic=new menuname("Truyen")){
style=menuStyle;
aI("text=Thành Viên A-L Sáng Tác;url=http://domain.com/forum/index.php?showforum=44;");
aI("text=Truyện Đồng Tính Sưu Tầm;url=http://domain.com/forum/index.php?showforum=42;");
aI("text=Truyện Dị Tính Sưu Tầm;url=http://domain.com/forum/index.php?showforum=64;");
}

with(milonic=new menuname("VanChuong")){
style=menuStyle;
aI("text=Ngôn Ngữ Học;url=http://domain.com/forum/index.php?showforum=72;");
aI("text=Lời Hay Ý Đẹp - Câu Chuyện Cát Đá;url=http://domain.com/forum/index.php?showforum=23;");
aI("text=Tác Giả Tác Phẩm;url=http://domain.com/forum/index.php?showforum=75;");
}

with(milonic=new menuname("NhacVN")){
style=menuStyle;
aI("text=Phòng Thâu;url=http://domain.com/forum/index.php?showforum=54;");
}

with(milonic=new menuname("NhacHN")){
style=menuStyle;
aI("text=Classical;url=http://domain.com/forum/index.php?showforum=51;")
aI("text=Instrumental;url=http://domain.com/forum/index.php?showforum=52;")
aI("text=Other Genres;url=http://domain.com/forum/index.php?showforum=53;")
}

with(milonic=new menuname("DienAnh")){
style=menuStyle;
aI("text=Phim Đồng Tính (Only);url=http://domain.com/forum/index.php?showforum=47;")
aI("text=Các Thể Loại Khác;url=http://domain.com/forum/index.php?showforum=48;")
}

with(milonic=new menuname("Entertain")){
style=menuStyle;
aI("text=Blogs;url=http://domain.com/forum/index.php?autocom=blogs;");
aI("text=Chat;url=http://domain.com/forum/chat/flashchat.php;");
aI("text=Hình Ảnh;url=http://domain.com/forum/index.php?act=module&module=gallery;");
aI("text=Game;url=http://domain.com/forum/index.php?autocom=arcade;");
aI("text=Media;url=http://domain.com/forum/index.php?act=mlite;")
aI("text=Thời Tiết;url=http://domain.com/forum/index.php?act=weather;")
}

with(milonic=new menuname("Helper")){
style=menuStyle;
aI("text=Nội Qui;url=http://domain.com/forum/index.php?act=boardrules;")
aI("text=Trợ Giúp;url=http://domain.com/forum/index.php?act=Help;");
aI("text=Tìm Kiếm;url=http://domain.com/forum/index.php?act=Search&f=;");
aI("text=Danh Sách;url=http://domain.com/forum/index.php?act=Members;")
aI("text=Lịch;url=http://domain.com/forum/index.php?act=calendar;")
aI("image=http://www.milonic.com/imagepack/images/separators/cube_green.gif;")
aI("text=Bài Viết Mới;url=http://domain.com/forum/index.php?act=Search&CODE=getnew;")
aI("text=Thông Tin;url=http://domain.com/forum/index.php?act=Online&CODE=listall&sort_key=click;")
}

with(milonic=new menuname("Search")){ 
style=dropStyle; 
aI("text=`<FORM><TABLE><tr><td><A><IMG></A></td></tr><tr><td><INPUT><INPUT><INPUT><input><br><input> Search WWW <br><input> Search fww.com</td></tr></TABLE></FORM>`;type=html;"); 
}

drawMenus();

Poster: Ruth
Dated: Friday October 20 2006 - 17:11:07 BST

Hi,

Your problem is the style: style=dropStyle;

You have no dropStyle, change that to menuStye which is what you have and it works fine.

Ruth

Poster: Jas
Dated: Friday October 20 2006 - 18:37:19 BST

IT work, thank you very much.

my embedded search box doesn't show in IE

Poster: Shannon Leung
Dated: Tuesday November 7 2006 - 22:53:47 GMT

Hi all,

I have embedded a search box as one of submenu item. It shows perfectly in FireFox, but not in IE. I have the runtime error in IE. Does anyone have any idea??

Thanks. :roll:

Poster: John
Dated: Wednesday November 8 2006 - 14:01:51 GMT

Shannon,

Please start a new topic for this problem, and provide us with a URL. We can't help you without seeing the situation; e.g., what version of the menu, IE, FF, etc.

Industrial Strength JavaScript and DHTML Menus

Embedding search in a menu

my embedded search box doesn't show in IE