[jQuery] Re: Is there have any JQuery plugin that can sort 1A,2A,3A,... 10A, 11A, 12A, 13A, 14A?
On Feb 2, 10:37 am, HenryRock henryloke.myetr...@gmail.com wrote:
I facing a problem in sorting :
1A,2A,3A,... 10A, 11A, 12A, 13A, 14A
[ ... ]
May I know is there have any plugin that can sort the sample data
above to 1A until 14A?
Note that it's not hard to do this in Javascript, though:
var sorter = (function() {
var regex = /^(\d+)([a-z]+)$/i;
return function(o1, o2) {
var left = regex.exec( + o1);
var right = regex.exec( + o2);
if (left) left[1] = Number(left[1]);
if (right) right[1] = Number(right[1]);
if (!left) return (right ? 1 : (
+ o1 + o2 ? -1 : ( + o1 + o2 ? 1 : 0))
);
if (!right) return -1
if (left[1] right[1]) {
return -1;
} else if (left[1] right[1]) {
return 1;
} else {
if (left[2] right[2]) {
return -1;
} else if (left[2] right[2]) {
return 1;
} else {
return 0;
}
}
};
})();
var values = [12A, 11B, 1A, 2C, 2B, 2A,
1a, 4B, 13C, 12C, 3B, 3A];
// 1A,1a,2A,2B,2C,3A,3B,4B,11B,12A,12C,13C
alert(values.sort(sorter));
Good luck,
-- Scott
[jQuery] Re: FastFlip like plugin
On Jan 20, 9:47 pm, Richard richar...@gmail.com wrote: do you know of a JQuery plugin that supports rapidly skimming through an image set like Google's FastFlip? For demo seehttp://fastflip.googlelabs.com/ Do you mean something more than the various carousel plug-ins? http://www.google.com/search?q=jquery+carousel -- Scott
[jQuery] Re: Call ajax on sucess response from a previous ajax
On Jan 20, 11:45 am, Bonji benho...@googlemail.com wrote: I've tried placing the second $.ajax inside the success fuction of the first $.ajax but the second call never triggers or doesn't return anything. This technique works for me. http://scott.sauyet.com/Javascript/Demo/2010-01-21a/ I have a nested AJAX call, and it seems to work just fine. The AJAX'd pages are trivial for my test: http://scott.sauyet.com/Javascript/Demo/2010-01-21a/verify.phps http://scott.sauyet.com/Javascript/Demo/2010-01-21a/info.phps Is there a way of queuing $.ajax functions so they fire on after another? Do you have the ability to post a full sample somewhere? That is, one with actual working AJAX calls and a broken attempt to nest them? It might be more helpful than the code sample posted here. (It would be nice if it were quite minimal too.) Cheers, -- Scott
[jQuery] Re: click action effect/problem
I'd like to thank you guys again for the quick response, but for some reason, both methods aren't working. I made two suggestions. MorningZ's suggestion was very much like my first one. My second one is a bit more general, and might help. I modified MorningZ's page here: http://jsbin.com/ejuga3/3 (code: http://jsbin.com/ejuga3/3/edit) Can you try my second one to see if that works? -- Scott
[jQuery] Re: JQuery and AJAX Heartbeat question
On Jan 19, 4:44 am, mind01 mindproduction...@gmail.com wrote: If i try set_time_limit(20); it gives me an 500 error after 20 seconds, but if i set the value to 60 seconds, i still get a server time out after 30 seconds. If you're in control of the php.ini file, there is almost certainly a setting in there you can use. But I doubt this is something overridable in individual scripts. I have seen upload scripts with some kind of callback to the server to avoid a time out. Yes, but uploads are handled differently than these scripts. I'm pretty sure your PHP script is not called until the entire HTTP request is received. Callbacks are probably built with something watching for the upload to a file to be completed, although that's a complete guess. There must be something i can do right? Well you, of course. If you can update the php.ini, I'm sure you can fix this. But that would mean that your server might hang, for say ten minutes on other requests that are not processing, just stuck. I think the solution I suggested before would not be terribly difficult to work out. Good luck, -- Scott
[jQuery] Re: click action effect/problem
On Jan 18, 4:07 pm, Legostrat legost...@gmail.com wrote:
div id=button
Click here
div id=submenu
option 1
option 2
/div
/div
So, when you click on the button div, it reveals the sub-menu div.
The problem is that when you click on the content within the sub-menu
it activates the .click action attached to the button div.
I didn't go to the live site, but if your markup is as simple as that
(i.e. Click here is directly in the outer div) then this might be
all you need:
$(#button).click(function(event) {
if (event.target.id != button) return;
$(#submenu).toggle();
});
If the click here is nested deeper, you might need something more like
this:
$(#button).click(function(event) {
if ($(event.target).closest(#submenu).length) return;
$(#submenu).toggle();
});
The idea is simply to ignore those events that are inside the submenu.
Cheers,
-- Scott
[jQuery] Re: JQuery and AJAX Heartbeat question
On Jan 18, 4:25 pm, mind01 mindproduction...@gmail.com wrote: I have a PHP script called zip.php to generate a zip file. This requires more than 30 seconds so my server give me an server error 500 time-out. Can i avoid this 500 error with JQuery and AJAX heartbeat? Probably not. AJAX is just going to give you additional HTTP requests, and won't change what's happening on the server for the initial request. One possibility would be to have your script start a process that will do the zipping and then use AJAX to poll from the client to see if the zipping is complete. Once it's finished, you can download it or do whatever else you need. The process you start would probably have to be a bit more complicated than just zip. You might want to start something that zips to a temporary file and when that's complete renames it to the file name you'll be polling for. Otherwise, PHP might tell you that the file is ready even though its still being built. Good luck, -- Scott
[jQuery] Re: Select part of text and add a CSS class
On Jan 18, 11:46 am, Mircea i...@amsterdamsat.com wrote: Yes, I want to be able to select a part of the text and add a span to it. Can this be done? It's a very difficult problem to solve in the general case. Imagine this markup: pIt's a strongvery difficult problem/strong to emsolve in the general case/em./p And then you want to select the text difficult problem to solve. You would essentially need to transform that markup to something like this: pIt's a strongvery /strong span class=highlight strongproblem/span to emsolve/em /span emin the general case/em./p Is this doable? Yes. Easy? Far from it. -- Scott
[jQuery] Re: Open/Save as dialog box
On Jan 18, 11:27 am, m.ugues m.ug...@gmail.com wrote: Is there a way to catch the event when the browser open to the user the classical Open/ Save as dialog box?http://qpack.orcanos.com/helpcenter/Images/openSave.png I need to do something when the dialog is shown. I don't know for sure, but I would doubt it. It's too close to OS operations. -- Scott
[jQuery] Re: Sort options in select.
On Jan 18, 3:52 am, NMarcu marcu.nico...@gmail.com wrote:
What's the best way to sort options in select. I found a jquery
plugin sortOptions(), but if I have options:
Address 1, Address 2, Address 3, Address 100, Address 200
, will be sort like this:
Address 1, Address 100, Address 2, Address 200, Address 3
...and is not good. Do you have another solution, or how can I adapt
this one to do a good sorting.
If this is the sortOptions from
http://www.texotela.co.uk/code/jquery/select/
you should be able to modify this yourself, and perhaps submit a patch
back to the creator. Ideally, it would follow this pattern:
$.fn.sortOptions = function(ascending, params) {
var parameters = $.extend( {}, $.fn.sortOptions .defaults,
params || {});
// [ ... ]
// sort items in array
sA.sort(parameters.sortFn);
// [ ... ]
};
$.fn.sortOptions.defaults = {
sortFn: function(01, 02) {
// original sort algorithm here
}
}
That would be the only changes needed to the original plug-in. Then
you could use it by either overriding
jQuery.sortOptions.defaults.sortFn or by passing in your function to
the call like this:
$(selector).sortOptions(true, {sortFn: mySortFn});
You might want to do some additional work to allow the first parameter
to sortOptions to remain optional.
As to actually implementing your sort, I leave that to you
Good luck,
-- Scott
[jQuery] Re: Select part of text and add a CSS class
On Jan 18, 4:55 pm, Scott Sauyet scott.sau...@gmail.com wrote: pIt's a strongvery /strong typo: strongdifficult /strong -- Scott
[jQuery] Re: Accessing an objects array from an $.ajax call
On Jan 12, 10:27 am, Matthias matthias.lueb...@gmail.com wrote:
I have an object with a member function that changes something on the
objects state. This works perfectly fine in the easy case. But when I
use an $.ajax call within the function it doesn't work.
Here is the example code and failing QUnit tests:http://pastie.org/774900
There are two different problems here. One is that unless your code
is running at www.google.de, cross-site scripting restrictions will
not allow you to AJAX in content from there. Since this is clearly a
simple test, just checking if an AJAX call returns with any content,
you can set the url for now to document.location.href.
The main problem, though, is with the ordering of your asynchronous
code.
This is what you have:
test('testing MyObject2 async', function() {
var o2 = new MyObject2();
stop();
setTimeout(function(){
o2.myfunction(function(){start()});
}, 100);
equals(o2.mycollection.length, 1); //== fails
});
I think this might have been copied from the examples and modified
incorrectly. In that case, the setTimeout call was supposed to be the
asynchronous call in question, as that's simpler to demonstrate than
actual AJAX calls.
The order of execution here is as follows:
1. o2 is created
2. stop is called, so no tests will be executed
3. setTimeout is called
4. equals is called, being passed the values 0 and 1. It defers
actually running the QUnit test because stop had been called.
5. (100ms later) the argument to setTimeout is started
6. o2.myfunction is called
7. an AJAX request is made, initiating an HTTP request
8. The HTTP request completes
9. The AJAX callback pushes test onto o2's mycollection. Only
now does the length change
10. Your anonymous callback function is called, which calls start
11. QUint checks if the two parameters supplied earlier are equal.
This fails.
This can be fixed relatively easily:
test('testing MyObject2 async', function() {
var o2 = new MyObject2();
stop();
o2.myfunction(function() {
equals(o2.mycollection.length, 1); //== works now
start();
});
});
This moves the call to equals *inside* the callback. Although the
equals test is now earlier in the source code, it is executed later,
after the value you're checking has actually been updated.
I've posted an example of this to
http://jsbin.com/oxegu (code http://jsbin.com/oxegu/edit)
Good luck,
-- Scott
[jQuery] Re: Accessing an objects array from an $.ajax call
On Jan 12, 2:50 pm, Matthias matthias.lueb...@gmail.com wrote: oh I thought stop() would actually hold the execution of the test... It does. However the parameters passed in to the equals call are evaluated immediately, as they are in most programming languages. (Haskell is an exception, and other languages might allow it as well.) So you've essentially delayed the execution of comparing 0 and 1. Well thanks a lot for the superb and detailed answer. You helped me a lot. Glad to hear it. You're welcome. -- Scott
[jQuery] Re: Disable Submit
On Jan 12, 2:49 pm, Dave Maharaj :: WidePixels.com
d...@widepixels.com wrote:
I have a form i am submitting via Ajax. So after submit while its waiting
for response i have my little spinner so user knows something is happening.
But how can i disable the submit while its thinking waiting for a response
so the user is not sitting there clicking submit over and over.
MorningZ's suggestion is good, but there is another approach that is
always worth considering for any long-running function that you don't
want started while it's already running.
function myLongRunningFunc() {
if (arguments.callee.running) return;
arguments.callee.running = true;
// your processing here
arguments.callee.running = false;
}
This is simpler than you need, if you have multiple forms to submit,
so you'd have to store the running flag in the form, not the function,
but it's not too hard to modify.
Here's a modification of MorningZ's page:
http://jsbin.com/upilo (code http://jsbin.com/upilo/edit)
I think this is incomplete, because a form can be submitted in other
ways than by the click of a particular button, but some variation of
this might do.
It's not that I think this is a better solution than blockUI, but it's
a useful technique in its own right.
Cheers,
-- Scott
[jQuery] Re: Function help
On Jan 12, 1:59 pm, Dave Maharaj :: WidePixels.com
d...@widepixels.com wrote:
I have this function:
[ ... ]
So it works fine but I have this in 5 pages on the site and was wondering
how can I turn this into a standard function and call it like:
addRecord(form_id);
There are several ways to do this. The simplest is as follows:
function internalAddRecord() {
var data = $('#add').serialize();
$.ajax({
// ...
});
}
function addRecord(formId) {
$('#' + formId).live('click', internalAddRecord);
}
addRecord('myForm');
This is straightforward. But it has one issue in that it pollutes the
global namespace with the internalAddRecord function, which presumably
shouldn't be used anywhere else. You could make the function
anonymous, like this:
function addRecord(formId) {
$('#' + formId).live('click', function() {
var data = $('#add').serialize();
$.ajax({
// ...
});
});
}
But if that's not to your taste but you don't want to pollute the
global scope, you will need to store that internal function in some
other scope. One technique stores it inside your main function like
this:
function addRecord(formId) {
function internalAddRecord() {
var data = $('#add').serialize();
$.ajax({
// ...
});
}
$('#' + formId).live('click', internalAddRecord);
}
addRecord('myForm');
This works; you expose only the addRecord function. But it is a
little wasteful of memory as it creates a new copy of the
internalAddRecord function for every call to addRecord. Another
variation which is syntactically more complex, but which saves you
that overhead would store the internal function inside a closure, as
such:
var addRecord = (function() {
function internalAddRecord() {
var data = $('#add').serialize();
$.ajax({
// ...
});
}
return function(formId) {
$('#' + formId).live('click', internalAddRecord);
}
})()
addRecord('myForm');
An alternative method involves creating a jQuery plug-in for your
functionality, so that you could use it like this:
$(#myForm).addRecord().hide().fadeIn('slow');
That would have some advantages, but is probably not worth the
effort. If you're interested, Mike Alsup's tutorial is excellent:
http://www.learningjquery.com/2007/10/a-plugin-development-pattern
None of these are tested, of course.
Good luck,
-- Scott
[jQuery] Re: Optimized jQuery
On Jan 10, 8:14 pm, Adrian Lynch adely...@googlemail.com wrote: I get a bad feeling when I'm asked to go to a site using IE! Anyone had a look? I couldn't see anything strange with IE. What animations are causing problems? -- Scott
[jQuery] Re: Displaying reviews using js widgets such as in freeindex.co.uk
On Jan 10, 11:49 pm, SkilliPedia skillipe...@googlemail.com wrote:
I have a website where services, software,etc get reviewed. What i
want to do is enable users to display reviews in their own websites as
testimonials and as extra backlink for me.
I am looking for a js widget that can do that. My web application is
coded in Java
I think doing this in jQuery would be a really heavy-weight solution.
Requiring your users to include jQ on their page just to add your
widget seems rather much, especially as this probably doesn't need to
do too much. The example you point to formats everything server-side
as a single call to document.write(). That would probably be the
easiest approach.
That said, if you do choose to use jQuery, I suppose you can add it
yourself in your script, with something like this:
var script = document.createElement(script);
script.src = http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/
jquery.min.js;
script.type = text/javascript;
document.getElementsByTagName(head)[0].appendChild(script);
From here you could request a JSONP call from your server in this
format:
callbackName({status: ok, reviews: [{rating: 7, reviewer:
Fred, comments: Loved it!}, {/* etc */}]});
with code that looks like this:
$.getJSON(http://api.flickr.com/services/feeds/photos_public.gne?
tags=cattagmode=anyformat=jsonjcallback=?,
function(data) {
if (data.status == ok) {
$.each(data.reviews, function(i, review){
// do something with review
});
} else {
// report error or ignore as you like
}
);
The trouble I see with doing it this way is that you will need hook
into the DOM on an arbitrary site, or proceed with additional
document.write statements in any case. And if you have to do the
latter, why not simply format the server-side response as
document.write statements?
Good luck,
-- Scott
[jQuery] Re: Why mootools animations is more smooth than jquery?
On Jan 6, 9:15 pm, Acaz Souza acazso...@gmail.com wrote:
Is just for learning this interesting point.
What the matematics logic of both in animation framework.
They use the same logic?
This is the original question:
| MooTools:http://www.jsfiddle.net/4vnya/
| jQuery:http://www.jsfiddle.net/eFbwJ/36/
| (Compare the code, the effects. You decide.)
First of all, the two links are reversed:
MooTools: http://www.jsfiddle.net/eFbwJ/36/
jQuery: http://www.jsfiddle.net/4vnya/
That simply obfuscates any issues that exist.
Second, the visual effect generated is different. Note that in the
jQuery one, the image receiving the click ends up on the top of the
stack. In the Mootools one, they are stacked in source code order.
Third, running in FF (the only place I've tested so far), the jQuery
is doing extra work in rotating the images, which doesn't happen in
the MooTools version. (MooTools has
'-webkit-transform': 'rotate(' + RandRange(-30,30) + 'deg)',
whereas jQuery has both
'-webkit-transform': 'rotate(' + RandRange(-30,30) + 'deg)',
and
'-moz-transform': 'rotate(' + RandRange(-30,30) + 'deg)'
.)
Fourth, the different background images will certainly have some
noticeable impact on how animations appear.
Fifth, the MooTools code has what looks like an easing algorithm
applied:
images.each(function(img){
img.set('morph', {
transition: 'back:out'
});
}
but no jQuery equivalent is used.
Sixth (and this might be the cause of the second one) the MooTools
effect is staggered across the images, while the jQuery ones run
simultaneously. This uses the 40ms increments with this code
structure:
images.each(function(img, i){
(function(){
// animation code here.
}).delay(40 * i, img);
});
Finally, although these two animations both move the images
approximately the same amount, the transformations they apply are very
different. When the MooTools example collapses the images, they move
to locations within +- 20 pixels from the location of the clicked
image, and are not rotated. When the jQuery example collapses the
images, they move to the same location as the clicked image, and are
rotated to between -20 and 20 degrees.
In other words, these two animations are far too different to use for
comparing the libraries.
-- Scott
[jQuery] Re: Displaying reviews using js widgets such as in freeindex.co.uk
On Jan 11, 2:18 pm, Viz skillipedia skillipe...@googlemail.com wrote: Thank you very much You're welcome. I am, now, certain the document.write() is all what in need: i process the request in Java handler and may be a bit of jsp scripting and all the rest is easy Note, though, that it might still be a good idea for the server to offer a JSONP version anyway. This way, JS-savvy users could integrate the reviews into their site as they like, without using a widget which might not fit at all with their design. Just a thought. Good luck, -- Scott
[jQuery] Re: Go through XML nodes only 1 level deep
On Jan 7, 7:48 pm, Frank Peterson fictionalper...@gmail.com wrote: Well the xml file is not on my server, but I'll try to shoot them an email and let them know, they should set the headers. Are you sure that you're not running into cross-site scripting issues? Security restrictions will prohibit you from AJAXing content from other servers. One solution is to create a local proxy on your server to pass through the calls. For example, this page will error out: http://scott.sauyet.com/Javascript/Demo/2010-01-08a/ But this one will work: http://scott.sauyet.com/Javascript/Demo/2010-01-08b/ The only difference is in the URL that's called: url: http://ipinfodb.com/ip_query.php?ip=; + $(#ip).val() url: proxy.php?url=http://ipinfodb.com/ip_query.php?ip=; + $ (#ip).val() If you're using PHP, feel free to steal the PHP code (which is quite possibly horrible; I don't know PHP that well): http://scott.sauyet.com/Javascript/Demo/2010/01/08b/proxy.phps This is a very limited proxy, proxying only these requests. -- Scott
[jQuery] Re: jQuery and IE 8
I don't get any error. Have you fixed it since posting yesterday? -- Scott
[jQuery] Re: jQuery Equivalent of Prototype Function.bind
On Jan 5, 9:43 am, Bruce brucejin...@gmail.com wrote: Is there a jQuery way of doing this Prototype bind? I don't know about built-in means, but here is one that Google provides: http://groups.google.com/group/jquery-en/msg/0980e113f097720a -- Scott
[jQuery] Re: jQuery parent remove
On Jan 6, 4:42 am, Lone Wolf khura...@gmail.com wrote:
$(document).ready(function(){
$('table.small td img.delete').click(function(){
$.get('ajax/update-callback.php', {doaction: 'remove', callbackid: $
(this).attr('id')},
function(data){
alert($(this).attr('id'));
$(this).remove();
});
});
});
update-callback.php is called and the function is performed by php.
However, in the callback function of the jQuery, $(this) is not
available as alerting its attr('id') gives undefined which it happily
added in the GET of the update-callback.php. Can you tell me what I
could be doing wrong.
The this reference in your callback function does not refer back to
the this in your outer function. [1]
You need to save a reference to it to use in the callback.
This is untested, but might do it:
$(document).ready(function(){
$('table.small td img.delete').click(function(){
var deleteImg = $(this);
$.get('ajax/update-callback.php', {/* ... */},
function(data){
alert(deleteImg.attr('id'));
deleteImg.remove();
}
);
});
});
Cheers,
-- Scott
[1] According to the docs, this refers to the options for your ajax
request
[jQuery] Re: Cycle and softedge
On Jan 6, 10:17 am, exlibris exlib...@visi.com wrote: Does anybody know how to either better integrate the softedge.js library, I don't think it will work when the cycle plug-in is used directly on the images, as the softedge technique replaces an image with a stack of images in the same location with increasing opacities and decreasing clip size. But I think if you put your images in some containers and use the cycle plug-in on those containers, it might work. Good luck, -- Scott
[jQuery] Re: Pass object to function
On Jan 6, 2:17 pm, knal knalp...@gmail.com wrote:
BTW It also works without the return this.each() { part!
Yes, but that allows you to continue chaining, i.e.
$(this).closest(.project).closeProject().css({color: blue});
or whatever. This is the usual technique with jQuery plug-ins.
-- Scott
[jQuery] Re: Why mootools animations is more smooth than jquery?
On Jan 6, 3:44 pm, Acaz Souza acazso...@gmail.com wrote: MooTools:http://www.jsfiddle.net/4vnya/ jQuery:http://www.jsfiddle.net/eFbwJ/36/ (Compare the code, the effects. You decide.) Why mootools is more smooth than jquery? It's not, at least not in my FF3.5.6 on Win XP. Haven't you been here asking this question before? Are you trying to get information or prove some obscure point? -- Scott
[jQuery] Re: How to gain reference to hyperlink that is clicked
On Jan 5, 3:43 pm, Charlie Griefer charlie.grie...@gmail.com wrote: Within the function triggered by the click event, $(this) or this are both references to the element that triggered the click. More precisely, this is a reference the to element. $(this) is a reference to a jQuery wrapper object containing only that element. -- Scott
[jQuery] Re: Help on Independent DIV's that toggle!!
On Dec 31 2009, 5:10 pm, Šime Vidas sime.vi...@gmail.com wrote: Scott, you used A elements as JS triggers which is not proper... the A element is for linking to other web-resources. If you need an element for onclick JS execution, just use a button or a SPAN element Well, I was modifying existing code, which had A elements. There's only so many changes you can make at a time. But still, I don't think I agree with you about the unsuitability of using them so. First of all, they do link to additional resources, albeit ones that are on the same page (and of course we use them that way to in non-JS markup.) And secondly, while I believe in keeping initial markup quite clean, I don't feel any compunction about using whatever generated DOM elements make my job easier. Sure I could use a SPAN to do the same job, but then I'd need to style it like a default link, add hover behavior to it for the mouse pointer. I don't see the advantage. Is there any compelling reason you can explain to avoid them here? -- Scott
[jQuery] Re: jQuery + OOP + AJAX
On Dec 31, 4:25 am, fran23 f...@lavabit.com wrote: the target variable in your sample code has a $-prefix ($target). I think this is just an eye-catcher for variables - a similar coding to php. If not - if it has to do with something special in Javascript or jQuery - please let me know ... $ is just a regular character in variable names. Many jQuery users will use it to visually distinguish variables representing jQuery collections from DOM elements or other JS variables. Just a reminder to myself. -- Scott
[jQuery] Re: Help on Independent DIV's that toggle!!
On Dec 30, 8:00 pm, Erik R. Peterson eriks...@mac.com wrote:
Wow... I'm just now getting back to this and I am totally messed up.
I never thought it would be such a challenge.
It's not that this is a challenge. There are many different
directions you could go from here. You didn't supply a sample page or
your markup, so the only clues to what you wanted had to be divined
from your code and comments. But the suggestions made were correct.
If you're interested, let me take you through some steps that you
might go through to make your code more robust.
First, I'm going to assume a markup format:
div class=entry
h2My Entry/h2
p class=teaserTeaser content/p
pa id=slick-toggle href=#More Details/a/p
div id=content1
pAdditional content/p
pMore additional content/p
pStill more additional content/p
/div
/div
Of course it's quite possible that you are using very different
markup, but this should be enough for demonstration.
I have a page with that markup and your code at:
http://scott.sauyet.com/Javascript/Demo/2009-12-31a/1/
This page works as expected. Now you want to extend this to other
DIVs, I've added several more entry sections here:
http://scott.sauyet.com/Javascript/Demo/2009-12-31a/2/
The only markup change I made was to note that since every id must be
unique on the page, I changed the initial slick-toggle to slick-
toggle1 to match the content1, and I updated the JS to match. This
might well be the issue you are having with independent DIVS. If
you've repeated the slick-toggle id in your multiple entries, then
clicking on the first one would toggle all content sections.
Now we can update the script to handle all these. This is not my
suggested way to do it, but it's a good first pass:
function createToggler(contentId, linkId) {
$('#' + contentId).hide();
$('a#' + linkId).click(function() {
$('#' + contentId).slideToggle(400);
$(this).text($(this).text() == 'More Details' ? 'Close' :
'More Details');
return false;
});
}
$(document).ready(function() {
createToggler('content1', 'slick-toggle1');
createToggler('content2', 'slick-toggle2');
createToggler('content3', 'slick-toggle3');
createToggler('content4', 'slick-toggle4');
});
You can see this in action at
http://scott.sauyet.com/Javascript/Demo/2009-12-31a/3/
But there is something inconvenient about this, especially if the page
is to include generated content. You have to include a separate
Javascript line for every section you want toggle-able. You can get
around this if you have consistent markup like this, using the fact
that every entry is in a div with class entry, and you can use code
like this:
$(document).ready(function() {
var count = $(div.entry).size();
for (var i = 1; i = count; i++) {
createToggler('content' + i, 'slick-toggle' + i);
}
});
This is available at
http://scott.sauyet.com/Javascript/Demo/2009-12-31a/4/
This can be extended further, by noting that the relationships between
the additional content and the link used to toggle it can be
determined by their relationship in the DOM. We can remove the IDs
and replace them with appropriate classes. So we can change the
markup to this:
div class=entry
h2My Entry/h2
p class=teaserTeaser content/p
pa class=slick-toggle href=#More Details/a/p
div class=content
pAdditional content/p
pMore additional content/p
pStill more additional content/p
/div
/div
And then we can simplify our script to just this:
$(document).ready(function() {
$('.content').hide();
$('a.slick-toggle').click(function() {
$(this).text($(this).text() == 'More Details' ? 'Close' :
'More Details')
.parent().nextAll(.content').slideToggle(400);
return false;
});
});
By traversing the DOM from our link to its parent and from there to
the next sibling element that has class content, we maintain the
relationship between the link and the additional content without
having to synchronize IDs. This is at
http://scott.sauyet.com/Javascript/Demo/2009-12-31a/5/
There is still one nagging issue here. If you view this page with
Javascript turned off, the content is properly in place, but there are
these useless links on the page, all reading More Details. These
shouldn't be here unless the user has Javascript turned on and they
can actually do something. One possible solution is to hide them with
CSS and show them with JS, but that still leaves them in the markup
for readers that aren't using JS or CSS. A better choice might be to
add them in the first place using JS. To do this, we can remove them
in the markup:
div class=entry
h2My Entry/h2
p class=teaserTeaser content/p
div class=content
[jQuery] Re: Referring to the current DOM object in a jQuery method parameter list
On Dec 31, 1:19 pm, Nathan Klatt n8kl...@gmail.com wrote: But, that seems like too much code for jQuery. :) I want something like: $someId.text(self.attr(alt)); I've often wanted something like that too. Unfortunately... This doesn't work: $someId.text($(this).attr(alt)); Does that functionality exist and I just couldn't find it in the docs? No, and it can't be added. This is not a problem with jQuery. It's intrinsic to Javascript, and in fact is the same in pretty much all programming languages I know. Somehow we expect all the other magic that jQuery gives us to extend to here, but it can't. The problem is that the parameters to the function text() are evaluated *before* the function is called. In that context, this cannot refer to $someId or to a DOM node it's wrapping up, because we are not yet in such a context. The best we could do is to pass in a function which could then be evaluated in the correct context. That is what .each() does, as do numerous other calls. But they won't give you the syntactic convenience you're looking for. Sorry. -- Scott
[jQuery] Re: jQuery + OOP + AJAX
On Dec 30, 10:51 am, fran23 f...@lavabit.com wrote:
Thanks Scott ! Your proposals are an inspiration in doing things better.
Glad to help. This one will have to be shorter...
First of all, does the click have to be in the last paragraph itself?
Or could it be in some parent container of the paragraphs?
[...snip...]
it's not possible to use the parent, I need the identified paragraph in the
ajax-call
I guess the question is whether you can bind the event handler to the
container. The click event will still have a target that points to
your paragraph (or one of its children, and that's an annoying, but
tolerable, complication), so you can still use the paragraph to help
with your Ajax call.
[ ... ]
Coming back on my early show() coding, that bothers you (and me).
The easiest way to update the content after an AJAX call seemed (to me) to
replace ALL
content (the old text) in calling Show( old + new text). That's not
beautiful but
may be useful - especially I could take the same principle in showing a
totally other chapter.
It's still not clear to me what portion of the markup is inline in the
page, and what chunks are retrieved from ajax calls, and with what
granularity. I would suggest that you update the page with what's in
the Ajax call, and not try to keep a separate version of the entire
data anywhere but in the DOM.
Well, I will not do it longer this way. Instead I will append it ...
$content.append(s ... /s).children(a).click( function()
{
AJAX-call
};
If $content already has children(a), then you will be binding the
same event handler again. This might do better:
$(s ... /s).appendTo($content).children(a).click( function
()
{
AJAX-call
};
In this case, you will bind the click handler this time only to the
a children of the newly appended portion.
And now the special case when all content has to be substituted. That
matches following code out of your proposal:
function showNextChapter() {
chapter = getNextChapter();
$content.empty().append(h2 + chapter.title + \/h1);
$content.append(chapter.paragraphs[paragraphIdx]);
This line was left over from an incomplete refactoring. It should
really read:
$content.append(getNextParagraph());
but that's not really relevant to our discussion.
}
[ ... ]
a qualitative difference to my Show()-Function is a call on empty() in front
of setting new content.
This seem to be the solution to my trouble. In other words: I could take my
Show()-Function
(= RE-SETTING all text + event handlers) IF - that seem to be the point - IF
I call the empty() function before.
I wouldn't recommend it, as you will now need to rebuild your content
from somewhere else. If that content is all coming in from the Ajax
call, this is fine.
It would not be a beautiful way, I really agree, but it would be a working
way without negative side-effects or problems. Can you confirm ? Calling
empty() before setting the new content will work around your comment (
But even here, there is still something strange. On each click of the div,
you're binding another event handler to do the same job
Yes, if you remove the items that have the event handlers on them,
then there should be no conflict.
What will I do now ?
*) I will take some lessons in Javascript OOP (... the prototype construct
... etc.)
*) I will rework my code being more appropriate Javascript OOP
*) I will append new paragraphs and give them a click handler (as the old
p's already have)
*) I will do an empty() call on the container, before I give new content to
it.
Am I right ? Did I forget or misunderstand something ? Don't hesitate to
contradict if you find something wrong !
Again, I would only do that last if I had all the replacement content
coming in from my Ajax call. The DOM is the right place to store this
kind of data.
And thanks once more for your comments and inspirations !
Again, my pleasure.
By the way, I posted a second version of my earlier example, this one
more ready for ajax or other asynchronous processing, which can get to
be a chore. It's at
http://scott.sauyet.com/Javascript/Demo/2009-12-29b/
http://scott.sauyet.com/Javascript/Demo/2009-12-29b/?last
It's a straightforward reworking of the synchronous version posted
earlier.
s type=:-)
[a type=German]einen guten Rutsch ins Neue Jahr[/a]
[b type=English]slide well to the New Year[/b]
/s
And a Happy New Year to you as well.
-- Scott
[jQuery] Re: Plugin Authoring and $.extend
On Dec 30, 1:35 pm, T.J. Simmons theimmortal...@gmail.com wrote: You know, I see it now; it says in the documentation The object that will be merged into the jQuery object... I read that and took it to be the core of jQuery itself, since the documentation only lists one argument for $.extend. In Mike's article I saw that it was combining two things, I just wasn't seeing the why; now I do. I think there's some confusion between these two: http://docs.jquery.com/Utilities/jQuery.extend#deeptargetobject1objectN http://docs.jquery.com/Core/jQuery.extend#object If you only pass one object to extend, jQuery assumes you mean to extend jQuery itself. -- Scott
[jQuery] Re: jQuery + OOP + AJAX
On Dec 29, 5:23 am, fran23 f...@lavabit.com wrote:
But even here, there is still something strange. On each click of the
div, you're binding another event handler to do the same job.
that's the CENTER OF MY TROUBLE. I did speak about the reason for using the
show() function above.
But maybe I can get your patience for one more special example that desribes
my intention and trouble more precisely: Let's assume I work on a web site
that should display the paragraphs of a book. The book has chapters and each
chapter has ps. I start displaying the first p (of the first chapter).
When read by the user he clicks on the p and the next paragraph will
shown.
[ ... ]
I can go on this way until the last p of the current chapter is
added/shown. Now I should start with the first p of the second chapter.
Therefore I have to delete all p's (of chapter 1) and show the first p
of chapter 2. This is what my show()-function should do (that bothers you
[and me too]): replace all current shown p's and RE-START with one p -
the first one of chapter 2.
Do you have any hint how to do it better ?
Well, first of all, it's a somewhat strange UI. I certainly wouldn't
want to click for every paragraph; and even if I did, I would think a
Next button would be a better place to click than on the paragraph
itself. But that aside, I'm sure it can be done.
First of all, does the click have to be in the last paragraph itself?
Or could it be in some parent container of the paragraphs? That would
make it easier to handle. You can then check the event target to see
if the user has clicked in the final paragraph. This allows you to
register only one click handler, on the container of the paragraphs.
You will need some additional logic to ... oh hell with it. Let me
give this a try.
Tinker, tinker, tinker. Ok. Done.
Something like this should work:
var $content = $(#content);
function showNextChapter() {
chapter = getNextChapter();
$content.empty().append(h2 + chapter.title + \/h1);
$content.append(chapter.paragraphs[paragraphIdx]);
}
function showNextParagraph() {
if (!moreParagraphsForChapter()) {
showNextChapter();
return;
}
$content.append(getNextParagraph());
}
$content.click(function(event) {
showNextParagraph();
});
showNextChapter();
and if you want to allow only a click on the last paragraph, you can
replace the event handler with something like this:
$content.click(function(event) {
var handleEvent = false;
var $target = $(event.target);
if ($target.is(p:last-child)) {
handleEvent = true;
} else {
var $para = $target.parents(p);
if ($para.length $para.is(p:last-child)) handleEvent
= true;
}
if (handleEvent) {
showNextParagraph();
}
});
Obviously, you would need to write the code for getNextChapter(),
moreParagraphsForChapter(), and getNextParagraph() with your Ajax
code.
You can see this in effect here:
http://scott.sauyet.com/Javascript/Demo/2009-12-29a/
or, with that last addition, here
http://scott.sauyet.com/Javascript/Demo/2009-12-29a/?last
This may be oversimplified, because I have no error handling on last
chapter, simply looping back to the first, but I think this captures
the gist of it.
Good luck,
-- Scott
[jQuery] Re: Problem with a search form in a loaded php file??
On Dec 28, 7:33 am, 123gotoandplay wesweatyous...@gmail.com wrote:
i have further altered the ajax_search function and i get the error
message [ ... ]
function err(){
alert('something went wrong');
}
This is the signature from the docs [1]
val err = function (XMLHttpRequest, textStatus, errorThrown) {
// typically only one of textStatus or errorThrown
// will have info
this; // the options for this ajax request
}
So when it's thrown, investigate textStatus and/or errorThrown to help
find the cause of the error.
Good luck,
-- Scott
[1] http://docs.jquery.com/Ajax/jQuery.ajax#options - find error
[jQuery] Re: jQuery + OOP + AJAX
On Dec 28, 11:45 am, fran23 f...@lavabit.com wrote:
There is a new love named jQuery but I still have some problems in
understanding issues totally (maybe like in real life ;) Coming from C++ it
takes some effort in dealing on the (totally other) javascript OOP.
The code below (that represents basics of a quite more complex issue ...)
runs fine, but it gives me some headaches.
There are several things that bother me about this code. The example,
by the way, does not run properly in IE8 (nor, I expect in earlier
versions.)
The main thing I worry about here is simplicity. I know this is a
simplification of your real code, but would some variation of this
simpler code work for you?:
$(function() {
$(#MyDiv).html(data_at_startup).click(function() {
// Simulation of an AJAX-call
$(this).html(data_out_of_an_AJAX_call);
});
});
MyDivObject = new MyDivClass;
function MyDivClass()
{
this.Show = function(txt)
{
$(#MyDiv).html(txt).click( function()
{
// Simulation of an AJAX-call
MyDivObject.Show( data_out_of_an_AJAX_call );
});
}
}
This definitely bothers me. Why should your MyDivClass know anything
about an individual MyDivObject? If you're trying to use the
Singleton pattern, this Javascript language construct would be
cleaner:
var myDivObject = {
show: function(txt) {
$(#MyDiv).html(txt).click( function() {
this.show( data_out_of_an_AJAX_call );
});
},
hide: function() { /* ... */},
otherVal: 17, // comma-separated list of members...
}
But even here, there is still something strange. On each click of the
div, you're binding another event handler to do the same job.
Something is really wrong with that.
What I do:
In my try to encapsulate jQuery-Code in classes/objects I declare
MyDivClass. Later an object of this type has to manage contents of the div
container div id='MyDiv'. At the beginning it simply has to exposure one
paragraph (= data_at_startup).
MyDivObject.Show( data_at_startup );
Adding some jQuery-Code to capture click-events on its paragraphs
$(#MyDiv).html(txt).click( function()
has to run in AJAX-calls (later) to updates parts of - or all of - MyDiv's
content (for simplification in the demo I call the Show() method just with
static data ( = data_from_AJAX_call);
MyDivObject.Show ( data_from_AJAX_call )
it works ... but I cannot look behind the scenes: Isn't there some kind of
recursion in calling .Show(...) ?
There's no direct recursion because the inner call to show is inside
an event handler (click(function...)). The multiple event handlers
are an issue, though. If you throw an alert() statement inside the
event handler function:
alert(testing);
MyDivObject.Show( data_out_of_an_AJAX_call );
you'll see that the alert pops up once when you click on it the first
time, twice if you click on it again, four time on the third click,
then eight times, etc.
I'm surprised because it seem to work fine, but ... is it acceptable code
... or do I run into problems by coding this way? Do I get (whatever)
problems in doing it this way ? What should I read learn to close the
knowledge leak in my mind ;) ?
I think you'll run into a number of problems besides those above.
Javascript can do a reasonable job of simulating a class-based OO
language, but it's not really the most natural fit. JS is more of a
functional language, and its natural object system is based upon
prototypes rather than classes. The equivalent of constructors are
just plain functions accessed with new, in this manner:
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
Person.prototype.greet = function(){alert(Hello, +
this.firstName + + this.lastName);};
var me = new Person(Scott, Sauyet);
me.greet(); // alerts Hello, Scott Sauyet
There are libraries designed to make it easier to use OO code with
Javascript, but I'd suggest you try first to learn how it works on its
own before trying any of those libraries.
There are not many very good Javascript books. I'd suggest two:
_Javascript: The Definitive Guide_, by David Flanagan, and
_Javascript: The Good Parts_, by Douglas Crockford. But neither is
really designed as a tutorial. Websites are probably your best bet
for this.
Cheers,
-- Scott
[jQuery] Re: jQuery suggestion
On Dec 28, 2:55 pm, Thai Dang Vu tdan...@gmail.com wrote:
I'm using IntelliJ Idea 9.0 which supports code completion/suggestion for
javascript. It doesn't work with the innerHeight/Width because of this
jQuery.fn[inner + name] = function(){ // [ ... ]
Is there anyway to implement the innerHeight and innerWidth in a regular
way?
Of course it could be done in the regular way. But this is a means
to keep the download size of the library small. There are numerous
places in the codebase where similar tricks are employed. One
consistent goal of the jQuery team has been to keep the library as
lean as possible, and such tricks help, with practically no
performance cost.
I believe it would take a great deal of persuasion to convince the
team that supporting code completion in this way is worth the
additional weight of the download, but feel free to try... :-)
-- Scott
[jQuery] Re: Why does this work??
On Dec 27, 10:07 am, merchz merch...@hotmail.com wrote: When I click that Cancel button, the alert executes just like I want it to do. But I can't figure out why?? I mean how can the eventhandler register correctly. Is the Cancel button from the AJAX call somehow magically insert into the DOM before the script registering the event executes? Hey, a magician never reveals her tricks, right? :-) In fact, though, that's exactly what happens. The script tags are stripped out of the response and inserted and run after the rest of the DOM changes. This could be a problem if you're trying to use script tags for something other than JS content, but that's pretty rare. Cheers, -- Scott
[jQuery] Re: Problem with a search form in a loaded php file??
On Dec 23, 4:37 am, 123gotoandplay wesweatyous...@gmail.com wrote: Now i am 'loading' list.php in #content and now the search function doesn't work. You might want to look at question 2.1 of the FAQ [1] or at the Ajax and Events Tutorial [2] to see if that's the issue. -- Scott [1] http://docs.jquery.com/Frequently_Asked_Questions [2] http://docs.jquery.com/Tutorials:AJAX_and_Events
[jQuery] Re: How to get these two slide show to alternate?????
On Dec 22, 10:56 pm, Rick Faircloth r...@whitestonemedia.com
wrote:
Just alternate the two slideshow transitions 3 seconds apart.
Why won't this work?
$('.slideshow').cycle(delay: 3000, timeout: 3000});
$('.slideshow2').cycle({delay: 6000, timeout: 3000});
I haven't used the plugin, but looking at the documentation, I think
you have delay and timeout switched. Delay is how long before it
starts out. Timeout is how long between each slide.
I think both need a timeout of 6000, and one needs a delay of 0, the
other of 3000.
-- Scott
[jQuery] Re: Problem with window focus event in Firefox 3.5/Win Vista?
On Dec 23, 5:29 am, paul s pksole...@gmail.com wrote:
I'm having a problem using:
jQuery(window).bind(focus, function(event) { alert(test); });
in Firefox.
I'd expect a single alert box when I focus on the window. However in
Firefox I get 4 alert boxes in a row?
I get an unending stream of them unless I can hit enter to cancel the
alert box followed very quickly by closing the tab, before the next
one pops up. Either that or I have to kill of the process.
I think the problem is that FF generates a window.focus event when the
alert dialog is closed. Leonardo Balter's suggestion may do it for
you, or find a way to use something other than an alert on focus.
Cheers,
-- Scott
[jQuery] Re: Jquery .submit not firing up!
On Dec 23, 9:25 am, Mike Alsup mal...@gmail.com wrote: If you can't post a link then create a very simplified example that demonstrates the problem and post a link to that. And if you haven't used it, JSBin is an excellent place to do it: http://jsbin.com/ -- Scott
[jQuery] Re: Problem with jQuery and AJAX
On Dec 23, 9:00 am, Muaz muazahmedm...@hotmail.com wrote: login and loggedin are two div which are on same place. Both divs are recreated by AJAX but after they are recreated jQuery stops working untill i manually refresh the page (Copying my reply from another thread...) You might want to look at question 2.1 of the FAQ [1] or at the Ajax and Events Tutorial [2] to see if that's the issue. -- Scott [1] http://docs.jquery.com/Frequently_Asked_Questions [2] http://docs.jquery.com/Tutorials:AJAX_and_Events
[jQuery] Re: Image Upload and preview
On Dec 23, 1:57 am, amy amy@gmail.com wrote: Hi I have todo an Image upload with Preview and I am using a jsp and servlet for it. I am stuck at a point and not getting a way out. [ .. ] I am unable to view the image. The control flows to servlet and gets stuck there. It does not move back to jsp. If you're really getting stuck in the servlet, this group is not going to be much help. You might try one of the many Java forums. [1] Maybe you could stick an alert in the first line of your ajax callback to see if you're really getting content back. Firebug or LiveHttpHeaders would also likely be able to help. Good luck, -- Scott [1] The Sun Servlet forum is usually pretty active and pretty helpful: http://forums.sun.com/forum.jspa?forumID=33
[jQuery] Re: huge drop down
On Dec 21, 1:11 pm, fachhoch fachh...@gmail.com wrote: is my question not clear ? please help me reoslve this Your own urgency is not enough motivation for the rest of us. First you post a question that you could probably have researched easily on your own to find out that IE will really not allow you to style the drop-down element. Then when several of us suggested plug- ins that convert your drop-down into something you can style, you tell us that it won't do for our needs and you yell at us with please, jquery experts tell me how to CONTROL WIDTH of dropdown IN IE Then you go ahead and make a stab at solving your problem by converting your drop-down into something you can style. When the style isn't quite what you want, you post a great deal of irrelevant code, and then ask of this group -- which focuses on a particular Javascript library -- for help with what looks to be a CSS or HTML problem. And you do not post a test case anywhere that we might use for testing. And then you whine about it when no one has followed up for thirteen hours, quoting your entire previous post in the process. I'd love to be able to help, but you're not holding up your end of the bargain. -- Scott
[jQuery] Re: huge drop down
On Dec 21, 2:45 pm, fachhoch fachh...@gmail.com wrote: Sorry .I am a java programmer , but dumb with css ,java script and specially working with IE , unfortunately every body has to work for IE, sorry again I'm not looking for an apology, just for enough information to use to help you. (And I'd like you to learn a little about the workings of such forums. This forum is particularly helpful and friendly, but even here, it's still considered impolite to complain about a thirteen-hour delay in responses. And using ALL-CAPS is interpreted as shouting.) Is there any simple way you can post your code somewhere people can look at it altogether, rather than the snippets you've posted? JSBin [1] can be very useful for this, although it doesn't give you a place to host your images. Browsers, especially Firefox with Firebug, give us some useful tools for analyzing such problems, so if we can see the problem in situ. Depending upon your needs, you might find helpful something I did on a recent project. I had some real mouthfuls to put into drop-downs, things like Chapter 130: Department of Economic and Community Development: Redevelopment and Urban Renewal; State and Federal Aid; Community Development; Urban Homesteading (Secs. 8-124 to 8-169w). Even in the really wide drop-downs I had available, monstrosities like this wouldn't fit. I simply trimmed down the text in JS to something that fit in my width. Chapter 130: Department of Economic and Community Development: Redevelopment and Urban … ( Secs. 8-124 to 8-169w) It's still a mouthful, but it's doable. If this would work for you, I can probably throw together a simplified version of the code for that. I am also mostly a Java developer, but in the last few years I have done a lot of front-end work, and become fairly proficient in HTML/CSS/ Javascript. The original issue you're describing is not really solvable. You simply can't style drop-downs in IE. Either the technique you tried above or one like this suggestion here is probably the way to go. But the issue you presented with your sample code is not a JQuery issue or a Javascript one. It's probably best addressed as HTML/CSS. Good luck, -- Scott [1] http://jsbin.com/
[jQuery] Re: Plugin development: Defaults options: Questions?
On Dec 21, 3:08 pm, Micky Hulse rgmi...@gmail.com wrote:
But, I guess I am wondering what the best way to handle javascript
error checking for required options?
There are a few options. I often add an optional errorHandler
function; my defaults would include:
errorHandler: function(status, message) {}
and then in development, I can pass in
$(selector).plugin({errorHandler: function(status, msg) {alert(msg
+ : + status);});
then pull it out for most production code.
Then your code can check that the required parameter is there.
if (!target) {
opts.errorHandler(1234, You forgot to pass a target);
return;
}
Alternatively, you can simply fail silently, but merely document that
the parameter is required.
$('#div').myFunction({ target: '#targ' });
If the only option is target, can I do something like this instead:
$('#div').myFunction('#targ');
Absolutely, and I would recommend it. I'd also lose the # and just
add it in in the code:
$(# + target).doSomething();
Because #targ is a required argument, should I handle it differently
than your normal options object?
Because it's the only required parameter, and in fact the only
parameter, I would definitely treat it differently. If you had five
required parameter and nine optional ones, they should probably all go
into an options hash, and you would have to deal with the fact that
some are required mainly in the documentation. I'm not sure where the
dividing line would be, but a single mandatory parameter definitely
falls in the simpler-is-better category.
Cheers,
-- Scott
[jQuery] Re: Plugin development: Defaults options: Questions?
On Dec 21, 4:06 pm, Micky Hulse rgmi...@gmail.com wrote:
Ok, so how does this look:
(function($) {
$.fn.myFunction = function(id) {
var $target = $('#' + id);
if($target.length 0) {
return this.each(function() {
// Do stuff here.
});
} // $target
};
})(jQuery);
$('#div').myFunction('targ');
Looks right to me. One alternative, which wouldn't break the chain if
target is not supplied properly, would be this:
(function($) {
$.fn.myFunction = function(id) {
var $target = $('#' + id);
if ($target.length != 1) return this;
return this.each(function() {
// Do stuff here.
});
};
})(jQuery);
My plugin will only be used on an #id, and the output will only
manipulate a unique #id... In other words, there will only be one
unique id in both cases. With that said, is it overkill to use
this.each()? If so, what is the alternative syntax?
I don't think it's overkill for your initial jQuery object. I would
suggest that you don't do anything with .each for the target; I can't
see any reason for that. jQuery.each() doesn't add much overhead. If
you really wanted an alternative syntax, you might simply work with
this[0], assuming it exists. In jQuery, that will be the first
matched element.
But this leads to a more fundamental question, of why would this be a
plug-in if it only works on a single DOM element, presumably with an
id selector? Why not a plain JS function of the following form?:
function myFunction(source, target)
You could still use jQuery inside the function.
Perhaps it's just to learn jQuery plug-ins, and there's nothing wrong
with that. But if it doesn't work on multiple elements, should it
really be a plug-in? Food for thought, anyway.
Good luck,
-- Scott
[jQuery] Re: onclick and jquery in the Outlook browser
On Dec 18, 3:47 am, gorfbox gorf...@gmx.de wrote:
I'm having a dickens of a time with something that should be easy.
When using $(body).append to place an anchor containing an onClick
statement in the html body, the code is executed and the anchor is
shown, but the onclick doesn't work. Strangely enough, if an anchor
with an onClick is statically placed in the html code it works fine.
This only happens when using the browser shown in Outlook; Chrome and
IE8 have no problems. Here's the code I'm using...
http://pastie.org/748407
There's a long thread on the dev group [1] about the use of .attr().
I would suggest that you simply not try to use it to set event
listeners. Instead, use .bind('click', fn) or the shortcut .click
(fn).
So instead of this:
$(body).append($('a').attr({onClick:alert('dynamic
test');return false}).text(Dynamic)) ;
try something like this:
$(body).append($('a').click(function(){alert('dynamic
test');return false;}).text(Dynamic));
See this for an example:
http://jsbin.com/eqiva (code http://jsbin.com/eqiva/edit)
I don't know if this will fix your Outlook issue, but I think it sets
you off in a better direction.
Good luck,
-- Scott
[1] http://tinyurl.com/ydu7hsz
[jQuery] Re: more ckeditor
On Dec 17, 8:48 am, Mean Mike mcgra...@gmail.com wrote:
I haven't played with the samples . CKEDITOR API is well documented is
just the jquery implementation that I'm having trouble with
Yes, the documentation for the plug-in seems pretty vague. But I
couldn't really find the syntax above in the CKEditor documentation
either; I had to go to the downloaded examples. I knew that I could
call
something.on(eventName, func),
but I didn't know what I could call use for something or what values
were appropriate for eventName.
it seems that you would be right but I do I know when $
(#fck).ckeditor() returns ?
It looks to me to be synchronous. I haven't tested it, though.
the problem seems to me that CKedtior.js isn't loaded until $
(#fck).ckeditor() is called so if I call anyhting before that is
finished I get CKEDITOR is undefined.
Perhaps just this, then:
$(#fck).ckeditor()
CKEDITOR.on( 'instanceReady', function(event) {
// your code here
});
It's worth a try in any case.
-- Scott
[jQuery] Re: more ckeditor
On Dec 17, 1:02 pm, Mean Mike mcgra...@gmail.com wrote:
so I tried that and of course I get CKEDITOR not defined ...
Bummer!
so I figure ot I'll wait for I try it this way
$('#fck').ckeditor();
var wait = setTimeout(function() {
if( $.ckeditor.instance(fck)) {
var editor = $.ckeditor.instance(fck);
editor.document.on(keyup,function(e){
alert(keyup);
});
clearTimeout(wait);
}
}, 2000);
and this works because it waits for the editor to load but it seems to
me there should be a better way
There certainly should be. It makes me wonder if the plug-in really
has any value. If all it's doing is to use jQuery's selector engine
to identify the elements you want to use for CKEditor, it hardly seems
worth it, especially when you're likely to just be selecting by id.
One thing you could do is write a simple waitFor script that
continually polls and calls your function as soon as it's ready,
something you could use like this:
waitFor(
function() {return $.ckeditor.instance(fck);},
function() {
$.ckeditor.instance(fck).document.on(keyup,function(e)
{
alert(keyup);
});
},
1 // timeout in 10 seconds
}
A simple version of waitFor (that doesn't do any error checking) might
look like this:
function waitFor(testFn, mainFn, timeout) {
var start = new Date().getTime();
setTimeout(function again() {
if (testFn()) {
mainFn();
} else if (!timeout || new Date().getTime() start +
timeout) {
setTimeout(again, 10);
} else {
// wait timed out.
}
}, 10);
}
At least here, you don't have to wait an arbitrary two seconds, but
are ready to go almost as soon as your data is back.
Good luck,
-- Scott
[jQuery] Re: IE stops recurring ajax call
On Dec 16, 4:14 am, Henjo henjohoek...@gmail.com wrote:
here is what I changed in order to get it to work in IE.
Not working:
jQuery('#option1').hide('fast').next().show('fast').bind
('change',function(){ ... }
Working:
jQuery('#option1').hide('fast').next().show('fast');
jQuery('#productWizard #option2 select').bind('change',function()
{ ... }
My conclusion: IE is not capable of putting a chained ajax request
altogether nicely...
Since I've done plenty of chained requests like that, I'd be surprised
if that's the issue. I wonder if there are any differences in what
next() in that chain is giving you in IE versus FF. Not that at
matters for you since you've got a working solution, but it's
curious...
I'm glad you got it working.
Cheers,
-- Scott
[jQuery] Re: more ckeditor
On Dec 16, 2:10 pm, Mean Mike mcgra...@gmail.com wrote: I can't seem to get anything out of the new jquery ckeditor plugin I can have it load a an editor no problem but I need to do more than just that a good starting point would be for me to be able to something like var foo = $.ckeditor.instances['textarea:#fck'].getData(); I haven't used it before, but from the code, it looks as though you can do this: alert($.ckeditor.instance(textarea1).getData()); This code looks as though it will get you the underlying CKEditor object: $.ckeditor.instance(textarea1) Worth a try, any way. -- Scott
[jQuery] Re: more ckeditor
On Dec 16, 2:57 pm, Mean Mike mcgra...@gmail.com wrote:
maybe I have something setup wrong but every time I run that I get an
js error CKEDITOR is not defined on line 32 of jquery.CKEditor.js
Have you done this?:
$.ckeditor.config = {path: '/path/to/ckeditor/directory/', height:
300 };
It seems as though the jQ plug-in uses this to actually load the
CKEditor code rather than declaring it in the HTML markup. I don't
know why...
-- Scott
[jQuery] Re: more ckeditor
On Dec 16, 4:07 pm, Mean Mike mcgra...@gmail.com wrote:
now this works because by the time i press the button the ckeditor is
load so now I'm trying to figure out when it is load so I can apply
things to it once its loaded rather than have a user click a button.
Man, there is a lot of documentation for CKEditor, but it seems hard
to find one's way around. Have you played with the _samples folder in
the distribution? In _samples/api.html, I found this:
CKEDITOR.on( 'instanceReady', function(event) {
// your code here
});
My guess is that you can call this as soon as $(#fck).ckeditor()
returns, but I'm far from sure.
Good luck,
-- Scott
[jQuery] Re: jquery and shtml - 2 problems
On Dec 16, 2:28 pm, Allyson Woodrooffe allys...@interwood.com wrote: It appears that jquery might not like the shtml extension (which we currently use on our site to include headers, footers etc) That's not it. jQuery doesn't care about the page url at all. But you are serving up very different final content when you use the server-side includes, and I'm sure that accounts for the issues. You can demonstrate this for yourself by saving the output of the .shtml and serving it from the same folder as PowerDetail999.html. I don't have time to look more carefully at what's wrong, but a quick trip to the W3C validator shows many more errors in your full page than in your plain HTML one: http://tinyurl.com/ydvcqvw (plain HTML) http://tinyurl.com/y9pfxo8 (with SSI) One thing I did notice that is disconcerting is an additional BODY tag in the SSI version. Good luck, -- Scott
[jQuery] Re: IE stops recurring ajax call
On Dec 15, 8:37 am, Henjo henjohoek...@gmail.com wrote: I managed to put alerts in and find where it broke in IE. IE can't seem to handle a chained ajax request. I broke the chain in part and than it worked fine. Great! Could you post in a bit more detail what you had to change to get it to work in IE? Searching these forums is a great way for people to solve their own problems. I fiddled around with your code for a while but couldn't get that to work. It sure seems a better approach to the code, and I will rethink mine in order to make it more generic and maintainable. Yeah, I probably shouldn't have posted that much without posting something closer to a working example. Although I think the techniques are sound, there might well be issues I had not even considered. My biggest concern with your technique really is just the level of nesting. When you're already nested so deeply, it might get tricky to go further. I do have one UI suggestion for this control. There is no Undo mechanism. You can't say Wait, I meant De-misting! But you have the 1 -2 - 3 step images. If you turned those into links for previous state, it would be quite useful. I value your help and the time you took to post back on this. I take to heart what you wrote and it helped me getting a better understanding of how this works. Good. I spent much more time typing that up than I meant to. I thought I'd dash off a quick alternative for you. A long time later I was still trying to fill in the details. I should either have trimmed it down or followed it through all the way. I'm glad that it was at least food for thought. Good luck on your project. -- Scott
[jQuery] Re: JQuery - CSS - style unordered list
On Dec 15, 12:53 pm, huntspointer2009 huntspoin...@gmail.com wrote:
thanks Virgil,
Is there a way to create the same effect without specifying the ( eq:
(' ') exact location) or (the content that inside) the list item?
because I might be using up hundreds of ul/ul unordered lists,
each with a variable number of li/li tags?
In each case you've shown us eight items with the following pattern:
off, on, on, off, off, on on. off
What's the general pattern? Is it that all the on ones are in
positions matching 4n + 2 or 4n + 3 and all the off ones are 4n or
4n + 1?
If that's the case then this should do it:
$(ul ).each(function() {
$(this).find(li:nth-child(4n+2), li:nth-child(4n
+3)).addClass(color);
});
If not, can you describe the pattern better?
-- Scott
[jQuery] Re: JQuery - CSS - style unordered list
On Dec 15, 2:13 pm, huntspointer2009 huntspoin...@gmail.com wrote: I actually modified the code you provided for me a little to create the desired effect: Yeah, there was a small mistake in that. This would probably work: $(this).find(li:nth-child(4n+2), li:nth-child(4n+3)).addClass (color); The difference is that I incorrectly ended the quote and started a new one around the comma. They should all be together in a single selector. Thanks for the help Dude, I appreciate it You're welcome. -- Scott
[jQuery] Re: Passing parameters to a function with a click event
On Dec 15, 2:34 pm, kenyabob andy.skogr...@gmail.com wrote:
http://pastebin.com/m6cd05daa
I am trying to call a function and pass parameters regarding the
button that called the function. This doesn't seem to do it. What am I
missing?
First thing I see is that you're not passing a function into .click
(). You're passing the result of calling your function, and since
your function doesn't return anything, you're passing nothing at all.
Second, if you don't want the default behavior of the click
(presumably to submit a form), you need to cancel the event. You can
use event.preventDefault() or simply return false from your function.
So it would help to convert this:
$(input.Malcolm).click (
checkAnswer($(this).attr('class'), $(this).parent().parent
().attr('id'))
);
to this:
$(input.Malcolm).click (function(event) {
checkAnswer($(this).attr('class'), $(this).parent().parent
().attr('id'));
return false;
});
Cheers,
-- Scott
[jQuery] Re: IE stops recurring ajax call
On Dec 13, 1:52 pm, Henjo henjohoek...@gmail.com wrote: It works flawlessly in FF, Safari, Chrome... But IE is being nasty on me! Being nasty is probably quite accurate, but not specific enough for us to offer help! What's happening. Better yet, is there a way you can post a live URL? -- Scott
[jQuery] Re: IE stops recurring ajax call
On Dec 14, 4:33 pm, Henjo henjohoek...@gmail.com wrote:
Here's the link to the website, it is the product wizard
form:http://bit.ly/7v8pHu
Okay, if you haven't used Fiddler [1], it's pretty useful for testing
HTTP request on IE, something like LiveHTTPHeaders for Firefox, and
more general.
The first thing I found is that IE isn't even submitting the second
request. It's a little hard to try to build my own version of this to
determine why, but you might want to either use Firebug Lite [2] as
someone suggested in another thread or simply add some alerts to see
how far it gets. You should be able to quickly nail down whether it
gets to the jQuery ajax call at all. If it does, you probably can
supply more information for this list. If not, hopefully the line it
stops on can supply you with help.
But I'm going to suggest that you rethink the code design altogether.
Rather than returning the whole set of select elements as HTML, I
would suggest that you return some JSON, either the data for all three
select boxes or the data for each successive one.
Then I think you could write a function named, say, linkedDropdowns,
which you would use like this:
linkedDropdowns(option1, option2, function() {
return {option1: $(#option1 select).val()};
});
linkedDropdowns(option2, option3, function() {
return {option2: $(#option2 select).val()};
});
This function would bind the change event on the element named by the
first argument to a function that merged the results of calling the
third argument with your common data ({L: TYP03_LANG}) and then
perform an ajax call using that merged data. The success function of
that ajax call would update the element named by the second argument
using the JSON data supplied, and perform the scrolling or hiding
necessary for your UI. It would probably delegate the updating to
another function which you could also use to populate the initial
list.
This would make it easier to add additional steps as needed, or to
return something additional in the JSON that says there are no
additional steps. The deeply nested code you've got is likely to be
difficult to maintain.
I don't have time to try to code something like this myself now, but
the main code might look something like this:
var defaults = {L: TYP03_LANG};
function updateSelect(select, data) {
// loop through the results in data creating the inner HTML
for the select box
$(# + select).html(myHTML);
// hide all the select boxes (perhaps with visibility and size
rather than hide), then reset the current one to visible
}
function linkedDropdown(select1, select2, fn) {
$(# + select1).change(function() {
$.get(index.php?eID=tx_knowledgebase_pi1, $.extend
(defaults,fn()), function(data, textStatus) {
// if good text status
updateSelect(select2, data);
}, json)
});
}
$.get(index.php?eID=tx_knowledgebase_pi1, defaults, function
(data, textStatus) {
updateSelect(option1, data);
});
linkedDropdowns(option1, option2, function() {
return {option1: $(#option1 select).val()};
});
linkedDropdowns(option2, option3, function() {
return {option2: $(#option2 select).val()};
});
Of course this is probably full of typos, and maybe it wouldn't work
at all for your case, but I think it would be easier to write
something reusable like this and then use if a few times in your code
than to do this deeply nested, and very fragile-looking code.
Good luck,
-- Scott
[1] http://www.fiddler2.com/fiddler2/
[2] http://getfirebug.com/lite.html
[jQuery] Re: jQuery no conflict question
On Dec 11, 7:14 am, Henjo henjohoek...@gmail.com wrote:
I am wondering how to set my jQuery to be in 'noconflict' state.
[ ... ]
function questionList(){
...
}
I'm wondering if you are using the $ shortcut to jQuery inside such
functions. If you are, then those functions must be inside some scope
which redefines $, because in the global scope, $ is referring to
Prototype. You can fix this by using jQuery instead of $ in your
functions, or by wrapping them in a scope which defines $
temporarily to jQuery. You can do this by putting them inside your
document ready block the way you list above, supplying $ as the
parameter to your function, or by wrapping them in a scope like this:
// in the global scope here, $ refers to Prototype
(function($) {
// here $ refers to jQuery.
function questionList() {
// and you can use $ for jQuery inside this function.
}
})(jQuery);
// again here, $ refers to Prototype
If by some chance you have blocks of script that want to use both
Prototype and jQuery, you simply have to avoid using $ for jQuery,
although you can define your own shortcut like so:
var $jq = jQuery.noConflict();
Cheers,
-- Scott
[jQuery] Re: visible divs and selectors
Any chance you could post a small test case somewhere? I *think* I understand what's happening, but without seeing it, it's hard to diagnose. -- Scott
[jQuery] Re: visible divs and selectors
On second thought, I think I get it.
You're doing something screwy with this:
if ($(#regions div).is(:visible)) { /* ... */}
It's not clear to me without checking the docs even what it means to
call .is() on a group of items, but I don't think this is really what
you want.
Ideally, you would like to keep track of the opened item, and there is
a reasonably simple way to do that: throw it into a closure like this:
var chooseRegion = (function() {
var current = null;
return function(ej) {
var newElt = $(# + ej);
if (current) {
current.hide(100, function(){newElt.show(600);});
} else {
newElt.show(600);
}
current = newElt;
};
})();
If you're not used to closures, the syntax may seem screwy. This
shell:
(function() {
// ...
})();
creates and immediately executes an anonymous function. That
establishes a new scope in which you can store the variable current
and return the actual function you want assigned to chooseRegion.
That new function is straightforward, and at the end of it we set the
variable current to the newly-opened div.
I think that will do what you want without flicker and without having
to try to close all the elements.
Cheers,
-- Scott
[jQuery] Re: Selecting a value from a SELECT field?
And your other syntax should also work as well: http://jsbin.com/oredo (code http://jsbin.com/oredo/edit) Must be something else on the page... -- Scott
[jQuery] Re: Collapsing
On Dec 11, 11:09 am, Dobbler dobble...@gmail.com wrote: I have a menu set up with parent child links.. Best way to describe it is show an example: http://96.0.84.196/jtest/http://96.0.84.196/jtest/ You'll notice that you can have multiple parent's open but I would like all other parents to collapse when you click another parent. So only one parent is open at a time. I know it's possible but can't get it going.. You might look at the UI Accordion: http://docs.jquery.com/UI/Accordion I'd also suggest that you find a way to do this without all the inline Javascript. That is very rarely the best solution to anything. Good luck, -- Scott
[jQuery] Re: Current page
On Dec 11, 11:14 am, Atkinson, Sarah
sarah.atkin...@cookmedical.com wrote:
How do I mark the current page in a list of links?
$(#myList a).each(function() {
if (this.href == document.location.href) $(this).addClass
(currentPage);
});
-- Scott
[jQuery] Re: previous
On Dec 8, 4:17 am, lennon1980 ja...@publiczone.co.uk wrote: Cheers..thats pretty cool. One more thing actually..I need the element to be a div..how do I add this to the selector This might do it: var item = $(#feature).prevAll(div[class]:first); Cheers, -- Scott
[jQuery] Re: Unexpected append behavior
On Dec 10, 8:31 am, Charlie charlie...@gmail.com wrote:
no idea how I missed that, I certainly know better
One other thing that might make your life easier is the this context
of each. You can rewrite the body of your loop as a pretty clean
one-liner:
$(data.statelist).each( function() {
$(#job_state).append(option value=' + this.state + ' +
this.name + /option);
});
In other words, when the iterations of each are executed, this
points to the object in your list. Obviously if you're having
performance problems, you should probably save the selector result and
use array.push/array.join instead of appending each individually, but
I wouldn't bother unless there are problems. This code is quite
clean.
Good luck,
-- Scott
[jQuery] Re: huge drop down
You might look at a plug-in like: http://code.google.com/p/dropdown-check-list/ Good luck, -- Scott
[jQuery] Re: NEED HELP::siblings isssue in jquery
On Dec 10, 1:56 am, Bideshi itbide...@gmail.com wrote:
i've a little issue related to siblings in jquery,
i'm using sibling to deselect the previous selected link after
clicking on the new link, but it's now working,
please let me know where i'm missing.
[ ... ]
$(a).click(function(){
$(this).toggleClass(bg);
$(this).siblings(a).removeClass(bg);
});
[ ... ]
lia href=#Link 1/a/li
lia href=#Link 2/a/li
Your A tags aren't siblings; they're cousins.
Maybe something like this:
$(a).click(function(){
$(this).parents(ul).find(a).removeClass(bg);
$(this).addClass(bg);
});
Cheers,
-- Scott
[jQuery] Re: Traversing Help
On Dec 10, 12:36 pm, T.J. Simmons theimmortal...@gmail.com wrote:
Sorry, the right link ishttp://jsbin.com/ekuyo
It would probably be better to fix the other errors before posting an
example. But I was in a good mood. :-)
http://jsbin.com/ivoyi (code http://jsbin.com/ivoyi/edit)
The problem is that prev returns only the immediate previous sibling
of the selected element, and, if you supply a selector, won't return
even that element if it doesn't match the selector. If you want the
first prior sibling matching the selector, you can use prevAll
('selector:first').
Cheers,
-- Scott
[jQuery] Re: jquery conflict with prototype
On Dec 9, 8:33 pm, i...@atlantagraphicdesign.net
i...@atlantagraphicdesign.net wrote:
can someone help with the nocoflict function.
Did you read this document?:
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
I'd suggest that the simplest thing would be to put prototype first,
then jQuery, followed by a script that calls
jQuery.noConflict();
// now $ refers to the Prototype function.
and put any custom code that uses jQuery in either a block that looks
like this:
$(document).ready(function($) {
// here $ refers to jQuery
});
or in one like this:
(function($) {
// here $ refers to jQuery
})(jQuery);
But there are many other techniques listed in that document.
Cheers,
-- Scott
[jQuery] Re: how to use keypress click function together...
On Dec 6, 11:31 am, Erdem erde...@gmail.com wrote: i want ajax to make same when hit enter or click submit button $(#myForm).submit(/* your function here */); http://docs.jquery.com/Events/submit#fn Cheers, -- Scott
[jQuery] Re: [validate] - jquery plugin + recaptcha = anyone get this to work?
On Dec 7, 10:24 am, Carlos De Oliveira cdeolive...@grupozoom.com wrote: This is a JQuery Forum. And the question is about Jörn Zaefferer's Validation plug-in, certainly on-topic here. Unfortunately, I haven't used either of the CAPTCHA's under question, nor had much experience with the validation plug-in, so I have nothing to add. -- Scott
[jQuery] Re: When plugin ajaxform meets FCKeditor.
Testing
[jQuery] Re: When plugin ajaxform meets FCKeditor.
I haven't used ajaxform, but I think this means that you can do
something like this:
$(#myForm).bind(form-pre-serialize, function() {
// put the data from the editor back into the form.
});
How to actually get the necessary data from CK you'll have to look at
the CK editor's documentation. There should be a simple function to
synchronize back with your textarea, but if not, there should still be
a call to get the rich data as a string which you could then manually
insert into your text area.
Alternately, there are some jQuery wrapper plug-ins for the rich
editors. I've never used them, but they may be easier to use than
your manual integration:
http://www.google.com/search?q=jquery+ckeditor+plugin
Good luck,
-- Scott
P.S. Unbelieveable! Google was rejecting my post from it online
interface when I used the name of the editor. What I'm calling
CKEditor here had in the post an initial F as well.
[jQuery] Re: Beginner's Question: How write text output that stays
On Dec 7, 8:34 am, Beginner pixel.b...@gmail.com wrote:
$(document).ready(function(){
$(#XXX).click(function(event){
document.write(TESTOUTPUT);
}});
Unfortunately the text testoutput will immediately disappear after
the click event passed. Is there a remedy for that? I need it to
appear after a click.
The problem is that you can't really use document.write once the
document is closed. Many people discourage its use entirely.
If you have a certain place you want the output to appear, perhaps in
this tag:
p id=outputArea/p
Then you can do this:
$(document).ready(function() {
$(#XXX).click(function(event) {
$(#outputArea).text(TESTOUTPUT);
});
});
If you don't already have a place in mind, and you just want to append
it to the body, you can do this instead:
$(pTESTOUTPUT/p).appendTo(body);
Cheers,
-- Scott
[jQuery] Re: Document undefined error
On Dec 7, 11:49 am, Firefox barrie.wh...@gmail.com wrote: I have recently been tasked with making sure the following script works with our environment. http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js [ ... ] That script is the latest release of the jQuery library. It doesn't do any work you care about by itself. It needs to be included in a web page to do anything useful. [1] However when running under IE (any version) I first get asked if I want to open/save/cancel the file, when choosing open I get the following error [ ... ] Error: 'document' is undefined This is not a script that can simply run from the command line. Windows will by default try to open this up as an executable script, but will not supply a browser environment that includes the global variable document, hence the error. You need to look at some introductory documentation to see what jQuery is for and how to use it. I would suggest starting with this: http://docs.jquery.com/How_jQuery_Works Any place in that tutorial that has a script tag with this: src=jquery.js you can substitute: src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js That should get you going. But the notion of testing whether it will work in your environment is pretty fuzzy. jQuery is well established and works for many people working in the vast majority of commonly-seen browsers over a great many tasks, but without additional code to actually do something with it, it's not clear what it would meant that it works. Good luck, -- Scott [1] This is an oversimplification, but is enough for this discussion.
[jQuery] Re: previous
On Dec 7, 10:23 am, lennon1980 ja...@publiczone.co.uk wrote:
I want to find all previous elements in the DOM (not parent elements) of
element called 'feature' [ ... ]
But I want to find all previous divs that have a css class assinged to them.
the first previous div it finds I want to be able to retrieve the class name
of that dic in a string.
Will this do what you want?:
var item = $(#feature).prevAll([class]:first);
if (item) alert(item.attr(class));
You can pass a selector into prevAll. Here we select only those
elements that contain an attribute named class and then choose just
the first one of these. ('First' here does not mean document order
but something more like 'closest'.)
Cheers,
-- Scott
[jQuery] Re: jScrollPane - help is needed
On Dec 4, 10:07 am, xirurg vshala...@hotmail.com wrote:
I'm having a problem with jScrollPane. Take a look
onhttp://www.cmt.ca/unstable/- photo gallery on the right.
It loads the whole list first and then limits it to certain width. So my
question is - is is possible to eliminate that effect when user sees whole
list for a while.
Well, since this section doesn't work well without Javascript, you
could limit the size in CSS, then override that with JS. Perhaps:
ul.unstable_photoWidth {
width: 335px;
height: 65px;
overflow: hidden;
}
then somewhere after load but before your scroll pane code, add
$(ul.unstable_photoWidth).css({width: 85 * $(li, this).size(),
overflow: auto});
That might do it...
Good luck,
-- Scott
[jQuery] Re: Why mootools animations is more smooth than jquery?
On Dec 3, 11:02 am, Rey Bango r...@reybango.com wrote: I think you should consider looking into this yourself. The animations provided by jQuery, while basic, are quite smooth and perform well. If you feel that the ones provided by MooTools perform better, then I would urge you to take the time to investigate it and consider offering patches should you find a good solution. How does Rey do that? Twice I stopped my fingers over the send key on a troll message. I decided that ignoring it was my best bet. I never even considered trying to turn it into a positive suggestion. Sure, Rey, show us all up by being nicer! :-) -- Scott
[jQuery] Re: jQuery gives error on page in IE after hover.
On Dec 3, 12:43 pm, Michael Geary m...@mg.to wrote: You're trying to use negative padding, but there is no such thing in CSS: But why does the padding go negative in IE? It doesn't seem to happen in FF or Chrome. The -10px is on mouseleave, where mouseenter set it to 10px. -- Scott
[jQuery] Re: jQuery Accordion problem - Links not working
On Dec 2, 12:05 pm, hannahmac hannahmago...@gmail.com wrote: I am using a Jquery accordion menu on a website I'm working on - and being a novice I've discovered that none of the links are not working. The movement of the menu seems fine, but every link on this left hand menu is going nowhere. See if this fixes it: http://tinyurl.com/ykhco3f. -- Scott
[jQuery] Re: Ignoring click events in cells
On Dec 2, 3:44 pm, Andyk andym.kni...@googlemail.com wrote:
However, checking/unchecking the checkbox in each row also triggers
the event. Is there anyway of preventing this?
$(tr).click(function(event) {
if ($(event.target).is(:checkbox)) return;
alert($(this).attr(id));
});
[jQuery] Re: Ignoring click events in cells
On Dec 2, 5:20 pm, Mauricio \(Maujor\) Samy Silva css.mau...@gmail.com wrote: // normalize e.target if (!e) var e = window.event; var tg = (window.event) ? e.srcElement : e.target; jQuery does this normalization for you. You can just use e.target (More info at http://docs.jquery.com/Events/jQuery.Event) -- Scott
[jQuery] Re: Using jQuery to total multiple sets of textboxes?
On Nov 30, 4:34 pm, Equalizer700 equalizer...@yahoo.com wrote:
How could this be modified to allow summing multiple sets of textboxes
(using each set using a different class name) into multiple total
textboxes (again using different class names)? Can this somehow be
converted to a function, or can the selectors be dynamically modified
some way?
This is untested, but something like this should do it:
(function($){
$.fn.total = $.extend(function(selector) {
var total = 0, initialText, totalBox = $(selector);
this.each(function() {
var additional =
total += $.fn.total.orZero(parseInt(this.value));
$(this).focus(function() {
initialText = $.fn.total.orZero(this.value);
}).blur(function() {
if (this.value != initialText) {
total = $.fn.total.orZero(parseInt(totalBox.html
()));
total -= initialText;
total += $.fn.total.orZero(parseInt(this.value));
totalBox.html(total);
}
});
});
totalBox.html(total);
return this;
}, {orZero: function(value) {return isNaN(value) ? 0 : value;}});
})(jQuery);
You would use it like this:
$(document).ready(function() {
$(input).total(#grand-total);
});
or
$(document).ready(function() {
$(.additem).total(.totalitem);
});
or
$(document).ready(function() {
for (var i = 1; i 5; i++) {
$(.row + i).total(#row + i + -total);
}
for (var i = 1; i 4; i++) {
$(.column + i).total(#column + i + -total);
}
});
This does check for non-numerics, which the original didn't (the orZero
() function.) Otherwise, it's closely modeled on the code you
supplied.
[jQuery] Re: Using jQuery to total multiple sets of textboxes?
On Dec 1, 1:03 pm, Scott Sauyet scott.sau...@gmail.com wrote: [ ... ] var additional = [ ... ] Hey, where'd that come from? Obviously this is unnecessary...
[jQuery] Re: Problem with plugins
On Dec 1, 6:30 am, Paulodemoc paulode...@gmail.com wrote: [ ... ] I have a test page here:http://jquery.creandi.eu [ ... ] I've spent a fair bit of time looking at this with no luck. I think the thing to do is to make some test pages from this, progressively stripping out parts until you find the error goes away. There's too much going on, including lots of validation errors, unclosed elements, and other issues for this to serve as a useful test case. Alternately, you can start really small, and try to build this page back up until everything is working. In either case, you should either find the error yourself, or be able to point the group to a small enough test case that we can more easily work on the problem. Good luck, -- Scott
[jQuery] Re: get random record?
On Dec 1, 4:27 pm, Michel Belleville michel.bellevi...@gmail.com
wrote:
setTimeout(), which is a plain JavaScript function, should be perfect for
the job then.
... although managing the timeout alongside the next button might get
a little trickier. You might want to introduce a function which
manages the timeout, especially if there might be more than one of
these on the page. Something like this, perhaps:
function createTimer(fn, seconds) {
var timeout;
var func = function() {
clearTimeout(timeout);
fn();
timeout = setTimeout(func, (seconds || 60) * 1000);
return false;
}
func();
return func;
}
which you might use like this:
var timer = createTimer(function() {$(#myDiv).load
(random.php);}, 60);
$(#next).click(timer);
This will handle running every n seconds, restarting the count when
the user chooses next.
If you need more complex behavior, like a prev link or a stop it
would have to be somewhat more complicated.
This is plain JavaScript, so we now return you to your regularly
scheduled jQuery discussion.
Cheers,
-- Scott
[jQuery] Re: Problem with plugins
On Dec 1, 5:31 pm, Michael Geary m...@mg.to wrote: Paulo, you're loading jQuery twice. First you load jQuery, then you load your plugins, then you load jQuery again. That second load of jQuery wipes out the original jQuery and all its plugins. Do a View Source on your page with the sort photos link, and search for: And I missed that? D'Oh! :-) -- Scott
[jQuery] Re: Best Practices or unobtrusive Javascript
On Nov 30, 6:39 pm, RobG rg...@iinet.net.au wrote: On Dec 1, 12:41 am, ScottSauyetscott.sau...@gmail.com wrote: If JavaScript is used unobtrusively, then JS is never plain data, but always metadata. And the head is the place for metadata. Javascript is not metadata, it is program code: Yes, but in the sense that the HTML is the data, the CSS and JS, when used appropriately, are metadata. Of course, HTML isn't precisely data; it comprises a marked-up document. But thinking about it as data is a useful point of view. -- Scott
[jQuery] Re: Hide chat content
On Nov 29, 3:26 pm, Jerry Johnson jerryhost@gmail.com wrote: ok, that worked, but now I need to make an ajax call... So go ahead and make one. :-) Or were you looking for more specific help? -- Scott
[jQuery] Re: Best Practices or unobtrusive Javascript
On Nov 29, 8:21 pm, breadwild breadw...@gmail.com wrote: I have seen several examples on jQuery plugin sites that have the script tag and Javascript within the body and not the head where I thought it was supposed to go. Supposed to go is a subjective consideration. The rationale for putting it at the bottom of the body is a fairly simple, and fairly persuasive, argument about performance. A nice short version of that is here: http://developer.yahoo.com/performance/rules.html#js_bottom The rationale for putting it in the head is really one about being unobtrusive. If JavaScript is used unobtrusively, then JS is never plain data, but always metadata. And the head is the place for metadata. I almost always choose the latter, because it simply feels cleaner to me. But I'm not dogmatic and if your CMS makes it more practical to put in the body, then go with that. There is one real advantage in jQuery to using the bottom of the body. At that point, the DOM is already loaded, and you can run without putting everything inside a $ (document).ready() function. -- Scott
[jQuery] Re: How to text inside caption Tag of a Table?
On Nov 30, 6:43 am, SharepointMag [yb]
sharepoint...@googlemail.com wrote:
var $elements = $('table');
$elements.each(function(){
// here i want to get the text inside the caption tag inside THIS element ...
}
var captionText = $(caption, this).text();
The second parameter to the $ function is a context to search in.
In this case, this is the current table element, exactly what you
want for a context. The following would also work, and I don't know
if there is any real internal difference between them:
var captionText = $(this).find(caption).text()
Cheers,
-- Scott
[jQuery] Re: jquery problems - please help - not a CODER - just an USER
On Nov 30, 6:48 am, Escu dl.e...@gmail.com wrote: i got an wordpress theme (paid one) and it uses jquery. I got a plugin (WP Ajax Edit Comments 3.1) that uses jquery too. The problem is that both jquerys doesn't work together. When i disable one, the other one is working. Any ideeas? Although it's possible that someone in this forum could help you, I'd suggest that the one with the most knowledge here are the ones who built the theme or the plug-in. Is there any support with the paid theme? Perhaps there's an upgrade to a later version of jQuery available for the theme or the plug-in. jQuery has not remained entirely backwards-compatible as it has developed, and there's a reasonable chance that the theme used features of jQuery that have changed with the newer release of jQuery used by the plug-in, or vice versa. jQuery has techniques that allow you to use multiple versions on one page, but if you are not a coder, then someone who knows the plug-in or the theme would probably have to help you incorporate these techniques. Good luck, -- Scott
[jQuery] Re: Problem with plugins
On Nov 30, 10:48 am, Paulodemoc paulode...@gmail.com wrote:
The plugins are being loaded. When I open the source code and click on
the js url, it opens alright
But when I call the command:
$(selector).pluginFunction({options});
An error message appears saying that pluginFunction is not a
function... on ALL plugins...
As others have said, this seems to mean that the plug-in scripts are
not referenced properly. Is there a way you can strip down your
output and post it, perhaps on JSBin?
-- Scott
[jQuery] Re: Best Practices or unobtrusive Javascript
On Nov 30, 10:32 am, Andre Polykanine an...@arthaelon.net wrote: I prefer to put JS in header, also. But I read somewhere that there is a bug dealing with an interference of PHP's $variables and jQuery $-notation, so it's suggested to put the jQuery functions into the body and not into the head section. Is it true? I don't do much PHP these days, but when I do, I've never run across such a bug. I suppose that if you use double-quoted strings in PHP to generate JavaScript output, then you would need to escape the $, but I don't do that anyway. -- Scott
[jQuery] Re: Hide chat content
On Nov 30, 11:00 am, Jerry Johnson jerryhost@gmail.com wrote:
Ya, here is my problem. I know how to make the ajax call, and it all works,
but, I need to somehow connect the msg id from the mysql database to the
ajax call, so I need another div, that has the id.
There are many ways to do this. One simple one is to use an id, or
part of one, now that you know not to repeat the ids or use completely
numeric ones. Something like this:
div class=message id=msg-1Message 1 here. (a href=deleteMsg/
1delete/a)/div
div class=message id=msg-2Message 2 here. (a href=deleteMsg/
2delete/a)/div
div class=message id=msg-3Message 3 here. (a href=deleteMsg/
3delete/a)/div
$(div.message a).click(function() {
var $msgDiv = $(this).parents(div:first);
var id = $msgDiv[0].id.substring(4);
alert(Pretending to do ajax call involving message + id);
$msgDiv.fadeOut();
return false;
});
See http://jsbin.com/ebapo (code http://jsbin.com/ebapo/edit)
Good luck,
-- Scott
