[jQuery] Re: Need Open/Shut Function

[Andy Matthews]

Just FYI, you can condense Hector's code into this:
 
$(\'#MSFree\').hover(function(){
    // do something on mouse over
    $(\'#menu2\').show();
},function(){
    // do something on mouse out
    $(\'#menu2\').hide();
});
 
It's a little more compact, and easier to read.
 
 
andy matthews

  _____  

From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of David Blomstrom
Sent: Wednesday, December 10, 2008 12:57 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Need Open/Shut Function



So should the code in my head section  look something like this?:

<script src="'.$BaseURL.'/1A/js/jquery-1.2.6.min.js"
type="text/javascript"></script>
<script src="'.$BaseURL.'/1A/js/tablesorter/jquery.tablesorter.js"
type="text/javascript"></script>
<script language="JavaScript" type="text/JavaScript">
 $(document).ready(function() 
  { 
  $("#myTable").tablesorter({ widgets: [\'zebra\']} );



$(\'#MSFree\').mouseover(function()
{
  $(\'#menu2\').show();
});

$(\'#MSFree\').mouseout(function()
{
  $(\'#menu2\').hide();
});



  }
 );
</script>


...or do I need to place the code you gave me in the body somehow?

On Wed, Dec 10, 2008 at 10:51 AM, Hector Virgen <[EMAIL PROTECTED]> wrote:



The .show() and .hide() functions are on-demand functions -- they'll happen
immediately when the code is called. What you need to do is observe the
user's actions and show/hide the div based on what they are doing.

For that, you can use .mouseover() and .mouseout with callback functions.
The callback functions will be called when certain events happen, and that
is where you place the .hide() and .how() code:

// Untested...
$('#MSFree').mouseover(function()
{
    $('#menu2').show();
});

$('#MSFree').mouseout(function()
{
    $('#menu2').hide();
});

-Hector 



On Wed, Dec 10, 2008 at 10:35 AM, David Blomstrom
<[EMAIL PROTECTED]> wrote:


Here's a condensed version of my code...
<div class="collapsible" id="MSFree">
  <div id="trigger2" class="trigger"><span>V</span>Microsoft-Free</div>
</div>
<div id='menu2' class='menu'">This website was designed....</div>

So I would convert your code to this?:
$('#MSFree').show();
$('#MSFree').hide();
Would I just add that to the JQuery code in my head section, and the script
would then open whenever someone mouses over it?
Thanks.
On Wed, Dec 10, 2008 at 10:20 AM, Andy Matthews <[EMAIL PROTECTED]>
wrote:


jQuery has built in show() / hide() methods. The syntax would look something
like this:
 
$('#someElement').show();
$('#someElement').hide();
 
Where someElement was a container with an ID.
 
 
andy

  _____  

From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of David Blomstrom
Sent: Wednesday, December 10, 2008 12:11 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Need Open/Shut Function



I've been looking for JQuery examples pages and started browsing through
plugins, but I haven't found what I'm looking for yet, so I wondered if
anyone here could make some recommendations.

If you visit my web page at http://www.geosymbols.org/World/Arizona/, you'll
see a "Microsoft-Free" box in the top right corner of the page. Hovering
over it with your mouse causes a small display to appear.


At the end of the article is a little Links/Books image with similar
behavior (though there's currently no content to display).

What JQuery function, plugin or whatever should I use to duplicate those
functions? I'd like to be able to style it so that it looks pretty much as
it does now.

Also, on my World home page at http://www.geosymbols.org/World I have links
to a series of JavaScript pop-up boxes with links to various nations. It's a
pretty simple, straightforward JavaScsript. I just wondered if there are any
JQuery functions that would somehow enhance those popups.

So far I'm using a JQuery table sorter plugin and "zebra stripes" widget. My
code looks like this:

<script src="'.$BaseURL.'/1A/js/jquery-1.2.6.min.js"
type="text/javascript"></script>
<script src="'.$BaseURL.'/1A/js/tablesorter/jquery.tablesorter.js"
type="text/javascript"></script>
<script language="JavaScript" type="text/JavaScript">
 $(document).ready(function() 
  { 
  $("#myTable").tablesorter({ widgets: [\'zebra\']} ); 
  }
 );
</script>



Thanks.




-- 
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org






-- 
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org