[jQuery] Using jQuery to completely separate HTML from Javascript
Hi,
I am trying to remove every Javascript reference from my HTML data
(except the inclusion headers of course).
I would like some advice regarding event listeners when parameters
come into play.
Here is the typical example:
For event handlers in HTML like:
a href=# onclick=foo();/a
I would have no problem replacing with the following HTML:
a href=# class=foo/a
and Javascript code in separate file:
$(document).ready(
function() {
$(a.foo).click(foo());
}
)
However, how would you proceed when parameters are to be passed to foo
()? E.g:
a href=# onclick=foo(1);/a
a href=# onclick=foo(2);/a
a href=# onclick=foo(3);/a
I was thinking of something like:
a href=# class=foo-1/a
a href=# class=foo-2/a
a href=# class=foo-3/a
But how to bind the foo() function (with proper parameter) using
jQuery?
Thanks for any recommendation/comment.
Thierry
[jQuery] Re: Handling key event in Chrome or Safari during a popup
Apparently it's the keypress event which is not registered through
Firefox, using keyup works well across all browsers, thanks for the
sample code. The fixed version is:
$(document).keyup(function(e) {
if (e.keyCode == 27 popupStatus == 1) {
disablePopup();
}
});
On Jun 9, 5:10 pm, waseem sabjee waseemsab...@gmail.com wrote:
check this link
$(#mytextbox).keyup(function(event){
if (event.keyCode == 27) {
$(this).attr({ value:Escape });
}
});
On Tue, Jun 9, 2009 at 8:59 PM, Thierry lamthie...@gmail.com wrote:
I am currently following the image popup example from:
http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-pop...
The demo is at:
http://yensdesign.com/tutorials/popupjquery/
If I run the demo on Windows XP on Chrome or Safari, the escape key
doesn't close the popup window. How do I handle this in jQuery for
those two browsers?
[jQuery] Handling key event in Chrome or Safari during a popup
I am currently following the image popup example from: http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/ The demo is at: http://yensdesign.com/tutorials/popupjquery/ If I run the demo on Windows XP on Chrome or Safari, the escape key doesn't close the popup window. How do I handle this in jQuery for those two browsers?
[jQuery] What's the best way to pass parameters through jQuery's ajax?
Right now, I'm using jQuery's ajax like the following:
function hello_world(param1, param2, param3, param4)
{
$.ajax(
{
type: 'POST',
url: 'foo.php',
dataType: 'html',
data: 'param1=' + param1 + 'param2=' + param2 + 'param3=' +
param3 + 'param4=' + param4,
success: function(data)
{
}
});
}
In foo.php, I retrieve the parameters like:
$_POST['param1], ...
Is there a more elegant way to pass the parameters on the javascript
side?
[jQuery] form.action equivalent in jQuery
I currently have the following legacy piece of html: form action= method=get name=clientListForm id=clientListForm input type=submit name=submit_hello id=submit_hello value=Say Hello onclick=this.form.action = 'hello.php'; input type=submit name=submit_hi id=submit_hi value=Say Hi onclick=this.form.action = 'hi.php'; /form The above probably doesn't look too elegant but can someone suggest to me the best way to initialize this.form.action in jQuery?
[jQuery] Re: Excluding some children in a selector
I rushed a bit in writing the html, the id should correspond to the
table and not the tr. The is(button) didn't work but is(input) is
getting what I wanted, thanks for the help.
On Apr 2, 5:55 pm, Richard D. Worth rdwo...@gmail.com wrote:
On Thu, Apr 2, 2009 at 4:14 PM, Thierry lamthie...@gmail.com wrote:
I have the following structure for tr:
tr id=world
td/td
td/td
td
input type=button name=hello value=hello /
/td
/tr
I also have the following javascript:
$(#world tr).click(function() {
// do stuffs
});
this selector doesn't seem to match your html, as it reads all TRs within
the item with an id of world but the item with an id of world is a TR, and
wouldn't contain any unless you've got nested tables. Perhaps you meant #
world.tr or table id=worldtr?
Is there a way to prevent the above event from triggering when the
hello button is clicked?
check event.target inside the click callback
$(#world).click(function(event) {
if (!$(event.target).is(button)) {
//do stuff
}
});
- Richard
[jQuery] Excluding some children in a selector
I have the following structure for tr:
tr id=world
td/td
td/td
td
input type=button name=hello value=hello /
/td
/tr
I also have the following javascript:
$(#world tr).click(function() {
// do stuffs
});
Is there a way to prevent the above event from triggering when the
hello button is clicked?
[jQuery] Re: Excluding some children in a selector
The behaviour is the same as before, are there any other suggestions?
I have a partial solution where I add a class to each of the td except
for the one containing the input and run the selector on that class.
It runs as expected but nothing happens when just the table cell is
pressed around the input button.
On Apr 2, 4:41 pm, Eric Garside gars...@gmail.com wrote:
$('button', $('#world tr').click(function(){
// Do stuff for #world tr onclick
})).click(function(e){
e.stopImmediatePropagation();
return true;
});
On Apr 2, 4:14 pm, Thierry lamthie...@gmail.com wrote:
I have the following structure for tr:
tr id=world
td/td
td/td
td
input type=button name=hello value=hello /
/td
/tr
I also have the following javascript:
$(#world tr).click(function() {
// do stuffs
});
Is there a way to prevent the above event from triggering when the
hello button is clicked?
[jQuery] Enable a disabled button by id
I can disable button with specific id with the following code: jQuery(#click_me:button).attr(disabled, true); If I want to re-enable the button, the following doesn't work: jQuery(#click_me:button).attr(disabled, false); Does anyone know what I'm missing?
[jQuery] Retrieving values from elements of the same class
For the following code:
script src=jquery-1.3.2.js type=text/javascript/script
script typetext/javascript
$(document).ready(function()
{
$('.approve').click(function() {
alert($('.approve').prev().val());
});
});
/script
div
input type=hidden value=1 /
input type=button class=approve value=Approve /
/div
div
input type=hidden value=2 /
input type=button class=approve value=Approve /
/div
div
input type=hidden value=3 /
input type=button class=approve value=Approve /
/div
Each time I click on any of the button, it's returning me 1. What
should I change in my javascript code to get the proper values 1, 2 or
3?
[jQuery] Array of all checked checkboxes
I have a series of checkboxes with class=the_checkbox. I can get all checkboxes by classname and manually loop through each to find out the checked ones. I'm wondering if I can get an array of checkboxes that have been checked with one line of jQuery?
[jQuery] How do you iterate across elements with the same class name?
I have a bunch of hyperlinks with class 'hello_world'. I want to assign each one of them a random colour. I can set the colour for all of them with the following: $(a[class=hello_world]).css(color, red); How can I iterate over every element with class name 'hello_world'?
[jQuery] Re: How do you iterate across elements with the same class name?
Great, that helps but I think I'll do it from the server side code,
the web page loads much faster when the operation is done on the
server side.
On Mar 20, 12:58 pm, Charlie Griefer charlie.grie...@gmail.com
wrote:
On Fri, Mar 20, 2009 at 9:48 AM, Thierry lamthie...@gmail.com wrote:
I have a bunch of hyperlinks with class 'hello_world'. I want to
assign each one of them a random colour. I can set the colour for all
of them with the following:
$(a[class=hello_world]).css(color, red);
How can I iterate over every element with class name 'hello_world'?
$(function() {
$('a[class=hello_world]').each(function() {
randomColor = (some code here to create a random color);
$(this).css('color', randomColor);
});
});
--
I have failed as much as I have succeeded. But I love my life. I love my
wife. And I wish you my kind of success.
[jQuery] How do you handle 2 differents and 1 action?
I have the following piece of code which checks if a user has pressed
the Enter key in a text input with id=text_input and then performs
some action:
$(document).ready(function()
{
$(#text_input).keyup(function(e)
{
// Checks if the Enter key was entered
if(e.keyCode == 13)
{
// perform the action
}
});
});
I also have a button with id=push_button that I wish will perform
the same action as above when clicked. How can I rewrite the above so
that I check for either of those two events and perform that one
action without code duplication?
[jQuery] How do you handle 2 differents and 1 action?
I have the following piece of code which checks if a user has pressed
the Enter key in a text input with id=text_input and then performs
some action:
$(document).ready(function()
{
$(#text_input).keyup(function(e)
{
// Checks if the Enter key was entered
if(e.keyCode == 13)
{
// perform the action
}
});
});
I also have a button with id=push_button that I wish will perform
the same action as above when clicked. How can I rewrite the above so
that I check for either of those two events and perform that one
action without code duplication?
[jQuery] Re: Display GIF animation during jQuery loop
2009/1/22 Ricardo Tomasi ricardob...@gmail.com Creative interpretation of try/catch/finally! That's a construct meant to catch errors, all it does in your code is catching any errors thrown by each() and then running the finally block. I guess your function in each() involves animations, right? Without seeing the rest of the code it's hard to devise a solution. The function called for each() doesn't make animations ; it's looking for cells in a big table and, according to a few conditions, is changing their classes ; the whole operation takes from 10 to 20 seconds. What I just want is to display a small GIF animated image while my javascript loop is executing. It works fine when doing an asynchronous Ajax call, but here the loop is only working with the local HTML page. Image display is nearly OK but as soon as the loop is beginning, the GIF image is frozen :-( Thanks for any idea, Thierry
[jQuery] [autocomplete] Submit text entered as-is, without replacing value with autocomplete
Hi guys, I have a search input with an autocomplete to help find items, but this search can also search partial words. Example: User input 'cal', autocomplete provides calendar and calamari. Then user hits enter, I want to submit only 'cal'. Right now autocomplete fills in the value with the first found term. Is that possible? Thank you, Thierry
[jQuery] Re: Submit text entered as-is, without replacing value with autocomplete
My bad. I found it. For anyone having the same issue, selectFirst (false) option is the one to use. On Nov 19, 4:42 pm, thierry [EMAIL PROTECTED] wrote: Hi guys, I have a search input with an autocomplete to help find items, but this search can also search partial words. Example: User input 'cal', autocomplete provides calendar and calamari. Then user hits enter, I want to submit only 'cal'. Right now autocomplete fills in the value with the first found term. Is that possible? Thank you, Thierry
[jQuery] Re: [autocomplete] where did the doc go?
Yes exactly... can't believe I didn't see it. Thank you Jorn. On Nov 15, 5:37 am, Jörn Zaefferer [EMAIL PROTECTED] wrote: You're looking for this, right?http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_datao... Jörn On Sat, Nov 15, 2008 at 3:49 AM, thierry [EMAIL PROTECTED] wrote: Hey guys, I hope it's just I can't find it anymore, but where's the (complete) docon autocomplete? The plugin page on jQuery seems pretty light (http://docs.jquery.com/Plugins/Autocomplete), and the official page redirects to this new jQuery page. If I remember correctly, there was a list of all options available in autocomplete(url, [options])... Mostly, I was looking for an option so when the user hits 'enter', autocomplete plugin would not automatically selects by default a suggestion, but would submit exactly what was entered. Any idea on how to do this? Thanks for your help!
[jQuery] [autocomplete] where did the doc go?
Hey guys, I hope it's just I can't find it anymore, but where's the (complete) doc on autocomplete? The plugin page on jQuery seems pretty light (http://docs.jquery.com/Plugins/Autocomplete), and the official page redirects to this new jQuery page. If I remember correctly, there was a list of all options available in autocomplete(url, [options])... Mostly, I was looking for an option so when the user hits 'enter', autocomplete plugin would not automatically selects by default a suggestion, but would submit exactly what was entered. Any idea on how to do this? Thanks for your help!
[jQuery] Re: jQuery+Cycle : slideshow with progressive image loading
Hi Mike,
Thanks a lot for your help (and your great plugin, needless to say !)
Meanwhile I've also tried my hand at some code and come to what seems
to be a valid solution. It relies on image preload - slides are added
to the Cycle randomly depending on the order in which they are
pulled from the server, which is a way to have the slideshow run as
soon as possible.
Cheers,
Nicolas
$(document).ready(function(){
var image = []; // Array for slide preload
var stack = []; // Once loaded, each slide is pushed into the stack
var totalSlides = 15;
// Preloads the slides and adds them to the stack (except first 2
slides)
for (var i = 1; i (totalSlides + 1); i++){
image[i] = new Image(715,260);
image[i].src = images/1- + i + .jpg;
if (i 2) $(image[i]).bind(load,i,function(e)
{stack.push(image[e.data]);});
}
$(#slideshow).cycle({
fx:fade,
timeout:2000,
speed:2000,
cssBefore:{opacity:0}, // Important
before:onBefore
});
// Flushes the stack into the Cycle queue
function onBefore(curr,next,opts){
while (stack.length 0){
if (opts.addSlide) opts.addSlide(stack.pop());
};
};
});
[jQuery] Re: jQuery+Cycle : slideshow with progressive image loading
I'm honored, Mike! Thanks also for the minor but well-needed
improvements to the code.
Now here's another, probably more useful, version:
- the slide URLs are registered directly from the DOM
- the img nodes are removed from the DOM (except for the first 2)
- the slideshow is launched with 2 slides, further slides are added as
soon as they're loaded.
I think that adding this kind of asynchronous loading capability
directly in the Cycle plugin (through an optional parameter) would
definitely be great!
But maybe it's not so simple because it should be able to deal with
mixed content (IMGs mixed with DIVs that don't require preload),
images wrapped in A elements, etc., the slide order should be
preserved...
Well, I'm curious to hear what you think about the idea.
Cheers,
Nicolas
$(document).ready(function(){
var stack = [];
var elements = $(#slideshow img);
for (var i = 0; i elements.length; i++){
var img = new Image(715,260);
img.src = elements.eq(i).attr(src)
// all img nodes (after the second) are removed from the DOM
// once the corresponding image is loaded, it is pushed into the
stack
if (i 1) {
elements.eq(i).remove();
$(img).bind(load,function(){
stack.push(this);}
);
}
}
$(#slideshow).cycle({
fx:fade,
timeout:2000,
before:onBefore
});
// add images to slideshow
function onBefore(curr,next,opts){
while (stack.length 0){
if (opts.addSlide) opts.addSlide(stack.pop());
};
};
});
[jQuery] jQuery+Cycle : slideshow with progressive image loading
Hello, A previous discussion here (http://groups.google.fr/group/jquery-en/ browse_thread/thread/319177a5a9bb22a9/01b7544ac7203748) and a recent addition the to the Cycle plugin (see http://www.malsup.com/jquery/cycle/add.html) makes me think that creating JQuery+Cycle slideshows with progressive image loading à la Flash is within reach. In this perspective, the exemple given at http://www.malsup.com/jquery/cycle/add.html isn't satisfactory because the slideshow stops until all extra images are loaded. Unfortunately I didn't find sufficient Cycle documentation to write a script that would simply: - start a slideshow with 2 images (1 isn't possible) - load the 3rd image while it displays the 2nd, an so on for the entire set - once all images are loaded, repeat the slideshow (without attempting to load the images again). Any help would be greatly appreciated. Nicolas
[jQuery] Re: Accessing elements from another frame
Nobody have a suggestion for this??
On Feb 19, 10:52 am, Thierry [EMAIL PROTECTED] wrote:
I,
Is there an easy way to reproduce the following using only jquery?
I am trying to hide and show an element in a specificframefrom
anotherframe.
This code is actually working but I would prefer using jquery to do
it.
...
var lLoadingDiv =
top.content.document.getElementById('loading_div');
lLoadingDiv.style.display='inline';
...
Where content is the name of my targetframe.
I want to use the show() and hide() jquery function instead.
Thanks,
Thierry
[jQuery] Re: Accessing elements from another frame
Thanks for the answer, but this does not work.
And there is no error generated (in the error console).
I am using jquery 1.2.2
Any idea?
On Feb 21, 12:57 pm, Richard D. Worth [EMAIL PROTECTED] wrote:
This should do it
$(#loading_div, top.content.document).show();
$(#loading_div, top.content.document).hide();
See
http://docs.jquery.com/Core/jQuery#expressioncontext
for more info.
- Richard
On Thu, Feb 21, 2008 at 11:03 AM, Thierry [EMAIL PROTECTED] wrote:
Nobody have a suggestion for this??
On Feb 19, 10:52 am, Thierry [EMAIL PROTECTED] wrote:
I,
Is there an easy way to reproduce the following using only jquery?
I am trying to hide and show an element in a specificframefrom
anotherframe.
This code is actually working but I would prefer using jquery to do
it.
...
var lLoadingDiv =
top.content.document.getElementById('loading_div');
lLoadingDiv.style.display='inline';
...
Where content is the name of my targetframe.
I want to use the show() and hide() jquery function instead.
Thanks,
Thierry
[jQuery] Resizable only to specified width
Hello, I would like to create a weekly calendar where people can select one day, or more. I would like it to work a bit like outlook. So when someone selects a day, it should be possible to resize the selection to include more days. Problem is that the resize should snap to a day, so that it is not possible that someone resizes to the middle of a day. When I look at the draggable feature, it is possible to add a grid option, but I didn't see it for resizables. Is this possible with the jquery ui plugin or perhaps with another plugin? Thank you.
[jQuery] Attribute selector (^=) problem with multiple values
Hi jQuery group,
The simple piece of code below is designed to highlight table cells
whose class name is that of the currently hovered one (to visually
group them). In my example the class name itself is film + id (film1,
film2, etc) so I use the [attribute^=value] selector. OK to that
point, but if the class attribute happens to have whitespace-separated
extra content for css purposes (eg class=film1 small ), the
selector doesn't capture the element. More generally it seems to dodge
any attribute value ending with a white-space + another char. Any idea
why?
code
$(document).ready(function() {
$([class^='film']).bind(mouseover,function() {
$
(.+this.attributes['class'].value).css({cursor:pointer,background-
color:#FFCC99});
});
$([class^='film']).bind(mouseout,function() {
$
(.+this.attributes['class'].value).css({cursor:pointer,background-
color:transparent});
});
/code
Thanks.
[jQuery] get(0)
I'm new to jQuery and i cant figure out what this does:
node.get(0).onreadystatechange = function () {
[jQuery] get(0)
hey, im new to jquery, and im wondering what this does: this.node.get(this[0]).onreadystatechange = function () somehow, google groups missed my first post on this
