[jQuery] Re: Selection logic

[Mr Speaker]

BTW, just to be clear: there shouldn't EVER be a reason ever to do: $($
(el).parents('div').get(0)).addClass('blah')

You'd just be getting all the parent divs, asking for their actual DOM
references (for no reason) then re-wrapping them into jQuery objects
before adding classes to them!

On Nov 11, 1:12 am, Savageman  wrote:
> Maybe $($(el).parents('div').get(0)).addClass() ? :d (ahah, what ugly
> syntax :d)
>
> Anyway thanks, topic solved! ;)
>
> On 10 nov, 15:04, Michel Belleville 
> wrote:
>
> > 2009/11/10 Savageman 
>
> > > About .get(0), Firebug keeps telling me: "$(el).parents("div").get
> > > (0).addClass is not a function"
>
> > Sorry, I tested with .eq(0) instead of .get(0) which returns the pure DOM
> > element instead of a jQuery magic-array wrapping the element.
>
> > > I still find strange (that eventually gonna change :D) to add the
> > > possibility to match a specified selector in the .parent() method if
> > > it only applies to the direct parent... I don't really need all the
> > > parents here, so it may be more efficient having a method that stops
> > > looping through parents when the one we want is found. I guess I still
> > > can use .parent().parent().parent() as I know the  should be the
> > > third parent, but that would require change in the javacscript if i
> > > want to change the HTML structure...
>
> > If you don't need all the parents, use .parents('div:first') or
> > .parents('div').eq(0) as you've found out it's the jQuery way.
>
> > I may even be so bold as to add you might like to try
> > .closest()which is quite
> > handy to find "the closest matching element this included".
>
> > Have fun.
>
> > Michel Belleville
>
>

[jQuery] Re: jquery and json triggers no event.

[Mr Speaker]

The "a.delete" click handler only attaches to _current_ elements on
the page. If you want to bind to future elements (that you build
dynamically) you can use the .live method:

$("a.delete").live( "click", function(){ alert( "test" ); } );

