[jQuery] jQuery broken in FF3.5b99 (Preview)
I'm sure support for a beta release is a bad thing to be asking for, but I mostly just want to make sure I'm not going crazy (and to inform the devs of a possible issue). I have the current FF 3.5b99 (Preview Release) and am playing around on a WordPress (v2.7.1) installation on my dev box, and it seems that when I try to open the media library while editing a page, it opens in a new window (which it should open in a shadowbox type modal window). I've also noticed that some of the menu fly outs and some other various JS things aren't working right. It all works in Google Chrome just fine. So I'm sure it's a FF issue, but just wanted the devs to be aware of this before FF 3.5 and it's new JavaScript engine were released and broke lots of stuff all over the place. Here is the error I get in FireBug when I load the page: cannot access optimized closure - /wordpress/wp-includes/js/jquery/ ui.core.js?ver=1.5.2 I am not 100% sure this is a jQuery bug, it may be one of the plugins I'm using, but the fact that it works in Chrome makes me wonder. Anywho... if anybody else wants to confirm this issue and inform the devs, it would help to ease my current state of confusion. If any more detail is required, please let me know and I'll try and get it.
[jQuery] Re: toggle checkbox when clicking td
Another method that I use to do the very same thing (1.2.6)
$('tbody tr').click( function(event) {
if ($(event.target).is('input')) {
return;
}
var $input = $(this).find('input');
if ($input.length) {
$input.attr('checked', ! $input.attr('checked'));
}
});
[jQuery] Re: Trouble with Facebox and Ajax submitted form
Apparently Facebox doesn't act on the element itself. When Facebox displays an element, it makes a copy of that element and displays the copy. The copy therefore does not have the actions associated to it anymore. I worked around this issue by converting my selector to a class selector instead of an ID, and used livequery to act on all added elements. This fixed the issue. On Dec 3, 10:57 pm, benjam [EMAIL PROTECTED] wrote: I have a form inside a div that is shown via Facebox. I seem to be having troubles getting the form to submit via ajax, it always wants to submit normally. Here is a test page:http://www.iohelix.net/misc/chat_test/ Any suggestions would be appreciated.
[jQuery] Trouble with Facebox and Ajax submitted form
I have a form inside a div that is shown via Facebox. I seem to be having troubles getting the form to submit via ajax, it always wants to submit normally. Here is a test page: http://www.iohelix.net/misc/chat_test/ Any suggestions would be appreciated.
[jQuery] Re: jqRevolve - new, simplistic carousel-like plugin released!
Doesn't work at all for me. FF 3.0.3 on Vista On Nov 12, 3:38 pm, Brice Burgess [EMAIL PROTECTED] wrote: Ladies and Gentlemen, I'm writing to inform you all of a new addition to the jQuery plugin family... Please welcome jqRevolve! jqRevolve is a carousel-like plugin for jQuery. It provides a component that scrolls arbitrary content (Images, Markup, Text, Iframes, You Name it) in a defined 'clip region'. Yes, there are many out there. I needed a lightweight component that features automatic clip region sizing as well as pressure based scrolling. It is easy to use and customize. Checkout the plugin page for demonstrations. It is adequately boring enough for science. The examples can use some sprucing up by a designer -- if any volunteer. http://dev.iceburg.net/jquery/jqRevolve/ Regards, ~ Brice
[jQuery] Re: Hover on all elements: $(*).hover(...)
Nicely done Karl, I knew there was a better way.
On Sep 17, 1:54 pm, Karl Swedberg [EMAIL PROTECTED] wrote:
This one worked for me...
$('body').bind('mouseover', function(event) {
$(event.target).addClass('selected');}).bind('mouseout', function(event) {
$(event.target).removeClass('selected');
});
You'll run into problems if you have properties assigned to more
specific selectors in your stylesheet, but otherwise, it should work
fine.
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Sep 17, 2008, at 9:50 AM, benjam wrote:
This is insanely kludgy, not very pretty, and probably slower than a
more elegant solution.
But it works.
$('*').hover(
function(event) {
var $this = $(this);
$this.addClass('selected');
$this.parents( ).removeClass('selected');
},
function(event) {
var $this = $(this);
$this.removeClass('selected');
$this.parents( ).removeClass('selected');
$this.parent( ).addClass('selected');
$this.children( ).removeClass('selected');
}
);
I'm sure there are better solutions out there, but this was the
fastest and easiest method.
On Sep 17, 2:04 am, Balazs Endresz [EMAIL PROTECTED] wrote:
I'm not sure I get it, but if you want to grab the strong inside a
p when the event is only bound to p then you can get it simply by
event.target:
$('body').find('*').filter(function(){
return !$(this).children().length;})
.add('p').not('p *')
.hover(function(event){
var t=event.target //this will be the strong tag inside the p
if ($(this).children().length() 0) {
return False
}
$(this).addClass('selected');
},
function(){
$(this).removeClass('selected');
}
);
You can also try this with event delegation, which will be much
faster
with a lot of
elements:http://dev.distilldesign.com/log/2008/jan/27/event-delegation-jquery/...
On Sep 16, 7:17 pm, John Boxall [EMAIL PROTECTED] wrote:
Hi Balazs,
Thanks for the reply - looking at your suggestion, my idea was to
apply it to the code like this:
$(function() {
$(*).hover(
function(){
// If the element has more than one child stop
propagating.
if ($(this).children().length() 0) {
return False
}
$(this).addClass('selected');
},
function(){
$(this).removeClass('selected');
}
);
}
This is _close_ to what I want, but what I'd really like is to grab
DOM element you are hovering over with the minimum number of
children
- not necessarily zero.
It's my understanding that with the above, if you hovered over a p
with a strong inside you couldn't select the p because it would
have a child!
Thanks,
John
Should only return true if the selected $(this) has no children.
This is _close_ to what I want - but what I'd really like is to grab
the element
On Sep 14, 4:10 am, Balazs Endresz [EMAIL PROTECTED] wrote:
Hey John,
I think this will do that:
$('body').find('*').filter(function(){
return !$(this).children().length;})
.add('p').not('p *') //without this, if a paragraph contains tags
thehoverwon't be applied to the most of the text
On Sep 12, 9:29 pm, John Boxall [EMAIL PROTECTED] wrote:
Heyo jQuery hackers,
I'm putting together a little script that adds a class
selected to
an element when youhoverover it.
When you stop hovering the class selected class is removed.
I would like the class only to be apply to the lowest element in
the
DOM.
For example say I was hovering over a p deep inside a document
- I
would like to only add the class selected to that p tag, not
the
div, body and html tags surrounding it.
So far my thinking has been to use something like this:
$(function() {
$(*).hover(
function(){
$(this).addClass('selected');
},
function(){
$(this).removeClass('selected');
}
);
}
Which adds the selected class to any element Ihoverover fine. It
also removes it.
The problem is thehoveris firing all the way up the chain and
hitting all elements from the lowest to the highest so I've got
a ton
of ugly selected elements when I really just wanted the lowest
one...
Is there any way I can restrict it?
Thanks,
John
[jQuery] Re: Hover on all elements: $(*).hover(...)
This is insanely kludgy, not very pretty, and probably slower than a
more elegant solution.
But it works.
$('*').hover(
function(event) {
var $this = $(this);
$this.addClass('selected');
$this.parents( ).removeClass('selected');
},
function(event) {
var $this = $(this);
$this.removeClass('selected');
$this.parents( ).removeClass('selected');
$this.parent( ).addClass('selected');
$this.children( ).removeClass('selected');
}
);
I'm sure there are better solutions out there, but this was the
fastest and easiest method.
On Sep 17, 2:04 am, Balazs Endresz [EMAIL PROTECTED] wrote:
I'm not sure I get it, but if you want to grab the strong inside a
p when the event is only bound to p then you can get it simply by
event.target:
$('body').find('*').filter(function(){
return !$(this).children().length;})
.add('p').not('p *')
.hover(function(event){
var t=event.target //this will be the strong tag inside the p
if ($(this).children().length() 0) {
return False
}
$(this).addClass('selected');
},
function(){
$(this).removeClass('selected');
}
);
You can also try this with event delegation, which will be much faster
with a lot of
elements:http://dev.distilldesign.com/log/2008/jan/27/event-delegation-jquery/http://lab.distilldesign.com/event-delegation/
On Sep 16, 7:17 pm, John Boxall [EMAIL PROTECTED] wrote:
Hi Balazs,
Thanks for the reply - looking at your suggestion, my idea was to
apply it to the code like this:
$(function() {
$(*).hover(
function(){
// If the element has more than one child stop
propagating.
if ($(this).children().length() 0) {
return False
}
$(this).addClass('selected');
},
function(){
$(this).removeClass('selected');
}
);
}
This is _close_ to what I want, but what I'd really like is to grab
DOM element you are hovering over with the minimum number of children
- not necessarily zero.
It's my understanding that with the above, if you hovered over a p
with a strong inside you couldn't select the p because it would
have a child!
Thanks,
John
Should only return true if the selected $(this) has no children.
This is _close_ to what I want - but what I'd really like is to grab
the element
On Sep 14, 4:10 am, Balazs Endresz [EMAIL PROTECTED] wrote:
Hey John,
I think this will do that:
$('body').find('*').filter(function(){
return !$(this).children().length;})
.add('p').not('p *') //without this, if a paragraph contains tags
thehoverwon't be applied to the most of the text
On Sep 12, 9:29 pm, John Boxall [EMAIL PROTECTED] wrote:
Heyo jQuery hackers,
I'm putting together a little script that adds a class selected to
an element when youhoverover it.
When you stop hovering the class selected class is removed.
I would like the class only to be apply to the lowest element in the
DOM.
For example say I was hovering over a p deep inside a document - I
would like to only add the class selected to that p tag, not the
div, body and html tags surrounding it.
So far my thinking has been to use something like this:
$(function() {
$(*).hover(
function(){
$(this).addClass('selected');
},
function(){
$(this).removeClass('selected');
}
);
}
Which adds the selected class to any element Ihoverover fine. It
also removes it.
The problem is thehoveris firing all the way up the chain and
hitting all elements from the lowest to the highest so I've got a ton
of ugly selected elements when I really just wanted the lowest one...
Is there any way I can restrict it?
Thanks,
John
[jQuery] Issues with .css( )
I have looked and looked, and I get the same error everytime I try to
use the .css( ) function with { }:
missing : after property id
Here is my code:
$(this).css({ font-weight: 'bold', font-size: 'larger' });
Maybe a fresh pair of eyes will help?
[jQuery] Running script onLoad instead of ready
Maybe I'm missing something totally obvious, but I was trying to get
an alert to fire after some of the page loads, (but before ().ready).
I tried the following:
$('body').load( function( ) { alert('Hello World'); } );
with no effect.
I also tried it with some of the other elements on the page. Also
with no effect.
But the following works perfectly, albeit a little later than I'd
like:
$(document).ready( function( ) { alert('Hello World'); } );
Basically, what I'm trying to do, is to get the alert to fire a tad
sooner for pages that might take a while to load completely, but not
quite as soon as it would if I just put the naked alert in some script
tags.
Am I missing something?
[jQuery] Re: Why (function($){ ...})(jQuery) instead of (function(){var $ = jQuery; ...})()?
I kinda figured that it was an anonymous function, but the outer
parens were kinda throwing me off.
Thanks for the info.
On Jul 4, 2:38 pm, Aaron Heimlich [EMAIL PROTECTED] wrote:
On Fri, Jul 4, 2008 at 3:08 PM, benjam [EMAIL PROTECTED] wrote:
What exactly does (function($){ ... })(jQuery) do?
This
function($){ ... }
is an anonymous function. Because functions are first-class objects in
JavaScript, they can be treated just like any other object; which means that
you can immediately execute an anonymous function by doing this:
function($){ ... }(jQuery)
However, because of a quirk in JavaScript syntax, to be able to do this
properly, you need to put parentheses around the anonymous function, like
this:
(function($){ ... })(jQuery)
--
Aaron Heimlich
Web Developer
[EMAIL PROTECTED]
[jQuery] Re: checkbox manipulation and toggle()
Although you need to make sure that you set the for attribute o the
label tag to the id attribute of the input tag, NOT the name
attribute.
One way to get around this issue (and the recommended method) is to
set the name and id attribute of the input tag the same.
If you wrap the input tag with the label tag, there is no need to
include the for attribute, bu if the label is not wrapping the input
tag, it needs to be included.
e.g.-
labelPlease check this box input type=checkbox name=agree //
label
label for=my_inputThis is my checkbox/label input
type=checkbox name=my_input id=my_input /
On May 29, 12:16 pm, jquertil [EMAIL PROTECTED] wrote:
Hello...
short version: how do I exclude an element in my selector expression?
long version:
you know those checkboxes in windows where you can actuyally click the
label to check the box?
I'm recreating this with a toggle() like this:
DIV id=CheckContainerINPUT type=checkbox id=Check/ Click
here/div
$(#CheckContainer).toggle(
function(){ $('#Check')[0].checked=true;},
function(){ $('#Check')[0].checked=false;}
);
All fine and dandy as you click the DIV to toggle the checkbox. But
try to click the checkbox itself and the darn thing won't work.
I think the solution is in using the right sleector, like some kind
of :not or !:input or something ???
Ii DONT want to have to add a span element around the label to assign
the click to, I'd like to just exclude the checkbox.
[jQuery] Problems appending inputs with quotes in the value
I am trying to append an input box with quotes in the value, and no
matter how many escapes I put on the quote (thinking maybe the escapes
needed to be escaped), it fails to insert properly, like jQuery just
ignores all escapes and goes straight for the quote.
i.e.- If I try something like the following:
$('form').append('input type=text name=foo value=Quote - \This
is a quote\ /');
The element that gets appended to the form has the following html:
input type=text name=foo value=Quote - This is a quote /
Obviously, this is incorrect, and I can't get around this, it's user
driven content, and I can't just ask my users to stay away from
quotes.
Is there anything I can do to rectify this issue? Besides going in
and editing the value after insert?
[jQuery] Re: Problems appending inputs with quotes in the value
Charles wrote:
You could change the quoted quotes to an html entity.
$('form').append('input type=text name=foo value=Quote - #34;This is
a quote#34; /');
Gotta love that second pair of eyes.
Didn't even think of that. Works great, thanks.
[jQuery] Re: Problems with Interface Sortables
Ok, if nobody has any suggestions for my problem, is there another way that I can allow users to re-order elements on screen and get the order of those elements upon form submission?
[jQuery] Re: Problems with Interface Sortables
Ok, I got it fixed. For anybody else who may be having the same issues, try removing the following from your Sortable setup: containment: 'parent' that is what was breaking the script, not sure why, but it was.
[jQuery] Re: Problems with Interface Sortables
Anybody?
[jQuery] Problems with Interface Sortables
I have a demo page here: http://www.iohelix.net/formbuilder/formtest.html When you go to the page, add a few items (say 5 or so), and then try to reorder them (by grabbing the blue bar), if you reorder from the bottom up, and go below the containing div, the element you are moving disappears and it looks all weird. If you try to reorder any of the others by moving them down, it will skip any below it and go straight to the bottom (sometimes if you are really careful, you can insert it into a higher one, but it's really tricky). Also, after moving a few around, the location you are grabbing relative to the element goes outside of the element. It's hard to explain, just move things around for a bit, and I'm sure you'll see it. What, if anything, have I done wrong, and how might I get it to work as expected. Thanks for any help you may be able to offer. ~Benjam
[jQuery] Problem with unbind and submit
I have a form where the contents of the form are validated with the
jQuery Validation Plugin.
I am also using a custom submit handler to ajax post the data to a
third party, but I also wish to post the data to the form normally.
Inside of the validation plugin, there is a section that returns false
to the submit call if there is a custom submit function (which makes
sense).
But I wish to, if the return from the third party is success, submit
the form normally.
I am trying a work around, that works on one page, but not on another.
The work around is as follows:
I ajax post to the third party, and if successful, run this function:
function defaultSubmit( ) {
$('form').unbind('submit');
$('#submit').click( );
}
I have also tried other permutations for the second line of this
function such as:
$('form').submit( );
$('form')[0].submit( );
document.form.submit( );
all with the same result.
But now when I run this, the browser hangs. Upon inspection of my
HTTP Headers, I notice that nothing is being sent to the server, the
browser thinks it's sending something, when it really isn't.
So my question is this... Is the unbind removing the default submit
functionality from the browser? i.e. when I unbind the submit
functions from the form, is it also removing the default submit
function?
How might I be able to perform this double submit without breaking
anything?
Thanks for any help.
I am using Firefox 2 on Vista, not that it should matter.
[jQuery] [Webpage] Mastermind game
I have created a Mastermind game in Javascript and jQuery, and would like to present it here for comments and suggestions. It was kind of a proof of concept for me for several things: 1- Inline images (Base64 encoded) 2- single page script (everything is included in one html file) 3- Javascript classes (I've never really played with these before) and i just wanted to add a new game to my games list So... let me know where I might make improvements. The main 'feature' of the game is the instructions, click that and follow along. http://www.iohelix.net/mastermind.html ~Benjam
[jQuery] Re: Select Option (find class of option)
Please tell us what you did to get it working.
And this goes for all other people asking questions and then figuring
out a solution on your own...
There may be other people with a similar problem who see your question
and think there will be a solution to their problem at the end of the
thread, but all they get is I fixed it, never mind.
If you figure out a solution to your own problem, please post that
solution here, so we can all benefit from your genius.
Thanks
On Nov 5, 4:29 pm, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
Oh got it, nevermind.
On Nov 6, 9:06 am, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
Cheers for that!
It doesn't work though. I should point out that the divs with the IDs
are elsewhere in the document, not near the select - but that
shouldn't matter should it?
Is there some way I can debug it to print out the ID so I can make
sure it's doing what I want it to do?
On Nov 5, 7:23 pm, Wizzud [EMAIL PROTECTED] wrote:
This is all you need inside the change() function...
$('#' + $('option:selected', this).attr('class')).show();
On Nov 5, 1:38 am, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
$(document).ready(function() {
$('div.hidden').hide();
$('#node-58 select.state').change(function () {
$(this).find(option:selected); // I think this line needs
a function to wrap the next bit of code?
var equiv = $('#' + this.className);
if(equiv.length){
equiv.show();
}
});
});
Explanation: I have a bunch of divs with class 'hidden' that
automatically have to hide. Those divs also have IDs each
corresponding to a CLASS on an option tag within a select box.
The idea is that when you choose an option with class .foo it will
show the div with ID #foo.
So far my .hidden divs get hidden, but they never get activated by the
select box.
[jQuery] Re: jQuery 1.2.1 is auto evaling scripts from AJAX before DOM is ready
No, I used the 'places the scripts at the end of the inserted HTML'
method that I didn't want to use.
It works, but this may be something that the developers will want to
tweak.
Thanks for all your suggestions though.
On Sep 21, 4:18 am, Andy [EMAIL PROTECTED] wrote:
Benjam,
Did you have any luck resolving this issue other than using the
setTimeout method?
thanks.
On Sep 17, 11:20 pm,benjam[EMAIL PROTECTED] wrote:
I have a script that runs a clickable calendar date field, and this
script is being called in a form that is passed through AJAX.
When the form html is returned from the AJAX script, it is added to
the page and displayed.
The problem is that the script (which cames after the input field it
is referring to) is trying to look for said input field and is failing
to find it. This leads me to believe that the javascript is being run
before the html has been fully integrated into the page, which is also
why there is nothing shown on the page when the errors pop up.
Here is a sample of the script that is being run:
input name=startedDate id=f-calendar-field-8da04fa6e1
class=datedDate value=1969-12-31 type=text /a href=# id=f-
calendar-trigger-8da04fa6e1img border=0 src=./jscalendar/
calendar.png alt=Select Date //ascript type=text/
javascriptCalendar.setup({ ifFormat : %Y-%m-%d, daFormat : %Y/
%m/%d, firstDay : 0, showOthers : true, inputField : f-
calendar-field-8da04fa6e1, button : f-calendar-
trigger-8da04fa6e1} );/script
Is there a way to delay eval of the scripts until after the html
content has been integrated into the page?
[jQuery] jQuery 1.2.1 is auto evaling scripts from AJAX before DOM is ready
I have a script that runs a clickable calendar date field, and this
script is being called in a form that is passed through AJAX.
When the form html is returned from the AJAX script, it is added to
the page and displayed.
The problem is that the script (which cames after the input field it
is referring to) is trying to look for said input field and is failing
to find it. This leads me to believe that the javascript is being run
before the html has been fully integrated into the page, which is also
why there is nothing shown on the page when the errors pop up.
Here is a sample of the script that is being run:
input name=startedDate id=f-calendar-field-8da04fa6e1
class=datedDate value=1969-12-31 type=text /a href=# id=f-
calendar-trigger-8da04fa6e1img border=0 src=./jscalendar/
calendar.png alt=Select Date //ascript type=text/
javascriptCalendar.setup({ ifFormat : %Y-%m-%d, daFormat : %Y/
%m/%d, firstDay : 0, showOthers : true, inputField : f-
calendar-field-8da04fa6e1, button : f-calendar-
trigger-8da04fa6e1} );/script
Is there a way to delay eval of the scripts until after the html
content has been integrated into the page?
[jQuery] jQuery runs inserted scripts prior to inserting HTML
I posted about this yesterday, but it never showed up... I have a script that grabs some HTML (with included javascript) via AJAX and injects the HTML into the page. The problem is that the scripts within that HTML block get executed before the HTML that it is referencing is inserted into the page (and therefore missing from the DOM). How can I pause execution of the script until the HTML is fully inserted into the DOM? The script is located in the HTML after the HTML it is referring to... e.g.- form input id=a script for element with id=a /form When I move the scripts below the form tag, the script executes as it should and everything works. But this method is a work-around, and I'd rather not do it this way. ~Benjam
[jQuery] Re: jQuery runs inserted scripts prior to inserting HTML
The problem is... the code is not generated by me, it is generated by a PHP function. As I stated in my first post, when I move the script to the bottom of the code block, below the form tag, it runs fine. But I don't want to do that. And this is just exposing an underlying issue of script not being executed in the proper order. I am also having issues in certain situations where the callback function for fadeIn (and show) is executing before the element is faded in all the way. These two things may or may not be related. ~Benjam On Sep 18, 9:30 am, Liam Byrne [EMAIL PROTECTED] wrote: Place the code into a function and then call that function immediately after the HTML is injected. L Benjam Welker wrote: I posted about this yesterday, but it never showed up... I have a script that grabs some HTML (with included javascript) via AJAX and injects the HTML into the page. The problem is that the scripts within that HTML block get executed before the HTML that it is referencing is inserted into the page (and therefore missing from the DOM). How can I pause execution of the script until the HTML is fully inserted into the DOM? The script is located in the HTML after the HTML it is referring to... e.g.- form input id=a script for element with id=a /form When I move the scripts below the form tag, the script executes as it should and everything works. But this method is a work-around, and I'd rather not do it this way. ~Benjam -- Regards, Liam Liam Byrne *OnSight.ie */Winner of Limerick City Enterprise Board's Best New Technology Business 2004 Award / web:http://www.onsight.ieemail: [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] phone: 061 22 99 86 mobile:087 2730 270
[jQuery] Re: ANNOUNCE: tablesorter 2.0 beta released!
I would like to request a feature... It would be nice if one could optionally set the sorter to ignore all HTML tags in the table cells. For instance, have a setting in the config, something like: ignoreTags: true, Where if it were set, the sorter would strip out all the HTML tags before sorting. I request this, because I have situations where I would like to sort on row IDs, where the row IDs are links to the specific row's data, but there is no sort type for that situation. If I set it to integer, it fails, if I set it to genericLink, it fails, if I leave it to figure it out on its own, it fails. I have created a custom type for my situation, but would rather have it strip out tags all the time, because the tags are not visible, it makes the sort rather confusing and appear 'broken'. It would also make the sort discover script a little better, where in my situation, instead of sorting as text, it would sort as integer (because once the tags are gone, all that is left is integers). Anywho... great script. And I await the final release.
[jQuery] Re: ANNOUNCE: tablesorter 2.0 beta released!
Could you also set the debugging output in the console to show what type is being used to do the sorting? e.g.- Sorting as 'currency' on 1 columns and dir 1 time: 2ms or Sorting as 'currency, date' on 2 columns and dir 0 time: 12ms Thanks.
