[jQuery] Using variable in animate()'s properties
Hi, I'm writing this script and apparently the animate method wouldnt
interpret the variable I pass in the properties section:
//it's hover event, and this is the mouseover
function () {
direction = $(this).find('img').attr('class'); //should be
either
top, bottom, left or right
value = ((direction =='top' || direction=='bottom') ?
$(this).find
('img').outerHeight() * -1 : $(this).find('img').outerWidth() * -1);
$(this).find('img').stop().animate({direction: value}
,{duration:
500, easing: 'easeOutBounce'});
}
I have tested the content of variable, and there are 100% working, my
final verdict is, the animate method doesn't read the variable
direction properly. Anyone has any ideas to get around with this
problem?
Thanks
[jQuery] Re: How to define/access public functions for a plugin?
You could consider modifying your plugin to follow the jQuery UI
Widget format. This takes advantage of the widget factory, which
provides ways to access the methods and properties in 2 ways:
1) Through the element the plugin is applied to, eg:
$(#myElement).smartList(selectedValue)
2) Or by getting an 'instance' of the widget, eg:
var myList = $(#myElement).data(smartList);
var val = myList.getSelectedValue();
If you don't want to go this route, then you need to return an
'instance object' instead of a jQuery object. This means your plugin
is not 'chainable' - ie, it must be the last method called on the
object.
To return an instance, create an object with pointers to your public
properties and methods...
return {
options: options // property
, getSelectedValue: getSelectedValue // method
, insetItem: internalMethodName
}
There are a few ideas to get you started.
/Kevin
On Jan 4, 5:08 am, mehdi mehdi.mous...@gmail.com wrote:
Hi,
I've just developed a plugin that mimics the combo box control, albeit
it's a special one. That's being defined as follows:
(function($) {
$.fn.extend({
smartList: function(settings) {
//prepare settings, blah blah blah...
return this.each(function() {
//whatever code goes here...
});
}
});
})(jQuery);
You know, to use this plugin, I could easily write the following
JavaScript code:
var $myList = $('myElement').smartList();
No problem so far. Now, I need to define and access some functions
that's specific to the smartList. say, e.g., getSelectedValue,
insertItem, and the like. The problem is that I've got no idea how to
address such a thing in JavaScript. i.e., I need to write things like:
$myList.getSelectedValue();
$myList.insetItem('foo', 'bar');
But this isn't possible, since the $myList variable is a jQuery
object.
So I just defined some functions, say, $.smartList.getSelectedValue
and the like... but in this approach, I've to pass the jQuery object
to this functions as a mandatory parameter and this really sucks.
i.e., I need to get the selected value of $myList this way:
var value = $.smartList.getSelectedValue($myList);
Is there any better approach to address such a thing?
Any help would be highly appreciated,
TIA,
Mehdi
[jQuery] Select onchange event get a value from selects table row
I have a table that contains a select element like so
trtdkey value in hidden input/tdtdselectoptions/select/
td/tr
I need to set
$(selectclass).change(function() {
//Find the value of hidden input in 1st cell of row of the select
list that was changed.
});
So when a user changes the option of the select i need to get the new
value the option has been changed to plus the value from the hidden
input and submit them via ajax to a method on the server. How can i
get the hidden inputs value?
Thanks for any help /suggestions,
kevin
[jQuery] Re: Events Calendar
Actually there is a decent little jquery plugin at http://arshaw.com/fullcalendar/ that may be what you are looking for.
[jQuery] Re: Prevent jagged text in IE
@Dave
If this problem has a good fix, it should be fixed. There are several
cases that will break differently in IE when this proposed fix is
applied. It's not achieving consistent cross-browser behavior. There
may be a solution out there still, and if someone has one they should
post it.
I haven't tested it, but did suggest an 'extra check' for opacity in
the sample I gave. Assuming jQuery reports the curCSS correctly, this
would seems to address the 'snap' issue you described...
if ($E.css('filter') $E.css('opacity')==1)
FYI, I ran across another example of this issue today. I created a
test page with both a static and popup ui.datepicker. When seen side-
by-side in IE7, the popup (animated) datepicker text is obviously not
anti-aliased as the static version is...
http://layout.jquery-dev.net/demos/datepicker.html
All UI Widgets using animation look poorer than necessary when used in
*the most common browser in the world*. So if this won't be addressed
in the jQuery core, then every UI widget using animated elements
should be patched to address it. Such a simple, common problem should
not be allowed to affect UI Widgets IMO.
/Kevin
On Sep 30, 2:46 pm, Dave Methvin dave.meth...@gmail.com wrote:
I'm not sure why this 'fix' should be added to fadeOut? It seems most
applicable to fadeIn and fadeTo.
Whoops, right. So the problem would be that in IE only, .fadeTo
(slow, 1) makes the element completely visible and then pops to 50%
opacity based on the stylesheet when the element's filter property is
removed.
There is no way to fix anti-aliasing if the user *chooses* to use
opacity since this is a browser issue,
If the user chooses to set a 50% opacity in the stylesheet that should
work properly in IE as well, right? A fix for antialiasing shouldn't
break something that currently works properly across browsers.
Calling it an IE-bug doesn't make it go away. This is a cross
browser issue, pure and simple.
If this problem has a good fix, it should be fixed. There are several
cases that will break differently in IE when this proposed fix is
applied. It's not achieving consistent cross-browser behavior. There
may be a solution out there still, and if someone has one they should
post it.
[jQuery] Re: LI.offset and LI.position() gives erratic results
I have reposted this in the DEV forum... http://groups.google.com/group/jquery-dev/browse_thread/thread/16bd78710291bc93?hl=en#
[jQuery] Re: keeping table header fix
I create a lot of web-application list-screens with fixed-headers. I prefer to *not* work with a THEAD for this purpose because it is too limiting for complex page layouts. Instead, I create TWO tables - one for the headers and one for the content. This works well as long as you use table-layout:fixed and set specific column widths - I use a combo of fixed and percentage widths so that the tables will always auto-size to fill the page-width. Here is a simple example... div style=overflow-y: scroll; table style=table-layout: fixed col style=width: 10ex; col style=width: 20ex; col width=30% col width=70% col style=width: 24px; tr tdColumn 1/td tdColumn 2/td tdColumn 3/td tdColumn 4/td tdColumn 5/td /tr /table /div div style=overflow-y: scroll; height: 300px; table style=table-layout: fixed col style=width: 10ex; col style=width: 20ex; col width=30% col width=70% col style=width: 24px; tr tdData 1.1/td tdData 1.2/td tdData 1.3/td tdData 1.4/td tdData 1.5/td /tr tr tdData 2.1/td tdData 2.2/td tdData 2.3/td tdData 2.4/td tdData 2.5/td /tr tr tdData 3.1/td tdData 3.2/td tdData 3.3/td tdData 3.4/td tdData 3.5/td /tr /table /div Note that you need to set BOTH the header and content tables to overflow-y:scroll so that both containers have a scrollbar - even though the headers will not actually scroll. Without matching scrollbar, percentage column-widths would not line-up correctly. For IE, you can color the header-scrollbar with CSS so it is essentially 'invisible'. You can use any page-structure you want to control the height of the scrolling list. Separating the header markup from the list-markup provides a lot more options. This is compatible with a table-sorter because the 'list' is in a table by itself, so it is *impossible* for sorting or striping to affect your headers. It is also useful for Ajax - you can replace the entire data-table for maximum rendering speed. FYI, using table-layout:fixed also makes pages with large tables load MUCH FASTER because the browser does not have to wait for all the content to load before starting to render the table. The bigger the table, the more noticeable this improvement is. Hope that helps. /Kevin On Oct 2, 5:03 pm, lcplben b...@sellmycalls.com wrote: On Sep 16, 2:16 am, macsig sigbac...@gmail.com wrote: Hello guys, I'd like to know if there is a way to keep a table header fixed on top of a div while I scroll the table rows. I have a div high 200px and the table itself is around 300px so when I scroll down I'd like to always see the header on top. I already use for the table tablesorter so the solution must be compatible with that plug-in.
[jQuery] LI.offset and LI.position() gives erratic results
I am getting erratic results when trying to get the position of a LI element. Every browser gives different results - only IE7 seems to get it right... I have a navbar UL element nested a few levels deep within DIVs that provide page structure. The UL is also nested within a SPAN (inline- block) so the UL element can be centered within DIV#Nav1. A stripped- down version of the HTML is shown at bottom. The LI elements trigger a custom drop-down menu onHover. I use simple math to calculate the positioning of the DIV that acts as a menu... var $LI = $(this) // LI element , tabOffset = $LI.offset() , menuTop = tabOffset.top + $LI.outerHeight() , menuLeft = Math.floor(tabOffset.left) ; In IE7, this works perfectly - exactly as you would expect. But every other browser has one or more issues... Internet Explorer 7 $LI.offset().left = CORRECT $LI.offset().top = CORRECT $LI.position().top = 0 - CORRECT Chrome 3.0.195.21 $LI.offset().left = the Left-edge of the parent UL element! $LI.offset().top = CORRECT $LI.position().top = 0 - CORRECT FireFox 3.5 $LI.offset().left = the Right-edge of the parent UL element $LI.offset().top = too small by 15px $LI.position().top = -15 -- wrong, the LI has NO top-margin Opera 9.64 $LI.offset().left = the Right-edge of the parent UL element $LI.offset().top = CORRECT $LI.position().top = -19, even though offset().top is correct Only IE gets $LI.offset().left correct. Only IE and Chrome get $LI.position().top right (0), but IE, Chrome and Opera all get $LI.offset().top correct, even though Opera gets $LI.position().top wrong (-19). Only FireFox gets everything wrong! Can anyone shed any light on these discrepancies? I will spend the time to create and post a test page if no one can offer any clues, but I have not done so yet. Thanks in advance. /Kevin !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd; DIV id=Layout-Header DIV class=layout-header DIV id=TopNavbar class=navbar DIV id=Nav1 SPAN class=center UL class=tabs LIA href=/rentalsRentals/A/LI LIA href=/linensLinens/A/LI LIA href=/servicesServices/A/LI LIA href=/plannerPlanner/A/LI LIA href=/galleryGallery/A/LI LIA href=/communityCommunity/A/LI LIA href=/aboutAbout Us/A/LI /UL /SPAN /DIV /DIV /DIV /DIV
[jQuery] Notre Dame Inspired Jquery -- Exists?
http://www.nd.edu/ Their homepage has a carousel-ish type of feature. Does anyone know if this exists already with a jQuery plugin? I don't know if our project has the allotted time for me to make one from scratch, so I was curious if it existed or could be easily adapted from somewhere else. If anyone has any insight, it would be very helpful. It doesn't need video or anything inside, just the three rotating images on click, coming in front of one another. Thanks, Kevin
[jQuery] Re: Prevent jagged text in IE
@Dave
with the fix, fades out but then pops to 50% opacity
I'm not sure why this 'fix' should be added to fadeOut? It seems most
applicable to fadeIn and fadeTo. But whatever the case, a little extra
code could handle edge-cases -- something like...
if (jQuery.browser.msie $(this).css('opacity')==1)
this.style.removeAttribute('filter')
Or for the politically correct...
var $E = $(this);
if ($E.css('filter') $E.css('opacity')==1)
this.style.removeAttribute('filter')
There is no way to fix anti-aliasing if the user *chooses* to use
opacity since this is a browser issue, but it is *other 99%* that is
the issue. There are many 'effects' used in jQuery that trigger the
problem, so it should handle these *common scenarios*. Calling it an
IE-bug doesn't make it go away. This is a a cross browser issue, pure
and simple.
/Kevin
On Sep 29, 7:34 am, Dave Methvin dave.meth...@gmail.com wrote:
This is a nice simple solution to a common cross-browser issue, so
wouldn't it be reasonable for this to be added to the standard jQuery
animate method? The extra size is minimal.
That solution assumes no opacity was specified in a stylesheet.
style
#glory {
opacity: 0.5;
filter: alpha(opacity = 50);
}
/style
script
// with the fix, fades out but then pops to 50% opacity
$(#glory).fadeOut();
/script
[jQuery] Re: Prevent jagged text in IE
If browser-detection can't be used, then subsititute code to detect the filter attribute instead. The exact syntax is not important... I believe jQuery SHOULD handle this cross-browser animation issue because it is common to the majority of users. It is clearly a deficiency when jQuery's own contributors have to override core methods to address it. The choices are: A) Update jQuery to handle this issue natively, or; B) Continue using hacks for animations in the world's most common browser. I'm interested in opinions on this, particularly from the regular jQuery contributors. /Kevin On Sep 27, 4:20 am, ryan.j ryan.joyce...@googlemail.com wrote: browser sniffing is already deprecated in favour of feature sniffing, it's unlikely code using it will be added.
[jQuery] Re: Prevent jagged text in IE
@Rick
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
This is a nice simple solution to a common cross-browser issue, so
wouldn't it be reasonable for this to be added to the standard jQuery
animate method? The extra size is minimal.
/Kevin
On Sep 25, 5:17 pm, Rick Faircloth r...@whitestonemedia.com wrote:
I include a reference to a file with this jQuery code in every page to solve
that problem, Dave.
Best solution I've found so far. I got it from someone, somewhere, but don't
remember who.
Rick
jQuery.fn.fadeIn = function(speed, callback) {
return this.animate({opacity: 'show'}, 750, function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
jQuery.fn.fadeOut = function(speed, callback) {
return this.animate({opacity: 'hide'}, 750, function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
jQuery.fn.fadeTo = function(speed,to,callback) {
return this.animate({opacity: to}, 750, function() {
if (to == 1 jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
[jQuery] Re: Way to convert DOM event to jQuery event?
If you need data for multiple fields, then a 3rd option is to create a
single hash/data object for the page and writing all your data into
that. This makes your data easy to read and debug, and is highly
efficient because you don't have to 'parse' anything...
var Record = {
foo: db-value-1
, bar: db-value-2
, baz: db-value-3
}
Then you can use *either* jQuery or inline events to access this
data...
$(document).ready(function() {
$(#myID).click(function() {
alert( foo = + Record.foo );
return false;
});
});
You could use the fieldnames as keys in your data object to make it
generic...
var Record = {
myID1: db-value-1
, myID2: db-value-2
, myID3: db-value-3
...
}
$(document).ready(function() {
$(a.linkType).click(function() {
alert( this.id + = + Record[ this.id ] );
return false;
});
});
/Kevin
On Sep 23, 5:57 pm, Ricardo Tomasi ricardob...@gmail.com wrote:
Do you really need to output this data embedded in the HTML? Does it
have any meaning/purpose without Javascript? There are two simple non-
hackish ways you can do it:
1:
load data later via XHR, use an element identifier to bind it
2:
output metadata in the class attribute - it's valid, and not against
the specification - the class attribute is not specifically meant for
presentation, the specs say For general purpose processing by user
agents.
ex: class=link { foo: 'bar', amp: 'bamp', x: [1,2,3] }.
It's easy to create your own parser for that:
$.fn.mdata = function(){
return window[eval](( + this[0].className.match(/{.*}/) + ));
};
$('a').mdata() == Object foo:'bar' etc..
It will work as long as you use valid JSON.
cheers,
Ricardo
[jQuery] [autocomplete] problem when using inside a popup
Hello, When I use jquery.autocomplete.js on a field that lives inside a jquery modal popup, the autocomplete list doesn't stick to the textbox when scrolling with the scrollwheel of the mouse. Anyone knows if this is a bug, or a configuration issue? best regards! Kevin
[jQuery] Re: Scrolling problem
Nevermind. After much trial and error, I pieced together some 'dirty' code to make it work. You can see it at the link above if you are having the same issues. Thanks! Kevin
[jQuery] Re: event-binding to dynamically created elements... (JSP vs JS problem......)
Good points by Josh. However this selector example...
$('img[class=thumb]).mouseover
...can be written simpler as
$(img.thumb).mouseover
It's faster in most browsers to select-by-class than to iterate
elements and 'read attributes'. jQuery may process both syntaxes the
same (?), but using the img.thumb syntax *guarantees* the most
optimized handling.
This is a strange code sample. Why 'add' a class on mouseover, but not
remove it on mouseout? If you want to add/remove the 'dim' class, then
use jQuery's hover method to combine both events...
$(img.thumb).hover(
function () { $(this).addClass('dim');
, function () { $(this).removeClass('dim');
);
If you *don't* want to remove the class, then this function only needs
to run 'once', because the class only needs to be added on the FIRST
mouseover event. In this case, use jQuery's .one() (one-time)
method...
$(img.thumb).one(mouseover,
function () { $(this).addClass('dim');
);
/Kevin
On Aug 30, 1:02 am, Josh Powell seas...@gmail.com wrote:
for (i = 1; i 5; i++) {
$('#thumb' + i).bind('mouseover',function(event) {
$(this).addClass('dim');
});
}
The 'i' you've called here is a global variable, in a for loop always
put a var in front of it to have local scope (to the function, not
block)
for (var i = 1; i 5; i++) {
$('#thumb' + i).bind('mouseover',function(event) {
$(this).addClass('dim');
});
}
but... more importantly, reframe your thoughts on javascript/jquery
programming to let the selectors do the iteration for you.
$('img[class=thumb]).mouseover(function () {
$(this).addClass('dim');
});
snip /
Josh Powell
[jQuery] Re: JSON data manipulation
Hi Glenn,
Create an array and 'push' each hash of plot data onto it. When the
loop is complete, pass the now complete array...
$.getJSON('/Graph/HearthRateDataJSON', , function(data) {
var data= [ ];
$.each(data, function(entryindex, entry) {
data.push( { Name: entry['Name'], Serie: entry['Serie'] } );
});
Plot( data );
});
/Kevin
On Aug 29, 7:31 am, Depechie glenn.versweyv...@gmail.com wrote:
Hello guys.
My question has actually more to do with jqPlot ( graph library for
jQuery ), but I'm still asking it here, because it concerns json data
manipulation through jquery.
I'm not a javascript nor JQuery programmer, I'm just in a learning
process.
So my question.
To plot something through jqPlot the syntax should be:
plot = $.jqplot('chart', [line1, line2, line3], { ... }
With line1, line2 and line3 as array variables!
My current JSON data is:
[{Name:series1,Serie:[[1,4],[2,25],[3,7],[4,14]]},
{Name:series2,Serie:[[1,13],[2,5],[3,7],[4,20]]}]
And in my .js file I've put this:
$.getJSON('/Graph/HearthRateDataJSON', , function(data) {
$.each(data, function(entryindex, entry) {
Plot(entry['Serie'], entry['Name']);
});
});
Problem now is that the graph will only plot the 'last' serie, because
the graph itself needs all data at once! And not like I did going
through each JSON record and plot the line.
So any thoughts on how to use the $.each to put all data in one
variable to get jqPlot to plot all series?
Thanks
Glenn
[jQuery] Re: JSON data manipulation
OOPS, I didn't formatted the data correctly for passing to Plot() -
sorry, didn't read carefully. But the premise is the same - create an
array by looping your data, and then pass the array when done.
/Kevin
On Aug 30, 9:04 am, Kevin Dalman kevin.dal...@gmail.com wrote:
Hi Glenn,
Create an array and 'push' each hash of plot data onto it. When the
loop is complete, pass the now complete array...
$.getJSON('/Graph/HearthRateDataJSON', , function(data) {
var data= [ ];
$.each(data, function(entryindex, entry) {
data.push( { Name: entry['Name'], Serie: entry['Serie'] } );
});
Plot( data );
});
/Kevin
On Aug 29, 7:31 am, Depechie glenn.versweyv...@gmail.com wrote:
Hello guys.
My question has actually more to do with jqPlot ( graph library for
jQuery ), but I'm still asking it here, because it concerns json data
manipulation through jquery.
I'm not a javascript nor JQuery programmer, I'm just in a learning
process.
So my question.
To plot something through jqPlot the syntax should be:
plot = $.jqplot('chart', [line1, line2, line3], { ... }
With line1, line2 and line3 as array variables!
My current JSON data is:
[{Name:series1,Serie:[[1,4],[2,25],[3,7],[4,14]]},
{Name:series2,Serie:[[1,13],[2,5],[3,7],[4,20]]}]
And in my .js file I've put this:
$.getJSON('/Graph/HearthRateDataJSON', , function(data) {
$.each(data, function(entryindex, entry) {
Plot(entry['Serie'], entry['Name']);
});
});
Problem now is that the graph will only plot the 'last' serie, because
the graph itself needs all data at once! And not like I did going
through each JSON record and plot the line.
So any thoughts on how to use the $.each to put all data in one
variable to get jqPlot to plot all series?
Thanks
Glenn- Hide quoted text -
- Show quoted text -
[jQuery] Re: Scrolling problem
I kind of founf a way to do it using:
jQuery('#mycarousel').jcarousel({start:NewStrt});
The only thing is the images disapear, but pressing the scroll
buttons, I can see the dynamic images load in the status bar so it
appears it is working, just with now invisible images.
Can anyone point me in the right direction?
Thanks!
On Aug 15, 12:04 pm, Kevin diskhand...@gmail.com wrote:
I guess I should mention that I'm using jcarousel and thst you need to
click on one of the index pictures to start things up.
Thanks!
On Aug 14, 10:34 pm, Kevin diskhand...@gmail.com wrote:
I managed to get the scrolling to kinda work – if I set it up with
static LI then I can get the scrolling to work the way I want it to,
sans being able to pass the number of the image I want to be shown
(unless I put it in the text field of the anchor tag, which shows with
the image) but I have no way of passing the other variables to call my
updating button. Also, using the static it takes much longer to load
the page.
I’m looking to be able to set a variable – like NewStrt – to be the
first image in the carousel by calling a simple function such as
ScrollTo(NewStrt) or mycarousel.ScrollTo(NewStrt). Using the “function
mycarousel_initCallback(carousel)” scrolling function doesn’t work
with dynamic loading, and I can’t pass my variables with static
loading. Please help.
If you would like to see what I'm doing to get a better idea, you can
see it here (along with my current code):
http://ssbbs.dyndns.org/panic/rpicts.asp
Thanks in advance for any assistance with this.
Kevin- Hide quoted text -
- Show quoted text -
[jQuery] Re: hide divs with float:left and show them again
Is the layout broken initially or only after you hide/show the content? When you inspect the DIVs in Firebug, do they still have their float properties assigned? Are you specifying a width on the boxes? Posting example code always helps other developers troubleshoot your issues faster =) On Aug 20, 3:56 pm, simusch inview...@gmail.com wrote: Hi I have a site with a lot of small div-boxes (with images and movies within them) they are positioned with CSS and float:left. i created buttons, which show and hide either all images or all movies this works well. but when i switch between these options, the float-position of the divs goes crazy and every div-container is on one line for itself (instead of 5 on one line) does someone have an idea, how i can solve this problem? simon
[jQuery] Re: Scrolling problem
I guess I should mention that I'm using jcarousel and thst you need to click on one of the index pictures to start things up. Thanks! On Aug 14, 10:34 pm, Kevin diskhand...@gmail.com wrote: I managed to get the scrolling to kinda work – if I set it up with static LI then I can get the scrolling to work the way I want it to, sans being able to pass the number of the image I want to be shown (unless I put it in the text field of the anchor tag, which shows with the image) but I have no way of passing the other variables to call my updating button. Also, using the static it takes much longer to load the page. I’m looking to be able to set a variable – like NewStrt – to be the first image in the carousel by calling a simple function such as ScrollTo(NewStrt) or mycarousel.ScrollTo(NewStrt). Using the “function mycarousel_initCallback(carousel)” scrolling function doesn’t work with dynamic loading, and I can’t pass my variables with static loading. Please help. If you would like to see what I'm doing to get a better idea, you can see it here (along with my current code): http://ssbbs.dyndns.org/panic/rpicts.asp Thanks in advance for any assistance with this. Kevin
[jQuery] Scrolling problem
I managed to get the scrolling to kinda work – if I set it up with static LI then I can get the scrolling to work the way I want it to, sans being able to pass the number of the image I want to be shown (unless I put it in the text field of the anchor tag, which shows with the image) but I have no way of passing the other variables to call my updating button. Also, using the static it takes much longer to load the page. I’m looking to be able to set a variable – like NewStrt – to be the first image in the carousel by calling a simple function such as ScrollTo(NewStrt) or mycarousel.ScrollTo(NewStrt). Using the “function mycarousel_initCallback(carousel)” scrolling function doesn’t work with dynamic loading, and I can’t pass my variables with static loading. Please help. If you would like to see what I'm doing to get a better idea, you can see it here (along with my current code): http://ssbbs.dyndns.org/panic/rpicts.asp Thanks in advance for any assistance with this. Kevin
[jQuery] Re: Modify iframe with jquery
If you cannot change the scrolling by modifying the iframe, then do it
by modifying the document inside the iframe.
I don't remember the syntax for accessing the document/body elements
inside an iframe, so I'll just use pseudo-code here. You should be
able to find the correct syntax easily...
$(#iframe)[0].document.$(body).css({ overflow: hidden; });
This will work as long as the iframe content is in the same domain as
your parent page. If it is in a different domain, then browser
security will prevent you from accessing the document inside the
iframe.
/Kevin
On May 14, 1:56 pm, ripple ripple...@yahoo.com wrote:
Thanks, but it's not the contents of the iframe that I'm looking for. It's
altering the behavior(scrolling) of the iframe that i am trying to achieve.
--- On Thu, 5/14/09, waseem sabjee waseemsab...@gmail.com wrote:
From: waseem sabjee waseemsab...@gmail.com
Subject: [jQuery] Re: Modify iframe with jquery
To: jquery-en@googlegroups.com
Date: Thursday, May 14, 2009, 4:48 PM
$(#iframeid).contents.find(#elementid);
$(#iframeid).contents.find(#elementid).text();
$(#iframeid).contents.find(#elementid).html();
I used this earlier today with some php where a wysiwyg editor had its html
contents embedded in a Iframe and i hate to post the raw html to a database.
worked like a charm.
On Thu, May 14, 2009 at 10:43 PM, ripple ripple...@yahoo.com wrote:
I have an iframe in a page that scrolls on initial load, but after
clicking a link and loading a different page I have to remove the
scroll(scrolling=no).
When the 2nd page loads I set the attr on the the iframe to
scrolling=no.
$('#iframe').attr('scrolling','no');
But, This does not seem to work. Does anyone know? Is the iframe more
of a static object after initial creation and load? Can it's parameters
(except for src) not be changed?
Thanks
[jQuery] Re: state of the art for corner rounding?
I have not tried DD Roundies yet - it's on my todo list. Hoever I am using a jquery plug-in called 'Cornerz' that is working very well for me. It uses Canvas/VML for corners, but does not require any additional plug-ins: http://labs.parkerfox.co.uk/cornerz/ This plug-in does *not* automatically pick-up -moz-border-radius settings from CSS, but I have written an intermediate function that does. This accomplishes exactly what you are asking - with the exception that you still need to add the cornerz class to the elements you want rounded in IE to avoid having to check the CSS of every element on the page! I submitted this function to the plug-in's forum... http://groups.google.com/group/cornerz/browse_thread/thread/2f0639e7c7fa349c?hl=en# I'd be interested to learn how whether DD Roundies is significantly better or not. /Kevin On May 2, 9:45 am, Jack Killpatrick j...@ihwy.com wrote: bump. Anyone eval'd the corner plugins recently enough to have an opinion? Thx. Jack Jack Killpatrick wrote: Hi All, I have a half dozen bookmarks for rounded corner plugins, but am wondering if there's a state of the art plugin kicking any booty on that these days? What I'd *really* like is to just be able to set -moz border radiuses in CSS and have a plugin magically use those to create rounded corners in IE and Safari (IE mainly... using excanvas or something with it is fine, too). Any advice? For the project I'm working on now I don't need to have lines at the border (ie: no border:1px solid black or anything). Thanks, Jack- Hide quoted text - - Show quoted text -
[jQuery] Re: fadein thumbnails when loaded
Hi Rick,
Karl's suggestion seems the most elegant (assuming it works OK).
Here is some sample code for what he is suggesting
-- in HEAD or a stylesheet...
body.js #media-gallery ul li img {
/* opacity *may* work better than display:none */
opacity: 0.01;
filter: alpha(opacity=1);
}
And in your JS...
$(function() {
$(#media-gallery ul img).fadeIn(2000);
});
Then add this JS to your HTML - immediately after the BODY tag...
body
script type=text/javascript
document.documentElement.className = js;
-OR-
$('body').addClass(js);
/script
In theory, the images will only be hidden (1% opacity) if Javascript
is enabled, because otherwise BODY will not have the 'js' class,
therefore your CSS rule will not have any effect. Since you are adding
the class *before* the images are added to the DOM, they should load
transparent. And because they are not 'hidden' (display:none), the
images will still take up their normal space when loading, instead of
making the page 'jump' they they are made visible.
/Kevin
On Apr 28, 4:26 am, Rick Faircloth r...@whitestonemedia.com wrote:
In the head you can do this:
script type=text/javascript document.documentElement.className =
'js';/script
Then you can set styles for elements as descendants of .js.
Karl...will you explain a little more about what this means and perhaps give
an
example of its implementation? Or is there a blog or tutorial somewhere?
Thanks,
Rick
[jQuery] Re: fadein thumbnails when loaded
Here is a variation on Eric's idea. But in this example, instead of
writing the CSS rule via Javascript, write a rule to *negate it*
inside a noscript tag.
-- in HEAD or a stylesheet...
#media-gallery ul li img {
/* opacity *may* work better than display:none */
opacity: 0.01;
filter: alpha(opacity=1);
}
Then in the HEAD of you page, add a STYLE block inside a NOSCRIPT
block...
noscript
style type=text/css
#media-gallery ul li img {
/* UNDO the opacity rule set previously */
opacity: 1;
filter: alpha(opacity=100);
}
/style
/noscript
Just one more idea.
/Kevin
On Apr 29, 9:58 am, Kevin Dalman kevin.dal...@gmail.com wrote:
Hi Rick,
Karl's suggestion seems the most elegant (assuming it works OK).
[jQuery] Re: Using jQuery in requested file by $.ajax
According to http://docs.jquery.com/Ajax/jQuery.ajax#options if datatype is = 'html', the script code will be evaluated when the ajax response is inserted into the DOM. So change your code to do more than an alert and you should be fine. -K2
[jQuery] [Star Rating Plugin] How to change the star rating display WITHOUT firing off the click callback?
Hello, I am using the Star Rating Plugin from http://www.fyneworks.com/jquery http://jquery-star-rating-plugin.googlecode.com/svn/trunk/index.html What I am trying to do is when a star rating is initially requested, an ajax submit is fired off to update the database on the server side. However IF the user has already rated the item in question I want to be able to reset the star rating back to its initial display state (whatever the initial rating was). I am attempting to do this in the ajax submit success callback however, when I try change the star rating via the API the star rating click callback keeps getting called resulting in a loop. Can anyone suggest a way around this? Thanks
[jQuery] [form] Handling re-ajax'ing a form after a submission attempt
Hello,
I am having a problem re-binding a form with ajaxForm() and Zend
Framework.
I got the ajax form submit working, but on form validation failure I
am passing back the form html within a json object and I re-stuff the
div container with the form html in order to render out form errors.
This works fine.
My problem is re-intializing the form that has been passed back with
the ajaxForm() function. When I try re-submit the form, nothing
happens.
When the form is passed back via JSON object, I still use the same
element ID I used for the initial form prior to submitting. I tried
changing the element ID in the form to be passed back but still does
not work..
I am not sure what I am doing wrong...
Does anyone have any suggestions?
Thanks
Below is my showResponse() function
function showResponse(responseText, statusText) {
if (1 == responseText.statusCode) {
// Form Error
alert('Story Errors!');
$('#header-submit-container').html(responseText.html);
$('#myForm1').ajaxForm(responseText.formOptions);
} else if (2 == responseText.statusCode) {
// Form Success
alert('Story Submitted!');
}
}
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
For anyone interested, here is the updated set of 'tests' for the test
page I posted previously. This is the test-set John is currently
using:
// Test # 1
start = new Date();
$Test = $(#div+ myDiv + p);
end = new Date();
a_Selectors.push('$(#div'+ myDiv +' p)');
a_Times.push(end - start);
// Test # 2
start = new Date();
$Test = $(p, #div+ myDiv);
end = new Date();
a_Selectors.push('$(p, #div'+ myDiv +')');
a_Times.push(end - start);
// Test # 3
start = new Date();
$Test = $(#div+ myDiv).find(p);
end = new Date();
a_Selectors.push('$(#div'+ myDiv +').find(p)');
a_Times.push(end - start);
// Test # 4
start = new Date();
$Test = $(#div+ myDiv + p);
end = new Date();
a_Selectors.push('$(#div'+ myDiv +' p)');
a_Times.push(end - start);
// Test # 5
start = new Date();
$Test = $(#div+ myDiv).children(p);
end = new Date();
a_Selectors.push('$(#div'+ myDiv +').children(p)');
a_Times.push(end - start);
// Test # 6
start = new Date();
$Test = $($(#div+ myDiv)[0].childNodes).filter(p);
end = new Date();
a_Selectors.push('$( $(#div'+ myDiv +')[0].childNodes ).filter
(p)');
a_Times.push(end - start);
If you created your own test page, just copy-n-paste these tests into
it.
NOTE that setting: 'c_divs=1000' and 'c_paras=500' (as John is using)
makes the page very slow to load because it has to generate all these
elements. So for quick tests, reduce these numbers to 100 each. But if
you find something interesting, try cranking the numbers up again - it
magnifies the speed differences between the tests.
/Kevin
On Feb 25, 6:48 pm, RobG rg...@iinet.net.au wrote:
On Feb 26, 11:22 am, John Resig jere...@gmail.com wrote:
The benchmark is getElementById().getElementsByTagName() - why not
inlcude that in the test? Add the following below test 3:
// Test # 4
start = new Date();
$Test = document.getElementById('div' +
myDiv).getElementsByTagName('p');
end = new Date();
a_Selectors.push('getEBI().getEBTName()');
a_Times.push(end - start);
--
Rob
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
John wrote: You should always use $(#foo).find(p) in favor of $
(p, $(#foo))
I'm trying to extrapolate some general concepts from this 'rule'...
First, I *assume* these two statements are identical in performance:
$(p, $(#foo)) == $(p, #foo)
If so, then does it matter what the scope selector is? What if the
scope is *not an ID*, and therefore not as fast to find, like::
$(div.myClass).find(p) in favor of $(p, div.myClass) ???
If this is still true, then my understanding is that $(a).find(b)
syntax is ALWAYS faster than $(a, b)???
IF it is true that find() is always faster - or at least equal - to
specifying a scope selector/element, then it would seem that jQuery
should simply use the find() flow internally when a scope selector is
specfied. In other words, when a scope selector/element is specified,
find this element first and then 'call' the same method used for find
() - ie:
*** internally ***
$(p, $(#foo)) == $(#foo).find(p)
I can't think of any excepts to this - the result should always be
identical? If so, and performance is equal or superior, then *why not*
do this internally so the two statements above essentially become 100%
identical? It would just be two ways of expressing the same thing,
which is how it appears to users.
Am I off-base here? If so, which assumuption above breaks down?
Even if there is a good reason to treat the syntax differently
internally, I'm still interested to know if I should avoid using scope
selectors in favor of find() ***under all conditions*** - or only
under specific conditions?
/Kevin
On Feb 24, 5:58 pm, John Resig jere...@gmail.com wrote:
I want to point out a couple things:
1) You should always use $(#foo).find(p) in favor of $(p, $
(#foo)) - the second one ends up executing $(...) 3 times total -
only to arrive at the same result as doing $(#foo).find(p).
2) I generally dislike saying that there's one good way to do a
selector (especially with one that has such bad syntax, as above) -
especially since it may not always be that way.
In fact, I've already filed a bug and I'll be looking in to this
issue, possibly resolving it tonight or tomorrow - at which point the
advice will be false again.http://dev.jquery.com/ticket/4236
My recommendation is to always write the simplest, easiest to
understand, expression: jQuery will try to do the rest to optimize it.
--John
On Feb 24, 10:23 am, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi Karl,
$('#foo').find('p') and $('p', $('#foo')) are approximately of the same
speed.
I've put the test code on JSBin, so everybody can play around with it
and try other combinations :-)http://jsbin.com/ifemo
by(e)
Stephan
2009/2/24 Karl Swedberg k...@englishrules.com:
Hi Stephan,
Thanks for doing this testing! Would you mind profiling
$('#foo').find('p')
as well? I suspect it will be roughly equivalent to $('p', $('#foo'))
Cheers,
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Feb 24, 2009, at 8:28 AM, Stephan Veigl wrote:
Hi,
I've done some profiling on this, and $(p, $(#foo)) is faster than
$(#foo p) in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 ps in a foo div and 900 ps in a
bar div.
However the factor differs dramatically:
In 1.2.6 the speedup from $(p, $(#foo)) to $(#foo p) was between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$(p, $(#foo)) is faster in 1.3.2, by a factor of 1.5 (both FF and IE),
while $(#foo p) is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty bar div $(p, $(#foo)) is faster by a factor up to
3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat ricardob...@gmail.com:
up to jQuery 1.2.6 that's how the selector engine worked (from the top
down/left to right). The approach used in Sizzle (bottom up/right to
left) has both benefits and downsides - it can be much faster on large
DOMs and some situations, but slower on short queries. I'm sure
someone can explain that in better detail.
Anyway, in modern browsers most of the work is being delegated to the
native querySelectorAll function, as so selector performance will
become more of a browser makers' concern.
- ricardo
On Feb 23, 1:08 pm, Peter Bengtsson pete...@gmail.com wrote:
I watched the John Resig presentation too and learned that CSS
selectors always work from right to left.
That would mean that doing this::
$('#foo p')
Would extract all p tags and from that list subselect those who
belong to #foo. Suppose you have 1000 p tags of them only 100 are
inside #foo you'll have wasted 900 loops.
Surely $('#foo') is the fastest lookup possible. Doing it this way
will effectively limit the scope of the $('p') search and you
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
FYI, I built a quick test page for this. As previously noted, the
differences in v1.2.6 are relatively small - about 2x as long for one
syntax over the other. But with 1.3.2 - Wow! - 60x longer!
jQuery version used = 1.3.2
Total number of DIVs = 100
Paragraphs per DIV = 50
---
$(#div50 p) = 574ms
$(p, #div50) = 8ms
$(#div50).find(p) = 9ms
For anyone interested, below is *the complete test-page* so you can do
your own testing - just copy and paste. No external files are
required. Since the HTML is all generated by script, you can easily
modify the number of divs and number of paragraphs per div just by
changing the vars. You can also add as many test-cases for comparison
as you want. It's all pretty self-explanitory.
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/
TR/html4/strict.dtd
HTML
HEAD
META http-equiv=Content-Type content=text/html; charset=utf-8
TITLEjQuery Speed Test/TITLE
STYLE type=text/css
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 80%;
color: #FFF;
background: #000;
margin: 15px;
}
div {
border: 1px solid #FF0;
padding:5px 20px;
margin: 1ex 0;
}
p {
margin: 0;
}
div#Output {
font-size: 1.25em;
color: #000;
background: #FFF;
border: 3px solid #999;
margin-bottom: 15px;
}
div#Output p {
margin: 1ex 0;
}
/STYLE
SCRIPT type=text/javascript src=http://code.jquery.com/jquery-
latest.js/SCRIPT
SCRIPT type=text/javascript
$(document).ready(function(){
var
c_divs = 100
, c_paras = 50
, myDiv = Math.floor(c_divs/2)
, $Output = $(#Output)
, $DIV
, $Test
, start, end
, a_Selectors = []
, a_Times = []
;
$DIV = $(div/);
for (var i=1; i = c_paras; i++)
$DIV.append(p/).append( i );
for (var i=1; i = c_divs; i++)
$DIV.clone(false).appendTo(document.body).attr(id,div+i);
// Test # 1
start = new Date();
$Test = $(#div+ myDiv + p);
end = new Date();
a_Selectors.push('$(#div'+ myDiv +' p)');
a_Times.push(end - start);
// Test # 2
start = new Date();
$Test = $(p, #div+ myDiv);
end = new Date();
a_Selectors.push('$(p, #div'+ myDiv +')');
a_Times.push(end - start);
// Test # 3
start = new Date();
$Test = $(#div+ myDiv).find(p);
end = new Date();
a_Selectors.push('$(#div'+ myDiv +').find(p)');
a_Times.push(end - start);
// Write the Results
$Output.html(
pjQuery version used nbsp; = + $DIV.jquery +/p
+
pTotal number of DIVs = + c_divs +/p +
pParagraphs per DIV nbsp; = + c_paras +/p +
hr /
);
var c = a_Selectors.length;
for (var i=0; i c; i++)
$Output.append(p+ a_Selectors[i] + = + a_Times[i]
+ms /
p);
});
/SCRIPT
/HEAD
BODY
DIV id=OutputWorking.../DIV
/BODY
/HTML
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
That's a fantastic improvement. But now I have a new challenge - keep reading... To see if there really is a difference between the 2nd and 3rd options, or whether it is just 'variance', I cranked up the DIVs Ps and tried both versions again: ALL tests below are in FireFox 3.0.6 jQuery version used = 1.3.2 Total number of DIVs = 1000 Paragraphs per DIV = 500 --- $(#div500 p) = 15916ms $(p, #div500) = 32ms $(#div500).find(p) = 2ms jQuery version used = 1.3.3pre Total number of DIVs = 1000 Paragraphs per DIV = 500 --- $(#div500 p) = 48ms $(p, #div500) = 4ms $(#div500).find(p) = 4ms The last two tests seem identical, but the first syntax is still 0- times slower in 1.3.3. I though the 1st syntax might be slower because it handles *a range of possible syntaxes*, like $(#div500 p). So I add 2 new syntaxes and ran the test again... jQuery version used = 1.3.3pre Total number of DIVs = 1000 Paragraphs per DIV = 500 --- $(#div500 p) = 34ms $(p, #div500) = 2ms $(#div500).find(p) = 3ms $(#div500 p) = 16396ms $(#div500).children(p) = 32ms WOW! Check out the last 2 tests, John. Syntax #4 takes 512-times longer than #5! I think this code needs a little TLC too ;) It was also interesting that $(#div500).children(p) is 10-times slower than $(#div500).find(p). So I added one final test using childNodes and filter() to see if I could beat .children()... jQuery version used = 1.3.3pre Total number of DIVs = 1000 Paragraphs per DIV = 500 --- $(#div500 p) = 55 ms $(p, #div500) = 2 ms $(#div500).find(p) = 3 ms $(#div500 p) = 14802 ms $(#div500).children(p) = 32 ms $( $(#div500)[0].childNodes ).filter(p) = 19 ms The last (childNodes) test gathers the same elements in half the time. The 32ms performance of children(p) is very good, but perhaps there is still room for improvement? /Kevin On Feb 25, 1:30 pm, John Resig jere...@gmail.com wrote: To follow-up from my post yesterday, here are the new numbers, for 1.3.3 (work in progress, naturally):http://ejohn.org/files/jquery1.3.3/id.html jQuery version used = 1.3.3pre Total number of DIVs = 100 Paragraphs per DIV = 50 --- $(#div50 p) = 2ms $(p, #div50) = 0ms $(#div50).find(p) = 1ms --John
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
@John: I found a little bug in your v1.3.3 test version... This selector works fine in FireFox, but bombs out in IE7... $(#div50 p) IE7 -- Object doesn't support this property or method But this works fine: $(#div50 p) NOTE that I'm pulling v1.3.3 directly from your personal copy (jquery1.3.3/dist/jquery.js). I realize this is just a test version, but thought you'd like to know. /Kevin On Feb 25, 4:21 pm, John Resig jere...@gmail.com wrote: WOW! Check out the last 2 tests, John. Syntax #4 takes 512-times longer than #5! I think this code needs a little TLC too ;) It was also interesting that $(#div500).children(p) is 10-times slower than $(#div500).find(p). So I added one final test using childNodes and filter() to see if I could beat .children()... Oh right, this is a regression to what I just did - I can tweak that. I'll look in to it tonight. --John
[jQuery] Re: IE Problems
Sorry Double Post... ignore this one and look at Jquery 1.6rc6 Dialog Boxes
Internet Explorer Bugs
Thanks
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of KevinM2k
Sent: 19 February 2009 15:11
To: jQuery (English)
Subject: [jQuery] IE Problems
Hi,
I am using 1.6rc6, in firefox everything is absolutely great, but the
problems come in Internet Explorer (6 and 7)
Firstly the code i'm using to generate the dialog boxes is:
function openDialog(title,node,w,h) {
$('#'+node).dialog({
width : w,
modal : true,
height : y,
title : title
});
$('#'+node).dialog('open');
}
In internet explorer however the height option seems to be totally
invalid, for example if I pass through a height of 300, it gets a
height of around 50, in almost all occasions it takes around 250 off
the height, can this be explained anywhere? If I use a height of auto,
it does show the form correctly however that is not how I want it to
be.
The shadow of the dialog box is also causing problems, in Firefox it
is all the way around the dialog and looks great (which by the way
doesn't expand with the dialog box if using auto for height), however
in Internet explorer the top left is in the correct position, but due
to padding property not making the box bigger as it does with firefox,
the shadow does not show all the way around but only on the left and
top edges of the dialog box.
One more issue in IE, is in the ui.theme.css the very top css property
(.ui-widget) has a font size of 1.1em, if I leave this font size in,
the dialog box doesn't show in IE, but does in firefox, if I take it
off or change font size to a % or px, it comes up (with all the issues
described above).
Any help on this would be great as its been causing my problems all
day.
Thanks
Kevin
[jQuery] Re: Jquery 1.6rc6 Dialog Boxes Internet Explorer Bugs
Will do,
Cheers!
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of Richard D. Worth
Sent: 19 February 2009 16:31
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Jquery 1.6rc6 Dialog Boxes Internet Explorer Bugs
Could you please post this to the jQuery UI list?
http://groups.google.com/group/jquery-ui
Thanks.
- Richard
On Thu, Feb 19, 2009 at 10:47 AM, KevinM2k kevin...@googlemail.com wrote:
Hi,
I'm using JQuery 1.6rc6, and I am attempting to create dialog boxes
which I had no trouble with using 1.5 and have no trouble with in
Firefox, the problem is when it comes to Internet explorer (6 ro 7),
there are 4 main problems these are listed below.
Firstly I will give the code i'm using to open the dialog boxes:
function openDialog(title,node,x,y) {
$('#'+node).dialog({
width : x,
modal : true,
height : y,
title : title
});
$('#'+node).dialog('open');
}
As I said this works great in firefox, now for the problems in IE.
1. The height doesn't seem to work as it should do, If I set the
height to 300, the height seems to be around 50, always knocking
around 250 off the height, the only time I can get height working
correctly is if I use auto as the height, which I dont want to do
(more of auto later).
2. The shadow around the box on IE only covers the left and top parts
of the dialog window due to the margin: -8 0 0 -8 property, it also
has a padding of 8px all the way around, whcih in firefox expands the
shadow box and makes it fit.. this doesn't happen with IE.
3. The scrollbars that the new dialog boxes have on by default aren't
in the correct position, the left scrollbar is about 20 to 30px to the
left of where it should be and the bottom scrollbar around 10px from
the bottom of the dialog.
4. the ui.theme.css file that comes with theme roller as a ui-widget
property in at the top whcih specifies a font in 1.1em, if I leave
this font size in, the dialog box simply does even appear in ie6 or 7,
if i change this to represent percentage or pixels, the box then does
appear... very strange
With the auto property, I have also noticed in both IE and Firefox,
that the shadow doesn't expand with the dialog as it grows inside.
If anyone can help me with the 4 first errors that woudl be great
(number 4 i have got rid of by simply removing the em on the end of
the font, but the others still exist)
Thanks
Kevin
[jQuery] Callback no being executed from a post call...
I am having a problem,
The callback function I am passing to the jquery post request is not
executing the success callback on a successful reply from my servlet:
Here are some code snippets of what I am trying to do:
top of my file:
if (Ajax == null || typeof(Ajax) != object) { var Ajax = new Object
();}
Ajax.callBack = function(data, textStatus) {
alert('in callback');
}
Ajax.call = function (url, formValues) {
$.post(url, formValues ,function(data, textStatus) { Ajax.callBack
(data, textStatus); }, html);
}
I have also tried:
Ajax.call = function (url, formValues) {
$.post(url, formValues ,Ajax.callBack, html);
}
I examined the return of the $.post call and the XMLHttpRequest is
returning a status of 200, and the responseText variable has the
correct data. (I have examined them using FireBug). Also no exeception
is being thrown.
I have found if I use just this, the alert pops up
Ajax.call = function (url, formValues) {
$.post(url, formValues ,function(data, textStatus) { alert
(hello); }, html);
}
Thanks in advance
[jQuery] Re: Optimize large DOM inserts
I identified why the $(table /).append syntax is so extremely slow
in the sample page. It actually has nothing to do with being a 'second
DOM append' as was assumed. Here is what I learned from my testing...
This is the HTML mark-up for the tests:
BODY
DIV id=container/DIV
TABLE id=Table/TABLE
/BODY
I generated the same 'html' var from Mike's test page - containing
2000 table-rows. The loop used is irrelevant to these tests because
the times shown below are for the DOM insertion *only*.
First, here is the original append-code from Mike's sample page...
$('#container').append(
$('tabletbody/tbody/table').append(html)
);
// run-time: 7.5 sec
Note the extreme slowness of the insertion - over 7 seconds!
But by just *moving* the tbody tags, it becomes 20-times faster...
$('#container').append(
$('table/table').append('tbody'+ html +'/tbody')
);
// run-time: 0.36 sec
If we reduce it to a single command, it becomes 35-times faster...
$('#container').append(
'tabletbody'+ html +'/tbody/table'
);
// run-time: 0.24 sec
BTW, the speed is the same whether .html() or .append() is used.
If the existing table is used instead, we gain only a few ms.
$('#Table').append('tbody'+ html +'/tbody');
// run-time: 0.22 sec
To see if it makes a difference appending to a table that's 'not
empty', I appended the same 2000 rows *10-times* (to keep the math
simple)
html = 'tbody'+ html +'/tbody';
$('#Table')
.append( html )
.append( html )
.append( html )
.append( html )
.append( html )
.append( html )
.append( html )
.append( html )
.append( html )
.append( html )
;
// run-time: 2.23 sec
The run-time to append 10-times is *exactly* 10-times as long as
appending the first time. This means it makes no difference whether
the table is 'empty' or already has content.
So, in my tests, there is *no benefit* to appending an entire table to
an empty container. You get identical performance (in IE7) by
appending the new rows to a table - as long as they are wrapped in a
tbody. If the rows are not inside a tbody, then they are appended one-
by-one! This is why the syntax used by Mike was so extremely slow. It
actually had nothing to do with appending 2 elements, which I knew
could not account for a 3000% difference!
I dynamically generate table rows A LOT. My current web-app appends a
7-row tbody as a 'new record'. But I do not use loops to generate
html. Instead I use a hidden 'template tbody' that I clone. This has
all the events for the form-fields pre-attached. All I do is rename
all the fields after cloning the template, and before appending it to
the target table. This method is much easier to read and update than a
hundred lines of html-generating script. Plus I actually use the same
mark-up to generate the existing records onLoad (via JSP), so there is
zero code duplication.
I wanted to identify the cause of the slow append in Mike's sample
because I never see this in my applications. Now that I understand
what was happening, I see that appending a tbody is actually extremely
efficient - in fact, even faster than writing a new table! This is
good news because I cannot regenerate the entire table each time - I
must append new rows/records to an existing table.
I thought I'd share these results because appending a tbody (or a
single row) provides many more options than writing an entire table.
And now I know there is no performance difference - at least not in
IE7.
Thanks to Mike for providing a starting points for these tests, in
addition to his loop-optimization tips.
/Kevin
[jQuery] Re: Optimize large DOM inserts
Rick, based on what I've learned from testing, you have another option
now...
Here is a modified version of Mike's code - without generating the
table.
function populateDutyTable(response) {
var currentDay = '';
var rows = response.QGETDUTYSCHEDULE.DATA;
var out = [], o = -1;
out[++o] = 'tbody'; // CHANGED
for( var row, i = -1; row = rows[++i]; ) {
var day = row[1];
if( currentDay != day ) {
currentDay = day;
out[++o] = 'trtd class=cell-day';
out[++o] = row[1];
out[++o] = '/tdtd class=cell-date';
out[++o] = row[2];
out[++o] = '/tdtd class=cell-blank
colspan=5nbsp;/td/tr';
}
out[++o] = 'trtd class=cell-blank-daynbsp;/tdtd
class=cell-blank-datenbsp;/tdtd class=cell-am-am';
out[++o] = row[3];
out[++o] = '/tdtd class=cell-position';
out[++o] = row[4];
out[++o] = '/tdtd colspan=3Cell Content/td/tr';
}
out[++o] = '/tbody'; // CHANGED
$('#scheduleBody').append( out.join('') ); // CHANGED
}
A container around the table is no longer required because wrapping
the rows in a tbody achieves the same performance as wrapping them in
a table. Plus, you could now add rows without regenerating the entire
table. This provides more options with no penalty. For example, now
you could hard-code the table with column headers - for example...
table id=scheduleBody
thead
tr
thID/th
thDay/th
thDate/th
thName/th
/tr
/thead
/table
This is cleaner and faster than adding column headers inside your
Javascript loop.
I suggest you try both methods, Rick. Use a timer (like MIike's sample
pages) to confirm whether both are equally fast. Based on my tests,
you may find appending to the table even faster, with cleaner markup
as a bonus.
Ciao,
/Kevin
On Feb 7, 3:20 pm, Rick Faircloth r...@whitestonemedia.com wrote:
Hey, thanks Michael for taking the time to provide the
explanation and the re-write. I'll put this into place
and see how it performs. I'm sure it'll be *much* better!
Rick
[jQuery] Re: Newb question about accessing a form's inputs
Unless jQuery 1.3 has made vast improvement in the name=Xxx
functionality, it is *horrendously slow*! I use a custom function to
access form-fields - $F(fieldName) - which is up to 1000-times
faster on large pages in my web-application. But this method is
dependant on other custom methods, so I cannot provide it here as a
stand-alone plug-in..
I wish/hope jQuery will soon provide an efficient way to access form-
fields 'by name' because using IDs on form-fields is a clumsy hack
that I refuse to use except in special cases. On complex, dynamically
generated form pages, it clutters the code and requires extra logic to
add sequential IDs to things like radio buttons. So this is not a
proper solution to a common need.
/Kevin
On Feb 6, 2:27 pm, James james.gp@gmail.com wrote:
Without using IDs, you can use:
var myVar = $(input[name=myHiddenInput]).val();
On Feb 6, 10:54 am, james noahk...@gmail.com wrote:
Hi,
If I have a form:
form name=myForm method=post action=myAction.php
onsubmit=javascript:doStuff()
input type=hidden name=myHiddenInput/
input type=text name=myNonHiddenText/
input type=submit value=submit
/form
What is the equivalent JQuery syntax for the following?
function doStuff() {
document.myForm.myHiddenInput.value = 'some dynamic var';
return true;
}
Thanks in advance,
James- Hide quoted text -
- Show quoted text -
[jQuery] Re: Optimize large DOM inserts
These test pages DO NOT accurately compare the speed of array.join()
VS string+= The biggest speed difference between the two is
REALLY that one uses $(table/table) and one doesn't. If this is
removed from the 'slow' page, the load-speed goes from 8.7 sec to 1.5
sec. This is still 6-times longer than the fast version - but no
longer 30-times longer!
Conversely, I changed the 'fast' page to use the append syntax (after
removing table and tbody from the array):
$('#container').append( $('table/table').append( out.join('') ) );
This changed the 'fast' load from 0.24 sec to 7.3 sec! So even the
'fast loop' page performed 30-times slower when the element-append
method is used!
There was another code difference as well - the fast page uses $
('#container').html() and the slow-page $('#container').append().
However, since the container is empty, it does not cause any
significant speed difference.
So for a TRUE loop-speed comparison, the code for the 'slow version'
should be:
var html = 'tabletbody';
$.each( rows, function( iRow, row ) {
html += 'trtd' + row.text + '/td/tr';
});
html += '/tbody/table';
$('#container').html( html );
This now uses the same html() syntax as the fast version, isolating
the difference between the pages to ONLY the 2 loops. Now there is
less than a 1.3 sec difference - instead of 8+ seconds.
Now it becomes clear that the biggest lesson here is that append
(table/table) is a much bigger problem than the loop code. This
is important to know because it would apply even if there were NO loop
at all!
Thanks for bringing both these details to my attention. I do a lot of
dynamic HTML generation, so it's helpful to know what to watch out
for.
/Kevin
On Feb 5, 7:25 pm, Michael Geary m...@mg.to wrote:
...there is not much room for improvement left.
You just know that when you say that, someone will come along with a 20x-40x
improvement. ;-)
http://mg.to/test/loop1.html
http://mg.to/test/loop2.html
Try them in IE, where the performance is the worst and matters the most.
On my test machine, the first one runs about 6.3 seconds and the second one
about 0.13 seconds.
-Mike
From: Ricardo Tomasi
Concatenating into a string is already much faster than
appending in each loop, there is not much room for
improvement left. What you can do improve user experience
though is split that into a recursive function over a
setTimeout, so that the browser doesn't freeze and you can
display a nice loading animation.
On Feb 5, 5:03 pm, James james.gp@gmail.com wrote:
I need tips on optimizing a large DOM insert to lessen the
freeze on
the browser.
Scenario:
I receive a large amount of JSON 'data' through AJAX from a
database
(sorted the way I want viewed), and loop through them to
add to a JS
string, and insert that chunk of string into a tbody of a
table. Then,
I run a plug-in that formats the table (with pagination, etc.).
Simplified sample code:
var html = '';
$.each(data, function(i, row) {
html += 'trtddata from json/td/tr';});
$(tbody).append(html);
$(table).formatTable();
formatTable() requires that the table has to be completed
before it
can be executed.
Is there any way I can optimize this better? I think I've read
somewhere that making a string too long is not good, but I've also
read that updating the DOM on each iteration is even worst.
Any advice would be appreciated!- Hide quoted text -
- Show quoted text -
[jQuery] Re: Can JQuery solve the iframe height=100% problem?
Hi Dave,
You've probably long-since moved on from this, but I stumbled across
this topic again, so thought I'd answer anyway...
There are lots of examples on the Layout website for creating a
'layout' around an iframe - use one of these as a starting point...
http://layout.jquery-dev.net/demos/frames.html
http://layout.jquery-dev.net/samples/iframe_south.html
Or use ANY demos as a starting point and just drop in your iframe:
http://layout.jquery-dev.net/demos.html
The UI/Layout website itself uses iframes for some pages so it can
wrap content from other sites, like:
http://layout.jquery-dev.net/discuss.html
Rather than use the iframe itself as a layout 'pane', you could also
put the iframe 'inside' a regular pane-div. Since the pane-div has a
width and height set, all you need is:
iframe width=100% height=100% ...
This will auto-size the iframe to fit within the inner-dimensions of
the pane - ie, inside the padding. The Layout widget provides
virtually unlimited options for auto-sizing iframes and wrapping other
content around it - like headers, footers, sidebars, etc. If you want
to use Layout, then first check out the website documentation. If you
need more assistance, use the dedicated discussion group...
http://layout.jquery-dev.net/discuss.html
HOWEVER, a page-layout may not be suitable to your needs because it a
'Javascript' solution, so users MUST have JS enabled or else your page
will not look as you want. So depending on your need, you may find a
pure CSS solutions preferable, even if it is does require some ugly
nesting.
Hope that helps.
/Kevin
On Jan 28, 11:39 am, laredotorn...@zipmail.com
laredotorn...@zipmail.com wrote:
Hi Kevin, I really appreciate your help with all this. Unfortunately,
I added what you had suggested ...
script type=text/javascript
$(document).ready(function() {
$(body).layout({
closable: false
, resizable: false
, spacing_open: 0
, center_paneSelector: #fileTreeIframe
});
});
/script
iframe id=fileTreeIframe class=ui-layout-center style=border:0px
none #ff; src=file_tree.php border=0 width=100%
scroll=auto/iframe
and even included the normal script instaed of the .min.js file ...
script type=text/javascript src=../scripts/jquery.layout.js/
script
but sadly still now luck (screen shot is as before). There are no JS
errors on the page. Do I have to give every element on my page a
class name like you mention above, or should it be enough to only name
the iframe?
Thanks, - Dave
[jQuery] Re: Can JQuery solve the iframe height=100% problem?
If you are going to apply a specific iframe height via script...
$('#myIframe').css({height:$(this).parent('td').height()});
...You MUST bind an event to window.resize to *re-size* the iframe
whenever the browser window is resized.
/Kevin
On Jan 30, 10:58 am, jquertil til...@gmail.com wrote:
I think you're going down the wrong path - you shouldnt need to script
anything to get a CSS attribute to work.
usually when I run into this problem it is because somewhere in my
document tree there is a parent lement that has no height attribute
set.
So if you have html someDiv anotherDiv table tr td iframe
every one of the elements should have a parent with height set
At least this is how I usually end up solving the dreaded height 100%
problem whenever I come to it.
Alternatively, you can try
$('#myIframe').css({height:$(this).parent('td').height()});
[jQuery] Re: Optimize large DOM inserts
Mike, sorry if my post sounded like criticism - it was not intended
that way. However the representation of the test pages is misleading -
by accident I'm sure.
The majority of the performance difference between the 2 pages is
*solely* the difference between these 2 syntax
$(#container).append(
$(table/table).append(
trtdHello/td/tr
)
);
$(#container).append(
tabletrtdHello/td/tr/table
);
Or alternately...
$(#container).html(
tabletrtdHello/td/tr/table
);
The syntax differences above are responsible for 85% of the speed
difference between the pages - 7-times more than the loop-optimization
is. Yet none of the points you repeated above are related to this
issue. BOTH syntax only do a single DOM append - they just do it
differently. And the 'loop' is irrelevant to this 85% difference - a
simple string will still produce the same result.
If you replace the code in your 'slow page' with the sample I gave in
my last post - using .html( html ) - you'll see that the speed
improves 7-fold -- with no change to the string-concatenation loop or
anything else. Since this is 85% of the speed difference, this is
proper way to comparison of the issues you raised. (You could also use
$(table/table) in BOTH pages, but then the 'fast page' takes
over 7 seconds!)
So the loop-optimization produces only a 6-times speed improvement in
IE - not 30-times. This.is still a significant improvement by itself,
but I think it important to understand that $(table/table) is
*really* the big culprit here. In fact, I think this is something that
should be brought to the jQuery team's attention... Why is this syntax
so slower?
Ciao,
/Kevin
On Feb 7, 1:41 pm, Michael Geary m...@mg.to wrote:
No need to shout. :-)
I never claimed that these pages reflect only the difference between the
array join and string concatenation. On the contrary, in my other message in
this thread I listed all of the factors that make the code faster:
* Explicit for loop (and the fastest kind of for loop) - no function
callback for each row.
* Builds an array of string fragments and then joins it, instead of string
concatenation.
* Builds the array with out[++o] = ... instead of the more obvious
out.push(...) (faster in IE).
* Instead of inserting a large number of sibling DOM elements (the TRs)
together, inserts only a single DOM element (the TABLE).
Now it is very useful to know how much of the performance improvement is due
to each of these individual tricks, and thank you for doing that testing. My
purpose in posting was to combine all of the optimizations to create the
fastest possible code.
-Mike
From: Kevin Dalman
These test pages DO NOT accurately compare the speed of
array.join() VS string+= The biggest speed difference
between the two is REALLY that one uses $(table/table)
and one doesn't. If this is removed from the 'slow' page, the
load-speed goes from 8.7 sec to 1.5 sec. This is still
6-times longer than the fast version - but no longer 30-times longer!
Conversely, I changed the 'fast' page to use the append
syntax (after removing table and tbody from the array):
$('#container').append( $('table/table').append( out.join('') ) );
This changed the 'fast' load from 0.24 sec to 7.3 sec! So
even the 'fast loop' page performed 30-times slower when the
element-append method is used!
There was another code difference as well - the fast page uses $
('#container').html() and the slow-page $('#container').append().
However, since the container is empty, it does not cause any
significant speed difference.
So for a TRUE loop-speed comparison, the code for the 'slow version'
should be:
var html = 'tabletbody';
$.each( rows, function( iRow, row ) {
html += 'trtd' + row.text + '/td/tr'; }); html +=
'/tbody/table'; $('#container').html( html );
This now uses the same html() syntax as the fast version,
isolating the difference between the pages to ONLY the 2
loops. Now there is less than a 1.3 sec difference - instead
of 8+ seconds.
Now it becomes clear that the biggest lesson here is that append
(table/table) is a much bigger problem than the loop
code. This is important to know because it would apply even
if there were NO loop at all!
Thanks for bringing both these details to my attention. I do
a lot of dynamic HTML generation, so it's helpful to know
what to watch out for.
/Kevin
On Feb 5, 7:25 pm, Michael Geary m...@mg.to wrote:
...there is not much room for improvement left.
You just know that when you say that, someone will come
along with a
20x-40x improvement. ;-)
http://mg.to/test/loop1.html
http://mg.to/test/loop2.html
Try them in IE, where the performance is the worst and
matters the most.
On my test machine, the first one runs about 6.3 seconds and the
second one about 0.13 seconds.
-Mike
From: Ricardo Tomasi
Concatenating into a string is already much faster than
[jQuery] Re: Reversing the SlideUp and SlideDown functions to slide from the bottom and not the top
Use the effects in jQuery-UI when you need more than basic slideUp/
slideDown. Using show hide with the appropriate options will allow
you to slide in any direction. You also have a lot more effects to
choose from then just 'slide'
To open by sliding 'up', and close in reverse...
$E.show( 'slide', {direction: 'up'} );
$E.hide( 'slide', {direction: 'up'} );
To use a 'drop' effect instead of 'slide'...
$E.show( 'drop', {direction: 'up'} );
$E.hide( 'drop', {direction: 'up'} );
You can find details in the jQuery docs:
http://docs.jquery.com/UI/Effects
/Kevin
On Jan 27, 8:07 pm, ryjohnson ry.john...@gmail.com wrote:
I saw this was posted before, but there was never a solution posted. I
want to use the Toggle function but have it slide up from the bottom
of the div instead of the top, I have tried searching through all the
plugins, and even tried writing my own but have had no luck. If
there's anyone who can help me I would be extremely grateful.
[jQuery] Re: Can JQuery solve the iframe height=100% problem?
HI Dave,
You can find all the info in the Layout documentation and examples,
but here is a quick answer...
The widget needs to 'find' the iframe. The default method is to give
the element a ui-layout class, like this...
iframe id=fileTreeIframe class=ui-layout-center ...
OR, since the iframe has an ID, you can tell the widget to use that...
script type=text/javascript
$(document).ready(function() {
$(body).layout({
closable: false
, resizable: false
, spacing_open: 0
, center_paneSelector: #fileTreeIframe
});
});
/script
/Kevin
On Jan 27, 8:35 am, laredotorn...@zipmail.com
laredotorn...@zipmail.com wrote:
Hi Kevin,
How do I apply this expansion to the iframe specifically? I included
this on my page ...
script type=text/javascript src=../scriptsjquery.layout.min.js/
script
script type=text/javascript
$(document).ready(function() {
$(body).layout({
closable: false
, resizable: false
, spacing_open: 0
});
});
/script
iframe id=fileTreeIframe style=border:0px none #ff;
src=file_tree.php border=0 width=100% scroll=auto/iframe
but still no love! ...http://screencast.com/t/aJxegNZmv
- Dave
On Jan 26, 12:27 pm, Kevin Dalman kevin.dal...@gmail.com wrote:
Hi Dave,
This plugin may be more than you need, but...
The UI/Layout widget will automatically position and size an iframe
(or other element) to fill the entire page, OR allow for a header,
footer, or sidebars. The code and markup are dead-simple. Here is an
example with a page-banner and an iframe. Everything is done for you,
including eliminating the 'body scrollbar'...
$(document).ready(function(){
$(body).layout({
closable: false
, resizable: false
, spacing_open: 0
});
});
DIV class=ui-layout-north [Banner here] /DIV
IFRAME class=ui-layout-center src=myIframe.html ...
That's it! I recommend setting an iframe width height for non-
Javascript browsers, but it's not necessary for Layout. Plus you must
set your preferred iframe options, like scrolling, border, padding,
etc.
Plug-in website:http://layout.jquery-dev.net
Simple iframe demo:http://layout.jquery-dev.net/demos/frames.html
The Layout website itself used iframe pages with a 'banner', like:
http://layout.jquery-dev.net/discuss.html
Hope this helps.
/Kevin
On Jan 26, 6:55 am, laredotorn...@zipmail.com
laredotorn...@zipmail.com wrote:
My iframe is also hard-coded. But here is what I get when I do
console.log statements ...
$('#fileTreeIframe').load( function() {
var $ifbody = $(this).contents().find
( 'body' );
console.log($ifbody); // Outputs
Object length=1 0=body prevObject=Object jquery=1.2.6
$ifbody.css( 'height','auto' );
console.log($ifbody.height()); //
Outputs 0
$(this).height( $ifbody.height() );
});
Obviously the troubling thing here is that height is outputting zero.
Can you provide the HTML that surrounds your hard-coded iframe? There
must be something else I'm not setting in the CSS or HTML.
Thanks, - Dave
On Jan 25, 1:53 pm, dbzz j...@briskey.net wrote:
i have the iframe hardcoded in the html. if you are adding it to the
dom with js, it won't get the load event binding. you might try
livequery or something like it.
On Jan 25, 10:21 am, laredotorn...@zipmail.com
laredotorn...@zipmail.com wrote:
Hi dbzz,
I tried the code you provided, but went from this ...
http://screencast.com/t/W8lOtgKO
to the iframe disappearing entirely ...
http://screencast.com/t/jCTjOLhpeX
I put your code in a $(document).ready() block (below). Are there any
other modifications I should make to get it to display at 100%?
$(document).ready(function() {
$('#fileTreeIframe').load( function() {
var $ifbody = $(this).contents().find
( 'body' );
$ifbody.css( 'height','auto' );
$(this).height( $ifbody.height() );
});
});
Thanks, - Dave- Hide quoted text -
- Show quoted text -- Hide quoted text -
- Show quoted text -- Hide quoted text -
- Show quoted text -- Hide quoted text -
- Show quoted text -
[jQuery] Re: Can jQuery calculate CSS Width/Height
Thanks Matt, but that does not work.
As my example shows, the element may have a percentage width, or it
could be 'auto' (which it would be if not specifically set). What I
need is the 'pixel' measurement that would replicate its current size.
In other words, if it currently is width:90%; and I replace it with
width:985px;, the width *would not change* (assuming 985 is the pixel
equivalent).
On Jan 26, 3:03 pm, Matt matt.critch...@gmail.com wrote:
$('#Test').css('width') ?
On Jan 26, 11:46 am, Kevin Dalman kevin.dal...@gmail.com wrote:
jQuery has innerHeight/Width and outerHeight/Width methods, but is
there a method that can return a 'CSS Height/Width'. A CSS width is
the width that would be applied via CSS to achieve a given 'outer
width'. This value will differ depending on the box model and other
older browser idiosyncracies.
Here is an example...
DIV#Test {
width: 90%;
height: auto;
padding: 7px;
margin: 11px;
border: 3px solid #000;
}
DIV id=Test line1 BR line 2 BR line 3 /DIV
Now I want to increase the DIV width height by 1-pixel. To do so, I
need the current 'pixel width/height' that is equivent to its current
size. AFAIK, $(#Test).innerWidth() will not address this. Is there
another dimension method that can?
I already have a custom function to calculate this, but I'm wondering
if I am missing something in jQuery that would simplify my code? If
not, I may suggest such a method for jQuery, but want to be sure it
doesn't already exist!
Does anyone have knowledge of this?
/Kevin- Hide quoted text -
- Show quoted text -
[jQuery] Re: How to use one button to toggle multiple panels in succession
Not bad at all...if I remove them with slideUp, in succession, how would I
do that?
On Wed, Jan 28, 2009 at 7:39 AM, Stephan Veigl stephan.ve...@gmail.comwrote:
I'm not sure if I realy understand what you want to do, but it could
look something like
HTML:
div id=root
div class=myHeaderbutton+/button/div
div class='myPanel'1/div
div class='myPanel'2/div
div class='myPanel'3/div
div class='myPanel'4/div
div class='myPanel'5/div
/div
JavaScript:
var myPanels = $(.myPanel).hide();
var nextPanel = 0;
$(.myHeader button).click(function(){
if (nextPanel myPanels.length) {
$(myPanels[nextPanel++]).slideDown();
}
});
However, you may have problems if you delete or insert a panel.
A more flexible, but not so performat method would be:
(same HTML)
JavaScript:
var myPanels = $(.myPanel).hide();
$(.myHeader button).click(function(){
$(.myPanel:hidden:first).slideDown();
});
by(e)
Stephan
2009/1/27 webopolis krodenho...@gmail.com:
I want to have 1 + with x number of slide panels set to display:
none; under it . When a user clicks the + a panel is revealed. Each
time the + is clicked, the next panel is revealed, and so on. Each
panel will have a x that can be clicked to close itself.
I figure I would have to create an array for my collection of DIVs,
then with clicks, iterate through each one until I have the desired
number of panels revealed, or, I reach the end of the array.
I just have no idea how to begin with this.
Am I making any sense?
[jQuery] Can jQuery calculate CSS Width/Height
jQuery has innerHeight/Width and outerHeight/Width methods, but is
there a method that can return a 'CSS Height/Width'. A CSS width is
the width that would be applied via CSS to achieve a given 'outer
width'. This value will differ depending on the box model and other
older browser idiosyncracies.
Here is an example...
DIV#Test {
width: 90%;
height: auto;
padding: 7px;
margin: 11px;
border: 3px solid #000;
}
DIV id=Test line1 BR line 2 BR line 3 /DIV
Now I want to increase the DIV width height by 1-pixel. To do so, I
need the current 'pixel width/height' that is equivent to its current
size. AFAIK, $(#Test).innerWidth() will not address this. Is there
another dimension method that can?
I already have a custom function to calculate this, but I'm wondering
if I am missing something in jQuery that would simplify my code? If
not, I may suggest such a method for jQuery, but want to be sure it
doesn't already exist!
Does anyone have knowledge of this?
/Kevin
[jQuery] Re: Can JQuery solve the iframe height=100% problem?
Hi Dave,
This plugin may be more than you need, but...
The UI/Layout widget will automatically position and size an iframe
(or other element) to fill the entire page, OR allow for a header,
footer, or sidebars. The code and markup are dead-simple. Here is an
example with a page-banner and an iframe. Everything is done for you,
including eliminating the 'body scrollbar'...
$(document).ready(function(){
$(body).layout({
closable: false
, resizable: false
, spacing_open: 0
});
});
DIV class=ui-layout-north [Banner here] /DIV
IFRAME class=ui-layout-center src=myIframe.html ...
That's it! I recommend setting an iframe width height for non-
Javascript browsers, but it's not necessary for Layout. Plus you must
set your preferred iframe options, like scrolling, border, padding,
etc.
Plug-in website: http://layout.jquery-dev.net
Simple iframe demo: http://layout.jquery-dev.net/demos/frames.html
The Layout website itself used iframe pages with a 'banner', like:
http://layout.jquery-dev.net/discuss.html
Hope this helps.
/Kevin
On Jan 26, 6:55 am, laredotorn...@zipmail.com
laredotorn...@zipmail.com wrote:
My iframe is also hard-coded. But here is what I get when I do
console.log statements ...
$('#fileTreeIframe').load( function() {
var $ifbody = $(this).contents().find
( 'body' );
console.log($ifbody); // Outputs
Object length=1 0=body prevObject=Object jquery=1.2.6
$ifbody.css( 'height','auto' );
console.log($ifbody.height()); //
Outputs 0
$(this).height( $ifbody.height() );
});
Obviously the troubling thing here is that height is outputting zero.
Can you provide the HTML that surrounds your hard-coded iframe? There
must be something else I'm not setting in the CSS or HTML.
Thanks, - Dave
On Jan 25, 1:53 pm, dbzz j...@briskey.net wrote:
i have the iframe hardcoded in the html. if you are adding it to the
dom with js, it won't get the load event binding. you might try
livequery or something like it.
On Jan 25, 10:21 am, laredotorn...@zipmail.com
laredotorn...@zipmail.com wrote:
Hi dbzz,
I tried the code you provided, but went from this ...
http://screencast.com/t/W8lOtgKO
to the iframe disappearing entirely ...
http://screencast.com/t/jCTjOLhpeX
I put your code in a $(document).ready() block (below). Are there any
other modifications I should make to get it to display at 100%?
$(document).ready(function() {
$('#fileTreeIframe').load( function() {
var $ifbody = $(this).contents().find
( 'body' );
$ifbody.css( 'height','auto' );
$(this).height( $ifbody.height() );
});
});
Thanks, - Dave- Hide quoted text -
- Show quoted text -- Hide quoted text -
- Show quoted text -
[jQuery] Re: Can JQuery solve the iframe height=100% problem?
(Sorry if this is a duplicate post)
Hi Dave,
This plugin may be more than you need, but...
The UI/Layout widget will automatically position and size an iframe
(or other element) to fill the entire page, OR allow for a header,
footer, or sidebars. The code and markup are dead-simple. Here is an
example with a page-banner and an iframe. Everything is done for you,
including eliminating the 'body scrollbar'...
$(document).ready(function(){
$(body).layout({
closable: false
, resizable: false
, spacing_open: 0
});
});
DIV class=ui-layout-north [Banner here] /DIV
IFRAME class=ui-layout-center src=myIframe.html ...
That's it! I recommend setting an iframe width height for non-
Javascript browsers, but it's not necessary for Layout. Plus you must
set your preferred iframe options, like scrolling, border, padding,
etc.
Plug-in website: http://layout.jquery-dev.net
Simple iframe demo: http://layout.jquery-dev.net/demos/frames.html
The Layout website itself used iframe pages with a 'banner', like:
http://layout.jquery-dev.net/discuss.html
Hope this helps.
/Kevin
On Jan 24, 5:15 pm, laredotorn...@zipmail.com
laredotorn...@zipmail.com wrote:
Hi,
I'm trying to get my iframe to occupy 100% of its parent block
element. But the height=100% attribute in CSS isn't doing the trick.
Here's my HTML
td width=177 height=100% valign=top class=content-
ruleiframe id=fileTreeIframe style=border:0px none #ff;
src=file_tree.php border=0 width=100% scroll=auto/iframe/
td
and the CSS ...
iframe { display:block; height:100%; width:100%; border:none; }
It doesn't look good right now --http://screencast.com/t/mIzGnUikC.
Can JQuery help me make my iframe occupy 100% of its parent element?
Thanks, - Dave
[jQuery] Re: please wait while loading...
fabrice.regnier wrote:
Hi to all,
i have a nice gif please wait while loading... and i'd like to show
it when i click on a button. Is there a nice jquery way to do it ? do
i need a plugin ?
$(#Idsubmit).click(function () {
-- start showing the gif
long process
-- stop showing the gif
});
Easiest is to do it directly:
$(#Idsubmit).click(function () {
$(#nicegif).show();
long process
$(#nicegif).hide();
});
I do it all the time.
[jQuery] How do I build a variable array/object to use $.post?
Hi, I'm struggling a bit to get $.post to work. I can get it working as
documented, ie.
$.post(url, { param1: 1, param2: 2 } );
but I want variable fields on my form (identified by the class
'edit_field') to be posted to the url
I thought the approach below would work, postdata is built correctly,
but it sends nothing.
What am I doing wrong?
thanks
var postdata = [];
// get all the edit fields
$.each($('.edit_field'),function() {
postdata[this.name] = $(this).val();
});
// and sent it away
$.post(/spt/newcanonical,
postdata,
function(data) {
alert(data);
});
[jQuery] Re: How do I build a variable array/object to use $.post?
Kevin Thorpe wrote:
Hi, I'm struggling a bit to get $.post to work. I can get it working
as documented, ie.
$.post(url, { param1: 1, param2: 2 } );
but I want variable fields on my form (identified by the class
'edit_field') to be posted to the url
I thought the approach below would work, postdata is built correctly,
but it sends nothing.
What am I doing wrong?
thanks
var postdata = [];
// get all the edit fields
$.each($('.edit_field'),function() {
postdata[this.name] = $(this).val();
});
// and sent it away
$.post(/spt/newcanonical,
postdata,
function(data) {
alert(data);
});
Oh. I'm an idiot!
I was creating an array, not an object. I didn't realise the subtle
difference between the two. Changing postdata = [] to postdata = {}
fixes it.
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
jQuery (English) group.
To post to this group, send email to jquery-en@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/jquery-en?hl=en
-~--~~~~--~~--~--~---
[jQuery] livequery not acting on radgrid ajax row elements
I have a livequery function that doesn't run after elements are added
with an AJAX RadGrid control.
the elements are image thumbnails ie: img class=thumb/
$(function() {
$(.thumb).livequery(function() {
$(this)
.resizeToScale({ width: 50, height: 50 });
});
});
If elements are added dynamically via other means (like a click event)
the livequery function runs right away.
click event that works:
$(function() {
$(.click).click(function() {
$(#dynamic)
.AddImage(../729424.jpg)
.children(img)
.addClass(thumb);
});
});
It seems to only be a problem with the RadGrid control when it
dynamically creates the elements.
Anyone have similar problem or thoughts on a fix/workaround?
[jQuery] Re: Creating a Plugin
How about this jQuery editor:
http://markitup.jaysalvat.com/
it's called markItUp! and uses Html, Textile, Wiki Syntax, Markdown,
BBcode
On 5 dec, 08:27, Brian Ronk [EMAIL PROTECTED] wrote:
I'm making an edit in place plugin, and am running into an issue,
mainly because I'm not sure how to do it. The data I am working with
is bbcode, so what is seen on screen (non editing) is not bbcode, but
it decoded. I would like to be able to return the bbcode to work with
it in another area. I'm just not sure how to do that.
What I'd like to be able to do is to initialize it: $('#test').bbcode
(); and then be able to call it again (or something) to get the
actual bbcode out. So, something like $('#test').bbcode('code'); or $
('#test').showcode();
It basically works right now, except for the returning data. I'm just
not sure on how to procede to do that.
[jQuery] Re: Questions regarding $.ajax ...
mhall wrote:
Hi all, first post.
I'm in the processing of learning javascript and jQuery. I have a CGI
application that I have written and have been using in my business for
several years. It's written in a rather obscure CGI language called
WebBatch. Why? Well, because it's what I knew at the time I started
the project. :)
Anyway, one of the interesting things about that language is the
structure of its URLs - it isn't simply the path to a script in a cgi
directory, it's a path to the WebBatch executable with the script to
execute embedded in the query string after it like so:
http://atlas/webcgi/webbatch.exe?ordersys-dev/login.web
I mention that as I am having problems with the POST method in Ajax. I
can use the GET method just fine and load files and run scripts using
GET all day long, but I can't get any results when attempting to use
post - the script itself never executes on the server (I have a test
script that just writes out to a log file when it runs so that I can
see if it is executing).
Is there a chance that the unusual structure of the URLs presents an
issue with the POST method? I'm grasping at straws here as I've been
over everything for hours and can't think out anything else unusual
about what I'm trying to do or how I'm trying to do it.
Does that sound like it could even remotely be a source of the
problem, or do you figure I am completely off base?
This is the ajax call as I have it formatted currently:
$.ajax({
type: POST,
url:
//atlas/webcgi/webbatch.exe?ordersys-dev/login-ajax.web,
data: 'username=' + elem.form.username.value + 'password='
+
elem.form.password.value + '',
success: function(msg){
alert( Data Saved: + msg );
}
});
Thanks for any thoughts!
Micheal
What you're trying to do here is both a GET and a POST in the same
query. Webbatch expects a raw QUERY_STRING as the
script to execute and the data in POST_DATA (or whatever it's called).
Check your web logs. Is jquery stripping the GET part
from the URL? Certainly the server side can handle combined GET and
POST, I've done it myself due to restrictions in certain
frameworks.
[jQuery] weird 404 records in website statistics on jquery js file
Hi, when I look at my website statistics (awstats), somehow I keep finding these 404 records that point to: /jquery-1.2.3.pack.js/eval/3DYR8yd%2Bmb25QTy058Fe3Q%3D%3D or /jquery-1.2.3.pack.js/ +sfgRmluamFuX1R5cGU9amF2YV9zY3JpcHQmRmluamFuX0xhbmc9dGV4dC9qYXZhc2NyaXB0+ Does anyone have an idea what this means?
[jQuery] jquery cycle plugin problem?
Hello, I have a site here http://www.crsdepo.com/newsite/index_cycle.html where I am using the Jquery cycle plugin but I am having some problems in Explorer 7 and 6. In the right column near the bottom there is a testimonials section, which I have it cycling up, it looks perfect in Firefox but in Explorer 7 there seems to be a graphic glitch on the initial slide/ frame, the top header looks like it is overwriting part of the box, same with bottom. It's fine after the first frame. In Explorer 6, there is a blue background that is showing behind the testimonial box. Thanks for the help! Thanks!
[jQuery] Re: call a php function with onclick
stefano wrote: Hi, I would like to know how it is possibile to call a php function inside an onclick=function (), I try to explain me better Hi Stefano. Your problem is that php is on the server and javascript/jQuery is in the web browser. You need to get onclick to issue another page request to the server - that's AJAX. Look into $.get for a solution.
[jQuery] Re: New to Jquery, have written Validation script...
Yeah, I have to speak very highly of Jorn's plugin. It's quite
comprehensive and very solid. When I started on mine (the first simple
version was about a year ago) I simply wanted to see what I could do
on my own, so I didn't use any of the existing plugins. But I don't
think you can go wrong with Jorn's work.
On Oct 14, 6:26 am, Jörn Zaefferer [EMAIL PROTECTED]
wrote:
Yes it does. It even validates on keypress. Details about that are
documented
here:http://docs.jquery.com/Plugins/Validation/Reference#Validation_event
Jörn
On Tue, Oct 14, 2008 at 12:23 PM, Rick Faircloth
[EMAIL PROTECTED] wrote:
Jorn,
Does your plug-in offer on-blur validation?
Rick
Jörn Zaefferer wrote:
Have you looked at this validation plugin?
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Jörn
On Tue, Oct 14, 2008 at 5:16 AM, Nishan Karassik [EMAIL PROTECTED]
wrote:
That is really slick. I like the check boxes after it validates. It
looks like you are very well versed in jQuery. This is my first
script, but I haven't had time to test it yet. It took me two days
(well evenings) to research the right strategy to get that far. I am
hoping to submit the form for server-side validation, this way I can
use this for any form validation, I just have to change the server
side validation response. From the server-side validation, I am
hoping to send a JSON array then dynamically update the corresponding
div with the key name to the key value. Will the following update the
div with the id name of variable err_id with the value contained by
err_message? $(err_id).val() = err_message; In the past I've wrote
my own JS like the following:
document.getElementById('err_provcode').innerHTML = err_provcode;
I also work in the Health Care industry on the billing side. I need
to do multiple validations combining different dependencies based on
database queries for Medical Coding Data Entry on the front-end.
Thanks,
Nishan
On Oct 13, 11:43 am, Kevin Scholl [EMAIL PROTECTED] wrote:
I've done something similar to this, where validation is may be run at
either field level or on form submit, or both (default is both, can be
overridden by invocation setting, below).
http://beta.ksscholl.com/jquery/formvalidate.html
Routine is invoked by the following snippet in the HEAD of the
document:
$(#myFormSample).jqValidate({
// validateAt : both, // blur | submit | both
passMin : 6
});
The validation script itself is the bottom half of the following:
http://beta.ksscholl.com/jquery/js/jqforms.js
and checks that required fields have data, as well as various
specialized fields have proper formatting and such. I'm quite sure
that it could be cleaned up considerably by anyone more versed than
myself in the intricacies of jQuery, but I'm pretty pleased thus far.
Kevin
On Oct 13, 10:45 am, Nishan Karassik [EMAIL PROTECTED] wrote:
Wouldn't the $(#my-form [EMAIL PROTECTED]'input']).blur(function() {
be
my trigger?
I would like to validate as the user tabs through the form. How
would
I not run the function if the field just tabbed from is blank?
Thanks for your validation of my script.
Nishan
On Oct 13, 7:30 am, Jörn Zaefferer
[EMAIL PROTECTED]
wrote:
Validation should always hook into the submit event, eg.
$(#myform).submit(function() { ... });
That handles both clicking the submit button as well as hitting enter
while an input field has focus.
Apart from that, the form plugin handles submitting forms via
ajax and
handling the response quite well, including file
uploads:http://malsup.com/jquery/form/
Jörn
On Mon, Oct 13, 2008 at 5:57 AM, Nishan Karassik
[EMAIL PROTECTED] wrote:
Hello,
I have never written a Jquery script, but have, over the
last few
days, compiled the following, but was hoping someone could look over
this to see if I had problems.
$(document).ready(function () {
$(#my-form [EMAIL PROTECTED]'input']).blur(function() {
var queryString = $.(#my-form).formSerialize();
$.post(/path/to/your/validation.php, queryString,
function(validation_errors) {
// do something like changing a css class,
disable submit...
$.each(validation_errors, function(err_id,
err_message) {
$(err_id).val() = err_message;
}
)};
});
)});
Thanks,
Nishan
[jQuery] Re: New to Jquery, have written Validation script...
I've done something similar to this, where validation is may be run at
either field level or on form submit, or both (default is both, can be
overridden by invocation setting, below).
http://beta.ksscholl.com/jquery/formvalidate.html
Routine is invoked by the following snippet in the HEAD of the
document:
$(#myFormSample).jqValidate({
// validateAt : both, // blur | submit | both
passMin : 6
});
The validation script itself is the bottom half of the following:
http://beta.ksscholl.com/jquery/js/jqforms.js
and checks that required fields have data, as well as various
specialized fields have proper formatting and such. I'm quite sure
that it could be cleaned up considerably by anyone more versed than
myself in the intricacies of jQuery, but I'm pretty pleased thus far.
Kevin
On Oct 13, 10:45 am, Nishan Karassik [EMAIL PROTECTED] wrote:
Wouldn't the $(#my-form [EMAIL PROTECTED]'input']).blur(function() { be
my trigger?
I would like to validate as the user tabs through the form. How would
I not run the function if the field just tabbed from is blank?
Thanks for your validation of my script.
Nishan
On Oct 13, 7:30 am, Jörn Zaefferer [EMAIL PROTECTED]
wrote:
Validation should always hook into the submit event, eg.
$(#myform).submit(function() { ... });
That handles both clicking the submit button as well as hitting enter
while an input field has focus.
Apart from that, the form plugin handles submitting forms via ajax and
handling the response quite well, including file
uploads:http://malsup.com/jquery/form/
Jörn
On Mon, Oct 13, 2008 at 5:57 AM, Nishan Karassik [EMAIL PROTECTED] wrote:
Hello,
I have never written a Jquery script, but have, over the last few
days, compiled the following, but was hoping someone could look over
this to see if I had problems.
$(document).ready(function () {
$(#my-form [EMAIL PROTECTED]'input']).blur(function() {
var queryString = $.(#my-form).formSerialize();
$.post(/path/to/your/validation.php, queryString,
function(validation_errors) {
// do something like changing a css class, disable
submit...
$.each(validation_errors, function(err_id,
err_message) {
$(err_id).val() = err_message;
}
)};
});
)});
Thanks,
Nishan
[jQuery] Re: cascade question
hi ricardo,
i tried this before,
this only can set the first box.
it won't trigger the second box to get data from database.
second box still empty.
i have added selected attribute on my sample page.
http://sskes.damimi.org/test/
thanks anyway.
On 9月18日, 上午6時32分, ricardobeat [EMAIL PROTECTED] wrote:
You can do it via XHTML:
option value=B selected=selectedB/option
or add the attribute with jQuery:
$('#first option:eq(2)').attr('selected','selected');
ricardo
On Sep 17, 10:50 am, kevin [EMAIL PROTECTED] wrote:
Hi all,
here is my sample page http://sskes.damimi.org/test/
my question is how can i let the first box selected on B and also
trigger second box list the correct value
B1,B2,B3,B4 automatically when page loaded.
thanks.
[jQuery] Re: cascade question
Hi ricardo,
i tried this before,but set option attribute can only let first box
selected on B
it won't trigger second box get data from database.
second box won't change until you click on the first box and select
other options
all i want is first box selected on B and second box selected on
B2 automatically when page loaded.
i still added selected=selected on option B.
here is the sample page
http://sskes.damimi.org/test/
thanks anyway.
On 9月18日, 上午6時32分, ricardobeat [EMAIL PROTECTED] wrote:
You can do it via XHTML:
option value=B selected=selectedB/option
or add the attribute with jQuery:
$('#first option:eq(2)').attr('selected','selected');
ricardo
On Sep 17, 10:50 am, kevin [EMAIL PROTECTED] wrote:
Hi all,
here is my sample page http://sskes.damimi.org/test/
my question is how can i let the first box selected on B and also
trigger second box list the correct value
B1,B2,B3,B4 automatically when page loaded.
thanks.
[jQuery] cascade question
Hi all, here is my sample page http://sskes.damimi.org/test/ my question is how can i let the first box selected on B and also trigger second box list the correct value B1,B2,B3,B4 automatically when page loaded. thanks.
[jQuery] accordion open in different sections?
Hello, I am working on a site where I am using the Accordion script from http://docs.jquery.com/UI/Accordion on the left navigation. You have an option to keep a section open by defaultbut I need to change which button is opened depending on which section you are in, and I have that accordion menu in a include so I dont see how you can do it. The one that is open by default has a class of opener. Any ideas? Kevin
[jQuery] mootools and jquery conflict....
Hello,
I have a page here where the ScrollFollow plugin for Jquery is
conflicting with the phatfusion plugin in mootools.
The scrollfollow is on the bottom left ribbon button. The phatfusion
is on the 4 vertical photos you see in the banner area.
http://67.199.21.74/default.asp
I have read the page where how to fix it but I must not be doing it
right. The phatfusion is working but not the scrollfollow, which works
if I take out the phatfusion code.
I have this in the head
link href=imageMenu2.css rel=stylesheet type=text/css
media=screen /
script type=text/javascript src=mootools.js/script
script type=text/javascript src=imageMenu.js/script
script type=text/javascript
src=http://67.199.21.74/js/jquery.validate.pack.js
/script
script type=text/javascript src=http://67.199.21.74/js/
ui.core.js/script
script type=text/javascript src=http://67.199.21.74/js/jquery.easing.js
/script
script type=text/javascript src=http://67.199.21.74/js/jquery.cookie.js
/script
script type=text/javascript
src=http://67.199.21.74/js/jquery.scrollFollow.js
/script
script type=text/javascript
$( document ).ready( function () {
$( '#call' ).scrollFollow( {
container: 'wrap'
} );
} );
/script
script
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery(div).hide();
});
/script
script src=sifr/sifr.js type=text/javascript/script
script src=sifr/sifr-addons.js type=text/javascript/script
link rel=stylesheet href=sifr/sIFR-screen.css type=text/css
media=screen /
--
Any ideas how to fix it?
Thanks!
Kevin
[jQuery] Website Glitch
I noticed that the search icon sprite has its states 1px too close together--if you look closely at the bottom edge of the magnifying glass, you can just barely make out the top edge of the over state for this button (its a line of light gray). The site itself looks so great that this thing is driving me nuts! =)
[jQuery] Re: jQuery.com Broken?
same here. no CSS. degrading gracefully. On Sun, Jul 20, 2008 at 3:46 PM, xwisdom [EMAIL PROTECTED] wrote: Hello, The website is not rendering the CSS.
[jQuery] Re: jScrollPane with jQuery 1.2.6
I noticed that at http://kelvinluck.com/assets/jquery/jScrollPane/, the version of jScrollPane.js is 4765, while at http://plugins.jquery.com/project/jScrollPane you'll download version 3125.
[jQuery] Re: remove dynamically placed dom element
For dynamicly loaded elements you will need to use a plugin.
I suggest the 'listen' plugin.
Refer to the FAQ for more information.
http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_Ajax_request.3Fhttps://mail.google.com/mail/#inbox/11b1f57192f17027
On Sun, Jul 13, 2008 at 9:46 PM, Tom Shafer [EMAIL PROTECTED] wrote:
I am using this code to add a new item to a list
$(#addLinks).submit(function()
{
$.post(addLinks.php,{ step:'addLink',title:$
('#title').val(),url:$('#url').val(),pageID:$('#pageID').val()} ,
function(data)
{
$('#'+$('#pageID').val()).
append(li id='link_'+data+a
href='javascript://'
id='delete' onclick='deleteitem(+data+); return false;'img
src='img/delete.gif' //ah1+$('#title').val()+/h1p+$
('#url').val()+/p/li);
$('#link_'+data).effect(pulsate, { times: 3 },
1000);
});
return false;
});
as you can see i am adding a href='javascript://' id='delete'
onclick='deleteitem(+data+); return false;'img src='img/
delete.gif' //a
to delete the newest dom element.
this works on page refresh but I would like it to work right after
someone added the dom element
here is what i am using to delete data from the database and the
element that goes along with the delete item
function deleteitem(id) {
$(function() {
$.post(addLinks.php,{ step:'deleteLink',linkId:+id});
$('#link_'+id).remove();
});
}
$('#link_'+id).remove(); removes the item after a page refresh. How
can it the element be removed without a page refresh after being added
thanks
-tom
--
Fred Allen - Television is a medium because anything well done is rare.
[jQuery] Re: show hidden div on click
without seeing all your code...
The main thing I see wrong here is you are calling your fadin() function
with an unneeded argument that is also a string that is not encased by
quotes.
The argument is not required for your function at all--
So try this:
a class=fadein onclick=fadein();Overview/a
If you DO need the argument for some reason use:
a class=fadein onclick=fadein('#overview');Overview/a
On Mon, Jul 14, 2008 at 6:48 PM, David J Bauer [EMAIL PROTECTED]
wrote:
n00b here attempting to implement a simple jQuery function: I want to
slowly show (fade in) a hidden division after clicking a text anchor
(link). I've managed to get some jQuery plugins working correctly, but
coding something myself is apparently beyond my current capabilities.
:P
Here is the script code, inserted in the head:
script type=text/javascript
$(document).ready(function(){
function fadein() {
$(#overview).show(slow);
$(.fadein).click(fadein) {
});
});
});
/script
Here is the style code for the division from the CSS file:
div#overview {
width: 746px;
height: 340px;
position: relative;
top: -415px;
left: 0px;
background-color: #e4f0c5;
z-index: 1;
margin: 5px;
border: 2px solid #90a35d;
text-align: left;
color: #294145;
padding: 10px;
visibility: hidden;
}
And here is the HTML code from the body:
a class=fadein onclick=fadein(#overview);Overview/a
Note that in the CSS I have visibility as hidden: is that a problem?
Thanks for any assistance!
Regards,
-neuron
--
Vince Lombardi - Winning is habit. Unfortunately, so is losing.
[jQuery] Re: Calling PHP Functions from jQuery?
I think this plugin does what you are looking for: http://plugins.jquery.com/project/EUReCa On Mon, Jul 14, 2008 at 10:11 AM, Yavuz Bogazci [EMAIL PROTECTED] wrote: Hi, is it possible to call php functions from jquery? I knew how to call a .php page from jquery with $.post and to echo output or return a JSON Object. But my application growth and there is an increase in single php pages. This is very confusing and the filemanagement is getting complicated. How are you solving this problem? Is a good tutorial or info out there? I have searched google and couldnt find a useful answer. thank a lot yavuz -- Yogi Berra - A nickel ain't worth a dime anymore.
[jQuery] Re: Page Content fetch via GET
SumanShakya wrote:
hi all,
i have a problem.
I need to fetch page content via get. After data is fetched, i need
to perform 2-3 manipulation on data before showing the actual content.
Each manipulation modifies the page content. I am using the code shown
below
$.get(url,function(data) {
$('#container').html(data);
//manipulation code
//manipulation code
//manipulation code
});
The problem is after each manipulation, modified data shows up in the
container and then the final content appears at last. This makes the
page appear flickering. I need to show only the final content.
How can i achieve this??
Thanks for help in advance
Suman Shakya
do it the other way round. Manipulate data then do the
$('#container').html(data);
[jQuery] Re: [ Add Onclick on loaded image ]
since the image is loaded dynamicly,you should use the jquery.listen plugin.
It will allow you to 'listen' for the element and attach a click event to
the newly created image.
$('#mydiv').listen( 'click', 'img.myimgclass', function(){
//My code to run
});
On Thu, Jul 10, 2008 at 7:30 AM, Topayung, Amdys Max [EMAIL PROTECTED]
wrote:
Hi,,
This is what i change so far.. But it always execute the alert each time
the image is loading.
$.fn.image = function(src, f){
return this.each(function(){
var i = new Image();
i.src = src;
i.onload = f;
*i.onclick = alert(c);*
this.appendChild(i);
});
}
$(#thumbnail).image(returData[0],*satu*,function(){});
Thanks..
Regards.
Amdys
--
Robert Benchley - Drawing on my fine command of the English language, I
said nothing.
[jQuery] Re: Superfish / Firefox 3 PC / Flash issue
Get Firefox and install the Firebug Plugin. It will let you inspect the DOM and see whatever generated code there is in realtime. It will also let you see the CSS applied to each element do see if you may have any Z indexing issues or strange div spans. On Mon, Jul 7, 2008 at 11:50 PM, Joel Birch [EMAIL PROTECTED] wrote: This is interesting. I wonder if you can track down the differences in the generated source between the two methods of embedding? That would be great to know. Thanks for the info Chad! Joel Birch. -- Simone de Beauvoir - To catch a husband is an art; to hold him is a job.
[jQuery] changing value of a object sub variable
I have a simple plugin working that utilizes the jquery.flash plugin.
I am using my plugin to load a flash file that has around 20 flashvars. (i
only listed a few here).
Most of the time the default flashvars are fine..but sometimes I need to
modify only certain flashvariables... but not all of them.
My question is how do I change only one of the flashvars so I dont have to
add every single flashvar to every methodcall.?
my plugin code:
jQuery.fn.test = function(options) {
var settings = jQuery.extend({
src: Viewer.swf,
menu: false,
wmode: 'Opaque',
width: 270,
height: 280,
flashvars: {
ImagePath: /myImagePath/,
xmlPath : /mtyXmlPath/,
intX: 0,
intY: 0
// ... Plus around 16 other vars.
}
}, options);
$(this).flash(settings,{ version: 9 });
};
-
If I use:
$('#mydiv').test({flashvars: { ImagePath : /myImagePath/ });
It overwrites all the default flashvars.
and of course this wont work either:
$('#mydiv').test({flashvars.ImagePath : /myImagePath/ });
There must be some way to access just one of the flashvars.
Anyone know of a way to do this?
Thanks!
[jQuery] Re: How to replace a div content?
Try setting the div html to empty first.
jQuery(#elem).html().html('bmy text/b');
On Mon, Jul 7, 2008 at 10:04 AM, SimDigital [EMAIL PROTECTED] wrote:
How could i replace a html content inside the div?
I have 1 div (div id=elemini text/div) and everytime i click a
button, i want to replace the html content inside the #ELEM to new
one.
I try to use:
jQuery(#button).click(function() {
jQuery(#elem).html('bmy text/b');
});
but everytime i click the button, the html is not replaced, resulting
something like:
bmy text/bbmy text/b
What is the solution?
--
Paul Lynde - I sang in the choir for years, even though my family belonged
to another church.
[jQuery] Re: Plugin better than Lighbox or Thickbox
That majicthumb script looks a lot like this one. http://vikjavev.no/highslide/ Charging for this is pretty lame. They would be better off making tham free and benefiting from the traffic they would generate. On Sun, Jul 6, 2008 at 5:07 PM, Alexandre Plennevaux [EMAIL PROTECTED] wrote: On Sun, Jul 6, 2008 at 3:39 PM, David Morton [EMAIL PROTECTED] wrote: Why do you think it is better? On Sun, Jul 6, 2008 at 6:59 AM, [EMAIL PROTECTED] wrote: Dear folk, do we have such a plugin like below ... I have test the Demo version it is much more better from our Lightbox Plugin, the only problem it has is with AJAX , it can not support it please let me know if there is such an ability in our jQuery http://www.magictoolbox.com/magicthumb/ -- David Morton [EMAIL PROTECTED] - bulk address [EMAIL PROTECTED] - direct to my server i can't believe they charge 20 pounds for such a script. I can make this kind of implementation using jqModal in 2 hours. -- Rita Rudner - When I eventually met Mr. Right I had no idea that his first name was Always.
[jQuery] Re: Help finding this script
The effects on this page are done with Adobe Flash. I am not sure how you would do that with jQuery. But I will bet it could be done to some extent. On Fri, Jul 4, 2008 at 2:32 PM, Pedro Correia [EMAIL PROTECTED] wrote: Greetings! I'm trying to find some jquery plugin like on this webpage http://w1.siemens.com/entry/cc/en/ However I don't know that effect name, so I really don't know how to search :) For instance you have some links like: Drive Technologies, Automation Technologies, Solutions for Industries, etc; when onmouseover the header changes to other picture and changes the header text also, and when you click on those links you see an animation too. Can anyone help me finding this plugin (if jquery has something like that, of course :)) Best Regards! -- Simone de Beauvoir - To catch a husband is an art; to hold him is a job.
[jQuery] Re: Firefox/css/jquery..
The z-index value need not be in quotes. You have: z-index: 1 which should be simply: z-index: 1 Also, you need a doctype in your HTML document, or you're going to run into all manner of display issues. On Jul 2, 2:32 pm, Aaron [EMAIL PROTECTED] wrote: the website is supposed to show a texted image, which is behind a table, that table is like a light blueish looking box, and the text is behind it yet I want it in front on top of that box. On Jul 2, 11:00 am, MorningZ [EMAIL PROTECTED] wrote: I just noticed that firefox dosen't support the z-index Of course FF supports z-index... something is wrong with your code/markup, not with FireFox or jQuery Got a live link to show what you cannot get working?
[jQuery] Re: AJAX data inserted into DOM does not trigger click-event
Have you tried the listen plugin?
It works with dynamicly added content.
http://plugins.jquery.com/project/Listen
On Sun, Jun 15, 2008 at 12:52 PM, Thasmo [EMAIL PROTECTED] wrote:
Hoi guys!
I define a event trigger $('#id div a).click().
The url in the href attribute of the a tag is called via $.ajax
and the returned data is inserted into the #id element.
So, the actual HTML in the #id event is replaced
by the data AJAX response data. After the data
was inserted into the #id element, the click event
is not working anymore for HTML code which was
inserted in the #id element.
What can be the reason for this?
Thanks so much for your help!
--
He's spending $300 million in advertising to convince people of something
he claims there is already a consensus on.--
--Think of it as going green by getting lots of green.
-Glenn Beck (CNN) about Al Gore.
[jQuery] Re: Sorting Divs by Span Value
This is a handy plugin.
But it seems to be throwing an expected '(' error in IE. and not
functiong correct.
FF works OK.
If anyone else can confirm the but I will post a bug report.
On Tue, Jun 10, 2008 at 11:55 AM, Seth - TA [EMAIL PROTECTED]
wrote:
Found this plugin to do the job. TinySort -
http://www.sjeiti.com/?page_id=321
On Jun 5, 7:29 pm, Dave Methvin [EMAIL PROTECTED] wrote:
Wrap that html in a div id=hotels /div and try this code
triggered by a button or link.
function reorder(sortby, direction)
{
Array.prototype.sort.call($(div.hotel), function(a,b){
var av = $(a).find(span.+sortby).text();
var bv = $(b).find(span.+sortby).text();
return direction==ascending? av-bv : bv-av;
}).appendTo(#hotels);
}
sortby is the class name of any of the spans like distance or rate;
direction is ascending (low to high) or descending. The code
assumes the spans should always be sorted as numeric values.
That code should be plenty fast for a dozen or so entries, but it
would get slow for 100 because it requeries for the span values on
eachsortcomparison.
--
He's spending $300 million in advertising to convince people of something
he claims there is already a consensus on.--
--Think of it as going green by getting lots of green.
-Glenn Beck (CNN) about Al Gore.
[jQuery] DOM traversal -- need both parent node and siblings
Hello everyone,
I'm currently in a bit of a bind. I have a checkbox that's within a
table cell. I want it so when the input is clicked, the parent table
cell AND its siblings change their classes. I can get to the parent
element, but how would I attach this functionality to its siblings?
Right now, I have:
$(document.forms[Grid].elements[grid[]]).toggle(function()
{
$(this).parent().addClass(active);
},
function()
{
$(this).parent().addClass(inactive);
});
(I'm not using toggleClass because I have formatting within the
inactive class that's different than some of the other elements)
Would adding something like:
.end().siblings().addClass(active);
To the end of my statements remedy the issue?
[jQuery] Re: DOM traversal -- need both parent node and siblings
Great, thanks a bunch!
On Jun 11, 3:05 pm, Happy [EMAIL PROTECTED] wrote:
No need for the .end() there. Plus you can use .andSelf() to include
the first td and then run the addClass command just once.
function()
{
$(this).parent().siblings().andSelf().addClass(inactive);
}
should do it.
On Jun 11, 10:26 am, Kevin Major [EMAIL PROTECTED] wrote:
Hello everyone,
I'm currently in a bit of a bind. I have a checkbox that's within a
table cell. I want it so when the input is clicked, the parent table
cell AND its siblings change their classes. I can get to the parent
element, but how would I attach this functionality to its siblings?
Right now, I have:
$(document.forms[Grid].elements[grid[]]).toggle(function()
{
$(this).parent().addClass(active);},
function()
{
$(this).parent().addClass(inactive);
});
(I'm not using toggleClass because I have formatting within the
inactive class that's different than some of the other elements)
Would adding something like:
.end().siblings().addClass(active);
To the end of my statements remedy the issue?- Hide quoted text -
- Show quoted text -
[jQuery] Re: Pimped-out Numeric input
the spin Button script is similar to this. http://plugins.jquery.com/project/spin-button On Sun, Jun 8, 2008 at 5:03 PM, Frantisek Malina [EMAIL PROTECTED] wrote: Hi all, Anyone seen this sort of numeric input implemented in JQuery? It would be nice quantity input for shopping carts where you expect people to buy high number of smaller items. http://fczbkk.com/js/slide_set/ Script: http://fczbkk.com/js/slide_set/slide_set.js Dependencies: http://fczbkk.com/js/dom/dom.js -- He's spending $300 million in advertising to convince people of something he claims there is already a consensus on.-- --Think of it as going green by getting lots of green. -Glenn Beck (CNN) about Al Gore.
[jQuery] Re: hiding a div on document ready?
Giuliano showed you the correct way to hide the div.
But If you do want to add that css to the element it would be used like
this.
$(document).ready(function(){
$(#durl).css({ display:none; });
});
On Sat, Jun 7, 2008 at 3:50 PM, Giuliano Marcangelo
[EMAIL PROTECTED] wrote:
make sure you use the* # *sign to signify that it is an element with an *
id* of durl, and then *hide *it
$(document).ready(function(){
$(*#*durl).hide();
});
2008/6/7 mark [EMAIL PROTECTED]:
hi, am just beginning with jquery, and i want to hide a div to begin.
i tried this and it doesnt work and it is not hidden. do you know what
is wrong?
i also tried, $(durl).css(display,none);
is this wrong?
thanks
html
head
script type=text/javascript
src=http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js;/script
script type=text/javascript
$(document).ready(function(){
$(durl).style.display=none;
});
/script
/head
body
div id=durl
p
label for=curlURL/label
input id=curl name=url size=25 class=required type=text /
/p
/div
/body
/html
[jQuery] Re: jQuery TShirt
On the front: $(WWW).append(jQuery) And on the back: $(prototype, mootools, dojo, yui, etc.).remove(); *grin*
[jQuery] Re: TableSorter + Filtering + Ajax
Hi Patrick,
with Flexigrid, filtering is already possible!
Using the following options, you can filter the initial data that is
displayed.
$(#flex1).flexigrid
(
{
url: 'post2.php',
dataType: 'json',
query: 'Dublin',
qtype: 'city',
colModel : [
{display: 'ID', name: 'id' width : 20, sortable
: false, align:
'center'},
{display: 'City name', name : 'city', width :
200, sortable :
true, align: 'left'}
],
sortname: city,
sortorder: desc,
usepager: true,
resizable:false,
title: 'Cities',
useRp: true,
rp: 10,
showTableToggleBtn: false,
width: 500,
height: 400
}
);
The 'query' and 'qtype' options do the trick! And with this filtered
data, you can still page through your ajax'd data!
Kevin
On May 6, 10:13 pm, patrick davey [EMAIL PROTECTED] wrote:
Hi Kevin,
That looks like a really excellent plugin - might have to give it a
try. The one thing it doesn't do that I need it to - is *filtering*.
That is, say I am returning rows and one of the columns is a city -
and there may be multiple rows with the same city data. I want to be
able to choose 'Dublin' and then only have rows which have dublin as a
city returned.
And then... I want to be able to continue sorting and paging through
my ajax'd data! Fun eh ;) When I get something working I'll try to
post it up somewhere... as long as I can make it readable etc!
Thanks,
Patrick
On May 6, 9:47 pm, Kevin Kietel [EMAIL PROTECTED] wrote:
Try Flexigrid!
http://webplicity.net/flexigrid/
This jQuery plugin is a Lightweight but rich data grid with resizable
columns and a scrolling data to match the headers, plus an ability to
connect to an json/xml based data source using Ajax to load the
content.
If you need any help implementing it, just contact me or take a look
at the Flexigrid discussion on CodeIgniter
forums:http://codeigniter.com/forums/viewthread/75326/
There are several examples that you can use.
Let me know if this is what you're looking for!
Bye,
Kevin
On May 6, 2:18 am, patrick davey [EMAIL PROTECTED] wrote:
Hi,
I am using the tablesorter pluginghttp://tablesorter.com/andit
works fine for smallish tables. However, I need to page through large
result sets (and filter them) - so I am going to use AJAX to
repopulate the table once the options have been selected.
Now, if through filtering / whetever - less than 100 rows are
returned, then I want tablesorter to just sort the table (without
having to make an AJAX call)
To do this I want to edit the tablesorter plugin to call a function
which returns true/false depending on how many records there are to
sort.
So my question (there is one!) is how do I do that with tablesorter.
I have tried using 'sortStart' and returning false but no joy. I can
edit the source of course - but if there is a simple way I'd love to
know it.
Better still, does anyone have an example of doing filteringsorting
paging of large datasets using JSON/AJAX and Jquery? :)
Thanks,
Patrick
[jQuery] Re: TableSorter + Filtering + Ajax
Try Flexigrid! http://webplicity.net/flexigrid/ This jQuery plugin is a Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an json/xml based data source using Ajax to load the content. If you need any help implementing it, just contact me or take a look at the Flexigrid discussion on CodeIgniter forums: http://codeigniter.com/forums/viewthread/75326/ There are several examples that you can use. Let me know if this is what you're looking for! Bye, Kevin On May 6, 2:18 am, patrick davey [EMAIL PROTECTED] wrote: Hi, I am using the tablesorter pluginghttp://tablesorter.com/and it works fine for smallish tables. However, I need to page through large result sets (and filter them) - so I am going to use AJAX to repopulate the table once the options have been selected. Now, if through filtering / whetever - less than 100 rows are returned, then I want tablesorter to just sort the table (without having to make an AJAX call) To do this I want to edit the tablesorter plugin to call a function which returns true/false depending on how many records there are to sort. So my question (there is one!) is how do I do that with tablesorter. I have tried using 'sortStart' and returning false but no joy. I can edit the source of course - but if there is a simple way I'd love to know it. Better still, does anyone have an example of doing filteringsorting paging of large datasets using JSON/AJAX and Jquery? :) Thanks, Patrick
[jQuery] links in accordion plugin?
Hello, I have a page at http://www.consultwebs.com/videoNEW.htm which uses the accordion plugin to run those tabs you see where the video is. It works fine but none of the links works in the tabs, and some of them disappear. Like under the Example Videos on Consultwebs' Client Websites. heading. When you click on the links it closes the tab instead of going to the page I want. How do I get the links working in the paragraphs? Anyone know the problem? thanks alot!
[jQuery] Re: links in accordion plugin?
Thanks for the help, I'm quite a newbie at jQuery so not sure how to
add that. I attempted to add that code to the jquery code the top in
the head
I have this now:
script type=text/javascript
jQuery().ready(function(){
// simple accordion
jQuery('#list1b').accordion({
autoheight: false
});
$(.ui-accordion).bind(changeaccordion, function(event, ui) {
ui.accordion-heading // internal widget instance
});
});
/script
It does not seem to be working, but I know I'm doing something wrong.
my heading code is like this:
a class=accordion-headingExample Videos on Consultwebs#39; Client
Websites./a
Thanks again for the help!
Kevin
On Mar 26, 2008, at 2:38 PM, Jörn Zaefferer wrote:
Try to specify the header to use for the accordion via the header-
option, see http://docs.jquery.com/UI/Accordion/accordion#options
Jörn
[jQuery] Select All Checkboxes and IE6
Hello, all. I've searched though previous threads hoping to find some clue, but am still having issues with the following page: http://beta.ksscholl.com/jquery/tablesorter.html Click on the top or bottom checkbox, then do a sort on the table (with the fine tablesorter plugin). The checkboxes retain their state ... except, of course, in IE6. Clicking individual checkboxes and sorting is not an issue, so I suspect I'm missing something in my select/ deselect all routines: http://beta.ksscholl.com/jquery/js/jqcheckboxes.js (You can ignore the checkToggle and btnState functions there, as they are for another page.) I've looked at and tried so many things, that I fear I'm blinded to something simple at this point. Any assistance greatly appreciated ... thanks! Kevin
[jQuery] Re: Select All Checkboxes and IE6
Hi, Christian. Yes, I have that widget in place (in fact, I believe you wrote it in response to a question I'd posed some months back). However, the problem still persists. I'm thinking maybe my select/ deselect all routine is not doing something properly, such that IE isn't maintaining state when the sort occurs. ??? On Mar 25, 2:30 pm, Christian Bach [EMAIL PROTECTED] wrote: Hi Kevin, Take a look at the source of this page:http://tablesorter.com/tests/checkbox.html There is a special ie-checkbox widget, i wrote to deal with the checked state not being fired correctly in IE6. Happy tablesorting! /Christian 2008/3/25, Kevin Scholl [EMAIL PROTECTED]: Hello, all. I've searched though previous threads hoping to find some clue, but am still having issues with the following page: http://beta.ksscholl.com/jquery/tablesorter.html Click on the top or bottom checkbox, then do a sort on the table (with the fine tablesorter plugin). The checkboxes retain their state ... except, of course, in IE6. Clicking individual checkboxes and sorting is not an issue, so I suspect I'm missing something in my select/ deselect all routines: http://beta.ksscholl.com/jquery/js/jqcheckboxes.js (You can ignore the checkToggle and btnState functions there, as they are for another page.) I've looked at and tried so many things, that I fear I'm blinded to something simple at this point. Any assistance greatly appreciated ... thanks! Kevin
[jQuery] IE7 not adjusting width of select box
I'm having a spot of bother with select boxes in IE7. I have one select
box which empties and refills a second when the
selected item changes using an AJAX call. This works fine in Opera and
FireFox but IE7 doesn't adjust the width of the
second select box to match the new contents. There must be a simple
workaround for this but for the life of me I can't
find it. I don't really want to fix the size in CSS. My code is below,
the AJAX page just returns a list of val=text pairs to
populate the select box.
Thanks for any assistance.
$(document).ready(function(){
$(#brandlist).focus().change(function(){
$('#matches').empty();
$.get(brand.map.helper.php,
{ code: $(this).val() },
function(data) {
var matches = data.split(\n);
$(#sql).html(matches[0] + br + matches[1]);
for (var i=2; imatches.length-1; i++) {
var params = matches[i].split(=);
var o = new Option(params[1],params[0]);
$(#matches).append(o);
}
});
});
});
});
[jQuery] Re: Help with draggable / droppable
The problem is, I think, that the draggable plugin if used without a
helper modifies the dragged element to position: absolute.
At that point moving it in the DOM doesn't have any visible effect, it
simply sits where I let go of it instead of 'snapping' into
the destination cell. I've got it working with a helper though.
Scott González wrote:
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.
--
Kevin Thorpe
Head of IT
Purchasing Index Ltd
Southbank House
Black Prince Road
London SE1 7SJ
tel: 020 7463 2022
fax: 020 7463 2025
Mailto: [EMAIL PROTECTED] mailto:[EMAIL PROTECTED]
URL: http://www.pricetrak.com
*/Registered in England No. 1728605/*
All views or opinions expressed in this message are solely those of the
author. Accordingly, Purchasing Index Ltd does not accept responsibility
for the contents of the message unless specifically stated otherwise. If
you have received this message in error, please notify the sender and
delete the message immediately.
[jQuery] Help with draggable / droppable
I'm wondering if anyone would be kind enough to help me with draggable and droppable. I'm relatively inexperienced in jquery and css. What I want to do is show a list of draggable blocks (referring to the column headings in a CSV file) and to be able to sort them into a set of boxes (fields in a database table). I have a table where the cells contain a set of draggable divs and a destination table with droppable tds and this bit works fine, I get the event on dropping a div in the table cell. What I can't figure out though is how to move the div from the source table cell to the destination table cell. It simply sits where I dropped it on the page. Can anyone please enlighten me on this? thanks Kevin Thorpe
[jQuery] Re: Help with draggable / droppable
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: Superfish Menus - Including Dynamic Navigation Arrows
This isn't Superfish specifically, though I did write it based very largely on the original Suckerfish, with enhancements. http://beta.ksscholl.com/jquery/suckerfish.html Kevin On Jan 7, 5:04 pm, Robin Rowell [EMAIL PROTECTED] wrote: Hi all and Joel. Is there a version of Superfish that uses jquery generated arrows (using dynamically created classes) for submenus that contain further content? (this page would be an example:http://sperling.com/examples/menuh/ ) Thanks!
[jQuery] Re: looking for plugin that presets values in text box
The plugin toggleVal (written by a colleague of mine) might be of some interest to you. http://plugins.jquery.com/project/toggleval On Jan 5, 11:45 pm, Bhaarat Sharma [EMAIL PROTECTED] wrote: Hi, some time ago I saw a jquery plugin which would preset the value in a text box and when users' cursor came to that text box...the preset value would go away. it was sort of there to let the user know what format should be in this text field. I cant recall the name of the plugin. Wondering if someone can help me find this plugin?
