jQuery hide() and a normal form

Hello,

I created a new HTML document which appears a menu on the left side of the document:

<!DOCTYPE html>
<html lang="de">
  <head>
   <meta charset="utf-8" />
   <title>Test</title>
   <link rel="icon" type="image/x-icon" href="favicon.ico" />
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/dark-hive/jquery-ui.css" />
   <style>
   body {
   font-family: Arial;
   font-size: 10pt;
   width: 100%;
   height: 100%;
   margin: 0px;
   padding: 0px;
   }

   legend {
   font-size: 8pt;
   }

   h3 {
   font-variant: small-caps;
   font-weight: bold;
   }

   #launcher {
   position: absolute;
   left: 0px;
   top: 0px;
   height: 100%;
   width: 10px;
   z-index: 2;
   }

   #launcherClicker {
   position: absolute;
   display: none;
   background-color: gray;
   height: 100%;
   width: 100%;
   text-align: center;
   valign: middle;
   }

   #launcherContent {
   position: absolute;
   display: none;
   height: 100%;
   width: 200px;
   }

   #contentWrapper {
   position: absolute;
   width: 100%;
   height: 100%;
   margin: 0px;
   padding: 0px;
   z-index: 1;
   }

   #contentFrame {
   width: 100%;
   height: 99.5%;
   }

   .ui-accordion .ui-accordion-content {
   padding: 5px;
   }
   </style>
   <script type="text/javascript">

   $(document).ready(function() {

   $( ".accordion" ).accordion({
   collapsible: true,
   heightStyle: "content"
   });

   $('#launcher').mouseenter(function() {
   if ($('#launcherContent').css('display') != 'block') {
   $('#launcherClicker').css('display','block');
   }
   });

   $('#launcher').mouseleave(function() {
   $('#launcherClicker').css('display','none');
   });

   $('#launcherClicker').click(function() {
   $(this).css('display','none');
   $('#launcherContent').show('slide');
   //$('#launcherContent').css('display','block');
   });

   $('#launcherContent').mouseleave(function() {
   $(this).hide('slide');
   //$(this).css('display','none');
   });

   });




   </script>
  </head>
  <body>
   <div id="launcher">
   <div id="launcherContent">
   <div class="accordion">
   <h3>TEST 1</h3>
   <div>
   <fieldset>
   <legend>Test 1.1</legend>
   <select name="foo" size="1">
   <option>TEST TEST TEST</option>
   <option>TEST TEST TEST</option>
   <option>TEST TEST TEST</option>
   <option>TEST TEST TEST</option>
   <option>TEST TEST TEST</option>
   <option>TEST TEST TEST</option>
   <option>TEST TEST TEST</option>
   <option>TEST TEST TEST</option>
   </select>

   </fieldset>
   <fieldset>
   <legend>Test 1.2</legend>
   </fieldset>
   </div>
   <h3>TEST 2</h3>
   <div>
   <fieldset>
   <legend>Test 2.1</legend>
   </fieldset>
   <fieldset>
   <legend>Test 2.2</legend>
   </fieldset>
   <fieldset>
   <legend>Test 2.3</legend>
   </fieldset>
   <fieldset>
   <legend>Test 2.4</legend>
   </fieldset>
   <fieldset>
   <legend>Test 2.5</legend>
   </fieldset>
   <fieldset>
   <legend>Test 2.6</legend>
   </fieldset>
   <fieldset>
   <legend>Test 2.7</legend>
   </fieldset>
   <fieldset>
   <legend>Test 2.8</legend>
   </fieldset>
   </div>
   </div>
   </div>
   <div id="launcherClicker" title="Click me to open the menu..."> </div>
   </div>
   <div id="contentWrapper">
   <iframe frameborder="0" src="http://www.google.de" id="contentFrame" name="contentFrame"></iframe>
   </div>
  </body>
</html>

It works as follows:

1.) by moving the mouse to the left border of the page let appear the DIV #launcher
2.)
by clicking on it the actual menu #launcherContent appears via .show()
3.) by leaving the DIV #launcherContent the launcher disappears

Everything works fine and as intended except one:

The actual problem is another, the bad select element :(

<select name="foo" size="1">
      <option>TEST TEST TEST</option>
      <option>TEST TEST TEST</option>
      <option>TEST TEST TEST</option>
      <option>TEST TEST TEST</option>
      <option>TEST TEST TEST</option>
      <option>TEST TEST TEST</option>
      <option>TEST TEST TEST</option>
      <option>TEST TEST TEST</option>
</select>

When i click on it the select field and move the mouse over the options the launcher disappears. Sad :(

Is there a possibility to prevent these 'effect'?

I would be very thankfull if anyone could help me out of this prblem which let me scratch my head...

Special thanks & greetings from Berlin,

Phil

Topic Participants
crashme

jQuery hide() and a normal form

jQuery hide() and a normal form

Topic Participants

crashme