[jQuery] identifying the nth element and manipulating another nth element
I'm wanting to target the nth li in a list after clicking the nth
link.
ul id=targetedArea
li/li
li/li
li/li
li/li
/ul
div id=clickedItems
a/a
a/a
a/a
a/a
/div
I can target them all individually, but I know there must be a faster
way by maybe passing the what a element I clicked on.
$(#clickedItem a:eq(2)).click(function() {
$(#targetedArea:eq(2)).addClass('active');
return false;
});
Cheers,
Steve
[jQuery] Re: identifying the nth element and manipulating another nth element
Thanks Klaus,
I got another answer elsewhere (apologies for doubling up the
request).
Here's the answer I got from the other forum which is similar to your,
but I found it more in tune with my scripting style:
$('#clickedItems a').click(function() {
// figure out what position this element is in
var n = $('#clickedItems a').index($(this) );
// update the targetedArea
$('#targetedArea li:eq('+n+')').html('updated!');
return false;
});
On Nov 3, 5:30 pm, Klaus Hartl [EMAIL PROTECTED] wrote:
var $a = $('#clickedItems a').click(function() {
$('#targetedArea li').eq($a.index(this)).addClass('active');
return false;
});
--Klaus
On 3 Nov., 23:24, sperks [EMAIL PROTECTED] wrote:
I'm wanting to target the nth li in a list after clicking the nth
link.
ul id=targetedArea
li/li
li/li
li/li
li/li
/ul
div id=clickedItems
a/a
a/a
a/a
a/a
/div
I can target them all individually, but I know there must be a faster
way by maybe passing the what a element I clicked on.
$(#clickedItem a:eq(2)).click(function() {
$(#targetedArea:eq(2)).addClass('active');
return false;
});
Cheers,
Steve
[jQuery] Re: input:empty and remember password
Thanks Andy,
This is a good script for switching input content, but the problem
with a login form is that one of the fields is a password field and
displays as . Therefore, I'm using a background image that is
removed when there's content.
On Aug 25, 4:33 pm, Andy Matthews [EMAIL PROTECTED] wrote:
This is what someone on this list gave me about 2 weeks ago:
// the focus / blur functionality of the text input
// fields for the email a friend form.
$('#input.email').bind('focus', function() {
// Set the default value if it isn't set
if ( !this.defaultValue ) this.defaultValue = this.value;
// Check to see if the value is different
if ( this.defaultValue this.defaultValue != this.value ) return;
// It isn't, so remove the text from the input
this.value = '';})
.bind('blur', function() {
// If the value is blank, return it to the defaultValue
if ( this.value.match(/^\s*$/) )
this.value = this.defaultValue;
});
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of sperks
Sent: Monday, August 25, 2008 3:26 PM
To: jQuery (English)
Subject: [jQuery] input:empty and remember password
I have a script that displays username and password as background images in
the input fields when the field is empty and they removes it when on focus
(or when there's content left in the field). I then came up against the
issue where if someone's browser populates the input fields after their
browser is asked to remember their password and I end up with both the input
fields being populated and the background showing. Here's my initial
script:
$(document).ready(function() {
$('#loginArea').addClass('active');
$('#loginArea.active input')
.focus(function() {
$(this).addClass(nobg);
})
.blur(function() {
if ($(this).val() == '') {
$(this).addClass(nobg);
};
});
});
I tried using
$('#loginArea.active input:empty').removeClass(nobg);
but FF doesn't add the username/password until after the page has loaded (I
don't know what other browsers are doing), and thus the decision to addClass
is based on empty cells.
Anyone have an idea of how to resolve this one?
[jQuery] Re: input:empty and remember password
Karl,
Thanks, your code reads well and understanding that you hadn't tested
it, I threw it in to give it a whirl. It didn't work, but I'm seeing
if I can put the tweaks in where needed. I'll probably end up
bloating it up a little, but I'll come back with the solution if I can
get it to play nice...
On Aug 26, 9:46 am, sperks [EMAIL PROTECTED] wrote:
Thanks Andy,
This is a good script for switching input content, but the problem
with a login form is that one of the fields is a password field and
displays as . Therefore, I'm using a background image that is
removed when there's content.
On Aug 25, 4:33 pm, Andy Matthews [EMAIL PROTECTED] wrote:
This is what someone on this list gave me about 2 weeks ago:
// the focus / blur functionality of the text input
// fields for the email a friend form.
$('#input.email').bind('focus', function() {
// Set the default value if it isn't set
if ( !this.defaultValue ) this.defaultValue = this.value;
// Check to see if the value is different
if ( this.defaultValue this.defaultValue != this.value ) return;
// It isn't, so remove the text from the input
this.value = '';})
.bind('blur', function() {
// If the value is blank, return it to the defaultValue
if ( this.value.match(/^\s*$/) )
this.value = this.defaultValue;
});
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of sperks
Sent: Monday, August 25, 2008 3:26 PM
To: jQuery (English)
Subject: [jQuery] input:empty and remember password
I have a script that displays username and password as background images in
the input fields when the field is empty and they removes it when on focus
(or when there's content left in the field). I then came up against the
issue where if someone's browser populates the input fields after their
browser is asked to remember their password and I end up with both the input
fields being populated and the background showing. Here's my initial
script:
$(document).ready(function() {
$('#loginArea').addClass('active');
$('#loginArea.active input')
.focus(function() {
$(this).addClass(nobg);
})
.blur(function() {
if ($(this).val() == '') {
$(this).addClass(nobg);
};
});
});
I tried using
$('#loginArea.active input:empty').removeClass(nobg);
but FF doesn't add the username/password until after the page has loaded (I
don't know what other browsers are doing), and thus the decision to addClass
is based on empty cells.
Anyone have an idea of how to resolve this one?
[jQuery] Re: input:empty and remember password
Resolved:
Took what Karl suggested and reconfigured it into my original script.
The key here was to change the assumption that the area would be empty
with the page was ready, thus putting the background styling in onload
rather than trying to remove it afterward.
HTML:
fieldset id=loginArea
form method=post action=
label for=SMTunameusername/label
input type=text id=SMTuname name=uname /
label for=SMTpwordpassword/label
input type=password name=pword id=SMTpword /
input type=image src=/images/loginButton.gif
class=searchButton /
/form
/fieldset
jQuery:
$(document).ready(function() {
$(#loginArea).addClass(active);
$(#loginArea input)
.focus(function() {
$(this).removeClass(empty);
})
.blur(function() {
if ($(this).val() == ) {
$(this).addClass(empty);
};
});
$(window).load(function() {
$(#loginArea input[value='']).addClass(empty);
});
});
css:
#SMTuname,
#SMTpword { background-color: #728398; color: #fff; font-size: 1em;
background-image: none; background-repeat: no-repeat; background-
position: left; }
#SMTuname.empty { background-image: url(/images/username.gif); }
#SMTpword.empty { background-image: url(/images/password.gif); }
On Aug 26, 10:07 am, sperks [EMAIL PROTECTED] wrote:
Karl,
Thanks, your code reads well and understanding that you hadn't tested
it, I threw it in to give it a whirl. It didn't work, but I'm seeing
if I can put the tweaks in where needed. I'll probably end up
bloating it up a little, but I'll come back with the solution if I can
get it to play nice...
On Aug 26, 9:46 am, sperks [EMAIL PROTECTED] wrote:
Thanks Andy,
This is a good script for switching input content, but the problem
with a login form is that one of the fields is a password field and
displays as . Therefore, I'm using a background image that is
removed when there's content.
On Aug 25, 4:33 pm, Andy Matthews [EMAIL PROTECTED] wrote:
This is what someone on this list gave me about 2 weeks ago:
// the focus / blur functionality of the text input
// fields for the email a friend form.
$('#input.email').bind('focus', function() {
// Set the default value if it isn't set
if ( !this.defaultValue ) this.defaultValue = this.value;
// Check to see if the value is different
if ( this.defaultValue this.defaultValue != this.value )
return;
// It isn't, so remove the text from the input
this.value = '';})
.bind('blur', function() {
// If the value is blank, return it to the defaultValue
if ( this.value.match(/^\s*$/) )
this.value = this.defaultValue;
});
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of sperks
Sent: Monday, August 25, 2008 3:26 PM
To: jQuery (English)
Subject: [jQuery] input:empty and remember password
I have a script that displays username and password as background images
in
the input fields when the field is empty and they removes it when on focus
(or when there's content left in the field). I then came up against the
issue where if someone's browser populates the input fields after their
browser is asked to remember their password and I end up with both the
input
fields being populated and the background showing. Here's my initial
script:
$(document).ready(function() {
$('#loginArea').addClass('active');
$('#loginArea.active input')
.focus(function() {
$(this).addClass(nobg);
})
.blur(function() {
if ($(this).val() == '') {
$(this).addClass(nobg);
};
});
});
I tried using
$('#loginArea.active input:empty').removeClass(nobg);
but FF doesn't add the username/password until after the page has loaded
(I
don't know what other browsers are doing), and thus the decision to
addClass
is based on empty cells.
Anyone have an idea of how to resolve this one?
[jQuery] input:empty and remember password
I have a script that displays username and password as background
images in the input fields when the field is empty and they removes it
when on focus (or when there's content left in the field). I then came
up against the issue where if someone's browser populates the input
fields after their browser is asked to remember their password and I
end up with both the input fields being populated and the background
showing. Here's my initial script:
$(document).ready(function() {
$('#loginArea').addClass('active');
$('#loginArea.active input')
.focus(function() {
$(this).addClass(nobg);
})
.blur(function() {
if ($(this).val() == '') {
$(this).addClass(nobg);
};
});
});
I tried using
$('#loginArea.active input:empty').removeClass(nobg);
but FF doesn't add the username/password until after the page has
loaded (I don't know what other browsers are doing), and thus the
decision to addClass is based on empty cells.
Anyone have an idea of how to resolve this one?
[jQuery] Re: random tab and simple content switching
I worked a little longer and in case anyone has been watching trying
to work out what I was on about... Here's my final code. I don't
thinks it's very clean, and I'm sure there are easier ways of doing
this, ways that don't require me to name the ids, etc., but I'm not
familiar with the intricate workings of math functions. Heck I'm proud
I got this far.
$(document).ready(function() {
var ids = [ 'latestArticle', 'inTheMag' ];
var index = Math.round( Math.random()*10 ) % 2;
var id = ids[ index ];
$('#mainArticle #' + id + ' .teaser').hide();
$('#mainArticle #' + id + ' h1 span').addClass(hidden);
$('#mainArticle div h1').click(function(){
var place = $(this).parent().attr(id);
$('#mainArticle h1 span').addClass(hidden);
$('#' + place + ' h1 span').removeClass(hidden);
$('#mainArticle .teaser').hide();
$('#' + place + ' .teaser').slideDown('slow');
});
});
On Feb 21, 6:32 pm, sperks [EMAIL PROTECTED] wrote:
update:
I'm still looking for the random side of things, but I've got a
solution for the switching. However, I'm a little concerned that I'm
targeting h1 rather than the span (how do I go back two parents?)
$(document).ready(function() {
$('#mainArticle #latestArticle .teaser').hide();
$('#mainArticle #latestArticle h1 span').addClass(hidden);
$('#mainArticle div h1').click(function(){
var place = $(this).parent().attr(id);
$('#mainArticle h1 span').addClass(hidden);
$('#' + place + ' h1 span').removeClass(hidden);
$('#mainArticle .teaser').hide();
$('#' + place + ' .teaser').slideDown('slow');
});
});
[jQuery] random tab and simple content switching
I'm having trouble with a content switcher and I think my issue is
understanding how to targeting utilizing 'this'
Here's my HTML and script:
[code]
div id=mainArticle
div id=latestArticle class=article
h1spantab 1/span/h1
div class=teasercontent/div
/div
div id=inTheMag class=article
h1spantab 1/span/h1
div class=teasercontent/div
/div
/div
$(document).ready(function() {
$('#mainArticle .latestArticle .teaser').hide();
$('#mainArticle .latestArticle h1 span').addClass(hidden);
$('#mainArticle div').each(function(){
$('h1 span',this).click(function(){
$('#mainArticle h1 span').addClass(hidden);
$('h1 span',this).removeClass(hidden);
$('#mainArticle .teaser').hide();
$('.teaser',this).slideDown('slow');
});
});
});
[/code]
I also want to make which div displays random, so any help on that
would be great too.
[jQuery] Re: random tab and simple content switching
update:
I'm still looking for the random side of things, but I've got a
solution for the switching. However, I'm a little concerned that I'm
targeting h1 rather than the span (how do I go back two parents?)
$(document).ready(function() {
$('#mainArticle #latestArticle .teaser').hide();
$('#mainArticle #latestArticle h1 span').addClass(hidden);
$('#mainArticle div h1').click(function(){
var place = $(this).parent().attr(id);
$('#mainArticle h1 span').addClass(hidden);
$('#' + place + ' h1 span').removeClass(hidden);
$('#mainArticle .teaser').hide();
$('#' + place + ' .teaser').slideDown('slow');
});
});
[jQuery] Re: adding a class to the label of a checked radio button
I thought I'd update the community with the working code. In order to
get this working in Safari I took advise from the following thread and
created a trigger on the label as well as the input element.
http://groups.google.com/group/jquery-en/browse_thread/thread/149c4f8a32a846a2/
Here's my final code:
$(document).ready(function() {
$('#searchLabels').addClass('active'); // allows styling when JS is
enabled
$('#searchLabels :radio[id]').click( function() {
var selectedInput = $(this).attr(id);
$('#searchLabels label').removeClass(selected);
$('#searchLabels label[for=' + selectedInput +
']').addClass(selected);
});
$('#searchLabels label').click( function() {
$('#searchLabels label').removeClass(selected);
$(this).addClass(selected);
});
});
and here it is in action in the top search area (turn off JS to see
how nicely it degrades):
http://deliciouslivingmag.com/
On Dec 3, 12:39 pm, sperks [EMAIL PROTECTED] wrote:
I think that this bit of script is adding a class to the for
attribute, but I'm wanting to add the class to the element that has
that for attribute. Can anyone help me do the targeting better?
Thanks
$(document).ready(function() {
$('div#searchLabels').addClass('active'); // allows me to style the
radio buttons differently when JS is enabled
$('div#searchLabels :radio[id]').click( function() {
var selectedInput = $(this).text();
$('div#searchLabels label').removeClass(selected);
$('div#searchLabels label.attr(for,' + selectedInput +
')').addClass(selected);
});
});
[jQuery] Re: hiding page elements instantly on page load
I've always found the best solution is to build the navigation as you
would like it to appear without JavaScript enabled and then manipulate
it with jQuery. Since the css doesn't have to wait for the DOM to be
built like jQuery, the effects will kick in instantly.
Example:
ul id=nav
lia href=link 1/a
ul
lia href=link 1a/a/li
/ul
/li
/ul
style
#nav ul { display: none; }
#nav a:hover ul { display: block; }
Doing this allows for graceful degradation too.
On Dec 6, 7:22 pm, bytte [EMAIL PROTECTED] wrote:
Thanks guys. I use the document.ready function. Actually, it only
happens on IE (both 6 and 7), not on Firefox or Safari.
I used the display:none css rule tiphipps pointed out and now I have
the opposite problem: the current menu is hidden and after a second
pops out. It's not ideal, but it's a lot nicer already.
On 6 dec, 17:05, sawmac [EMAIL PROTECTED] wrote:
This works great on my localhost. However, when I publish online I
experience a problem: on page load the whole ul is shown for a
second, including all nested ul submenu's, before it is hidden by
jQuery. I guess this is because all ul elements need to be loaded
into the DOM before the jQuery code is started?
Are you using the onload event or jQuery's document ready method? If
you're using onload then you need to wait until all assets like
images, flash movies have downloaded before the hide() function runs.
The jQuery method will hide the nested ul as soon as the dom is ready
to be manipulated
$(document).ready(function(){
$(ul ul).hide();
});
--dave
[jQuery] Re: adding a class to the label of a checked radio button
The site's live, (http://deliciouslivingmag.com/) and I got the search
tabs working beautifully, but forgot to check Safari after the final
change.
G.
Does anyone know if / how I can get Safari to understand that I'm
clicking on the radio even when I'm clicking on the label (assuming
that's the issue).
$(document).ready(function() {
$('#searchLabels').addClass('active'); // allows me to style the
radio buttons differently when JS is enabled
$(#searchLabels).append('input type=hidden name=cat value= /
');
$('#searchLabels :radio[id]').click( function() {
var selectedInput = $(this).attr(id);
$('#searchLabels label').removeClass(selected);
$('#searchLabels label[for=' + selectedInput +
']').addClass(selected);
});
});
Cheers
Steve
On Dec 3, 1:17 pm, Karl Swedberg [EMAIL PROTECTED] wrote:
Hi sperks,
I'm pretty sure you can do that by changing this line ...
$('div#searchLabels label.attr(for,' + selectedInput +
')').addClass(selected);
to this ...
$('#searchLabels label[for=' + selectedInput +
']').addClass(selected);
Instead of returning the attribute itself, you want to incorporate the
attribute selector, [attribute=value], to the expression.
I also removed the div from in front of #searchLabels, because most
likely there is no need for it.
Hope that helps.
--Karl
_
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Dec 3, 2007, at 12:39 PM, sperks wrote:
I think that this bit of script is adding a class to the for
attribute, but I'm wanting to add the class to the element that has
that for attribute. Can anyone help me do the targeting better?
Thanks
$(document).ready(function() {
$('div#searchLabels').addClass('active'); // allows me to style the
radio buttons differently when JS is enabled
$('div#searchLabels :radio[id]').click( function() {
var selectedInput = $(this).text();
$('div#searchLabels label').removeClass(selected);
$('div#searchLabels label.attr(for,' + selectedInput +
')').addClass(selected);
});
});
[jQuery] Re: adding a class to the label of a checked radio button
scratch the append(input line. That's me starting to find solutions:
$(document).ready(function() {
$('#searchLabels').addClass('active'); // allows me to style the
radio buttons differently when JS is enabled
$('#searchLabels :radio[id]').click( function() {
var selectedInput = $(this).attr(id);
$('#searchLabels label').removeClass(selected);
$('#searchLabels label[for=' + selectedInput +
']').addClass(selected);
});
});
On Dec 5, 4:26 pm, sperks [EMAIL PROTECTED] wrote:
The site's live, (http://deliciouslivingmag.com/) and I got the search
tabs working beautifully, but forgot to check Safari after the final
change.
G.
Does anyone know if / how I can get Safari to understand that I'm
clicking on the radio even when I'm clicking on the label (assuming
that's the issue).
$(document).ready(function() {
$('#searchLabels').addClass('active'); // allows me to style the
radio buttons differently when JS is enabled
$(#searchLabels).append('input type=hidden name=cat value=
/');
$('#searchLabels :radio[id]').click( function() {
var selectedInput = $(this).attr(id);
$('#searchLabels label').removeClass(selected);
$('#searchLabels label[for=' + selectedInput +
']').addClass(selected);
});
});
Cheers
Steve
On Dec 3, 1:17 pm, Karl Swedberg [EMAIL PROTECTED] wrote:
Hi sperks,
I'm pretty sure you can do that by changing this line ...
$('div#searchLabels label.attr(for,' + selectedInput +
')').addClass(selected);
to this ...
$('#searchLabels label[for=' + selectedInput +
']').addClass(selected);
Instead of returning the attribute itself, you want to incorporate the
attribute selector, [attribute=value], to the expression.
I also removed the div from in front of #searchLabels, because most
likely there is no need for it.
Hope that helps.
--Karl
_
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Dec 3, 2007, at 12:39 PM, sperks wrote:
I think that this bit of script is adding a class to the for
attribute, but I'm wanting to add the class to the element that has
that for attribute. Can anyone help me do the targeting better?
Thanks
$(document).ready(function() {
$('div#searchLabels').addClass('active'); // allows me to style the
radio buttons differently when JS is enabled
$('div#searchLabels :radio[id]').click( function() {
var selectedInput = $(this).text();
$('div#searchLabels label').removeClass(selected);
$('div#searchLabels label.attr(for,' + selectedInput +
')').addClass(selected);
});
});
[jQuery] adding a class to the label of a checked radio button
I think that this bit of script is adding a class to the for
attribute, but I'm wanting to add the class to the element that has
that for attribute. Can anyone help me do the targeting better?
Thanks
$(document).ready(function() {
$('div#searchLabels').addClass('active'); // allows me to style the
radio buttons differently when JS is enabled
$('div#searchLabels :radio[id]').click( function() {
var selectedInput = $(this).text();
$('div#searchLabels label').removeClass(selected);
$('div#searchLabels label.attr(for,' + selectedInput +
')').addClass(selected);
});
});
[jQuery] news rotator - looking for some help in cleaning up my code
I've got my code working (adapted of Karl Swedberg's Scroll Up News
Reader) http://docs.jquery.com/Tutorials:Scroll_Up_Headline_Reader,
but I'm sure there's a cleaner (more dynamic) way of checking where I
am in the loop so that I don't have to do all the individual click
checks
$(#topStoryButtons li a:eq(0)).click(function() {
$(#topStoryButtons li a:eq(1)).click(function() {
$(#topStoryButtons li a:eq(2)).click(function() {
$(#topStoryButtons li a:eq(3)).click(function() {
I think I'm just looking for a way to capture the instance of the link
I'm clicking and pass that variable on. Any help appreciated - Steve
/*
* rotator
* */
var headline_count;
var headline_interval;
var old_headline = 0;
var current_headline = 0;
$(document).ready(function(){
$(div#topStories #topStoryButtons).addClass(active);
headline_count = $(div.topStoryItem).size();
$(div.topStoryItem:eq(+current_headline+)).css('left','0');
$(#topStoryButtons li a:eq(+current_headline
+)).addClass('activeControls');
headline_interval = setInterval(headline_rotate,7000); //time in
milliseconds
$(#topStoryButtons li a:eq(0)).click(function() {
selected_headline = 0;
$(div.topStoryItem:eq( + current_headline +
)).animate({left:
-622},slow, function() {
$(this).css('left','622px');
});
$(#topStoryButtons li a:eq( + current_headline +
)).removeClass('activeControls');
$(#topStoryButtons li a:eq(0)).addClass('activeControls');
$(div.topStoryItem:eq(0)).show().animate({left: 0},slow);
current_headline = selected_headline;
clearInterval(headline_interval);
return false;
});
$(#topStoryButtons li a:eq(1)).click(function() {
selected_headline = 1;
$(div.topStoryItem:eq( + current_headline +
)).animate({left:
-622},slow, function() {
$(this).css('left','622px');
});
$(#topStoryButtons li a:eq( + current_headline +
)).removeClass('activeControls');
$(#topStoryButtons li a:eq(1)).addClass('activeControls');
$(div.topStoryItem:eq(1)).show().animate({left: 0},slow);
current_headline = selected_headline;
clearInterval(headline_interval);
return false;
});
$(#topStoryButtons li a:eq(2)).click(function() {
selected_headline = 2;
$(div.topStoryItem:eq( + current_headline +
)).animate({left:
-622},slow, function() {
$(this).css('left','622px');
});
$(#topStoryButtons li a:eq( + current_headline +
)).removeClass('activeControls');
$(#topStoryButtons li a:eq(2)).addClass('activeControls');
$(div.topStoryItem:eq(2)).show().animate({left: 0},slow);
current_headline = selected_headline;
clearInterval(headline_interval);
return false;
});
$(#topStoryButtons li a:eq(3)).click(function() {
selected_headline = 3;
$(div.topStoryItem:eq( + current_headline +
)).animate({left:
-622},slow, function() {
$(this).css('left','622px');
});
$(#topStoryButtons li a:eq( + current_headline +
)).removeClass('activeControls');
$(#topStoryButtons li a:eq(3)).addClass('activeControls');
$(div.topStoryItem:eq(3)).show().animate({left: 0},slow);
current_headline = selected_headline;
clearInterval(headline_interval);
return false;
});
});
function headline_rotate() {
current_headline = (old_headline + 1) % headline_count;
$(div.topStoryItem:eq( + old_headline + )).animate({left:
-622},slow, function() {
$(this).css('left','622px');
});
$(#topStoryButtons li a:eq( + old_headline +
)).removeClass('activeControls');
$(#topStoryButtons li a:eq( + current_headline +
)).addClass('activeControls');
$(div.topStoryItem:eq( + current_headline +
)).show().animate({left: 0},slow);
old_headline = current_headline;
}
[jQuery] Re: modifying a label when radio input selected
While you didn't give me the answer I was looking for, you inspired me
to mover forward in the right direction. I finally got the result I
was after. Here's the script I ended with (anyone wants to tighten
this please I'd be more than welcome!)
$(document).ready(function() {
var $inputId = $('div.searchInputs input[selected=selected]');
$('div#searchLabels label[for=$inputId]').addClass(selected);
$('div#searchLabels input').each(function(index) {
var $thisInput = $(this);
$thisInput.addClass('buttonInputs');
});
$('div#searchLabels label').each(function(index) {
var $thisLabel = $(this);
$thisLabel.addClass('buttonLabels');
});
$('div#searchLabels label#labelEntireSite').click(function() {
$(this).addClass(selected);
$('div#searchLabels
label#labelRecipesCat').removeClass(selected);
});
$('div#searchLabels label#labelRecipesCat').click(function() {
$(this).addClass(selected);
$('div#searchLabels
label#labelEntireSite').removeClass(selected);
});
});
On Nov 14, 10:26 am, whutevr [EMAIL PROTECTED] wrote:
You could do something like this:
$('div#searchLabels label#labelRecipesCat').click(function() {
if (this.checked ){
$(''div#searchLabels
label#labelRecipesCat'').addClass('selected');
$(''div#searchLabels
label#labelEntireSite').removeClass('selected');
};
});
On Nov 13, 10:01 pm, sperks [EMAIL PROTECTED] wrote:
Apologies, if this comes through to the list twice (I waited a few
hours before pushing again).
Update. Here's the beautiful hunk of script that I have at the moment,
but I'm wanting to add the class to the label based on whether it's
associated input element is selected.
$(document).ready(function() {
$('div#searchLabels input').each(function(index) {
var $thisLink = $(this);
$thisLink.attr({
'class': 'buttonInputs'
});
});
$('div#searchLabels label').each(function(index) {
var $thisLink = $(this);
$thisLink.attr({
'class': 'buttonLabels'
});
});
$('div#searchLabels label#labelEntireSite').addClass(selected);
$('div#searchLabels label#labelEntireSite').click(function() {
$(this).addClass(selected);
$('div#searchLabels
label#labelRecipesCat').removeClass(selected);
});
$('div#searchLabels label#labelRecipesCat').click(function() {
$(this).addClass(selected);
$('div#searchLabels
label#labelEntireSite').removeClass(selected);
});
});
On Nov 13, 12:57 pm, sperks [EMAIL PROTECTED] wrote:
I have some formatting I want to add to a couple of radio buttons.
I'm wanting to hide the actual radio buttons and only show the labels
which I want to format differently depending on whether they're
related radio button is selected or not.
HTML:
div id=searchLabels
input type=radio value= id=entireSite selected=selected
name=cat
label for=entireSite class=selected
id=labelEntireSiteEntire
Site/label
input type=radio value=recipes id=recipesCat name=cat
label for=recipesCat id=labelRecipesCatRecipes/label
/div
If I click on the recipes label (id=recipesCat) I want to change
it's class. I've been thinking along the lines of associating it via
it's corresponding input element becoming selected
([EMAIL PROTECTED]selected]), but I'm pretty new to jQuery and any
help getting me in the right direction would be great.
Thanks
Steve
[jQuery] Re: modifying a label when radio input selected
Apologies, if this comes through to the list twice (I waited a few
hours before pushing again).
Update. Here's the beautiful hunk of script that I have at the moment,
but I'm wanting to add the class to the label based on whether it's
associated input element is selected.
$(document).ready(function() {
$('div#searchLabels input').each(function(index) {
var $thisLink = $(this);
$thisLink.attr({
'class': 'buttonInputs'
});
});
$('div#searchLabels label').each(function(index) {
var $thisLink = $(this);
$thisLink.attr({
'class': 'buttonLabels'
});
});
$('div#searchLabels label#labelEntireSite').addClass(selected);
$('div#searchLabels label#labelEntireSite').click(function() {
$(this).addClass(selected);
$('div#searchLabels
label#labelRecipesCat').removeClass(selected);
});
$('div#searchLabels label#labelRecipesCat').click(function() {
$(this).addClass(selected);
$('div#searchLabels
label#labelEntireSite').removeClass(selected);
});
});
On Nov 13, 12:57 pm, sperks [EMAIL PROTECTED] wrote:
I have some formatting I want to add to a couple of radio buttons.
I'm wanting to hide the actual radio buttons and only show the labels
which I want to format differently depending on whether they're
related radio button is selected or not.
HTML:
div id=searchLabels
input type=radio value= id=entireSite selected=selected
name=cat
label for=entireSite class=selected id=labelEntireSiteEntire
Site/label
input type=radio value=recipes id=recipesCat name=cat
label for=recipesCat id=labelRecipesCatRecipes/label
/div
If I click on the recipes label (id=recipesCat) I want to change
it's class. I've been thinking along the lines of associating it via
it's corresponding input element becoming selected
([EMAIL PROTECTED]selected]), but I'm pretty new to jQuery and any
help getting me in the right direction would be great.
Thanks
Steve
[jQuery] Re: modifying a label when radio input selected
Just to show that I'm doing some work on my own and not just fishing
for solutions. I have the functionality working, but I'm wanting to
target the label element based on whether the related input element is
selected or not, rather than on click. The reason for this is that
the radio input is defined as to whether it's selected elsewhere.
Here's where I'm at:
HTML:
fieldset id=search
legendSearch:/legend
form name=keyword method=get action=/searchresults/
div id=searchLabels
input type=radio value= id=entireSite !--#if
expr='$cat !
= recipes' --selected=selected !--#else --!--#endif --
name=cat
label for=entireSite !--#if expr='$cat !=
recipes' --
class=selected !--#else --!--#endif --
id=labelEntireSiteEntire Site/label
input type=radio value=recipes id=recipesCat
!--#if
expr='$cat != recipes' --!--#else --class=selected
selected=selected !--#endif --name=cat
label for=recipesCat !--#if expr='$cat !=
recipes' --!--
#else --class=selected !--#endif --id=labelRecipesCatRecipes/
label
/div
div class=searchInputs
input type=text name=terms value=!--#if
expr='$terms !=
' --!--#echo var=terms--!--#else --Search
onblur=if(this.value=='') this.value='Search';
onfocus=if(this.value=='Search') this.value='';!--#endif -- /
input type=image src=/images/search_button.gif
class=button
alt=Go /
/div
/form
/fieldset
CSS:
#search { font-family: 'Trebuchet MS',arial; float: right; padding:
20px 10px 0 0; text-align: right; margin: 0; width: 293px; border-
width: 0; font-size: 10px; background: url('/images/searchBg.gif') no-
repeat left 44px; }
#search legend { display: none; }
#search #searchLabels { text-align: left; padding-left: 10px; width:
283px; overflow: hidden; }
#search #searchLabels label { line-height: 25px; height: 25px; }
#search #searchLabels label.buttonLabels { display: block; float:
left; text-align: center; margin: 0 -5px 0 0; width: 77px; }
#search #searchLabels label.selected { background: url('/images/
searchTabBg.gif') no-repeat left top; }
#search #searchLabels input.buttonInputs { visibility: hidden;
position: absolute; }
#search .searchInputs { padding: 7px 8px 8px; text-align: right; }
#search .searchInputs input { padding: 2px; vertical-align: bottom;
color: #5f561d; width: 206px; margin: 0; }
#search .searchInputs input.button { border: 0; padding: 0; width:
56px; margin: 0; }
jQuery:
$(document).ready(function() {
$('div#searchLabels input').each(function(index) {
var $thisLink = $(this);
$thisLink.attr({
'class': 'buttonInputs'
});
});
$('div#searchLabels label').each(function(index) {
var $thisLink = $(this);
$thisLink.attr({
'class': 'buttonLabels'
});
});
$('div#searchLabels label#labelEntireSite').addClass(selected);
$('div#searchLabels label#labelEntireSite').click(function() {
$(this).addClass(selected);
$('div#searchLabels
label#labelRecipesCat').removeClass(selected);
});
$('div#searchLabels label#labelRecipesCat').click(function() {
$(this).addClass(selected);
$('div#searchLabels
label#labelEntireSite').removeClass(selected);
});
});
On Nov 13, 12:57 pm, sperks [EMAIL PROTECTED] wrote:
I have some formatting I want to add to a couple of radio buttons.
I'm wanting to hide the actual radio buttons and only show the labels
which I want to format differently depending on whether they're
related radio button is selected or not.
HTML:
div id=searchLabels
input type=radio value= id=entireSite selected=selected
name=cat
label for=entireSite class=selected id=labelEntireSiteEntire
Site/label
input type=radio value=recipes id=recipesCat name=cat
label for=recipesCat id=labelRecipesCatRecipes/label
/div
If I click on the recipes label (id=recipesCat) I want to change
it's class. I've been thinking along the lines of associating it via
it's corresponding input element becoming selected
([EMAIL PROTECTED]selected]), but I'm pretty new to jQuery and any
help getting me in the right direction would be great.
Thanks
Steve
