[jQuery] Validate Plugin - On Error?
I need to perform a custom action when it turns invalid.
Currently, I have this:
success: function(label) {
label.html(good).parent('div').removeClass('bad').addClass('good');
},
Ideally, I would just do:
failure: function(label) {
// set nbsp; as text for IE
label.html(bad).parent('div').removeClass('good').addClass('bad');
}
But that doesn't work.
How can I perform this action when the script detects that something
is amiss?
[jQuery] Help in Autocomplete
I am using firebug to debug my js and i am getting the following error. value.replace is not a function http://localhost/rentalphase2/jquery.autocomplete.js Line 409 Firebug is showing my return from the script as letssene letssen letssenee letsseneee letssen Adding New Customers which implies a \n between the two. So can you tell me what i am doing wrong Waiting in anitcipation, Thanx Aditya.
[jQuery] Re: Hover not work properly when moving mouse fast...
Anybody have any other suggestions what i could try ? :(
On Oct 22, 3:00 pm, Mech7 [EMAIL PROTECTED] wrote:
Thanks I have tried mouseenter and leave but it has the same problem :
(
On Oct 21, 7:24 am, MorningZ [EMAIL PROTECTED] wrote:
I wouldn't put Flash as the single cause for this...
I have a table of ~ 30 rows that i tried to wire in a hover event
which colored/de-colored the row the user was over so it was obvious
what row they were one moving the mouse in and out very quickly
made the out event not fire resulting in multiple rows being
highlighted (technically is was changing/removing a background-color)
This was on our company intranet site, i'll rip out some HTML and post
up a sample if that helps diagnose first thing i will do is rip
out the .hover wiring and use mouseenter and mouseleave to see
if that fixes the issue
On Oct 20, 7:52 pm, Karl Rudd [EMAIL PROTECTED] wrote:
Oh, you're working with Flash... hmmm that's probably the reason.
Getting events from object or embed nodes can be... tricky, in my
very limited experience.
My suggestion is that you drop the SIFR menu items and use background
images. Either that or you'll have to somehow tap into the hover
event inside the SIFR Flash object.
Sorry I can't really help more.
Karl
On Mon, Oct 20, 2008 at 6:21 PM, Mech7 [EMAIL PROTECTED] wrote:
What is not working correctly with me is when I hover the dropdown
menu i change the color of the sifr text so it remains black:
http://www.mech7.net/tmp/sifr/
In script.js in line 26:
,onRollOut: function(cb) {
var currentMenuItem =
cb.getFlashElement().parentNode.parentNode;
$(currentMenuItem).hover(
function () {
cb.changeCSS(
'a{color:#00; text-align:center;
text-decoration:none;}'
);
},
function () {
cb.changeCSS(
'a{color:#ee; text-align:center;
text-decoration:none;}'
);
}
);
}
If you move the mouse slow it works correct, but hover the main items
fast and they stay black but not change back anymore.
On Oct 15, 2:54 pm, Karl Rudd [EMAIL PROTECTED] wrote:
Right. That's what I'd expect.
The mouseout (and mouseover) events bubble up through child DOM
nodes, and often fire at odd times, which is why it you should use the
mouseenter and mouseleave events. The enter and leave events are
specially built to not bubble (at least not unexpectedly).
I do see what you mean by the mouseleave firing more than once in some
cases. No idea why.
Do you have a particular page that isn't working?
Karl Rudd
On Wed, Oct 15, 2008 at 6:00 PM,Mech7[EMAIL PROTECTED] wrote:
Ok when I go over the example one fast stroke in Firefox 3 then I get
4 and 6 for the outer.. in the 1st example. Now try to do a circlular
movement in the orange box in the 1st example... stay inside the
orange, over keeps firing, do a movement from left to right and it
doesn't
On the 2nd example, try to go really fast with the mouse over the
entire area, sometimes it will fire once and sometimes 3 times.
On Oct 15, 11:39 am, Karl Rudd [EMAIL PROTECTED] wrote:
It seems to work as I expect it too on the example page.
Can you provide a working example and explain what you expect to
happen?
Karl Rudd
On Wed, Oct 15, 2008 at 2:02 PM,Mech7[EMAIL PROTECTED] wrote:
http://docs.jquery.com/Events/mouseout
Even in the example it does not work correct.. for example make
some
circles with the mouse on mouseout.. it will keep adding numbers.
Also with mousenter, move it fast and the numbers will go up with
big
amounts. :( How to fix this, i can't use mouseout cause it will
fire
also with the child elements.
[jQuery] Re: Help in Autocomplete
Please provide a testpage, eg. via jsbin.com Jörn On Tue, Oct 28, 2008 at 8:14 AM, aimhier [EMAIL PROTECTED] wrote: I am using firebug to debug my js and i am getting the following error. value.replace is not a function http://localhost/rentalphase2/jquery.autocomplete.js Line 409 Firebug is showing my return from the script as letssene letssen letssenee letsseneee letssen Adding New Customers which implies a \n between the two. So can you tell me what i am doing wrong Waiting in anitcipation, Thanx Aditya.
[jQuery] Re: Validate Plugin - On Error?
Use the highlight (and unhighlight) options.
Jörn
On Tue, Oct 28, 2008 at 7:30 AM, Validatorian [EMAIL PROTECTED]wrote:
I need to perform a custom action when it turns invalid.
Currently, I have this:
success: function(label) {
label.html(good).parent('div').removeClass('bad').addClass('good');
},
Ideally, I would just do:
failure: function(label) {
// set nbsp; as text for IE
label.html(bad).parent('div').removeClass('good').addClass('bad');
}
But that doesn't work.
How can I perform this action when the script detects that something
is amiss?
[jQuery] Re: Validate. Can validate plugin do this?
No idea, I'd need a testpage to look at. jsbin.com is quite useful for that.
Jörn
On Tue, Oct 28, 2008 at 12:16 AM, shapper [EMAIL PROTECTED] wrote:
The values of the select, the input and the names of the selected
checkboxes are added to a string and added to the unordered list as:
liInput Values/li
If the select is empty and the input is empy I want to display the
error message and the items not added. Here is my code:
// Define remove event
$('.Remove').livequery('click', function(event) {
$(this).parent().remove();
});
// Create fields
var subject = [], note = [], levels = [];
// Bind add button
$('#AddTheme').bind('click', function(){
// Define fields
subject = $('#Subject option:selected').text();
note = $('#Note').val();
levels = $('input:checked + label').map(function() {
return $(this).text();
}).get().join(, );
// Define data
var data = subject + '.' + note + '.' + levels;
// Append theme
$('li class=DynamicList/li').appendTo('#Themes')
.append(subject)
.append('br /')
.append(levels)
.append('br /')
.append(note)
.append('br /')
.append(' a href=#Remove class=RemoveRemove/a')
.append(' input type=hidden name=Themes value = ' + data
+ ' /');
});
I can integrate the validation in my script but since I am using
Validate if it would be possible I would handle the validation all in
the same way.
Thanks,
Miguel
On Oct 27, 10:11 pm, Jörn Zaefferer [EMAIL PROTECTED]
wrote:
Whats supposed to happen when you click the add button?
Jörn
On Mon, Oct 27, 2008 at 10:54 PM, shapper [EMAIL PROTECTED] wrote:
Hello,
I have a form with 20 elements a Submit Button and a Validate. It
works fine ...
Inside this form I added the following:
- a select, an input and 3 checkboxes all with same name;
- a button named Add;
- an ordered list.
When the Add button is clicked the values of the select, input and
checkboxes are added to the list as list item.
Note: When the Add button is clicked it does not submit the entire
form
$('#Add').bind('click', function(){
// logic done here
}
Can I add validation functionality to Add button using the validate
plugin?
The select and the input should be required.
Note: when the entire form is submitted these fields can be empty
Thanks,
Miguel
[jQuery] Re: Autocomplete: Show full list before start typing
The data came froma webservice (ASP.NET in XML format)
function GetData_callback(xml, dest) {
var data = new Array();
try {
var i = 0;
$(anyType, xml).each(function() { data[i] = $(this).text();
i = i + 1; });
}
catch (ex) {
alert(ex);
}
finally {
$(#dest).autocomplete(data, { minChars: 0 });
}
}
So i need to expand (and the show) the list of results.
Thank you
On 27 Ott, 17:25, mbraybrook [EMAIL PROTECTED] wrote:
Can you tell us how you currently initialize the list?
Perhaps a link or an extract of code.
It depends on how you populate the list as to how you would show all
items.
I can't personally see a built in function of the AutoComplete plugin
that supoprts this - hence it would likely be that you would populate
the list yourself manually.
Regards
Mark
On Oct 27, 3:08 pm, Mello [EMAIL PROTECTED] wrote:
Hi all
I've a filed that use the Ui.autocomplete plugin to show the list of
possibile values, this list is shown when i start typing but i need to
view the full list before start typing.
This list is small (max 15 items) so there's no performance issues.
There's a method to do this?
Thank you.
Mello.
[jQuery] Re: Selecting an element whose ID is in a variable
D'OH!! I'd not thought of that, but as you point out, the selector is
a string, so it should have occurred to me at some point. Thanks to
yourself and Josh for the replies. As it happens, this is a FAQ for a
number of programming languages I've used, and I usually end up
hunting for an eval() or similar function - this is a lot simpler than
many.
Cheers
Fred
On Oct 27, 9:39 pm, Josh Nathanson [EMAIL PROTECTED] wrote:
You want this:
$(# + fieldset_id);
Don't feel bad, that trips up a lot of people at first (myself included).
Basically the selector is just a string, so you can use the usual JS string
methods to get what you need.
-- Josh
- Original Message -
From: fredriley [EMAIL PROTECTED]
To: jQuery (English) jquery-en@googlegroups.com
Sent: Monday, October 27, 2008 1:13 PM
Subject: [jQuery] Selecting an element whose ID is in a variable
This has got to be a FAQ, but I can't see it in the FAQ so here goes,
and apologies if it's a stupid question but I'm a relative newbie to
jQuery:
How can I select an element whose id is stored in a constructed string
variable?
What I mean is something like the following. In a document I've got
span elements with IDs 1, 2, 3, etc, and these correspond to
fieldset elements with IDs part1, part2, part3, etc. The user
clicks on a span, the code gets its ID, constructs the ID of the
corresponding fieldset, then does something with that (hides it). So
something like:
$(span).click(function()
{
// get the handle of the clicked element
var mySpan = $(this);
// get its id
var span_id = mySpan.attr(id);
// construct the fieldset id
var fieldset_id = part + span_id;
// select the fieldset then hide it - now I'm stuck
});
I've tried the selectors:
alert($(fieldset_id).attr(id)); // gives 'undefined'
alert($(#fieldset_id).attr(id)); // syntax error: illegal character,
not surprisingly
alert($(#fieldset_id).attr(id)); // gives 'undefined'
An alternative would be to get the handle of the fieldset element,
which could be achieved with the Javascript:
var id2 = document.getElementById(fieldset_id);
alert(id2.id); // gives the id of the fieldset
but I don't know how to do this in jQuery. I'd prefer to go the whole
jQuery hog and not mix it with raw JS, and I could do with
understanding how to do this simple operation anyway to improve my
jQuery understanding, so tips would be welcome. TIA.
What I'm trying to do is generalise the specific code in the test at
http://www.nottingham.ac.uk/~ntzfr/test/ajax/jquery/show_hide.htmlto
handle a form with any number of toggle-able sections.
Cheers
Fred
[jQuery] Help with syntax
Hi everyone, I've been playing with jQuery a lot lately but my skills
could use a lot of work. I recently made this small snippet of script
to show and hide tablerows from a link that looks like this:
a href=1 class=ahref1/a
this will show:
tr class=box1 box
tdetc/td
/tr
Javascript:
$(function(){
$('.box').hide(); /* hide every tr with class box at the start */
$('.ahref',this).click(function () {
var id = $(this).attr('href');
$('.box'+id).toggle();
$(tr.box:not('.box+id+')).hide(); /* so it will
hide all the
other TR's */
return false; /* so it doesn't follow the link itself */
});
});
Now I was wondering if anyone would like to critique it, I find it is
a bit slow at times.
Thanks a lot in advance!
[jQuery] Re: jQuery Uploader Flash player 10 fix
I'm really lookin forward to the new version!!! It's awesome that you're still workin' on it! ;)
[jQuery] Extending jQuery the OO way
For those interested in extending jQuery the OO way, I have posted an article on this subject here. http://santrajan.blogspot.com/2008/10/what-john-resig-did-not-tell-you.html
[jQuery] Re: hide() not working when disabling CSS
noscript is just an element that is displayed when JavaScript has been
disabled (99%) in the user's browser or when JavaScript is not supported by
it (1% mostly search engines).
On Tue, Oct 28, 2008 at 12:48 AM, 5h4rk [EMAIL PROTECTED] wrote:
Thanks! Now I get it. Can you explain the reasoning behind the
noscript approach please?
Thanks again.
On Oct 28, 9:50 am, Isaak Malik [EMAIL PROTECTED] wrote:
It's much wiser to use noscriptp class=jsoffPlease turn Javascript
on
to view the content./p/noscript instead of a JavaScript function that
hides it.
On Mon, Oct 27, 2008 at 11:01 PM, Karl Swedberg [EMAIL PROTECTED]
wrote:
On Oct 26, 2008, at 9:33 PM, 5h4rk wrote:
Hi,
I have
p class=jsoffPlease turn Javascript on to view the content./p
and
$('p.jsoff').hide();
When I turn CSS off using the Web Developer Extension for Firefox and
Javascript on, the message is somehow not hidden. I'm not sure if this
is the problem, but Instead of style=display:none;, webdeveloper-
inline-style=display:none; is applied to the p.
It works fine when CSS is on though.
Appreciate your help.
Thanks.
That's right. the .hide() method uses display: none; which is a css
declaration. You could try $('p.jsoff').remove() instead.
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
--
Isaak Malik
Web Developer
--
Isaak Malik
Web Developer
[jQuery] Empty
Hi,
I have the following on a JQuery Code:
$('li class=DynamicList/li').appendTo('#Themes')
.append(subject)
.append('br /')
.append(levels)
.append('br /')
How can I add
.append(subject)
.append('br /')
only if subject is not empty and
.append(levels)
.append('br /')
only if levels is not empty?
Levels and Subject are declared as: var subject = [], levels = [];
Thanks,
Miguel
[jQuery] TreeView Plugin by Jörn Zaefferer (Asynchro nous mode)
Hi ! I need your help ! I want to create an asynchronous treeview with the jQuery plugin but the documentation for asynchrone mode doesn't exist My problem is simple , I just want to call a function when i click on an item of treeview (parent and children) and passed the id to this function. Can you help me ? please Arthur
[jQuery] JQuery selector
Hi everyone, I have a question on JQuery selector. I want to add a class, last, into li elements where have !-- This is the one -- comment next to it under different ul but have the same class u. This is what I ended up with. However, it only selects li final two. $(.u li:last-child).addClass(last); body div id=d1 This is content /div ul class=u li1/li li2/li lifinal one/li !-- This is the one -- ul class=l li11/li li22/li /ul /ul ul class=u li3/li li4/li lifinal two/li !-- This is the one -- /ul /body Any help will be appreciated. Thanks.
[jQuery] Re: JQuery selector
Try: $(.u:last li:last).addClass(last); On 28 Okt., 13:07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Hi everyone, I have a question on JQuery selector. I want to add a class, last, into li elements where have !-- This is the one -- comment next to it under different ul but have the same class u. This is what I ended up with. However, it only selects li final two. $(.u li:last-child).addClass(last); body div id=d1 This is content /div ul class=u li1/li li2/li lifinal one/li !-- This is the one -- ul class=l li11/li li22/li /ul /ul ul class=u li3/li li4/li lifinal two/li !-- This is the one -- /ul /body Any help will be appreciated. Thanks.
[jQuery] Re: JQuery selector
Because you forgot to close the de first ul element. Mauricio -Mensagem Original- De: [EMAIL PROTECTED] Para: jQuery (English) jquery-en@googlegroups.com Enviada em: terça-feira, 28 de outubro de 2008 10:07 Assunto: [jQuery] JQuery selector Hi everyone, I have a question on JQuery selector. I want to add a class, last, into li elements where have !-- This is the one -- comment next to it under different ul but have the same class u. This is what I ended up with. However, it only selects li final two. $(.u li:last-child).addClass(last); body div id=d1 This is content /div ul class=u li1/li li2/li lifinal one/li !-- This is the one -- ul class=l li11/li li22/li /ul /ul ul class=u li3/li li4/li lifinal two/li !-- This is the one -- /ul /body Any help will be appreciated. Thanks.
[jQuery] Re: JQuery selector
$(.u:last li:last).addClass(last); Close. $(ul.u li:last-child).addClass(last); You may want to move that child ul inside an li - it's not proper HTML to put a UL inside a UL. --John On 28 Okt., 13:07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Hi everyone, I have a question on JQuery selector. I want to add a class, last, into li elements where have !-- This is the one -- comment next to it under different ul but have the same class u. This is what I ended up with. However, it only selects li final two. $(.u li:last-child).addClass(last); body div id=d1 This is content /div ul class=u li1/li li2/li lifinal one/li !-- This is the one -- ul class=l li11/li li22/li /ul /ul ul class=u li3/li li4/li lifinal two/li !-- This is the one -- /ul /body Any help will be appreciated. Thanks.
[jQuery] Re: JQuery selector
It's preferable correct the invalid markup and use the selector you have chose or ( $(.u li:last-child). E F selects all elements F that are descendants of E element. E F selects all elements F that are children (direct descendants) of E element. Mantra: Validate! Validate! and Validate! http://validator.w3.org/ You may want to move that child ul inside an li - it's not proper HTML to put a UL inside a UL. --John On 28 Okt., 13:07, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Hi everyone, I have a question on JQuery selector. I want to add a class, last, into li elements where have !-- This is the one -- comment next to it under different ul but have the same class u. This is what I ended up with. However, it only selects li final two. $(.u li:last-child).addClass(last); body div id=d1 This is content /div ul class=u li1/li li2/li lifinal one/li !-- This is the one -- ul class=l li11/li li22/li /ul /ul ul class=u li3/li li4/li lifinal two/li !-- This is the one -- /ul /body Any help will be appreciated. Thanks.
[jQuery] Re: Use JSON from .post
I have an object created using json_encode and via the console.log
entry as suggested, I can see that it is correct. I have a backend
program that I'm wanting to pass this object to, so that it can do a
json_decode and then process that data. When I try to pass the
object to it, using:
$.post(prog,{data:data},function(){},json); the result is that
the backend program receives a $_POST['data'] that looks like:
[object Object] instead of the json_encoded string.
I'm pulling my hair out on this..
I think what's happening is that you're trying to send a full-fledged
object along as part of a POST payload, and JavaScript needs to
convert it to a string so that it knows how to send it via HTTP.
Converting an object to a string doesn't necessarily give you a JSON
representation of the object; instead, you get as best a string
representation as Firefox can muster--'[object Object]'. That fourth
parameter to $.post ('json', the type parameter) indicates how to
treat the server *response*, not how to send data to the server.
What does your 'data' object look like? Is it simply key = value
pairs? You might be able to get away with this:
$.post(prog, data, function () { }, 'json');
and PHP will receive one entry in $_POST for each key in your data
object. If you do that, the object will be sent as a normal key=value
POST payload, rather than as a JSON object bundled in one variable.
Since HTTP supports transporting data this way, it makes sense (to me)
to take advantage of that.
If that doesn't work for you, you'll need to serialize your actual
object into its JSON string representation before sending it along to
the server; I'm not sure the best method for reliably doing that. I
don't *think* jQuery has a method for that, but I wouldn't swear to
it. You're looking for something like:
http://www.nabble.com/How-to-serialize-an-Object-to-JSON-String-without-making-it-POST--like--td19520848s27240.html
with some more discussion here:
http://saloon.javaranch.com/cgi-bin/ubb/ultimatebb.cgi?ubb=get_topicf=20t=016362
But like I say, I'm a fan of using HTTP's built-in mechanism (query
strings) for transporting structured data *to* a server, and letting
the backend server and language deal with figuring it out.
HTH
[jQuery] Re: Problem with Lightbox
Hi! I suppose it's: class=lightbox-enabled rel=lightbox-myGroup not just rel=lightbox-myGroup And maybe myGroup instead of just group?
[jQuery] Exists
Hello,
I have the following:
if (subject == '---') {
if(!$('label[for=Subject,class=Error]').length) {
$('#Subject').parent().after('label for=Subject
generated=true class=ErrorRequired field/label');
}
}
I need to check if a label with for=Subject and class=Error
exists:
if(!$('label[for=Subject,class=Error]').length)
This is not working. What am I doing wrong?
Thanks,
Miguel
[jQuery] Re: Empty
I have the following on a JQuery Code:
$('li class=DynamicList/li').appendTo('#Themes')
.append(subject)
.append('br /')
.append(levels)
.append('br /')
How can I add
.append(subject)
.append('br /')
only if subject is not empty and
.append(levels)
.append('br /')
only if levels is not empty?
Levels and Subject are declared as: var subject = [], levels = [];
I'm not sure how you're appending arrays to an element, but in general
you can handle this by stashing a reference to the newly-created li
and then conditionally appending in a series of statements. Something
like:
var subject = 'something', levels = '', $li = $('li
class=DynamicList/li').appendTo('#Themes');
if (subject) {
$li.append(subject).append('br /');
}
if (levels) {
$li.append(levels).append('br /');
}
Since the initial appendTo call will return a jQuery object that wraps
the newly-created li, you can either chain it (as in your example)
or stash it in a variable for later re-use (as in my example).
[jQuery] Re: Help with syntax
Hi everyone, I've been playing with jQuery a lot lately but my skills
could use a lot of work. I recently made this small snippet of script
to show and hide tablerows from a link that looks like this:
a href=1 class=ahref1/a
this will show:
tr class=box1 box
tdetc/td
/tr
Javascript:
$(function(){
$('.box').hide(); /* hide every tr with class box at the start */
$('.ahref',this).click(function () {
var id = $(this).attr('href');
$('.box'+id).toggle();
$(tr.box:not('.box+id+')).hide(); /* so it will
hide all the
other TR's */
return false; /* so it doesn't follow the link itself
*/
});
});
Now I was wondering if anyone would like to critique it, I find it is
a bit slow at times.
Is it the case that there could be multiple trs with class 'box1'?
If that's a unique identifier for a row, I'd swap that to an ID
instead, which will simplify your code slightly and also not require
you to use fake hrefs:
HTML:
a href=#1 class=ahref1/a
Now your JS can simply take the href and use it directly as a selector
to find which box to hide/show. You can also get rid of the :not
selection (which may be what's slowing things down) by first hiding
*all* .box rows then just showing the one you want, rather than hiding
after the fact:
$(function () {
var $boxes = $('.box').hide(); /* hide every tr with class box at
the start, and stash a reference to them for later use */
$('.ahref').click(function () {
$boxes.hide(); /* hide all the boxes again; something
might be showing from the last click */
$(this.href).show();/* this, in a click handler, is a
reference to the HTML element, so just grab its href without invoking
jQuery on it; its href is an anchored selector so it can be passed
right to jQuery */
return false; /* prevent default link behavior */
}
});
If your box #s are not unique (IOW, there could indeed be multiple
with the same class) then you need to keep your classes, but I'd still
stash the reference to $boxes initially, and not worry about the :not
matching--just hide everything first before you decide what to show.
In that case, I don't know a good solution to how to make the link
href meaningful; that depends somewhat on your data.
[jQuery] Re: Exists
Hi,
if(!$('label[for=Subject,class=Error]').length)
Have you tried $('label[for=Subject].Error'?
Christof
[jQuery] Re: Problem with Lightbox
Hello, thanks for your help. But it is still not working :-( I suppose it's: class=lightbox-enabled rel=lightbox-myGroup not just rel=lightbox-myGroup And maybe myGroup instead of just group? Now my code looks like this: a class=lightbox-enabled title=IMG_1964_dxo rel=lightbox-myGroup href=http://blablabla.jpg; img style=max-width: 140px; max-height: 110px; src=http://blablabla.jpg/ /a Greetings, Stefan Sturm
[jQuery] Re: Exists
I have the following:
if (subject == '---') {
if(!$('label[for=Subject,class=Error]').length) {
$('#Subject').parent().after('label for=Subject
generated=true class=ErrorRequired field/label');
}
}
I need to check if a label with for=Subject and class=Error
exists:
if(!$('label[for=Subject,class=Error]').length)
I'm not up enough on my CSS selector syntax to know if multi-attribute
selectors like that are valid, but you should be able to simplify
somewhat like:
$('label.Error[for=Subject]')
to locate the element(s) you're looking for.
Have you thought about how forms will be validated if the client has
JavaScript disabled? Will the server generate similar HTML when it
does validation? If so, are you duplicating effort client- and server-
side that could be left just to the server?
It might also be worth checking out:
http://jquery.com/blog/2007/07/04/about-client-side-form-validation-and-frameworks/
for some discussion on the subject of client-side form validation.
HTH!
[jQuery] Re: Help with syntax
You can also get rid of the :not selection (which may be what's slowing things down) by first hiding *all* .box rows then just showing the one you want, rather than hiding after the fact: Thanks a lot for your input! The boxes don't the classes except box, so thanks I'll make id's out of them. However, in testing I needed to hide every box except the one I'm showing or toggle doesn't work. Maybe I missed something though. Thanks again!
[jQuery] Re: Validate. Can validate plugin do this?
On Oct 28, 8:49 am, Jörn Zaefferer [EMAIL PROTECTED] wrote: No idea, I'd need a testpage to look at. jsbin.com is quite useful for that. Jörn Hi Jörn, If you don't mind I prefer to upload an example to my server. It is easier because the code is not so simple. http://www.27lamps.com/Beta/Validate/Validate.html Basically, when the button Add is clicked the select Subject requires a value and the checkboxes Levels should also required a at least one checked. Let me know if I can pull this with your plugin. If you notice I am already using your plugin for Name and Blog inputs on Create click. Thanks, Miguel
[jQuery] Re: slideToggle content disappears in IE
flycast schrieb: I have this page at: http://www.hopecc.net/ministries/adult I use slideToggles to show and hide somecontent. The problem is that in IE only any content that is inside p/p tags display properly validate your document first, see: h3Crown Ministries/h3 div class=ClassDescription p p This is a weekly studyense. . /pbr / Times/Dates/locations to be announced.br / /p P in P is not allowed!!! You have many of this sort of errors. -- Viele Grüße, Olaf --- [EMAIL PROTECTED] http://olaf-bosch.de/ http://ohorn.info/ http://www.akitafreund.de/ ---
[jQuery] Problem with adding EventListener
Hi, I have just started using JQuery. And so far, I have gotten some
problems with adding events in the loading stage to a button.
The following is my code
head
script src='js/jquery.min.js'/script
script type='text/javascript'
$(function(){
$(#msg_button)[0].addEventListener('click',show_msg,false)
});
function show_msg()
{
alert(Nice to show you this)
}
/script
/head
body
div id='msg'/div
button id='msg_button' name='msg_button' Show Message/button
/body
So Here are my problems
Problem 1
$(#msg_button)[0].addEventListener('click',show_msg,false) doesn't
work in IE. It give me an error message saying that This object
doesn't support the property or method . I think I know the reason
for this. But I thought addEventListener method should be cross
platform in Jquery.
Problem 2
When I change $(#msg_button)[0] to $(#msg_button) instead, and it
gives me an error in both IE and Firefox saying $
(#msg_button).addEventListener is not a function. After a deeper
inspection, I found out that $(#msg_button) only returns an Object
object , where $(#msg_button)[0] returns object HTMLButtonElement
which is identical to what document.getElementById returns. Should $
(#msg_button) return a proper object like Button, Link and so on
instead of a general Object? And also I am not sure if Javacript
support dereferencing as Java does.
So I come up a solution :
I put
function addEvent(obj,type,fn) {
if (obj.addEventListener) //in Mozila
{
obj.addEventListener(type,fn,false);
return true;
}
else // in IE
{
obj.attachEvent(on+type,fn)
}
}
in my javascript block.
and replace $(#msg_button).addEventListener('click',show_msg,false)
with addEvent($(#msg_button)[0],'click',show_msg). And everything
work fine.
But my concern is this I though I can do all these common things in
Jquery way without introducing any of my self-defined functions!!!
Please Open my eyes to Jquery World.
Thank you very much.
[jQuery] Fix relative links script not working
Hi, I have a lot of documents that have a mix of absolute and relative
links. I'm using the following code to add the full URL and make the
links all absolute. It works for the links that are relative, but it
also puts the full URL in front of the links that are already
absolute, making them break. How can I edit this code to only add to
the links that are relative and leave those that are absolute alone?
Another thought I had was to first take out the domain, and then run
the script for everything, but I'm not sure how to do that. Also, the
pages in my array have parameters that come after them, so I can't
simply replace those with the full URL, I have to add the domain in
front of what is there.
Thanks for your help.
function fixHrefSrc() {
var mb_jsp_pages=new Array(email-colleague.jsp, events.jsp,
events-more.jsp, lobby.jsp, showdctmdoc, getdoc )
for (r=0;rmb_jsp_pages.length;r++) {
$('[EMAIL PROTECTED]'+ mb_jsp_pages[r] +']').each(function() {
$(this).attr('href', 'http//myfullurl/folder/'+($
(this).attr('href')));
$(this).attr('target', '_blank');
});
$('[EMAIL PROTECTED]'+ mb_jsp_pages[r] +']').each(function() {
$(this).attr('src', 'http//myfullurl/folder/'+($
(this).attr('src')));
});
}
}
[jQuery] Re: Selecting an element whose ID is in a variable
In this case you might use that solution (if you can gurantee the id
won't mess with the selctor), but I would usually just do a
$(document.getElementById(var)); that way you don't have to escape
var.
imagine you had a div id=foo :first-child) /div
then var id=theDiv.attr(id) // id would now be foo :first-child
so now, a $(#+id) wouldn't select the element wiith an id of foo,
but rather its first child. Using gebi, you avoid that
On Oct 28, 11:30 am, fredriley [EMAIL PROTECTED] wrote:
D'OH!! I'd not thought of that, but as you point out, the selector is
a string, so it should have occurred to me at some point. Thanks to
yourself and Josh for the replies. As it happens, this is a FAQ for a
number of programming languages I've used, and I usually end up
hunting for an eval() or similar function - this is a lot simpler than
many.
Cheers
Fred
On Oct 27, 9:39 pm, Josh Nathanson [EMAIL PROTECTED] wrote:
You want this:
$(# + fieldset_id);
Don't feel bad, that trips up a lot of people at first (myself included).
Basically the selector is just a string, so you can use the usual JS string
methods to get what you need.
-- Josh
- Original Message -
From: fredriley [EMAIL PROTECTED]
To: jQuery (English) jquery-en@googlegroups.com
Sent: Monday, October 27, 2008 1:13 PM
Subject: [jQuery] Selecting an element whose ID is in a variable
This has got to be a FAQ, but I can't see it in the FAQ so here goes,
and apologies if it's a stupid question but I'm a relative newbie to
jQuery:
How can I select an element whose id is stored in a constructed string
variable?
What I mean is something like the following. In a document I've got
span elements with IDs 1, 2, 3, etc, and these correspond to
fieldset elements with IDs part1, part2, part3, etc. The user
clicks on a span, the code gets its ID, constructs the ID of the
corresponding fieldset, then does something with that (hides it). So
something like:
$(span).click(function()
{
// get the handle of the clicked element
var mySpan = $(this);
// get its id
var span_id = mySpan.attr(id);
// construct the fieldset id
var fieldset_id = part + span_id;
// select the fieldset then hide it - now I'm stuck
});
I've tried the selectors:
alert($(fieldset_id).attr(id)); // gives 'undefined'
alert($(#fieldset_id).attr(id)); // syntax error: illegal character,
not surprisingly
alert($(#fieldset_id).attr(id)); // gives 'undefined'
An alternative would be to get the handle of the fieldset element,
which could be achieved with the Javascript:
var id2 = document.getElementById(fieldset_id);
alert(id2.id); // gives the id of the fieldset
but I don't know how to do this in jQuery. I'd prefer to go the whole
jQuery hog and not mix it with raw JS, and I could do with
understanding how to do this simple operation anyway to improve my
jQuery understanding, so tips would be welcome. TIA.
What I'm trying to do is generalise the specific code in the test at
http://www.nottingham.ac.uk/~ntzfr/test/ajax/jquery/show_hide.htmlto
handle a form with any number of toggle-able sections.
Cheers
Fred
[jQuery] Re: jcarousel lite: getting it to work with a grided li display
claudes,
I recently modified the jCarouselLite plugin to take in a
parameter for how many rows that you want shown when scrolling
horizontal or columns when scrolling vertical. I am not sure the
easiest way to get you the code so I am just going to paste it here.
(function($) { // Compliant
with jquery.noConflict()
$.fn.jCarouselLite = function(o) {
o = $.extend({
btnPrev: null,
btnNext: null,
btnGo: null,
mouseWheel: false,
auto: null,
speed: 200,
easing: null,
vertical: false,
circular: true,
visible: 3,
start: 0,
scroll: 1,
rows: 1, //ADDED: Property to allow multiple rows
beforeStart: null,
afterEnd: null
}, o || {});
return this.each(function() { //
Returns the element collection. Chainable.
var running = false, animCss = o.vertical ? top :
left, sizeCss = o.vertical ? height : width;
var div = $(this), ul = $(ul, div), tLi = $(li, ul),
tl = tLi.size(), v = o.visible;
var rowCss = o.vertical ? width : height; //ADDED:
rowCss is used to set the height/width of the viewport based on how
many rows are showing
if (o.circular) {
ul.prepend(tLi.slice(tl - v - 1 + 1).clone())
.append(tLi.slice(0, v).clone());
o.start += v;
}
var li = $(li, ul), itemLength = li.size(), curr =
o.start;
div.css(visibility, visible);
li.css({ overflow: hidden, float: o.vertical ? none :
left });
ul.css({ margin: 0, padding: 0, position: relative,
list-style-type: none, z-index: 1 });
div.css({ overflow: hidden, position: relative, z-
index: 2, left: 0px });
var liSize = o.vertical ? height(li) : width(li); //
Full li size(incl margin)-Used for animation
var liRowSize = o.vertical ? width(li) : height(li); //
ADDED: size of the li's row
var ulSize = ((liSize * itemLength) / o.rows) + (liSize /
1.5); // size of full ul(total length, not just for
the visible items)
var divSize = liSize * v; // size
of entire div(total length for just the visible items)
var rowSize = liRowSize * o.rows; //ADDED: gets the size
in pixels of the height/width of the viewport
li.css({ width: li.width(), height: li.height() });
ul.css(sizeCss, ulSize + px).css(animCss, -(curr *
liSize));
div.css(sizeCss, divSize + px); //
Width of the DIV. length of visible images
div.css(rowCss, rowSize + px); //
ADDED: Height of the DIV
//ADDED: special consideration for vertical carousels with
multiple rows
if (o.vertical o.rows 1) {
ul.children().filter(function(index) {
return ((index + 1) % o.rows 0);
}).css({ float: left, width: });
}
if (o.btnPrev)
$(o.btnPrev).click(function() {
return go(curr - (o.scroll));
});
if (o.btnNext)
$(o.btnNext).click(function() {
return go(curr + (o.scroll));
});
if (o.btnGo)
$.each(o.btnGo, function(i, val) {
$(val).click(function() {
return go(o.circular ? o.visible + i : i);
});
});
if (o.mouseWheel div.mousewheel)
div.mousewheel(function(e, d) {
return d 0 ? go(curr - o.scroll) : go(curr +
o.scroll);
});
if (o.auto)
setInterval(function() {
go(curr + o.scroll);
}, o.auto + o.speed);
function vis() {
return li.slice(curr).slice(0, v);
};
function go(to) {
if (!running) {
if (o.beforeStart)
o.beforeStart.call(this, vis());
if (o.circular) {// If circular we are
in first or last, then goto the other end
if (to = o.start - v - 1) { // If
first, then goto last
ul.css(animCss, -((itemLength - (v * 2)) *
liSize) + px);
// If scroll 1, then the to might
not be equal to the condition; it can be lesser depending on the
number of elements.
curr = to == o.start - v - 1 ? itemLength
- (v * 2) - 1 : itemLength - (v * 2) - o.scroll;
} else if (to = itemLength - v + 1) { // If
last, then goto first
ul.css(animCss, -((v) * liSize) +
[jQuery] Jquery and AJAX
I have a form with updatePanel. I ahve Jquery inimplemented on this form. Everything works fine, but when a asynchronous postback takes place when I clickc the button inside the updatePanle, all Jquery features goes away. I googled for this and found that, I need to write the Jquery code in PageLoad, can anyone give me a sample code example for this...?? Also How to check in jquery , if a perticular radiobutton is checked/ selected...??? Thanks in advance
[jQuery] Re: Custom plugin
Try using this to create the plugin:
(function($) {
//
// plugin definition
//
$.fn.dockBar = function(options) {
// build main options before element iteration
var opts = $.extend({}, $.fn.dockBar.defaults, options);
// iterate and reformat each matched element
return this.each(function() {
$this = $(this);
$this.mouseover(function() {
$this.animate({height: 100, width:100}, medium);
$this.attr('src', 'Icons/' + opts.fileName + '1.png');
}).mouseout(function() {
$this.animate({height: 80, width:80}, medium);
$this.attr('src', 'Icons/' + opts.fileName + '2.png');
});
});
//
// plugin defaults
//
$.fn.dockBar.defaults = {
fileName: ''
};
};
})(jQuery);
You can then use it like this:
$(#MyDiv).dockBar({
fileName: 'FILENAME'
});
Let me know how that works for you.
-Tim
On Oct 26, 10:09 pm, jcnconnect [EMAIL PROTECTED] wrote:
Hi, im trying to make a custom jquery plugin but i need some help.
Here is the function that i am trying to do, but i dont want to repeat this
a million times
through out the website.
$('#MyDiv').mouseover(function() {
$('#MyDiv').animate({height: 100, width:100}, medium);
$('#MyDiv').attr('src','Icons/MyDivImage1.png');
}).mouseout(function() {
$('#MyDiv').animate({height: 80, width:80}, medium);
$('#MyDiv').attr('src','Icons/MyDivImage2.png');
});
I look up on a tutorial to make jQuery plugins but when i made my plugin i
couldnt get it to work.
Here is the plugin that i made.
jQuery.fn.DockBar = function(DivName,FileName) {
DivName = '#' + DivName;
$(NameRev).mouseover(function() {
$(DivName).animate({height: 100, width:100}, medium);
$(DivName).attr('src', 'Icons/' + FileName + '1.png');
}).mouseout(function() {
$(DivName).animate({height: 80, width:80}, medium);
$(DivName).attr('src', 'Icons/' + FileName + '2.png');
});
};
Any ideas, thanks.
--
View this message in
context:http://www.nabble.com/Custom-plugin-tp20181134s27240p20181134.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] datepicker z-index
I'm having trouble overriding the default z-index for the datepicker.
Here's the code I have (minus some stuff that doesn't apply to this issue):
$(#datefield).datepicker({
beforeShow: function()
{
$(this).css(position, absolute);
$(this).css(z-index, 30);
return {};
}
});
I've also tried using zIndex instead of z-index since that's how javascript
calls it. Any ideas?
--
Adam
Do one thing, and do it well.
-- The UNIX Philosophy
[jQuery] Re: TreeView Plugin by Jörn Zaefferer (Asynch ronous mode)
Take a look at the toggle-option. Jörn On Tue, Oct 28, 2008 at 12:12 PM, garthos [EMAIL PROTECTED] wrote: Hi ! I need your help ! I want to create an asynchronous treeview with the jQuery plugin but the documentation for asynchrone mode doesn't exist My problem is simple , I just want to call a function when i click on an item of treeview (parent and children) and passed the id to this function. Can you help me ? please Arthur
[jQuery] Re: Problem with adding EventListener
jQuery makes it simpler:
$(#msg_button).bind(click, show_msg);
Or, if you are not reusing the function:
$(#msg_button).click( function() {
alert('Nice to show you this');
});
-- Josh
- Original Message -
From: Jquery-Newbe [EMAIL PROTECTED]
To: jQuery (English) jquery-en@googlegroups.com
Sent: Tuesday, October 28, 2008 8:07 AM
Subject: [jQuery] Problem with adding EventListener
Hi, I have just started using JQuery. And so far, I have gotten some
problems with adding events in the loading stage to a button.
The following is my code
head
script src='js/jquery.min.js'/script
script type='text/javascript'
$(function(){
$(#msg_button)[0].addEventListener('click',show_msg,false)
});
function show_msg()
{
alert(Nice to show you this)
}
/script
/head
body
div id='msg'/div
button id='msg_button' name='msg_button' Show Message/button
/body
So Here are my problems
Problem 1
$(#msg_button)[0].addEventListener('click',show_msg,false) doesn't
work in IE. It give me an error message saying that This object
doesn't support the property or method . I think I know the reason
for this. But I thought addEventListener method should be cross
platform in Jquery.
Problem 2
When I change $(#msg_button)[0] to $(#msg_button) instead, and it
gives me an error in both IE and Firefox saying $
(#msg_button).addEventListener is not a function. After a deeper
inspection, I found out that $(#msg_button) only returns an Object
object , where $(#msg_button)[0] returns object HTMLButtonElement
which is identical to what document.getElementById returns. Should $
(#msg_button) return a proper object like Button, Link and so on
instead of a general Object? And also I am not sure if Javacript
support dereferencing as Java does.
So I come up a solution :
I put
function addEvent(obj,type,fn) {
if (obj.addEventListener) //in Mozila
{
obj.addEventListener(type,fn,false);
return true;
}
else // in IE
{
obj.attachEvent(on+type,fn)
}
}
in my javascript block.
and replace $(#msg_button).addEventListener('click',show_msg,false)
with addEvent($(#msg_button)[0],'click',show_msg). And everything
work fine.
But my concern is this I though I can do all these common things in
Jquery way without introducing any of my self-defined functions!!!
Please Open my eyes to Jquery World.
Thank you very much.
[jQuery] Is array empty?
Hello,
I have the folllowing:
var levels = [];
$levels = $('input[name=Levels]:checked +
label');
levels = $levels.map(function() { return $
(this).text(); }).get();
How can I check if levels array is empty?
I tried levels, levels.val(), etc but I was not able to make this
work.
Thanks,
Miguel
[jQuery] Re: change speed of animation during runtime
hi i have added a ui.slider now that can be used to change the speed. The animation stops when someone drags the slider and continues when the slider is set to a new value. it works in principle but somehow the whole animation is then quite bumpy and not smooth anymore...can't really figure out why yet.. cheers sissi
[jQuery] Re: Is array empty?
It's just a standard JS array:
var empty = !levels.length;
--Klaus
On 28 Okt., 17:15, shapper [EMAIL PROTECTED] wrote:
Hello,
I have the folllowing:
var levels = [];
$levels = $('input[name=Levels]:checked +
label');
levels = $levels.map(function() { return $
(this).text(); }).get();
How can I check if levels array is empty?
I tried levels, levels.val(), etc but I was not able to make this
work.
Thanks,
Miguel
[jQuery] where are the plugin demos?
I was wondering where the plugin demos are? Browsing thru the list of latest plugins, all it seems to list is the name, sometimes a version number and then a link to download the plugin itself Lots of times I don't even understand the plugin description until I see it working and code snippetwhat about links to a page that has the plugin working so we can see it in action? yes? no? maybe? is everyone else just such a javascript jock that they get what a plugin does just by looking at the plugin code? :)
[jQuery] Re: where are the plugin demos?
Click the title to view the plugin itself, lookup the Resources section, if a demo is available its listed there, else try the home page for the project. Assuming your on http://plugins.jquery.com? M On Oct 28, 5:30 pm, JCQ [EMAIL PROTECTED] wrote: I was wondering where the plugin demos are? Browsing thru the list of latest plugins, all it seems to list is the name, sometimes a version number and then a link to download the plugin itself Lots of times I don't even understand the plugin description until I see it working and code snippetwhat about links to a page that has the plugin working so we can see it in action? yes? no? maybe? is everyone else just such a javascript jock that they get what a plugin does just by looking at the plugin code? :)
[jQuery] Validate Plugin - Multiple Requirements? [validate]
I'm doing something similar to this example:
http://docs.jquery.com/Plugins/Validation/Methods/required#dependency-callback
I have a date input field, and if you are under 13, it pops up another
field for parent's age.But unlike this example,I want the parent to be
required to be 18 or older.How would I set it up to require the input,
and require it to be over a certain age.
It 's also important to note that the inputs are dates, not ages, so I
can't just do min:18 because it 's more like Tue Aug 29 2023
11:18:38 GMT-0700 (Pacific Daylight Time)
If needed, here's what I am currently doing:
function checkAge(parent) {
var min_age = 13;
if (parent) {
var dateArray = parent.split('/');
min_age = 18;
} else {
var dateArray = $('#dateOfBirth').val().split('/');
}
var year = dateArray[2];
var month = dateArray[0] - 1;
var day = dateArray[1];
var theirDate = new Date();
theirDate.setFullYear((parseInt(year) + min_age), month, day);
console.log(theirDate);
var today = new Date();
console.log(today);
console.log(today - theirDate);
if (today theirDate) {
$('#parentsRequired').show();
return true;
} else {
$('#parentsRequired').hide();
return false;
}
}
dateOfBirth: {
required: function(element) {
var check = checkAge();
return true;
},
date: true
},
parentsDateOfBirth: {
required: function(element) {
return checkAge($(element).val());
},
date: true
},
[jQuery] Re: Event.target is Parent Child in IE but in Firefox it is child Element
Ah, now I see it. Actually in IE it doesn't alert at all when hovering the menu only. I think IE doesn't support the target attribute. Try this: subMenu = (event.target || event.srcElement).id; On Oct 28, 3:39 am, csplrj [EMAIL PROTECTED] wrote: I am using Firefox 3.0.3 and IE 6.0 If we scroll mouse over Menu1 then in Firefox the message comes menu1 nav but in IE it comes nav nav Thanks in advance CSJakharia
[jQuery] my first plugin
Hi all, i'm going to finish my first plugin, i'm not exactly a programmer.. just a webdesigner with aptitude for programming, especially with jquery :) I would like your opinion about this plugin, and some advices to make it work better. here it's a simple demo page.. http://www.pirolab.it/piro_09/pirobox.html Here again an example associated with a web page complete http://www.pirolab.it/piro_09/index2.html in the end, my code.. http://www.pirolab.it/piro_09/js/pirobox.js TNX to all. Diego Valobra
[jQuery] Re: my first plugin
That's very well done. Good job Diego. I really like the animation when you hover over the thumbnail. -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of diego Sent: Tuesday, October 28, 2008 2:04 PM To: jQuery (English) Subject: [jQuery] my first plugin Hi all, i'm going to finish my first plugin, i'm not exactly a programmer.. just a webdesigner with aptitude for programming, especially with jquery :) I would like your opinion about this plugin, and some advices to make it work better. here it's a simple demo page.. http://www.pirolab.it/piro_09/pirobox.html Here again an example associated with a web page complete http://www.pirolab.it/piro_09/index2.html in the end, my code.. http://www.pirolab.it/piro_09/js/pirobox.js TNX to all. Diego Valobra
[jQuery] Re: my first plugin
Hi Diego, I think it's a nice plugin (just tested it, didn't look at code) I think it might be better if you showed some loading indicator somehow, while it's waiting to load the large images. Other than than, good job on your first plugin! On Oct 28, 12:04 pm, diego [EMAIL PROTECTED] wrote: Hi all, i'm going to finish my first plugin, i'm not exactly a programmer.. just a webdesigner with aptitude for programming, especially with jquery :) I would like your opinion about this plugin, and some advices to make it work better. here it's a simple demo page.. http://www.pirolab.it/piro_09/pirobox.html Here again an example associated with a web page complete http://www.pirolab.it/piro_09/index2.html in the end, my code.. http://www.pirolab.it/piro_09/js/pirobox.js TNX to all. Diego Valobra
[jQuery] Binding multiple custom namespaced events not working correctly
Hello,
Run the following code snippet in Firefox and open up Firebug. It
fires a custom event upon left or right click. The handlers for
'myclick.left' and 'myclick.right' work as expected. The problem is
that 'any click' is only logged to the console in case of a right
click, and not in case of a left click. That doesn't make sense to me.
Is this a bug or am I missing something??
$().
bind('myclick.left', function() {
console.log('left click');
}).
bind('myclick.right', function() {
console.log('right click');
}).
bind('myclick.left myclick.right', function() {
console.log('any click');
});
$().
click(function(e) {
var ns;
switch (e.which) {
case 1:
ns = 'left';
break;
case 3:
ns = 'right';
break;
}
$().trigger('myclick.' + ns);
});
[jQuery] Re: my first plugin
Hi Validatorian,tnx for your reply, the loader it's just there, but maybe it's too dark to see it, i'm going to change it. :) Regards Diego On 28 Ott, 20:43, Validatorian [EMAIL PROTECTED] wrote: Hi Diego, I think it's a nice plugin (just tested it, didn't look at code) I think it might be better if you showed some loading indicator somehow, while it's waiting to load the large images. Other than than, good job on your first plugin! On Oct 28, 12:04 pm, diego [EMAIL PROTECTED] wrote: Hi all, i'm going to finish my first plugin, i'm not exactly a programmer.. just a webdesigner with aptitude for programming, especially with jquery :) I would like your opinion about this plugin, and some advices to make it work better. here it's a simple demo page.. http://www.pirolab.it/piro_09/pirobox.html Here again an example associated with a web page complete http://www.pirolab.it/piro_09/index2.html in the end, my code.. http://www.pirolab.it/piro_09/js/pirobox.js TNX to all. Diego Valobra
[jQuery] Re: my first plugin
Hi Andy, tnx for your reply, the animation hover the thumbs it's very
simple:
$('.img_in li').hover(function() {
var img = $(this).attr('title')
$('#'+img).stop().animate({
padding:'10px',
height : '124px',
width: '179px',
opacity: 0.8
}, 150);
},
function(){
var img = $(this).attr('title')
$('#'+img).stop().animate({
padding:'0px',
height : '139px',
width: '200px',
opacity: 1
}, 150);
});
here it is.
regards
Diego
On 28 Ott, 21:07, diego [EMAIL PROTECTED] wrote:
Hi Validatorian,tnx for your reply, the loader it's just there, but
maybe it's too dark to see it, i'm going to change it. :)
Regards
Diego
On 28 Ott, 20:43, Validatorian [EMAIL PROTECTED] wrote:
Hi Diego,
I think it's a nice plugin (just tested it, didn't look at code)
I think it might be better if you showed some loading indicator
somehow, while it's waiting to load the large images.
Other than than, good job on your first plugin!
On Oct 28, 12:04 pm, diego [EMAIL PROTECTED] wrote:
Hi all, i'm going to finish my first plugin, i'm not exactly a
programmer.. just a webdesigner with aptitude for programming,
especially with jquery :)
I would like your opinion about this plugin, and some advices to make
it work better.
here it's a simple demo page..
http://www.pirolab.it/piro_09/pirobox.html
Here again an example associated with a web page complete
http://www.pirolab.it/piro_09/index2.html
in the end, my code..
http://www.pirolab.it/piro_09/js/pirobox.js
TNX to all.
Diego Valobra
[jQuery] problem with Effects/fadeIn in ie
when I run the sentence jQuery ( '# divId'). fadeIn ( slow); in ie disappears in the backgroud, the background is a PNG image, the style is for ie: background-image: none; filter: progid: DXImageTransform.Microsoft.AlphaImageLoader (src ='../ images2_FR/background.png ', sizingMethod =' scale '); the text in the div appeared normal. Ariel thanks
[jQuery] [Taconite] Using taconite to append javascript and stylesheets
Hi all, I am using the Taconite (http://malsup.com/jquery/taconite/) plugin to dynamically append external scripts (script) and stylesheets (link) to the page head section. Inspired by the Taconite example Demo1, I manage to get external scripts working, however stylesheets only seems to work in Firefox, not IE. Here is the Taconite markup I'm using: taconite !-- Works in FF and IE -- append select=head script type=text/javascript src=calendar.js/ /append !-- Works in FF but not IE -- append select=head link rel=stylesheet type=text/javascript href=calendar.css/ /append /taconite Is this scenario supported by Taconite or should I rather the eval tag for appending stylesheets? kind regards bob
[jQuery] Re: Jquery and AJAX
Looks like what's happening is the update panel (.NET right?) replaces
the entire html content with the asynchronous postback. At this
point, none of your HTML elements are bound to the event handlers
since they were all rewritten. You could prevent this by doing one of
2 things -
1) Event delegation - handle the events at a top level container,
that way, as long as you're not wrapping that container in the update
panel, your javascript won't stop working
2) Use a .NET function that rebinds js events after the postback.
For example, here, you should use the endRequest function, put the js
code that you need triggered.
Sys.WebForms.PageRequestManager.getInstance();
instance.add_endRequest( function(){functionName();});
As for checking a radiobutton is checked?
if($('#radiobutton').attr('checked'))
Return value is a boolean.
On Oct 28, 7:12 am, Byte1234 [EMAIL PROTECTED] wrote:
I have a form with updatePanel. I ahve Jquery inimplemented on this
form.
Everything works fine, but when a asynchronous postback takes place
when I clickc the button inside the updatePanle, all Jquery features
goes away.
I googled for this and found that, I need to write the Jquery code in
PageLoad, can anyone give me a sample code example for this...?? Also
How to check in jquery , if a perticular radiobutton is checked/
selected...???
Thanks in advance
[jQuery] Drag and Drop Question
im trying to write a cork board type app for a site and im having a
little trouble with the drag and drop. basically there are 2 divs
(#picker, #board) that load on the page. the #picker div contains
various images that the user can drag and drop onto the #board div.
once an image has been dropped into the #board div i want to change it
to a draggable element so the user can arrange all the image how they
please.
i can get all of that to work. however, using firebug to see whats
happening, once i drop the image into the #board and then start to
drag it around, i notice that the top and left properties of the img
element listed above it in the div are also being affected. this
shouldnt be happening.
i also wrote some extra code to bring the image being dragged to the
'front' by setting its z-index+1 to the current highest z-index. this
works fine when i havent dropped any new images onto the #board yet.
all the images already in the #board become the top image. but the
newly dropped images dont come to the front.
here is the code right now:
$(document).ready(function() {
$(.dragImage).draggable({
containment: 'parent',
cursor: 'move'
});
$(.dropImage).draggable({helper: clone});
$(.vizualize_container).droppable({
accept: .dropImage,
activeClass: droppable-active,
hoverClass: droppable-hover,
drop: function(e, ui) {
$(ui.draggable).attr({class: dragImage ui-draggable});
$(ui.draggable).draggable({
containment: 'parent',
cursor: 'move'
});
$(this).append($(ui.draggable));
}
});
});
var zmax = 0;
$('.dragImage').click(function() {
$(this).siblings('.dragImage').each(function() {
var cur = $(this).css('zIndex');
zmax = cur zmax ? $(this).css('zIndex') : zmax;
});
$(this).css('zIndex', (zmax*1)+1);
});
and here is a link to see it in action:
http://www.tut.com/visualizer
[jQuery] Deployment concerns for jquery
I see a lot of demos for jquery and normally how I do it is I just do a right click and copy the source of the demo right on to my web application. This has however lead to a messy javascript library because I have my pieces of the same code lying around the place. Could someone with experience share with me the proper way to do this on a production site? Thanks.
[jQuery] [validate] Problem with validation on a form pulling in with Ajax
I have a script that generates a form. I'm pulling this form into a
dialog box on my main index page via Ajax and trying to attached the
Validate plugin to the form.
So I've got this:
$(a.attendee_add).click(function() {
//Get href from link
var addURL = $(this).attr(href);
//Ajax get from href link
$.get(addURL, function(data){
//Display content in dialog box
$(data).dialog({
height: auto,
width: auto,
resizable: false,
draggable: false,
position: center,
modal: true,
overlay: {
background: #33
},
close: function(ev, ui) {
$(this).dialog(destroy).remove(); }
});
//Attach validate plugin
$(#attendee_editForm).validate();
});
return false;
});
However it doesn't work.
If I don't pull the form in with ajax and instead just paste it into
my index page and add in $(#attendee_editForm).validate(); to the
document ready function it works so I know my form is marked up
properly.
Has anyone any idea how I can get this working?
Thanks
[jQuery] Registering the value of variable instead of the variable itself in a loop
Hello,
I'm new to jQuery and I am currently working on google gadget which
has some animations.
I have wrote the jQuery code and manage to make it work:
$('#itemn').click(function() {
if ($(#tabcontentn).is(:hidden)) {
if(active == init) {
$(#tabcontentn).slideDown(300);
active = #tabcontentn;
} else {
$(active).slideUp(300, function() {
$(#tabncontent).slideDown(300);
active = #tabcontentn;
});
}
} else {
$(#tabcontentn).slideUp(300);
}
}
The problem has arisen after I decided to create a single for loop
instead of binding all elements one by one. Although I managed to get
it work with some workaround I'm not happy with the result:
for(var i = 1; i 6;i ++) {
item = '#item'+i;
$(item).click(function() {
alert(vts(this));
if ($(vts(this)).is(:hidden)) {
if(active == init) {
$(vts(this)).slideDown(300);
active = vts(this);
} else {
that = vts(this);
$(active).slideUp(300, function() {
$(that).slideDown(300);
active = that;
});
}
} else {
$(vts(this)).slideUp(300);
active = 'init';
}
});
}
function vts(e) {
var t;
t = e.id;
t = t.replace(/item/ig, '');
t = '#tabcontent'+t;
return t;
}
what I really want is creating some kind of code like this:
for(var i = 1; i 6; i++) {
var item = '#item'+i;
var element = '#tabcontent'+i;
$(item).click(function() {
if ($(element).is(:hidden)) {
if(active == init) {
$(element).slideDown(300);
active = element;
} else {
$(active).slideUp(300, function() {
$(element).slideDown(300);
active = element;
});
}
} else {
$(element).slideUp(300);
}
}
}
The problem with the above code is the $(element) stays as the last
element (#tabcontent5). I need to find a way to register that element
variable as a static value instead of the variable itself.
Any help would be appreciated.
Ozberk
[jQuery] Re: jQuery Documentation in PDF
Really an impressive work, as useful as important. It helps me because, for now, I'm temporarily without daily access to the Internet. Congratulations
[jQuery] .load not always working
i have a sidebar menu where users can click to load new data into the
main part of the screen. it works most of the time but after a few
clicks in the menu, the whole page just freezes and the loader stops
working. it doesnt load any more data. its not specific to any page or
link. it just stops after a few clicks.
this is my jquery code:
script type=text/javascript
$(function(){
//load profile main as default
$('#mainContentArea').load('profile.cfm?id=123type=main');
//onClick load new page into main content area
$('.sideBarMenu a').click(function(){
var thisPage = $(this).attr('href');
loader(thisPage);
return false;
});
//show loading message and call loadContent()
function loader(thisPage) {
$('#mainContentArea').load('/common/
loading.cfm','',loadContent(thisPage));
}
// show content
function loadContent(thisPage) {
$('#mainContentArea').load(thisPage)
}
});
/script
any ideas why my page would just freeze and load() would stop working?
[jQuery] Select an element in an ancestor selector
Hello guys,
I'm in a big trouble trying to create a simple jQuery function, and my
boss is on my neck asking when I'll be done with this work... I need
help!!!
My HTML is:
lia class=apImg/a
div
form
ul
li ... /li
li... /li
lia class=confirmarCONFIRMAR/a/li
/ul
/form
/div
/li
When I click a class=confirmar/a it should add and remove a
class to the a class=apImg, which is located right next to the
ancestor li on the code above. This piece of code will repeat
troughout the HTML that will be generated dynamicaly, and I must ONLY
select the a class=apImg above each link and NOT ALLa tags
inside the code that will carry the same class=apImg.
I'm trying this:
$(a.confirmar).click(function(){
$
(this).parents(li:first).next().find(a.apImg).addClass(apImgOn);
$
(this).parents(li:first).next().find(a.apImgOn).removeClass(apImg);
});
But it doesn't work!!
Is there anyone to help me, please?
André
[jQuery] Re: Jquery and AJAX
You might want to see if this is your problem:
If you have a set of functions, jQuery or otherwise in the main page,
then you reload an inner div with Ajax content, you will very likely
find that the new Ajax'ed content can no longer reach the functions in
the main page. There is some sort of binding issue that really tears
up in this scenario. I've found that putting my direct function calls
in the content that's returned works better.
Doesn't work:
body
scriptfunction a() {}/script
diva onclick=a();whatever/a/div
/body
Does work:
body
div
scriptfunction a() {}/script
a onclick=a();whatever/a
/div
/body
...where the div's content changes via outer ajax functions.
On Oct 28, 7:12 am, Byte1234 [EMAIL PROTECTED] wrote:
I have a form with updatePanel. I ahve Jquery inimplemented on this
form.
Everything works fine, but when a asynchronous postback takes place
when I clickc the button inside the updatePanle, all Jquery features
goes away.
I googled for this and found that, I need to write the Jquery code in
PageLoad, can anyone give me a sample code example for this...?? Also
How to check in jquery , if a perticular radiobutton is checked/
selected...???
Thanks in advance
[jQuery] .load not always working
i have a sidebar menu where users can click to load new data into the
main part of the screen. it works most of the time but after a few
clicks in the menu, the whole page just freezes and the loader stops
working. it doesnt load any more data. its not specific to any page or
link. it just stops after a few clicks.
this is my jquery code:
script type=text/javascript
$(function(){
//load profile main as default
$('#mainContentArea').load('profile.cfm?id=123type=main');
//onClick load new page into main content area
$('.sideBarMenu a').click(function(){
var thisPage = $(this).attr('href');
loader(thisPage);
return false;
});
//show loading message and call loadContent()
function loader(thisPage) {
$('#mainContentArea').load('/common/
loading.cfm','',loadContent(thisPage));
}
// show content
function loadContent(thisPage) {
$('#mainContentArea').load(thisPage)
}
});
/script
any ideas why my page would just freeze and load() would stop working?
[jQuery] Quick Syntax Error Check
IE7 is telling me the following script has a syntax error and I have
tried to find it but haven't located it . . . yet:
(function($){
$().ready(function() {
// validate the comment form when it is submitted
$(#commentForm).validate();
// validate signup form on keyup and submit
$(#signupForm).validate({
rules: {
email: {
required: true,
email: true
},
},
messages: {
email: Please enter a valid email address,
}
});
});
})(jQuery);
I'm going to keep looking but maybe somebody else will be able to find
it before me. Firefox doesn't seem to have a problem with it.
[jQuery] Selecting option of select with different ID using same code
Please take a look on example code:
script type=text/javascript
jQuery(document).ready(function() {
jQuery(#imageShowcase img).hide();
jQuery(#productImgDefault).show();
jQuery(#colorSelector).change(function() {
// Hide all images on slect element change action
jQuery(#imageShowcase img).hide();
// Get the value of selected option
var optionValue = jQuery(this).attr('value');
// Just a test to see if you're getting option value
// alert(optionValue);
// Get the content (aka inner HTML) of selected option
var optionValueText = jQuery.trim(jQuery('#colorSelector dl
dd.last select :selected').text());
// Just a test to see if you're getting right selected option
inner text
// alert(optionValueText);
//alert('Selected option has value: ' + optionValue + ' and
inner text: ' + optionValueText);
// Show the image based on selected value
jQuery(#productImg + optionValueText).show();
});
});
/script
div id=colorSelector
dl
dtlabelColor Groupspan class=requirednbsp;*/span/
label/dt
dd class=last
select name=options[8] id=select_8 class= required-entry
product-custom-option title=
option value=-Select-/option
option value=30Blue /option
option value=31Blue-Green /option
option value=32Green /option
option value=42Grey-Black /option
option value=29Pink-Purple /option
option value=28Red /option
option value=41White /option
option value=27Yellow-Brown /option
/select
/dd
/dl
/div
div id=imageShowcase style=text-align:left;
img id=productImgDefault src=color-hex.gif title=Blue image
alt=image missing /
img id=productImg-Select- src=color-hex.gif title=Blue
image alt=image missing /
img id=productImgBlue src=blue.gif title=Blue image alt=
style=display:none; /
img id=productImgBlue-Green src=blue-green.gif title=Blue-
Green image alt= style=display:none; /
img id=productImgGreen src=green.gif title=Yellow image
alt= style=display:none; /
img id=productImgGrey-Black src=grey-black.gif title=Yellow
image alt= style=display:none; /
img id=productImgPink-Purple src=pink-purple.gif
title=Yellow image alt= style=display:none; /
img id=productImgRed src=red.gif title=Yellow image alt=
style=display:none; /
img id=productImgWhite src=white.gif title=Yellow image
alt= style=display:none; /
img id=productImgYellow-Brown src=yellow-brown.gif
title=Yellow image alt= style=display:none; /
/div
This code changes image depending on the option selected in select.
I'm using very long code without ID used to get select option (aka
#colorSelector dl dd.last select) because code used on Magento and it
assigned for each select different ID and name.
My question is. It that possible to make code to change images in the
same way, but using link like:
a href=# onclick=???select option with Blue text/a
Thanks for help!
[jQuery] binding solution
I am having a binding issue. I've read enough in the jQuery docs and
on this forum to have a cursory understanding. Without many examples
to refer to, I am unsure of how to implement Live Query in order fix.
I'm calling this refreshLabels() function each time a form checkbox is
clicked. On the first click, alert() and replaceWith() act as desired,
but on subsequent clicks, only alert().
function refreshLabels(element, slug) {
$.ajax({
url:'/labels/sidebar/' + element + '/' + slug + '/1',
cache:false,
success:function(html){
alert('fired');
$('#sidebar-category-list').replaceWith(html);
}
});
}
I've made a number of attempts at applying the livequery() function to
replaceWith(), but get a replaceWith is not a function error each
time.
Can someone please show me the proper syntax needed to use Live Query?
Thanks!
[jQuery] text after a radio button
Working with Lotus Notes developer - apparently, when building a form with radio buttons elements, Lotus automatically puts the value in text beside the button. He says there is no way to override this. So we get: input name=joe type=radio value=1 /1 input name=joe type=radio value=2 /2 input name=joe type=radio value=3 /3 input name=joe type=radio value=4 /4 input name=joe type=radio value=5 /5 I said maybe we can hide that text with jQuery, but I find that I can target anything in the input tag, but I can't seem to get the text after it. Any help appreciated.
[jQuery] text after a radio button
Working with Lotus Notes developer - apparently, when building a form with radio buttons elements, Lotus automatically puts the value in text beside the button. He says there is no way to override this. So we get: input name=joe type=radio value=1 /1 input name=joe type=radio value=2 /2 input name=joe type=radio value=3 /3 input name=joe type=radio value=4 /4 input name=joe type=radio value=5 /5 I said maybe we can hide that text with jQuery, but I find that I can target anything in the input tag, but I can't seem to get the text after it. Any help appreciated.
[jQuery] Re: where are the plugin demos?
thanks, Mark. yes, I'm definitely in the right place --- I just did an interesting test. I randomly picked 25 plugins from the latest plugins list and only 2 had any demo/documentation attached in the Resources section. So either I'm not looking in the right spot, or maybe everyone is just advanced enough to visualize what a plugin can do just from looking at the plugin code? Is no one else daunted by that? On Oct 28, 1:43 pm, mbraybrook [EMAIL PROTECTED] wrote: Click the title to view the plugin itself, lookup the Resources section, if a demo is available its listed there, else try the home page for the project. Assuming your onhttp://plugins.jquery.com? M On Oct 28, 5:30 pm, JCQ [EMAIL PROTECTED] wrote: I was wondering where the plugin demos are? Browsing thru the list of latest plugins, all it seems to list is the name, sometimes a version number and then a link to download the plugin itself Lots of times I don't even understand the plugin description until I see it working and code snippetwhat about links to a page that has the plugin working so we can see it in action? yes? no? maybe? is everyone else just such a javascript jock that they get what a plugin does just by looking at the plugin code? :)
[jQuery] Re: Quick Syntax Error Check
The problem might be that there is a , after the line email:
Please enter a valid email address.
Try removing the comma and see what happens.
-Tim
On Oct 28, 1:10 pm, MauiMan2 [EMAIL PROTECTED] wrote:
IE7 is telling me the following script has a syntax error and I have
tried to find it but haven't located it . . . yet:
(function($){
$().ready(function() {
// validate the comment form when it is submitted
$(#commentForm).validate();
// validate signup form on keyup and submit
$(#signupForm).validate({
rules: {
email: {
required: true,
email: true
},
},
messages: {
email: Please enter a valid email address,
}
});
});
})(jQuery);
I'm going to keep looking but maybe somebody else will be able to find
it before me. Firefox doesn't seem to have a problem with it.
[jQuery] Re: Drag and Drop Question
to me, it looks like the z-index calculation is only happening when
the board is set up. What if you put that zmax calculation into its
own method, say, calculateZmax(), and then from *both* the
('.dragImage').click() function as well as the drop: function you
called calculateZmax() ? Either that, or somehow you have to bind
any new dragImage elements to have the zmax calculation attached.
(I think someone wrote a plugin for doing that, so that any new
elements that get that class name get things bound to them, and also
lose that binding whenever they lose the class).
Sorry if I'm vague, just throwing an idea out there that might spark a
new path
On Oct 28, 12:28 pm, Mazureth [EMAIL PROTECTED] wrote:
im trying to write a cork board type app for a site and im having a
little trouble with the drag and drop. basically there are 2 divs
(#picker, #board) that load on the page. the #picker div contains
various images that the user can drag and drop onto the #board div.
once an image has been dropped into the #board div i want to change it
to a draggable element so the user can arrange all the image how they
please.
i can get all of that to work. however, using firebug to see whats
happening, once i drop the image into the #board and then start to
drag it around, i notice that the top and left properties of the img
element listed above it in the div are also being affected. this
shouldnt be happening.
i also wrote some extra code to bring the image being dragged to the
'front' by setting its z-index+1 to the current highest z-index. this
works fine when i havent dropped any new images onto the #board yet.
all the images already in the #board become the top image. but the
newly dropped images dont come to the front.
here is the code right now:
$(document).ready(function() {
$(.dragImage).draggable({
containment: 'parent',
cursor: 'move'
});
$(.dropImage).draggable({helper: clone});
$(.vizualize_container).droppable({
accept: .dropImage,
activeClass: droppable-active,
hoverClass: droppable-hover,
drop: function(e, ui) {
$(ui.draggable).attr({class: dragImage
ui-draggable});
$(ui.draggable).draggable({
containment: 'parent',
cursor: 'move'
});
$(this).append($(ui.draggable));
}
});});
var zmax = 0;
$('.dragImage').click(function() {
$(this).siblings('.dragImage').each(function() {
var cur = $(this).css('zIndex');
zmax = cur zmax ? $(this).css('zIndex') : zmax;
});
$(this).css('zIndex', (zmax*1)+1);
});
and here is a link to see it in action:http://www.tut.com/visualizer
[jQuery] Re: Event.target is Parent Child in IE but in Firefox it is child Element
*property, that is. BTW, are you facing this issue on real project? Using jQuery event handlers the 'this' keyword usually suffices. On Oct 28, 4:55 pm, ricardobeat [EMAIL PROTECTED] wrote: Ah, now I see it. Actually in IE it doesn't alert at all when hovering the menu only. I think IE doesn't support the target attribute*. Try this: subMenu = (event.target || event.srcElement).id; On Oct 28, 3:39 am, csplrj [EMAIL PROTECTED] wrote: I am using Firefox 3.0.3 and IE 6.0 If we scroll mouse over Menu1 then in Firefox the message comes menu1 nav but in IE it comes nav nav Thanks in advance CSJakharia
[jQuery] Re: Quick Syntax Error Check
I agree with Tim, that is EXACTLY the problem. IE seems to hate any
trailing commas in that json-ish type of data structure, sometimes
it's called a syntax error, and once in a while I'll also get a
message like no object detected or somesuch. Anyway, kill that
trailing comma Tim mentioned and it will be fine.
On Oct 28, 5:48 pm, tpb976 [EMAIL PROTECTED] wrote:
The problem might be that there is a , after the line email:
Please enter a valid email address.
Try removing the comma and see what happens.
-Tim
On Oct 28, 1:10 pm, MauiMan2 [EMAIL PROTECTED] wrote:
IE7 is telling me the following script has a syntax error and I have
tried to find it but haven't located it . . . yet:
(function($){
$().ready(function() {
// validate the comment form when it is submitted
$(#commentForm).validate();
// validate signup form on keyup and submit
$(#signupForm).validate({
rules: {
email: {
required: true,
email: true
},
},
messages: {
email: Please enter a valid email address,
}
});
});
})(jQuery);
I'm going to keep looking but maybe somebody else will be able to find
it before me. Firefox doesn't seem to have a problem with it.
[jQuery] Re: Select an element in an ancestor selector
Try removing the :first like this:
$(a.confirmar).click(function(){
$
(this).parents(li).next().find(a.apImg).addClass(apImgOn).removeClass(apImg);
});
Also, since the methods are chainable, you do not need to traverse to
the item again. You can just call .removeClass() right after adding
the class.
-Tim
On Oct 28, 1:47 pm, André [EMAIL PROTECTED] wrote:
Hello guys,
I'm in a big trouble trying to create a simple jQuery function, and my
boss is on my neck asking when I'll be done with this work... I need
help!!!
My HTML is:
lia class=apImg/a
div
form
ul
li ... /li
li... /li
lia class=confirmarCONFIRMAR/a/li
/ul
/form
/div
/li
When I click a class=confirmar/a it should add and remove a
class to the a class=apImg, which is located right next to the
ancestor li on the code above. This piece of code will repeat
troughout the HTML that will be generated dynamicaly, and I must ONLY
select the a class=apImg above each link and NOT ALLa tags
inside the code that will carry the same class=apImg.
I'm trying this:
$(a.confirmar).click(function(){
$
(this).parents(li:first).next().find(a.apImg).addClass(apImgOn);
$
(this).parents(li:first).next().find(a.apImgOn).removeClass(apImg);
});
But it doesn't work!!
Is there anyone to help me, please?
André
[jQuery] slideDown with append
I'm sure this one is super simple for a bunch of people, but I'm a bit
stuck.
I have a list of items (show listings) and when a user clicks on a
show, I want a map to slideDown and display a map of the location of
the show.
If the user clicks on another show, the map that is being shown slides
in, and the new one slideDown.
Very similar to an accordian, but my initial markup isn't as simple.
What I thought I could do was to just append the show listing with the
html to hold the map, and then call the slideDown function. But what i
have is just the whole map popping out.
I believe this is because I have to give the map a size before I can
show it (google map).
I've tried wrapping the map in another div and tried playing with the
height that wrapper div, but that didn't really work either.
Here's the code I've got working right now.
[code]
$(.show).livequery('click', function(event){
$('a.active').removeClass('active');
$('div.holdExtras').slideUp('slow').remove();
$(this).addClass('active').slideDown('slow').append('div
class=holdExtrasdiv id=map2/divdiv id=holdQTthis holds
player/div/div');
});
[/code]
the slideUp remove somewhat surprisingly works quite well, just the
slideDown is giving me some problems.
Thanks,
Pete
[jQuery] Re: Selecting option of select with different ID using same code
Not sure if I understand, but you can't add an id to the links? is
that correct?
Any chance you can have your links read
Select option with a href=#Blue/a text ?
That way you could use the .html() selector to get the value of the
clicked item and feed that into your (#productImg +
optionValueText).show(); function.
otherwise, you can use .click() to grab the .htm() and then strip out
the bits you don't need (select, options', etc). Though this is not
as nice a way to do it.
On Oct 28, 9:25 am, Franky [EMAIL PROTECTED] wrote:
Please take a look on example code:
script type=text/javascript
jQuery(document).ready(function() {
jQuery(#imageShowcase img).hide();
jQuery(#productImgDefault).show();
jQuery(#colorSelector).change(function() {
// Hide all images on slect element change action
jQuery(#imageShowcase img).hide();
// Get the value of selected option
var optionValue = jQuery(this).attr('value');
// Just a test to see if you're getting option value
// alert(optionValue);
// Get the content (aka inner HTML) of selected option
var optionValueText = jQuery.trim(jQuery('#colorSelector dl
dd.last select :selected').text());
// Just a test to see if you're getting right selected option
inner text
// alert(optionValueText);
//alert('Selected option has value: ' + optionValue + ' and
inner text: ' + optionValueText);
// Show the image based on selected value
jQuery(#productImg + optionValueText).show();
});});
/script
div id=colorSelector
dl
dtlabelColor Groupspan class=requirednbsp;*/span/
label/dt
dd class=last
select name=options[8] id=select_8 class= required-entry
product-custom-option title=
option value=-Select-/option
option value=30Blue /option
option value=31Blue-Green /option
option value=32Green /option
option value=42Grey-Black /option
option value=29Pink-Purple /option
option value=28Red /option
option value=41White /option
option value=27Yellow-Brown /option
/select
/dd
/dl
/div
div id=imageShowcase style=text-align:left;
img id=productImgDefault src=color-hex.gif title=Blue image
alt=image missing /
img id=productImg-Select- src=color-hex.gif title=Blue
image alt=image missing /
img id=productImgBlue src=blue.gif title=Blue image alt=
style=display:none; /
img id=productImgBlue-Green src=blue-green.gif title=Blue-
Green image alt= style=display:none; /
img id=productImgGreen src=green.gif title=Yellow image
alt= style=display:none; /
img id=productImgGrey-Black src=grey-black.gif title=Yellow
image alt= style=display:none; /
img id=productImgPink-Purple src=pink-purple.gif
title=Yellow image alt= style=display:none; /
img id=productImgRed src=red.gif title=Yellow image alt=
style=display:none; /
img id=productImgWhite src=white.gif title=Yellow image
alt= style=display:none; /
img id=productImgYellow-Brown src=yellow-brown.gif
title=Yellow image alt= style=display:none; /
/div
This code changes image depending on the option selected in select.
I'm using very long code without ID used to get select option (aka
#colorSelector dl dd.last select) because code used on Magento and it
assigned for each select different ID and name.
My question is. It that possible to make code to change images in the
same way, but using link like:
a href=# onclick=???select option with Blue text/a
Thanks for help!
[jQuery] Re: my first plugin
Nice work, I would like to see the behaviour as follows: When one image is zoomed and you click on another there are 3 options: just close the first one (as it does now) OR close the first one and open the second one (better) OR open the second one as well.
[jQuery] Re: my first plugin
I should add, this is a great solution to another issue. I use highslide on a website but just loading when the combination is Win2K and IE6 causes a computer to reboot
[jQuery] parserError using load()
i am using the following code to load dynamic content into a div
(mainContentArea) on my webpage. I occasionally get a parserError when
loading the content into dom. but sometimes not.
what is causing the parserError and how can I fix this?
this is my jquery code:
$('#mainContentArea').load('content.cfm');
[jQuery] Re: Validate Plugin - Multiple Requirements? [validate]
For what it's worth, if you can think of a better (read: cleaner) way
to do what I'm currently doing, please let me know :)
On Oct 28, 11:26 am, Validatorian [EMAIL PROTECTED] wrote:
I'm doing something similar to this
example:http://docs.jquery.com/Plugins/Validation/Methods/required#dependency...
I have a date input field, and if you are under 13, it pops up another
field for parent's age.But unlike this example,I want the parent to be
required to be 18 or older.How would I set it up to require the input,
and require it to be over a certain age.
It 's also important to note that the inputs are dates, not ages, so I
can't just do min:18 because it 's more like Tue Aug 29 2023
11:18:38 GMT-0700 (Pacific Daylight Time)
If needed, here's what I am currently doing:
function checkAge(parent) {
var min_age = 13;
if (parent) {
var dateArray = parent.split('/');
min_age = 18;
} else {
var dateArray = $('#dateOfBirth').val().split('/');
}
var year = dateArray[2];
var month = dateArray[0] - 1;
var day = dateArray[1];
var theirDate = new Date();
theirDate.setFullYear((parseInt(year) + min_age), month, day);
console.log(theirDate);
var today = new Date();
console.log(today);
console.log(today - theirDate);
if (today theirDate) {
$('#parentsRequired').show();
return true;
} else {
$('#parentsRequired').hide();
return false;
}
}
dateOfBirth: {
required: function(element) {
var check = checkAge();
return true;
},
date: true},
parentsDateOfBirth: {
required: function(element) {
return checkAge($(element).val());
},
date: true
},
[jQuery] Re: Validate Plugin - Multiple Requirements? [validate]
Adding the parent-age-check is just another method. In this case, I'd
add a custom age-method
(http://docs.jquery.com/Plugins/Validation/Validator/addMethod), and
use that together with date and required.
Jörn
On Tue, Oct 28, 2008 at 11:49 PM, Validatorian [EMAIL PROTECTED] wrote:
For what it's worth, if you can think of a better (read: cleaner) way
to do what I'm currently doing, please let me know :)
On Oct 28, 11:26 am, Validatorian [EMAIL PROTECTED] wrote:
I'm doing something similar to this
example:http://docs.jquery.com/Plugins/Validation/Methods/required#dependency...
I have a date input field, and if you are under 13, it pops up another
field for parent's age.But unlike this example,I want the parent to be
required to be 18 or older.How would I set it up to require the input,
and require it to be over a certain age.
It 's also important to note that the inputs are dates, not ages, so I
can't just do min:18 because it 's more like Tue Aug 29 2023
11:18:38 GMT-0700 (Pacific Daylight Time)
If needed, here's what I am currently doing:
function checkAge(parent) {
var min_age = 13;
if (parent) {
var dateArray = parent.split('/');
min_age = 18;
} else {
var dateArray = $('#dateOfBirth').val().split('/');
}
var year = dateArray[2];
var month = dateArray[0] - 1;
var day = dateArray[1];
var theirDate = new Date();
theirDate.setFullYear((parseInt(year) + min_age), month, day);
console.log(theirDate);
var today = new Date();
console.log(today);
console.log(today - theirDate);
if (today theirDate) {
$('#parentsRequired').show();
return true;
} else {
$('#parentsRequired').hide();
return false;
}
}
dateOfBirth: {
required: function(element) {
var check = checkAge();
return true;
},
date: true},
parentsDateOfBirth: {
required: function(element) {
return checkAge($(element).val());
},
date: true
},
[jQuery] Re: [validate] Problem with validation on a form pulling in with Ajax
Does $(#attendee_editForm) match any elements? A testpage would help.
Jörn
On Tue, Oct 28, 2008 at 5:38 PM, ryanhavoc [EMAIL PROTECTED] wrote:
I have a script that generates a form. I'm pulling this form into a
dialog box on my main index page via Ajax and trying to attached the
Validate plugin to the form.
So I've got this:
$(a.attendee_add).click(function() {
//Get href from link
var addURL = $(this).attr(href);
//Ajax get from href link
$.get(addURL, function(data){
//Display content in dialog box
$(data).dialog({
height: auto,
width: auto,
resizable: false,
draggable: false,
position: center,
modal: true,
overlay: {
background: #33
},
close: function(ev, ui) {
$(this).dialog(destroy).remove(); }
});
//Attach validate plugin
$(#attendee_editForm).validate();
});
return false;
});
However it doesn't work.
If I don't pull the form in with ajax and instead just paste it into
my index page and add in $(#attendee_editForm).validate(); to the
document ready function it works so I know my form is marked up
properly.
Has anyone any idea how I can get this working?
Thanks
[jQuery] Re: Using taconite to append javascript and stylesheets
You don't need a plug-in to do that:
$('head')
.append('link href=css/geral.css rel=stylesheet /')
.append('script type=text/javascript src=calendar.js/
script')
On Oct 28, 2:29 pm, Bob Schellink [EMAIL PROTECTED] wrote:
Hi all,
I am using the Taconite (http://malsup.com/jquery/taconite/) plugin to
dynamically append external scripts (script) and stylesheets
(link) to the page head section. Inspired by the Taconite example
Demo1, I manage to get external scripts working, however stylesheets
only seems to work in Firefox, not IE.
Here is the Taconite markup I'm using:
taconite
!-- Works in FF and IE --
append select=head
script type=text/javascript src=calendar.js/
/append
!-- Works in FF but not IE --
append select=head
link rel=stylesheet type=text/javascript
href=calendar.css/
/append
/taconite
Is this scenario supported by Taconite or should I rather the eval
tag for appending stylesheets?
kind regards
bob
[jQuery] Re: SuperFish with supersubs problem
Great, it worked. Thanks a lot for your help... On 27 Paź, 23:09, Joel Birch [EMAIL PROTECTED] wrote: Hello, My suggestion is to try putting the Superfish CSS before the script tags rather than after them in the source code. Joel Birch.
[jQuery] How do I keep from focusing a readonly field?
Hi all,
I have a table that I will usually want to focus the first input box
in the first column in the last row. Something like this:
table
tbody
tr
...
/tr
tr
td
input -- selects this one
input type=hidden
/td
td
input
/td
/tr
/tbody
/table
And I use this to do that part:
$('tbodytr:last-childtd:first-
childinput').focus().select();
The problem is, in some cases, that input field is readonly, so I
don't want to select it. I want to select the input in the next TD.
If an input is readonly, the parent TD has the readonly class. I
tried the following, but they didn't work:
$('tbodytr:last-childtd:not(readonly):first-
childinput').focus().select();
$('tbodytr:last-childtd:not([EMAIL PROTECTED]):first-
childinput').focus().select();
$('tbodytr:last-child[EMAIL PROTECTED]):first-
childinput').focus().select();
$('tbodytr:last-childtd:not([EMAIL PROTECTED]readonly]):first-
childinput').focus().select();
I think the last one is close, but the parent TD could also have
another class.
Can anyone help?
[jQuery] Re: my first plugin
Hi Microbe, i'm glad that you like my work, today i just finished to develop the basic options about my script,and it works fine with all browsers tested,FF2/3, opera 9,ie6/7,safari(for pc), google chrome, and this is a great result for me. I want to add the next and prev btns, and a space for img description, but it will takes a while. I will complete the plugin in a few days. regards Diego Valobra On 28 Ott, 23:49, Microbe [EMAIL PROTECTED] wrote: I should add, this is a great solution to another issue. I use highslide on a website but just loading when the combination is Win2K and IE6 causes a computer to reboot
[jQuery] strange IE behavior with Superfish
I'm using Superfish for the top horizontal drop-downs on http://www.tapestrydirect.com/. It works great in Firefox, but in IE7 the width of the submenus expands an additional 20 pixels or so after initially appearing on hover. Anybody know why this is happening? Thanks
[jQuery] .append() variable content rather than text
I am fairly new to jquery and javascript, but giving it a fair try because I
am interested in learning it. The trouble I am having revolves around my
navigation links. I would like each one to show a specific div in a
container I have set up. The HTML loads with all of the divs visible, which
I then store each one with a project variable. So, the problem happens when
you click on a navMenu link... The div fades out as supposed to, but instead
of it being filled with a replacement div stored from earlier, it just loads
the string project2 or whichever one was clicked. Here is my code:
$(document).ready(function(){
var project1 = $(#project1).html();
var project2 = $(#project2).html();
var project3 = $(#project3).html();
var project4 = $(#project4).html();
var project5 = $(#project5).html();
var project6 = $(#project6).html();
var project7 = $(#project7).html();
$(#projects).find(.projectBody).not(:first).remove();
$(#navMenu ul li a).click(function () {
var projectId = $(this).attr(href);
var projectName = projectId.substr(1);
var projectDiv = 'div class=projectBody id='+ projectName
+'/div';
$(#projects).find(.projectBody).fadeOut(slow, function(){
$(#projects).find(.projectBody).remove();
$(#projects).append(projectDiv);
$(#projects).find(projectId).hide();
$(#projects).find(projectId).append(projectName);
$(#projects).find(projectId).fadeIn(slow);
});
});
});
--
View this message in context:
http://www.nabble.com/.append%28%29-variable-content-rather-than-text-tp20178692s27240p20178692.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Quick Syntax Error Check
IE hates it for good reason. Proper JSON (and Javascript object
declaration) has no trailing comma on the final line.
This is one thing IE does right that the other browsers are too giving
on.
On Oct 28, 5:57 pm, JCQ [EMAIL PROTECTED] wrote:
I agree with Tim, that is EXACTLY the problem. IE seems to hate any
trailing commas in that json-ish type of data structure, sometimes
it's called a syntax error, and once in a while I'll also get a
message like no object detected or somesuch. Anyway, kill that
trailing comma Tim mentioned and it will be fine.
On Oct 28, 5:48 pm, tpb976 [EMAIL PROTECTED] wrote:
The problem might be that there is a , after the line email:
Please enter a valid email address.
Try removing the comma and see what happens.
-Tim
On Oct 28, 1:10 pm, MauiMan2 [EMAIL PROTECTED] wrote:
IE7 is telling me the following script has a syntax error and I have
tried to find it but haven't located it . . . yet:
(function($){
$().ready(function() {
// validate the comment form when it is submitted
$(#commentForm).validate();
// validate signup form on keyup and submit
$(#signupForm).validate({
rules: {
email: {
required: true,
email: true
},
},
messages: {
email: Please enter a valid email
address,
}
});
});
})(jQuery);
I'm going to keep looking but maybe somebody else will be able to find
it before me. Firefox doesn't seem to have a problem with it.
[jQuery] Re: How do I keep from focusing a readonly field?
$('tbodytr:last-childtd:not(.readonly):first-
childinput').focus().select();
On Oct 28, 7:07 pm, TimW66 [EMAIL PROTECTED] wrote:
Hi all,
I have a table that I will usually want to focus the first input box
in the first column in the last row. Something like this:
table
tbody
tr
...
/tr
tr
td
input -- selects this one
input type=hidden
/td
td
input
/td
/tr
/tbody
/table
And I use this to do that part:
$('tbodytr:last-childtd:first-
childinput').focus().select();
The problem is, in some cases, that input field is readonly, so I
don't want to select it. I want to select the input in the next TD.
If an input is readonly, the parent TD has the readonly class. I
tried the following, but they didn't work:
$('tbodytr:last-childtd:not(readonly):first-
childinput').focus().select();
$('tbodytr:last-childtd:not([EMAIL PROTECTED]):first-
childinput').focus().select();
$('tbodytr:last-child[EMAIL PROTECTED]):first-
childinput').focus().select();
$('tbodytr:last-childtd:not([EMAIL PROTECTED]readonly]):first-
childinput').focus().select();
I think the last one is close, but the parent TD could also have
another class.
Can anyone help?
[jQuery] Re: Using taconite to append javascript and stylesheets
Is this scenario supported by Taconite or should I rather the eval tag for appending stylesheets? Use the eval tag.
[jQuery] Re: jQuery Form Plugin using keyUp() or change() instead of submit
You can bind those events and call ajaxSubmit when appropriate. ajaxForm waits on the submit event. Mike On Oct 27, 6:24 pm, brian mahoney [EMAIL PROTECTED] wrote: Is there a way to get the jQuery Form Plugin to work with a keyUp() or change() instead of having to use a submit button?
[jQuery] Re: blockUi and Jquery animate function problem (IE7 of course)
Recently i decide to use the animate function of jQuery to pop up an absolute position it window that holds form data. The problem is that when i use the animate function to pop up the window the blockUi in Internet explorer 7 cannot handle oppacity and cannot display the loader. Just white background. When the Ajax request finished the white background removed and the form appears normally. Could you possibly post a link that shows this problem in action?
[jQuery] Re: Validate Plugin - Multiple Requirements? [validate]
Maybe I misunderstood you, but it seems like you're referring to age-
method as if it already exists? Or are you saying to use math and
do it that way?
On Oct 28, 4:00 pm, Jörn Zaefferer [EMAIL PROTECTED]
wrote:
Adding the parent-age-check is just another method. In this case, I'd
add a custom age-method
(http://docs.jquery.com/Plugins/Validation/Validator/addMethod), and
use that together with date and required.
Jörn
On Tue, Oct 28, 2008 at 11:49 PM, Validatorian [EMAIL PROTECTED] wrote:
For what it's worth, if you can think of a better (read: cleaner) way
to do what I'm currently doing, please let me know :)
On Oct 28, 11:26 am, Validatorian [EMAIL PROTECTED] wrote:
I'm doing something similar to this
example:http://docs.jquery.com/Plugins/Validation/Methods/required#dependency...
I have a date input field, and if you are under 13, it pops up another
field for parent's age.But unlike this example,I want the parent to be
required to be 18 or older.How would I set it up to require the input,
and require it to be over a certain age.
It 's also important to note that the inputs are dates, not ages, so I
can't just do min:18 because it 's more like Tue Aug 29 2023
11:18:38 GMT-0700 (Pacific Daylight Time)
If needed, here's what I am currently doing:
function checkAge(parent) {
var min_age = 13;
if (parent) {
var dateArray = parent.split('/');
min_age = 18;
} else {
var dateArray = $('#dateOfBirth').val().split('/');
}
var year = dateArray[2];
var month = dateArray[0] - 1;
var day = dateArray[1];
var theirDate = new Date();
theirDate.setFullYear((parseInt(year) + min_age), month, day);
console.log(theirDate);
var today = new Date();
console.log(today);
console.log(today - theirDate);
if (today theirDate) {
$('#parentsRequired').show();
return true;
} else {
$('#parentsRequired').hide();
return false;
}
}
dateOfBirth: {
required: function(element) {
var check = checkAge();
return true;
},
date: true},
parentsDateOfBirth: {
required: function(element) {
return checkAge($(element).val());
},
date: true
},
[jQuery] Re: How do I keep from focusing a readonly field?
Thank you! Of course, it makes sense. I guess I was caught up on the
readonly attribute of the input box, not thinking about it as a class
for the TD. One minor problem, I had to use :first instead of
:first-child (didn't focus anything). But it works!
On Oct 28, 6:26 pm, Ryura [EMAIL PROTECTED] wrote:
$('tbodytr:last-childtd:not(.readonly):first-
childinput').focus().select();
On Oct 28, 7:07 pm, TimW66 [EMAIL PROTECTED] wrote:
Hi all,
I have a table that I will usually want to focus the first input box
in the first column in the last row. Something like this:
table
tbody
tr
...
/tr
tr
td
input -- selects this one
input type=hidden
/td
td
input
/td
/tr
/tbody
/table
And I use this to do that part:
$('tbodytr:last-childtd:first-
childinput').focus().select();
The problem is, in some cases, that input field is readonly, so I
don't want to select it. I want to select the input in the next TD.
If an input is readonly, the parent TD has the readonly class. I
tried the following, but they didn't work:
$('tbodytr:last-childtd:not(readonly):first-
childinput').focus().select();
$('tbodytr:last-childtd:not([EMAIL PROTECTED]):first-
childinput').focus().select();
$('tbodytr:last-child[EMAIL PROTECTED]):first-
childinput').focus().select();
$('tbodytr:last-childtd:not([EMAIL PROTECTED]readonly]):first-
childinput').focus().select();
I think the last one is close, but the parent TD could also have
another class.
Can anyone help?
[jQuery] Re: Drag and Drop Question
Please ask on the jQuery UI list:
http://groups.google.com/group/jquery-ui/
- Richard
On Tue, Oct 28, 2008 at 11:28 AM, Mazureth [EMAIL PROTECTED] wrote:
im trying to write a cork board type app for a site and im having a
little trouble with the drag and drop. basically there are 2 divs
(#picker, #board) that load on the page. the #picker div contains
various images that the user can drag and drop onto the #board div.
once an image has been dropped into the #board div i want to change it
to a draggable element so the user can arrange all the image how they
please.
i can get all of that to work. however, using firebug to see whats
happening, once i drop the image into the #board and then start to
drag it around, i notice that the top and left properties of the img
element listed above it in the div are also being affected. this
shouldnt be happening.
i also wrote some extra code to bring the image being dragged to the
'front' by setting its z-index+1 to the current highest z-index. this
works fine when i havent dropped any new images onto the #board yet.
all the images already in the #board become the top image. but the
newly dropped images dont come to the front.
here is the code right now:
$(document).ready(function() {
$(.dragImage).draggable({
containment: 'parent',
cursor: 'move'
});
$(.dropImage).draggable({helper: clone});
$(.vizualize_container).droppable({
accept: .dropImage,
activeClass: droppable-active,
hoverClass: droppable-hover,
drop: function(e, ui) {
$(ui.draggable).attr({class: dragImage
ui-draggable});
$(ui.draggable).draggable({
containment: 'parent',
cursor: 'move'
});
$(this).append($(ui.draggable));
}
});
});
var zmax = 0;
$('.dragImage').click(function() {
$(this).siblings('.dragImage').each(function() {
var cur = $(this).css('zIndex');
zmax = cur zmax ? $(this).css('zIndex') : zmax;
});
$(this).css('zIndex', (zmax*1)+1);
});
and here is a link to see it in action:
http://www.tut.com/visualizer
[jQuery] Galleria Thumbnails not generating in Firefox
Can anyone please explain why in FF the thumbnails are displaying as full images and the main image is not displaying at all. Works fine in opera and safari. Link: http://cmphotographer.com.au/category/wedding/
[jQuery] Internal Links Broken
Hi everyone, I'm having a very strange problem and I'm hoping someone can help me. On our website, we have a page that lists events. On that page, there are links to scroll down and view the details of each event. The problem is: When you click the internal link, all content above the anchor is cut off! I've disabled the links to the public for now, but I'll give you guys the link for example sake: http://www.mesa.ca/events#1 http://www.mesa.ca/events#2 http://www.mesa.ca/events#3 http://www.mesa.ca/events#6 http://www.mesa.ca/events#4 http://www.mesa.ca/events#13 Internal links work on other pages. For example, internal links work here: http://www.mesa.ca/associates Any ideas? Thank you!
[jQuery] Re: Event.target is Parent Child in IE but in Firefox it is child Element
Yes I am facing this on real project But should not JQuery handle this issue as JQuery is meant for crossbrowser? CSJakharia
