[jQuery] Re: Basic problem - using .click and .hover together on elements
Thank you very much for your help Eric - and for replying so quickly.
All I had left to do was to give the default menu item the class of
"clicked" and it works just how I want it. Thanks again.
On Oct 11, 8:24 pm, Eric <[EMAIL PROTECTED]> wrote:
> Great question, jez_p!
>
> You've described a common problem. You'll be happy to know that
> there's a solution, _and_ that it will help you out in a number of
> other ways as you move forward. The solution involves separating the
> 'clicked' and 'hovered' states, and then specifying that the link is
> red on either 'clicked' or 'hovered'. We're going to move this code
> over to use CSS classes, and we'll use a couple of the following
> jQuery functions ( seehttp://docs.jquery.com/Attributes):
> - addClass()
> - removeClass()
>
> $('li a').hover (function() {
> $(this).addClass('hover');
> },
> function(){
> $(this).removeClass('hover');
> }
> );
>
> $('li a').click (function() {
> $('li a.clicked').removeClass('clicked');
> $(this).addClass('clicked');
> });
>
> and in your CSS file:
>
> /* normal nav link */
> li a {color: black }
>
> /* highlighted nav link */
> li a.hover, li a.clicked { color: red }
>
> One nice thing is that your style is separated form your code, so you
> can hand it off to a designer who may not know Javascript. Also, you
> can easily assign special styles to either hover or clicked separately
> if you want.
>
> -E
>
> On Oct 11, 2:29 pm, jez_p <[EMAIL PROTECTED]> wrote:
>
> > I'm sure this has a very simple solution, but I am just starting out
> > and can't work it out, so I would appreciate it if anyone could give
> > me some help.
>
> > I have a basic text menu, which when the menu items are clicked the
> > page content changes. What I want is for the menu item text to change
> > color when hovered over - from black to red, and for the menu item
> > that has been clicked to be red. The hovering part I have is:
>
> > $('li a').hover (function() {
> > $(this).css({color:'red'});
> > },
> > function(){
> > $(this).css({color:'black'});
> > }
> > );
>
> > For the clicking part I have:
>
> > $('li a').click (function() {
> > $('li a').css({color:'black'}); //to reset the menu items
> > to
> > black
> > $(this).css({color:'red'});
>
> > });
>
> > The problem I have is that the mouse pointer is still hovering over
> > the menu item after it has been clicked, and when it is moved away it
> > resets all the menu items back to black - whereas I want it to be red.
>
> > I hope I have explained myself clearly.
[jQuery] Basic problem - using .click and .hover together on elements
I'm sure this has a very simple solution, but I am just starting out
and can't work it out, so I would appreciate it if anyone could give
me some help.
I have a basic text menu, which when the menu items are clicked the
page content changes. What I want is for the menu item text to change
color when hovered over - from black to red, and for the menu item
that has been clicked to be red. The hovering part I have is:
$('li a').hover (function() {
$(this).css({color:'red'});
},
function(){
$(this).css({color:'black'});
}
);
For the clicking part I have:
$('li a').click (function() {
$('li a').css({color:'black'}); //to reset the menu items to
black
$(this).css({color:'red'});
});
The problem I have is that the mouse pointer is still hovering over
the menu item after it has been clicked, and when it is moved away it
resets all the menu items back to black - whereas I want it to be red.
I hope I have explained myself clearly.
[jQuery] Re: Targeting an element with multiple classes
Cheers Carl. I resolved this in an earlier post (I reposted due to the
post-appearing lag, and then not seeing my original post) - I had
tried this first, but couldn't get it to work due to a stupid mistake.
Thanks anyways.
On Jul 2, 9:44 pm, Carl Von Stetten <[EMAIL PROTECTED]> wrote:
> jez_p
>
> Try $('.green')
>
> This will select only elements that have the "green" class assigned,
> even if other classes are also assigned to the same elements.
>
> Carl
>
> jez_p wrote:
> > How do I target a specific class when elements may belong to multiple
> > classes?
>
> > For example:
>
> > blah blah blah
> > blah blah blah
> > blah blah blah
>
> > How would I select the elements with the class of "green"?
>
> > I know that
>
> > 'p[class="big green"]' &
> > 'p[class="small green"]'
>
> > would work, but I cannot work out how I can just specify wherever
> > there is a class of "green", and not have to include the other classes
> > also.
>
> > Thanks in advance.
[jQuery] Re: [validate] jquery.delegate.js is missing?
Thanks for replying Jörn. I was confused by the line: jquery.delegate.js - special event delegation, required which is under the heading of "Javascript files used" at the bottom of the demo page: http://jquery.bassistance.de/validate/demo/ , which is also in the demo folder in the download. Cheers, Jez On Jul 2, 8:03 pm, "Jörn Zaefferer" <[EMAIL PROTECTED]> wrote: > Hi Jez, > > the delegate plugin is bundled within jquery.validate.js since the > 1.2.1 release (early Februar this year). You don't have to manually > include it. > > It sounds like you got an outdated release, where did you find that? > The current plugin page doesn't mention the dependency anywhere > (http://plugins.jquery.com/project/validate) > > Jörn > > On Wed, Jul 2, 2008 at 5:22 PM, jez_p <[EMAIL PROTECTED]> wrote: > > > Thank you for your reply John. > > > I thought the author might appreciate the heads up that is not > > included within the package when it is linked to within the included > > demo/index.html, implying that it should have been included. > > > OK, so now I have it, do I simply put in the same folder as my > > jquery.js, or do i have to do anything else with it? > > > Thanks, > > > Jez > > > On Jul 2, 3:57 pm, "John Resig" <[EMAIL PROTECTED]> wrote: > >> Popping "jquery.delegate.js" into Google provides > >> this:http://dev.jquery.com/export/5759/trunk/plugins/delegate/jquery.deleg... > > >> --John > > >> On Wed, Jul 2, 2008 at 9:17 AM, jez_p <[EMAIL PROTECTED]> wrote: > > >> > I should just explain that I'm very new to jQuery. That out of the > >> > way, I have downloaded the validation plug-in which states that > >> > jquery.delegate.js is required. It is not included within the package, > >> > so where can I obtain it from, and once I have it how should I include > >> > it within my project? > > >> > Thanks, > > >> > Jez
[jQuery] Re: [validate] jquery.delegate.js is missing?
Thank you for your reply John. I thought the author might appreciate the heads up that is not included within the package when it is linked to within the included demo/index.html, implying that it should have been included. OK, so now I have it, do I simply put in the same folder as my jquery.js, or do i have to do anything else with it? Thanks, Jez On Jul 2, 3:57 pm, "John Resig" <[EMAIL PROTECTED]> wrote: > Popping "jquery.delegate.js" into Google provides > this:http://dev.jquery.com/export/5759/trunk/plugins/delegate/jquery.deleg... > > --John > > On Wed, Jul 2, 2008 at 9:17 AM, jez_p <[EMAIL PROTECTED]> wrote: > > > I should just explain that I'm very new to jQuery. That out of the > > way, I have downloaded the validation plug-in which states that > > jquery.delegate.js is required. It is not included within the package, > > so where can I obtain it from, and once I have it how should I include > > it within my project? > > > Thanks, > > > Jez
[jQuery] [validate] jquery.delegate.js is missing?
I should just explain that I'm very new to jQuery. That out of the way, I have downloaded the validation plug-in which states that jquery.delegate.js is required. It is not included within the package, so where can I obtain it from, and once I have it how should I include it within my project? Thanks, Jez
[jQuery] Re: Targeting elements with more than one class
Thanks Mike - that was the first thing I tried. I have since found a
stupid typo, and it now works of course. *slaps forehead repeatedly*.
On Jul 2, 1:51 am, Mike Alsup <[EMAIL PROTECTED]> wrote:
> > Please excuse my noobiness, I just started playing with jQuery today
> > and I cannot seem to find the answer to this:
>
> > If you have elements with multiple classes, how do target just one
> > class?
>
> > For example:
>
> > blah blah blah
>
> > blah blah blah
>
> > blah blah blah
>
> > How do I target the 's with the class of "green"?
>
> > Thanks in advance.
>
> $('p.green')
[jQuery] Targeting an element with multiple classes
How do I target a specific class when elements may belong to multiple classes? For example: blah blah blah blah blah blah blah blah blah How would I select the elements with the class of "green"? I know that 'p[class="big green"]' & 'p[class="small green"]' would work, but I cannot work out how I can just specify wherever there is a class of "green", and not have to include the other classes also. Thanks in advance.
[jQuery] Targeting elements with more than one class
Please excuse my noobiness, I just started playing with jQuery today and I cannot seem to find the answer to this: If you have elements with multiple classes, how do target just one class? For example: blah blah blah blah blah blah blah blah blah How do I target the 's with the class of "green"? Thanks in advance.
[jQuery] Targeting elements with more than one class
Please excuse my noobiness, I just started playing with jQuery today and I cannot seem to find the answer to this: If you have elements with multiple classes, how do target just one class? For example: blah blah blah blah blah blah blah blah blah How do I target the 's with the class of "green"? Thanks in advance.