(Also, another solution is to take advantage of event delegation by
only attaching a click handler to the parent object, then figuring out
which child was clicked.


On Nov 11, 5:22 am, "s.soch"  wrote:
> Hi,
>
> I'm attempting to build a list of items that are to be clickable to
> delete.
>
> - I am able to visually build the list and it is added to a div I
> want.
>
> My a.delete click event is never triggered when I click on a json
> built hyperlink.
> If I manually add the html  like test then the
> event is triggered (which tells me it shouldn't be a javascript
> error...).
>
> What am I missing?
> Tia, S.
>
> My jquery functions look like:
>
> $().ready(function() {
>     $('#members').click(function(){
>         $.getJSON("check_group_membership.php", {members:$("#members").val
> (), groups:$("#groups").val() } , function(json){
>                 var output = "";
>                 for (var i = 0; i < json.length; i++) {
>                         //alert( json[i].name );
>                         output+= "" + json[i].name + 
> "";
>                 }
>                 $("#assignedGroups").append( output );
>         });
>     });
>
> $("a.delete").click(function() {
>    alert("test");
>
> });
>
>

[jQuery] Re: event.currentTarget with table rows and IE7

[Mr Speaker]

Woah, I just noticed (2 minutes after my reply) this post:
http://brandonaaron.net/blog/2009/05/12/jquery-edge-bind-with-a-different-this

That says in 1.3.3 that currentTarget will be normalised cross-browser
too.


On Sep 19, 7:00 am, Philipp  wrote:
> Hi,
>
> I got a problem using the following code:
>
> $j = jQuery.noConflict();
> $j(document).ready(function(){
>         $j('tr').mouseover(function(event) {
>                 if (!event.currentTarget) {
>                         alert('current target not given!');
>                         return false;
>                 }
>                 alert(event.currentTarget.id);
>         });
>
> });
>
> When hovering a table data (td) element in Firefox everything works
> fine: The id value of the row is displayed. In IE7 my error message is
> displayed.
>
> I would appreciate any ideas which would solve this problem.
> Kind regards
>  Philipp

[jQuery] Re: event.currentTarget with table rows and IE7

[Mr Speaker]

The event you get from jQuery handlers is normalised. CurrentTarget is
just "this" in the function.

mouseover(event){
alert(this.id);
}

On Sep 19, 7:00 am, Philipp  wrote:
> Hi,
>
> I got a problem using the following code:
>
> $j = jQuery.noConflict();
> $j(document).ready(function(){
>         $j('tr').mouseover(function(event) {
>                 if (!event.currentTarget) {
>                         alert('current target not given!');
>                         return false;
>                 }
>                 alert(event.currentTarget.id);
>         });
>
> });
>
> When hovering a table data (td) element in Firefox everything works
> fine: The id value of the row is displayed. In IE7 my error message is
> displayed.
>
> I would appreciate any ideas which would solve this problem.
> Kind regards
>  Philipp

[jQuery] Re: Help with error script

[Mr Speaker]

I think the problem is that you only ever remove a node when there is
no errors. Why don't you just remove ALL error messages each call - so
you'll only ever be showing the most recent error:

function(error){
   $('.error-message').remove(); //remove ALL previous error messages
   if(error.length > 0){
  // Add error message
   }
}

On Sep 16, 1:59 am, "Dave Maharaj :: WidePixels.com"
 wrote:
> I have an ajax function that checks fields to validate and display error
> messages.
>
> There are multiple messages depending on the error per field in some cases,
> to short, to long, already taken, invalid, cant be empty and so onyou
> get the idea.
>
> My function is like this:
>
> function(error) {
>
>                    if(error.length != 0) {  
>
>                        if ( $('#' + fieldName + '-exists').length == 0 )
>         {
>           $('#' + fieldName).after('' + error + '');
>         }
>
>                    }
>                    else {
>                        $('#' + fieldName + '-exists').remove();
>                    }
>                });
>
> But the error never changes once 1 is called so if to short it says too
> shortfix the problem and it only shows too short never any other
> message. How can i remove the message if its fixed but still return
> anothererror if it exists?
>
> I tried if ( $('#' + fieldName + '-exists').length != error )
> so if the error is different display the error but it doesnot remove the
> original error
>
> Ideas?
>
> Thanks
>
> Dave

[jQuery] Re: A simple .each() function question

[Mr Speaker]

Yep, jquery functions apply themselves to all the elements you
selected. You only need to use each command if you need to do your own
custom handling... Lik um,

$("li").each(function(idx){
   $(this).css('background-color', '#' + idx + idx + idx);
});

Ok, bad example (this sets the background color to a gray scale value
relevant to the item's index) ... but you'll often need to do custom
stuff that there isn't a jQUery command for (hence the fifty zillion
plugins available: nearly all of which use "each" to process each
node).

Also, the built in commands use "each" internally: for example, here
is a (slightly edited for clarity) snippet from the jquery core:
jQuery.fn[ "toggleClass" ] = function(){
return this.each( function(){ ...function to toggle class... },
arguments );
};

On Sep 16, 2:30 am, Timid  wrote:
> I'm a noob trying to get a better understanding of Jquery and have a
> simple question about the each() function.
>
>    $("li").click(function () {
>       $("li").each(function(){
>         $(this).toggleClass("example");
>       });
>     });
>
>    $("li").click(function () {
>       $("li").toggleClass("example");
>       });
>
> What is the added value of using each() in the top example when the
> bottom example does the job just fine. Why would you want to use each?

[jQuery] Re: Get the onclick method of an element

[Mr Speaker]

I think you need to set the context for the function to that of the
link using the JavaScript call function... like:

function DoSomething( ctx ){
alert( ctx.text );
}

var linky = $('a');
var onclick = $('a').attr('onclick');
onclick.call(linky[0]); // Alerts 'asd'


BTW: the linky[0] gets the actual DOM object, rather than the jQUery
wrapper.


On Sep 16, 3:15 am, sirrocco _  wrote:
> Damn ... I somehow thought this would be easy to achive .
>
> The whole idea was to not change existing code 
>
> Still .. if anyone has any more ideas :). Somehow it seems that this should
> be doable.
>
> On Tue, Sep 15, 2009 at 6:03 PM, MiKiTiE  wrote:
>
> > Ok, I've done some tests and here is my suggestion.
>
> > First of all, should just ask - I assume you are calling it after the
> > element? Probably is obvious, but thought I'd check.
>
> > Ok, here's the deal: "onclick" is not really an attribute but a mouse
> > event. Therefore jQuery will take the contents as a function and write
> > it out as an event. The only alternative is to insert your "DoSomething
> > (this);" into a standard attribute like "title" or "alt" and then take
> > it from there. This way you should be able to insert it exactly as its
> > written and not have it converted into an event.
>
> > Hope this will help?
>
> > On Sep 15, 2:31 pm, sirrocco  wrote:
> > > >Perhaps then you can extract it as text like I mentioned in my first
>
> > > post, then store it in a variable?
>
> > > How do I extract it like text ? Calling the .text() method, as
> > > expected doesn't return what I need - DoSomething(this);
>
> > > On Sep 15, 3:30 pm,MiKiTiE wrote:
>
> > > > Perhaps then you can extract it as text like I mentioned in my first
> > > > post, then store it in a variable?
>
> > > > As I am not sure what your function does or why it needs to be applied
> > > > this way, I can't solve the problem exactly - but why not just use an
> > > > event instead of an onclick in the element? That is what jQuery is
> > > > there for :-)
>
> > > > On Sep 15, 9:50 am, sirrocco  wrote:
>
> > > > > Well .. that's the problem - i tried it like that and it didn't work.
>
> > > > > When setting the attribute back on the link, the this in DoSomething
> > > > > (this); is not the link, but the window.
>
> > > > > On Sep 15, 11:41 am,MiKiTiE wrote:
>
> > > > > > Sorry I should have written
>
> > > > > > $('a').attr('onclick',onclick);
>
> > > > > > (setting the attribute value not the inner text!)
>
> > > > > > On Sep 15, 9:09 am, sirrocco  wrote:
>
> > > > > > > Let's say you have a :
>
> > > > > > > asd
>
> > > > > > > I want to get the onclick text in a variable - something like
>
> > > > > > > var onclick = $('a').attr('onclick');
>
> > > > > > > The problem is that the onclick variable now is a function and if
> > I
> > > > > > > try to execute , this   wil be the document instead of the link .
>
> > > > > > > How can I get only the text, so I can later reattach it to the
> > link ?
>
>

