[jQuery] jQuery and XML revisited (tutorial)
This is a tutorial I posted this evening. I thought I might throw it up here in case anyone was interested. http://blog.reindel.com/2007/09/24/jquery-and-xml-revisited/ Brian Reindel d'bug @ blog.reindel.com
[jQuery] Re: jQuery for Floating Div
On Sep 24, 2007, at 8:45 PM, Glen Lipka wrote:
Sorry Karl. I just grabbed the one that came up first in google. :)
Yeah, that amazon effect is really useful.
Hey, not a problem, Glen. :-)
I tried to do that with Intuit, but couldn't figure it out, so I
ended up with the slideLinks instead.
These did very well in usability studies. Unexpected wow.
http://www.commadot.com/jquery/slideMenu.php (click links at top)
Yeah, I always liked that sliding quick links thing you did for
Intuit. Very slick.
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
Pete, even though its not what you asked for, it might be a good
choice.
Glen
On 9/24/07, Karl Swedberg <[EMAIL PROTECTED]> wrote:
Hey Glen,
That's actually a pretty old version of the plugin. A new(er) and
improved version can be found here:
http://plugins.learningjquery.com/cluetip/demo/
Pete,
Check out that URL above and click on the Examples link at the top
of the page. Then hover over the link that says "sort of like
amazon.com?" under the "Custom (temporary)" section. Maybe that's
something close to what you're looking for?
One of these days when I'm not swamped with freelance work, I'd
like to write a stripped-down plugin that just does that amazon.com
thing. A bunch of people have already asked for it.
Cheers,
--Karl
On Sep 24, 2007, at 6:36 PM, Glen Lipka wrote:
That's a nice effect. I have been trying to do something like
that too. Microsoft does a very similar thing.
Some helpful plugins to check out:
1. Hoverintent. Slows down the interaction to make sure the user
intended to mouseover.http://cherne.net/brian/resources/
jquery.hoverIntent.html
2. ClueTip. Shows one example of popup hovers like that. http://
examples.learningjquery.com/62/demo/
There may be other plugins that help. I am interested in this if
you nail it.
Glen
On 9/24/07, Pete < [EMAIL PROTECTED]> wrote:
Hi all,
I'm trying to construct a "popover" menu that resembles the one on
Amazon.com (put your mouse over "see all 43 product categories"). I'm
not too familiar with jQuery/JavaScript, but I thought I would be
able
to do something like this:
$(document).ready(function(){
$("#link").mouseover(function(){
$("#popup_menu").show();
return false;
});
$("#popup_menu").mouseout(function(){
$(this).hide();
return false;
});
});
The problem is, as soon as you move your mouse off the link to go
into
the div, it collapses. Could someone please offer some examples/
insight?
If you'd like to see the page, here's a link: http://www.keuka.edu/
pete/jquery_float.html
Thanks!
[jQuery] Re: jQuery for Floating Div
Sorry Karl. I just grabbed the one that came up first in google. :)
Yeah, that amazon effect is really useful.
I tried to do that with Intuit, but couldn't figure it out, so I ended up
with the slideLinks instead.
These did very well in usability studies. Unexpected wow.
http://www.commadot.com/jquery/slideMenu.php (click links at top)
Pete, even though its not what you asked for, it might be a good choice.
Glen
On 9/24/07, Karl Swedberg <[EMAIL PROTECTED]> wrote:
>
> Hey Glen,
>
> That's actually a pretty old version of the plugin. A new(er) and improved
> version can be found here:
>
> http://plugins.learningjquery.com/cluetip/demo/
>
> Pete,
> Check out that URL above and click on the Examples link at the top of the
> page. Then hover over the link that says "sort of like amazon.com?" under
> the "Custom (temporary)" section. Maybe that's something close to what
> you're looking for?
>
> One of these days when I'm not swamped with freelance work, I'd like to
> write a stripped-down plugin that just does that amazon.com thing. A bunch
> of people have already asked for it.
>
> Cheers,
>
> --Karl
>
> On Sep 24, 2007, at 6:36 PM, Glen Lipka wrote:
>
> That's a nice effect. I have been trying to do something like that too.
> Microsoft does a very similar thing.
> Some helpful plugins to check out:
> 1. Hoverintent. Slows down the interaction to make sure the user intended
> to mouseover.http://cherne.net/brian/resources/jquery.hoverIntent.html
> 2. ClueTip. Shows one example of popup hovers like that.
> http://examples.learningjquery.com/62/demo/
>
>
> There may be other plugins that help. I am interested in this if you nail
> it.
>
> Glen
>
>
> On 9/24/07, Pete < [EMAIL PROTECTED]> wrote:
> >
> >
> > Hi all,
> >
> > I'm trying to construct a "popover" menu that resembles the one on
> > Amazon.com (put your mouse over "see all 43 product categories"). I'm
> > not too familiar with jQuery/JavaScript, but I thought I would be able
> > to do something like this:
> >
> > $(document).ready(function(){
> > $("#link").mouseover(function(){
> > $("#popup_menu").show();
> > return false;
> > });
> > $("#popup_menu").mouseout(function(){
> > $(this).hide();
> > return false;
> > });
> > });
> >
> > The problem is, as soon as you move your mouse off the link to go into
> > the div, it collapses. Could someone please offer some examples/
> > insight?
> >
> > If you'd like to see the page, here's a link:
> > http://www.keuka.edu/pete/jquery_float.html
> >
> >
> > Thanks!
> >
> >
>
>
[jQuery] Re: an "Undo" plugin, or something as such. :-)
OK, here is the client-side undo plugin demo that I mentioned earlier: http://mg.to/znc/colortuner.html This is the color tuner from the Zvents Network Calendar wizard. Normally you would get to the color tuner by going to a venue page or your MyZvents page on www.zvents.com and then clicking "get this calendar for your website". This test page is a static version of the calendar, using the featured events from www.boston.com. To try it out, click in the Farbtastic color picker to change the entire theme, or click in one of the color patches below that to choose a specific part of the theme and use the color picker to change that only. Or use the Customize... link to show all of the individual color choices and change any of them. Then try the Undo and Redo buttons to move back and forth between your color settings. The undo plugin is the first thing in this file: http://mg.to/znc/colortuner.js And the same file includes the multi-color picker code that uses this plugin. Search the file for "undo" and you'll find all the relevant code. I'll tidy up the undo code to make a nice plugin release out of it, but there it is in case anyone wants to take a look at it now. I'd be interested in any feedback on the issues I mentioned in my previous message. (I'd mentioned saving the undo/redo queue in a hidden form field so it survives a soft reload, but now that I look at the code, it doesn't do that. Must have been something I was thinking about doing. The code actually should work with either strings or objects or any type as the undo queue entries.) I also plan to release the multi-color picker as a plugin, but that code not really ready for prime time. If anyone is curious about it, it uses this file to define the color patches and their relationships: http://mg.to/znc/tweaks.js -Mike
[jQuery] Re: jQuery 1.2 seems to break the Treeview plugin
Hi,
I'm OLEO.nice to meet you.
I also meet this problem when I use JQuery1.2
finally I modifid jquery.treeview.js
from $("li[ul]", this) to $("li:has(ul)", this) and then it works
well
good luck
On Sep 13, 12:07 am, Alex <[EMAIL PROTECTED]> wrote:
> I've got a page that is a massive treeview, and when loading jQuery
> 1.2 min&gzipped, the Treeview plugin seems to stop working. No errors
> reported in Firebug, and I can't see deprecated functionality in the
> plugin.
>
> Original page with 1.1.4.1:
> http://deadguy.reliccommunity.com/treeview_1.1.4.1.html
>
> New page with 1.2 min/gzip:
> http://deadguy.reliccommunity.com/treeview_1.2.html
>
> Any ideas?
[jQuery] Re: Metadata plugin performance issues
Oh! I skipped that, thanks! On Sep 24, 7:51 pm, Jörn Zaefferer <[EMAIL PROTECTED]> wrote: > voltron schrieb:> Would there be an official bug fix sometime? I am using it > with > > validation plugin > > As mentioned in the previous post: I already fixed that. > > -- Jörn
[jQuery] Re: jQuery for Floating Div
Hey Glen,
That's actually a pretty old version of the plugin. A new(er) and
improved version can be found here:
http://plugins.learningjquery.com/cluetip/demo/
Pete,
Check out that URL above and click on the Examples link at the top of
the page. Then hover over the link that says "sort of like
amazon.com?" under the "Custom (temporary)" section. Maybe that's
something close to what you're looking for?
One of these days when I'm not swamped with freelance work, I'd like
to write a stripped-down plugin that just does that amazon.com thing.
A bunch of people have already asked for it.
Cheers,
--Karl
On Sep 24, 2007, at 6:36 PM, Glen Lipka wrote:
That's a nice effect. I have been trying to do something like that
too. Microsoft does a very similar thing.
Some helpful plugins to check out:
1. Hoverintent. Slows down the interaction to make sure the user
intended to mouseover.http://cherne.net/brian/resources/
jquery.hoverIntent.html
2. ClueTip. Shows one example of popup hovers like that. http://
examples.learningjquery.com/62/demo/
There may be other plugins that help. I am interested in this if
you nail it.
Glen
On 9/24/07, Pete < [EMAIL PROTECTED]> wrote:
Hi all,
I'm trying to construct a "popover" menu that resembles the one on
Amazon.com (put your mouse over "see all 43 product categories"). I'm
not too familiar with jQuery/JavaScript, but I thought I would be able
to do something like this:
$(document).ready(function(){
$("#link").mouseover(function(){
$("#popup_menu").show();
return false;
});
$("#popup_menu").mouseout(function(){
$(this).hide();
return false;
});
});
The problem is, as soon as you move your mouse off the link to go into
the div, it collapses. Could someone please offer some examples/
insight?
If you'd like to see the page, here's a link: http://www.keuka.edu/
pete/jquery_float.html
Thanks!
[jQuery] toggle and checkbox
Using jquery 1.2.1 toggle:
jQuery().ready(function(){
$('#multiple').toggle(
function(){
$('.afield').attr('disabled',true);
},
function(){
$('.afield').removeAttr('disabled');
}
);
});
I'm trying to toggle the disabled attribute of some text input boxes
based on a checkbox input:
The Toggle
However, when the checkbox is clicked, the check does not appear.
Fails in IE and Firefox.
I've tried adding code to check the box, but that fails as well.
jQuery().ready(function(){
$('#multiple').toggle(
function(){
$('#multiple').attr('checked',true);
$('.afield').attr('disabled',true);
},
function(){
$('#same').removeAttr('checked');
$('.afield').removeAttr('disabled');
}
);
});
What's the best way to accomplish disabling text inputs with a
checkbox? Am I overthinking this?
Any help would sure be appreciated.
[jQuery] Re: .replaceWith() broken in Firefox 2 I think
John,
Well figures .. it is my code. .html() certainly does the trick. I
wasn't aware that replaceWith removes stuff from the DOM indefinitely.
A, thanks for saving me from hours of troubleshooting. I really
really appreciate it.
- sf
On 9/24/07, John Resig <[EMAIL PROTECTED]> wrote:
>
> Are you meaning to do .html(..) instead of replaceWith? replaceWith
> completely removes the element (which means that when it's called the
> second time, nothing happens, since the element no longer exists).
>
> Whereas .html() simply replaces the contents of the element.
>
> --John
>
> On 9/24/07, Steve Finkelstein <[EMAIL PROTECTED]> wrote:
> >
> > This is actually happening in IE7 also. Is it possible that something
> > is hosed with my code? I'm more confident it's that than a broken
> > replaceWith() but I'd really like to know why it only works once, and
> > then I need a page refresh for that "ajax" effect.
> >
> > - sf
> >
> > On 9/24/07, Steve Finkelstein <[EMAIL PROTECTED]> wrote:
> > > Hi all,
> > >
> > > So I have a simple script which essentially uses .replaceWith() to
> > > replace the containing elements HTML with a success callback. This
> > > works fine the first time I invoke a function which calls
> > > .replaceWith() in the success call back, but any subsequent calls
> > > leaves the DOM unmodified.
> > >
> > > Here's an example screenshot of what my page looks like upon a random
> > > page load.
> > >
> > > http://catalyst.httpd.org/tmp/1.png
> > >
> > > Ok so I have 4 notes. Let's delete one:
> > >
> > > http://catalyst.httpd.org/tmp/2.png
> > >
> > > Perfect, it's gone:
> > >
> > > http://catalyst.httpd.org/tmp/3.png
> > >
> > > Here's where the problem occurs... Let's delete another
> > >
> > > http://catalyst.httpd.org/tmp/4.png
> > >
> > > Hmmm, it didn't disappear from the DOM this time:
> > >
> > > http://catalyst.httpd.org/tmp/5.png
> > >
> > > The OB/GYN note is still there as rendered by the browser, however the
> > > server-side script surely wiped it:
> > >
> > > mysql> select id,name from ms_notes where id="CN";
> > > Empty set (0.00 sec)
> > >
> > > Here's what my code looks like to remove the note:
> > >
> > > function removeNote(id,name) {
> > > if(confirm("Are you sure you wish to delete: "+name+"?")) {
> > > // ajax code here to remove note.
> > > $.ajax({
> > > url: "/dbserver.php",
> > > type: "POST",
> > > data: "delete="+id,
> > > cache: false,
> > > success: function(html) {
> > > $("#alpha_notes").empty();
> > > $("#alpha_notes").replaceWith(html);
> > > }
> > > });
> > > }
> > > }
> > >
> > > Very important thing to factor in, is if I do a hard refresh on the
> > > page, here are the results... a missing OB/GYN note, which is the way
> > > it should be:
> > >
> > > http://catalyst.httpd.org/tmp/6.png
> > >
> > > Any idea folks? Would really appreciate any help. Firebug also shows
> > > that in its response to my POST call that the notes are not there in
> > > its table rendering. My server-side code looks like this:
> > >
> > > if($_POST['delete']) {
> > > global $db_alpha, $link;
> > > $alpha_note_set = array();
> > > $db = mysql_select_db($db_alpha, $link);
> > > if(!$db) {
> > > die("Can't connect to alpha, please contact steve.");
> > > }
> > >
> > > $sql = "DELETE from ms_notes
> > > WHERE ID='".$_POST['delete']
> > > ."' LIMIT 1";
> > > $result='';
> > > $result = mysql_query("$sql");
> > > if(!$result) { die("Something is broken... "); }
> > >
> > > $sql = "SELECT NAME,ID from ms_notes";
> > > $alpha_result_set = @mysql_query("$sql");
> > > $row='';
> > > if(mysql_num_rows($alpha_result_set)==0) { $html = "There are zero
> > > notes left to process in Alpha's database"; echo $html; exit; }
> > > while($row = @mysql_fetch_array($alpha_result_set, MYSQL_ASSOC)) {
> > > $alpha_note_set[] = $row; }
> > > $html='';
> > > $html = '';
> > > $html .= '';
> > > // count here basically just keeps track of a
> > > // neatly aligned table
> > > $count=0;
> > > foreach($alpha_note_set as $note) {
> > > $html .= " > > onclick=\"removeNote('".$note[ID]."','".$note[NAME]."')\">delete $note[NAME]";
> > > $count++;
> > > if(($count % 2 == 0)) {
> > > $html .= "";
> > > }
> > > }
> > > $html .= '';
> > >
> > > // send this sucker back to the view.
> > > echo $html;
> > > }
> > >
> > > Thanks all.
> > >
> > > - sf
> > >
> >
>
[jQuery] ajax history woes iframe or fragment
I am currently working on a site/application that is ajax driven. As it stands right now it works properly, and degrades properly as well. One issue I am having is history. I tried klaus's history plugin, and it works great except one small problem, several of my links that are loaded by the the ajax call. It is a little confusing, so hopfully a tree diagram helps :s #home --always in dom #forum --always in dom #Topic1 --only inserted into dom via ajax, same with the following forum links #thread1 #post1 #thread2 #Topic2 #downloads --always in dom So in short, a user clicks #forums, the topics are displayed. A user clicks #topic1, all the threads are displayed. A user clicks #thread1, and so on. So when a user is in the #thread1, they click back the url changes to #Topic1, but the content doesnt change, they click back again the url changes to #forum, and the inner content does change to show all the topics. I am assuming that this happens because the #forum link is in the dom, and has a proper href to follow. So I was thinking some type of iframe history would do the trick, after some searching, there isnt a plugin for jquery that does this specifically for all browsers. But I did find this http://www.dhtmlnirvana.com/program/permalink/ajax_history.html Now I believe I have all my ducks in a row. I have a div that is hidden, and one that is not. I am using the same iframe to pull data through, so it has the same name and id. For my ajax call I am retrieving that iframe, with the src pointing to my desired page. The tags have the target attribute set to the id of the iframe. The hidden div which is suppose to be updated with the iframe via a ajax call is, but since the has the target set to the iframe id it should push the data to the displayed div, with the same iframe. But it is not. I really dont have an idea of why this isnt working. Im guessing it has something to do with how jquery is inserting the html into the dom, but im not to sure. So really my question is, which method is best for the application I am making, and if anybody has tips on how to get either of the two to work properly, or if there is better method which I havnt found. Another thing that is confusing me is that this isnt a bigger issue I mean with the popularity of ajax driving web applications, and the fact that a lot of links could possibly be nested similar to my structure, yet I havnt been able to find a elegant solution. Either that or I am looking at this the wrong way and making it harder then it has to be. If you need more information, let me know so I can get this figured out as soon as possible, I know there is a few other people with a similar situation, as I've seen this ased on the irc chan a few times, maybe not as long or detailed tho ;) Cheers Des
[jQuery] Re: Checkbox "checked" event
If you're talking about capturing the event when a checkbox is checked, then
"click" is correct.
$("#mycheckboxid").click(function() {
dostuff;
});
- Original Message -
From: "voltron" <[EMAIL PROTECTED]>
To: "jQuery (English)"
Sent: Monday, September 24, 2007 2:04 PM
Subject: [jQuery] Checkbox "checked" event
How do I detect if a checkbox is checked by a user? change or click
would be wrong.
Thanks
[jQuery] Help on Post with Callback
I have the following code that works except for the callback part of
it is not doing exactly what I want. Right now it reloads the test.php
page instead of using the same instance of it inputing the variables.
How do I properly update the currentposition div?
$(document).ready(function(){
$("form#positionform").submit(function(){
$.post("test.php",{ positiontitle: $("#positiontitle").val(),
staffid: $("#staffid").val() }),
$("#currentposition").load("test.php");
return false;
});
});
[jQuery] Re: .replaceWith() broken in Firefox 2 I think
Are you meaning to do .html(..) instead of replaceWith? replaceWith
completely removes the element (which means that when it's called the
second time, nothing happens, since the element no longer exists).
Whereas .html() simply replaces the contents of the element.
--John
On 9/24/07, Steve Finkelstein <[EMAIL PROTECTED]> wrote:
>
> This is actually happening in IE7 also. Is it possible that something
> is hosed with my code? I'm more confident it's that than a broken
> replaceWith() but I'd really like to know why it only works once, and
> then I need a page refresh for that "ajax" effect.
>
> - sf
>
> On 9/24/07, Steve Finkelstein <[EMAIL PROTECTED]> wrote:
> > Hi all,
> >
> > So I have a simple script which essentially uses .replaceWith() to
> > replace the containing elements HTML with a success callback. This
> > works fine the first time I invoke a function which calls
> > .replaceWith() in the success call back, but any subsequent calls
> > leaves the DOM unmodified.
> >
> > Here's an example screenshot of what my page looks like upon a random page
> > load.
> >
> > http://catalyst.httpd.org/tmp/1.png
> >
> > Ok so I have 4 notes. Let's delete one:
> >
> > http://catalyst.httpd.org/tmp/2.png
> >
> > Perfect, it's gone:
> >
> > http://catalyst.httpd.org/tmp/3.png
> >
> > Here's where the problem occurs... Let's delete another
> >
> > http://catalyst.httpd.org/tmp/4.png
> >
> > Hmmm, it didn't disappear from the DOM this time:
> >
> > http://catalyst.httpd.org/tmp/5.png
> >
> > The OB/GYN note is still there as rendered by the browser, however the
> > server-side script surely wiped it:
> >
> > mysql> select id,name from ms_notes where id="CN";
> > Empty set (0.00 sec)
> >
> > Here's what my code looks like to remove the note:
> >
> > function removeNote(id,name) {
> > if(confirm("Are you sure you wish to delete: "+name+"?")) {
> > // ajax code here to remove note.
> > $.ajax({
> > url: "/dbserver.php",
> > type: "POST",
> > data: "delete="+id,
> > cache: false,
> > success: function(html) {
> > $("#alpha_notes").empty();
> > $("#alpha_notes").replaceWith(html);
> > }
> > });
> > }
> > }
> >
> > Very important thing to factor in, is if I do a hard refresh on the
> > page, here are the results... a missing OB/GYN note, which is the way
> > it should be:
> >
> > http://catalyst.httpd.org/tmp/6.png
> >
> > Any idea folks? Would really appreciate any help. Firebug also shows
> > that in its response to my POST call that the notes are not there in
> > its table rendering. My server-side code looks like this:
> >
> > if($_POST['delete']) {
> > global $db_alpha, $link;
> > $alpha_note_set = array();
> > $db = mysql_select_db($db_alpha, $link);
> > if(!$db) {
> > die("Can't connect to alpha, please contact steve.");
> > }
> >
> > $sql = "DELETE from ms_notes
> > WHERE ID='".$_POST['delete']
> > ."' LIMIT 1";
> > $result='';
> > $result = mysql_query("$sql");
> > if(!$result) { die("Something is broken... "); }
> >
> > $sql = "SELECT NAME,ID from ms_notes";
> > $alpha_result_set = @mysql_query("$sql");
> > $row='';
> > if(mysql_num_rows($alpha_result_set)==0) { $html = "There are zero
> > notes left to process in Alpha's database"; echo $html; exit; }
> > while($row = @mysql_fetch_array($alpha_result_set, MYSQL_ASSOC)) {
> > $alpha_note_set[] = $row; }
> > $html='';
> > $html = '';
> > $html .= '';
> > // count here basically just keeps track of a
> > // neatly aligned table
> > $count=0;
> > foreach($alpha_note_set as $note) {
> > $html .= " > onclick=\"removeNote('".$note[ID]."','".$note[NAME]."')\">delete $note[NAME]";
> > $count++;
> > if(($count % 2 == 0)) {
> > $html .= "";
> > }
> > }
> > $html .= '';
> >
> > // send this sucker back to the view.
> > echo $html;
> > }
> >
> > Thanks all.
> >
> > - sf
> >
>
[jQuery] Re: .click() not working in ie6... 'g' is null or not an object
hover expects 2 functions, so getting an error isn't surprising.
After a cursory look at your code, one thing that jumps out is I suggest you
don't do $('div#wrap').attr('class') == "xlarge". Instead, do:
$('div#wrap').is(".xlarge").
Other than that, maybe verify that your selector is working right in IE6.
Maybe try doing alert($('div#utility p.resize span.increase').length) to
make sure the element that you're looking for is being found.
Hope it helps.
--Erik
On 9/24/07, AnalogPanda <[EMAIL PROTECTED]> wrote:
>
>
>
> I hope this isn't a double post... This is kind of an awkward problem to
> search on
>
> Perhaps the root of my problem is the custom function I've written, but
> I've
> set up an "increase/decrease text size" function on a site and it's not
> working in ie6 (works fine on XP in ff2, ie7, Opera9, and Safari3)
>
> IE6 or FF does not report an error unless I change .click() to .hover()
> in which case, the errors are:
> IE6: 'g' is null or not an object
> FF2/fireBug: g has no properties
> (I'm using jquery 1.2.1 packed)
>
> Here's the code:
> JS:
>
> $(document).ready(function() {
> $('div#utility p.resize span.increase').click(function() {
> if($('div#wrap').attr('class') == "default") {
> $('div#wrap').removeClass("default");
> $('div#wrap').addClass("medium");
> }
> else if($('div#wrap').attr('class') == "medium") {
> $('div#wrap').removeClass("medium");
> $('div#wrap').addClass("large");
> }
> else if($('div#wrap').attr('class') == "large") {
> $('div#wrap').removeClass("large");
> $('div#wrap').addClass("xlarge");
> }
> });
> });
>
> $(document).ready(function() {
> $('div#utility p.resize span.decrease').click(function() {
> if($('div#wrap').attr('class') == "xlarge") {
> $('div#wrap').removeClass("xlarge");
> $('div#wrap').addClass("large");
> }
> else if($('div#wrap').attr('class') == "large") {
> $('div#wrap').removeClass("large");
> $('div#wrap').addClass("medium");
> }
> else if($('div#wrap').attr('class') == "medium") {
> $('div#wrap').removeClass("medium");
> $('div#wrap').addClass("default");
> }
> });
> });
>
>
> HTML:
>
>
>
>
> You are on the Start
> Page
> High Contrast
> Version
> Increase or decrease the text
> size: class="increase" title="Increase text size">+ class="decrease" title="Decrease text size">-
>
>
>
> ...The JS just changes the class on #wrap, and then the css takes care of
> the text resizing
>
> I'm not too hot at JavaScript, and I don't know jQuery front to back, so
> I'm
> sure I'm probably doing something wrong...
>
> any help is appreciated - and let me know if I need to post more code...
> Thanks!
> --
> View this message in context:
> http://www.nabble.com/.click%28%29-not-working-in-ie6...-%27g%27-is-null-or-not-an-object-tf4488718s15494.html#a12801113
> Sent from the JQuery mailing list archive at Nabble.com.
>
>
[jQuery] Re: .replaceWith() broken in Firefox 2 I think
This is actually happening in IE7 also. Is it possible that something
is hosed with my code? I'm more confident it's that than a broken
replaceWith() but I'd really like to know why it only works once, and
then I need a page refresh for that "ajax" effect.
- sf
On 9/24/07, Steve Finkelstein <[EMAIL PROTECTED]> wrote:
> Hi all,
>
> So I have a simple script which essentially uses .replaceWith() to
> replace the containing elements HTML with a success callback. This
> works fine the first time I invoke a function which calls
> .replaceWith() in the success call back, but any subsequent calls
> leaves the DOM unmodified.
>
> Here's an example screenshot of what my page looks like upon a random page
> load.
>
> http://catalyst.httpd.org/tmp/1.png
>
> Ok so I have 4 notes. Let's delete one:
>
> http://catalyst.httpd.org/tmp/2.png
>
> Perfect, it's gone:
>
> http://catalyst.httpd.org/tmp/3.png
>
> Here's where the problem occurs... Let's delete another
>
> http://catalyst.httpd.org/tmp/4.png
>
> Hmmm, it didn't disappear from the DOM this time:
>
> http://catalyst.httpd.org/tmp/5.png
>
> The OB/GYN note is still there as rendered by the browser, however the
> server-side script surely wiped it:
>
> mysql> select id,name from ms_notes where id="CN";
> Empty set (0.00 sec)
>
> Here's what my code looks like to remove the note:
>
> function removeNote(id,name) {
> if(confirm("Are you sure you wish to delete: "+name+"?")) {
> // ajax code here to remove note.
> $.ajax({
> url: "/dbserver.php",
> type: "POST",
> data: "delete="+id,
> cache: false,
> success: function(html) {
> $("#alpha_notes").empty();
> $("#alpha_notes").replaceWith(html);
> }
> });
> }
> }
>
> Very important thing to factor in, is if I do a hard refresh on the
> page, here are the results... a missing OB/GYN note, which is the way
> it should be:
>
> http://catalyst.httpd.org/tmp/6.png
>
> Any idea folks? Would really appreciate any help. Firebug also shows
> that in its response to my POST call that the notes are not there in
> its table rendering. My server-side code looks like this:
>
> if($_POST['delete']) {
> global $db_alpha, $link;
> $alpha_note_set = array();
> $db = mysql_select_db($db_alpha, $link);
> if(!$db) {
> die("Can't connect to alpha, please contact steve.");
> }
>
> $sql = "DELETE from ms_notes
> WHERE ID='".$_POST['delete']
> ."' LIMIT 1";
> $result='';
> $result = mysql_query("$sql");
> if(!$result) { die("Something is broken... "); }
>
> $sql = "SELECT NAME,ID from ms_notes";
> $alpha_result_set = @mysql_query("$sql");
> $row='';
> if(mysql_num_rows($alpha_result_set)==0) { $html = "There are zero
> notes left to process in Alpha's database"; echo $html; exit; }
> while($row = @mysql_fetch_array($alpha_result_set, MYSQL_ASSOC)) {
> $alpha_note_set[] = $row; }
> $html='';
> $html = '';
> $html .= '';
> // count here basically just keeps track of a
> // neatly aligned table
> $count=0;
> foreach($alpha_note_set as $note) {
> $html .= " onclick=\"removeNote('".$note[ID]."','".$note[NAME]."')\">delete $note[NAME]";
> $count++;
> if(($count % 2 == 0)) {
> $html .= "";
> }
> }
> $html .= '';
>
> // send this sucker back to the view.
> echo $html;
> }
>
> Thanks all.
>
> - sf
>
[jQuery] Re: Checkbox "checked" event
$("input :checked")
$("input").is(":checked");
Untested. But I think they work.
Glen
On 9/24/07, voltron <[EMAIL PROTECTED]> wrote:
>
>
> How do I detect if a checkbox is checked by a user? change or click
> would be wrong.
>
> Thanks
>
>
[jQuery] Re: jQuery for Floating Div
That's a nice effect. I have been trying to do something like that too.
Microsoft does a very similar thing.
Some helpful plugins to check out:
1. Hoverintent. Slows down the interaction to make sure the user intended
to mouseover.http://cherne.net/brian/resources/jquery.hoverIntent.html
2. ClueTip. Shows one example of popup hovers like that.
http://examples.learningjquery.com/62/demo/
There may be other plugins that help. I am interested in this if you nail
it.
Glen
On 9/24/07, Pete <[EMAIL PROTECTED]> wrote:
>
>
> Hi all,
>
> I'm trying to construct a "popover" menu that resembles the one on
> Amazon.com (put your mouse over "see all 43 product categories"). I'm
> not too familiar with jQuery/JavaScript, but I thought I would be able
> to do something like this:
>
> $(document).ready(function(){
> $("#link").mouseover(function(){
> $("#popup_menu").show();
> return false;
> });
> $("#popup_menu").mouseout(function(){
> $(this).hide();
> return false;
> });
> });
>
> The problem is, as soon as you move your mouse off the link to go into
> the div, it collapses. Could someone please offer some examples/
> insight?
>
> If you'd like to see the page, here's a link:
> http://www.keuka.edu/pete/jquery_float.html
>
> Thanks!
>
>
[jQuery] .replaceWith() broken in Firefox 2 I think
Hi all,
So I have a simple script which essentially uses .replaceWith() to
replace the containing elements HTML with a success callback. This
works fine the first time I invoke a function which calls
.replaceWith() in the success call back, but any subsequent calls
leaves the DOM unmodified.
Here's an example screenshot of what my page looks like upon a random page load.
http://catalyst.httpd.org/tmp/1.png
Ok so I have 4 notes. Let's delete one:
http://catalyst.httpd.org/tmp/2.png
Perfect, it's gone:
http://catalyst.httpd.org/tmp/3.png
Here's where the problem occurs... Let's delete another
http://catalyst.httpd.org/tmp/4.png
Hmmm, it didn't disappear from the DOM this time:
http://catalyst.httpd.org/tmp/5.png
The OB/GYN note is still there as rendered by the browser, however the
server-side script surely wiped it:
mysql> select id,name from ms_notes where id="CN";
Empty set (0.00 sec)
Here's what my code looks like to remove the note:
function removeNote(id,name) {
if(confirm("Are you sure you wish to delete: "+name+"?")) {
// ajax code here to remove note.
$.ajax({
url: "/dbserver.php",
type: "POST",
data: "delete="+id,
cache: false,
success: function(html) {
$("#alpha_notes").empty();
$("#alpha_notes").replaceWith(html);
}
});
}
}
Very important thing to factor in, is if I do a hard refresh on the
page, here are the results... a missing OB/GYN note, which is the way
it should be:
http://catalyst.httpd.org/tmp/6.png
Any idea folks? Would really appreciate any help. Firebug also shows
that in its response to my POST call that the notes are not there in
its table rendering. My server-side code looks like this:
if($_POST['delete']) {
global $db_alpha, $link;
$alpha_note_set = array();
$db = mysql_select_db($db_alpha, $link);
if(!$db) {
die("Can't connect to alpha, please contact steve.");
}
$sql = "DELETE from ms_notes
WHERE ID='".$_POST['delete']
."' LIMIT 1";
$result='';
$result = mysql_query("$sql");
if(!$result) { die("Something is broken... "); }
$sql = "SELECT NAME,ID from ms_notes";
$alpha_result_set = @mysql_query("$sql");
$row='';
if(mysql_num_rows($alpha_result_set)==0) { $html = "There are zero
notes left to process in Alpha's database"; echo $html; exit; }
while($row = @mysql_fetch_array($alpha_result_set, MYSQL_ASSOC)) {
$alpha_note_set[] = $row; }
$html='';
$html = '';
$html .= '';
// count here basically just keeps track of a
// neatly aligned table
$count=0;
foreach($alpha_note_set as $note) {
$html .= "delete $note[NAME]";
$count++;
if(($count % 2 == 0)) {
$html .= "";
}
}
$html .= '';
// send this sucker back to the view.
echo $html;
}
Thanks all.
- sf
[jQuery] Re: Validation plugin - alphanumeric password with min length
Yes, I added the method, this is what I have now
// JS
$(document).ready(function(){
jQuery.validator.addMethod("password", function( value, element,
param ) {
return this.optional(element) || value.length >= 6 && /
\d/.test(value) && /[a-z]/i.test(value);
}, "Your password must be at least 6 characters long and contain
at least one number and one character.");
var container = $('#error_container');
$("#reg_form").validate({
errorContainer: container,
errorLabelContainer: $("ol", container),
wrapper: 'li',
meta: "validate_reg_form",
event: "keyup"
}); // end validate
)};// end document ready
// HTML
Error:
Please enter a password, alphanumeric bla, blah
The passwords must match! Auf Deutsch
Passwort:
Passwort wiederholen:
On Sep 24, 7:53 pm, Jörn Zaefferer <[EMAIL PROTECTED]> wrote:
> voltron schrieb:> Hi Jörn, I have just tested your suggestion. Sadly, it does
> not work,
> > if I add "password:true to my HTML, I get this:
>
> > jQuery.validator.methods[rule.method] has no properties
> >http://localhost/de/js/jquery.validate.pack.js
> > Line 14
>
> > I am following the example on your page, the one with the separate
> > errorContainer . I´m using the metadata plugin in conjunction with the
> > validation plugin.
>
> Have you added the password method? This one:
>
> jQuery.validator.addMethod("password", function( value, element, param ) {
> return this.optional(element) || value.length >= 6 &&
> /\d/.test(value) && /[a-z]/i.test(value);}, "Your password must be at least 6
> characters long and contain at least one number and one character.");
>
> -- Jörn
[jQuery] Re: Getting started
Hi Yaip. You'll need to provide some more details as to what you'd like to accomplish. Rey yaip wrote: I am brand new to this. Reading the documentation, I know how I would use jQuery. But I don’t know how to use UI or Widget. Can anyone help?
[jQuery] .click() not working in ie6... 'g' is null or not an object
I hope this isn't a double post... This is kind of an awkward problem to
search on
Perhaps the root of my problem is the custom function I've written, but I've
set up an "increase/decrease text size" function on a site and it's not
working in ie6 (works fine on XP in ff2, ie7, Opera9, and Safari3)
IE6 or FF does not report an error unless I change .click() to .hover()
in which case, the errors are:
IE6: 'g' is null or not an object
FF2/fireBug: g has no properties
(I'm using jquery 1.2.1 packed)
Here's the code:
JS:
$(document).ready(function() {
$('div#utility p.resize span.increase').click(function() {
if($('div#wrap').attr('class') == "default") {
$('div#wrap').removeClass("default");
$('div#wrap').addClass("medium");
}
else if($('div#wrap').attr('class') == "medium") {
$('div#wrap').removeClass("medium");
$('div#wrap').addClass("large");
}
else if($('div#wrap').attr('class') == "large") {
$('div#wrap').removeClass("large");
$('div#wrap').addClass("xlarge");
}
});
});
$(document).ready(function() {
$('div#utility p.resize span.decrease').click(function() {
if($('div#wrap').attr('class') == "xlarge") {
$('div#wrap').removeClass("xlarge");
$('div#wrap').addClass("large");
}
else if($('div#wrap').attr('class') == "large") {
$('div#wrap').removeClass("large");
$('div#wrap').addClass("medium");
}
else if($('div#wrap').attr('class') == "medium") {
$('div#wrap').removeClass("medium");
$('div#wrap').addClass("default");
}
});
});
HTML: