[jQuery] Radio button checked status
Banging my head against a wall here. I have this:
h3span class=num1/spanDate Range/h3
pinput type=radio class=period name=period value=daily
Daily/p
pinput type=radio class=period name=period value=weekly
Weekly/p
pinput type=radio class=period name=period value=monthly
Monthly/p
and I'm trying to get checked status with this:
var period = $('input.period:checked').val();
But, of course, no joy. Do *I* need to set the checked status of the
radio button in order to use the :checked method, or doesn't the
browser handle this on it's own? I thought browsers changed the
checked attribute on their own. I'm totally stumped and cranky over
here.
Thanks!
-Nick
[jQuery] Re: Radio button checked status
Hmm. The plot thickens. Debugging a bit more.
On Aug 13, 4:20 pm, Mauricio \(Maujor\) Samy Silva
css.mau...@gmail.com wrote:
There is nothing wrong with your code.
Have a look at this testcase:http://jsbin.com/igubihttp://jsbin.com/igubi/edit
Maurício
-Mensagem Original-
De: littlerobothead
Para: jQuery (English)
Enviada em: quinta-feira, 13 de agosto de 2009 16:46
Assunto: [jQuery] Radio button checked status
Banging my head against a wall here. I have this:
h3span class=num1/spanDate Range/h3
pinput type=radio class=period name=period value=daily
Daily/p
pinput type=radio class=period name=period value=weekly
Weekly/p
pinput type=radio class=period name=period value=monthly
Monthly/p
and I'm trying to get checked status with this:
var period = $('input.period:checked').val();
But, of course, no joy. Do *I* need to set the checked status of the
radio button in order to use the :checked method, or doesn't the
browser handle this on it's own? I thought browsers changed the
checked attribute on their own. I'm totally stumped and cranky over
here.
Thanks!
-Nick
[jQuery] More fun with decrementing on click
I have a status area in an app I'm working on. It shows the number of
unread alerts. As the user clicks each alert, it's subtracted from the
total. The following code counts the number of items to use as my
total:
var trigger = $(#dataset-b tr.unread);
var count = $(trigger).length;
$(.number).html(count);
And then this works to subtract from that number on each click:
$(trigger).click(function(){
$(.number).html(count--);
if (count == 0){
$(trigger).unbind(click);
}
$(this).removeClass('unread');
});
Problem is, nothing happens on the first click. However, on the second
click my number starts to decrement. What's going on here? How can I
make the count work?
Best,
Nick
[jQuery] Re: More fun with decrementing on click
Bingo. Thanks all for you straightforward answers. This had been
dogging me for days.
Thanks!
On Aug 3, 5:12 pm, Peter Edwards p...@bjorsq.net wrote:
Hi Nick
$(.number).html(count--);
count-- decrements your count variable after it has passed its value to
the $.html() function.
use --count
Peter
on 03/08/2009 21:15 littlerobothead said::
I have a status area in an app I'm working on. It shows the number of
unread alerts. As the user clicks each alert, it's subtracted from the
total. The following code counts the number of items to use as my
total:
var trigger = $(#dataset-b tr.unread);
var count = $(trigger).length;
$(.number).html(count);
And then this works to subtract from that number on each click:
$(trigger).click(function(){
$(.number).html(count--);
if (count == 0){
$(trigger).unbind(click);
}
$(this).removeClass('unread');
});
Problem is, nothing happens on the first click. However, on the second
click my number starts to decrement. What's going on here? How can I
make the count work?
Best,
Nick
[jQuery] Draggables and offset
I've built an expanding HUD control for a map in a project. I've got
it expanding, and, using some code from this group I have it avoiding
the edges of the viewport on first resize. The problem is that it
doesn't seem like an object updates its position when you make it
draggable with the jQuery UI draggable plugin. The net effect is that
this element constantly resizes outside the viewport, so that only an
edge is showing and it has to be dragged back into the center of the
page. What I'm looking for is a bulletproof solution for a window that
is resizable on click and is aware of its -x and -y position even
after being moved with jQuery UI Draggable. Current code follows...
Thanks!
///
// Collapse HUD
///
// Triggers the #data floater to slide down
// if a tab is clicked and it's closed
hud = $('.hud-data');
hudPosition_init = hud.position();
hudWidth_init = hud.width();
var viewport = $(document).width();
var hudOffset = hud.offset();
hudChild = $('.jScrollPaneContainer');
$('.event-controls').click(function() {
var eventBar = $('form.events');
$(eventBar).slideToggle({height:40px}, 90);
});
$('li.hud-left-tab').click(function() {
// First, if the hud is collapsed, slide it down
$(#data).slideDown(20);
// Next, if it's been expanded, shrink it
hud.animate({width : hudWidth_init}, 90);
hudChild.css({width: hudWidth_init});
var viewport = $(document).width();
var hudOffset = hud.offset();
$(#map-filter-popdown-shadow).hide();
});
$('li.hud-center-tab').click(function() {
// Perform the same check for this tab
$(#data).slideDown(20);
if (viewport - hudOffset.left 10) {
hud.animate({width : hudWidth_init+359, margin-left
:-350},
90);
hudChild.animate({width: hudWidth_init+360}, 20);
} else {
hud.animate({width : hudWidth_init+360}, 90);
hudChild.animate({width: hudWidth_init+360}, 20);
}
//hud.animate({width : hudWidth_init+360}, 90);
//hudChild.css({width: hudWidth_init+360});
$(#map-filter-popdown-shadow).hide();
});
$('#test-button').click(function(){
alert(hudPosition_init.left);
});
$('img.panel-closure').toggle(function(){
$(this).attr(src,/images/show-panel.png);
$('#data').slideToggle(90);
}, function() {
$(this).attr(src,/images/hide-panel.png);
$('#data').slideToggle(90);
});
///
//
///
[jQuery] Design pattern for animate()
I have a small hud-syle control I've built for a project. I'm using
the following code to activate a collapse button on the hud, and to
resize the hud so that it can accommodate some wide data.
$('li.hud-left-tab').click(function() {
// First, if the hud is collapsed, slide it down
$(#data).slideDown(20);
// Next, if it's been expanded, shrink it
hud.animate({width : hudWidth_init}, 90);
hudChild.css({width: hudWidth_init});
$(#map-filter-popdown-shadow).hide();
});
$('li.hud-center-tab').click(function() {
// Perform the same check for this tab
$(#data).slideDown(20);
hud.animate({width : hudWidth_init+360}, 90);
hudChild.css({width: hudWidth_init+360});
$(#map-filter-popdown-shadow).hide();
});
$('img.panel-closure').toggle(function(){
$(this).attr(src,/images/show-panel.png);
$('#data').slideToggle(90);
}, function() {
$(this).attr(src,/images/hide-panel.png);
$('#data').slideToggle(90);
});
This works really well, and does almost everything I need it to do.
The only issue is that when the hud is near the edge of the viewport
and the user resizes it, its right edge scoots out of view. What I'd
like to do is add some kind of conditional logic that says, if this
hud is within X pixels of the right or left edge of the screen, add
some right margin either during or after the resize animation
happens. I keep trying different ways of doing this, to no avail. Any
ideas? Thanks.
[jQuery] Re: Design pattern for animate()
Thanks, that worked really well. I was unaware of the offset function;
good stuff!
On Jul 16, 11:38 am, Liam Potter radioactiv...@gmail.com wrote:
use width() and offset in an if statement
var pageWidth = $(document).width();
var hudOffset = hud.offset();
if ( pageWidth - hudOffset.left 360 ) {
hud.animate({left:-360}, 90);
} else {
return false;
}
I'm guessing you'd need something like that.
littlerobothead wrote:
I have a small hud-syle control I've built for a project. I'm using
the following code to activate a collapse button on the hud, and to
resize the hud so that it can accommodate some wide data.
$('li.hud-left-tab').click(function() {
// First, if the hud is collapsed, slide it down
$(#data).slideDown(20);
// Next, if it's been expanded, shrink it
hud.animate({width : hudWidth_init}, 90);
hudChild.css({width: hudWidth_init});
$(#map-filter-popdown-shadow).hide();
});
$('li.hud-center-tab').click(function() {
// Perform the same check for this tab
$(#data).slideDown(20);
hud.animate({width : hudWidth_init+360}, 90);
hudChild.css({width: hudWidth_init+360});
$(#map-filter-popdown-shadow).hide();
});
$('img.panel-closure').toggle(function(){
$(this).attr(src,/images/show-panel.png);
$('#data').slideToggle(90);
}, function() {
$(this).attr(src,/images/hide-panel.png);
$('#data').slideToggle(90);
});
This works really well, and does almost everything I need it to do.
The only issue is that when the hud is near the edge of the viewport
and the user resizes it, its right edge scoots out of view. What I'd
like to do is add some kind of conditional logic that says, if this
hud is within X pixels of the right or left edge of the screen, add
some right margin either during or after the resize animation
happens. I keep trying different ways of doing this, to no avail. Any
ideas? Thanks.
[jQuery] Decrement on click?
I'm sure this is going to be an easy one. I'm just not seeing a
solution in any of the usual places.
I'm getting the number of elements in a table like so:
var count = $(#dataset-b tr).length;
Then appending that number to a span, like so:
$(.count).html(( + count + ));
What I want to do is subtract one from that number every time a user
clicks a row in the table I'm generating, like so:
$(#dataset-b tr).click(function(){
$(this).fadeOut(300);
var int = 1;
var prod = count - int;
$(.count).html(( + prod + ));
});
The problem is that it works on the first click (9 changes to 8), but
nothing happens on subsequent clicks. Again, I'm sure this is
something simple I'm missing. Thanks for any help.
[jQuery] Re: Decrement on click?
Thanks everyone for clearing this up. I told you it was simple :) I
learned something today!
On Jul 9, 1:46 pm, Massimo Lombardo unwiredbr...@gmail.com wrote:
Here's a simple pattern:
var counter = $('element0').length;
$('element1').text(counter);
$('element2').click(function () {
$('element1').text(counter--);
});
Live example: open a live JavaScript console (like Firebug if you're
using Firefox), then paste the following
$('body').append('div id=test/div');
$('#test').css({
position: 'absolute',
top: '200px',
right: '0px',
width: '80px',
padding: '10px',
backgroundColor: '#f00',
color: '#fff'});
var count = 25;
$('#test').text(count);
$('body').click(function () {
$('#test').text(--count);
});
Launch it, then click on the body: you'll see the number decrease :)
On Thu, Jul 9, 2009 at 16:46, littlerobotheadnickmjo...@gmail.com wrote:
I'm sure this is going to be an easy one. I'm just not seeing a
solution in any of the usual places.
I'm getting the number of elements in a table like so:
var count = $(#dataset-b tr).length;
Then appending that number to a span, like so:
$(.count).html(( + count + ));
What I want to do is subtract one from that number every time a user
clicks a row in the table I'm generating, like so:
$(#dataset-b tr).click(function(){
$(this).fadeOut(300);
var int = 1;
var prod = count - int;
$(.count).html(( + prod + ));
});
The problem is that it works on the first click (9 changes to 8), but
nothing happens on subsequent clicks. Again, I'm sure this is
something simple I'm missing. Thanks for any help.
--
Linux user #437712
[jQuery] Odd overlap issue with cycle plugin
I have a slideshow set up here, for reference:
http://www.littlerobothead.com/secret.php
You'll be able to see the slides as they overlap when using the next
or previous buttons. The CSS that controls the slides themselves
is:
#top-feature { /* this is the parent container */
height: 300px;
padding: 20px 0 0 0;
border-bottom: 2px solid #452219;
background: url('/images/1.jpg') top left repeat;
overflow: hidden;
}
.slide { /* this is the child class for slides */
width: 700px;
margin: 30px;
padding: 20px;
background: url('/images/darkbrown-80.png') top left repeat;
height: 220px;
float: left;
border-bottom: 1px solid #320104;
}
I believe I've satisfied the requirements of the plugin (i.e. fixed
height and width for slides, overflow hidden on parent container). To
be clear, it works just fine with any fx method other than
scrollHorz or scrollVert; in both, the slides overlap at the top
or bottom as they transition. I'm sure I'm missing something simple.
I've tried a bit of tweaking on the CSS itself, but nothing changes.
Any ideas? Thanks all.
[jQuery] Odd overlap issue with cycle plugin
I have a slideshow set up here, for reference:
http://www.littlerobothead.com/secret.php
You'll be able to see the slides as they overlap when using the next
or previous buttons. The CSS that controls the slides themselves
is:
#top-feature { /* this is the parent container */
height: 300px;
padding: 20px 0 0 0;
border-bottom: 2px solid #452219;
background: url('/images/1.jpg') top left repeat;
overflow: hidden;
}
.slide { /* this is the child class for slides */
width: 700px;
margin: 30px;
padding: 20px;
background: url('/images/darkbrown-80.png') top left repeat;
height: 220px;
float: left;
border-bottom: 1px solid #320104;
}
I believe I've satisfied the requirements of the plugin (i.e. fixed
height and width for slides, overflow hidden on parent container). To
be clear, it works just fine with any fx method other than
scrollHorz or scrollVert; in both, the slides overlap at the top
or bottom as they transition. I'm sure I'm missing something simple.
I've tried a bit of tweaking on the CSS itself, but nothing changes.
Any ideas? Thanks all.