[jQuery] Re: Problem with .live() events in a widget in FF3

[Mr Speaker]

Is it just because alert() is not allowed in FF? (needs to be alert(1)
or some-such). The code looks fine to me otherwise.

On Sep 15, 5:38 am, ChrisP  wrote:
> I am creating a simple jQuery widget and have the following two lines
> in the _init() method.
>
>     this.element.find("li.thumb img").css("cursor", "pointer");
>     this.element.find("li.thumb img").live("click", function() { alert
> (); });
>
> The addition of the style property in the first line works in both IE7
> and FF3. However, the binding of the event in the second line only
> works in IE7, not in FF3.
>
> Elements are dynamically added to the widget so I need to use the .live
> () method.
>
> Any thoughts on why this may be occurring?
>
> Thanks

[jQuery] Re: Simple/short way to bind one event to multiple objects?

[Mr Speaker]

you can select multiple objects in the selector, like: $
("#obj1,#obj2,#obj3").change(...)


On Sep 15, 7:42 am, cgp  wrote:
> I have 2 or more objects that onclick(), will call the same function.
> Right now I have the following:
>
> 
> $("#obj1").change( function() {
>         setupPage();});
>
> $("#obj2").change( function() {
>         setupPage();});
>
> $("#obj3").change( function() {
>         setupPage();});
>
> 
>
> I was wondering if there is a way to simplify or clean up the code,
> since they are all doing the same thing and responding to the same
> event. This is just for refactoring reasons because my code is getting
> too long/messy.
>
> Thanks.

[jQuery] Re: event coordination problem

[Mr Speaker]

Ahh. The problem is that there is NO relation between the two fields:
they're just DOM elements like divs, paragraphs, and iframes. The blur
event of some textbox is _totally_ unrelated to a click event of some
other button.  If you want to enforce some rules between the two
you'll have to code it yourself - the usual way is to check each
individual field on "blur" and when you click the button, re-check all
validation rules.

There are also heaps of validation plugins in the jQuery plugin
repository you might like to look at to simplify validation handling.

