[jQuery] Hover on different ids
Hi!
I want an div#breadcrumb to animate when some other divs are hovered.
This is my code:
var BrHo = $('#breadcumb') + $('#nKnapper') + $('#Navigation');
BrHo.hover(function(){
$('#Breadcumb').animate({
opacity: '1',
fontSize: '14px',
}, 2000)
}, function(){
$('#Breadcumb').animate({
opacity: '0.1',
fontSize: '10px',
}, 2000)
});
It's not working.
It seems like I have to convert BrHo variable to an Array? Is that
right?
[jQuery] webpage load lightbox with video
Hi, I want the website to show a lighbox with video started as soon as it is loaded. I should also have an option to close the video. Can anybody please send me an example for this. Shravan.
[jQuery] Re: Problem controlling links of appended html
Hello,
You should try to launch your new jQuery behaviour in a separate
function like this :
... {
$(#main_area).append(div class=picsa href=pics/1.jpgimg
src=pics/1_thumb.jpg width=100px height=100px/a/div);
behaviourOnNewElements();
}
function behaviourOnNewElements() {
$(.pics a).click(function(event){
return null;
[jQuery] Re: Full-screen Mode?
jhm wrote: And how do we make certain what keyCode 122 actually does? You make a good point. I'd bet, however, for 99% of our users it would work. So maybe it would be worth the risk to provide the functionality for the majority. I'd love to find a better way though, do you have any suggestions? It is an important usability issue for our users. I'd just add some text that suggests that the user switch to fullscreen mode, also informing them that this can usually be done with the F11 key. -- Bertilo Wennergren http://bertilow.com
[jQuery] Re: Full-screen Mode?
i thing you're right for what it's worth, but the OP wanted methods of
doing it.
whether he chooses to slavishly follow WAI guidelines or make his
entire site dependant on the user not having changed their browser's
default configuration is between him and the client. if he's
developing for a project used internally (like a webapp, rather than a
site) it matters less that somebody running lynx can't use the app.
On Sep 26, 9:30 pm, Bertilo Wennergren berti...@gmail.com wrote:
ryan.j wrote:
Maybe just a way to have a
button that triggers the F11?
you could change the event.keyCode of another keypress
if (e.keyCode==13) { e.keyCode=122; return e.keyCode; }
And how do we make certain what keyCode 122 actually does?
Such things are configurable. It could mean quit the browser
or go to the home page or nothing.
--
Bertilo Wennergren http://bertilow.com
[jQuery] Re: Hover on different ids
Firebug says: BrHo.hover is not a function
[jQuery] Re: Ajax problem on Safari/Chrome browsers
Well, the problem still seems to be in the get() function. For
example, IE gives the following error: Object doesn't support this
property or method
With:
(function($) {
$.fn.followUser = function(userId) {
this.fadeOut(250, function(){
$.get('profile.php', { do: addfriend, id: userId }, function
(data){
return this.html('pFollower added/p').fadeIn(250);
});
});
}
})(jQuery);
If I remove the whole $.get() part, the error is gone. Chrome will
start fading out too. The code will then look like:
(function($) {
$.fn.followUser = function(userId) {
this.fadeOut(250, function(){
});
}
})(jQuery);
I even tried replace the get() with ajax(), but ran into the same
problem.
Btw, thanks for the attr('rel') suggestion. This is something I was
also looking for, but couldn't figure it out :) The html is now:
script type=text/Javascript
$(function(){
$('div#followButton a').click(function(){
$('div#followButton a').followUser($(this).attr('rel'));
});
});
/script
...
div id=followButton
a rel=2test1/a
/div
On Sep 26, 6:48 pm, Matt Quackenbush quackfu...@gmail.com wrote:
@ Mike - Thanks for making me take a closer look at the original code. I
get it now. My bad.
/me crawls back into his cave to hibernate some more
[jQuery] Re: Full-screen Mode?
ryan.j wrote: i thing you're right for what it's worth, but the OP wanted methods of doing it. whether he chooses to slavishly follow WAI guidelines or make his entire site dependant on the user not having changed their browser's default configuration is between him and the client. Does every modern browser use F11 for fullscreen mode in the default configuration? I believe it's something totally different in Safari (on OSX). if he's developing for a project used internally (like a webapp, rather than a site) it matters less that somebody running lynx can't use the app. True. -- Bertilo Wennergren http://bertilow.com
[jQuery] Re: Hover on different ids
try $('#breadcumb, #nKnapper, #Navigation') instead
On Sep 27, 7:48 am, Geir gso...@frisurf.no wrote:
Hi!
I want an div#breadcrumb to animate when some other divs are hovered.
This is my code:
var BrHo = $('#breadcumb') + $('#nKnapper') + $('#Navigation');
BrHo.hover(function(){
$('#Breadcumb').animate({
opacity: '1',
fontSize: '14px',
}, 2000)
}, function(){
$('#Breadcumb').animate({
opacity: '0.1',
fontSize: '10px',
}, 2000)
});
It's not working.
It seems like I have to convert BrHo variable to an Array? Is that
right?
[jQuery] Re: Full-screen Mode?
you could throw in some browser/OS detection easily enough, but i already agree it's not a good idea so i don't really want to end up arguing in it's favour! ;-) unless the client insisted on a particular method, i would (and in the past have) gone with this page looks best full-screen, in most browsers the shortcut is f11 text of some description. On Sep 27, 11:41 am, Bertilo Wennergren berti...@gmail.com wrote: ryan.j wrote: i thing you're right for what it's worth, but the OP wanted methods of doing it. whether he chooses to slavishly follow WAI guidelines or make his entire site dependant on the user not having changed their browser's default configuration is between him and the client. Does every modern browser use F11 for fullscreen mode in the default configuration? I believe it's something totally different in Safari (on OSX). if he's developing for a project used internally (like a webapp, rather than a site) it matters less that somebody running lynx can't use the app. True. -- Bertilo Wennergren http://bertilow.com
[jQuery] Re: Hover on different ids
On 27 Sep, 12:42, ryan.j ryan.joyce...@googlemail.com wrote:
try $('#breadcumb, #nKnapper, #Navigation') instead
Excellent :)
Works. Thanks!
[jQuery] Re: Prevent jagged text in IE
browser sniffing is already deprecated in favour of feature sniffing,
it's unlikely code using it will be added.
On Sep 27, 5:13 am, Kevin Dalman kevin.dal...@gmail.com wrote:
@Rick
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
This is a nice simple solution to a common cross-browser issue, so
wouldn't it be reasonable for this to be added to the standard jQuery
animate method? The extra size is minimal.
/Kevin
On Sep 25, 5:17 pm, Rick Faircloth r...@whitestonemedia.com wrote:
I include a reference to a file with this jQuery code in every page to solve
that problem, Dave.
Best solution I've found so far. I got it from someone, somewhere, but don't
remember who.
Rick
jQuery.fn.fadeIn = function(speed, callback) {
return this.animate({opacity: 'show'}, 750, function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
jQuery.fn.fadeOut = function(speed, callback) {
return this.animate({opacity: 'hide'}, 750, function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
jQuery.fn.fadeTo = function(speed,to,callback) {
return this.animate({opacity: to}, 750, function() {
if (to == 1 jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
[jQuery] Re: How to combine event?
fantastic
On 9月25日, 下午9時22分, Karl Swedberg k...@englishrules.com wrote:
Hi David,
You can combine events with a space in the first argument
of .bind(): .bind('type1 type2 type3', function(event) { /*do
something*/});
Pass the event object into the anonymous function and then determine
which event was triggered with event.type. Here is an example:
$('a#cursor')
.css({cursor: 'url(hand.cur), default'})
.click(function() {
return false;
})
.bind('mousedown mouseup mouseout', function(event) {
var myCursor = (event.type == 'mousedown') ? 'url(grab.cur),
default' : 'url(hand.cur), default';
$(this).css({cursor: myCursor});
});
Hope that helps.
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Sep 25, 2009, at 1:48 AM, David .Wu wrote:
event mousedown and mouseup and mouseout actually do the same thing,
how to combine it?
$('a#cursor')
.css({cursor: 'url(hand.cur), default'})
.click(function() {
return false;
})
.mousedown(function() {
$(this).css({cursor: 'url(grab.cur), default'});
})
.mouseup(function() {
$(this).css({cursor: 'url(hand.cur), default'});
})
.mouseout(function() {
$(this).css({cursor: 'url(hand.cur), default'});
});
[jQuery] Re: How to combine event?
If I want to preload the image, I can use $('img').attr('src',
'xxx.jpg'), how to proload cur file?
On 9月25日, 下午9時22分, Karl Swedberg k...@englishrules.com wrote:
Hi David,
You can combine events with a space in the first argument
of .bind(): .bind('type1 type2 type3', function(event) { /*do
something*/});
Pass the event object into the anonymous function and then determine
which event was triggered with event.type. Here is an example:
$('a#cursor')
.css({cursor: 'url(hand.cur), default'})
.click(function() {
return false;
})
.bind('mousedown mouseup mouseout', function(event) {
var myCursor = (event.type == 'mousedown') ? 'url(grab.cur),
default' : 'url(hand.cur), default';
$(this).css({cursor: myCursor});
});
Hope that helps.
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Sep 25, 2009, at 1:48 AM, David .Wu wrote:
event mousedown and mouseup and mouseout actually do the same thing,
how to combine it?
$('a#cursor')
.css({cursor: 'url(hand.cur), default'})
.click(function() {
return false;
})
.mousedown(function() {
$(this).css({cursor: 'url(grab.cur), default'});
})
.mouseup(function() {
$(this).css({cursor: 'url(hand.cur), default'});
})
.mouseout(function() {
$(this).css({cursor: 'url(hand.cur), default'});
});
[jQuery] Re: Ajax problem on Safari/Chrome browsers
After 3 DAYS, I finally figured it out:
$.get('profile.php', { do: 'addfriend', id: userId }
The problem is, that the word do is reserved or something, thus you
can't use it in get, ajax and probably elsewhere. test.php?
do=something will never work from jQuery then, or how should I escape
it?
Is this a bug or just something everyone has to know? Strangely, on FF
it all worked.
$.get('profile.php', { action: 'addfriend', id: userId } works
perfectly.
On Sep 27, 1:27 pm, indre1 ind...@gmail.com wrote:
Well, the problem still seems to be in the get() function. For
example, IE gives the following error: Object doesn't support this
property or method
With:
(function($) {
$.fn.followUser = function(userId) {
this.fadeOut(250, function(){
$.get('profile.php', { do: addfriend, id: userId },
function
(data){
return this.html('pFollower
added/p').fadeIn(250);
});
});
}
})(jQuery);
If I remove the whole $.get() part, the error is gone. Chrome will
start fading out too. The code will then look like:
(function($) {
$.fn.followUser = function(userId) {
this.fadeOut(250, function(){
});
}
})(jQuery);
I even tried replace the get() with ajax(), but ran into the same
problem.
Btw, thanks for the attr('rel') suggestion. This is something I was
also looking for, but couldn't figure it out :) The html is now:
script type=text/Javascript
$(function(){
$('div#followButton a').click(function(){
$('div#followButton a').followUser($(this).attr('rel'));
});});
/script
...
div id=followButton
a rel=2test1/a
/div
On Sep 26, 6:48 pm, Matt Quackenbush quackfu...@gmail.com wrote:
@ Mike - Thanks for making me take a closer look at the original code. I
get it now. My bad.
/me crawls back into his cave to hibernate some more
[jQuery] Re: Ajax problem on Safari/Chrome browsers
Tested, it can be bypassed with ajax():
$.ajax({
type: GET,
url: profile.php,
data: do=addfriendid=2
});
But is the get and do thing a bug?
On Sep 27, 3:37 pm, indre1 ind...@gmail.com wrote:
After 3 DAYS, I finally figured it out:
$.get('profile.php', { do: 'addfriend', id: userId }
The problem is, that the word do is reserved or something, thus you
can't use it in get, ajax and probably elsewhere. test.php?
do=something will never work from jQuery then, or how should I escape
it?
Is this a bug or just something everyone has to know? Strangely, on FF
it all worked.
$.get('profile.php', { action: 'addfriend', id: userId } works
perfectly.
On Sep 27, 1:27 pm, indre1 ind...@gmail.com wrote:
Well, the problem still seems to be in the get() function. For
example, IE gives the following error: Object doesn't support this
property or method
With:
(function($) {
$.fn.followUser = function(userId) {
this.fadeOut(250, function(){
$.get('profile.php', { do: addfriend, id: userId },
function
(data){
return this.html('pFollower
added/p').fadeIn(250);
});
});
}
})(jQuery);
If I remove the whole $.get() part, the error is gone. Chrome will
start fading out too. The code will then look like:
(function($) {
$.fn.followUser = function(userId) {
this.fadeOut(250, function(){
});
}
})(jQuery);
I even tried replace the get() with ajax(), but ran into the same
problem.
Btw, thanks for the attr('rel') suggestion. This is something I was
also looking for, but couldn't figure it out :) The html is now:
script type=text/Javascript
$(function(){
$('div#followButton a').click(function(){
$('div#followButton a').followUser($(this).attr('rel'));
});});
/script
...
div id=followButton
a rel=2test1/a
/div
On Sep 26, 6:48 pm, Matt Quackenbush quackfu...@gmail.com wrote:
@ Mike - Thanks for making me take a closer look at the original code. I
get it now. My bad.
/me crawls back into his cave to hibernate some more
[jQuery] Re: Ajax problem on Safari/Chrome browsers
You can always quote the word do on the left side of the colon:
{ do: something, x: y }
It's not a bug, it's part of the Javascript language.
On Sun, Sep 27, 2009 at 7:49 AM, indre1 ind...@gmail.com wrote:
Tested, it can be bypassed with ajax():
$.ajax({
type: GET,
url: profile.php,
data: do=addfriendid=2
});
But is the get and do thing a bug?
On Sep 27, 3:37 pm, indre1 ind...@gmail.com wrote:
After 3 DAYS, I finally figured it out:
$.get('profile.php', { do: 'addfriend', id: userId }
The problem is, that the word do is reserved or something, thus you
can't use it in get, ajax and probably elsewhere. test.php?
do=something will never work from jQuery then, or how should I escape
it?
Is this a bug or just something everyone has to know? Strangely, on FF
it all worked.
$.get('profile.php', { action: 'addfriend', id: userId } works
perfectly.
On Sep 27, 1:27 pm, indre1 ind...@gmail.com wrote:
Well, the problem still seems to be in the get() function. For
example, IE gives the following error: Object doesn't support this
property or method
With:
(function($) {
$.fn.followUser = function(userId) {
this.fadeOut(250, function(){
$.get('profile.php', { do: addfriend, id: userId },
function
(data){
return this.html('pFollower
added/p').fadeIn(250);
});
});
}
})(jQuery);
If I remove the whole $.get() part, the error is gone. Chrome will
start fading out too. The code will then look like:
(function($) {
$.fn.followUser = function(userId) {
this.fadeOut(250, function(){
});
}
})(jQuery);
I even tried replace the get() with ajax(), but ran into the same
problem.
Btw, thanks for the attr('rel') suggestion. This is something I was
also looking for, but couldn't figure it out :) The html is now:
script type=text/Javascript
$(function(){
$('div#followButton a').click(function(){
$('div#followButton a').followUser($(this).attr('rel'));
});});
/script
...
div id=followButton
a rel=2test1/a
/div
On Sep 26, 6:48 pm, Matt Quackenbush quackfu...@gmail.com wrote:
@ Mike - Thanks for making me take a closer look at the original code. I
get it now. My bad.
/me crawls back into his cave to hibernate some more
--
Turtle, turtle, on the ground,
Pink and shiny, turn around.
[jQuery] Re: Ajax problem on Safari/Chrome browsers
Ok, thanks. Should've noticed the highlighted word in editor.
But if it's javascript, then why doesn't it throw errors with Firefox?
On Sep 27, 3:55 pm, Mike McNally emmecin...@gmail.com wrote:
You can always quote the word do on the left side of the colon:
{ do: something, x: y }
It's not a bug, it's part of the Javascript language.
On Sun, Sep 27, 2009 at 7:49 AM, indre1 ind...@gmail.com wrote:
Tested, it can be bypassed with ajax():
$.ajax({
type: GET,
url: profile.php,
data: do=addfriendid=2
});
But is the get and do thing a bug?
On Sep 27, 3:37 pm, indre1 ind...@gmail.com wrote:
After 3 DAYS, I finally figured it out:
$.get('profile.php', { do: 'addfriend', id: userId }
The problem is, that the word do is reserved or something, thus you
can't use it in get, ajax and probably elsewhere. test.php?
do=something will never work from jQuery then, or how should I escape
it?
Is this a bug or just something everyone has to know? Strangely, on FF
it all worked.
$.get('profile.php', { action: 'addfriend', id: userId } works
perfectly.
On Sep 27, 1:27 pm, indre1 ind...@gmail.com wrote:
Well, the problem still seems to be in the get() function. For
example, IE gives the following error: Object doesn't support this
property or method
With:
(function($) {
$.fn.followUser = function(userId) {
this.fadeOut(250, function(){
$.get('profile.php', { do: addfriend, id: userId },
function
(data){
return this.html('pFollower
added/p').fadeIn(250);
});
});
}
})(jQuery);
If I remove the whole $.get() part, the error is gone. Chrome will
start fading out too. The code will then look like:
(function($) {
$.fn.followUser = function(userId) {
this.fadeOut(250, function(){
});
}
})(jQuery);
I even tried replace the get() with ajax(), but ran into the same
problem.
Btw, thanks for the attr('rel') suggestion. This is something I was
also looking for, but couldn't figure it out :) The html is now:
script type=text/Javascript
$(function(){
$('div#followButton a').click(function(){
$('div#followButton a').followUser($(this).attr('rel'));
});});
/script
...
div id=followButton
a rel=2test1/a
/div
On Sep 26, 6:48 pm, Matt Quackenbush quackfu...@gmail.com wrote:
@ Mike - Thanks for making me take a closer look at the original code.
I
get it now. My bad.
/me crawls back into his cave to hibernate some more
--
Turtle, turtle, on the ground,
Pink and shiny, turn around.
[jQuery] show()ing thousands of divs
I have a page with about 3000 (expected to grow to around 5000)
floating divs. It's a list of entities.
The page also has filters to allow the user to narrow down (no one
wants to see 3000 items, of course).
When all filters are removed, I want to show all 3000 divs. After
every 2 of these divs, I also need to insert an additional div to
clear the float. The problem is that $(div.mydivclass).show(); is
taking a really long time. Any performance tips?
The other interesting thing that's happening is this:
$(body).append(waitingdiv);//Positioned in the center of the screen
with a wait gif and Please wait message
if(appliedfilters.length==0) //No filters. Show all divs
$(div.mydivclass).show();
else {
.. show only divs that meet filter criteria..
}
insertClearingDivs();//Insert a div to clear the float after every 2
visible divs
$(div#waitingdiv).remove();
You would expect the waitingdiv to appear instantaneously because
the bottleneck is in show()ing all 3000 divs. But for some reason it
takes a really long time for it to show up. And then it's gone in a
flash and all 3000 divs appear. Incidentally, this also happens when
the first filter is applied. In that case, the filter usually narrows
down 3000 items to about 100.
[jQuery] [autocomplete] How do I keep the result box on top and not fill the inputbox
Hey guys, After a bit of struggle I have the autocomplete function working for me yay :) Now there are 2 more things I want it to do but can't seem to find it. 1. How do I keep the result box on top so I can click more than 1 value (each click adds a result to an option box) 2. How do I prevent autocomplete from filling the input box with the clicked value? Thanks for your feedback.
[jQuery] Mailing list for general JavaScript discussion?
Hi all, I know it's a bit off-topic, but which mailing list do you use for general JavaScript discussion. As we know, JavaScript is an OOP language which has getting more and more attention on a daily basis from programmers and designers. Where could I have in-depth discussions on JavaScript, Ajax, OOP, server-side JavaScript, etc...? Jon
[jQuery] Re: a few improvements to autocomplete
Does this address the behavior in IE? With a multi select, clicking tab works to select a new item (as it does in most browsers) but click on your chosen item replaces the first selected item and leaves the stub. So for a set of, say, (Apple, Orange, Banana, Pear), typing App will bring up the list and allow you to click producing Apple, If you then type ora it will bring up the list again but if you click on Orange it should produce Apple, Orange, but instead it give Orange, ora i.e. it doesn't replace your stub with the selected item but rather the first selected item. Would love to see this fixed one day - has anyone else come across the problem? On Sep 9, 4:31 pm, alexbodn.gro...@gmail.com wrote: hello friends, i have done a few improvements to the autocomplete module, to fix problems and improve functionality: added selectOnly option to autoselect a result if there's only one. this may save you a click. moved the loading indicator to the left side, in case the field is rtl. requires a small plugin i made, attached here. a css entry is being added to this effect. the included css file has this, but as oposed to the main autocomplete.css, colors are given as names. it's nice, but i'm open to changes ;) . added substrings, and substringsSeparators. as oposed to multiple, which deals with a list of elements separated by a fixed string, substringSeparators is a string made of chars, that each and any of them provide a separator between autocompletable strings. it supports editing a program with a closed list of keywords, and operators and spaces as separators. added extraFields, a list of names or ids (if prefixed with #) of other fields to provide as fieldname=value params to the ajax query. in case names are provided, they are expected to be inputs in the same form as the input itself. more complex relationship may be found by adding suitable callbacks to extraParams, which i'd only ask to receive the $input and the key name as parameters. pasted joern's solution to the tickethttp://ui.jquery.com/bugs/ticket/3587, to allow pressing of other key combinations while an autocompletable fields has focus, and still keep autocompletion valid. though i can't yet be very specific, i found multiple autocompletion buggy, and hope to devote some time to contribute to it's fix too. -- alex jquery.autocomplete.js 32KViewDownload jquery.direction.js 1KViewDownload jquery.autocomplete.css 1KViewDownload smime.p7s 1KViewDownload
[jQuery] treeview - support for right to left language
I was able to successfully install treeview in my app and it works very well. However, my app needs to support a right to left language. Is treeview able to support rtl? If not, is it possible to do code changes to support rtl? Cheers,
[jQuery] how to write the jquery syntax to select single word within an element
Hi I'm a newbie. I just don't know how to construct the jquery selector syntax to pick up a single word on click from within let's say a p element and then trigger some function in which the selected word is going to be used. (Something like when you click a word on an HTML page and get the meaning of that word from a dictionary-program - e.g. the COED Concise Oxford English Dictionary). I'd be glad if someone could help me out on this.
[jQuery] Re: Ajax problem on Safari/Chrome browsers
That particular aspect of Javascript syntax is basically a mistake
from its original design. Different parsers may be more lenient.
(There's no good reason for the syntax for object constants { x : y,
... } to forbid reserved words on the left side of the colons, because
there's no ambiguity as to the meaning of the construct.
That said, I don't know exactly what the story here is.
On Sun, Sep 27, 2009 at 8:09 AM, indre1 ind...@gmail.com wrote:
Ok, thanks. Should've noticed the highlighted word in editor.
But if it's javascript, then why doesn't it throw errors with Firefox?
On Sep 27, 3:55 pm, Mike McNally emmecin...@gmail.com wrote:
You can always quote the word do on the left side of the colon:
{ do: something, x: y }
It's not a bug, it's part of the Javascript language.
On Sun, Sep 27, 2009 at 7:49 AM, indre1 ind...@gmail.com wrote:
Tested, it can be bypassed with ajax():
$.ajax({
type: GET,
url: profile.php,
data: do=addfriendid=2
});
But is the get and do thing a bug?
On Sep 27, 3:37 pm, indre1 ind...@gmail.com wrote:
After 3 DAYS, I finally figured it out:
$.get('profile.php', { do: 'addfriend', id: userId }
The problem is, that the word do is reserved or something, thus you
can't use it in get, ajax and probably elsewhere. test.php?
do=something will never work from jQuery then, or how should I escape
it?
Is this a bug or just something everyone has to know? Strangely, on FF
it all worked.
$.get('profile.php', { action: 'addfriend', id: userId } works
perfectly.
On Sep 27, 1:27 pm, indre1 ind...@gmail.com wrote:
Well, the problem still seems to be in the get() function. For
example, IE gives the following error: Object doesn't support this
property or method
With:
(function($) {
$.fn.followUser = function(userId) {
this.fadeOut(250, function(){
$.get('profile.php', { do: addfriend, id: userId },
function
(data){
return this.html('pFollower
added/p').fadeIn(250);
});
});
}
})(jQuery);
If I remove the whole $.get() part, the error is gone. Chrome will
start fading out too. The code will then look like:
(function($) {
$.fn.followUser = function(userId) {
this.fadeOut(250, function(){
});
}
})(jQuery);
I even tried replace the get() with ajax(), but ran into the same
problem.
Btw, thanks for the attr('rel') suggestion. This is something I was
also looking for, but couldn't figure it out :) The html is now:
script type=text/Javascript
$(function(){
$('div#followButton a').click(function(){
$('div#followButton a').followUser($(this).attr('rel'));
});});
/script
...
div id=followButton
a rel=2test1/a
/div
On Sep 26, 6:48 pm, Matt Quackenbush quackfu...@gmail.com wrote:
@ Mike - Thanks for making me take a closer look at the original
code. I
get it now. My bad.
/me crawls back into his cave to hibernate some more
--
Turtle, turtle, on the ground,
Pink and shiny, turn around.
--
Turtle, turtle, on the ground,
Pink and shiny, turn around.
[jQuery] Re: show()ing thousands of divs
Give your divs a class, and surround with a div. Use a CSS file that
looks something like this:
#containerDiv.showing .entityDiv { display: block; }
#containerDiv.hiding .entityDiv { display: none; }
Now when you want to show your entity divs, you can just say
$('#containerDiv').removeClass('hiding').addClass('showing');
and vice-versa to hide them.
You can also statically instert all your clearing divs, and when you
don't want them to have that effect you can use a similar CSS
technique.
On Sun, Sep 27, 2009 at 12:25 AM, Sid nikhil...@gmail.com wrote:
I have a page with about 3000 (expected to grow to around 5000)
floating divs. It's a list of entities.
The page also has filters to allow the user to narrow down (no one
wants to see 3000 items, of course).
When all filters are removed, I want to show all 3000 divs. After
every 2 of these divs, I also need to insert an additional div to
clear the float. The problem is that $(div.mydivclass).show(); is
taking a really long time. Any performance tips?
The other interesting thing that's happening is this:
$(body).append(waitingdiv);//Positioned in the center of the screen
with a wait gif and Please wait message
if(appliedfilters.length==0) //No filters. Show all divs
$(div.mydivclass).show();
else {
.. show only divs that meet filter criteria..
}
insertClearingDivs();//Insert a div to clear the float after every 2
visible divs
$(div#waitingdiv).remove();
You would expect the waitingdiv to appear instantaneously because
the bottleneck is in show()ing all 3000 divs. But for some reason it
takes a really long time for it to show up. And then it's gone in a
flash and all 3000 divs appear. Incidentally, this also happens when
the first filter is applied. In that case, the filter usually narrows
down 3000 items to about 100.
--
Turtle, turtle, on the ground,
Pink and shiny, turn around.
[jQuery] Re: IE: Cursor still displays hourglass symbol after unblocking
Thanks Mike, but please let me know if there are any plans to work around this bug within the actual JQuery BlockUI plugin. Thanks On Sep 26, 9:23 am, Mike Alsup mal...@gmail.com wrote: I have tried adding to both the overlayCSS and css overrides acursor of 'default' but it doesn't seem to do anything. http://www.malsup.com/jquery/block/sep26.html
[jQuery] Re: Mailing list for general JavaScript discussion?
If you have a very thick skin and can look past the ranting of arrogant know-it-alls, the comp.lang.javascript Usenet group can be a great resource. You can access it through Google Groups, too: http://groups.google.com/group/comp.lang.javascript/topics --Karl Karl Swedberg www.englishrules.com www.learningjquery.com On Sep 27, 2009, at 8:23 AM, Hunt Jon wrote: Hi all, I know it's a bit off-topic, but which mailing list do you use for general JavaScript discussion. As we know, JavaScript is an OOP language which has getting more and more attention on a daily basis from programmers and designers. Where could I have in-depth discussions on JavaScript, Ajax, OOP, server-side JavaScript, etc...? Jon
[jQuery] Re: A very simple newbie problem
Sorry for the delay, it seems that the server was doing some maintenance work. Thanks for the answer. I just find out how to do it the other way: a href=url onclick=popup(href) Now, I am getting the href but the problem is that the entire page get reloaded even using return false. Does anyone know how to avoid that? -- View this message in context: http://www.nabble.com/A-very-simple-newbie-problem-tp25526787s27240p25635183.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: how to write the jquery syntax to select single word within an element
Hi rossenbere,
There's something about text that you should be aware of; text is
rendered as tree nodes just like other elements, the difference being
that they are unique types. ( elm.nodeType == 1 == DOM Element ,
elm.nodeType == 3 == TextNode ).
In the example, a div with 2 paragraphs. Each paragraph has text,
it might be common to think of the tree having 3 nodes, div, p, p.
But the truth is that there are 5, because each paragraph has a child
node of a TextNode type. Browsers need this to parse things out.
Here's why this is important.
What you're proposing to do (which is by no means crazy or not-
doable ) is to tag one of the words within the text node and create a
behavior for it. Selection is certainly going to be the hard part
here, and that's because the only selectable element is the entire
text node. This is going to have to be broken up.
If there is a p , and that p contains foo bar baz ; there is
one p with 1 child text node.
To mark up a p, and that p contained foo spanbar/span baz ;
now it has 3 child nodes, 1 of them a DOM node, and the other 2 text
nodes.
So your initial operation should be performed on the paragraph.
Get it's .html() ( not .text() just to be tag-safe ), and .split()
using a RegExp matching the word or words you wish to tag. The
resulting array would be everything but those words. For the spaces
in between, create a tag (span would do) with a className you can find
later. $(span/).addClass('dict_word').text(word);
Clear the contents of the paragraph and begin rebuilding it a piece at
a time : TextNode[0] , span.dict_word, TextNode[1], span.dict_word.
I started a small program as a proof of this using two words to tag,
but I ran into some problems, so keep these issues in mind.
When it came time to insert a new span tag, I wasn't entirely sure if
I was supposed to have the first word or the second from my split
list. It also wasn't clear to me if a tagged word should have been the
first or last word in a paragraph.
I will share, at least, the first part where I identify which
paragraphs need work:
$(document).ready(function()
{
var words = ['ipsum', 'aptent'];
var pattern = '('+words.join('|')+');
var regex = new RegExp( pattern , 'i' );
$('p')
.filter(function()
{
return regex.test( $(this).text() );
})
.each(function()
{
// do stuff
});
});
Ideally, in the end, you'd be able to dict_ize the words by className
$('.dict_word').each( Dictionary.link );
( assuming Dictionary.link is a method that does the business )
Hope this helps
On Sep 27, 9:52 am, rossenbere hubert.ca...@telenet.be wrote:
Hi
I'm a newbie.
I just don't know how to construct the jquery selector syntax to pick
up a single word on click from within let's say a p element and then
trigger some function in which the selected word is going to be used.
(Something like when you click a word on an HTML page and get the
meaning of that word from a dictionary-program - e.g. the COED Concise
Oxford English Dictionary).
I'd be glad if someone could help me out on this.
[jQuery] This works in Firefox and Chromium, but not Safari
Safari Version 4.0.3 (6531.9)
Firefox Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US;
rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3
and just for fun, Chromium 4.0.219.3 (277338) today's latest Mac
development build.
I've got the following extract from my application.js file:
/*jslint white: false, indent: 2 */
/*global jQuery: false */
(function ($) {
$('tr.replace-me').bind('adjustAfterLoad', function () {
var $this = $(this),
$fetchTd = $this.find(td.ajax-url),
$countTd = $this.find(td.placeholder-count);
this.fetchUrl = $fetchTd.text();
$fetchTd.text();
; The next line has no effect on Safari
$this.height($this.height() * parseInt($countTd.text(), 10));
});
$('tr.replace-me').trigger('adjustAfterLoad');
});
}(jQuery));
What's going on is that I've got several table rows which are standing
in for groups of rows to be ajaxed in when a div is scrolled making
each stand-in row visible.
In order to make each '.replace-me' row have the same geometry as the
group of rows it will replace, the server puts the number of rows in
one of the tds within the row, and the url to fetch the replacement in
another. I then use the adustAfterLoad custom event to get the url
and resize the height of the row by multiplying it by the number of
rows to be loaded.
On Safari the line to adjust the height seems to have no effect. Any ideas?
--
Rick DeNatale
Blog: http://talklikeaduck.denhaven2.com/
Twitter: http://twitter.com/RickDeNatale
WWR: http://www.workingwithrails.com/person/9021-rick-denatale
LinkedIn: http://www.linkedin.com/in/rickdenatale
[jQuery] Re: how to write the jquery syntax to select single word within an element
great explanation!
Rather than reinvent the wheel I've used the "highlight" plugin with
success. I'm sure there are probably other plugins for same purpose as
well
http://johannburkard.de/blog/programming/_javascript_/highlight-_javascript_-text-higlighting-jquery-plugin.html
bibby wrote:
Hi rossenbere,
There's something about "text" that you should be aware of; text is
rendered as tree nodes just like other elements, the difference being
that they are unique types. ( elm.nodeType == 1 == DOM Element ,
elm.nodeType == 3 == TextNode ).
In the example, "a div with 2 paragraphs. Each paragraph has text",
it might be common to think of the tree having 3 nodes, div, p, p.
But the truth is that there are 5, because each paragraph has a child
node of a TextNode type. Browsers need this to parse things out.
Here's why this is important.
What you're proposing to do (which is by no means crazy or not-
doable ) is to tag one of the words within the text node and create a
behavior for it. Selection is certainly going to be the hard part
here, and that's because the only selectable element is the entire
text node. This is going to have to be broken up.
If there is a p , and that p contains "foo bar baz" ; there is
one p with 1 child text node.
To mark up a p, and that p contained "foo spanbar/span baz" ;
now it has 3 child nodes, 1 of them a DOM node, and the other 2 text
nodes.
So your initial operation should be performed on the paragraph.
Get it's .html() ( not .text() just to be tag-safe ), and .split()
using a RegExp matching the word or words you wish to tag. The
resulting array would be everything but those words. For the spaces
in between, create a tag (span would do) with a className you can find
later. $("span/).addClass('dict_word').text(word);
Clear the contents of the paragraph and begin rebuilding it a piece at
a time : TextNode[0] , span.dict_word, TextNode[1], span.dict_word.
I started a small program as a proof of this using two words to tag,
but I ran into some problems, so keep these issues in mind.
When it came time to insert a new span tag, I wasn't entirely sure if
I was supposed to have the first word or the second from my split
list. It also wasn't clear to me if a tagged word should have been the
first or last word in a paragraph.
I will share, at least, the first part where I identify which
paragraphs need work:
$(document).ready(function()
{
var words = ['ipsum', 'aptent'];
var pattern = '('+words.join('|')+');
var regex = new RegExp( pattern , 'i' );
$('p')
.filter(function()
{
return regex.test( $(this).text() );
})
.each(function()
{
// do stuff
});
});
Ideally, in the end, you'd be able to dict_ize the words by className
$('.dict_word').each( Dictionary.link );
( assuming Dictionary.link is a method that does the business )
Hope this helps
On Sep 27, 9:52am, rossenbere hubert.ca...@telenet.be wrote:
Hi
I'm a newbie.
I just don't know how to construct the jquery selector syntax to pick
up a single word on click from within let's say a p element and then
trigger some function in which the selected word is going to be used.
(Something like when you click a word on an HTML page and get the
meaning of that word from a dictionary-program - e.g. the COED Concise
Oxford English Dictionary).
I'd be glad if someone could help me out on this.
[jQuery] Re: This works in Firefox and Chromium, but not Safari
Actually, I don't think this is working in Chrome, so it looks like
it's a webkit issue perhaps.
On Sun, Sep 27, 2009 at 1:50 PM, Rick DeNatale rick.denat...@gmail.com wrote:
Safari Version 4.0.3 (6531.9)
Firefox Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US;
rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3
and just for fun, Chromium 4.0.219.3 (277338) today's latest Mac
development build.
I've got the following extract from my application.js file:
/*jslint white: false, indent: 2 */
/*global jQuery: false */
(function ($) {
$('tr.replace-me').bind('adjustAfterLoad', function () {
var $this = $(this),
$fetchTd = $this.find(td.ajax-url),
$countTd = $this.find(td.placeholder-count);
this.fetchUrl = $fetchTd.text();
$fetchTd.text();
; The next line has no effect on Safari
$this.height($this.height() * parseInt($countTd.text(), 10));
});
$('tr.replace-me').trigger('adjustAfterLoad');
});
}(jQuery));
What's going on is that I've got several table rows which are standing
in for groups of rows to be ajaxed in when a div is scrolled making
each stand-in row visible.
In order to make each '.replace-me' row have the same geometry as the
group of rows it will replace, the server puts the number of rows in
one of the tds within the row, and the url to fetch the replacement in
another. I then use the adustAfterLoad custom event to get the url
and resize the height of the row by multiplying it by the number of
rows to be loaded.
On Safari the line to adjust the height seems to have no effect. Any ideas?
--
Rick DeNatale
Blog: http://talklikeaduck.denhaven2.com/
Twitter: http://twitter.com/RickDeNatale
WWR: http://www.workingwithrails.com/person/9021-rick-denatale
LinkedIn: http://www.linkedin.com/in/rickdenatale
--
Rick DeNatale
Blog: http://talklikeaduck.denhaven2.com/
Twitter: http://twitter.com/RickDeNatale
WWR: http://www.workingwithrails.com/person/9021-rick-denatale
LinkedIn: http://www.linkedin.com/in/rickdenatale
[jQuery] [autocomplete] can't get json demo to work
Hi I'm trying to set up the json example that comes in the demo zip file (json.html + emails.php). When I test it locally every thing works great however when I move emails.php to my site (hosted by godaddy) it stops working; i.e. nothing gets pulled in when I start typing in the textbox. godaddy is running php 5.2.8 with json module 1.2.1 enabled. TIA
[jQuery] Re: This works in Firefox and Chromium, but not Safari
don't think height() takes 2 arguments, what is the ",10" in your
height?
jQuery docs only show height(val)
Rick DeNatale wrote:
Safari Version 4.0.3 (6531.9)
Firefox Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US;
rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3
and just for fun, Chromium 4.0.219.3 (277338) today's latest Mac
development build.
I've got the following extract from my application.js file:
/*jslint white: false, indent: 2 */
/*global jQuery: false */
(function ($) {
$('tr.replace-me').bind('adjustAfterLoad', function () {
var $this = $(this),
$fetchTd = $this.find("td.ajax-url"),
$countTd = $this.find("td.placeholder-count");
this.fetchUrl = $fetchTd.text();
$fetchTd.text("");
; The next line has no effect on Safari
$this.height($this.height() * parseInt($countTd.text(), 10));
});
$('tr.replace-me').trigger('adjustAfterLoad');
});
}(jQuery));
What's going on is that I've got several table rows which are standing
in for groups of rows to be ajaxed in when a div is scrolled making
each stand-in row visible.
In order to make each '.replace-me' row have the same geometry as the
group of rows it will replace, the server puts the number of rows in
one of the tds within the row, and the url to fetch the replacement in
another. I then use the adustAfterLoad custom event to get the url
and resize the height of the row by multiplying it by the number of
rows to be loaded.
On Safari the line to adjust the height seems to have no effect. Any ideas?
[jQuery] Re: A very simple newbie problem
Your inline onclick handler needs to return false. Maybe your popup() function is returning false, but the onclick handler itself isn't returning anything. You need to do: onclick=popup(href); return false; If popup() returns false, you can write: onclick=return popup(href); Or, take a look at Ralph's solution using .live(). -Mike On Sun, Sep 27, 2009 at 9:43 AM, Yuzem naujnit...@gmail.com wrote: Sorry for the delay, it seems that the server was doing some maintenance work. Thanks for the answer. I just find out how to do it the other way: a href=url onclick=popup(href) Now, I am getting the href but the problem is that the entire page get reloaded even using return false. Does anyone know how to avoid that? -- View this message in context: http://www.nabble.com/A-very-simple-newbie-problem-tp25526787s27240p25635183.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Mailing list for general JavaScript discussion?
Karl, you're right on the Mark. ;-) -Mike On Sun, Sep 27, 2009 at 9:12 AM, Karl Swedberg k...@englishrules.comwrote: If you have a very thick skin and can look past the ranting of arrogant know-it-alls, the comp.lang.javascript Usenet group can be a great resource. You can access it through Google Groups, too: http://groups.google.com/group/comp.lang.javascript/topics --Karl Karl Swedberg www.englishrules.com www.learningjquery.com On Sep 27, 2009, at 8:23 AM, Hunt Jon wrote: Hi all, I know it's a bit off-topic, but which mailing list do you use for general JavaScript discussion. As we know, JavaScript is an OOP language which has getting more and more attention on a daily basis from programmers and designers. Where could I have in-depth discussions on JavaScript, Ajax, OOP, server-side JavaScript, etc...? Jon
[jQuery] Re: This works in Firefox and Chromium, but not Safari
On Sun, Sep 27, 2009 at 2:46 PM, Charlie charlie...@gmail.com wrote: don't think height() takes 2 arguments, what is the ,10 in your height? jQuery docs only show height(val) $this.height($this.height() * parseInt($countTd.text(), 10)); It's not an argument to height(), it's the radix argument to parseInt, the result of which multiplied by the current height is the single argument to height -- Rick DeNatale Blog: http://talklikeaduck.denhaven2.com/ Twitter: http://twitter.com/RickDeNatale WWR: http://www.workingwithrails.com/person/9021-rick-denatale LinkedIn: http://www.linkedin.com/in/rickdenatale
[jQuery] Re: show()ing thousands of divs
You would expect the waitingdiv to appear instantaneously
because the bottleneck is in show()ing all 3000 divs. But for
some reason it takes a really long time for it to show up.
And then it's gone in a flash and all 3000 divs appear.
That's because the browser doesn't refresh the page while JavaScript code is
running. It waits until all your code finishes running and then refreshes
with all the changes you've made.
If you want to see partial results, use setTimeout() to delay part of your
code:
doOneThing();
setTimeout( function() {
doAnotherThing();
}, 1 );
Now you will see the results of doOneThing() immediately, before
doAnotherThing() is called.
Mike M's tip sounds good for hiding and showing *all* your divs, but I think
that leaves the problem of hiding and showing a subset of them according to
your filter. I don't have any ideas for you on that, though - I'd have to
see a test page to get a better idea of what it's doing.
-Mike
On Sat, Sep 26, 2009 at 10:25 PM, Sid nikhil...@gmail.com wrote:
I have a page with about 3000 (expected to grow to around 5000)
floating divs. It's a list of entities.
The page also has filters to allow the user to narrow down (no one
wants to see 3000 items, of course).
When all filters are removed, I want to show all 3000 divs. After
every 2 of these divs, I also need to insert an additional div to
clear the float. The problem is that $(div.mydivclass).show(); is
taking a really long time. Any performance tips?
The other interesting thing that's happening is this:
$(body).append(waitingdiv);//Positioned in the center of the screen
with a wait gif and Please wait message
if(appliedfilters.length==0) //No filters. Show all divs
$(div.mydivclass).show();
else {
.. show only divs that meet filter criteria..
}
insertClearingDivs();//Insert a div to clear the float after every 2
visible divs
$(div#waitingdiv).remove();
You would expect the waitingdiv to appear instantaneously because
the bottleneck is in show()ing all 3000 divs. But for some reason it
takes a really long time for it to show up. And then it's gone in a
flash and all 3000 divs appear. Incidentally, this also happens when
the first filter is applied. In that case, the filter usually narrows
down 3000 items to about 100.
[jQuery] Re: Prevent jagged text in IE
If browser-detection can't be used, then subsititute code to detect the filter attribute instead. The exact syntax is not important... I believe jQuery SHOULD handle this cross-browser animation issue because it is common to the majority of users. It is clearly a deficiency when jQuery's own contributors have to override core methods to address it. The choices are: A) Update jQuery to handle this issue natively, or; B) Continue using hacks for animations in the world's most common browser. I'm interested in opinions on this, particularly from the regular jQuery contributors. /Kevin On Sep 27, 4:20 am, ryan.j ryan.joyce...@googlemail.com wrote: browser sniffing is already deprecated in favour of feature sniffing, it's unlikely code using it will be added.
[jQuery] Re: how to write the jquery syntax to select single word within an element
Thank you so much bibby for trying to answer my question so
thoroughly. My call for help was in fact dictated by lack of time. I
thought the solution was somehow going to be obvious, but now it see I
was totally wrong.
On 27 sep, 16:47, bibby li...@bbby.org wrote:
Hi rossenbere,
There's something about text that you should be aware of; text is
rendered as tree nodes just like other elements, the difference being
that they are unique types. ( elm.nodeType == 1 == DOM Element ,
elm.nodeType == 3 == TextNode ).
In the example, a div with 2 paragraphs. Each paragraph has text,
it might be common to think of the tree having 3 nodes, div, p, p.
But the truth is that there are 5, because each paragraph has a child
node of a TextNode type. Browsers need this to parse things out.
Here's why this is important.
What you're proposing to do (which is by no means crazy or not-
doable ) is to tag one of the words within the text node and create a
behavior for it. Selection is certainly going to be the hard part
here, and that's because the only selectable element is the entire
text node. This is going to have to be broken up.
If there is a p , and that p contains foo bar baz ; there is
one p with 1 child text node.
To mark up a p, and that p contained foo spanbar/span baz ;
now it has 3 child nodes, 1 of them a DOM node, and the other 2 text
nodes.
So your initial operation should be performed on the paragraph.
Get it's .html() ( not .text() just to be tag-safe ), and .split()
using a RegExp matching the word or words you wish to tag. The
resulting array would be everything but those words. For the spaces
in between, create a tag (span would do) with a className you can find
later. $(span/).addClass('dict_word').text(word);
Clear the contents of the paragraph and begin rebuilding it a piece at
a time : TextNode[0] , span.dict_word, TextNode[1], span.dict_word.
I started a small program as a proof of this using two words to tag,
but I ran into some problems, so keep these issues in mind.
When it came time to insert a new span tag, I wasn't entirely sure if
I was supposed to have the first word or the second from my split
list. It also wasn't clear to me if a tagged word should have been the
first or last word in a paragraph.
I will share, at least, the first part where I identify which
paragraphs need work:
$(document).ready(function()
{
var words = ['ipsum', 'aptent'];
var pattern = '('+words.join('|')+');
var regex = new RegExp( pattern , 'i' );
$('p')
.filter(function()
{
return regex.test( $(this).text() );
})
.each(function()
{
// do stuff
});
});
Ideally, in the end, you'd be able to dict_ize the words by className
$('.dict_word').each( Dictionary.link );
( assuming Dictionary.link is a method that does the business )
Hope this helps
On Sep 27, 9:52 am, rossenbere hubert.ca...@telenet.be wrote:
Hi
I'm a newbie.
I just don't know how to construct the jquery selector syntax to pick
up a single word on click from within let's say a p element and then
trigger some function in which the selected word is going to be used.
(Something like when you click a word on an HTML page and get the
meaning of that word from a dictionary-program - e.g. the COED Concise
Oxford English Dictionary).
I'd be glad if someone could help me out on this.
[jQuery] Re: show()ing thousands of divs
If there's a need to selectively show particular elements out of a
large number, something to try while experimenting with performance
improvements is to construct a CSS block dynamically and then update
it. You'd put together the CSS as a stream of #randomDiv0021 {
display: block; } CSS statements, and then just jam the whole thing
into a style block (which you can access by id attribute. I know
that you have to update style blocks with a particular function in IE
(Firefox lets you use innerHTML pretty much anywhere, but IE will
throw an unknown error exception); it may be innerText or
cssText or something like that. Perhaps jQuery deals with that for
us.
Building and updating a CSS block en masse may or may not be faster
than explicit calls to show() and hide(). If you do build a CSS block,
make sure you do it by constructing an array of strings and then
joinging it together rather than repeatedly appending to a single
accumulating string.
On Sun, Sep 27, 2009 at 1:56 PM, Michael Geary m...@mg.to wrote:
You would expect the waitingdiv to appear instantaneously
because the bottleneck is in show()ing all 3000 divs. But for
some reason it takes a really long time for it to show up.
And then it's gone in a flash and all 3000 divs appear.
That's because the browser doesn't refresh the page while JavaScript code is
running. It waits until all your code finishes running and then refreshes
with all the changes you've made.
If you want to see partial results, use setTimeout() to delay part of your
code:
doOneThing();
setTimeout( function() {
doAnotherThing();
}, 1 );
Now you will see the results of doOneThing() immediately, before
doAnotherThing() is called.
Mike M's tip sounds good for hiding and showing all your divs, but I think
that leaves the problem of hiding and showing a subset of them according to
your filter. I don't have any ideas for you on that, though - I'd have to
see a test page to get a better idea of what it's doing.
-Mike
On Sat, Sep 26, 2009 at 10:25 PM, Sid nikhil...@gmail.com wrote:
I have a page with about 3000 (expected to grow to around 5000)
floating divs. It's a list of entities.
The page also has filters to allow the user to narrow down (no one
wants to see 3000 items, of course).
When all filters are removed, I want to show all 3000 divs. After
every 2 of these divs, I also need to insert an additional div to
clear the float. The problem is that $(div.mydivclass).show(); is
taking a really long time. Any performance tips?
The other interesting thing that's happening is this:
$(body).append(waitingdiv);//Positioned in the center of the screen
with a wait gif and Please wait message
if(appliedfilters.length==0) //No filters. Show all divs
$(div.mydivclass).show();
else {
.. show only divs that meet filter criteria..
}
insertClearingDivs();//Insert a div to clear the float after every 2
visible divs
$(div#waitingdiv).remove();
You would expect the waitingdiv to appear instantaneously because
the bottleneck is in show()ing all 3000 divs. But for some reason it
takes a really long time for it to show up. And then it's gone in a
flash and all 3000 divs appear. Incidentally, this also happens when
the first filter is applied. In that case, the filter usually narrows
down 3000 items to about 100.
--
Turtle, turtle, on the ground,
Pink and shiny, turn around.
[jQuery] Re: This works in Firefox and Chromium, but not Safari
my bad, haven't used the radix before and must have mis- read brackets Rick DeNatale wrote: On Sun, Sep 27, 2009 at 2:46 PM, Charlie charlie...@gmail.com wrote: don't think height() takes 2 arguments, what is the ",10" in your height? jQuery docs only show height(val) $this.height($this.height() * parseInt($countTd.text(), 10)); It's not an argument to height(), it's the radix argument to parseInt, the result of which multiplied by the current height is the single argument to height
[jQuery] Re: IE: Cursor still displays hourglass symbol after unblocking
around this bug within the actual JQuery BlockUI plugin Wow, really? it's pretty obvious this is IE not changing the cursor unless the mouse is moved, not a bug in the plugin, as it changes the CSS Amazing how rude people are using coe provided-to/supported them free of charge On Sep 27, 10:29 am, Eeyore145 mgkos2...@yahoo.com wrote: Thanks Mike, but please let me know if there are any plans to work around this bug within the actual JQuery BlockUI plugin. Thanks On Sep 26, 9:23 am, Mike Alsup mal...@gmail.com wrote: I have tried adding to both the overlayCSS and css overrides acursor of 'default' but it doesn't seem to do anything. http://www.malsup.com/jquery/block/sep26.html
[jQuery] Re: a little problem with checking all checkboxes
Hey Mike,
It's perfectly fine to set the checked DOM property there, which takes
a Boolean. I think something else is wrong with the OP's code.
I put together a little demo:
http://test.learningjquery.com/checkbox.html
Click the parent checkbox, and all the children checkboxes will toggle
between checked and unchecked to match the state of the parent. Here
is the code I used:
$(document).ready(function() {
$('#city-id-120').click(function() {
$('.child-checkboxes').attr('checked', this.checked);
});
});
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Sep 26, 2009, at 9:52 AM, Mike Alsup wrote:
Please consider the code below, supposed to check all child
checkboxes
wjen a parent checkbox has been checked.
//parentCheckbox and childCheckboxes are two variables set earlier.
//Here are typical values they produce once alert()
//I reproduce the exact string outputed when alert() :
//childCheckboxes - child-city-id-120
//parentCheckbox- #city-id-120
$('INPUT[class=childCheckboxes]').attr('checked', $
(parentCheckbox).is
(':checked'));
Do you spot the problem?
You want to add or remove the 'checked' attribute, not set its value
to a boolean. Try something like this:
var $inputs = $('input.childCheckboxes');
if ($(parentCheckbox).is(':checked'))
$inputs.attr('checked','checked');
else
$inputs.removeAttr('checked');
[jQuery] Re: Every post I make, I get an mail error.
Hmmm. I just searched through all jquery-en members and couldn't find r...@localhost listed. Maybe one of the other admins already deleted it? --Karl Karl Swedberg www.englishrules.com www.learningjquery.com On Sep 26, 2009, at 4:38 PM, Scott Haneda wrote: I believe what happens, is there is a bad address in the group, so when you post a message to the list, it is sent out to all subscribers. Final-Recipient: rfc822; r...@localhost Original-Recipient: rfc822;r...@localhost Action: failed Status: 5.3.0 If an email is sent from the group to r...@localhost, it will bounce, and I am guessing it is bouncing back to the group. Some people are getting this backscatter, and others are not. If I were to look at my server logs, I would bet I see it, but I have my server set to block messages that are backscatter, or have bogus recipients and destinations. The list admin needs to find r...@localhost I believe, that would solve it, though I think the issue is technically deeper than that quick fix. -- Scott * If you contact me off list replace talklists@ with scott@ * On Sep 26, 2009, at 8:10 AM, Charlie wrote: I posted this issue into Google Groups help forum yesterday, only response so far group won't recognize your email address which is not true Will see what happens Bertilo Wennergren wrote: evo wrote: Everytime I post to this group through thunderbird, I get a undelivered mail message sent back, everytime. This has only started happening recently and I can't find any info about it anywhere. Just want to know if this is happening to anyone else (as it's only when I post to this group) I get those too.
[jQuery] [tablesorter] custom parser
Hello guys, I have hard time trying to create a custom parser for tablesorter. Basically I have a table with a list of projects, each project has a status (an integer 1 to 7) but in the table itself I want to display the status meaning (1=submitted, 2=approved and so on ...) so I'm trying to create a custom parser that order to project by status (1- 7) and not by meaning (a-z). Following the plugin docs (http://tablesorter.com/docs/example- parsers.html) I have created my parser where I replace all the 7 statuses but when my table doesn't contain at least 1 project per each status the parser doesn't work and the table is nor shown. Is there a way to fix this issue? THANKS Sig
[jQuery] Re: Every post I make, I get an mail error.
Karl - This was happening to me a few weeks ago (from a different @localhost address). Rey took care of it. He may have taken care of this one as well. On Sun, Sep 27, 2009 at 5:51 PM, Karl Swedberg k...@englishrules.comwrote: Hmmm. I just searched through all jquery-en members and couldn't find r...@localhost listed. Maybe one of the other admins already deleted it? --Karl Karl Swedberg www.englishrules.com www.learningjquery.com On Sep 26, 2009, at 4:38 PM, Scott Haneda wrote: I believe what happens, is there is a bad address in the group, so when you post a message to the list, it is sent out to all subscribers. Final-Recipient: rfc822; r...@localhost Original-Recipient: rfc822;r...@localhost Action: failed Status: 5.3.0 If an email is sent from the group to r...@localhost, it will bounce, and I am guessing it is bouncing back to the group. Some people are getting this backscatter, and others are not. If I were to look at my server logs, I would bet I see it, but I have my server set to block messages that are backscatter, or have bogus recipients and destinations. The list admin needs to find r...@localhost I believe, that would solve it, though I think the issue is technically deeper than that quick fix. -- Scott * If you contact me off list replace talklists@ with scott@ * On Sep 26, 2009, at 8:10 AM, Charlie wrote: I posted this issue into Google Groups help forum yesterday, only response so far group won't recognize your email address which is not true Will see what happens Bertilo Wennergren wrote: evo wrote: Everytime I post to this group through thunderbird, I get a undelivered mail message sent back, everytime. This has only started happening recently and I can't find any info about it anywhere. Just want to know if this is happening to anyone else (as it's only when I post to this group) I get those too. -- Charlie Griefer http://charlie.griefer.com/ I have failed as much as I have succeeded. But I love my life. I love my wife. And I wish you my kind of success.
[jQuery] Re: show()ing thousands of divs
Thanks, guys.
Michael G., your solution worked like a charm. setTimeout seems to
mess with the context (this is not recognized within the function).
But that was a minor problem. I just assigned this to a global
variable and used that variable inside setTimeout's function. A couple
of other solutions were discussed here:
http://stackoverflow.com/questions/1267275/jquery-show-is-delayed-in-internet-explorer-chrome
I also liked the approach of using show()'s callback function: $
('#foo').show( 0, function() { doOtherThings(); } );
Mike M.,
Interesting suggestions to use CSS. But even with the CSS approach, I
doubt if performance will be any better. Looping through each of the
3000 divs and calling $(this).show() or $(this).addClass('showing')
will probably take the same amount of time.
What I ended up doing (and it did speed things up) is not use jQuery
for hide/show. I now store basic info about all 3000 entities in a JS
object { ent0 : { property1 : 'abc', property2 : 'xyz' }, ent1 :
{ prop1: '123', ..},..}. The HTML for each div is similar, so I just
generate a whole new HTML with only the entities I want to show. Then
replace the existing HTML with the new HTML.
On Sep 27, 2:07 pm, Mike McNally emmecin...@gmail.com wrote:
If there's a need to selectively show particular elements out of a
large number, something to try while experimenting with performance
improvements is to construct a CSS block dynamically and then update
it. You'd put together the CSS as a stream of #randomDiv0021 {
display: block; } CSS statements, and then just jam the whole thing
into a style block (which you can access by id attribute. I know
that you have to update style blocks with a particular function in IE
(Firefox lets you use innerHTML pretty much anywhere, but IE will
throw an unknown error exception); it may be innerText or
cssText or something like that. Perhaps jQuery deals with that for
us.
Building and updating a CSS block en masse may or may not be faster
than explicit calls to show() and hide(). If you do build a CSS block,
make sure you do it by constructing an array of strings and then
joinging it together rather than repeatedly appending to a single
accumulating string.
On Sun, Sep 27, 2009 at 1:56 PM, Michael Geary m...@mg.to wrote:
You would expect the waitingdiv to appear instantaneously
because the bottleneck is in show()ing all 3000 divs. But for
some reason it takes a really long time for it to show up.
And then it's gone in a flash and all 3000 divs appear.
That's because the browser doesn't refresh the page while JavaScript code is
running. It waits until all your code finishes running and then refreshes
with all the changes you've made.
If you want to see partial results, use setTimeout() to delay part of your
code:
doOneThing();
setTimeout( function() {
doAnotherThing();
}, 1 );
Now you will see the results of doOneThing() immediately, before
doAnotherThing() is called.
Mike M's tip sounds good for hiding and showing all your divs, but I think
that leaves the problem of hiding and showing a subset of them according to
your filter. I don't have any ideas for you on that, though - I'd have to
see a test page to get a better idea of what it's doing.
-Mike
On Sat, Sep 26, 2009 at 10:25 PM, Sid nikhil...@gmail.com wrote:
I have a page with about 3000 (expected to grow to around 5000)
floating divs. It's a list of entities.
The page also has filters to allow the user to narrow down (no one
wants to see 3000 items, of course).
When all filters are removed, I want to show all 3000 divs. After
every 2 of these divs, I also need to insert an additional div to
clear the float. The problem is that $(div.mydivclass).show(); is
taking a really long time. Any performance tips?
The other interesting thing that's happening is this:
$(body).append(waitingdiv);//Positioned in the center of the screen
with a wait gif and Please wait message
if(appliedfilters.length==0) //No filters. Show all divs
$(div.mydivclass).show();
else {
.. show only divs that meet filter criteria..
}
insertClearingDivs();//Insert a div to clear the float after every 2
visible divs
$(div#waitingdiv).remove();
You would expect the waitingdiv to appear instantaneously because
the bottleneck is in show()ing all 3000 divs. But for some reason it
takes a really long time for it to show up. And then it's gone in a
flash and all 3000 divs appear. Incidentally, this also happens when
the first filter is applied. In that case, the filter usually narrows
down 3000 items to about 100.
--
Turtle, turtle, on the ground,
Pink and shiny, turn around.
[jQuery] Re: show()ing thousands of divs
Mike M.,
Interesting suggestions to use CSS. But even with the CSS approach, I
doubt if performance will be any better. Looping through each of the
3000 divs and calling $(this).show() or $(this).addClass('showing')
will probably take the same amount of time.
That;'s almost certainly wrong. When you set the class like that,
you're letting the browser - it's internal C++ code, that is - do what
you want to do in Javascript. There's no way that the Javascript is
going to be faster.
--
Turtle, turtle, on the ground,
Pink and shiny, turn around.
[jQuery] [auto complete]
Hi, I found this plugin is superb. Thanks for the hard work. I only want to give suggestion to update the documentation for matchContains option accordingly with the latest change log you made, which received the option word. I found that this is a very useful feature for my latest project. I posted a blog for this on http://teguheko.echodess.com/2009/09/jqgrid-autocomplete-search-per-word/ Thanks a lot for your help. Best regards, Teguh Eko Budiarto
[jQuery] Re: Ajax problem on Safari/Chrome browsers
That would make sense, since `do` is a language keyword:
do {
code to be executed
}
while (var = endvalue);
I am sure there is a way to escape it, though in the same way I am
fearful of using if/else/for/while/var and all the test as name/value
pairs in JS or jQ, I would look to change it.
I have for a long time used 'act' which to me works better than do, as
do means positive action, so you get into cases where you will see
do=noprocess, or do=donotprocess, the cases of double-negative can
lead to confusion.
act={add, update, delete, inset} that all is pretty clear.
Sorry I was not more help, just my opinion.
--
Scott * If you contact me off list replace talklists@ with scott@ *
On Sep 27, 2009, at 5:37 AM, indre1 wrote:
After 3 DAYS, I finally figured it out:
$.get('profile.php', { do: 'addfriend', id: userId }
The problem is, that the word do is reserved or something, thus you
can't use it in get, ajax and probably elsewhere. test.php?
do=something will never work from jQuery then, or how should I escape
it?
Is this a bug or just something everyone has to know? Strangely, on FF
it all worked.
$.get('profile.php', { action: 'addfriend', id: userId } works
perfectly.
On Sep 27, 1:27 pm, indre1 ind...@gmail.com wrote:
Well, the problem still seems to be in the get() function. For
example, IE gives the following error: Object doesn't support this
property or method
With:
(function($) {
$.fn.followUser = function(userId) {
this.fadeOut(250, function(){
$.get('profile.php', { do: addfriend, id:
userId }, function
(data){
return this.html('pFollower added/
p').fadeIn(250);
});
});
}
})(jQuery);
If I remove the whole $.get() part, the error is gone. Chrome will
start fading out too. The code will then look like:
(function($) {
$.fn.followUser = function(userId) {
this.fadeOut(250, function(){
});
}
})(jQuery);
I even tried replace the get() with ajax(), but ran into the same
problem.
Btw, thanks for the attr('rel') suggestion. This is something I was
also looking for, but couldn't figure it out :) The html is now:
script type=text/Javascript
$(function(){
$('div#followButton a').click(function(){
$('div#followButton a').followUser($
(this).attr('rel'));
});});
/script
...
div id=followButton
a rel=2test1/a
/div
On Sep 26, 6:48 pm, Matt Quackenbush quackfu...@gmail.com wrote:
@ Mike - Thanks for making me take a closer look at the original
code. I
get it now. My bad.
/me crawls back into his cave to hibernate some more
[jQuery] Re: dans blog jquery calculate installment
On Sep 28, 1:26 pm, runrunforest craigco...@gmail.com wrote:
Hi,
I've got a script from dansblog (link
herehttp://blog.pengoworks.com/index.cfm/2008/1/23/jQuery-Calculation-Plu...)
I copied and presented it as below, its doesn't work. What I've done
incorrectly ?
Most such scripts are worth what you pay for them, or less.
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
script type=text/javascript src=js/jquery-1.3.2.min.js/script
script type=text/javascript
$(function(){
// bind the recalc function to the quantity fields
$(input[name^=qty_item_]).bind(keyup, recalc);
Using the keyup event is not a good idea. You are running the listener
far more often that it needs to, you only need to run it when the user
has finished their input for a particular field (e..g. run it using
blur).
function recalc(){
// run the calc() method on each of the total fields
$([id^=total_item]).calc(
Where is calc() defined? User input should always be validated - what
will happen if they input # instead of 3?
// the equation to use for the calculation
qty * price,
// we now define the values for the variables defined
in the
Beware of those who talk about we.
equation above
{
// instead of using a static value, we use a
jQuery object which
grabs all the quantities
It grabs exactly the same set of inputs every single time the keyup
event occurs. Why would you do that except to waste CPU cycles?
qty: $(input[name^=qty_item_]),
// now we define the jQuery object which
reads in the price from
the table cell
price: $([id^=price_item_])
},
// this function is execute after the calculation is
completed,
which allows us to
// add formatting to our value
function (s){
// return the number as a dollar amount
return $ + s.toFixed(2);
In some implementations, toFixed is buggy, though likely it doesn't
matter here.
URL: http://www.merlyn.demon.co.uk/js-rndg1.htm#toF
},
// once all calculations are completed, we execute
the code below
function ($this){
// now we get the sum() of all the values we
just calculated
var sum = $this.sum();
Where is sum() defined? Does it validate user input?
// now that we have the grand total, we must
update the screen
$(#grandTotal).text(
// round the results to 2 digits
$ + sum.toFixed(2)
If the values have already been rounded, their sum does not need to be
rounded again.
);
}
);
}});
/script
/head
body
table width=500
col style=width: 50px; /
col /
col style=width: 60px; /
col style=width: 110px; /
tr
th
Qty
/th
th align=left
Product
/th
th
Price
/th
th
Total
/th
/tr
tr
td align=center
input type=text name=qty_item_1 id=qty_item_1 value=1
size=2 /
/td
td
/td
td align=center id=price_item_1
$39.99
/td
Somewhere there must be a calc() function that takes an input element
and gets its value, then any other type of element and gets its text
content (or value perhaps), strips off the currency sign, multiplies
the two and returns the result. Maybe it does some checking of the
values it's been passed. Or not.
It seems strange that a function called sum would not do rounding.
How is invalid input handled?
--
Rob
