[jQuery] Re: Help with draggable / droppable
The draggable plugin only moves the element on screen (changes it's
top and left offset), it does not natively affect the DOM in any other
way. The proper way to handle this is to do what you did in the drop
callback, which is to modify the DOM yourself, but you shouldn't need
a cloned helper to accomplish this.
On Jan 18, 9:55 am, Kevin Thorpe [EMAIL PROTECTED] wrote:
Thanks for your comments. I've just cracked it (I think). I was getting
the drop event ok but couldn't work out how to move the dragged div. It
was just sitting where I'd dropped it.
The secret is to use a cloned helper with $('.drag').draggable({helper:
'clone'}); and then move the original draggable div using:
$(.drop).droppable({
accept: .drag,
tolerance: 'pointer',
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) {
if (this.children.length == 0) {
$(this).append(ui.draggable.element);
}
}
});
I think my problem was that without a helper the draggable div is
converted to position: absolute so that it didn't matter which table
cell it was in.
I just wish I knew more about the DOM.
[jQuery] Re: How do I use a general error message with the Validation plugin?
Check out the Marketo demo which is included in v1.2rc1 (see http://tinyurl.com/ytgwmf). In particular, look at lines 28-40 in mktSignup.js. On Jan 18, 9:49 pm, Nazgulled [EMAIL PROTECTED] wrote: Hi, I'm using the Validation plugin (http://bassistance.de/jquery-plugins/ jquery-plugin-validation/) but I'm having a little problem that's making me crazy. I've searched a lot and I've read the documentation over and over but I don't know how to do this. I've setup the plugin correctly with my form and everything is working fine, the form is validated correctly. However, for each input, there is a specific error message. I want to get rid of this error message and place a general message saying there are errors, check the highlighted boxes. I've already highlighted the boxes with erros I just don't know how to hide the error messages and display a general one. Help please!
[jQuery] Re: jQuery for Designers
Ø Wherever you display code in your articles, it appears to be only a few lines of scrollable text (iframe?). Ø I want to check out the rest of your site but its hard to look at code this way :( I very much agree with this point. Its very hard to grasp the context of certain code when its all strung out into one line. Id rather see and would benefit from the code before laid out as it is on a real page, rather than condensed into a textaarea (I assume) just for the sake of appearance on the page (again, as assumption.) Rick From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Gautam Lad Sent: Friday, January 18, 2008 4:33 PM To: jquery-en@googlegroups.com Subject: [jQuery] Re: jQuery for Designers Very cool. I ended up checking out your blog site as well. A suggestion: Wherever you display code in your articles, it appears to be only a few lines of scrollable text (iframe?). I want to check out the rest of your site but its hard to look at code this way :( Looking forward to reading more :) Remy Sharp [EMAIL PROTECTED] wrote: Hi all, I recently started a new project called jQuery for Designers (http:// jqueryfordesigners.com) aimed, obviously at designers, but also subtly at jQuery beginners. It's a fortnightly tutorial aimed at different areas of web niftyness that can be done using jQuery. I guess the irony is the design of the blog (straight off the shelf)! - but ignoring that for a moment :-) I'd love to hear your feedback, suggestions or criticisms. Many thanks, Remy Sharp blog ~ http://remysharp.com work ~ http://leftlogic.com
[jQuery] Re: Using getJSON...not successful
Now, I've never used Ajax, so this is just a short in the dark
at the broad side of a barn.
With that in mind, I was wondering if the /mysite/myajax part
shouldn't have an extension on the myajax part, as in myajax.html
or something?
If not why not? Isn't that referring to a specific page on your site?
Rick
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of gms
Sent: Friday, January 18, 2008 6:13 PM
To: jQuery (English)
Subject: [jQuery] Using getJSON...not successful
Hello,
I am new to JQuery. I'm trying to get a JSON response back from my
django view. However, I guess my data never gets loaded
successfully. Does anybody know what I'm doing wrong?
script
$(document).ready(function(){
$(#first).click(function(){
$.getJSON(/mysite/myajax, function(data) {
alert(Here);
});
});
});
/script
def myajax(request):
a = Testimonial.objects.all()[:3]
response_dict = {}
response_dict.update({'a': a})
return HttpResponse(simplejson.dumps(response_dict),
mimetype='application/javascript')
///
Whenever I access this page and click on my div that contains the id
'first'...nothing happens. I should see an alert that says 'Here'.
Any Suggestions on what I'm doing wrong?
Thanks
[jQuery] Re: Making a Click to bring up user information link in jQuery
Could really use some help figuring this out On Jan 17, 6:06 pm, Sykoi [EMAIL PROTECTED] wrote: I apologize for the subject, it doesn't really explain what I'm having troubles with right now... Basically I need to create a little div popup that comes up (And stays up until an X is pressed in it), when you click on a username in a chat. Now here's the tricky part! The userIDs aren't always the same, they're gotten from AJAX and saved into the div (div class=username name=username id=user_id)... How would I go about doing this? I need to make it so when you click div with the name of username, it will use the id to pass through a function and load another div, while getting more user information from AJAX (Storing it into an array so it doesn't have to again, of course), and printing that into the div. As far as I know, events aren't capable of this outright... So what do I do? The AJAX part I get, but the events still baffle me.
[jQuery] creating a table from an array
My use case is pretty common and surely it is in some tutorial but I
cannot find the right place
where to look, so let me post here. I would like to generate an HTML
table from JSON data
coming from a server.
I am a very green when it comes to Javascript, so naively I wrote the
following
code:
var a = [[a,b,c],[1,2,3],[4,5,6]]; // the array will be read
from the server in the real app
$(#mytable).click(function()
{
$
(this).append(table);
$
(this).append(thead);
$
(this).append(tr);
for(j=0; j3; j++)
{
$(this).append(th + a[0][j] + /
th);};
$(this).append(/
tr);
$(this).append(/
thead);
$
(this).append(tbody);
for(i=1; i3; i++)
{
$
(this).append(tr);
for(j=0; j3; j++)
{
$(this).append(td + a[i][j] + /
td); };
$(this).append(/
tr); };
$(this).append(/
tbody);
$(this).append(/
table);
});
When I click on #mytable and I look at the generated HTML with Firebug
I get
table/
thead/
tr/
tha/th
thb/th
thc/th
tbody/
tr/
td1/td
td2/td
td3/td
tr/
td4/td
td5/td
td6/td
What's happening here? It seems .append is inserting closed tags
instead of what I told
it to append. I am pretty convinced that I should have generated the
tags with
document.createElement instead, but I did expect .append to work for
a quick and
dirty experiment. Anybody here can shed some light?
TIA,
Michele Simionato
[jQuery] Re: Design question.
A good start, but I see a few issues here. Both from the same line of code:
var id = $(this).parent().parent().attr('id).substr(1);
1) the structure has to be known for this to work. (i.e. the ancestor
element two levels up contains the ID). This may be a non-fixable thing
though. You're going to have to know where the information is stored
somehow. And doing something like
$(this)[0].extraData = $(#IDelement) leads to circular references...
2) the ID now needs to be processed. For a small number of items this
isn't bad, but as the complexity of your page increases, you end up with
a whole set of modifcations that have to be parsed out. For instance,
in your sample you have id=u4. But if that same ID has to be used in
other places, you end up with x4, y4, etc. Maybe it's a moot point
though in that you are just stripping off the text that makes the ID
unique, and then just working with the value anyways - in which case
it'll always be .substr(1), which will always be relatively fast.
3) This deals well enough with items where you have a single piece of
information needed (the ID in this case). But breaks down when you
start needing to access multiple items for a given action. I have a
specific example where I need to know the employee name (stored at the
TR level), and the date represented by the cell clicked on. These two
items are passed to an Ajax call for further processing. Using the date
as an ID is a non-starter (same date used on multiple rows). But
using it as a class is also problematic - what if you had
class=1-Jan-2006 odd taskHeader ?
4) Scalability. with smaller data sets, the amount of processing is
negligible and can be safely ignored. But increase the volume of data
and the amount of processing becomes a problem. If it takes 10
milliseconds to process one item, what happens when you have 1000+ items?
Then again, I think I mixing up different aspects of the problem -
creating the output, and then dealing with events afterwards. Either
way, I'm still looking for methods that would minimize performance issues.
I do have a specific sample in mind, but this issue is rather generic I
think. Thanks for the response. I think it's a good starting point. :)
Shawn
J Moore wrote:
A simple work around is to append a character to the id to keep them
unique. But also, store the ID in the parent TR.
e.g.
tr id=u4
td class=empBob Smith/td
tddiv class=1-Jan-2008link 1/div/td
/tr
Then you can get the id with
$('div.1-Jan-2008').click(function() {
var id = $(this).parent().parent().attr('id).substr(1);
alert(do something with employee id:+id);
});
would that work?
On Jan 18, 7:43 pm, Shawn [EMAIL PROTECTED] wrote:
I have a case that is going to prove to be processor intensive, so am
looking for suggestions on how to make the code as responsive as
possible. In addition, I'm a little stumped on how to resolve a problem
with my IDs.
I have a page that will list hundreds of people (I'm ignoring paging for
now, it's just not quite suitable). For each person there will be a
number of actionable items/links. Each of these links imply to do
something different, but all rely on the employee ID, These links will
also be embedded in sub-structures (divs/tables, etc.) So a sample of
one row might look something like this:
tr
tdBob Smith/td
tddivlink 1/div/td
tdtabletrtdlink2/td/tr/table/td
/tr
(this is very contrived to help illustrate the design issues... :)
Now the problem. If the first link (though it could be anywhere on the
row) were to trigger a Cluetip with details for that employee and item,
I'll need the employee ID, and supporting information (a date say, based
on what column it's in). In my current code I've done this:
tr
td id=4Bob Smith/td
tddiv id=4 class=1-Jan-2008link 1/div/td
/tr
Now this isn't valid HTML because the IDs are not unique. But, I need
the ID to do the needed processing. I can't just ask for the first
sibling's ID, because my trigger elements are embeded in other
structures. The content is dynamic, so it may or may not have the same
structure (it would be one of a small handful of possible structures)
each time - so I can't embed the structure (i.e.
.parents(tr).children(td:first) ). My reasoning here is that if I
put the target ID as close as possible to the trigger element, there is
less processing needed to get that ID - which is a large factor when
dealing with hundreds of rows on the page.
So, my question is what others are doing in this sort of situation.
I've tried various techniques, including building a JS object structure
with the pertinent data, but keep hitting a performance issue. Maybe I
need to embed an object on each of my trigger elements that contains the
needed data? Something like $(#trigger)[0].extraData = { id: 4 }; ?
But won't this run into run-away memory usage when I'm dealing with
potentially thousands of these triggers
[jQuery] Using toggle show fast and hide slow!!
how can i show a div slow and hide it fast using toggle? thnx
[jQuery] Re: $.post related question
On 19 Gen, 01:38, Jack Killpatrick [EMAIL PROTECTED] wrote:
You might find this useful for serializing your data and working with
the dynamically created forms:
http://www.malsup.com/jquery/form/#fields
Thank you, it'll come handy for some other task :)
I've found a solution for my problem anyway.. instead of passing the
list of POST inside {} I tried to use the
name=valueothername=value form and it worked..
I'll attach the code below so that it can be helpful for other people.
(anyway, could anyone give me a solution in case i wanted to use the
{ name: value, othername: value } format for options? I don't really
get why my attempts resulted in miserable failures :))
// we set some constant values to be POST'd
var options = 'action=savefieldset='+fieldset;
$(table.form).find(input).map(function() {
var name = $(this).attr(name);
var type = $(this).attr(type);
var value = $(this).val();
// i just need input type=text to be dealt by this specific
function, so..
if(type == text) {
options += ''+name+'='+value;
}
});
// we POST the data adding some randomness and push the result into a
given div
$.post('page.php?rand='+Math.round(Math.random()*10)+'', options ,
function(data) {
$('fieldset#'+fieldset+' div.data').html(data);
});
[jQuery] jQuery HTML Modified
I am running a simple script to grab an image name and throw it into a
page every 15 seconds. The problem is that when I pass some HTML for
an image tag to jQuery to have it inserted, it seems to be modifying
it so that it is set to display:none. Is there any way I can fix this?
script type=text/javascript
function in_banner(image, id){
return('a href=banners.php?jump=' + id + 'img src=content/
img/banners/' + image + '' + /a\n);
};
function write_updates(json){
$(#banner_zone_xa).empty();
$(#banner_zone_xa).append(in_banner('clam.gif', '2'));
};
/script
[jQuery] $.ajax not refreshing content - nothing happening in the callback
Hi all,
this is a really strange one. Not sure where I found the example code
for this, but it has been working for me without an issue and I have
it running multiple times on my site.
But for some reason in this one instance it isn't working, and I keep
checking everything and it all looks fine to me.
This is a part of an ajax form and on submit I want to refresh the
selected note area with the content of what was entered.
Everything runs fine, no errors, but the content never changes until I
refresh the entire page (so the ajax response isn't working).
Using firebug I can see the response is being returned to the browser
properly, and I can see from the 'alert(id2)' that the id I am trying
to write to is in the html document.
[code]
function getNotes(){$(.addNote).click(function(event) {
var id = this.id;
var posTop = event.pageY-130;
var posLeft = event.pageX-130;
$.ajax({
type: POST,
url: processes/addNote.php,
data: id,
success: function(response){
$(#addNoteForm).css({ position:
'absolute', top: posTop, left:
posLeft });
$(#addNoteForm).fadeIn(slow).html(response);
var id2 = id.replace(/f=e/, '');
var id2 = id2.replace(/f=d/, '');
var options = {
target:'#addNoteForm', // target element(s) to be
updated with server response
success: showResponse
};
// bind to the form's submit event
$('#addNoteForm').submit(function() {
// inside event callbacks 'this' is the DOM element so we
first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and
page navigation
return false;
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
// formData is an array; here we use $.param to convert it to a
string to display it
// but the form plugin does this for you automatically when it
submits the data
var queryString = $.param(formData);
// jqForm is a jQuery object encapsulating the form element. To
access the
// DOM element for the form do this:
// var formElement = jqForm[0];
alert('About to submit: \n\n' + queryString);
// here we could return false to prevent the form from being
submitted;
// returning anything other than false will allow the form submit
to continue
}
// post-submit callback
function showResponse(options) {
// for normal html responses, the first argument to the success
callback
// is the XMLHttpRequest object's responseText property
// if the ajaxSubmit method was passed an Options Object with the
dataType
// property set to 'xml' then the first argument to the success
callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxSubmit method was passed an Options Object with the
dataType
// property set to 'json' then the first argument to the success
callback
// is the json data object returned by the server
$.ajax({
type: POST,
url: processes/addNote.php,
data: id+f=r,
success: function(response2){
$(#+id2).html(response2);
alert(id2);
$(#addNoteForm).fadeOut(slow);
}
});
}
}
});
});
};
[/code]
Any ideas?
[jQuery] blur FireFox/IE
Hi, i'm trying to do a function on blur event, it works on Firefox but
not on IE. what's the reason?
I just do this:
$('.down_menu.show').livequery('blur', function(){
$(this).removeClass('show');
});
Maybe i should precise i'm using jquery 1.2.1
[jQuery] Problem with cluetip using ajax displays an empty tooltip!
Hello, I have set up a test page here: http://www.jahlabs.de/jquery/test3/um/ When you hover over the to icons in the column data, the tooltip is being showed but there is no content. If I remove the file that should be loaded by ajax (http://www.jahlabs.de/jquery/test3/um/ajax.html), I see the content of the tooltip content could not be loaded. And if I have the file ajax.html, I don't see it so that means that he could load it doesn't it? But why it isn't displayed than correctly? Thanks!
[jQuery] Re: jQuery for Designers
Thanks for the positive feedback. @McLars - thanks for that, it was just a plain old typo. @Gautam - it's a div with overflow auto. Either way, I completely agree and I've been in the process of redesigning my blog template. Stripping it down, and making the main content a lot wider so all the code can be seen without it overflowing. Cheers.
[jQuery] Re: Click event calls twices
thanks a lot for the response. i dont know whats happens same code is working OK now. just after restarting the PC. :|
[jQuery] Re: Still working out drop-down div menu...
Hi, Karl...
Have we stalled out on this project? I've been concerned about
asking too much of you. If you want to transition this to a paid project,
just let me know!
Rick
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Rick
Faircloth
Sent: Thursday, January 17, 2008 12:05 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Still working out drop-down div menu...
Well... my attempts to fix the details div showing with content
didn't work. At least I think I changed all the padding and line-heights
that I attempted to change back to the way they were. However, now the
issue seems to have disappeared! Whatever... as long as it works!
The last issue I see now is that *sometimes* when I move the mouse between
menu items, especially the home and buyers menu items, the details-div slides
up
and the details content remains on the screen. It's not always that way, but
it
does happen in both IE and FF. Any ideas on that?
From what I can tell, you've taken the route of separating the actual div
with the
details from the div that slides down. Is that part of what complicates the
synchronization of the display div and the content or details div?
Would it be simpler to actually put the details *inside* the display div to
eliminate the possibility of details being left on the screen without the
background div?
It would seem that placing the details actually in the display div would tied
them
together so that if the display div is visible, the details must be, too, and
vice versa.
And, this is just minor at this point, the details would actually be sliding
up and down
with the display div.
Looks like this may be a two-wish-list-gift assistance! :o)
Thanks,
Rick
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Rick
Faircloth
Sent: Thursday, January 17, 2008 11:17 AM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Still working out drop-down div menu...
Ok... thanks, Karl. It seems to be working better.
I'm going to make a change in the padding of the ul, #id=ul-index
because the bottom of the li's contained therein aren't currently
reaching as far down as the #menu-index... there's a gap of about
6px at the bottom which allows the details div to expend without
showing the menu content.
My initial results show this solution will work. I'll make you mods
first, then mine, then test on IE6, IE7, and FF2 (Windows All) and
report back.
Thanks, again for all the work!
Rick
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of
Karl
Swedberg
Sent: Thursday, January 17, 2008 10:28 AM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Still working out drop-down div menu...
Hi Rick,
After several failed attempts, I think I have this working for you. I
had to set a flag for the menu-details div's visibility (I called it
bVis). It's initially set to false. In the mouseover argument of $
('#menu-index').hover(...), it gets set to true in the callback of $
('div.menu-details').slideDown(). It thengets reset to false on
mouseout.
Then for the mouseover argument of ... .find('li').hover(), it does a
slide down of the corresponding div if bVis is false and a
simple .show() if it's true. Worked in my limited testing with FF 2 Mac.
http://test.learningjquery.com/c21.html
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jan 16, 2008, at 9:42 PM, Rick Faircloth wrote:
Thanks, Karl!
This is a chance, too, for me to find out what the
expander plug-in is! Haven't heard of that one, yet...
Rick
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery-
[EMAIL PROTECTED] On Behalf Of Karl
Swedberg
Sent: Wednesday, January 16, 2008 8:46 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Still working out drop-down div menu...
Hey Rick,
Glad to hear that you're making progress! I'll take a look at the
page
again tonight and offer a suggestion (and possibly a demo) for
getting
the content to slide down with that details div.
Only because you asked ... you can find a link to my amazon.com wish
list on my Expander plugin page:
http://plugins.learningjquery.com/expander/
(wow, I just shamelessly promoted my plugin AND publicly announced
where my wish list could be found. Brazen!)
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jan 16, 2008, at 7:56 PM, Rick Faircloth wrote:
I got the changes implemented that you made, Karl
and things are working very well! I've still got to
study just what
[jQuery] Re: How do I use a general error message with the Validation plugin?
Thank you, that fixed it! I tried using $.validator.messages.required = ; before, but I didn't noticed the version was 1.2 instead of 1.1 (the one I was using). On Jan 19, 2:17 pm, Scott González [EMAIL PROTECTED] wrote: Check out the Marketo demo which is included in v1.2rc1 (seehttp://tinyurl.com/ytgwmf). In particular, look at lines 28-40 in mktSignup.js. On Jan 18, 9:49 pm, Nazgulled [EMAIL PROTECTED] wrote: Hi, I'm using the Validation plugin (http://bassistance.de/jquery-plugins/ jquery-plugin-validation/) but I'm having a little problem that's making me crazy. I've searched a lot and I've read the documentation over and over but I don't know how to do this. I've setup the plugin correctly with my form and everything is working fine, the form is validated correctly. However, for each input, there is a specific error message. I want to get rid of this error message and place a general message saying there are errors, check the highlighted boxes. I've already highlighted the boxes with erros I just don't know how to hide the error messages and display a general one. Help please!
[jQuery] re[jQuery] placing TBODYs
I'm going to be replacing the contents of TBODY elements with an ajax call
which results in TR elements. Will this:
$('#myTbody').load(myUrlAndSelector)
reconstruct the table body properly or will I have to manually process the
row elements myself along these lines:
$.get(myUrl, function(data){
$(data).appendTo('#myTbody');
});
--
View this message in context:
http://www.nabble.com/replacing-TBODYs-tp14973659s27240p14973659.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: creating a table from an array
Firebug shows you the HTML as it understands it. So if it doesn't look
right, it usually means you are creating invalid HTML.
The biggest problem with your example, is that you are calling
append() repeatedly, and I don't think the elements are being inserted
where you expect. What type of element is #mytable? If it is an anchor
tag, then you are appending your entire table inside an a element!
Probably not what you wanted.
I would suggest you use strings to build your HTML, and then just add
it all at once. Cleaner, simpler and faster. Something like...
var r = '';
for (...) {
r += trtd + data + /td./tr;
}
$('#a-div-to-hold-your-table').html('table'+r+'/table');
-jason
On Jan 19, 1:59 am, [EMAIL PROTECTED]
[EMAIL PROTECTED] wrote:
My use case is pretty common and surely it is in some tutorial but I
cannot find the right place
where to look, so let me post here. I would like to generate an HTML
table from JSON data
coming from a server.
I am a very green when it comes to Javascript, so naively I wrote the
following
code:
var a = [[a,b,c],[1,2,3],[4,5,6]]; // the array will be read
from the server in the real app
$(#mytable).click(function()
{
$
(this).append(table);
$
(this).append(thead);
$
(this).append(tr);
for(j=0; j3; j++)
{
$(this).append(th + a[0][j] + /
th);};
$(this).append(/
tr);
$(this).append(/
thead);
$
(this).append(tbody);
for(i=1; i3; i++)
{
$
(this).append(tr);
for(j=0; j3; j++)
{
$(this).append(td + a[i][j] + /
td); };
$(this).append(/
tr); };
$(this).append(/
tbody);
$(this).append(/
table);
});
When I click on #mytable and I look at the generated HTML with Firebug
I get
table/
thead/
tr/
tha/th
thb/th
thc/th
tbody/
tr/
td1/td
td2/td
td3/td
tr/
td4/td
td5/td
td6/td
What's happening here? It seems .append is inserting closed tags
instead of what I told
it to append. I am pretty convinced that I should have generated the
tags with
document.createElement instead, but I did expect .append to work for
a quick and
dirty experiment. Anybody here can shed some light?
TIA,
Michele Simionato
[jQuery] Re: Callback-return into global variable
Couple of thoughts:
1) $.each() is not for moving through an array. (is for doing
something to each matched DOM element) try: for(item in _json)
{ alert('item:'+item);}
2) try defining your global as an object. e.g. var _json = {};
-jason
On Jan 16, 2:17 am, Niels [EMAIL PROTECTED] wrote:
Is there any way to put a return from within a callback into a global
variable? I'm trying to retrieve JSON-values in one statement, and
output them in another statement; and code looks like this:
var _json;
function load_comments(id, params) {
if (typeof id != 'number' typeof id == 'object' params == null)
{
// Only the params were specified.
_params = process_params(id);
$.getJSON(paths.get_comment, _params, function(data) { _json
= data;
return _json; });
console.info('1 : $.getJSON(' + paths.get_comment + ', ' +
_params +
')');
}
}
function display_comments() {
load_comments();
$.each(_json.comments, function(comment) {
$(#recent-comments-list).append(li + comment.content +
/
li);
});
}
Unfortunately, _json seems to remain undefined... What am I doing
wrong? Or is there really no way to accomplish this?
Thanks a lot!
Niels
[jQuery] Re: $.ajax not refreshing content - nothing happening in the callback
Is it because of caching? Try adding cache:false to your $.ajax
options.
On Jan 18, 7:52 pm, pedalpete [EMAIL PROTECTED] wrote:
Hi all,
this is a really strange one. Not sure where I found the example code
for this, but it has been working for me without an issue and I have
it running multiple times on my site.
But for some reason in this one instance it isn't working, and I keep
checking everything and it all looks fine to me.
This is a part of an ajax form and on submit I want to refresh the
selected note area with the content of what was entered.
Everything runs fine, no errors, but the content never changes until I
refresh the entire page (so the ajax response isn't working).
Using firebug I can see the response is being returned to the browser
properly, and I can see from the 'alert(id2)' that the id I am trying
to write to is in the html document.
[code]
function getNotes(){$(.addNote).click(function(event) {
var id = this.id;
var posTop = event.pageY-130;
var posLeft = event.pageX-130;
$.ajax({
type: POST,
url: processes/addNote.php,
data: id,
success: function(response){
$(#addNoteForm).css({ position:
'absolute', top: posTop, left:
posLeft });
$(#addNoteForm).fadeIn(slow).html(response);
var id2 = id.replace(/f=e/, '');
var id2 = id2.replace(/f=d/, '');
var options = {
target:'#addNoteForm', // target element(s) to be
updated with server response
success: showResponse
};
// bind to the form's submit event
$('#addNoteForm').submit(function() {
// inside event callbacks 'this' is the DOM element so we
first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and
page navigation
return false;
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
// formData is an array; here we use $.param to convert it to a
string to display it
// but the form plugin does this for you automatically when it
submits the data
var queryString = $.param(formData);
// jqForm is a jQuery object encapsulating the form element. To
access the
// DOM element for the form do this:
// var formElement = jqForm[0];
alert('About to submit: \n\n' + queryString);
// here we could return false to prevent the form from being
submitted;
// returning anything other than false will allow the form submit
to continue
}
// post-submit callback
function showResponse(options) {
// for normal html responses, the first argument to the success
callback
// is the XMLHttpRequest object's responseText property
// if the ajaxSubmit method was passed an Options Object with the
dataType
// property set to 'xml' then the first argument to the success
callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxSubmit method was passed an Options Object with the
dataType
// property set to 'json' then the first argument to the success
callback
// is the json data object returned by the server
$.ajax({
type: POST,
url: processes/addNote.php,
data: id+f=r,
success: function(response2){
$(#+id2).html(response2);
alert(id2);
$(#addNoteForm).fadeOut(slow);
}
});
}}
});
});
};
[/code]
Any ideas?
[jQuery] help optimizing code
I'm taking my first steps with jQuery, and have run into a performance
problem. I am trying to construct a customized inline comment system
for a project I am working on, similar to the one used on:
http://www.djangobook.com/en/1.0/chapter02/
Before I figure out the server side, I wanted to build a working
client side implementation. I have posted a rough draft here:
http://www.instantdjango.com/beta/chapter1.html
If you view the page source you will see the following javascript:
$(document).ready(function(){
var comment_data = eval(' [{pk: 1, model: book.comment,
fields: {name: C. Lesh, comment: This paragraph is great!,
chapter: 2, paragraph: 0}}, {pk: 2, model: book.comment,
fields: {name: Steve Smith, comment: So far, so good.,
chapter: 2, paragraph: 0}},{pk: 3, model: book.comment,
fields: {name: Frank Rizzo, comment: You writing is awful.
Really awful, chapter: 2, paragraph: 1}},{pk: 4, model:
book.comment, fields: {name: Fabrizzio, comment: I like
Django., chapter: 2, paragraph: 0}},{pk: 5, model:
book.comment, fields: {name: Barbra, comment: You have
stuff you should be doing.!, chapter: 2, paragraph: 2}},{pk: 6,
model: book.comment, fields: {name: George B., comment:
What the heck is a Django?, chapter: 2, paragraph: 2}}] ');
var comments = [];
for (t=0;t$(p).length;t++){
temparray = []
for (i=0;icomment_data.length;i++){
if (comment_data[i].fields.paragraph == t)
{temparray.push(comment_data[i])};
};
comments[t] = temparray;
};
$(p).before(div class='flag'span class='has-comments'/span/
div);
$(p).after(div class='comment-container'/div);
$(.flag).each(function (i) {
if (comments[i].length 0) {
temphtml = ;
$(this).html(span class='has-comments' + comments[i].length
+ /
span);
for (z=0;zcomments[i].length;z++){
temphtml = temphtml + div class='sig' + comments[i]
[z].fields.name + /divdiv class='comment' + comments[i]
[z].fields.comment + /div;
}
$(.comment-container).eq(i).html(temphtml);
}
else {
$(this).html(span/span);
$(.comment-container).eq(i).html('Add a new comment.');
};
$(this).click(function(){
$(.comment-container).eq(i).slideDown(fast);
});
});
});
Here is my goal, in pseudocode:
1. Load the page, with data serialized as JSON coming from the server
(faked here by providing the JSON).
2. eval the JSON data into a variable.
3. crunch the JSON data into an array, so that I can figure out which
comments apply to which paragraphs
4. for every paragraph in the document add a div before and after
5. fill in the number of comments into the appropriate flag div, and
the comments into the comment div
The script works, but it is slow for 109 paragraphs.
Any suggestions to speed things up?
The main problem I see (Firefox, Windows XP) is that the page does not
display at all until the javascript finishes processing. Is there a
way to display the page first, then run the javascript? Maybe I could
center a div that says loading comments and hide it after the
comments load, but as things stand the browser freezes for 5 or so
seconds.
Help?
Thanks in advance,
CJL
[jQuery] Simple accordion
Look here is something interesting http://www.apple.com/iphone/ ( left
bottom)
I tried to make a script like that., but I have an animating problem.
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
script src=http://code.jquery.com/jquery-latest.js;/script
script
$(document).ready(function(){
all = $(#all *);
all.mouseover (
function() {
$(.curent).animate({height:'100px'});
$(this).animate({height:'200px'});
all.not(this).attr(class,cel);
$(this).attr(class,curent);
}
);
});
/script
style
.cel {
background:#7D7D7D;
height:100px;
width:100px;
border:1px solid black;
}
.curent {
background:#969696;
width:100px;
border:1px solid black;
}
/style
/head
body
div id=all
div class=cel
div 1
/div
div class=cel
div 1
/div
div class=cel
div 1
/div
div class=cel
div 1
/div
/div
/body
/html
I want the to have the same height overall.
Just test the script, and you will know my problem .
Please Help ME!
[jQuery] jQuery 1.2.2 Rev: 4454 and jquery-nightly.pack throwing errors?
This has got to be some error on my side but in case it isn't, I'm seeing the below errors in FF2.0.0.11 with Firebug 1.05 at http://www.t1shopper.com/voip/ so I'm switching back to jQuery 1.2.1 Rev: 3353 this.setArray is not a function http://www.t1shopper.com/ssi/jquery/jquery.pack.js Line 6 $(document).ready is not a function http://www.t1shopper.com/voip/ Line 25 E(document).triggerHandler is not a function http://www.t1shopper.com/ssi/jquery/jquery.pack.js Line 6 http://code.jquery.com/nightlies/jquery-nightly.pack.js
[jQuery] Registering 'callbacks' for when jQuery finishes loading.
Would it be possible to have jQuery execute a list of callbacks (held in a global object) once it has finished loading? This would be especially useful when jQuery gets loaded dynamically (e.g. by doing a document.write ). Thanks! Jean-Lou Dupont
[jQuery] Re: jQuery for Designers
Looks great, Remy! An excellent addition to the documentation and tutorials out there. I can't remember off the top of my head who is in charge of planet.jquery.com, but you should definitely get this added to it. --Karl _ Karl Swedberg www.englishrules.com www.learningjquery.com On Jan 18, 2008, at 12:20 PM, Remy Sharp wrote: Hi all, I recently started a new project called jQuery for Designers (http:// jqueryfordesigners.com) aimed, obviously at designers, but also subtly at jQuery beginners. It's a fortnightly tutorial aimed at different areas of web niftyness that can be done using jQuery. I guess the irony is the design of the blog (straight off the shelf)! - but ignoring that for a moment :-) I'd love to hear your feedback, suggestions or criticisms. Many thanks, Remy Sharp blog ~ http://remysharp.com work ~ http://leftlogic.com
[jQuery] Re: Problem with cluetip using ajax displays an empty tooltip!
Hi, I think the problem is that your ajax.html is not a well-formed document. It has nothing in it but text and a single br /. Try making it a real HTML document and put the text inside the body element. --Karl _ Karl Swedberg www.englishrules.com www.learningjquery.com On Jan 19, 2008, at 6:33 AM, KnoxBaby wrote: Hello, I have set up a test page here: http://www.jahlabs.de/jquery/test3/um/ When you hover over the to icons in the column data, the tooltip is being showed but there is no content. If I remove the file that should be loaded by ajax (http://www.jahlabs.de/jquery/test3/um/ajax.html), I see the content of the tooltip content could not be loaded. And if I have the file ajax.html, I don't see it so that means that he could load it doesn't it? But why it isn't displayed than correctly? Thanks!
[jQuery] Re: help optimizing code
CJL,
For 109 paragraphs, rewriting the HTML may always be slow, depending
on the client. You could have $(document).ready put up a 'loading...'
message and then launch a setTimeout, and have your DOM-manipulation
code run after 500ms or so, whatever's long enough to get the page to
display. $(document).ready is meant to start processing as soon as
possible, which in your case means the client hasn't even seen the
page fully rendered yet. Server-side processing could be much faster,
but I don't know your ultimate goal.
That being said, you could try optimizing your CSS selectors, so that
jQuery doesn't start from scratch every time you go to select an
element. Selecting by ID is very fast, for instance. Since you know
all your P elements are inside a DIV with ID=bd, you could do this
instead:
$(#bd p)
.before(div class='flag'span class='has-comments'/span/
div)
.after(div class='comment-container'/div);
Chaining these methods lets jQuery only look once, which will cut your
search time in half.
$(this).html(span/span);
Is this line necessary here? Or could you add that span later, when
it is edited?
There may be other optimizations but these are the first I thought of.
HTH,
Charles
doublerebel.com
On Jan 19, 9:59 am, cjl [EMAIL PROTECTED] wrote:
I'm taking my first steps with jQuery, and have run into a performance
problem. I am trying to construct a customized inline comment system
for a project I am working on, similar to the one used on:
http://www.djangobook.com/en/1.0/chapter02/
Before I figure out the server side, I wanted to build a working
client side implementation. I have posted a rough draft here:
http://www.instantdjango.com/beta/chapter1.html
If you view the page source you will see the following javascript:
$(document).ready(function(){
var comment_data = eval(' [{pk: 1, model: book.comment,
fields: {name: C. Lesh, comment: This paragraph is great!,
chapter: 2, paragraph: 0}}, {pk: 2, model: book.comment,
fields: {name: Steve Smith, comment: So far, so good.,
chapter: 2, paragraph: 0}},{pk: 3, model: book.comment,
fields: {name: Frank Rizzo, comment: You writing is awful.
Really awful, chapter: 2, paragraph: 1}},{pk: 4, model:
book.comment, fields: {name: Fabrizzio, comment: I like
Django., chapter: 2, paragraph: 0}},{pk: 5, model:
book.comment, fields: {name: Barbra, comment: You have
stuff you should be doing.!, chapter: 2, paragraph: 2}},{pk: 6,
model: book.comment, fields: {name: George B., comment:
What the heck is a Django?, chapter: 2, paragraph: 2}}] ');
var comments = [];
for (t=0;t$(p).length;t++){
temparray = []
for (i=0;icomment_data.length;i++){
if (comment_data[i].fields.paragraph == t)
{temparray.push(comment_data[i])};
};
comments[t] = temparray;
};
$(p).before(div class='flag'span class='has-comments'/span/
div);
$(p).after(div class='comment-container'/div);
$(.flag).each(function (i) {
if (comments[i].length 0) {
temphtml = ;
$(this).html(span class='has-comments' +
comments[i].length + /
span);
for (z=0;zcomments[i].length;z++){
temphtml = temphtml + div class='sig' +
comments[i]
[z].fields.name + /divdiv class='comment' + comments[i]
[z].fields.comment + /div;
}
$(.comment-container).eq(i).html(temphtml);
}
else {
$(this).html(span/span);
$(.comment-container).eq(i).html('Add a new comment.');
};
$(this).click(function(){
$(.comment-container).eq(i).slideDown(fast);
});
});
});
Here is my goal, in pseudocode:
1. Load the page, with data serialized as JSON coming from the server
(faked here by providing the JSON).
2. eval the JSON data into a variable.
3. crunch the JSON data into an array, so that I can figure out which
comments apply to which paragraphs
4. for every paragraph in the document add a div before and after
5. fill in the number of comments into the appropriate flag div, and
the comments into the comment div
The script works, but it is slow for 109 paragraphs.
Any suggestions to speed things up?
The main problem I see (Firefox, Windows XP) is that the page does not
display at all until the javascript finishes processing. Is there a
way to display the page first, then run the javascript? Maybe I could
center a div that says loading comments and hide it after the
comments load, but as things stand the browser freezes for 5 or so
seconds.
Help?
Thanks in advance,
CJL
[jQuery] Re: Design question.
Hello Shawn,
Not having unique IDs will always cause trouble. Not recommended.
I've tried various techniques, including building a JS object structure...
Something like $(#trigger)[0].extraData = { id: 4 }; ?
If you need data stored relative to elements, you could store
information with jQuery.data.
http://docs.jquery.com/Internals/jQuery.data
I have found it to be a very fast way to have data relative to DOM
elements.
But breaks down when you start needing to access multiple items for a given
action...
You can store as much data attached to an element as you need with key/
value pairs with jQuery.data.
If you need to 'trigger' reading data from a link in a different
location, you could store the ID in the link's REL (or store the ID
with jQuery.data) and then grab the data from there. With
jQuery.data, if you can find the element somehow, you can retrieve all
its data.
HTH and hope it all makes sense...
Charles
doublerebel.com
On Jan 18, 8:00 pm, Shawn [EMAIL PROTECTED] wrote:
A good start, but I see a few issues here. Both from the same line of code:
var id = $(this).parent().parent().attr('id).substr(1);
1) the structure has to be known for this to work. (i.e. the ancestor
element two levels up contains the ID). This may be a non-fixable thing
though. You're going to have to know where the information is stored
somehow. And doing something like
$(this)[0].extraData = $(#IDelement) leads to circular references...
2) the ID now needs to be processed. For a small number of items this
isn't bad, but as the complexity of your page increases, you end up with
a whole set of modifcations that have to be parsed out. For instance,
in your sample you have id=u4. But if that same ID has to be used in
other places, you end up with x4, y4, etc. Maybe it's a moot point
though in that you are just stripping off the text that makes the ID
unique, and then just working with the value anyways - in which case
it'll always be .substr(1), which will always be relatively fast.
3) This deals well enough with items where you have a single piece of
information needed (the ID in this case). But breaks down when you
start needing to access multiple items for a given action. I have a
specific example where I need to know the employee name (stored at the
TR level), and the date represented by the cell clicked on. These two
items are passed to an Ajax call for further processing. Using the date
as an ID is a non-starter (same date used on multiple rows). But
using it as a class is also problematic - what if you had
class=1-Jan-2006 odd taskHeader ?
4) Scalability. with smaller data sets, the amount of processing is
negligible and can be safely ignored. But increase the volume of data
and the amount of processing becomes a problem. If it takes 10
milliseconds to process one item, what happens when you have 1000+ items?
Then again, I think I mixing up different aspects of the problem -
creating the output, and then dealing with events afterwards. Either
way, I'm still looking for methods that would minimize performance issues.
I do have a specific sample in mind, but this issue is rather generic I
think. Thanks for the response. I think it's a good starting point. :)
Shawn
J Moore wrote:
A simple work around is to append a character to the id to keep them
unique. But also, store the ID in the parent TR.
e.g.
tr id=u4
td class=empBob Smith/td
tddiv class=1-Jan-2008link 1/div/td
/tr
Then you can get the id with
$('div.1-Jan-2008').click(function() {
var id = $(this).parent().parent().attr('id).substr(1);
alert(do something with employee id:+id);
});
would that work?
On Jan 18, 7:43 pm, Shawn [EMAIL PROTECTED] wrote:
I have a case that is going to prove to be processor intensive, so am
looking for suggestions on how to make the code as responsive as
possible. In addition, I'm a little stumped on how to resolve a problem
with my IDs.
I have a page that will list hundreds of people (I'm ignoring paging for
now, it's just not quite suitable). For each person there will be a
number of actionable items/links. Each of these links imply to do
something different, but all rely on the employee ID, These links will
also be embedded in sub-structures (divs/tables, etc.) So a sample of
one row might look something like this:
tr
tdBob Smith/td
tddivlink 1/div/td
tdtabletrtdlink2/td/tr/table/td
/tr
(this is very contrived to help illustrate the design issues... :)
Now the problem. If the first link (though it could be anywhere on the
row) were to trigger a Cluetip with details for that employee and item,
I'll need the employee ID, and supporting information (a date say, based
on what column it's in). In my current code I've done this:
tr
td id=4Bob Smith/td
tddiv id=4 class=1-Jan-2008link 1/div/td
/tr
Now this isn't valid HTML because the IDs are not unique. But, I need
[jQuery] Minifying and packing failed because of Windows line endings
Hi, just in case someone else is running into this problem. Whenever I wanted to pack or minify a script of mine I got this error on the console (using ant): js: uncaught JavaScript runtime exception: TypeError: Cannot read property 0.0 from null With the help of Chris Thatcher I found that the following statement wasn't executing as expected: var header = script.match(/\/\*(.|\n)*?\*\//)[0]; It simply didn't match, and I found that this is because for some reason the file I wanted to pack had line endings of the form \r\n. Thus I added a little \r to the regular expression to make it work: var header = script.match(/\/\*(.|\n|\r)*?\*\//)[0]; In the end I converted the line delimiters though. Still I do wonder if I should add that little change? It took me quite some time to figure that out. --Klaus
[jQuery] Re: help optimizing code
Here are a few ideas. Not sure how much this will help, but worth a
shot...
1. put selectors that are used more than once into variables
2. rather than a bare class, use a tag name when possible in your
selectors
3. instead of using string concatenation to build a DOM structure, use
an array and join it
4. optimize your for loops by storing the length in a variable
Here is what it might look like:
$(document).ready(function(){
var comment_data = eval(' [{pk: 1, model: book.comment,
fields: {name: C. Lesh, comment: This paragraph is great!,
chapter: 2, paragraph: 0}}, {pk: 2, model: book.comment,
fields: {name: Steve Smith, comment: So far, so good.,
chapter: 2, paragraph: 0}},{pk: 3, model: book.comment,
fields: {name: Frank Rizzo, comment: You writing is awful.
Really awful, chapter: 2, paragraph: 1}},{pk: 4, model:
book.comment, fields: {name: Fabrizzio, comment: I like
Django., chapter: 2, paragraph: 0}},{pk: 5, model:
book.comment, fields: {name: Barbra, comment: You have
stuff you should be doing.!, chapter: 2, paragraph: 2}},{pk:
6,
model: book.comment, fields: {name: George B., comment:
What the heck is a Django?, chapter: 2, paragraph: 2}}] ');
var comments = [];
for (var t=0, p=$('p').length;tp;t++){
temparray = [];
for (var i=0, cd=comment_data.length; icd; i++){
if (comment_data[i].fields.paragraph == t) {
temparray.push(comment_data[i]);
}
}
comments[t] = temparray;
}
var $flag = $('div class=flag/div').insertBefore('p');
var $commentContainer = $('div class=comment-container/
div').insertAfter('p');
$flag.each(function (i) {
if (comments[i].length 0) {
var temphtml = ;
var $this = $(this);
$this.html('span class=has-comments' + comments[i].length +
'/span');
for (var z=0, c=comments[i].length;zc;z++) {
temphtml = [
temphtml,
'div class=sig',
comments[i],
[z].fields.name,
'/div',
'div class=comment',
comments[i],
[z].fields.comment,
'/div'
].join('');
}
$commentContainer.eq(i).html(temphtml);
} else {
$this.html('span/span');
$commentContainer.eq(i).html(Add a new comment.);
}
$this.click(function(){
$commentContainer.eq(i).slideDown('fast');
});
});
});
You might also want to try triggering all of this on $(window).load()
rather than $(document).ready()
by the way, I couldn't help myself, so I swapped all double quotes
with single quotes and vice versa. It's really just a preference, but
it makes more sense to me, especially when using HTML strings that
include attribute values.
Hope this helps. I didn't run this code, so I'm not 100% sure I don't
have a typo in there somewhere.
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jan 19, 2008, at 12:59 PM, cjl wrote:
I'm taking my first steps with jQuery, and have run into a performance
problem. I am trying to construct a customized inline comment system
for a project I am working on, similar to the one used on:
http://www.djangobook.com/en/1.0/chapter02/
Before I figure out the server side, I wanted to build a working
client side implementation. I have posted a rough draft here:
http://www.instantdjango.com/beta/chapter1.html
If you view the page source you will see the following javascript:
$(document).ready(function(){
var comment_data = eval(' [{pk: 1, model: book.comment,
fields: {name: C. Lesh, comment: This paragraph is great!,
chapter: 2, paragraph: 0}}, {pk: 2, model: book.comment,
fields: {name: Steve Smith, comment: So far, so good.,
chapter: 2, paragraph: 0}},{pk: 3, model: book.comment,
fields: {name: Frank Rizzo, comment: You writing is awful.
Really awful, chapter: 2, paragraph: 1}},{pk: 4, model:
book.comment, fields: {name: Fabrizzio, comment: I like
Django., chapter: 2, paragraph: 0}},{pk: 5, model:
book.comment, fields: {name: Barbra, comment: You have
stuff you should be doing.!, chapter: 2, paragraph: 2}},{pk: 6,
model: book.comment, fields: {name: George B., comment:
What the heck is a Django?, chapter: 2, paragraph: 2}}] ');
var comments = [];
for (t=0;t$(p).length;t++){
temparray = []
for (i=0;icomment_data.length;i++){
if (comment_data[i].fields.paragraph == t)
{temparray.push(comment_data[i])};
};
comments[t] = temparray;
};
$(p).before(div class='flag'span class='has-comments'/span/
div);
$(p).after(div class='comment-container'/div);
$(.flag).each(function (i) {
if (comments[i].length 0) {
temphtml = ;
$(this).html(span class='has-comments' + comments[i].length +
/
span);
for (z=0;zcomments[i].length;z++){
temphtml =
[jQuery] Re: Simple accordion
Remy Sharp recently wrote a good article about this type of effect:
http://jqueryfordesigners.com/slide-out-and-drawer-effect/
Especially look at his example using the Accordion plugin:
http://jqueryfordesigners.com/demo/plugin-slide-demo.html
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jan 19, 2008, at 1:13 PM, [EMAIL PROTECTED] wrote:
Look here is something interesting http://www.apple.com/iphone/ ( left
bottom)
I tried to make a script like that., but I have an animating problem.
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
script src=http://code.jquery.com/jquery-latest.js;/script
script
$(document).ready(function(){
all = $(#all *);
all.mouseover (
function() {
$(.curent).animate({height:'100px'});
$(this).animate({height:'200px'});
all.not(this).attr(class,cel);
$(this).attr(class,curent);
}
);
});
/script
style
.cel {
background:#7D7D7D;
height:100px;
width:100px;
border:1px solid black;
}
.curent {
background:#969696;
width:100px;
border:1px solid black;
}
/style
/head
body
div id=all
div class=cel
div 1
/div
div class=cel
div 1
/div
div class=cel
div 1
/div
div class=cel
div 1
/div
/div
/body
/html
I want the to have the same height overall.
Just test the script, and you will know my problem .
Please Help ME!
[jQuery] Re: Minifying and packing failed because of Windows line endings
thanks, Klaus. Good to know! --Karl _ Karl Swedberg www.englishrules.com www.learningjquery.com On Jan 19, 2008, at 3:28 PM, Klaus Hartl wrote: Hi, just in case someone else is running into this problem. Whenever I wanted to pack or minify a script of mine I got this error on the console (using ant): js: uncaught JavaScript runtime exception: TypeError: Cannot read property 0.0 from null With the help of Chris Thatcher I found that the following statement wasn't executing as expected: var header = script.match(/\/\*(.|\n)*?\*\//)[0]; It simply didn't match, and I found that this is because for some reason the file I wanted to pack had line endings of the form \r\n. Thus I added a little \r to the regular expression to make it work: var header = script.match(/\/\*(.|\n|\r)*?\*\//)[0]; In the end I converted the line delimiters though. Still I do wonder if I should add that little change? It took me quite some time to figure that out. --Klaus
[jQuery] ajax sending back redirect breaks history
I'm wondering whether there is a workaround or something I missed, or should i file a bug. When you make an ajax submit (with the jquery forms plugin), and you set the dataType to 'script', and the server returns window.location.href='some new location'; it successfully redirects, but instead of doing a location change it actually seems to do the equivalent of a window.replace(), because the browser no longer has the previous page in its history. I tested this on windows xp with firefox 2 and IE 7. If I use prototype in the exact same manner it works as i would expect keeping history intact, so i assume something specific is being done in the jquery module either on purpose or by accident. Any ideas or comments welcome. kris
[jQuery] error in ui/apps/gallery_advanced/
when move the slide at right-bottom. Firebug: array has no properties inArray(div, undefined) core.js (line ) click(Object type=mousedown target=div.handle)ui.mouse.js (line 70) (no name)()ui.mouse.js (line 57) handle(Object type=mousedown target=div.handle)event.js (line 254) (no name)()event.js (line 52) [Break on this error] for ( var i = 0, length = array.length; i length; i++ )
[jQuery] Re: help optimizing code
Thank you for your reply. I could do more on the server side, I'm guessing that python on the server will run faster than javascript in the browser. Chaining the selectors was a very good tip, and does seem to speed things up a little bit. Is there any way to 'profile' the javascript as I try to optimize it, to find out where the slow bits are? I'll give the setTimeout method a shot. If that will let the page render before running the javascript, the delay won't be so bad. -CJL
[jQuery] Minified download version has a large footprint
jquery-1.2.2.min.js is 51.4 KB Is that right?
[jQuery] JQuery and RapidWeaver
I am looking to implement JQuery toggle into a RW theme. Currently I am using Mootools to do this but I would like to use JQuesry because it seems to cause less conflict with 3rd party plug-ins. Currently here is how I have things set up: 1. In my master index.html file I have a line that references the mootools file like so: script type=text/javascript src=%pathto(js/mootools.v1.11.js)%/ script 2. Then in the body if the html I have : div id=drop_down!-- Start drop_down -- a href=# title=Show more content id=show_sidebar/a /div!-- End drop_down -- This invokes the drop down effect of the sidebar when you click on the Sidebar button. How should I go about getting JQuery to do the same thing? Gary BTW: The website I am referring to is http://www.rapidweaverthemes.com
[jQuery] Re: jQuery 1.2.2 Rev: 4454 and jquery-nightly.pack throwing errors?
You're using an old version of liveQuery - you've gotta upgrade to 1.0.2: http://plugins.jquery.com/project/livequery --John On Jan 19, 2008 1:15 PM, Geoff Millikan [EMAIL PROTECTED] wrote: This has got to be some error on my side but in case it isn't, I'm seeing the below errors in FF2.0.0.11 with Firebug 1.05 at http://www.t1shopper.com/voip/ so I'm switching back to jQuery 1.2.1 Rev: 3353 this.setArray is not a function http://www.t1shopper.com/ssi/jquery/jquery.pack.js Line 6 $(document).ready is not a function http://www.t1shopper.com/voip/ Line 25 E(document).triggerHandler is not a function http://www.t1shopper.com/ssi/jquery/jquery.pack.js Line 6 http://code.jquery.com/nightlies/jquery-nightly.pack.js
[jQuery] First posting
I'm not new to the web but the web hasn't been my major preoccupation. Therefore I feel like something of a neophyte, given all the development the web has gone through in recent years. I'm about to launch a new website which will be heavy on text. At the moment I'm assuming I need some code for a horizontal navigation bar with drop down menus, some CSS to make the typography pretty and readable on screen, some code to manage PayPal donations, reader feedback, that sort of thing. At the moment don't foresee much else (but one never knows). In the past couple of days I've been playing catchup on CSS and JavaScript. First I stumbled on Whatever:Hover at http://www.xs4all.nl/~peterned/csshover.html. Then I stumbled on two related sites: Prototype and Scriptaculous, which seem very impressive but may be overkill for what I want to do. Next I stumbled on http://www.seoconsultants.com/css/menus/horizontal/ which appears to have the navbar code I need. However their code doesn't work on IE on the Mac. I'd like to be as universal as possible. Finally I stumbled on jQuery which, at first glance, appears to be an alternative environment to Prototype and Scriptaculous. Question: I'm right at the beginning, still assessing the available tools to work with, yet fully aware whatever I choose I'll probably stick with for some time. Given what I've shared above, how appropriate/inappropriate is jQuery for a project such as mine? Would appreciate some frank feedback. Kind regards, Morley Chalmers
[jQuery] Re: First posting
jQuery plus its plugins have been the perfect tool for me. I am good at html/css and jQuery just fits in perfectly with those. In general, the jQuery base does alot of specific things. Animate something, change something, add click and hover handlers to things, ajax, etc. The plugins build on that base and make other UI widgets very easy. Start by doing some of the basic tutorials. A good foundation will make everything else a snap. http://docs.jquery.com/Main_Page http://docs.jquery.com/Tutorials Then browse the plugins and find the one that is right for you. http://plugins.jquery.com/ This list also is very helpful to get through any problems. Glen On Jan 19, 2008 11:36 AM, wanapitei [EMAIL PROTECTED] wrote: I'm not new to the web but the web hasn't been my major preoccupation. Therefore I feel like something of a neophyte, given all the development the web has gone through in recent years. I'm about to launch a new website which will be heavy on text. At the moment I'm assuming I need some code for a horizontal navigation bar with drop down menus, some CSS to make the typography pretty and readable on screen, some code to manage PayPal donations, reader feedback, that sort of thing. At the moment don't foresee much else (but one never knows). In the past couple of days I've been playing catchup on CSS and JavaScript. First I stumbled on Whatever:Hover at http://www.xs4all.nl/~peterned/csshover.htmlhttp://www.xs4all.nl/%7Epeterned/csshover.html. Then I stumbled on two related sites: Prototype and Scriptaculous, which seem very impressive but may be overkill for what I want to do. Next I stumbled on http://www.seoconsultants.com/css/menus/horizontal/ which appears to have the navbar code I need. However their code doesn't work on IE on the Mac. I'd like to be as universal as possible. Finally I stumbled on jQuery which, at first glance, appears to be an alternative environment to Prototype and Scriptaculous. Question: I'm right at the beginning, still assessing the available tools to work with, yet fully aware whatever I choose I'll probably stick with for some time. Given what I've shared above, how appropriate/inappropriate is jQuery for a project such as mine? Would appreciate some frank feedback. Kind regards, Morley Chalmers
[jQuery] Re: Minified download version has a large footprint
yep. that's about right. When it's gzipped by the server, its footprint is reduced to about 15k. a packed version (not requiring gzip) is ~28k. --Karl _ Karl Swedberg www.englishrules.com www.learningjquery.com On Jan 19, 2008, at 4:00 PM, Zhami wrote: jquery-1.2.2.min.js is 51.4 KB Is that right?
[jQuery] Re: Registering 'callbacks' for when jQuery finishes loading.
You don't need this if you are loading jQuery with document.write. Simply do another document.write after that with the code you want to want to run after jQuery is loaded, or include that code in the same document.write following the jQuery script tag. Script tags written with document.write are executed in order, just like script tags that appear directly in your HTML source. e.g. document.write( 'script type=text/javascript src=jquery.js\/script', 'script type=text/javascriptalert(jQuery);\/script' ); or: document.write( 'script type=text/javascript src=jquery.js\/script' ); document.write( 'script type=text/javascriptalert(jQuery);\/script' ); Either of these will do what you want. A jQuery is loaded callback would be useful in the case where you're loading jQuery via a dynamic script element instead of document.write, though. -Mike From: jldupont Would it be possible to have jQuery execute a list of callbacks (held in a global object) once it has finished loading? This would be especially useful when jQuery gets loaded dynamically (e.g. by doing a document.write ). Thanks! Jean-Lou Dupont
[jQuery] Re: creating a table from an array
You have 2 very basic problems with your code:
1. Usage of append()
The content you append() should be valid html in its own right.
For example, your first append does $(this).append('table'), when it
should really be $(this).append('table/table') which would insert
a TABLE element as the last child of the element referred to by
*this*.
Likewise with rows - $(this).append('tr/tr') - and cells - $
(this).append('td/td') - etc.
2. What you are appending to, ie *this*
In each and every case you are appending to $(this), where *this*
refers to the #mytable element that was originally clicked upon. For
the first append, the TABLE, this would be fine; however, when you
append a row (TR), for example, you actually want to append it to the
TABLE just added, not to *this*! Similarly for cells, you should be
appending the TDs to the rows (the TRs), not to *this*.
As an (extremely simple) example, appending a single row, single
celled table might look like...
$(this).append('table/table');
$('table', this).append('tr/tr');
$('tr', this).append('tdCell content/td');
As you can probably tell, this is not going to be a particularly
useful procedure to follow for very long if I wanted to add more rows
and cells, because either, the selector is going to get progressively
more complex trying to keep up with which element I am appending to,
or, I'm going to have to start storing stuff in variables.
Either way, it's a waste of effort having to keep going back to the
DOM to find the elements I've just added so that I can then append to
them.
As Jason has already pointed out, you would be better off constructing
your table's html and then doing a single append to the #mytable
element.
An alternative to using string concatenation is use an array. For
example, using var a=... from your code above, your click function
might resemble...
$('#mytable').click(function(){
var table = []
, numRows = a.length
, numCells = a.length ? a[0].length : 0
, r, c;
if(numCells){
table.push('tablethead');
// ... header row if needed?
table.push('/theadtbody');
for(r=0; rnumRows; r++){
table.push('tr');
for(c=0; cnumCells; c++){
table.push('td' + a[r][c] + '/td');
}
table.push('/tr');
}
table.push('/tbody/table');
$(this).append(table.join(''));
}
});
On Jan 19, 6:59 am, [EMAIL PROTECTED]
[EMAIL PROTECTED] wrote:
My use case is pretty common and surely it is in some tutorial but I
cannot find the right place
where to look, so let me post here. I would like to generate an HTML
table from JSON data
coming from a server.
I am a very green when it comes to Javascript, so naively I wrote the
following
code:
var a = [[a,b,c],[1,2,3],[4,5,6]]; // the array will be read
from the server in the real app
$(#mytable).click(function()
{
$
(this).append(table);
$
(this).append(thead);
$
(this).append(tr);
for(j=0; j3; j++)
{
$(this).append(th + a[0][j] + /
th);};
$(this).append(/
tr);
$(this).append(/
thead);
$
(this).append(tbody);
for(i=1; i3; i++)
{
$
(this).append(tr);
for(j=0; j3; j++)
{
$(this).append(td + a[i][j] + /
td); };
$(this).append(/
tr); };
$(this).append(/
tbody);
$(this).append(/
table);
});
When I click on #mytable and I look at the generated HTML with Firebug
I get
table/
thead/
tr/
tha/th
thb/th
thc/th
tbody/
tr/
td1/td
td2/td
td3/td
tr/
td4/td
td5/td
td6/td
What's happening here? It seems .append is inserting closed tags
instead of what I told
it to append. I am pretty convinced that I should have generated the
tags with
document.createElement instead, but I did expect .append to work for
a quick and
dirty experiment. Anybody here can shed some light?
TIA,
Michele Simionato
[jQuery] Re: animation queue ?
thanks Erik On Jan 17, 2008 7:39 PM, Erik Beeson [EMAIL PROTECTED] wrote: Check out here: http://erikandcolleen.com/erik/jquery/fxQueue/ Demo: http://erikandcolleen.com/erik/jquery/fxQueue/random.html Or here: http://brandonaaron.net/jquery/plugins/fxqueue/ Demo: http://brandonaaron.net/jquery/plugins/fxqueue/test/test.html --Erik On 1/17/08, Alexandre Plennevaux [EMAIL PROTECTED] wrote: hi friends, i'm storing the steps of a series of animations in an array, that have to occur one after the others, according to their index order in the array. Example: animArray['section', 'item','object1','object2' ]; i would like to run a function that loops through the array, and for each element in the array, perform the animation, then when the animation is finished, move on to the next element, do its related animation, etc... until the array is finished. Now, how do i make the animation queue one after the others? Thanks for any feedback/hint, Alexandre -- Alexandre Plennevaux LAb[au] http://www.lab-au.com
[jQuery] Re: Design question.
hmmm... jQuery.data looks promising. I'll check it out. Thanks for the
tip.
Shawn
polyrhythmic wrote:
Hello Shawn,
Not having unique IDs will always cause trouble. Not recommended.
I've tried various techniques, including building a JS object structure...
Something like $(#trigger)[0].extraData = { id: 4 }; ?
If you need data stored relative to elements, you could store
information with jQuery.data.
http://docs.jquery.com/Internals/jQuery.data
I have found it to be a very fast way to have data relative to DOM
elements.
But breaks down when you start needing to access multiple items for a given
action...
You can store as much data attached to an element as you need with key/
value pairs with jQuery.data.
If you need to 'trigger' reading data from a link in a different
location, you could store the ID in the link's REL (or store the ID
with jQuery.data) and then grab the data from there. With
jQuery.data, if you can find the element somehow, you can retrieve all
its data.
HTH and hope it all makes sense...
Charles
doublerebel.com
On Jan 18, 8:00 pm, Shawn [EMAIL PROTECTED] wrote:
A good start, but I see a few issues here. Both from the same line of code:
var id = $(this).parent().parent().attr('id).substr(1);
1) the structure has to be known for this to work. (i.e. the ancestor
element two levels up contains the ID). This may be a non-fixable thing
though. You're going to have to know where the information is stored
somehow. And doing something like
$(this)[0].extraData = $(#IDelement) leads to circular references...
2) the ID now needs to be processed. For a small number of items this
isn't bad, but as the complexity of your page increases, you end up with
a whole set of modifcations that have to be parsed out. For instance,
in your sample you have id=u4. But if that same ID has to be used in
other places, you end up with x4, y4, etc. Maybe it's a moot point
though in that you are just stripping off the text that makes the ID
unique, and then just working with the value anyways - in which case
it'll always be .substr(1), which will always be relatively fast.
3) This deals well enough with items where you have a single piece of
information needed (the ID in this case). But breaks down when you
start needing to access multiple items for a given action. I have a
specific example where I need to know the employee name (stored at the
TR level), and the date represented by the cell clicked on. These two
items are passed to an Ajax call for further processing. Using the date
as an ID is a non-starter (same date used on multiple rows). But
using it as a class is also problematic - what if you had
class=1-Jan-2006 odd taskHeader ?
4) Scalability. with smaller data sets, the amount of processing is
negligible and can be safely ignored. But increase the volume of data
and the amount of processing becomes a problem. If it takes 10
milliseconds to process one item, what happens when you have 1000+ items?
Then again, I think I mixing up different aspects of the problem -
creating the output, and then dealing with events afterwards. Either
way, I'm still looking for methods that would minimize performance issues.
I do have a specific sample in mind, but this issue is rather generic I
think. Thanks for the response. I think it's a good starting point. :)
Shawn
J Moore wrote:
A simple work around is to append a character to the id to keep them
unique. But also, store the ID in the parent TR.
e.g.
tr id=u4
td class=empBob Smith/td
tddiv class=1-Jan-2008link 1/div/td
/tr
Then you can get the id with
$('div.1-Jan-2008').click(function() {
var id = $(this).parent().parent().attr('id).substr(1);
alert(do something with employee id:+id);
});
would that work?
On Jan 18, 7:43 pm, Shawn [EMAIL PROTECTED] wrote:
I have a case that is going to prove to be processor intensive, so am
looking for suggestions on how to make the code as responsive as
possible. In addition, I'm a little stumped on how to resolve a problem
with my IDs.
I have a page that will list hundreds of people (I'm ignoring paging for
now, it's just not quite suitable). For each person there will be a
number of actionable items/links. Each of these links imply to do
something different, but all rely on the employee ID, These links will
also be embedded in sub-structures (divs/tables, etc.) So a sample of
one row might look something like this:
tr
tdBob Smith/td
tddivlink 1/div/td
tdtabletrtdlink2/td/tr/table/td
/tr
(this is very contrived to help illustrate the design issues... :)
Now the problem. If the first link (though it could be anywhere on the
row) were to trigger a Cluetip with details for that employee and item,
I'll need the employee ID, and supporting information (a date say, based
on what column it's in). In my current code I've done this:
tr
td id=4Bob Smith/td
tddiv id=4 class=1-Jan-2008link
[jQuery] Re: help optimizing code
Have you tried Firebug's profiler? That's what I use. On Jan 19, 12:39 pm, cjl [EMAIL PROTECTED] wrote: Is there any way to 'profile' the javascript as I try to optimize it, to find out where the slow bits are? -CJL
[jQuery] Re: help optimizing code
Karl et al:
Thank you for you helpful replies.
I'm trying to understand the above code example provided by Karl:
var $flag = $('div class=flag/div').insertBefore('p');
$flag.each(function (i) {
...
I'm not sure this works?
Is this supposed to be equivalent to:
$(p).before(div class='flag'/div);
$(.flag).each(function (i) {
...
Also, TT, thank you, firebug is exactly what I was looking for!
-CJL
[jQuery] Re: Callback-return into global variable
$.getJSON and all the AJAX functions are asynchronous; the function
returns before it gets any result. That's why there's a callback
function: it gets called when the data are available. So when you
write
load_comments();
$.each(_json.comments, function(comment) {
load_comments() just sets up the AJAX call and returns, so the each
starts with _json not yet initialized. You can get around it by using
asynch: false in a $.ajax call (see the documentation), but that's not
the ideal solution. Better to put your $.each into the callback
function:
$.getJSON(paths.get_comment, _params, function(data)
{
$.each (data.comments, function (comment){...})
});
Danny
On Jan 16, 1:17 am, Niels [EMAIL PROTECTED] wrote:
Is there any way to put a return from within a callback into a global
variable? I'm trying to retrieve JSON-values in one statement, and
output them in another statement; and code looks like this:
var _json;
function load_comments(id, params) {
if (typeof id != 'number' typeof id == 'object' params == null)
{
// Only the params were specified.
_params = process_params(id);
$.getJSON(paths.get_comment, _params, function(data) { _json
= data;
return _json; });
console.info('1 : $.getJSON(' + paths.get_comment + ', ' +
_params +
')');
}
}
function display_comments() {
load_comments();
$.each(_json.comments, function(comment) {
$(#recent-comments-list).append(li + comment.content +
/
li);
});
}
Unfortunately, _json seems to remain undefined... What am I doing
wrong? Or is there really no way to accomplish this?
Thanks a lot!
Niels
[jQuery] Re: help optimizing code
On Jan 19, 2008, at 8:03 PM, cjl wrote:
Karl et al:
Thank you for you helpful replies.
I'm trying to understand the above code example provided by Karl:
var $flag = $('div class=flag/div').insertBefore('p');
$flag.each(function (i) {
...
I'm not sure this works?
Is this supposed to be equivalent to:
$(p).before(div class='flag'/div);
$(.flag).each(function (i) {
Hi CJL,
Ugh! Sorry about that. Trying to do too much at once. That works if
you're inserting a single element, but not, obviously, if you're
inserting a bunch of them.
Hmm. How can I save face here. ;-)
Well, this ...
$('div class=flag/div').insertBefore('p');
is the same as this ...
$(p).before(div class='flag'/div);
But that doesn't help you much. How about this? You can chain the
before and after. That should help a little. And you can use $
('div.flag') instead of $('.flag'), which should speed up the selector
a bit. And you can store $('div.comment-container') in a variable /
after/ the elements are inserted into the DOM and use the variable the
two or three times later on in the script rather than re-selecting the
elements each time. So those few lines would look like this:
$('p').before('div class=flag/div').after('div
class=comment-container/div');
var $commentContainer = $('div.comment-container');
$('div.flag').each(function (i) { // and so on
And here once more is the whole code altogether, in case it helps.
Sorry for leading you astray there on the first attempt. I did throw a
caveat in there, I think, but still -- bad, bad me. Here you go:
$(document).ready(function(){
var comment_data = eval(' [{pk: 1, model: book.comment,
fields: {name: C. Lesh, comment: This paragraph is great!,
chapter: 2, paragraph: 0}}, {pk: 2, model: book.comment,
fields: {name: Steve Smith, comment: So far, so good.,
chapter: 2, paragraph: 0}},{pk: 3, model: book.comment,
fields: {name: Frank Rizzo, comment: You writing is awful.
Really awful, chapter: 2, paragraph: 1}},{pk: 4, model:
book.comment, fields: {name: Fabrizzio, comment: I like
Django., chapter: 2, paragraph: 0}},{pk: 5, model:
book.comment, fields: {name: Barbra, comment: You have
stuff you should be doing.!, chapter: 2, paragraph: 2}},{pk: 6,
model: book.comment, fields: {name: George B., comment:
What the heck is a Django?, chapter: 2, paragraph: 2}}] ');
var comments = [];
for (var t=0, p=$('p').length;tp;t++){
temparray = [];
for (var i=0, cd=comment_data.length; icd; i++){
if (comment_data[i].fields.paragraph == t) {
temparray.push(comment_data[i]);
}
}
comments[t] = temparray;
}
$('p').before('div class=flag/div').after('div
class=comment-container/div');
var $commentContainer = $('div.comment-container');
$('div.flag').each(function (i) {
if (comments[i].length 0) {
var temphtml = ;
var $this = $(this);
$this.html('span class=has-comments' + comments[i].length +
'/span');
for (var z=0, c=comments[i].length;zc;z++) {
temphtml = [
temphtml,
'div class=sig',
comments[i],
[z].fields.name,
'/div',
'div class=comment',
comments[i],
[z].fields.comment,
'/div'
].join('');
}
$commentContainer.eq(i).html(temphtml);
} else {
$this.html('span/span');
$commentContainer.eq(i).html(Add a new comment.);
}
$this.click(function(){
$commentContainer.eq(i).slideDown('fast');
});
});
});
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
...
Also, TT, thank you, firebug is exactly what I was looking for!
-CJL
[jQuery] Re: help optimizing code
If Firebug is new to you, you're about to fall in love. Be sure to check out the various online tutorials. On Jan 19, 5:03 pm, cjl [EMAIL PROTECTED] wrote: Also, TT, thank you, firebug is exactly what I was looking for! -CJL
[jQuery] Re: help optimizing code
Karl:
Thanks again. One last bug in the code you posted above, in the $
('div.flag').each function, the assignment:
var $this = $(this);
Needs to take place before the if-else statements.
Overall, you improved code runs in approximately 1 second...down from
4 seconds for my original code. Wow!
FYI -- according to Firebug, chaining the before and after doesn't
seem to make any real difference in performance.
Out of curiosity, you wrote your for loops differently than I did, for
example:
Me: for (z=0;zcomments[i].length;z++)
You: for (var z=0, c=comments[i].length;zc;z++)
Is there a difference?
Thanks again,
CJL
[jQuery] Re: help optimizing code
On Jan 19, 2008, at 9:39 PM, cjl wrote:
Karl:
Thanks again. One last bug in the code you posted above, in the $
('div.flag').each function, the assignment:
var $this = $(this);
Needs to take place before the if-else statements.
Oops. Right. Good catch. :-)
Overall, you improved code runs in approximately 1 second...down from
4 seconds for my original code. Wow!
Great!
FYI -- according to Firebug, chaining the before and after doesn't
seem to make any real difference in performance.
very interesting. oh well. worth a try.
Out of curiosity, you wrote your for loops differently than I did, for
example:
Me: for (z=0;zcomments[i].length;z++)
You: for (var z=0, c=comments[i].length;zc;z++)
Is there a difference?
Well, I haven't run a performance test on the two myself, but I've
read that there are speed gains when using a variable for the count
rather than an array length. Apparently, the array length is checked
on each iteration. I've also read that you might be able to get a
further boost by putting the count variable before the loop. Like this:
c=comments[i].length;
for (var z=0;zc; z++)
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
[jQuery] Re: Still working out drop-down div menu...
Hi Rick,
Sorry for not getting back to you sooner. I sort of lost track of the
thread and have been busy with a couple freelance projects, my day
job, and my daughter recovering from a tonsillectomy.
Anyway, it seems like this conversation has moved away from general
interest, so perhaps we should continue off-list. I'll try to respond
to your questions below tomorrow. If you use IM, send me your info and
I'll ping you sometime tomorrow.
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jan 19, 2008, at 11:01 AM, Rick Faircloth wrote:
Hi, Karl...
Have we stalled out on this project? I've been concerned about
asking too much of you. If you want to transition this to a paid
project,
just let me know!
Rick
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery-
[EMAIL PROTECTED] On Behalf Of Rick
Faircloth
Sent: Thursday, January 17, 2008 12:05 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Still working out drop-down div menu...
Well... my attempts to fix the details div showing with content
didn't work. At least I think I changed all the padding and line-
heights
that I attempted to change back to the way they were. However, now
the
issue seems to have disappeared! Whatever... as long as it works!
The last issue I see now is that *sometimes* when I move the mouse
between
menu items, especially the home and buyers menu items, the details-
div slides up
and the details content remains on the screen. It's not always
that way, but it
does happen in both IE and FF. Any ideas on that?
From what I can tell, you've taken the route of separating the
actual div with the
details from the div that slides down. Is that part of what
complicates the
synchronization of the display div and the content or details
div?
Would it be simpler to actually put the details *inside* the
display div to
eliminate the possibility of details being left on the screen
without the background div?
It would seem that placing the details actually in the display div
would tied them
together so that if the display div is visible, the details must
be, too, and vice versa.
And, this is just minor at this point, the details would actually
be sliding up and down
with the display div.
Looks like this may be a two-wish-list-gift assistance! :o)
Thanks,
Rick
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery-
[EMAIL PROTECTED] On Behalf Of Rick
Faircloth
Sent: Thursday, January 17, 2008 11:17 AM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Still working out drop-down div menu...
Ok... thanks, Karl. It seems to be working better.
I'm going to make a change in the padding of the ul, #id=ul-index
because the bottom of the li's contained therein aren't currently
reaching as far down as the #menu-index... there's a gap of about
6px at the bottom which allows the details div to expend without
showing the menu content.
My initial results show this solution will work. I'll make you mods
first, then mine, then test on IE6, IE7, and FF2 (Windows All) and
report back.
Thanks, again for all the work!
Rick
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery-
[EMAIL PROTECTED] On Behalf Of Karl
Swedberg
Sent: Thursday, January 17, 2008 10:28 AM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Still working out drop-down div menu...
Hi Rick,
After several failed attempts, I think I have this working for
you. I
had to set a flag for the menu-details div's visibility (I called
it
bVis). It's initially set to false. In the mouseover argument
of $
('#menu-index').hover(...), it gets set to true in the callback
of $
('div.menu-details').slideDown(). It thengets reset to false on
mouseout.
Then for the mouseover argument of ... .find('li').hover(), it
does a
slide down of the corresponding div if bVis is false and a
simple .show() if it's true. Worked in my limited testing with FF
2 Mac.
http://test.learningjquery.com/c21.html
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jan 16, 2008, at 9:42 PM, Rick Faircloth wrote:
Thanks, Karl!
This is a chance, too, for me to find out what the
expander plug-in is! Haven't heard of that one, yet...
Rick
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery-
[EMAIL PROTECTED] On Behalf Of Karl
Swedberg
Sent: Wednesday, January 16, 2008 8:46 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Still working out drop-down div menu...
Hey Rick,
Glad to hear that you're making progress! I'll take a look at the
page
again tonight and offer a suggestion (and possibly a demo) for
getting
the content to slide down with that details div.
Only because you asked ... you can find a link to my amazon.com
wish
list on my Expander plugin page:
http://plugins.learningjquery.com/expander/
(wow, I just shamelessly promoted my plugin