On Sep 14, 12:28 pm, "Rick Faircloth" 
wrote:
> > if you put the focus in the textbox (#id1) then click the button (#id2)
> both
> > events get fired
>
> Jim...
>
> Preventing this occurrence is what I was talking about.  What I do is keep
> the
> submit button disabled until all required fields have been validated on
> blur.
> That way you can't have a field that hasn't been validated and have the
> submit
> button fire, too.  The user has to blur out of the field to achieve
> validation
> and enabling of the submit button.
>
> Am I misunderstanding?
>
> Rick
>
> -Original Message-
> From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
>
> Behalf Of Mr Speaker
> Sent: Sunday, September 13, 2009 10:07 PM
> To: jQuery (English)
> Subject: [jQuery] Re: event coordination problem
>
> I pasted your code into a new HTML doc and it ran as expected: if you
> put the focus in the textbox (#id1) then click the button (#id2) both
> events get fired (blur event fires first, click event fires second).
>
> Is there anything else in your page? Are you getting any JS errors?
>
> On Sep 13, 4:27 am, jhm  wrote:
> > Not sure how this helps, and in fact I'm pretty much already doing
> > that. The problem is that if the focus is in the field, when the
> > button is clicked I get the blur event only and not the click event on
> > the button.
>
> > If you try the code in the OP, you'll see this happening. Remember to
> > click into the text box before clicking on the button.
>
> > I need the click event for sure. I could live without the blur event
> > in this situation, but I'd also like to understand the dynamics of
> > what is happening for the future.
>
> > Jim
>
> > On Sep 12, 10:39 am, "Rick Faircloth" 
> > wrote:
>
> > > How about setting the field to "invalid" to start with and
> > > force the user to blur the field for a validation routine
> > > to declare it valid.
>
> > > Rick
>
> > > -Original Message-
> > > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
>
> > > Behalf Of jhm
> > > Sent: Saturday, September 12, 2009 1:04 PM
> > > To: jQuery (English)
> > > Subject: [jQuery] event coordination problem
>
> > > Hi-
>
> > > In a form, I'm trying to validate a field when they move off it. But
> > > this causes a problem when the field has the focus and they click a
> > > button to process the form. In this case, only the field's blur event
> > > (or change event) gets fired and nothing for the button click event.
>
> > > Seems like a reasonable thing to want to do, so I figure I'm missing
> > > something in they way I've coded this. Any suggestions?
>
> > >  Here's the very simple code that exhibits the behavior:
>
> > > 
> > >     
> > >     
>
> > >         $(document).ready( function() {
> > >                 $('#id1').blur( function() {
> > >                         alert('blur in id1');
> > >                 });
>
> > >                 $('#id2').click( function() {
> > >                         alert('click in id2');
> > >                 });
> > >         });
> > >         
> > > 
>
> > > 
> > > 
> > >         
> > >         
> > > 
>
>

[jQuery] Re: event coordination problem

[Mr Speaker]

I pasted your code into a new HTML doc and it ran as expected: if you
put the focus in the textbox (#id1) then click the button (#id2) both
events get fired (blur event fires first, click event fires second).

Is there anything else in your page? Are you getting any JS errors?

On Sep 13, 4:27 am, jhm  wrote:
> Not sure how this helps, and in fact I'm pretty much already doing
> that. The problem is that if the focus is in the field, when the
> button is clicked I get the blur event only and not the click event on
> the button.
>
> If you try the code in the OP, you'll see this happening. Remember to
> click into the text box before clicking on the button.
>
> I need the click event for sure. I could live without the blur event
> in this situation, but I'd also like to understand the dynamics of
> what is happening for the future.
>
> Jim
>
> On Sep 12, 10:39 am, "Rick Faircloth" 
> wrote:
>
> > How about setting the field to "invalid" to start with and
> > force the user to blur the field for a validation routine
> > to declare it valid.
>
> > Rick
>
> > -Original Message-
> > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
>
> > Behalf Of jhm
> > Sent: Saturday, September 12, 2009 1:04 PM
> > To: jQuery (English)
> > Subject: [jQuery] event coordination problem
>
> > Hi-
>
> > In a form, I'm trying to validate a field when they move off it. But
> > this causes a problem when the field has the focus and they click a
> > button to process the form. In this case, only the field's blur event
> > (or change event) gets fired and nothing for the button click event.
>
> > Seems like a reasonable thing to want to do, so I figure I'm missing
> > something in they way I've coded this. Any suggestions?
>
> >  Here's the very simple code that exhibits the behavior:
>
> > 
> >     
> >     
>
> >         $(document).ready( function() {
> >                 $('#id1').blur( function() {
> >                         alert('blur in id1');
> >                 });
>
> >                 $('#id2').click( function() {
> >                         alert('click in id2');
> >                 });
> >         });
> >         
> > 
>
> > 
> > 
> >         
> >         
> > 
>
>

[jQuery] Re: Hover Not Working As Expected

[Mr Speaker]

Your code is fine - I think it has to do with the float cascading to
the menu items. If you add in float:none to the children li elements
it should work:
#NavList li ul li {
...
float:none;
}


On Sep 11, 10:27 pm, GLSmyth  wrote:
> I am missing something fundamental and am sure that someone can point
> me in the right direction.
>
> I have a list like so:
>
>     DD
>       
>         Santuary
>         Stream
>         Winter
>       
>     
>
> I have styled it so that the list items float.  The class DoNotDisplay
> hides the unordered list.  When the mouse hovers over GalleryMenu then
> jQuery removes the DoNotDisplay class so that the unordered list is
> displayed, moving off GalleryMenu hides the list.  This works fine and
> the code is:
>
> $(document).ready(
>   function() {
>     $('li#GalleryMenu').add('li#PoemMenu').hover(
>       function() {
>         $(this).children('ul').removeClass('DoNotDisplay');
>       },
>       function() {
>         $(this).children('ul').addClass('DoNotDisplay');
>       }
>     );
>   }
> );
>
> I would like the unordered list to slide open, so I changed the code
> to:
>
> $(document).ready(
>   function() {
>     $('li#GalleryMenu').add('li#PoemMenu').hover(
>       function() {
>         $(this).children('ul').show('fast');
>         console.log('Open list');
>       },
>       function() {
>         $(this).children('ul').hide('fast');
>         console.log('Close list');
>       }
>     );
>   }
> );
>
> The list opens properly, but does not close when I move the mouse from
> the list.  When looking at this in Firebug I see that 'hide' is
> firing, but for some reason does not close the list.  If I "unfloat"
> the list then the code works just fine.
>
> What am I missing?  I'm sure that it is staring me in the face, but I
> am just not seeing it.  The full code can be found 
> athttp://glsmyth.com/Sedwick/Templates/
>
> Thanks for the help.
>
> Cheers -
>
> george

[jQuery] Re: is this possible with jquery

[Mr Speaker]

That website you linked to doesn't use Ajax, so it loads all the wines
in in one go. If there wasn't many items then this would be the best
way to go. Otherwise, you'll have to take the db hit: which wouldn't
be too bad if you've got it caching stuff properly...

But if you load them all at once it would be easy to do this with
jQuery using the event handlers provided by the jquery UI slider.

$('.selector').slider({
   slide: function(event, ui) {
  // In here check the value of the sliders and fade the wines
accordingly...
   }
});



On Sep 10, 6:12 pm, "TenthWeb.com"  wrote:
> I am impressed with the flash stuff here and want to do this with
> jquery.http://www.nepenthe.com.au/go/online-shop
>
> I found a slider here:http://jqueryui.com/demos/slider/#range
>
> But the main thing is how to do the effect on sliding slider and
> ticking checkboxes. One thing would be getting slider and check values
> and pass to database and get everytime anything changes. That will be
> slow and would hurt database with continuous hit.
>
> Another option would be like in that site grab all wines and change
> the opacity as the user changes option. Does anyone has idea that will
> help to me to experience this in jquery.
>
> Thanks in advance.
> codefight

[jQuery] Re: Problems with blur/focus when validating a field

[Mr Speaker]

I think they don't let you hold focus for a reason... I've tried it on
a couple of my forms and it's annoying! I wanna leave it blank and
come back to it damn it! ;)

On Sep 10, 2:27 pm, Mr Speaker  wrote:
> It's like tabbing to the next field is NOT the default action - but
> something more intrinsic/unrelated. So even if you cancel the default
> action, it doesn't stop the tab? weird.
>
> I was also thinking that it would be a good idea to plugin-erise this
> functionality, so if there's a better way to do it then you could just
> update the plugin! Like:
>
> $.fn.require = function(){
>         return this.each( function(){
>                 $( this ).blur( function(){
>                         if( ! $( this ).val().match(/\S/) ){
>                                 alert( 'invalid' );
>                                 var _this = this;
>                                 setTimeout( function(){
>                                         $( _this ).focus()
>                                 }, 0 );
>                         }
>                 })
>         });
>
> };
>
> Then just call it like $('input.required').require(); and any inputs
> with the required class would have the validator.
>
> On Sep 10, 2:02 pm, jhm  wrote:
>
> > Thanks! I knew about the validate stuff, it was kind of a quick and
> > dirty example. But I appreciate your bringing it all to my attention.
>
> > The  jQuery docs for blus() say "the default action can be prevented
> > by returning false". Maybe it should be corrected.
>
> > Your suggestion of using setTimeout produces the desired results. Like
> > you said, not too pretty but effective.
>
> > Thanks!
>
> > On Sep 9, 7:40 pm, Mr Speaker  wrote:
>
> > > I think the problem is that according to the W3C standards, the blur
> > > event is not cancelable: They don't seem to want the programmer to be
> > > able to mess with a blur...
>
> > > But also, your validation code is a bit buggy anyway: the "ret"
> > > variable is undefined and the regex you use will only catch the cases
> > > where someone pastes in a tab or carriage return value - not if it's
> > > an empty field.
>
> > > Also also, I think if you call focus inside blur they sort of "fight"
> > > for control of the cursor! It seems to work if you put a slight delay
> > > on the event, like:
>
> > > function validateFld( fld ){
> > >         return fld.match(/\S/);
>
> > > }
>
> > > $( '#fld' ).blur( function(){
> > >         if ( !validateFld( $( this ).val() ) ){
> > >                 alert( 'invalid' );
> > >                 setTimeout( function(){
> > >                         $( '#fld' ).focus()
> > >                 }, 0 );
> > >         }
>
> > > });
>
> > > Not particularly attractive, but it works... I'm not sure if there's a
> > > nicer way to do it.
>
> > > On Sep 10, 9:49 am, jhm  wrote:
>
> > > > I'm having trouble setting the input focus when validating fields in a
> > > > form. I have a very simple case below, that validates a field for
> > > > white space. If it has white space, it triggers an alert and I'd like
> > > > the focus to stay in that field. However, when tabbing, it moves to
> > > > the next field regardless.
>
> > > > I'm using the blur event to validate the field. I'm returning false
> > > > when it has white space. I've even tried forcing the issue by setting
> > > > the focus to the field, and that doesn't work either.
>
> > > > I must be misunderstanding something. Anyone able to set me straight?
>
> > > > TIA
>
> > > >  code section  
>
> > > > 
>
> > > > 
> > > > 
>
> > > > $(document).ready( function() {
>
> > > >   function validateFld( fld )
> > > >   {
> > > >         var checkWhite = new RegExp(/[\r\n\t ]/);
>
> > > >         return( !checkWhite.test(fld) );
> > > >   }
>
> > > >   $('#fld').blur( function() {
>
> > > >     if ( !validateFld($(this).val()) )
> > > >     {
> > > >       alert('invalid field');
> > > >       ret = false;
> > > >       // $(this).focus();
> > > >     }
>
> > > >     return( ret );
> > > >   });
>
> > > > });
>
> > > > 
>
> > > > 
>
> > > > 
> > > >     
>
> > > >       Field Test
> > > >       
> > > >       
>
> > > >     
> > > > 
> > > > 
>
> > > >  code section  
>
>

[jQuery] Re: HTML code inside script tag, how access to it with DOM???

[Mr Speaker]

Hey! No arguing with John Resig around here ;)

