Embedding search in a menu

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
eragon
Advanced
Advanced
Posts: 21
Joined: Sat Feb 26, 2005 6:29 am

Embedding search in a menu

Post by eragon »

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: Select all

<FORM method=GET action=http://www.google.com/custom>
<TABLE bgcolor=#FFFFFF cellspacing=0 border=0>
<tr valign=top><td>
<A href="http://websites.milonic.com/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: Select all

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.

:)
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

Hi,

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

Code: Select all

aI("text=...google form code...;type=html;");
Kevin
eragon
Advanced
Advanced
Posts: 21
Joined: Sat Feb 26, 2005 6:29 am

Post by eragon »

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

Code: Select all

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://websites.milonic.com/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.
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

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: Select all

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://websites.milonic.com/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: Select all

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: Select all

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://websites.milonic.com/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: Select all

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://websites.milonic.com/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: Select all

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
eragon
Advanced
Advanced
Posts: 21
Joined: Sat Feb 26, 2005 6:29 am

Post by eragon »

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.
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

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
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

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
eragon
Advanced
Advanced
Posts: 21
Joined: Sat Feb 26, 2005 6:29 am

Post by eragon »

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!
Jas
Beginner
Beginner
Posts: 3
Joined: Fri Oct 20, 2006 3:24 pm

Post by Jas »

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: Select all

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

Code: Select all

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://websites.milonic.com/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;"); 
}
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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
Jas
Beginner
Beginner
Posts: 3
Joined: Fri Oct 20, 2006 3:24 pm

Post by Jas »

Wow, you are quick, thanks :D . I paste the call out in the main menu and the search form at the bottom.

Code: Select all

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://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();


Last edited by Jas on Fri Oct 20, 2006 6:36 pm, edited 1 time in total.
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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
Jas
Beginner
Beginner
Posts: 3
Joined: Fri Oct 20, 2006 3:24 pm

Post by Jas »

IT work, thank you very much.
Shannon Leung
Beginner
Beginner
Posts: 3
Joined: Tue Nov 07, 2006 11:49 pm

my embedded search box doesn't show in IE

Post by Shannon Leung »

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:
User avatar
John
 Team
 Team
Posts: 5967
Joined: Sun May 19, 2002 8:23 pm
Location: Phoenix, AZ
Contact:

Post by John »

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.
Post Reply