[jQuery] Re: Modifying Cycle plugin to first check next slide image is loaded
Okay I figured it out I think, at least for my simple use of the
plugin:
On Mar 26, 3:02 pm, boermans <[EMAIL PROTECTED]> wrote:
> Can anyone provide any tips as to what approach I should take to do
> the same with the more complex Cycle plugin:
Added:
if( $(next).find('img')[0].complete ) {
// around
if (manual || !p.cyclePause) {
// etc
}
}
if (opts.timeout)
// etc
Hope someone else finds this useful
Cheers
Ollie
[jQuery] Re: click() not binding to appended elment
The problem is that when you run:
$('img.remove').click(function() {
console.log('test');
return false;
});
The image you are attempting to bind to doesn't exist.
To get around this you will need to bind the remove function after
adding the player.
There's a few ways to do this - perhaps put it in a function:
function bindremove(){
$('img.remove').click(function() {
// your code
});
}
And add it to the add player function:
$('a#addPlayer').click(function() {
// your code
bindremove();
return false;
});
Not tested - but hopefully you get the idea?
Cheers
Ollie
On Mar 26, 7:25 am, Up-Works <[EMAIL PROTECTED]> wrote:
> Do I have to use .bind('click','fn')? or another method to have click
> fire on dynamically added elements to the DOM?
[jQuery] Modifying Cycle plugin to first check next slide image is loaded
Hi jPeople,
Switched from innerFade to use the Cycle plugin's pause and resume
functionality. Works great thank-you!
I am looking for a way to check if the image contained by the next
slide is loaded before displaying it. The lovely fade effect falls
flat when the next image is only half loaded.
Modifying the innerFade plugin to do this was straight forward.
Wrapping most of the contents of the 'next' function in an if
statement did the trick:
if ($(elements[current]).find('img').length > 0 && $
(elements[current]).find('img')[0].complete) {
// display next slide
}
// setTimeout...
This would effectively pause the cycle until the next image was loaded
- which suits my purpose well.
Worth noting that when the page first loads only the first image in
the list is included. The following images are being loaded
dynamically one after another to reduce the initial page weight.
Can anyone provide any tips as to what approach I should take to do
the same with the more complex Cycle plugin.
Thanks in advance
Ollie
[jQuery] Re: hover() only working on DOM elements NOT loaded via jQuery?
Do you assign the events then load the tab contents? If so then read this:
http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_Ajax_request.3F
If you load the tab contents then assign the events, I have no idea
what the problem could be. You'd need to provide more detailed code,
or a minimal live demo page.
Karl Rudd
On Wed, Mar 26, 2008 at 7:54 AM, jquertil <[EMAIL PROTECTED]> wrote:
>
> I'm befuddled... my hover effects work only during initial load -when
> content is reloaded via click() - the hover stops working.
>
>
> // First, I populate a tab box with the contents of a hidden div
> $('#tab_1').html( $('#tabcontent_1').html() );
>
> // inside tabcontent_1 I am doing hover business on images whose
> filenames end with "hover.png"
> $('[EMAIL PROTECTED]').hover(...);
>
>
> this works fine for images loaded like in line 1 above.
> BUT! - here comes the weird thing:
>
> // my tabs have click events that load other divs into place
> // and now the hover stuff doesn't work any more :(
> $('#tab_1button').click(function(){
>$('#tab_1').html( $('#tabcontent_'+this.id).html() );
> }
>
>
> anyone know the issue? I imagine it's something about how jQuery loads
> the DOM objects, and now that I move this stuff around, it seems to
> loose track of which element i want the hover assigned to - is html()
> building just a string-copy? what do I have to do to get this
> straight? load the tab contents via append? I tired that and nothing
> showed up so I'm sticking with html() for now.
>
[jQuery] Re: Making a fading rollover
As I told you, divs with class fade need to be visible, so add
a .show() after the .next().
You need to put the divs.fade inside each div.out, so hover will work
as expected.. and then you need to change the .next() part.
Cheers
--
Ariel Flesler
http://flesler.blogspot.com
On 25 mar, 16:58, "Nathan Wrigley" <[EMAIL PROTECTED]> wrote:
> Hi there,
>
> http://www.pictureandword.com/test_platform/index.html
>
> Tried out your code, and the results are a bit odd.
>
> The first button that you rollover has it's image altered, but it does not
> fade out again.
>
> Thereafter all of the buttons behave differently in that they all have a
> fade only on fadeOut.
>
> Mmm...
>
> This has got me really puzzled. I cannot understand why it behaves
> differently the first time, and why the images don't revert back when .hover
> is no longer.
>
> The .js is at:
>
> http://www.pictureandword.com/test_platform/effects.js
>
> Nathan Wrigley.
>
> [EMAIL PROTECTED]
>
> _
>
> From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
> Behalf Of Ariel Flesler
> Sent: 25 March 2008 14:54
> To: jquery-en@googlegroups.com
> Subject: [jQuery] Re: Making a fading rollover
>
> Try this:
>
> $(function(){
> $('div.out').hover(
> function(){
> $(this).next().stop().fadeIn(250);
> },
> function(){
> $(this).next().stop().fadeOut(3000);
> }
> );
>
> });
>
> Will be more reliable if you get the divs class fade inside the
> containers... still this should work.
>
> Cheers
>
> On 3/25/08, NJW <[EMAIL PROTECTED]> wrote:
>
> http://www.pictureandword.com/test_platform/index.html
>
> This is the Url for what I am doing.
>
> I don't understand how I can use stop() to cause the animation to
> cease to alleviate the issue above..
>
> The .js is at:
>
> http://www.pictureandword.com/test_platform/effects.js
>
> I'm sorry to bother you again.
>
> Thanks.
>
> On Mar 25, 1:12 pm, Ariel Flesler <[EMAIL PROTECTED]> wrote:
>
>
>
> > Use stop()http://docs.jquery.com/Effects/stop
>
> > --
> > Ariel Fleslerhttp://flesler.blogspot.com
>
> > On 25 mar, 09:01, NJW <[EMAIL PROTECTED]> wrote:
>
> > > I am trying to make a rollover button using 'fade' and 'hide'.
>
> > > I have 2 images absolutely positioned on a page, one exactly over the
> > > other and the 'lower' image starts with 'display:none;'.
>
> > > I want to fade out the 'top' image such that it appears that the lower
> > > image is fading in.
>
> > > I have used:
>
> > > $(document).ready(function ()
> > > {
> > > $('#case').mouseover(function()
> > > {
> > > $('#case_over').fadeIn(250);
> > > });
> > > $('#case_over').mouseout(function()
> > > {
> > > $('#case_over').fadeOut(3000);
> > > });
>
> > > });
>
> > > Where #case is the 'top' image and #case_over is the 'lower' image.
>
> > > This works just fine, but I have to wait for the 3 second (3000)
> > > fadeOut before I can initiate the fadeIn again.
>
> > > Is there anyway that I can interupt the fadeIn and fadeOut such that
> > > if the user does mouseover during the fadeOut it will immediately
> > > start the fadeIn.
>
> > > There might well be a more elegant solution to all this - I am new to
> > > all this stuff!
>
> > > Thanks in advance.
>
>
> - Mostrar texto de la cita -
[jQuery] Recommendations needed to replicate this flash functionality
At first hello to everybody! I'm new to jquery and this group. I'm just starting to dig into the framework, and I need some kind of more concise guidelines on my very first project I'm trying to create with jquery. What I want is to clone this flash functionality here: http://asaucerfulofpixels.com/files/mockup.swf with jquery. Can somebody please point me to some resources where I can learn how I can do this? Are there any specific plugins/extensions that I can use? Also, if it is possible, can I use some sort of simple backend cms to change the contents on the panels? And What's best to use for dynamic source: XML, Database or? Thank you so much in advance!
[jQuery] coda-slider bug in IE
Using the coda-slider.1.1.1 plugin works in Firefox but there is a bug in IE. It seems that the floats are not working within the 'scrolling' div so that the items don't wrap. See example: http://www.lib.byu.edu/hbll/dev/news_beta.php Can someone tell me how to make it work in IE?
[jQuery] Re: flexigrid plugin - help for server side script
It appears as though the variables "page", "rp", "sortname" and "sortorder" are POSTed to the xml script. A nice plugin indeed! Cheers Dan On 24 Mar, 00:13, "Web Specialist" <[EMAIL PROTECTED]> wrote: > Flexigrid(http://webplicity.net/flexigrid/) is a very nice grid plugin with > several awesome features. I like it, really. But plugin developer doesn't > show us your server side php script to pagination. I'll want to migrate that > code to ColdFusion. If developer listens me please show us that script. > > Cheers
[jQuery] Different action depending on responseText from form plugin
This is probably a silly question, but I'm new to jQuery. Anyway, I have a thickbox iframe with a form in it. I'm also submitting the form using the Form Plugin. Everything works great, it spits out the response text just fine, and I'm pretty much floored at how clean things are. What I'm trying to do now is to get the thickbox to close if the responseText doesn't contain the word "error." So if there are no errors, the thickbox will close itself automatically, and if there are, the box will remain open and print the responseText. I believe what I need to do is have some sort of conditional statement, and then use self.parent.tb_remove() if it's true to close the box. I'm just not sure how to implement it. Could someone please steer me in the right direction? Thanks.
[jQuery] Re: Event namespacing - how to see the full event name?
Yeah, I thought I'd have to use the data feature, it just seems a shame
not to have a property on event that provides that info.
I did some digging in the jQuery source and found that i's trivial to
expose the namespaced event type by inserting the following in to the
handle() method before line 2059 in the current public release of 1.2.3:
event.namespaced = event.type;
With that added, all events then have a .namespaced property on the
event parameter allowing you to see exactly which event was called and
switch on it :)
I've submitted a feature request, including an example scenario and
code: http://dev.jquery.com/ticket/2585
Guy
Andy Matthews wrote:
> You're allowed to pass in an array object along with each trigger
> method call.
>
> So this might work for you:
>
> var call = 1;
> $('.foo').trigger('bar.update',[call]]);
>
> var call = 2;
> $('.foo').trigger('bar.update',[call]]);
>
> $('.foo').bind('bar', function(e,data) {
> if (data[0] == 1) {
> // I came from call 1
> } else {
> // i came from call 2
> }
> });
[jQuery] click() not binding to appended elment
I have this code:
$('a#addPlayer').click(function() {
$(' Player Name: <\/label> Player Number: <\/label><\/
p>').insertBefore($(this).parent());
pi++;
return false;
});
Then I have this:
$('img.remove').click(function() {
console.log('test');
return false;
});
It will not register the click and write test to the console in FF.
Do I have to use .bind('click','fn')? or another method to have click
fire on dynamically added elements to the DOM?
Using 1.2.3 jQuery
[jQuery] Re: update a select field by ajax
you can add another option ot your ajax call --> success: function(msg)
{ } <-- the msg is the code returned from your server. you also need
to take away onchange="load_select()" from select tag.
On Mar 25, 11:27 am, jojolapin <[EMAIL PROTECTED]> wrote:
> Hi
> that is the first time I use the Ajax functionality of JQuery and I
> face so many problem. I meant that to update my select field by Ajax I
> need to do it by this way:
> $("#myId").change(function () {
> $.ajax({
> url: "ajaxCallback.php",
> cache: true,
> type: "GET",
> data: "param=toto",
> dataType: "html"
> });
>
> });
>
> My php page display the complete field so:
> id="myId">
> Option 1option 2
>
>
> What could I change to update the field with the one wich has been
> generated please?
[jQuery] hover() only working on DOM elements NOT loaded via jQuery?
I'm befuddled... my hover effects work only during initial load -when
content is reloaded via click() - the hover stops working.
// First, I populate a tab box with the contents of a hidden div
$('#tab_1').html( $('#tabcontent_1').html() );
// inside tabcontent_1 I am doing hover business on images whose
filenames end with "hover.png"
$('[EMAIL PROTECTED]').hover(...);
this works fine for images loaded like in line 1 above.
BUT! - here comes the weird thing:
// my tabs have click events that load other divs into place
// and now the hover stuff doesn't work any more :(
$('#tab_1button').click(function(){
$('#tab_1').html( $('#tabcontent_'+this.id).html() );
}
anyone know the issue? I imagine it's something about how jQuery loads
the DOM objects, and now that I move this stuff around, it seems to
loose track of which element i want the hover assigned to - is html()
building just a string-copy? what do I have to do to get this
straight? load the tab contents via append? I tired that and nothing
showed up so I'm sticking with html() for now.
[jQuery] horizontal menu
Hello, is there a plugin to have an horizontal menu like this http://www.phatfusion.net/imagemenu/index.htm? Thank you, Luca
[jQuery] Re: Tabs, AJAX, and wanting to degrade safely
Ah, should have seen that in your original post. Yeah, you'll just have to duplicate the pages, having a normal page for standard links, and a 'content only' page for ajax calls. Not much else you can do without a server to build the html for you on the fly :-/ On Mar 25, 1:32 pm, zwaldowski <[EMAIL PROTECTED]> wrote: > This website is essentially for a contest. I'm working with a couple > of friends on a historical competition. The genius historians that > run the competetion's website division think they're next-gen by > requiring you to put an HTML site on a CD. So, no. :-D > > On Mar 24, 3:57 pm, Hamish Campbell <[EMAIL PROTECTED]> wrote: > > > > > > However, taking this approach > > > would have multiple headers and > > > footers. How should I go about this? > > > If you're using plain HTML then yes, you'll need to duplicate the > > header/footer data in the "fall back" pages. > > > Do you have a database and/or server-side scripting language at your > > disposal? > > > On Mar 25, 7:15 am, zwaldowski <[EMAIL PROTECTED]> wrote: > > > > I currently use the jQuery tabs plugin for displaying a static website > > > I am working on. Since it's small, I initially just put the four > > > pages together on one page and let the tabs plugin do its work as > > > scheduled. Now, it's getting bigger and loading more and more, > > > therefore making the whole experience slower to load. I already know > > > that the tabs plugin can load external pages via AJAX, which just > > > loads the pages from regular anchor links within the tabs. > > > > So, here's my problem. To have the pages external, I would pretty > > > much just cut-and-paste the contents of that tab into a new HTML file > > > and have it load externally. But how should I have it degrade? > > > Having JS disabled is a distinct possibility with this website > > > (running off a CD + MSIE), so I should ideally have the pages link to > > > each other with identical headers/footers as the website originally > > > was. However, taking this approach would have multiple headers and > > > footers. How should I go about this? > > > > For a more visual approach, check out the following: > > > > Old Site: > > > |__ index.html > > > |__ page1.html > > > |__ page2.html > > > |__ page3.html > > > |__ page4.html > > > > All five pages have duplicated headers and footers, save for the tab > > > bar which has static "selected" classes. They link to each of the > > > other four pages. > > > > New Site: (Bulgy, slow) > > > |__ index.html > > > -|-- Header > > > -|-- Tabs > > > -|-- Contents of home > > > -|-- Contents of page 1 (hidden by JS on default) > > > -|-- Contents of page 2 (hidden by JS on default) > > > -|-- Contents of page 3 (hidden by JS on default) > > > -|-- Contents of page 4 (hidden by JS on default) > > > -|-- Footer > > > > New ideas: (Fast, speedy, and good-looking) > > > |__ index.html > > > -|-- Header > > > -|-- Tabs, links to pages > > > -|-- Contents of home > > > -|-- DIV container, loads others > > > |__ page1.html > > > |__ page2.html > > > |__ page3.html > > > |__ page4.html > > > -|-- Footer- Hide quoted text - > > - Show quoted text -
[jQuery] Re: Making a fading rollover
Hi there,
http://www.pictureandword.com/test_platform/index.html
Tried out your code, and the results are a bit odd.
The first button that you rollover has it's image altered, but it does not
fade out again.
Thereafter all of the buttons behave differently in that they all have a
fade only on fadeOut.
Mmm...
This has got me really puzzled. I cannot understand why it behaves
differently the first time, and why the images don't revert back when .hover
is no longer.
The .js is at:
http://www.pictureandword.com/test_platform/effects.js
Nathan Wrigley.
[EMAIL PROTECTED]
_
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Ariel Flesler
Sent: 25 March 2008 14:54
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Making a fading rollover
Try this:
$(function(){
$('div.out').hover(
function(){
$(this).next().stop().fadeIn(250);
},
function(){
$(this).next().stop().fadeOut(3000);
}
);
});
Will be more reliable if you get the divs class fade inside the
containers... still this should work.
Cheers
On 3/25/08, NJW <[EMAIL PROTECTED]> wrote:
http://www.pictureandword.com/test_platform/index.html
This is the Url for what I am doing.
I don't understand how I can use stop() to cause the animation to
cease to alleviate the issue above..
The .js is at:
http://www.pictureandword.com/test_platform/effects.js
I'm sorry to bother you again.
Thanks.
On Mar 25, 1:12 pm, Ariel Flesler <[EMAIL PROTECTED]> wrote:
> Use stop()http://docs.jquery.com/Effects/stop
>
> --
> Ariel Fleslerhttp://flesler.blogspot.com
>
> On 25 mar, 09:01, NJW <[EMAIL PROTECTED]> wrote:
>
> > I am trying to make a rollover button using 'fade' and 'hide'.
>
> > I have 2 images absolutely positioned on a page, one exactly over the
> > other and the 'lower' image starts with 'display:none;'.
>
> > I want to fade out the 'top' image such that it appears that the lower
> > image is fading in.
>
> > I have used:
>
> > $(document).ready(function ()
> > {
> > $('#case').mouseover(function()
> > {
> > $('#case_over').fadeIn(250);
> > });
> > $('#case_over').mouseout(function()
> > {
> > $('#case_over').fadeOut(3000);
> > });
>
> > });
>
> > Where #case is the 'top' image and #case_over is the 'lower' image.
>
> > This works just fine, but I have to wait for the 3 second (3000)
> > fadeOut before I can initiate the fadeIn again.
>
> > Is there anyway that I can interupt the fadeIn and fadeOut such that
> > if the user does mouseover during the fadeOut it will immediately
> > start the fadeIn.
>
> > There might well be a more elegant solution to all this - I am new to
> > all this stuff!
>
> > Thanks in advance.
[jQuery] Re: slideing pics
http://jquery.com/ zok <[EMAIL PROTECTED]> wrote: Hi, i'd like to display e.g. 5 pics and an arrow to the right. When you click that arrow the five pics slide to the left and other 5 pics come from the right. Is there a script to do such a slide show, i'm really new to jQuery so i need a little help with it. Maybe you could also give me some links to basic tutrials and/or books! Thanks - Looking for last minute shopping deals? Find them fast with Yahoo! Search.
[jQuery] jQuery code comments - Is that Javadoc or something else?
Hi, In many jQuery plug-ins and JS code using jQuery, I find comments at the top of the source code like this: /** * SomeFunction - Some comments. * @requires jQuery v1.2 or above * @example * */ This looks like Javadocs to me, but there are certain fields that don't seem to be in the Javadoc documentation: http://java.sun.com/j2se/javadoc/writingdoccomments/index.html#tag Fields like @example and @option are not in the Javadoc specifications, however. Is there a URL that discusses how to write jQuery comments like these plug-in authors are doing? I attempted to find something on jquery.com, but I have not found anything or have been searching the wrong way. Thank you for reading this. --Stephen
[jQuery] Set src of image in containing div of this div ?
Hi,
I'm fairly new to jQuery so bare with me. I've had a search on the forums,
but if its already been answered i apologise
I'll show the code first...easier to explain
images/bedroom.jpg
images/thumbs/bedroom.jpg images/thumbs/bedroom1.jpg
images/thumbs/bedroom2.jpg
images/tables.jpg
images/thumbs/tables.jpg images/thumbs/tables1.jpg
images/thumbs/tables2.jpg
Multiple product classes, when you click on one of the thumbnails, the img
in the display class updatesor rather it should. When a thumbnail is
clicked the images in all of the display classes change to the selected
image rather than just the display class in the containing div.
I know its because I need to select display class in the current selected
product but i don't know how...
I've tried variations on the theme of
$(this).parent().parent('.display img').attr('src', val);
$(this).parents...
etc etc
Below is the current code (where all the images display the same)
$(document).ready(function() {
$('.thumbs img').click(function() {
var scr = $(this).attr('src').replace("thumbs/","");
$('.display img').attr("src", scr);
});
});
But I'm just stumped. Please help, I hope I've made myself as clear as
possible, if not i apologise
--
View this message in context:
http://www.nabble.com/Set-src-of-image-in-containing-div-of-this-div---tp16287766s27240p16287766.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Works in FF2 but not IE7
Hey group,
I've been battling with this all day. any help would be appreciated.
I'm quite new a jQuery so it could be something obvious and simple.
also, feel free to give me any advice related to the rest of my code
if you feel compelled.
what i'm doing is, loading via $.ajax, pages on my server and
populating my main div "contentcenter" with the returned html.
without pasting a bunch of confusing code on here.. I think the
problem boils down to this.
if the returned page is to have a submenu then the returned html
contains:
submenuitem1
submenuitem2
...
after I run
$("#contentcenter").html(html)**html being the html returned
from the requested page to the ajax call
and set the innerHTML to the returned html string
when i then use:
$("#pagemenu").find('li').size();
to try and find out if the page has a submenu..
FF returns correctly (read: what I expect) and IE7 does not.
any ideas?
I've burned up the better part of the day trying to figure this out.
thanks
Will
[jQuery] Re: Event namespacing - how to see the full event name?
You're correct about the name-spacing. The name-space comes after the
event "type":
$('.class').bind('click.namespace', function(){//});
$('.class').trigger('click.namespace');
(from: http://docs.jquery.com/Events_%28Guide%29 )
Karl
On Wed, Mar 26, 2008 at 5:34 AM, Guy Fraser <[EMAIL PROTECTED]> wrote:
>
> Hi,
>
> I've been triggering several events as follows:
>
> $('.foo').trigger('bar.update');
> $('.foo').trigger('bar.show');
>
> etc...
>
> If I listen to the bar event on foo:
>
> $('.foo').bind('bar', function(e) {
>// e.type = 'bar'
> });
>
> The event type property is always "bar" - how do I work out if "bar.update"
> vs. "bar.show" was triggered?
>
> I might be misunderstanding the event system (or more accurately it's
> namespacing) but I imagined that I could listen to a specific "bar" event:
>
> $('.foo').bind('bar.update', handler);
>
> Or all "bar" events (bar.update, bar.show, etc):
>
> $('.foo').bind('bar', handler);
>
> When listening to all of them with a single handler, it would be useful for
> the handler to see the full event name ("bar.update" instead of just "bar")
> so I could switch on event type inside the handler.
>
> I guess I could achieve the required effect using event data, but it seems
> such a waste not to have the full event name in the event type (or possibly
> a .name property could contain it?)
>
> Any ideas?
>
> Guy
>
[jQuery] Re: Treeview +/- Icons are inert
noahsarkive schrieb: My treeview pics are inert. You can click text associated with them to expand/collapse the menu, but the +/- icons do not respond. Does anyone have an idea why this might be so? See: http://www.scooterworks.com The hitarea styles are missing (menu.css). Compare that to the original jquery.treeview.css. Jörn
[jQuery] Re: [tooltip] image map area not working on ie6
Jörn If I recall correctly, I had to force positioning by mouse (pageX/Y) rather than by invoking element when using an area element. Not sure if I had to do something else, too. flobou, I have an experimental mouse tracking option in clueTip that works most of the time. just set tracking to true in the options. --Karl _ Karl Swedberg www.englishrules.com www.learningjquery.com On Mar 25, 2008, at 2:16 PM, Jörn Zaefferer wrote: flobou schrieb: Thanks Karl and Jörn, I'm sad there's no solution yet with jQuery toolip but I will try clueTip. The mouse tracking was very good with tooltip so I hope to find a good combination, I'll let you know =) Apparently I just need to try again. I wonder what piece I was missing... Jörn
[jQuery] Re: Event namespacing - how to see the full event name?
You're allowed to pass in an array object along with each trigger method
call.
So this might work for you:
var call = 1;
$('.foo').trigger('bar.update',[call]]);
var call = 2;
$('.foo').trigger('bar.update',[call]]);
$('.foo').bind('bar', function(e,data) {
if (data[0] == 1) {
// I came from call 1
} else {
// i came from call 2
}
});
_
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Guy Fraser
Sent: Tuesday, March 25, 2008 1:34 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Event namespacing - how to see the full event name?
Hi,
I've been triggering several events as follows:
$('.foo').trigger('bar.update');
$('.foo').trigger('bar.show');
etc...
If I listen to the bar event on foo:
$('.foo').bind('bar', function(e) {
// e.type = 'bar'
});
The event type property is always "bar" - how do I work out if "bar.update"
vs. "bar.show" was triggered?
I might be misunderstanding the event system (or more accurately it's
namespacing) but I imagined that I could listen to a specific "bar" event:
$('.foo').bind('bar.update', handler);
Or all "bar" events (bar.update, bar.show, etc):
$('.foo').bind('bar', handler);
When listening to all of them with a single handler, it would be useful for
the handler to see the full event name ("bar.update" instead of just "bar")
so I could switch on event type inside the handler.
I guess I could achieve the required effect using event data, but it seems
such a waste not to have the full event name in the event type (or possibly
a .name property could contain it?)
Any ideas?
Guy
[jQuery] Re: submitting the form by pressing ENTER
In what way did it not work? It could be that your return false is inside an
if statement. Mayne you're not making it into that if statement?
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of [EMAIL PROTECTED]
Sent: Tuesday, March 25, 2008 2:58 PM
To: jQuery (English)
Subject: [jQuery] Re: submitting the form by pressing ENTER
Hi,
Unfortunately, that didn't work for me. Here was my code:
$('#pageForm').submit(function() {
var page = $('#page').val();
if (!isInteger(page)) {
alert("The page number must be an
integer.");
return false;
}
if (!setCurrentPage(page)) {
return false;
} // if
});
I did have success when I did
Damn, hate going back to the old ways. Oh well, -
On Mar 25, 1:26 pm, "Andy Matthews" <[EMAIL PROTECTED]> wrote:
> You should be able to intercept that button press by using the
> submit() method of the form object.
>
> $('#myForm').submit(function(){
> // this method should fire whether the button was clicked with
> the mouse
> // or the enter button was pressed
> return false;
>
> });
>
>
>
>
>
>
>
> -Original Message-
> From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
>
> Behalf Of [EMAIL PROTECTED]
> Sent: Tuesday, March 25, 2008 12:16 PM
> To: jQuery (English)
> Subject: [jQuery] submitting the form by pressing ENTER
>
> Hi,
>
> I have a form
>
>
>
> with two buttons and a text field. What I would like is when I press
enter
> on the text field, a JS function is invoked. What is the JQuery syntax to
> trigger this?
>
> Thanks, - Dave- Hide quoted text -
>
> - Show quoted text -
[jQuery] Re: submitting the form by pressing ENTER
Hi,
Unfortunately, that didn't work for me. Here was my code:
$('#pageForm').submit(function() {
var page = $('#page').val();
if (!isInteger(page)) {
alert("The page number must be an
integer.");
return false;
}
if (!setCurrentPage(page)) {
return false;
} // if
});
I did have success when I did
Damn, hate going back to the old ways. Oh well, -
On Mar 25, 1:26 pm, "Andy Matthews" <[EMAIL PROTECTED]> wrote:
> You should be able to intercept that button press by using the submit()
> method of the form object.
>
> $('#myForm').submit(function(){
> // this method should fire whether the button was clicked with the
> mouse
> // or the enter button was pressed
> return false;
>
> });
>
>
>
>
>
>
>
>
> -Original Message-
> From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
>
> Behalf Of [EMAIL PROTECTED]
> Sent: Tuesday, March 25, 2008 12:16 PM
> To: jQuery (English)
> Subject: [jQuery] submitting the form by pressing ENTER
>
> Hi,
>
> I have a form
>
>
>
> with two buttons and a text field. What I would like is when I press enter
> on the text field, a JS function is invoked. What is the JQuery syntax to
> trigger this?
>
> Thanks, - Dave- Hide quoted text -
>
> - Show quoted text -
[jQuery] Re: Problem with Tooltip + select
2008/3/25, Jörn Zaefferer <[EMAIL PROTECTED]>:
>
>
> Mileto schrieb:
>
> > Hi,
> >
> > I am with a simple problem using plugin tooltip. I apply the tooltip
> > in selectbox. If mouse step in selectbox still closed it works
> > perfectly, but when I click on the mouse selectbox and step through
> > options, the property TOP of the DIV tag decreases so that the tooltip
> > is out of the select.
> >
>
> Could you post a testpage?
>
>
> Jörn
>
Hello Jörn,
I think that I'm not clear and unfortunately I can't post the page, but my
problem is like to this:
When you hover a tooltip in a select, it should disappear when you are
selecting a option.
In this case, the tooltip are putting the box of tip completely in
wrong place. And worse: when you are hovering the option the tooltip
keeps behind them, whats its strange user experience.
I try to solve this problem with this code
$("select").click(function(){
$.Tooltip.blocked ? $.Tooltip.blocked = false :
$.Tooltip.blocked =
true;
$("#tooltip:hidden").length ? $("#tooltip").show() : $
("#tooltip").hide();
});
$("select").blur(function(){
$.Tooltip.blocked = false;
});
It works in firefox, blocking the tooltip when you click in a select
and when you exit the tooltip back to act
But didnt works in safari and IE.
Anyone know a way to handler the tooltip properly with select when you
are choosing a option?
[jQuery] Treeview +/- Icons are inert
My treeview pics are inert. You can click text associated with them to expand/collapse the menu, but the +/- icons do not respond. Does anyone have an idea why this might be so? See: http://www.scooterworks.com Thanks, Noah
[jQuery] Superfish problem with pathClass
I'm having a problem with Superfish v1.4.1 by Joel Birch. I'm not sure if it's a bug, or behaving this way by design. The problem can be seen if you take the example page: http://users.tpg.com.au/j_birch/plugins/superfish/all-horizontal-example/ and remove the child UL tag from the third menu item so it does not have a 2nd level child menu. Now, when you hover over the third menu item, it still displays the child menu for the second menu item, because it is the "current" item. In this scenario where a 1st level item has no children, I would like the 2nd level menu to disappear while you are hovering and only re- appear when the mouse leaves the menu. If this isn't a bug and it is designed to work this way, is there an easy change I can make to obtain this behaviour?
[jQuery] update a select field by ajax
Hi
that is the first time I use the Ajax functionality of JQuery and I
face so many problem. I meant that to update my select field by Ajax I
need to do it by this way:
$("#myId").change(function () {
$.ajax({
url: "ajaxCallback.php",
cache: true,
type: "GET",
data: "param=toto",
dataType: "html"
});
});
My php page display the complete field so:
Option 1option 2
What could I change to update the field with the one wich has been
generated please?
[jQuery] Re: jquery 1.2.3 not working in my application
I recently have had some similar problems when including jQuery into my wordpress theme. The trouble was being caused by a wordpress plugin that added some javascript code to the head, and it seemed to make jQuery stop working, altough I could see it with firebug, as you. If you have some other JS code, try commenting it and see if that happens... On Mar 25, 12:33 pm, nacnez <[EMAIL PROTECTED]> wrote: > I have just started learning jquery on the job. I am working on > existing application which uses jquery 1.2.1. I wanted to use 1.2.3 > for getting better performance. When I do the substitution and load my > page, I get the following errors > > jQuery(document).ready is not a function > > jQuery(document).triggerHandler is not a function > > I am not sure why these are caused. And both these are very > fundamental stuff. When I compared 1.2.1 and 1.2.3 versions, the > 1.2.1's ready function does not have a call to triggerHandler where as > 1.2.3's has. Again I am not sure exactly why the addition and why that > should cause a problem. > > I commented out the triggerHandler call in ready function of 1.2.3 and > tried out to see if that works. Nope it does not. > > As suggested by Karl Swedberg, I checked whether the jQuery 1.2.3 file > is accessible through firebug without getting 404. That does happen, > but my issue persists. > > Please help me out regarding the same. I am sure I am making some > silly mistake. > > Thanks, > nacnez
[jQuery] Solved: Re: How do you restore the defaultValue of select element after a change event?
After trying a dozen different things I ended up using .reset() on the form which worked fine once. Obviously with Ajax it was not resetting to the last value but the original state of the DOM. I ended up using a plain old hidden input named current_value and updating/retrieving as necessary. I was sure there was an "inline" way to do it. I probably should have just gone with the hidden field from the jump. Thanks for looking.
[jQuery] Re: event fired after SlideDown
On Mar 25, 3:35 pm, "Olivier Percebois-Garve" <[EMAIL PROTECTED]>
wrote:
> As I am not Drupal user difficult to understand what you can do or cant.
> Basically with jQuery animations you can pass a function as last param and
> it
> will be executed after:
>
> $("p").slideDown("slow",function(){
> alert("Animation Done.");
>
> });
>
I wish I could, but this is called from within core drupal and I can't
change it:
http://cvs.drupal.org/viewvc.py/drupal/drupal/misc/collapse.js?view=markup&pathrev=DRUPAL-5
> If you cant change it, it suggest you to use setTimeout with a time longer
> than the time of the animation.
> I guess it will be ok most of the time, but it wont be bulletproof.
>
Thanks - I hoped not to get into that and have an event fired when the
element gets into view..
(btw, the code I need to run when the animation completes is under
$document.ready() here:
http://cvs.drupal.org/viewvc.py/drupal/contributions/modules/imagefield_crop/imagefield_crop.js?revision=1.1.2.1&pathrev=DRUPAL-5
)
--yuval
[jQuery] JScrollPane external css linkage quirk
Linking an external layout css to my page seems to break jscrollpane intermittently in Safari only. All other browsers seem to handle the linkage fine. It happens most often when using the back button but also when going from page to page. When i leave the style in my header everything functions fine. I have left the "holder" class in the header as it was on the jscrollpane sample html. Examples: functioning: http://zanaganda.com/JA2/atelier/workingscroll.html jscrollpane not functioning when linking external css "contentpage2.css": http://zanaganda.com/JA2/atelier/workingscroll2.html Any thoughts on this really appreciated. BTW Kelvin, despite my struggles with this, I am really happy with your plugin, its exactly what i was looking for.
[jQuery] Re: event fired after SlideDown
On Mar 25, 3:35 pm, "Olivier Percebois-Garve" <[EMAIL PROTECTED]>
wrote:
> As I am not Drupal user difficult to understand what you can do or cant.
> Basically with jQuery animations you can pass a function as last param and
> it
> will be executed after:
>
> $("p").slideDown("slow",function(){
> alert("Animation Done.");
>
> });
>
This is what I *would* like to do, but this is given by the core
platform. You can see the source call here:
http://cvs.drupal.org/viewvc.py/drupal/drupal/misc/collapse.js?view=markup&pathrev=DRUPAL-5
(sorry I didn't give this link in the original post).
My element is only a child of this fieldset, and I would like to know
when it is put in view..
> If you cant change it, it suggest you to use setTimeout with a time longer
> than the time of the animation.
> I guess it will be ok most of the time, but it wont be bulletproof.
>
Yes, eventually, if I have no choice, I will have to revert to that,
although this is far from being my favorite method of coding it.
Is there some kind of an event that will fire when the element is
displayed, or when its position is calculated by the browser, or
anything similar?
I am not sure this is relevant to the dicussion, but for completeness,
here is the code that I want to run (look at the $(document).ready()
function):
http://cvs.drupal.org/viewvc.py/drupal/contributions/modules/imagefield_crop/imagefield_crop.js?revision=1.1.2.1&pathrev=DRUPAL-5
Thanks,
--yuval
[jQuery] Event namespacing - how to see the full event name?
Hi,
I've been triggering several events as follows:
$('.foo').trigger('bar.update');
$('.foo').trigger('bar.show');
etc...
If I listen to the bar event on foo:
$('.foo').bind('bar', function(e) {
// e.type = 'bar'
});
The event type property is always "bar" - how do I work out if
"bar.update" vs. "bar.show" was triggered?
I might be misunderstanding the event system (or more accurately it's
namespacing) but I imagined that I could listen to a specific "bar" event:
$('.foo').bind('bar.update', handler);
Or all "bar" events (bar.update, bar.show, etc):
$('.foo').bind('bar', handler);
When listening to all of them with a single handler, it would be useful
for the handler to see the full event name ("bar.update" instead of just
"bar") so I could switch on event type inside the handler.
I guess I could achieve the required effect using event data, but it
seems such a waste not to have the full event name in the event type (or
possibly a .name property could contain it?)
Any ideas?
Guy
[jQuery] slideing pics
Hi, i'd like to display e.g. 5 pics and an arrow to the right. When you click that arrow the five pics slide to the left and other 5 pics come from the right. Is there a script to do such a slide show, i'm really new to jQuery so i need a little help with it. Maybe you could also give me some links to basic tutrials and/or books! Thanks
[jQuery] Re: How to apply a Zebra Table Effect considering 3 rows instead 1
I always attack this sort of problem using something like
Javascript's splice().
The Array.splice() method will let you extract and optionally replace
the first three elements of an array. If you replace them with nothing
then you're effectively shifting three elements at a time.
Just loop while the array of elements has a length and assign a style
to the chunks of rows being spliced...
http://code.jquery.com/jquery-latest.js";>
$(function(){
var rows = jQuery.makeArray($('tr'));
var i = 0;
while (rows.length) {
var block = rows.splice(0, 3);
if ( i++ % 2 == 0 ) {
$(block).each(function(){
$(this).css({backgroundColor: '#ccc'});
});
}
}
});
one
two
three
four
five
six
seven
eight
nine
ten
[jQuery] Re: Select All Checkboxes and IE6
Hi, Christian. Yes, I have that widget in place (in fact, I believe you wrote it in response to a question I'd posed some months back). However, the problem still persists. I'm thinking maybe my select/ deselect all routine is not doing something properly, such that IE isn't maintaining state when the sort occurs. ??? On Mar 25, 2:30 pm, "Christian Bach" <[EMAIL PROTECTED]> wrote: > Hi Kevin, > > Take a look at the source of this > page:http://tablesorter.com/tests/checkbox.html > > There is a special ie-checkbox widget, i wrote to deal with the checked > state not being fired correctly in IE6. > > Happy tablesorting! > > /Christian > > 2008/3/25, Kevin Scholl <[EMAIL PROTECTED]>: > > > > > Hello, all. > > > I've searched though previous threads hoping to find some clue, but am > > still having issues with the following page: > > >http://beta.ksscholl.com/jquery/tablesorter.html > > > Click on the top or bottom checkbox, then do a sort on the table (with > > the fine tablesorter plugin). The checkboxes retain their state ... > > except, of course, in IE6. Clicking individual checkboxes and sorting > > is not an issue, so I suspect I'm missing something in my select/ > > deselect all routines: > > >http://beta.ksscholl.com/jquery/js/jqcheckboxes.js > > > (You can ignore the checkToggle and btnState functions there, as they > > are for another page.) > > > I've looked at and tried so many things, that I fear I'm blinded to > > something simple at this point. Any assistance greatly appreciated ... > > thanks! > > > Kevin
[jQuery] Re: How to apply a Zebra Table Effect considering 3 rows instead 1
we could even extend this, to a mini plugin
(function($) {
$.fn.jqStripeMe = function(options) {
// Set up default options
var defaults = {
defaultClass : 'odd',
altClass : 'even',
zebraGroup : 2
};
// Extend our default options with those provided.
var opts = $.extend(defaults, options);
var $this = $(this);
$("tr", $this).each(function(i){
var x= parseInt(i/opts.zebraGroup)%2;
if (x==1)
$(this).addClass(opts.defaultClass);
else
$(this).addClass(opts.altClass);
return this;
});
};
})(jQuery);
useage:
$('#myTable').jqStripeMe({
defaultClass : 'boo',
altClass : 'hoo',
zebraGroup:1 - alternate row striping.. or
zebraGroup:3 <--- blocks of three rows
});
On 25/03/2008, Giuliano Marcangelo <[EMAIL PROTECTED]> wrote:
>
>
> $(function() {
> $(".stripeMe tr").each(function(i){
>var x= parseInt(i/3)%2;
> if (x==1)
> $(this).addClass('odd');
> else
> $(this).addClass('even');
> });
> });
> there must be easier ways, but this works fine
>
> :-)
>
> On 25/03/2008, Leandro Vieira Pinho <[EMAIL PROTECTED]> wrote:
> >
> >
> > Hi guys,
> >
> > I´m looking for a solution to apply a Zebra Table Effect considering 3
> > rows a time instead 1. For example:
> >
> > It´s my table.
> >
> > row 1
> > row 2
> > row 3
> > row 4
> > row 5
> > row 6
> > row 7
> > row 8
> > row 9
> >
> > Each 3 rows is related to a subject. So in each 3 rows I want applay a
> > diffrent colour. To get something like it:
> >
> > row 1 - apply class to change bg
> > row 2 - apply class to change bg
> > row 3 - apply class to change bg
> > row 4
> > row 5
> > row 6
> > row 7 - apply class to change bg
> > row 8 - apply class to change bg
> > row 9 - apply class to change bg
> >
> > Some suggestions?
> >
> > Regardsds
> >
>
>
[jQuery] Re: Select All Checkboxes and IE6
Hi Kevin, Take a look at the source of this page: http://tablesorter.com/tests/checkbox.html There is a special ie-checkbox widget, i wrote to deal with the checked state not being fired correctly in IE6. Happy tablesorting! /Christian 2008/3/25, Kevin Scholl <[EMAIL PROTECTED]>: > > > Hello, all. > > I've searched though previous threads hoping to find some clue, but am > still having issues with the following page: > > http://beta.ksscholl.com/jquery/tablesorter.html > > Click on the top or bottom checkbox, then do a sort on the table (with > the fine tablesorter plugin). The checkboxes retain their state ... > except, of course, in IE6. Clicking individual checkboxes and sorting > is not an issue, so I suspect I'm missing something in my select/ > deselect all routines: > > http://beta.ksscholl.com/jquery/js/jqcheckboxes.js > > (You can ignore the checkToggle and btnState functions there, as they > are for another page.) > > I've looked at and tried so many things, that I fear I'm blinded to > something simple at this point. Any assistance greatly appreciated ... > thanks! > > > Kevin >
[jQuery] Re: submitting the form by pressing ENTER
You should be able to intercept that button press by using the submit()
method of the form object.
$('#myForm').submit(function(){
// this method should fire whether the button was clicked with the
mouse
// or the enter button was pressed
return false;
});
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of [EMAIL PROTECTED]
Sent: Tuesday, March 25, 2008 12:16 PM
To: jQuery (English)
Subject: [jQuery] submitting the form by pressing ENTER
Hi,
I have a form
with two buttons and a text field. What I would like is when I press enter
on the text field, a JS function is invoked. What is the JQuery syntax to
trigger this?
Thanks, - Dave
[jQuery] Select All Checkboxes and IE6
Hello, all. I've searched though previous threads hoping to find some clue, but am still having issues with the following page: http://beta.ksscholl.com/jquery/tablesorter.html Click on the top or bottom checkbox, then do a sort on the table (with the fine tablesorter plugin). The checkboxes retain their state ... except, of course, in IE6. Clicking individual checkboxes and sorting is not an issue, so I suspect I'm missing something in my select/ deselect all routines: http://beta.ksscholl.com/jquery/js/jqcheckboxes.js (You can ignore the checkToggle and btnState functions there, as they are for another page.) I've looked at and tried so many things, that I fear I'm blinded to something simple at this point. Any assistance greatly appreciated ... thanks! Kevin
[jQuery] Re: [tooltip] image map area not working on ie6
flobou schrieb: Thanks Karl and Jörn, I'm sad there's no solution yet with jQuery toolip but I will try clueTip. The mouse tracking was very good with tooltip so I hope to find a good combination, I'll let you know =) Apparently I just need to try again. I wonder what piece I was missing... Jörn
[jQuery] Re: [treeview] async treeview => reload branche...
easyMind schrieb: I am using the async treeview to list all manageble elements on a site. This means that if the user edits an item and, for example, changes its title, this should reflect in the tree. Also moves and deletes should reflect in the tree. Because my forms get posted with ajax I need to update the tree myself. Is there a relativly easy way to reload one or more branches from server? Currently the treeview is just that. A read-only tree*view*. Apparently, jQuery UI's sortables now work with nested elements, so most likely a tree component with sorting, editing, reloading and deleting is not far away anymore. So far you have to look at the treeview source (with focus on the asny treeview) and give it a try yourself. Jörn
[jQuery] Re: validation works in firefox but not in IE
Ariel schrieb: OK nevermind. after taking a break for a while and coming back, i immediately found the exra comma in there. although, in my defense, neither firebug nor webdeveloper toolbar fond the syntax error either. I highly recommend a syntax-checking editor. Helps completely avoiding that mistake. Try Aptana or Komodo Edit. Jörn
[jQuery] Re: Problem with Tooltip + select
Mileto schrieb: Hi, I am with a simple problem using plugin tooltip. I apply the tooltip in selectbox. If mouse step in selectbox still closed it works perfectly, but when I click on the mouse selectbox and step through options, the property TOP of the DIV tag decreases so that the tooltip is out of the select. Could you post a testpage? Jörn
[jQuery] Re: Treeview +/- icons not clickable
noahsarkive schrieb: treeview 1.2.3 jquery 1.4 My +/- icons are inert. Users must click on text to expand/collapse the tree. http://www.scooterworks.com The hitarea styles are missing (menu.css). Compare that to the original jquery.treeview.css. Jörn
[jQuery] Re: [validate] need help with addMethod
Priest, James (NIH/NIEHS) [C] schrieb:
Trying to add a new validation method to check a yes/no set of radio
buttons:
My method:
$.validator.addMethod("checkyesno", function(value) {
if (value == 'Yes') {
return true;
} else {
return false;
}
},
"You must read and agree to the terms and conditions before
proceeding.");
My rules:
rules: {
terms: {required: true, checkyesno: true}
},
But so far have not been able to make this work... What am I doing
wrong??
A checkbox' value doesn't depend on the checked state. The value stays
the same, so you should check the checked-attribute.
But that isn't necessary either, because the required method already
handles checkboxes (there are plenty examples).
So whats the issue here?
Jörn
[jQuery] Re: Setting startValue for the second handle in a ui.slider range widget
Pablo Ziliani schrieb: Pablo Ziliani wrote: Hi guys, I think this is my first post to the list, even though I have been subscribed for more than 2 years. Anyway, my question is simple and is mostly defined in the subject of this email. I'm writing a wrapper for the ui.slider plugin that takes a couple of selects as input and converts them to a range slider (two handles, from and to). These selects have pre-selected options in the original html (e.g. ...), so I need to be able to transmit them to the slider. I think managed to do it for the first one with startValue (my last attempt was a couple of days ago) but not to the second one. So, can anyone show me how can I achieve that? e.g. I can't find a way to access moveTo from the jQuery object. Gee, was this page recently updated? http://docs.jquery.com/UI/Slider/slider Please, disregard this (shameful first) post. The update is quite fresh! You're welcome to post your wrapper code (to the UI list or the bug tracker). I'd like to add some code to the plugin that handles binding inputs to sliders, supporting both easy setup and progressive enhancement. A solution to add to the plugin must be quite generic, so your input could help a lot. Jörn
[jQuery] Re: On page load the height calculation in jScrollPane
just a guess here... it could be that the height is being calculated before the image is fully loaded. It might help to set an explicit height/width for the images. If that doesn't work, you could re-initialize the jscrollpane stuff on $(window).load() hope that helps --Karl _ Karl Swedberg www.englishrules.com www.learningjquery.com On Mar 24, 2008, at 9:38 PM, jesse z wrote: I am having exactly the same problem. did you find a solution to this? On Feb 29, 4:55 am, amar <[EMAIL PROTECTED]> wrote: I havejScrollpaneused in my application. I have normal html page with static content and two images. In the first time when the page loads, it is displaying half of the page content with the cut image in the down in scrollbar area. But if i refresh the page or reloads the page, It is displaying with the full content. Please tell me what may be the problem here.. This is the URL where i am getting the problem. (http://59.144.40.60/ ipathshala/Modules/Public/goldentemple.html) Thanks in Advance
[jQuery] Re: [validate] Option to NOT defer required validation?
livefree75 schrieb:
Hello,
I have a form that displays data from a database table, and makes some
of the fields text boxes, so the user can edit them.
These text boxes are required fields. But if the user deletes the
text and then tabs out of it, the "required" error message does not
come up, until some other validation is done or the form is submitted.
How can I make the "required" error message appear immediately?
Give this a try:
$(...).validate({
onfocusout: function(element) {
this.element(element);
}
});
This should validate elements whenever they lose focus.
Jörn
[jQuery] Re: [validate]
AlexGrande.com schrieb:
uhh accidently hit submit or something. Here is the rest of my
message:
THe CSS:
.date {
position:relative;
}
.date .researchFormError {
left:2px !important;
}
The three error messages for the three date selects overlap and thus
to the user it seems like one message that will only go away once all
three date fields are complete! Coolness?
Thats an interesting idea, thanks! I'd still prefer a solution that
enables a single message for a group of fields.
I do have a question though, what if I have list items that are added
to the DOM only if certain questions are answered true? Even though
these on the fly added questions have the needed classes "required"
they are not validated. Seems like validate plugin loops through the
DOM when the page loads and only validates these items. I need a work
around.. any suggestions?
Since the 1.2 release, the plugin doesn't mind when you add or remove
elements. When submitting the form, all elements are validated (via
form.elements). All element-based events rely on event delegation: The
event handler is bound to the form, not to the element.
Either you are using an older version or there is a different issue here.
Jörn
[jQuery] [tooltip] tooltip in select
When you hover a tooltip in a select, it should disappear when you are
selecting a option.
In this case, the tooltip are putting the box of tip completely in
wrong place. And worse: when you are hovering the option the tooltip
keeps behind them, whats its strange user experience.
I try to solve this problem with this code
$("select").click(function(){
$.Tooltip.blocked ? $.Tooltip.blocked = false :
$.Tooltip.blocked =
true;
$("#tooltip:hidden").length ? $("#tooltip").show() : $
("#tooltip").hide();
});
$("select").blur(function(){
$.Tooltip.blocked = false;
});
It works in firefox, blocking the tooltip when you click in a select
and when you exit the tooltip back to act
But didnt works in safari and IE.
Anyone know a way to handler the tooltip properly with select when you
are choosing a option?
[jQuery] Re: [Validate]
AlexGrande.com schrieb: The validate plugin is rocking my world. It will be all over emedtv.com (my job) pretty soon for our upcoming registration included projects. I added a couple of methods that help me out! For instance for drop downs I did this: [...] Thanks for posting your extensions! They are always welcome. In this case though, there is an easier built-in solution. Use value="" for the first option and the required-method works just as well as your selectDate method. Jörn
[jQuery] Re: [Validation] Validation event not firing consistently, using "Remember the Milk" style
kozEfx schrieb: This post is about the Validation plugin (http://bassistance.de/jquery- plugins/jquery-plugin-validation/). It seems that validation occurs on all fields initially, pre-submit, but not all show error state if field data is cleared. Test case: goto: http://jquery.bassistance.de/validate/demo/milk/ Fill in "First Name" field, then tab to next field. Fill in "Last Name" field, then tab to next field. Username will auto-populate. Now Shift-Tab back to "First Name" field, delete content, then tab to next field. --> checkbox remains Delete content in "Last Name" field ---> Error description replaces checkbox. So, why is it showing the error in Last Name but not First Name? Both fields are required. This is one simple example of the inconsistency. However on my form, I've been able to get a few fields to throw an error, but those fields aren't consistent. Sometimes First Name does show an error if i delete the content, sometimes not, sometimes it is the Last Name field, or City field. Just to reiterate: This is all happening "Pre-Submit" state; once the form is submitted all error checking works properly. I'm going to look deeper into this problem, but I hope someone has already solved it. This is a design error. It works as intended, but the intention is flawed. Could you file a bug report with the above description? Any ideas on how to improve the behaviour are very welcome. A bit of explanation about the current design is here: http://docs.jquery.com/Plugins/Validation#Validation_event I hope that helps understanding it and finding ways to improve it. Jörn
[jQuery] Re: ajaxQueue is not a function
Gerry Tucker schrieb:
Don't worry, fixed it. The examples in the code don't exactly
describe usage very well!
Instead of:
$.ajaxQueue({
... i should have been using:
$.ajax({
mode:"queue", ...
You're welcome to help out with the documentation. All you need is to
register: http://docs.jquery.com/AjaxQueue
Jörn
[jQuery] submitting the form by pressing ENTER
Hi, I have a form with two buttons and a text field. What I would like is when I press enter on the text field, a JS function is invoked. What is the JQuery syntax to trigger this? Thanks, - Dave
[jQuery] Re: Darker on Click
Keith, if you did want to use this code, please download it today, as I'll
be cleaning off various test pages on this site soon.
JK
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Jeffrey Kretz
Sent: Saturday, March 22, 2008 8:36 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Darker on Click
This may be completely overkill for what you need, but I've been building
out a color utilities class for my color picker.
It has conversions from RGB to HSV (hue/saturation/value) and back, as well
as a color parser to and from a hex string.
You can see a demo here:
http://cobalt.scorpiontechnology.com/test/ColorTest.htm
What I'm doing in this demo, is getting the RGB value of the current color,
converting it to HSV and then reducing the value by 10% (which will make it
darker), then converting it back to RGB.
JK
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Jason Huck
Sent: Saturday, March 22, 2008 6:43 PM
To: jQuery (English)
Subject: [jQuery] Re: Darker on Click
Well, CSS color values can be spec'ed as hex values, integers, or
percentages (as well as names), so, you could parse the current value
and increment/decrement the values accordingly. Here's a quick'n'dirty
example:
Using a div initially defined with a background-color like this:
div { color: rgb(255,0,0); }
...you could decrement like so:
$('div').click(function(){
var rgb = $(this).css('background-color');
rgb = rgb.substring(4,rgb.length -
1).split(', ');
rgb[0] = parseInt(rgb[0]) - 51;
var nrgb = 'rgb(' + rgb.join(',') + ')';
if(rgb[0] >= 0)
$(this).css('background-color',nrgb);
});
Something about that isn't quite right (it decrements one time too
many), but you get the idea.
HTH,
Jason
On Mar 22, 2:58 pm, "[EMAIL PROTECTED]"
<[EMAIL PROTECTED]> wrote:
> I have a that is currently pink. Every time that it is clicked,
> I would like it to get redder until it is a dark red.
>
> I was wondering if anyone could think of an easy to implement this
> with jquery. I can't think of any simple solutions that don't involve
> storing the degrees of color in an array.
>
> Thanks!
> Keith
[jQuery] IE problems with binding click?
I can't seem to get this right... http://danthedesignman.com/c2/html/ I am on the mac platform and can't debug IE6/7 ... can someone take a look at it quickly for me? I was told by a non code knowledgeable friend that the navigation buttons do nothing in IE Thanks!
[jQuery] Troubles with bind('click') in IE
Hi I have been banging my head over a small piece of jQuery I have written to
use for navigation.
basically I am binding a click function to ,
based on what was clicked it opens its respected "animation div", then
loads content
I work on a mac desktop, non intel based, which I am unable to use to debug
IE. I have to run to remote locations to test, then run back and attempt to
fix. However the local library doesn't allow me to debug what soever, so I
have ran myself into a corner!
LIVE : http://danthedesignman.com/c2/html/
$(document).ready(function() {
$('#grow1, #grow2, #grow3, #grow4').hide();
$('#content1, #content2, #content3, #content4').hide();
var fSpeed = 400;
function openDiv(g, c) {
$(g).animate({width: 560}, 'slow');
$(g).animate({height: 406, top: 0}, 'slow',
function(){$(c).fadeIn(fSpeed)});
if(counter == 2){
$('#caseMenu').show();
$('#case').hide();
}
};
function closeDiv(pG, pC, pT) {
$(pC).fadeOut(fSpeed).hide();
$(pG).animate({height: 10, top: pT}, 'slow');
$(pG).animate({width: 0}, 'normal');
};
var counter = 0;
$('#navbox .button').bind('click', function() {
var clicked = $(this).attr('id');
var bNum = clicked[3];//get number from id tag
b = '#but' + bNum;
g = '#grow' + bNum;
c = '#content' + bNum;
if(counter == 0){
$(b).addClass('buttonSelected');
openDiv(g, c);
counter = bNum;//sets count to the button that was
pressed
}
else {
var topPositions = ['0', '100', '200', '300'];
var pT = topPositions[counter - 1];
var pB = '#but' + counter;
var pG = '#grow' + counter;
var pC = '#content' + counter;
$(pB).removeClass('buttonSelected');
$(b).addClass('buttonSelected');
closeDiv(pG, pC, pT);
openDiv(g, c);
counter = bNum;//sets count to the button that was
pressed
}
});
});
please let me know if you see any reason why this bit of code would not be
linking to the 's in IE?
thanks!
--
View this message in context:
http://www.nabble.com/Troubles-with-bind%28%27click%27%29-in-IE-%3Ccant-seem-to-get-it-right%3E-tp16275997s27240p16275997.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Improvement
Brad: I created a sample page for you here: http://design.mellentine.com/wp-content/uploads/2008/03/toggle.html It uses a hash for the href and classes to assign the events. It may not be much less code right now, but it will continue to work regardless of how many toggles and divs you have. Since it's based on the hash, you could theoretically have multiple toggles on one page. You would just need to make sure your hash naming convention was solid. -Jared [snip]
[jQuery] Re: Problems getting timing of commands to happen correctly
Thanks for the suggestions. With some rewriting and changes in the
flow, I was able to get it to work. Although I was able to get it to
work, I wanted to ask one clarifying question to make sure I am
understanding the limits of jQuery methods.
In my original code, I wanted to make three things happen in
sequential order:
1) FadeIn an image
2) Change the CSS background-image
3) FadeOut an image
I believe that that flow won't work since the jQuery CSS method
doesn't include the ability to register a callback. Without a callback
on the CSS method, there is no way to "queue up" the FadeOut to start
after the CSS method has completed. Am I correct in this?
Steve
On Mar 24, 12:26 pm, ripple <[EMAIL PROTECTED]> wrote:
> Here's a good working example. This might help, but of course you will have
> to tweak the timing to suit your needs.
>
> http://2whoa.com/dominate/2008/03/jquery-fades.php
>
> Steve Reichgut <[EMAIL PROTECTED]> wrote:
>
> Hi everyone,
>
> I have been trying to use jQuery to create a relatively simple image
> rotator. The challenge I ran into with this script is that I want the
> new image to fade-in over top of the existing image. After many
> different attempts, I was able to get "pretty close" by using the
> following (unelegant) code:
> i++;
> bg++;
> if (i == (numImages + 1)) { i = i - numImages; }
> if (bg == (numImages +1 )) { bg = bg - numImages; }
> bgImg = "url(/images/stories/js_images_home/header_" + bg + ".jpg)";
> img = 'header_'%20+%20i%20+%20'.jpg">';
> $
> ('#header_gallery').css("backgroundImage",bgImg).html(img).find('img:eq(0)').fadeIn(3000).fadeTo(3000,1).fadeOut(4000,runHomePg);
>
> When I run the code, it works partially. From what I can tell, I am
> doing something wrong in trying to queue the effects . Right now,
> setting the CSS background-image and the fading in & out of the
> foreground image happen simultaneously instead of sequentially like I
> want them to.
>
> Any help would be greatly appreciated...
>
> Steve
>
> -
> Be a better friend, newshound, and know-it-all with Yahoo! Mobile. Try it
> now.
[jQuery] Re: How to apply a Zebra Table Effect considering 3 rows instead 1
$(function() {
$(".stripeMe tr").each(function(i){
var x= parseInt(i/3)%2;
if (x==1)
$(this).addClass('odd');
else
$(this).addClass('even');
});
});
there must be easier ways, but this works fine
:-)
On 25/03/2008, Leandro Vieira Pinho <[EMAIL PROTECTED]> wrote:
>
>
> Hi guys,
>
> I´m looking for a solution to apply a Zebra Table Effect considering 3
> rows a time instead 1. For example:
>
> It´s my table.
>
> row 1
> row 2
> row 3
> row 4
> row 5
> row 6
> row 7
> row 8
> row 9
>
> Each 3 rows is related to a subject. So in each 3 rows I want applay a
> diffrent colour. To get something like it:
>
> row 1 - apply class to change bg
> row 2 - apply class to change bg
> row 3 - apply class to change bg
> row 4
> row 5
> row 6
> row 7 - apply class to change bg
> row 8 - apply class to change bg
> row 9 - apply class to change bg
>
> Some suggestions?
>
> Regardsds
>
[jQuery] Re: Making a fading rollover
Try this:
$(function(){
$('div.out').hover(
function(){
$(this).next().stop().fadeIn(250);
},
function(){
$(this).next().stop().fadeOut(3000);
}
);
});
Will be more reliable if you get the divs class fade inside the
containers... still this should work.
Cheers
On 3/25/08, NJW <[EMAIL PROTECTED]> wrote:
>
>
> http://www.pictureandword.com/test_platform/index.html
>
> This is the Url for what I am doing.
>
> I don't understand how I can use stop() to cause the animation to
> cease to alleviate the issue above..
>
> The .js is at:
>
> http://www.pictureandword.com/test_platform/effects.js
>
> I'm sorry to bother you again.
>
> Thanks.
>
> On Mar 25, 1:12 pm, Ariel Flesler <[EMAIL PROTECTED]> wrote:
> > Use stop()http://docs.jquery.com/Effects/stop
> >
> > --
> > Ariel Fleslerhttp://flesler.blogspot.com
> >
> > On 25 mar, 09:01, NJW <[EMAIL PROTECTED]> wrote:
> >
> > > I am trying to make a rollover button using 'fade' and 'hide'.
> >
> > > I have 2 images absolutely positioned on a page, one exactly over the
> > > other and the 'lower' image starts with 'display:none;'.
> >
> > > I want to fade out the 'top' image such that it appears that the lower
> > > image is fading in.
> >
> > > I have used:
> >
> > > $(document).ready(function ()
> > > {
> > > $('#case').mouseover(function()
> > > {
> > > $('#case_over').fadeIn(250);
> > > });
> > > $('#case_over').mouseout(function()
> > > {
> > > $('#case_over').fadeOut(3000);
> > > });
> >
> > > });
> >
> > > Where #case is the 'top' image and #case_over is the 'lower' image.
> >
> > > This works just fine, but I have to wait for the 3 second (3000)
> > > fadeOut before I can initiate the fadeIn again.
> >
> > > Is there anyway that I can interupt the fadeIn and fadeOut such that
> > > if the user does mouseover during the fadeOut it will immediately
> > > start the fadeIn.
> >
> > > There might well be a more elegant solution to all this - I am new to
> > > all this stuff!
> >
> > > Thanks in advance.
>
> >
>
--
Ariel Flesler
http://flesler.blogspot.com
[jQuery] Tooltip in selects
When you hover a tooltip in a select, it should disappear when you are
selecting a option.
In this case, the tooltip are putting the box of tip completely in
wrong place. And worse: when you are hovering the option the tooltip
keeps behind them, whats its strange user experience.
I try to solve this problem with this code
$("select").click(function(){
$.Tooltip.blocked ? $.Tooltip.blocked = false : $.Tooltip.blocked =
true;
$("#tooltip:hidden").length ? $("#tooltip").show() : $
("#tooltip").hide();
});
$("select").blur(function(){
$.Tooltip.blocked = false;
});
It works in firefox, blocking the tooltip when you click in a select
and when you exit the tooltip back to act
But didnt works in safari and IE.
Anyone know a way to handler the tooltip properly with select when you
are choosing a option?
[jQuery] Re: Making a fading rollover
http://www.pictureandword.com/test_platform/index.html
This is the Url for what I am doing.
I don't understand how I can use stop() to cause the animation to
cease to alleviate the issue above..
The .js is at:
http://www.pictureandword.com/test_platform/effects.js
I'm sorry to bother you again.
Thanks.
On Mar 25, 1:12 pm, Ariel Flesler <[EMAIL PROTECTED]> wrote:
> Use stop()http://docs.jquery.com/Effects/stop
>
> --
> Ariel Fleslerhttp://flesler.blogspot.com
>
> On 25 mar, 09:01, NJW <[EMAIL PROTECTED]> wrote:
>
> > I am trying to make a rollover button using 'fade' and 'hide'.
>
> > I have 2 images absolutely positioned on a page, one exactly over the
> > other and the 'lower' image starts with 'display:none;'.
>
> > I want to fade out the 'top' image such that it appears that the lower
> > image is fading in.
>
> > I have used:
>
> > $(document).ready(function ()
> > {
> > $('#case').mouseover(function()
> > {
> > $('#case_over').fadeIn(250);
> > });
> > $('#case_over').mouseout(function()
> > {
> > $('#case_over').fadeOut(3000);
> > });
>
> > });
>
> > Where #case is the 'top' image and #case_over is the 'lower' image.
>
> > This works just fine, but I have to wait for the 3 second (3000)
> > fadeOut before I can initiate the fadeIn again.
>
> > Is there anyway that I can interupt the fadeIn and fadeOut such that
> > if the user does mouseover during the fadeOut it will immediately
> > start the fadeIn.
>
> > There might well be a more elegant solution to all this - I am new to
> > all this stuff!
>
> > Thanks in advance.
[jQuery] Re: jscroll not scrolling full page
applying size attributes to each image seems to have done the trick. On Mar 24, 6:26 pm, jesse z <[EMAIL PROTECTED]> wrote: > On load my content gets cut off. But not all the time. This problem > is somewhat consistent in Safari on a Mac and intermittent in FF. if > you jump back and forth between the following two pages it will break. > > examples:http://zanaganda.com/JA2/atelier/methodology.htmhttp://zanaganda.com/JA2/atelier/workshops.htm > > I just updated and wasn't having this problem before. Any thoughts? > Thanks!
[jQuery] jcarousel scroll breaks in IE6 + IE7
I'm using jcarousel from sorgalla (http://sorgalla.com) I'm using his static simple example and simply added the scroll: 1, code to make the images scroll one at a time. It works in Firefox but is broken in IE 6 and 7. In both browsers it just shows everything as a list. Here is my code - http://www.trendyminds.com/j/examples/static_simple.html What am I doing wrong? Thanks!
[jQuery] How to apply a Zebra Table Effect considering 3 rows instead 1
Hi guys, I´m looking for a solution to apply a Zebra Table Effect considering 3 rows a time instead 1. For example: It´s my table. row 1 row 2 row 3 row 4 row 5 row 6 row 7 row 8 row 9 Each 3 rows is related to a subject. So in each 3 rows I want applay a diffrent colour. To get something like it: row 1 - apply class to change bg row 2 - apply class to change bg row 3 - apply class to change bg row 4 row 5 row 6 row 7 - apply class to change bg row 8 - apply class to change bg row 9 - apply class to change bg Some suggestions? Regardsds
[jQuery] Re: flexigrid plugin - help for server side script
It's superrr plugin.
[jQuery] Re: [tooltip] image map area not working on ie6
Thanks Karl and Jörn, I'm sad there's no solution yet with jQuery toolip but I will try clueTip. The mouse tracking was very good with tooltip so I hope to find a good combination, I'll let you know =) Thanks again Flo On 20 mar, 20:19, Karl Swedberg <[EMAIL PROTECTED]> wrote: > Not to poach a user from the excellenttooltipplugin, but clueTip can > handleimagemaps. Here is a test page that shows it in action (only > two of the icons have clueTip applied to them, so you have to wander > around themapa bit): > > http://test.learningjquery.com/clue/chic-test.html > > Documentation can be found here: > > http://plugins.learningjquery.com/cluetip/demo/ > > Hope that helps. > > --Karl > _ > Karl Swedbergwww.englishrules.comwww.learningjquery.com > > On Mar 20, 2008, at 12:32 PM, Jörn Zaefferer wrote: > > > > > flobou schrieb: > >> Hi, > >> considering this plugin > >> :http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ > > >> I have atooltipapplied on each tag on myimagemapand it's > >> working fine with FireFox PC but not with IE6 or IE7. > > >> [...] > > >> Thanks for any help to fix this =) > > > Form the 1.2 changelog: > > > * Droppedimagemapexample - completely incompatible with IE;image > > maps aren't supported anymore > > > Its not like I didn't try - but I recommend to look for an > > alternative. > > > Jörn
[jQuery] Re: event fired after SlideDown
As I am not Drupal user difficult to understand what you can do or cant.
Basically with jQuery animations you can pass a function as last param and
it
will be executed after:
$("p").slideDown("slow",function(){
alert("Animation Done.");
});
If you cant change it, it suggest you to use setTimeout with a time longer
than the time of the animation.
I guess it will be ok most of the time, but it wont be bulletproof.
-Olivier
On Tue, Mar 25, 2008 at 1:05 PM, Yuval Hager <[EMAIL PROTECTED]> wrote:
>
> This is probably truly basic, but I can't figure it out myself.
>
> The problematic code calculates and manipulates objects positioning
> (using offsetLeft and offsetTop), that runs on $(document).ready().
>
> It runs as a module which is part of the Drupal CMS, so I don't have
> control over some of the components.
>
> Usually it works well, but when used inside a div that is not
> displayed by default, rather by slideDown() function (it is called
> 'collapsed' in Drupal) - all the positioning calculations fail. I
> would like to run these calculations when the slideDown event
> completes. But I don't know how can I detect slideDown completing,
> WITHOUT cooperation from the caller of slideDown...
>
> Thanks for your help..
>
> --yuval
>
[jQuery] Re: jquery 1.2.3 not working in my application
Sounds like the jquery.js file isn't being found. Check your path. On Mar 25, 6:33 am, nacnez <[EMAIL PROTECTED]> wrote: > I have just started learning jquery on the job. I am working on > existing application which uses jquery 1.2.1. I wanted to use 1.2.3 > for getting better performance. When I do the substitution and load my > page, I get the following errors > > jQuery(document).ready is not a function > > jQuery(document).triggerHandler is not a function > > I am not sure why these are caused. And both these are very > fundamental stuff. When I compared 1.2.1 and 1.2.3 versions, the > 1.2.1's ready function does not have a call to triggerHandler where as > 1.2.3's has. Again I am not sure exactly why the addition and why that > should cause a problem. > > I commented out the triggerHandler call in ready function of 1.2.3 and > tried out to see if that works. Nope it does not. > > As suggested by Karl Swedberg, I checked whether the jQuery 1.2.3 file > is accessible through firebug without getting 404. That does happen, > but my issue persists. > > Please help me out regarding the same. I am sure I am making some > silly mistake. > > Thanks, > nacnez
[jQuery] Re: Overriding extended plugin variables
Well it seems as if you can't override values with null as options. Is this
expected behaviour?
meeboo wrote:
>
> Hi all
>
> I have a plugin which has a couple of variables which can be overriden
> like this:
> $.fn.doStuff.defaults.classOdd = 'oddClass';
> $.fn.doStuff.defaults.classEven = 'evenClass';
>
> Now I have the above two lines in my $(document).ready function because
> those two options are used
> just about everywhere in my website except for one place where they should
> be null. The problem is that I can't seem to change back the default
> values of the plugin variables classOdd and classEven for that unique
> instance where they need to be null.
>
> This is the way I try to nullify them
> $('#someElement').doStuff(({
> classOdd: null,
> classEven: null
> }));
>
> When debugging the variables in firebug they still have the default
> overriden values from the $(document).ready function and haven't been
> nullified. How does one go about to nullify the values?
>
> Thanks
>
--
View this message in context:
http://www.nabble.com/Overriding-extended-plugin-variables-tp15976657s27240p16274460.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: jEditable and TinyMCE
On Mar 25, 2008, at 11:11 AM, [EMAIL PROTECTED] wrote: I've got problem in using jEditable. I would like to use TinyMCE in text area showed by jEditable. Is it possible anyway? Yes. But you need to write custom input type for it. Basically it is just few lines of code. If you can wait for a while. I almost have markItUp! input for Jeditable done. I am just awfully busy atm so might take couple of days to finish it. If you don't have time to wait check these and DIY ;) http://www.appelsiini.net/2008/2/creating-inline-timepicker-with-javascript http://www.appelsiini.net/2007/9/three-button-editable http://www.appelsiini.net/2007/8/custom-input-types or check autogrow input demo and source. It should be pretty close how TinyMCE input would be done. http://www.appelsiini.net/projects/jeditable/custom.html http://www.appelsiini.net/download/jquery.jeditable.autogrow.js -- Mika Tuupola http://www.appelsiini.net/
[jQuery] Re: Adding an if(condition) traversal mechanism...
I have two things to say:
1- Genius.
2- Seems like the byte saving is minimum. At this point, a regular if
would take exactly the same amount of code when minified (plus
the .end()'s) and it makes it harder to read, specially for non-
chaining-addicts (not my case).
In short, I love the idea, but doesn't seem so useful in the end.
Cheers
--
Ariel Flesler
http://flesler.blogspot.com
On 25 mar, 04:25, Guy Fraser <[EMAIL PROTECTED]> wrote:
> I've been playing with this...
>
> $.fn.if = function(flag) {
> return (flag) ? this.pushStack( this ) : this.pushStack( [] );
>
> };
>
> You can then do stuff like:
>
> var addEdges = function(selector,opts) {
> $('.selector)
> .addClass('selected')
> .if(opts.page>1)
> .addClass('more-left')
> .end()
> .if(opts.page .addClass('more-right')
> .end();
>
> }
>
> It's overkill, but having if statements in a jQuery chain makes for
> pleasant reading IMHO.
>
> My brain started to hurt when I tried adding ".else()" and also when I
> started thinking of "if ... else ... end" or things like "if ... else if
> ... end" and nesting, etc.
>
> Anyone got any ideas on how to extend my basic ".if()" ?
>
> Guy
[jQuery] Re: Making a fading rollover
Use stop() http://docs.jquery.com/Effects/stop
--
Ariel Flesler
http://flesler.blogspot.com
On 25 mar, 09:01, NJW <[EMAIL PROTECTED]> wrote:
> I am trying to make a rollover button using 'fade' and 'hide'.
>
> I have 2 images absolutely positioned on a page, one exactly over the
> other and the 'lower' image starts with 'display:none;'.
>
> I want to fade out the 'top' image such that it appears that the lower
> image is fading in.
>
> I have used:
>
> $(document).ready(function ()
> {
> $('#case').mouseover(function()
> {
> $('#case_over').fadeIn(250);
> });
> $('#case_over').mouseout(function()
> {
> $('#case_over').fadeOut(3000);
> });
>
> });
>
> Where #case is the 'top' image and #case_over is the 'lower' image.
>
> This works just fine, but I have to wait for the 3 second (3000)
> fadeOut before I can initiate the fadeIn again.
>
> Is there anyway that I can interupt the fadeIn and fadeOut such that
> if the user does mouseover during the fadeOut it will immediately
> start the fadeIn.
>
> There might well be a more elegant solution to all this - I am new to
> all this stuff!
>
> Thanks in advance.
[jQuery] Re: jquery 1.2.3 not working in my application
Hi nacnez, I think the next step for us would be to see a demonstration of your problem. Can you post a link to a stripped-down public page that we can look at? Thanks, --Karl _ Karl Swedberg www.englishrules.com www.learningjquery.com On Mar 25, 2008, at 7:33 AM, nacnez wrote: I have just started learning jquery on the job. I am working on existing application which uses jquery 1.2.1. I wanted to use 1.2.3 for getting better performance. When I do the substitution and load my page, I get the following errors jQuery(document).ready is not a function jQuery(document).triggerHandler is not a function I am not sure why these are caused. And both these are very fundamental stuff. When I compared 1.2.1 and 1.2.3 versions, the 1.2.1's ready function does not have a call to triggerHandler where as 1.2.3's has. Again I am not sure exactly why the addition and why that should cause a problem. I commented out the triggerHandler call in ready function of 1.2.3 and tried out to see if that works. Nope it does not. As suggested by Karl Swedberg, I checked whether the jQuery 1.2.3 file is accessible through firebug without getting 404. That does happen, but my issue persists. Please help me out regarding the same. I am sure I am making some silly mistake. Thanks, nacnez
[jQuery] Re: How to center div horizontally + vertically?
The problem is that your extension doesnt consider the margin and
padding that affects in process of center.
I develop a plugin that make this
http://plugins.jquery.com/project/elementcenter
I hope it helps...
Alexandre Magno
Web Developer
http://blog.alexandremagno.net
On Feb 18, 8:53 pm, Hamish Campbell <[EMAIL PROTECTED]> wrote:
> Talked about this over here:
>
> http://groups.google.com/group/jquery-ui/browse_thread/thread/35a33d1...
>
> This is my extension to centre a div to the screen:
>
> $(document).ready(function() {
> jQuery.fn.centerScreen = function(loaded) {
> var obj = this;
> if(!loaded) {
> obj.css('top', $(window).height()/2-
> this.height()/2);
> obj.css('left', $(window).width()/2-
> this.width()/2);
> $(window).resize(function()
> { obj.centerScreen(!loaded); });
> } else {
> obj.stop();
> obj.animate({ top: $(window).height()/2-
> this.height()/2, left: $
> (window).width()/2-this.width()/2}, 200, 'linear');
> }
> }
>
> });
>
> On Feb 19, 12:20 pm, Shawn <[EMAIL PROTECTED]> wrote:
>
> > I seem to remember seeing acenter() plugin once. But that was pre 1.2
> > days, so it may not be applicable anymore.
>
> > Regardless, the best way I know of tocentera DIV is to use CSS.
> > Something like this:
>
> > #mydiv { margin: 20%; }
> > or even { margin: auto } in some cases.
>
> > There's PLENTY on this topic on the
> > webhttp://www.google.ca/search?hl=en&q=css%20center%20div&meta=
>
> > HTH
>
> > Shawn
>
> > Ryura wrote:
> > > Hi everyone,
>
> > > I'm wondering the best way tocentera div horizontally and vertically
> > > on the fly.
>
> > > I have:
> > > jQuery("a").click(function () {
> > > jQuery("#box")./*verticalCenter().*/
> > > add("#loading").show();
> > > });
>
> > > Basically I just want #box to be centered on the screen and then
> > > shown. I'm clueless as to how to do this, however. I tried using an
> > > excerpt from an older version of the Dimensions plugin that I found on
> > > here, but it seems to be outdated now (it doesn't work in Safari).
>
> > > Thanks!- Hide quoted text -
>
> > - Show quoted text -
[jQuery] event fired after SlideDown
This is probably truly basic, but I can't figure it out myself. The problematic code calculates and manipulates objects positioning (using offsetLeft and offsetTop), that runs on $(document).ready(). It runs as a module which is part of the Drupal CMS, so I don't have control over some of the components. Usually it works well, but when used inside a div that is not displayed by default, rather by slideDown() function (it is called 'collapsed' in Drupal) - all the positioning calculations fail. I would like to run these calculations when the slideDown event completes. But I don't know how can I detect slideDown completing, WITHOUT cooperation from the caller of slideDown... Thanks for your help.. --yuval
[jQuery] Making a fading rollover
I am trying to make a rollover button using 'fade' and 'hide'.
I have 2 images absolutely positioned on a page, one exactly over the
other and the 'lower' image starts with 'display:none;'.
I want to fade out the 'top' image such that it appears that the lower
image is fading in.
I have used:
$(document).ready(function ()
{
$('#case').mouseover(function()
{
$('#case_over').fadeIn(250);
});
$('#case_over').mouseout(function()
{
$('#case_over').fadeOut(3000);
});
});
Where #case is the 'top' image and #case_over is the 'lower' image.
This works just fine, but I have to wait for the 3 second (3000)
fadeOut before I can initiate the fadeIn again.
Is there anyway that I can interupt the fadeIn and fadeOut such that
if the user does mouseover during the fadeOut it will immediately
start the fadeIn.
There might well be a more elegant solution to all this - I am new to
all this stuff!
Thanks in advance.
[jQuery] jquery 1.2.3 not working in my application
I have just started learning jquery on the job. I am working on existing application which uses jquery 1.2.1. I wanted to use 1.2.3 for getting better performance. When I do the substitution and load my page, I get the following errors jQuery(document).ready is not a function jQuery(document).triggerHandler is not a function I am not sure why these are caused. And both these are very fundamental stuff. When I compared 1.2.1 and 1.2.3 versions, the 1.2.1's ready function does not have a call to triggerHandler where as 1.2.3's has. Again I am not sure exactly why the addition and why that should cause a problem. I commented out the triggerHandler call in ready function of 1.2.3 and tried out to see if that works. Nope it does not. As suggested by Karl Swedberg, I checked whether the jQuery 1.2.3 file is accessible through firebug without getting 404. That does happen, but my issue persists. Please help me out regarding the same. I am sure I am making some silly mistake. Thanks, nacnez
[jQuery] Re: Waiting for a click event...
Here is one way to do it based on the markup you've shown:
div { display: none; }
#no-1 { display: block; }
http://cachefile.net/scripts/jquery/1.2.3/
jquery-1.2.3.min.js">
$(function(){
$('div[id~="no"]').click(function(){
$(this).hide().next().show();
});
});
Content 1
Content 2
Content 3
Content 4
- jason
On Mar 24, 11:07 pm, Ian Fenn <[EMAIL PROTECTED]> wrote:
> Hi,
>
> I'm puzzling over something and would be grateful for some help...
>
> I've got four divs on the screen that I have hidden and wish to step through
> with each user click. So, the first div is shown... A user then clicks...
> The first div is then hidden and the second revealed... A user then
> clicks... The second div is then hidden and the third revealed... And so
> on...
>
> I thought I could achieve this using the following markup:
>
> Content 4
> Content 4
> Content 4
> Content 4
>
> for (var i = 1; i < 5; i++) {
> $('#no-'+i).show().click(function() {
> $(this).hide(1000);
> });
> };
>
> }
>
> ...but this results in all divs being shown immediately - presumably the
> loop is being executed without a click being required?
>
> Is there a simple way around this?
>
> All the best,
>
> --
> Ian
[jQuery] Re: markItUp! 1.0 (former jTagEditor) is finally released!
Hi Alexandre,
Hum... weird bug.
Contact me in private with your test page, so we will find a way to
solve that.
Jay.
On 24 mar, 18:05, "Alexandre Plennevaux" <[EMAIL PROTECTED]> wrote:
> i think i've found the cullprit: it does not play well with the
> jscrollpane plugin. If i remove jscrollpane, then it does not double
> the tag.
> That's weird because on my page, jscrollpane doesn't touch the textarea.
>
> i'll set up a test page to show it later today maybe you'll be
> able to find a fix ?
>
> On Mon, Mar 24, 2008 at 5:51 PM, Alexandre Plennevaux
>
>
>
> <[EMAIL PROTECTED]> wrote:
> > hi Jay,
>
> > i'm trying to use markitup but it seems it embeds the markup twice:
>
> > the starting html:
>
> >
> >
> >
> > Short Description:
> > >
> > style="float:none;display:block;width:100%;margin:auto;padding:0">
> >
> >
> >
>
> > the generated source:
>
> >
> >
> >
> > Short Description:
> > > class="markItUpContainer"> > class="markItUpButton markItUpButton1"> > title="undefined"> > class="markItUp"> > class="markItUpHeader"> > title="undefined"> > class="markItUp markItUpEditor" id="" style="margin: auto; padding:
> > 0pt; float: none; display: block; width: 100%; height:
> > 171px;"> > class="markItUpResizeHandle"> > class="markItUpFooter"> > class="markItUpResizeHandle">
> >
>
> >
> >
>
> > The call to the function is a simple
>
> > $("textarea.markItUp").markItUp();
>
> > Am i doing something wrong?
>
> > On Mon, Mar 24, 2008 at 2:59 PM, Jay Salvat <[EMAIL PROTECTED]> wrote:
>
> > > Wiki page is fixed, thanks.
>
> > > Insertion of element even if Cancel button has been clicked will be
> > > fixed in the next release.
>
> > > Thanks for your feedbacks and Diggs.
> > > Jay.
>
> > --
> > Alexandre Plennevaux
> > LAb[au]
>
> > http://www.lab-au.com
>
> --
> Alexandre Plennevaux
> LAb[au]
>
> http://www.lab-au.com
[jQuery] Re: markItUp! 1.0 (former jTagEditor) is finally released!
Hi and thanks for the feedbacks, I will try to answer, i'm not very confortable with english, so sorry for any non-sens. jTagEditor was an early draft of what i had in mind. markItUp! is developed from scratch. Below some features: - No unnecessary ajax load for settings, Settings are now centralized in an unic js file. - ReplaceWith property - PlaceHolder text property - Multi-lines insertion - Different way to add empty tag (now add opening and closing tag and place the cursor inside, add placeholder text if setted). - Alternative insertion with the AltKey (ex. or if altKey is pressed). - Preview can be display in either a pop-up window or a iFrame, can be refreshed dynamically at each insertion. - New Html Preview properties baseurl, charset, etc... - Callbacks functions "beforeInsert, AfterInsert, beforeMultiInsert, afterMultiInsert, openWith, closeWith, ReplaceWith, placeHolder" which get all the properties of the editor to allow advanced scripting. - Toolbar allows now dropdown-menus - Last but not the least, markItUp! can interact with the rest of the site and features can be called from anywhere outsite the editor. For the images, making a single image is a pretty good technic that i use in my projets and markItUp! integrations once my toolbar is definitively setted. Up to every developer to arrange their toolbar that way. markItUp! is a flexible tag management engine, not really a out-of-the- box solution. The examples are... errr... only examples of what is possible to do with and css can be writed and used the way the developper wants. The concept of is, download markItUp! and build the editor you need. Every developper can add, remove and script buttons to fit his needs. Making a single image to illustrate my examples could led to confusion and can kill the idea i would like to demonstrate: flexibility. Take a look to the add-ons in the downloads section. :) On 24 mar, 15:07, Stan Lemon <[EMAIL PROTECTED]> wrote: > Can you clarify what the differences are between this and jTagEditor? > Also... have you ever considered making a single image sprint of the > buttons? That might save some load-time. > > Thanks for your work on this plugin, I use it quite a bit and very > appreciative for it! > > Pax, > - Stan > > On Mar 23, 2:48 pm, Jay Salvat <[EMAIL PROTECTED]> wrote: > > > Hi all! > > > I'm proud to announce you the official release of markItUp! (former > > jTagEditor) and markItUp! website. > > I hope everything will be ok and i forgot nothing important. > > > Website:http://markitup.jaysalvat.com/ > > > Examples:http://markitup.jaysalvat.com/examples/ > > > Feedbacks are welcomed! > > > Jay S.
[jQuery] Re: events on embedded SVG
The SVG DOM is different to the HTML DOM (which jquery was written for)
- a lot of things are the same, so you may have some luck using jquery
in SVG (there are some threads dealing with SVG related issues in this
list which should give you an indication of what to look out for).
In the last SVG project I was involved in, I treated the SVG and HTML
completely separately, mainly because:
1. I could not find a way to access the SVG DOM from HTML in Safari.
2. I wanted to use AJAX, and needed to do it the same way across SVG
implementations (using getURL in Adobe SVG viewer and XMLHttpRequest in
others), so the AJAX code I needed had to be separate from the AJAX code
used in the HTML pages.
3. I found that embedding the SVG file was best achieved in different
ways across different browser/viewer configurations
(object/embed/iframe) - this was mainly a source of annoyance, but made
me feel that It would be best to separate the two from each other
completely.
I think if I wanted to use jQuery in SVG, I would get the source and try
to port it (or the parts I was interested in using) to the SVG DOM so
all HTML/CSS and browser-related fixes were discarded and fixes for
different viewers put in place instead. This would be made much easier
if you target a single browser implementation (such as Firefox or Opera)
- trying to take into account the differences between different SVG
viewer/browser combinations is quite a task, and one I abandoned quite
early.
Hope this helps.
on 24/03/2008 10:26 zipman said::
> Anyone?
>
> On Mar 23, 8:02 pm, zipman <[EMAIL PROTECTED]> wrote:
>> Hello,
>>
>> I am having an html page and I embed an svg file through.
>>
>> > height="500" width="600">
>>
>>
>> or even
>>
>> > width="600">
>>
>> The problem is that I cannot access the elements inside the svg file
>> through jquery.
>>
>> I can do
>>
>> htmlObj = document.getElementById("map");
>> /*//this works only in IE
>> SVGDoc = htmlObj.getSVGDocument();*/
>>
>> //this works in firefox
>> SVGDoc = htmlObj.contentDocument;
>>
>> and then access any element by getElementById
>>
>> eg when I want to access an elements with id="test"
>> I do it by SVGDoc.getElementById('test');
>>
>> The problem is that the contents of the SVG are not appended to the
>> DOM
>> tree so methods like $('#test') do not work.
>>
>> Is there any way to make this work?
>
[jQuery] New site using jquery
Hi, We're lauching a new site, using jquery and lot of plugins (french site) http://www.voyagemotion.com/ Thanks to the jquery library, and the plugins authors !
[jQuery] jEditable and TinyMCE
Hello. I've got problem in using jEditable. I would like to use TinyMCE in text area showed by jEditable. Is it possible anyway?
[jQuery] Re: [ANNOUNCE] markItUp! 1.0 (former jTagEditor) is finally released!
Thanks Oliver for this great tip.
I will add it as soon as possible.
There is a problem on the dropdown menus in Firefox that i am not able
to fix.
A mouseover open the menu, but the mouseout is not fired if the menu
has been clicked.
Look at this example, colors or fonts menu:
http://markitup.jaysalvat.com/examples/bbcode/
If someone knows how to fix it...
Jay
On 24 mar, 19:53, Olivier Percebois-Garve <[EMAIL PROTECTED]> wrote:
> Hi Jay,
>
> Great script! I think that your menu has the "dancing" syndrome. I
> recently discovered the fix for this from Remy Sharp's post "coda
> bubble". Its untested, but the following should fix it, or at least,
> you'll get the point:
>
> -Olivier
>
> hideDelayTimer = null;
> $(".menu a").hover(function() {
> if (hideDelayTimer) clearTimeout(hideDelayTimer);
> $("em", this).text($(this).attr("title"));
> $("em", this).not(':animated').animate({opacity: "show", left:
> "+20"}, "slow");
> $(this).not(':animated').animate({left: "+20"}, "fast");}, function()
> {
>
> if (hideDelayTimer) clearTimeout(hideDelayTimer);
> hideDelayTimer = setTimeout(function (){
> $("em", this).animate({opacity: "hide", left: "-20"}, "slow");
> $(this).animate({left: "0"}, "fast");
> }, 250);
>
> });
> Jay Salvat wrote:
> > Hi all!
>
> > I'm proud to announce you the official release of markItUp! (former
> > jTagEditor) and markItUp! website.
> > I hope everything will be ok and i forgot nothing important.
>
> > Website:
> >http://markitup.jaysalvat.com/
>
> > Examples:
> >http://markitup.jaysalvat.com/examples/
>
> > Feedbacks are welcomed!
>
> > Jay S.
[jQuery] Re: jEditable selects - Adding/binding events?
Hello Mika, thankyou very much for your reply >Basically display something when "onchange" is triggered by select? That was it, so when the user scrolls through the options in the select, a DIV is updated (onchange etc) I sorta did this using the 'callback' parameter, but as you can imagine, that is after a user has made and saved his choice, where as I need that before the user submits a value.
[jQuery] Re: On page load the height calculation in jScrollPane
I am having exactly the same problem. did you find a solution to this? On Feb 29, 4:55 am, amar <[EMAIL PROTECTED]> wrote: > I havejScrollpaneused in my application. I have normal html page > with static content and two images. In the first time when the page > loads, it is displaying half of the page content with the cut image in > the down in scrollbar area. But if i refresh the page or reloads the > page, It is displaying with the full content. Please tell me what may > be the problem here.. > > This is the URL where i am getting the problem. (http://59.144.40.60/ > ipathshala/Modules/Public/goldentemple.html) > > Thanks in Advance
[jQuery] Re: JQuery timer with reset option
thank you both for your input. Jimslam your example works great, thats exactly what i need.
[jQuery] Adding an if(condition) traversal mechanism...
I've been playing with this...
$.fn.if = function(flag) {
return (flag) ? this.pushStack( this ) : this.pushStack( [] );
};
You can then do stuff like:
var addEdges = function(selector,opts) {
$('.selector)
.addClass('selected')
.if(opts.page>1)
.addClass('more-left')
.end()
.if(opts.page
[jQuery] Re: MIssing cursor(caret) for and
> This is a known issue with Firefox and absolute positioned divs. There are > some workarounds discussed here: > > https://bugzilla.mozilla.org/show_bug.cgi?id=167801 > > It's been a problem for years, and supposedly it will be fixed in version 3. Oh, I see... So this is not jQuery problem. Thanks :)
[jQuery] Waiting for a click event...
Hi,
I'm puzzling over something and would be grateful for some help...
I've got four divs on the screen that I have hidden and wish to step through
with each user click. So, the first div is shown... A user then clicks...
The first div is then hidden and the second revealed... A user then
clicks... The second div is then hidden and the third revealed... And so
on...
I thought I could achieve this using the following markup:
Content 4
Content 4
Content 4
Content 4
for (var i = 1; i < 5; i++) {
$('#no-'+i).show().click(function() {
$(this).hide(1000);
});
};
}
...but this results in all divs being shown immediately - presumably the
loop is being executed without a click being required?
Is there a simple way around this?
All the best,
--
Ian
[jQuery] load function with selector question... script removal
If you use the load function without a selector it will parse and fire any
[jQuery] Re: Improvement
Try the "this" keyword
blg002 <[EMAIL PROTECTED]> wrote:
I'm relatively new to jQuery & Javascript and was wondering if
someone could help me condense my code a little.
What I have going on is... multiple div's with different info in them
& an ordered list of links. Only one of the divs will display at a
time and they can be toggled through by clicking on the corresponding
link.
HTML:
Lorem Ipsum One
Lorem Ipsum Two
Lorem Ipsum Thre
1
2
3
JQuery:
$("#branding ol li:nth-child(1) a").click(function() {
$("#branding div").attr('id', 'one');
});
$("#branding ol li:nth-child(2) a").click(function() {
$("#branding div").attr('id', 'two');
});
$("#branding ol li:nth-child(3) a").click(function() {
$("#branding div").attr('id', 'three');
});
Here is a quick demo page...
http://demonstration.dev.matrixgroup.net/brad/toggle/
Thanks for any help,
brad
-
Be a better friend, newshound, and know-it-all with Yahoo! Mobile. Try it now.
[jQuery] jscroll not scrolling full page
On load my content gets cut off. But not all the time. This problem is somewhat consistent in Safari on a Mac and intermittent in FF. if you jump back and forth between the following two pages it will break. examples: http://zanaganda.com/JA2/atelier/methodology.htm http://zanaganda.com/JA2/atelier/workshops.htm I just updated and wasn't having this problem before. Any thoughts? Thanks!
[jQuery] Re: Tabs, AJAX, and wanting to degrade safely
This website is essentially for a contest. I'm working with a couple of friends on a historical competition. The genius historians that run the competetion's website division think they're next-gen by requiring you to put an HTML site on a CD. So, no. :-D On Mar 24, 3:57 pm, Hamish Campbell <[EMAIL PROTECTED]> wrote: > > However, taking this approach > > would have multiple headers and > > footers. How should I go about this? > > If you're using plain HTML then yes, you'll need to duplicate the > header/footer data in the "fall back" pages. > > Do you have a database and/or server-side scripting language at your > disposal? > > On Mar 25, 7:15 am, zwaldowski <[EMAIL PROTECTED]> wrote: > > > I currently use the jQuery tabs plugin for displaying a static website > > I am working on. Since it's small, I initially just put the four > > pages together on one page and let the tabs plugin do its work as > > scheduled. Now, it's getting bigger and loading more and more, > > therefore making the whole experience slower to load. I already know > > that the tabs plugin can load external pages via AJAX, which just > > loads the pages from regular anchor links within the tabs. > > > So, here's my problem. To have the pages external, I would pretty > > much just cut-and-paste the contents of that tab into a new HTML file > > and have it load externally. But how should I have it degrade? > > Having JS disabled is a distinct possibility with this website > > (running off a CD + MSIE), so I should ideally have the pages link to > > each other with identical headers/footers as the website originally > > was. However, taking this approach would have multiple headers and > > footers. How should I go about this? > > > For a more visual approach, check out the following: > > > Old Site: > > |__ index.html > > |__ page1.html > > |__ page2.html > > |__ page3.html > > |__ page4.html > > > All five pages have duplicated headers and footers, save for the tab > > bar which has static "selected" classes. They link to each of the > > other four pages. > > > New Site: (Bulgy, slow) > > |__ index.html > > -|-- Header > > -|-- Tabs > > -|-- Contents of home > > -|-- Contents of page 1 (hidden by JS on default) > > -|-- Contents of page 2 (hidden by JS on default) > > -|-- Contents of page 3 (hidden by JS on default) > > -|-- Contents of page 4 (hidden by JS on default) > > -|-- Footer > > > New ideas: (Fast, speedy, and good-looking) > > |__ index.html > > -|-- Header > > -|-- Tabs, links to pages > > -|-- Contents of home > > -|-- DIV container, loads others > > |__ page1.html > > |__ page2.html > > |__ page3.html > > |__ page4.html > > -|-- Footer
