Including search boxes

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

Including search boxes

Poster: wuscheck
Dated: Wednesday January 13 2010 - 8:22:20 GMT

I found several postings for this topic but I've got two additional questions concerning search boxes.

I place a search box into the main menu:

Code:

$mmMenu->addItemFromText("text=`<form method=get action=http://search.atomz.com/search/>....<input size='25' name='sp_q' value='Suche' onblur='if(!this.value) this.value = this.defaultValue;' onKeyPress='return submitenter(this,event)'>...</form>`;

So far so good, but I found no way to include the following code because of the " and '. The code normally follows after the value='Suche'.

Code:

onClick="if(this.value == this.defaultValue) this.value = ' ';"

And the next question:
How can I put a background image behind the form? Normally I would do it like this, but it won't work:

Code:

style="background-image:url(http://www.hsghanau-handball.de/menu/images/leer.png); background-repeat:repeat-x; background-position:top"

I think it is a problem with the place because I put the style-thing into the <form>... where is the right place for it?

Thanks in advance...

wuscheck

Re: Including search boxes

Poster: wuscheck
Dated: Wednesday January 13 2010 - 9:49:36 GMT

I solved the style-problem by myself. The only problem left is the first one with the onclick...

Re: Including search boxes

Poster: wuscheck
Dated: Wednesday January 13 2010 - 12:29:41 GMT

After some code work I found out that the IE and Firefox browser display a form in the main menu in a different way.

This is the correct way but without a form tested with IE6, IE7 or FF3.5

Now the menu with the form tested with IE6 and IE7. The distance between the whole menu and the blue stripe at the top of the pic is smaller, the form is on the upper margin and the date at the bottom of the menu.

Now the menu with the form tested with FF 3.5.2. The distance between the whole menu and the blue stripe at the top of the pic is the same as the example before, the form and the date is now on the bottom of the menu.

The right one: The distance between menu and the blue stripe from example 1 and form/date in the middle of the menu.

Do you have an idea to fix the problem(s)?

wuscheck

Re: Including search boxes

Poster: Ruth
Dated: Friday January 22 2010 - 21:18:57 GMT

Hi,

I am working on this. It is something with how IE treats forms. I'll post back later today with anything I find. But, if you want to see what's up, take that page and remove the form then take a look at how that area looks. It's as if IE adds some kind of line below where the form is. :lol:

However, I've done so much as I tested [though I tried to undo each thing], I've got to start at the beginning and make sure I haven't done something weird or left something I tried in it.

Ruth

Re: Including search boxes

Poster: Ruth
Dated: Friday January 22 2010 - 22:00:07 GMT

Hi,

I found the problem. It seems that IE adds extra whitespace or line breaks with regard to forms. So, changing your form css solves all the problems, including the time code placement.

Code:

FORM {
   
margin:0;
padding:0;
}

Ruth

Re: Including search boxes

Poster: wuscheck
Dated: Saturday January 23 2010 - 21:23:39 GMT

Hi Ruth,

thank you for your support...

Now I've got the same difference in every browser... it looks now like example # 3...

The distance between the whole menu and the blue stripe at the top of the pic is to small as in example #1 (double arrow). The form and the date is now on the bottom of the menu in every browser.

Re: Including search boxes

Poster: Ruth
Dated: Saturday January 23 2010 - 21:56:45 GMT

Hi,

I just went to the site and your menu.css file still has

Code:

form {
padding-left: 5px;
padding-right: 5px;
}

Do you have a test page where you are seeing what you showed me, so I can look at that page and find out what is going on?

Ruth

Re: Including search boxes

Poster: wuscheck
Dated: Saturday January 23 2010 - 22:57:43 GMT

Here it is...

http://www.hsghanau-handball.de/shop/index.php

Re: Including search boxes

Poster: Ruth
Dated: Sunday January 24 2010 - 2:14:15 GMT

Hi,

Well, that page is different from the main page which had the form stuff in the page. So, I have fixed it, but I will have to explain some things.

I saw that you had the itemheight in the main menu set to 40px when the actual item images are only 30. When you put that 40 px in there that is going to change how all the things work, with regard to the form and the date as to placement as the form and the date are not images. It also means that the submenus are opening what looks like 10px down from the main menu. If you had the 40px because of where you wanted the menu to be placed [that is what I assumed, but assuming isn't the best thing, anyway...] using that assumption, I made some changes, got the menu to be in the same place [I believe] and got it to look the same in FF and IE7. So, try pasting this as your menu table and see if this works.

Code:

            <table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="right" valign="top"><img src="http://www.hsghanau-handball.de/menu/images/navi_links.png" border="0"></td>
<td align="center" valign="top">
                  <SCRIPT>
with(milonic=new menuname("Main Menu")){
style=menuStyle;
alwaysvisible="true";
orientation="horizontal";
position="relative";
itemwidth="120";
itemheight="34";
align="center";
rawcss="background-image:url(http://www.hsghanau-handball.de/menu/images/leer.png);background-repeat:repeat-x;";
zindex="9";
aI("showmenu=Aktive;image=http://www.hsghanau-handball.de/menu/images/aktive.png;overimage=http://www.hsghanau-handball.de/menu/images/aktive_hover.png;imagealign=center;imageposition=top;");
aI("showmenu=Jugend;image=http://www.hsghanau-handball.de/menu/images/jugend.png;overimage=http://www.hsghanau-handball.de/menu/images/jugend_hover.png;imagealign=center;imageposition=top;");
aI("showmenu=Infos;image=http://www.hsghanau-handball.de/menu/images/infos.png;overimage=http://www.hsghanau-handball.de/menu/images/infos_hover.png;imagealign=center;imageposition=top;");
aI("showmenu=Links;image=http://www.hsghanau-handball.de/menu/images/links.png;overimage=http://www.hsghanau-handball.de/menu/images/links_hover.png;imagealign=center;imageposition=top;");
aI("showmenu=Interaktiv;image=http://www.hsghanau-handball.de/menu/images/interaktiv.png;overimage=http://www.hsghanau-handball.de/menu/images/interaktiv_hover.png;imagealign=center;imageposition=top;");
aI("valign=top;text=`<form style='margin:0px;padding-top:5px;padding-right:5px;padding-bottom:7px;padding-left:5px' method='get' action='http://search.atomz.com/search/'><input size='25' name='sp_q' value='Suche' onblur='if(!this.value) this.value = this.defaultValue;' onKeyPress='return submitenter(this,event)'><input type='hidden' name='sp_a' value='sp10046190'><input type='hidden' name='sp_p' value='all'><input type='hidden' name='sp_f' value='ISO-8859-1'></form>`;type=form;");
aI("valign=middle;padding='1px 7px 5px 5px';text='+getMilonicDate()+';align=center;type=clock;itemwidth=68;");

}drawMenus();
</SCRIPT>
                </TD>
                <TD vAlign=top><IMG 
                  src="navi_rechts.png" 
            border=0></TD></TR> <TR>
                <TD vAlign=top align=right colspan=3><IMG 
                  src="transparent.gif" border=0 height=8 width=1></TD>
                </TR></TABLE>

Note that what I did was to add a table row below the one with the menu and inserted a transparent gif set to height=8. This along with the itemwidth=34 seems to place the menu correctly in IE6, 7, FF1.5, 2.0.0.18, 3.0.8, NN7.2, 9, Opera 9.5, 10, GoogleChrome 1+ the only one that has a problem is Safari for pc 4.0.4. I don't have the newest FF yet, am trying to figure how to get it without losing what I have. Anyway, try that and let me know if it is OK. If it isn't, I'll need to see the page on the web again, that's one problem with working on the desktop, sometimes it looks OK until it's on the web.

Ruth

Re: Including search boxes

Poster: wuscheck
Dated: Sunday January 24 2010 - 18:32:44 GMT

I'm so sorry, because it was the itemheight, I've changed it to 30 and everything looks fine. Thank you so much... shame on me :oops:

Re: Including search boxes

Poster: wuscheck
Dated: Tuesday January 26 2010 - 8:50:46 GMT

I've got one more question concerning the menu. After loading the page, the corner pics on the left and right side of the menu are to big. After a mouseover the pics moved into the correct size of 9x30px. Do you have any idea about that?

Here is the code:

Code:

<table border="0" cellpadding="0" cellspacing="0" align="center" id="menu">
<tr>
<td width="9" align="right" valign="top"><img src="http://www.hsghanau-handball.de/menu/images/navi_links.png" width="9" height="30" border="0"></td>
<td align="center" valign="top">

   <?
           $mmMenu=new mMenu();
      $mmMenu->style="menuStyle";
      $mmMenu->alwaysvisible="true";
      $mmMenu->orientation="horizontal";
      $mmMenu->position="relative";
                $mmMenu->itemwidth=120;
                $mmMenu->itemheight=30;
                $mmMenu->align="center";
                $mmMenu->rawcss="background-image:url(http://www.hsghanau-handball.de/menu/images/leer.png);background-repeat:repeat-x;";
                $mmMenu->zindex="9";
      
      $mmMenu->addItemFromText("showmenu=Aktive;image=http://www.hsghanau-handball.de/menu/images/aktive.png;overimage=http://www.hsghanau-handball.de/menu/images/aktive_hover.png;imagealign=center;imageposition=top;");
         $mmMenu->addItemFromText("showmenu=Jugend;image=http://www.hsghanau-handball.de/menu/images/jugend.png;overimage=http://www.hsghanau-handball.de/menu/images/jugend_hover.png;imagealign=center;imageposition=top;");
         $mmMenu->addItemFromText("showmenu=Infos;image=http://www.hsghanau-handball.de/menu/images/infos.png;overimage=http://www.hsghanau-handball.de/menu/images/infos_hover.png;imagealign=center;imageposition=top;");
         $mmMenu->addItemFromText("showmenu=Links;image=http://www.hsghanau-handball.de/menu/images/links.png;overimage=http://www.hsghanau-handball.de/menu/images/links_hover.png;imagealign=center;imageposition=top;");
         $mmMenu->addItemFromText("showmenu=Interaktiv;image=http://www.hsghanau-handball.de/menu/images/interaktiv.png;overimage=http://www.hsghanau-handball.de/menu/images/interaktiv_hover.png;imagealign=center;imageposition=top;");         
$mmMenu->addItemFromText("text=`<form id='menu' method='get' action='http://search.atomz.com/search/'><input size='25' name='sp_q' value=''><input type='hidden' name='sp_a' value='sp10046190'><input type='hidden' name='sp_p' value='all'><input type='hidden' name='sp_f' value='ISO-8859-1'></form>`;type=form;");
$mmMenu->addItemFromText("text='+getMilonicDate()+';align=center;type=clock;itemwidth=68;");
$mmMenu->createMenu("Main Menu");
      drawMenus();
?>
</td>
<td width="9" align="left" valign="top"><img src="http://www.hsghanau-handball.de/menu/images/navi_rechts.png" width="9" height="30" border="0"></td>
</tr>
</table>

Thank you so much for the brilliant support.

wuscheck