But the script tag thing is a templating solution - so the advantage
is obvious: having to maintain a 10kb+ HTML fragment encoded as a
JavaScript variable (or even comprised of jQuery statements) is not
fun.

I'm not a fan of the script type="text/html" method myself, and if i
have to do client-side templates I prefer to have it as a hidden
element or in a hidden textarea. But these get read by screen readers
and Google, unlike the script tag method.

I'm not sure why the poster needs to access that DIV via a script tag,
but as its type is FBML - I'm guessing they got stuck implementing
some dodgy Facebook app... ergh. So, best of luck to him/her!


On Sep 10, 1:59 pm, RobG  wrote:
> On Sep 10, 9:49 am, Mr Speaker  wrote:
>
> > I think it's perfectly valid to have a div inside a script tag (or at
>
> It is never valid markup in an HTML document, a div element can't be a
> child of a script element.
>
> > least useful), if a div makes sense to the TYPE you defined for the
> > script.
>
> If you want to discuss HTML markup, then an HTML group would be a much
> better place to do that:
>
> http://groups.google.com/group/comp.infosystems.www.authoring.html/br...
>
>
>
> The content of a script element is not considered markup, it is
> script.
>
> > For example, John Resig uses a script tag with type "text/
> > html" in his micro-templating 
> > solution:http://ejohn.org/blog/javascript-micro-templating/
>
> I think that is a very bad idea for a web page. What advantage does
> that approach have to assigning the string to a variable and using a
> script language that the browser understands?
>
> He demonstrates that a script element can contain random text, and
> sets a trap for any browser that dares to be standards compliant and
> end the script element at the first occurrence of 
> > In this instance though (and in reply to the original author) you add
> > an ID to the SCRIPT tag,
>
> While browsers tolerate that, it is invalid markup.
>
> --
> Rob

