I see. Thanks.
On Wed, Dec 10, 2008 at 1:08 PM, Andy Matthews <[EMAIL PROTECTED]>wrote:
> If you're going to have the "same" code in more than one place, you might
> consider creating a function for that. Something like this maybe:
>
> function mouseExpand(source,target) {
> $('#' + source).hover(function(){
> $('#' + target).show();
> },function(){
> $('#' + target).hide();
> });
> }
>
> and you'd call it like this:
>
> mouseExpand('MSFree','menu2');
>
>
>
> andy
>
>
> ------------------------------
> *From:* jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] *On
> Behalf Of *David Blomstrom
> *Sent:* Wednesday, December 10, 2008 2:04 PM
> *To:* jquery-en@googlegroups.com
> *Subject:* [jQuery] Re: Need Open/Shut Function
>
> Yes, it does work.
>
> I just have a couple follow up questions. When I first load the page, the
> element that's supposed to be hidden is displayed. Is there a way to modify
> it so that it doesn't display until someone mouses over the yellow "MS-Free"
> thingy?
>
> I put a working example online at http://www.geobop.org/Test.php
>
> Also, suppose I wanted to add a similar function, named Stuff, for example.
> Would I just add a separate script, as below?:
> $(\'#MSFree\').hover(function(){
> // do something on mouse over
> $(\'#menu2\').show();
> },function(){
> // do something on mouse out
> $(\'#menu2\').hide();
> });
>
> $(\'#Stuff\').hover(function(){
> // do something on mouse over
> $(\'#menu3\').show();
> },function(){
> // do something on mouse out
> $(\'#menu3\').hide();
> });
> Thanks.
> On Wed, Dec 10, 2008 at 11:39 AM, David Blomstrom <
> [EMAIL PROTECTED]> wrote:
>
>> No, it isn't working. I deleted the JavaScript that previously controlled
>> it, then I looked for any CSS styles that might have been interfering with
>> it.
>>
>> I looked at the page with the Firebug console, and it doesn't report any
>> errors. I know I'm conneced to my JQuery scripts because some JQuery table
>> sorting functions on the same page are working.
>>
>> I'll go back and take a fresh look at it in a moment.
>>
>> Thanks.
>>
>> On Wed, Dec 10, 2008 at 11:14 AM, Hector Virgen <[EMAIL PROTECTED]>wrote:
>>
>>> That looks good, did it work?
>>>
>>> -Hector
>>>
>>>
>>> On Wed, Dec 10, 2008 at 10:57 AM, David Blomstrom <
>>> [EMAIL PROTECTED]> wrote:
>>>
>>>> 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
>>>>
>>>
>>>
>>
>>
>> --
>> David Blomstrom
>> Writer & Web Designer (Mac, M$ & Linux)
>> www.geobop.org
>>
>
>
>
> --
> David Blomstrom
> Writer & Web Designer (Mac, M$ & Linux)
> www.geobop.org
>
--
David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org
