Just read that topic. Very nice effect, and nice && helpful code
improvements! You guys are great.
On Sep 21, 2:18 am, Karl Swedberg <k...@englishrules.com> wrote:
> Sure.
>
> // find all "a" elements within $navigation (which is a variable for $
> ('#navigation')
> $navigation.find('a')
> // bind two events to those links: mouseenter and mouseleave. pass the
> event object as an argument to the anonymous function
> .bind('mouseenter mouseleave', function(event) {
> // if the ID of the link starts with "nav" ...
> if (this.id.indexOf('nav') === 0) {
> // store a string in the id variable. the string will be an id
> selector of the corresponding element within #bodycopy.
> // the string starts with "#" and ends with the ID of the link without
> the opening "nav"
> // for example, if the link's ID is "navservices," the id variable
> will be "#services"
> var id = '#' + this.id.replace(/^nav/,'');
> // trigger the event (either mouseenter or mouseleave) for the element
> that matches the selector represented by id.
> // So, when the user's mouse enters <a href="" id="navservices"></a>,
> it will trigger mouseenter for <div id="services"></div>.
> //And we've already bound mouseenter and mouseleave for those divs, so
> we're all set.
> $(id).trigger(event.type);
> }
> });
>
> --Karl
>
> ____________
> Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> On Sep 20, 2009, at 12:59 PM, alienfactory wrote:
>
>
>
> > Thanks Karl
>
> > That was more then i expected.
>
> > However the $navigation.find('a') section is a little over my head
> > could add a few comments to that one to help me understand it
>
> > Terry
>
> > On Sep 20, 8:49 am, Karl Swedberg <k...@englishrules.com> wrote:
> >> Here is another way you could do it:
>
> >> var bgColors = {
> >> services: '#8ac2b7',
> >> vision: '#9e97ca',
> >> approach: '#e5b120',
> >> team: '#cf1858'
>
> >> };
>
> >> var $navigation = $('#navigation');
>
> >> $('#bodycopy').children()
> >> .bind('mouseenter', function() {
> >> $(this).siblings().stop().fadeTo('slow', .2);
> >> $navigation.stop().animate({backgroundColor: bgColors[this.id]},
> >> 500);
> >> })
> >> .bind('mouseleave', function() {
> >> $(this).siblings().stop().fadeTo('slow', 1);
> >> $navigation.stop().animate({backgroundColor: '#404040'}, 500);
> >> });
>
> >> $navigation.find('a')
> >> .bind('mouseenter mouseleave', function(event) {
> >> if (this.id.indexOf('nav') === 0) {
> >> var id = '#' + this.id.replace(/^nav/,'');
> >> $(id).trigger(event.type);
> >> }
> >> });
>
> >> --Karl
>
> >> ____________
> >> Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> >> On Sep 20, 2009, at 10:51 AM, alienfactory wrote:
>
> >>> i was asking about javascript/jquery not html 101 but that is cool
> >>> though and yes that was snarky. LOL
>
> >>> No worries at least you are trying to help thanks
>
> >>> I dont see where you are fading the addtional div see link above for
> >>> sample
> >>> you focused on the navigavtion but i have 4 divs when mousing over
> >>> one
> >>> of them the other divs should fadeout
>
> >>> How do you select additional div.
>
> >>> Many Thanks
>
> >>> On Sep 20, 4:17 am, "ryan.j" <ryan.joyce...@googlemail.com> wrote:
> >>>> for fear of offending you further, i apologise in advance for
> >>>> posting
> >>>> code. personally i'd be tempted to call 'test1(this)' on the
> >>>> mouseover
> >>>> and mouseout events and have it do something like...
>
> >>>> function test1(t) {
> >>>> var c = $(t).css('background-color')
> >>>> var o = '1'
> >>>> if ( !$(t).hasClass('nav-active') )
> >>>> o = '.2'
> >>>> $('.nav-active').removeClass('nav-active')
>
> >>>> $(t).addClass('nav-active')
> >>>> .siblings()
> >>>> .stop()
> >>>> .fadeTo('slow', o);
>
> >>>> $('#navigation').stop()
> >>>> .animate({ backgroundColor: c }, 500);
>
> >>>> }
>
> >>>> this is literally back-of-fagpacket code, so clearly it could be
> >>>> improved and/or tested. assigning a class just to track the opacity
> >>>> state probably isn't the greatest idea ever but it does mean you
> >>>> have
> >>>> easy access to the currently selected menu item.
>
> >>>> On Sep 20, 11:25 am, "ryan.j" <ryan.joyce...@googlemail.com> wrote:
>
> >>>>> i wasn't being snarky mate, just that you phrased your question
> >>>>> like a
> >>>>> homework assignment!
>
> >>>>> besides, i thought i /was/ answering your question tbh :S
>
> >>>>> On Sep 20, 3:14 am, alienfactory <alienfacto...@gmail.com> wrote:
>
> >>>>>> wow really! not sure what to say about that.
>
> >>>>>> Here is a development link to the actual
> >>>>>> projecthttp://alienfactory.com/vision1/
> >>>>>> if any one would like to help out on the javascript jquery
> >>>>>> question
> >>>>>> above
>
> >>>>>> Thanks in advance for any help