[jQuery] Re: Problems with blur/focus when validating a field

[Mr Speaker]

It's like tabbing to the next field is NOT the default action - but
something more intrinsic/unrelated. So even if you cancel the default
action, it doesn't stop the tab? weird.

I was also thinking that it would be a good idea to plugin-erise this
functionality, so if there's a better way to do it then you could just
update the plugin! Like:

$.fn.require = function(){
return this.each( function(){
$( this ).blur( function(){
if( ! $( this ).val().match(/\S/) ){
alert( 'invalid' );
var _this = this;
setTimeout( function(){
$( _this ).focus()
}, 0 );
}
})
});
};

Then just call it like $('input.required').require(); and any inputs
with the required class would have the validator.


On Sep 10, 2:02 pm, jhm  wrote:
> Thanks! I knew about the validate stuff, it was kind of a quick and
> dirty example. But I appreciate your bringing it all to my attention.
>
> The  jQuery docs for blus() say "the default action can be prevented
> by returning false". Maybe it should be corrected.
>
> Your suggestion of using setTimeout produces the desired results. Like
> you said, not too pretty but effective.
>
> Thanks!
>
> On Sep 9, 7:40 pm, Mr Speaker  wrote:
>
> > I think the problem is that according to the W3C standards, the blur
> > event is not cancelable: They don't seem to want the programmer to be
> > able to mess with a blur...
>
> > But also, your validation code is a bit buggy anyway: the "ret"
> > variable is undefined and the regex you use will only catch the cases
> > where someone pastes in a tab or carriage return value - not if it's
> > an empty field.
>
> > Also also, I think if you call focus inside blur they sort of "fight"
> > for control of the cursor! It seems to work if you put a slight delay
> > on the event, like:
>
> > function validateFld( fld ){
> >         return fld.match(/\S/);
>
> > }
>
> > $( '#fld' ).blur( function(){
> >         if ( !validateFld( $( this ).val() ) ){
> >                 alert( 'invalid' );
> >                 setTimeout( function(){
> >                         $( '#fld' ).focus()
> >                 }, 0 );
> >         }
>
> > });
>
> > Not particularly attractive, but it works... I'm not sure if there's a
> > nicer way to do it.
>
> > On Sep 10, 9:49 am, jhm  wrote:
>
> > > I'm having trouble setting the input focus when validating fields in a
> > > form. I have a very simple case below, that validates a field for
> > > white space. If it has white space, it triggers an alert and I'd like
> > > the focus to stay in that field. However, when tabbing, it moves to
> > > the next field regardless.
>
> > > I'm using the blur event to validate the field. I'm returning false
> > > when it has white space. I've even tried forcing the issue by setting
> > > the focus to the field, and that doesn't work either.
>
> > > I must be misunderstanding something. Anyone able to set me straight?
>
> > > TIA
>
> > >  code section  
>
> > > 
>
> > > 
> > > 
>
> > > $(document).ready( function() {
>
> > >   function validateFld( fld )
> > >   {
> > >         var checkWhite = new RegExp(/[\r\n\t ]/);
>
> > >         return( !checkWhite.test(fld) );
> > >   }
>
> > >   $('#fld').blur( function() {
>
> > >     if ( !validateFld($(this).val()) )
> > >     {
> > >       alert('invalid field');
> > >       ret = false;
> > >       // $(this).focus();
> > >     }
>
> > >     return( ret );
> > >   });
>
> > > });
>
> > > 
>
> > > 
>
> > > 
> > >     
>
> > >       Field Test
> > >       
> > >       
>
> > >     
> > > 
> > > 
>
> > >  code section  
>
>

