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 Swedberg
www.englishrules.com
www.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
