[jQuery] UI Slider with group with shared limit
Hello Guys, I'm new to the UI library and looking for some help achieving a certain thing. I want to have a group of sliders which have a shared value which they can reach as a maximum. Here's a visual example of what I'm looking to do: http://tinypic.com/view.php?pic=9ibp05s=6 Notice how we have 100% in total that can be used by the 3 sliders, as you slide up the number of available percent you have left to assign should decrease, to the point where it reaches 0, you will then no longer be able to slide any of the sliders upwards without first sliding one or more downwards to free up available % to be assigned. I suppose its very much like assigning XP in an RPG or something like that, has anyone seen an example of the UI sliders being used like this? I've been Googling the past 30 minutes and found nothing. Thanks for your advice. Robert
[jQuery] Dialog only opening the once
Hello Guys, I'm using the jQuery UI plugin to create a modal dialog box to ensure the user is ready to commit an action. The code sample can be found here: http://pastebin.com/m1834215a Now, when the page first loads and I click a id=cancel the dialog box appears, however, if I close the dialog box and then click on the link a second time, nothing happens. I have to reload the page before being able to click on the link again. Can anyone suggest why this might be an issue? Surely it should open consistently every time? Thanks, Robert
[jQuery] Re: Dialog only opening the once
Hey Richard, Thanks! That worked perfectly, I'd never have figured that out on my own, a great help. Rob On 22 Dec, 10:29, Richard D. Worth rdwo...@gmail.com wrote: See http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/ Also, if you should have any more questions, note there's a separate list for jQuery UI: http://groups.google.com/group/jquery-ui - Richard On Tue, Dec 22, 2009 at 5:22 AM, Sir Rawlins robert.rawl...@thinkbluemedia.co.uk wrote: Hello Guys, I'm using the jQuery UI plugin to create a modal dialog box to ensure the user is ready to commit an action. The code sample can be found here: http://pastebin.com/m1834215a Now, when the page first loads and I click a id=cancel the dialog box appears, however, if I close the dialog box and then click on the link a second time, nothing happens. I have to reload the page before being able to click on the link again. Can anyone suggest why this might be an issue? Surely it should open consistently every time? Thanks, Robert
[jQuery] Callback not firing
Hello Guys, I'm sure that I'm doing something blatantly wrong here but I can't spot what's wrong. I've got the following code snippet. http://pastebin.com/m71102c16 Now, when calling the method change_testimonial() I get the log entry in the console as expected however the callback to show_new_testimonial () after the fade out occurs doesn't appear to get fired. Can anyone offer any suggestions? I know that the show_new_testimonial () method works when called independently so I'm guessing this is just a syntax issue on my part for the callback. Thanks, Rob
[jQuery] help with an animation effect
Morning all, I'm looking for some help with an animation effect and your thoughts on how best to achieve it. At this stage we simply have a graphical representation, we can splice the images up any way we like, I'm really looking for your suggestions. The first stage is just the basic static object: http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=viewcurrent=satic.png Then, we have a slight mouse-over effect on the small tab at the bottom which slightly reveals the content (width a nice slidey effect). On a mouse-out the tab would go back to it's static state. http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=viewcurrent=mouse-over.png Thirdly, once the tab has been clicked it should pull out (nice slidey effect again), notice this isn't like the slideDown() effect, the bottom of the thing comes out first, as if it were a card being pulled out from behind another by hand. Also note that the text/icon on the tab has changed. http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=viewcurrent=sliding.png Finally we have it's resting state once it's pulled out completely, a click would simply send it back up again the way it came. http://s949.photobucket.com/albums/ad332/thinkblue_album/?action=viewcurrent=out.png Now this with any luck would degrade so that if JS was disabled then the tab would default to being fully pulled out so the content was exposed for anyone viewing the site without JS enabled. I'd imagine we'll be using the animate() method but this isn't something I've worked with before, I'd appreciate any help you can offer on how I should be structuring my HTML and JS for this. Thanks guys I appreciate it. Robert
[jQuery] slide effects not working.
Hello Guys, I've got a couple of div's one of which I'm trying to set a slide effect on when the other is toggled, both contain a single image. The code example can be found here http://pastebin.com/m6c3f43a8 Now, the 'expandable' div is hidden when the page loads as I would expect however clicking on the 'expander' div doesnt appear to trigger any change in the 'expandable' div, also no JS error is thrown. Any ideas on this? I'd appreciate it. Rob
[jQuery] Dynamic mailto: link.
Hello Guys, I have a 'mailto' link the emails of which I want to be dynamic based on a bunch of checkboxes. So lets say my markup looks like this: input type=checkbox name=UserEmails value=some...@something.org / input type=checkbox name=UserEmails value=some...@another.com / input type=checkbox name=UserEmails value=some...@this.co.uk / input type=checkbox name=UserEmails value=some...@blah.net / a href=mailto:;Email These Users/a I want to be able to tick the users I want to email and then click the link. How would I populate the mailto link with the values of the checkboxes? am I best doing this with an Click() function on the checkbox, or on a click() for the link perhaps? I'd appreciate your thoughts on this guys, Rob
[jQuery] Re: Dynamic mailto: link.
Hey Ryan!
Thanks for your advice, I appreciate it.
I've got this now:
input type=checkbox name=CMStudent_IDs value=s...@email.com //
td
a class=blue_button id=mailspanEmail Selected Students/
span/a
$(input[name='CMStudent_IDs']).click(function(){
var mylink = [];
$(input[name='CMStudent_IDs':checked]).each(function(i){
mylink.push($(this).val());
});
$(a#mail).setAttr(href, mailto:; +
mylink.join
(,));
});
However it doesn't seem to work for me, I check a couple of the
checkboxes but the link is never given an href so clicking it does
nothing. Can you spot anything out of sorts with the code?
Many thanks mate,
Rob
On Mar 5, 1:34 pm, ryan.j ryan.joyce...@googlemail.com wrote:
and you'd probably want to add :checked onto the end of the selector
too. ;)
[jQuery] Re: Dynamic mailto: link.
MorningZ,
That works a real treat! Thank you very much indeed!!!
One thing further I'd like to pick your brains on. I have a 'select
all' script which works like this:
$(.select_all_cm).click(function() {
var checked_status = this.checked;
$(input[name=CMStudent_IDs]).each(function()
{
this.checked = checked_status;
});
});
However, using this doesn't trigger the change() event on the
checkboxes, is there another event we can bind to that function
that'll be triggers by the select_all as well?
Thanks mate,
Rob
On Mar 5, 3:32 pm, MorningZ morni...@gmail.com wrote:
Here's a quick example i whipped up (and works)
http://paste.pocoo.org/show/106586/
To note about your code, setAttr isn't a jQuery call, it's .attr
On Mar 5, 10:04 am, Sir Rawlins robert.rawl...@thinkbluemedia.co.uk
wrote:
Hey Ryan!
Thanks for your advice, I appreciate it.
I've got this now:
input type=checkbox name=CMStudent_IDs value=s...@email.com //
td
a class=blue_button id=mailspanEmail Selected Students/
span/a
$(input[name='CMStudent_IDs']).click(function(){
var mylink = [];
$(input[name='CMStudent_IDs':checked]).each(function(i){
mylink.push($(this).val());
});
$(a#mail).setAttr(href, mailto:; +
mylink.join
(,));
});
However it doesn't seem to work for me, I check a couple of the
checkboxes but the link is never given an href so clicking it does
nothing. Can you spot anything out of sorts with the code?
Many thanks mate,
Rob
On Mar 5, 1:34 pm, ryan.j ryan.joyce...@googlemail.com wrote:
and you'd probably want to add :checked onto the end of the selector
too. ;)
[jQuery] Re: Dynamic mailto: link.
Good man!
Thank you a great deal!
Rob
On Mar 5, 4:33 pm, MorningZ morni...@gmail.com wrote:
Here's some revised code with a Check All option
http://paste.pocoo.org/show/106596/
On Mar 5, 11:00 am, Sir Rawlins robert.rawl...@thinkbluemedia.co.uk
wrote:
MorningZ,
That works a real treat! Thank you very much indeed!!!
One thing further I'd like to pick your brains on. I have a 'select
all' script which works like this:
$(.select_all_cm).click(function() {
var checked_status = this.checked;
$(input[name=CMStudent_IDs]).each(function()
{
this.checked = checked_status;
});
});
However, using this doesn't trigger the change() event on the
checkboxes, is there another event we can bind to that function
that'll be triggers by the select_all as well?
Thanks mate,
Rob
On Mar 5, 3:32 pm, MorningZ morni...@gmail.com wrote:
Here's a quick example i whipped up (and works)
http://paste.pocoo.org/show/106586/
To note about your code, setAttr isn't a jQuery call, it's .attr
On Mar 5, 10:04 am, Sir Rawlins robert.rawl...@thinkbluemedia.co.uk
wrote:
Hey Ryan!
Thanks for your advice, I appreciate it.
I've got this now:
input type=checkbox name=CMStudent_IDs value=s...@email.com //
td
a class=blue_button id=mailspanEmail Selected Students/
span/a
$(input[name='CMStudent_IDs']).click(function(){
var mylink = [];
$(input[name='CMStudent_IDs':checked]).each(function(i){
mylink.push($(this).val());
});
$(a#mail).setAttr(href, mailto:; +
mylink.join
(,));
});
However it doesn't seem to work for me, I check a couple of the
checkboxes but the link is never given an href so clicking it does
nothing. Can you spot anything out of sorts with the code?
Many thanks mate,
Rob
On Mar 5, 1:34 pm, ryan.j ryan.joyce...@googlemail.com wrote:
and you'd probably want to add :checked onto the end of the selector
too. ;)
[jQuery] FadeTo() on tr
Hello Guys, I've been using FadeTo() on tr elements and it doesn't appear to work in IE, this is a bug in IE? At the moment I'm having to use .children().fadeTo() on the tr elements I want to fade and on large data sets its not very performant. Thanks guys, Robert
[jQuery] FadeTo() On Table Row
I posted this a moment ago but it seems to have disappeared off the list again for some reason? I'm using FadeTo() on an tr element and it appears not to work in IE so I'm having to use tr.children().fadeTo() which absolutely kills performance in IE. I'll guess this is down to the way that IE handles opacity on its tr elements? is that correct? or is this a jQuery bug? Any information on this would be really great!! Rob
[jQuery] Re: FadeTo() On Table Row
Thanks for the reply brian I appreciate it. I ended up not bothering with the fadeTo() and just set a class on the TR which in-turn styled the TD's with some opacity using CSS, this way I get the desired fade effect but without the nice animation, it'll do as a compromise until M$ pull their thumb out. However, do you think this is worth reporting to the jQuery bugs list, perhaps its a quirk they can work in? Rob On Feb 27, 2:29 pm, Brian Schilt motoxr...@gmail.com wrote: Yeah, thats IE for ya. I've done something similar and I really haven't come across a better method of doing it then what you are currently doing. You can check out this past thread that is related...http://groups.google.com/group/jquery-en/browse_thread/thread/5027a7d... Brian On Feb 27, 5:15 am, Sir Rawlins robert.rawl...@thinkbluemedia.co.uk wrote: I posted this a moment ago but it seems to have disappeared off the list again for some reason? I'm using FadeTo() on an tr element and it appears not to work in IE so I'm having to use tr.children().fadeTo() which absolutely kills performance in IE. I'll guess this is down to the way that IE handles opacity on its tr elements? is that correct? or is this a jQuery bug? Any information on this would be really great!! Rob
[jQuery] SlideUp/SlideDown Causing Alignment Issues.
Hello Guys, Take a look at the following example: http://www.coldbeans.co.uk/expanding_table.html Any ideas why the nested table alignment all goes tits-up when the JS gets involved? Cheers, Robert
[jQuery] Re: SlideUp/SlideDown Causing Alignment Issues.
mkmanning:
You were spot on! I've updated the code in the link above making the
div slidable and it works lovely :-) Thank you!
o.k. see if you can help me a little further. I'm looking to identify
all the parent rows which are not expanded and fade them out using a
fadeTo('slow', 0.3) or something like that, the idea being that when
someone expands a particular row all the other fade into the
background giving focus to the selects row. Is there any way for me to
detect the links current toggle state? or will I have to perhaps build
my own list of id's which are 'expanded' and 'not expanded'?
Thanks for your help,
Robert
On Feb 26, 9:42 am, mkmanning michaell...@gmail.com wrote:
The effects functions apply a style of display:block to the table. Try
wrapping the table in a div and slide the div .
On Feb 26, 1:36 am, Sir Rawlins robert.rawl...@thinkbluemedia.co.uk
wrote:
Hello Guys,
Take a look at the following
example:http://www.coldbeans.co.uk/expanding_table.html
Any ideas why the nested table alignment all goes tits-up when the JS
gets involved?
Cheers,
Robert
[jQuery] Re: SlideUp/SlideDown Causing Alignment Issues.
Ok, I've taken a stab at the next concept, I think I'm along the right
track, During the toggle function I'm trying to pull all .clickable
elements which dont have ID of the one just click, I can then fade
thier parent().parent() to do the job.
I think this will work, however, I cant get my filter expression to
work properly. Do you think I'm going in the right direction?
Thanks,
Robert
On Feb 26, 10:27 am, Sir Rawlins robert.rawl...@thinkbluemedia.co.uk
wrote:
mkmanning:
You were spot on! I've updated the code in the link above making the
div slidable and it works lovely :-) Thank you!
o.k. see if you can help me a little further. I'm looking to identify
all the parent rows which are not expanded and fade them out using a
fadeTo('slow', 0.3) or something like that, the idea being that when
someone expands a particular row all the other fade into the
background giving focus to the selects row. Is there any way for me to
detect the links current toggle state? or will I have to perhaps build
my own list of id's which are 'expanded' and 'not expanded'?
Thanks for your help,
Robert
On Feb 26, 9:42 am, mkmanning michaell...@gmail.com wrote:
The effects functions apply a style of display:block to the table. Try
wrapping the table in a div and slide the div .
On Feb 26, 1:36 am, Sir Rawlins robert.rawl...@thinkbluemedia.co.uk
wrote:
Hello Guys,
Take a look at the following
example:http://www.coldbeans.co.uk/expanding_table.html
Any ideas why the nested table alignment all goes tits-up when the JS
gets involved?
Cheers,
Robert
[jQuery] Expandable Sub Tables
Hello Guys, I've done a little work with expandable div's using slideDown() and slideUp(), I'm guessing I'll be using these again for this challenge but I'm having a little trouble traversing to the correct elements to enlarge and expand and was also a little unsure as to which I should be giving ID and Class attributes. I have the following markup: http://pastebin.com/m2dec600d You'll notice that I have a main table and for each row of data below is a nested table which contains subdata. I want to create a jQuery function that when 'something clickable' is clicked causes the corresponding nested table to expand and reveals its data, how would you suggest I traverse/id/class those elements? As a further challenge, I'm keen to have all other unexpanded rows of the parent table fade out a little so the attention is drawn to the clicked records and their nested tables :-) I get that I can use the fadeTo() method for this, however, its finding those elements which has me stumped. I think it will produce a nice visual effect I'm just a little lost as to traverse to the correct elements properly, I've tied using this.next () on the clickable link to find the nested table elements but that didn't seem to work. I'd appreciate any advice you guys can give me on this! Cheers, Robert
[jQuery] Help with checkbox events.
Hello Guys!
I've got a script here which I'm looking for your help in bettering.
At the moment the script gives me a 'select all' checkbox which when
checked ticks a bunch of other checkboxes, also I have another
function which enabled/disables an input button provided that 1 or
more of the checkboxes are checked.
$(input[name=select_all_campaigns]).click(function()
{
var checked_status = this.checked;
$(input[name=Campaign_IDs]).each(function()
{
this.checked = checked_status;
});
});
$(input[name='Campaign_IDs']).click(function() {
if
($(input[name='Campaign_IDs']:checked).length == 0) {
$('input:submit').fadeTo('slow', 0.3);
$('input:submit').attr('disabled',
true);
}
else {
$('input:submit').fadeTo('slow', 1.0);
$('input:submit').attr('disabled',
false);
}
});
Now, I want to add the following functionally to the script.:
1. when all checkboxes are checked invdividualy the select all box is
automaticaly checked.
2. If I click the 'select all' checkbox and then uncheck an individual
checkbox have the select all uncheck itself.
3. When I check the 'select all' box have the submit button fade in
and enable itself as more than one checkbox will then be enabled,
likewise, if unchecking select all to uncheck all boxes, disable the
button again.
Can you guys make some suggestions on this?
Many thanks guys,
Robert
[jQuery] Checkboxes enabled/disable button
Hello Guys, Fairly noobish here so hoping to learn a little something from this challenge. I have a form which contains a bunch of different checkboxes (all the same name) and a bunch of different button elements. I want to by default have these buttons disabled unless at least one checkbox is checked, if no checkboxes are checked then they need to be disabled. input type=checkbox name=my_checkbox / input type=checkbox name=my_checkbox / input type=checkbox name=my_checkbox / input type=checkbox name=my_checkbox / input type=checkbox name=my_checkbox / button type=buttonClick me to do something/button button type=buttonClick me to do something else/button button type=buttonClick me to do something cool/button button type=buttonClick me to do nothing/button If this were just a single checkbox then I could figure this out without too much hassle but I'm unsure as to how I should be checking is any of the boxes are checked, presumably we can do some sort of array count for instances of it or something? who knows? I'd appreciate your thoughts on this guys. Robert
[jQuery] Autorefreshing DIV
Good morning all, I have a requirement to automaticly refresh a DIV with some content from another URL every couple of seconds and was hoping to get your opinions on how this is best handled. For instance, I have a div which looks like this: div id=my_refreshable_div /div I dont need a full blown AJAX call as I simply want to fill this div with the content from a remote file every few seconds, for instance. / some_folder/my_div_content.html. I've currently got a working Spry (sorry for swearing) example on the page but as part of our move over to jQuery (woohoo) I'm looking for your thoughts on how best to achieve this!?! Many thanks for your thoughts guys, Robert
[jQuery] Ensure Textarea has been read.
Afternoon All, I have a form which includes a textarea, inside the text area I'm displaying the terms and conditions of a service which a user must agree too before continuing thier registration process. I want to have the checkbox which they must select to accept the terms and conditions to be disabled untill they have scrolled down to the bottom of the textarea. I'm a total and utter noob when it comes to jQuery and have a relativly limited knowledge of JS in general so would really appreciate your advice on how to handle this challenge. Thanks guys, Rob