[jQuery] Re: Problems with blur/focus when validating a field

[Mr Speaker]

I think the problem is that according to the W3C standards, the blur
event is not cancelable: They don't seem to want the programmer to be
able to mess with a blur...

But also, your validation code is a bit buggy anyway: the "ret"
variable is undefined and the regex you use will only catch the cases
where someone pastes in a tab or carriage return value - not if it's
an empty field.

Also also, I think if you call focus inside blur they sort of "fight"
for control of the cursor! It seems to work if you put a slight delay
on the event, like:

function validateFld( fld ){
return fld.match(/\S/);
}

$( '#fld' ).blur( function(){
if ( !validateFld( $( this ).val() ) ){
alert( 'invalid' );
setTimeout( function(){
$( '#fld' ).focus()
}, 0 );
}
});

Not particularly attractive, but it works... I'm not sure if there's a
nicer way to do it.

On Sep 10, 9:49 am, jhm  wrote:
> I'm having trouble setting the input focus when validating fields in a
> form. I have a very simple case below, that validates a field for
> white space. If it has white space, it triggers an alert and I'd like
> the focus to stay in that field. However, when tabbing, it moves to
> the next field regardless.
>
> I'm using the blur event to validate the field. I'm returning false
> when it has white space. I've even tried forcing the issue by setting
> the focus to the field, and that doesn't work either.
>
> I must be misunderstanding something. Anyone able to set me straight?
>
> TIA
>
>  code section  
>
> 
>
> 
> 
>
> $(document).ready( function() {
>
>   function validateFld( fld )
>   {
>         var checkWhite = new RegExp(/[\r\n\t ]/);
>
>         return( !checkWhite.test(fld) );
>   }
>
>   $('#fld').blur( function() {
>
>     if ( !validateFld($(this).val()) )
>     {
>       alert('invalid field');
>       ret = false;
>       // $(this).focus();
>     }
>
>     return( ret );
>   });
>
> });
>
> 
>
> 
>
> 
>     
>
>       Field Test
>       
>       
>
>     
> 
> 
>
>  code section  

[jQuery] Re: Help with Add/Removing Classes

[Mr Speaker]

What's the problem? That code looks perfect... have you looked in
Firebug to see where it's adding/removing the class names?
On (unrelated) issue the code might have is the selector you use is
'#nav li a' which will select all of those second level nav elements
too: red/green/black - if that's not intended you could just select
first level elements with:
'#nav > li a' (so only Home/Colours/Contact Me)


On Sep 9, 9:17 pm, John Hanks  wrote:
> Guys, I have a problem with my menu. I am trying to add and remove classes
> when clicking on the main menu links. For instance when on load, the 'Home'
> is the current tab clicked, but when I click on 'Contact Me' I would like
> the class current to be removed from 'Home' and added to 'Contact Me'
> instead.
>
> The code im using is the one below.
>
> Thanks!
>
> 
>     Home
>     Colours
>         
>             Red
>             Green
>             Black
>         
>     
>     Contact Me
> 
>
> $("#nav li a").click(function(){
>     $("#nav li a").removeClass("current").addClass("hidden");
>     $(this).addClass("current");
>
> });
>
>

[jQuery] Re: Superfish - adding a "start menu" button

[Mr Speaker]

Just use put a mouseover event on the trigger which shows the menu,
and a mouseout event on the menu itself... like

Start

  All Programs
  Recent Documents
  Upgrade to a Mac


$('#startButton').mouseover(function(){
  $('#startMenu').show();
});
$('#startMenu').mouseout(function(){
  $(this).hide();
});


On Sep 9, 11:10 pm, ops  wrote:
> Hi,
>
> I want to make a vertical superfish menu, which should be shown after
> hovering over some button... when moving the mouse out from the menu
> again, the whole menu should disappear. (so a bit like the windows
> start menu)
>
> The first part works (showing the menu after hovering over the
> button), but I don't know where to add which code to hide the complete
> menu again, when the mouse leaves the menu...
>
> any tips?
>
> Best regards,
> ops

[jQuery] Re: jQuery UI Resizable Plugin – Scaling a AND the contents within?

[Mr Speaker]

I thought that's what alsoResize was for... couldn't you do something
like:
$('#myDiv').resizable({alsoResize: '#myDiv img'});

or something like that? Otherwise, perhaps you could use the resizable
event, and do the resizing yourself:

$('#myDiv').resizable({
   resize: function(event, ui) {
  // get the ui children and update the width in relation to the
event data
   }
});


On Sep 10, 2:09 am, Tobi  wrote:
> (jQuery UI Resizable Plugin)
>
> Hi there!
> Does anybody have a clue, if it's possible or a workaround existing,
> to resize a  and the content (here: images)
> within without using "alsoResize in combination with a class/id
> name".
>
> In other words: Is there a workaround for:
>  $('DIV').resizable({ handles: 'se', alsoResize: 'ITS CHILDREN' });
> or are just class/id names allowed for "alsoResize"?
>
> So basically I have a DIV and stacked Images inside.
> I want the DIV to be resizeable and the images inside resized at the
> same time.
>
> Thank you and greetings from Vienna,
> Tobi

[jQuery] Re: HTML code inside script tag, how access to it with DOM???

[Mr Speaker]

I think it's perfectly valid to have a div inside a script tag (or at
least useful), if a div makes sense to the TYPE you defined for the
script. For example, John Resig uses a script tag with type "text/
html" in his micro-templating solution:
http://ejohn.org/blog/javascript-micro-templating/

In this instance though (and in reply to the original author) you add
an ID to the SCRIPT tag, and refer to that (I don't see why it
wouldn't work with that facebook type instead of html - but you'd
probably want to test it in a few different browsers ;).  For the
example you gave, you can get a reference to the DIV by doing:


some test

$(function(){
alert($( $( '#test' ).html() ).text() ); //alerts "some text"
});

The "trick" is to get the HTML of the script tag and turn in into DOM
elements with jQuery - but remember, because you are passing all the
HTML into the jQUery function then you are immediately selecting ALL
of the top level elements. In this case, there is just one DIV - so
you are just selecting that.

On Sep 10, 4:16 am, "Cesar Sanz"  wrote:
> Why in the earth must you have a div inside  tags?
>
> - Original Message -
> From: "Nick Fitzsimons" 
> To: 
> Sent: Wednesday, September 09, 2009 6:55 AM
> Subject: [jQuery] Re: HTML code inside script tag, how access to it with
>
> DOM???
>
> 2009/9/9 Mariano :
>
> > I have an HTML page that looks like this:
>
> > 
> > 
> > 
> > 
> > 
some test
> > 
> > 
> > 
>
> > Now I have the will to access to the text inside test div but the code
> > $('#test').text();
> > doesn't work, matter of fact nothing is returned.
>
> > If my div is dragged outside of script tag, js code return me "some
> > test" correctly, but alas, div MUST be inside script.
>
> That isn't valid HTML; even if you manage to get it to work in one
> browser, it may well behave differently in others. A script element
> can only contain script code:
> 
>
> Regards,
>
> Nick.
> --
> Nick Fitzsimonshttp://www.nickfitz.co.uk/
>
>

[jQuery] Re: My simple fading div test isn't working, firebug says anchor tag is null?

[Mr Speaker]

That code looks fine - so wordpress must be messing it up.
It looks like jQuery is loading fine, else it would never get to the $
('a') line. Perhaps you could try the LIVE event:

$(function() {
  $('a').live( "click", (function() {
$('#box').fadeOut();
  });
});

Which would add the click event handler to links added to the page at
anytime (even in the future). If THAT worked then it looks like the
document.ready function running before wordpress has put everything in
place. Perhaps you could also try running your code in the
window.onload instead. The $(function(){...}) wrapper is a shortcut
for $(document).ready(function(){...} - so instead of using
doucment.ready, try
$(window).load(function(){
  $('a').click(function() {
$('#box').fadeOut();
  });
});

This might delay things enough to actually load the DOM nodes you are
trying to target. If THAT doesn't work - is there anyway you can put
the script at the bottom of the page instead of the head?

On Sep 9, 1:46 am, mikethevike  wrote:
> I'm doing some simple tests and I can't get this to work on a
> wordpress site. Basically I'm trying to fadeOut a div with id of "box"
> when a link is clicked. I mentioned Wordpress because the head code is
> loaded dynamically into the page template, as well as the body
> content. I wasn't sure i this made a difference in diagnosing the
> problem. When I load the page, Firebug keeps giving an error...
>
> $('a') is null
>
> Here is my stripped html code...Thanks for any help!
>
> 
> http://www.moxiedisplays.com/js/jquery-1.3.2.min.js";
> type="text/javascript">
>
> 
> #box {background-color: red; width: 300px; height: 300px;}
> 
>
> 
>             $(function() {
>                 $('a').click(function() {
>                      $('#box').fadeOut();
>                 });
>             });
>
> 
> 
>
> 
> 
> 
> Fade Out
> 

[jQuery] Re: Tabs - Fade and Rotate

[Mr Speaker]

Any extra options for the toggle can go where the opacity option is:
{ fx: { opacity: 'toggle', duration: 1000 } }


On Sep 10, 7:27 am, -e-train  wrote:
> All -
>
> I have a set of tabs that I have gotten to rotate through via this
> scipt:
>
> $(document).ready(function(){
>           $("#tabs").tabs({ fx: { opacity: 'toggle' }}).tabs('rotate',
> 3500);
>       });
>
> Does anyone know how to still control the fade in the toggle?
> where do I put the millisecond count when using the
> { fx: { opacity: 'toggle' }}
>
> scenario???
>
> thanks for the help. if you need more info. let me know.
>
> using: jquery-1.3.2.js
> ui.core.js
> ui.tabs.js