[jQuery] Send XML to web service
How would one go about sending an XML file to a web service? I'm guessing the data parameter of $.ajax function has something to do with it, but I could not find a working example in the documentation.
[jQuery] Passing arguments to event handler
I'm trying to pass arguments to a function that's called from within
anonymous function that acts as an event handler for the click event.
The problem is that once a thumbnail(gallery.images[i]) is clicked the
startSlideshow function gets the final iteration's values passed as
the arguments, instead I would like for it to get the values(filename,
folder, width, height) of the loop iteration it was created in.
The code in question is:
$(_gallery.images[i]).click(function(){
slideshow.startSlideshow(filename, img/gallery/ +
_gallery.subpage + /, w, h)
});
...the whole loop:
for(i=0; i_gallery.numThumbs; i++){
node = $(_gallery.xmlFileList).find
(picture).get(i);
filename = $(node).attr(filename);
w = $(node).attr(width);
h = $(node).attr(height);
tmbDim = slideshow.scaleFactoring
(w,h,tmbPlaceW,tmbPlaceH);
tmbW = Math.round(tmbDim[0] * 0.85);
tmbH = Math.round(tmbDim[1] * 0.85);
_gallery.images[i] = new Image();
$(_gallery.images[i]).addClass(galleryTmb);
$(_gallery.images[i]).load( function(){
$(this).css({top: Math.round($
(this).parent().height() / 2 - $(this).outerHeight() / 2)});
$(this).css({left: Math.round($
(this).parent().width() / 2 - $(this).outerWidth() / 2)});
$(this).data(mydim, {w:$(this).width(),h:
$(this).height(),ow:$(this).outerWidth(),oh:$(this).outerHeight()});
pulseTmb(this);
});
$(_gallery.images[i]).click(function(){
slideshow.startSlideshow(filename, img/
gallery/ + _gallery.subpage + /, w, h)
});
currDiv = document.createElement(div);
$(currDiv).addClass(tmbPlace);
$(currDiv).width(tmbPlaceW);
$(currDiv).height(tmbPlaceH);
$(currDiv).append(_gallery.images[i]);
$(#divPicPanel).append(currDiv);
_gallery.images[i].src = thu.aspx?img= +
filename + w= +tmbW + h= + tmbH +path=img/gallery/ +
_gallery.subpage + /;
}
Sorry for poor english(I've been at javascript for 8hrs straight),
please help.
[jQuery] Surefire way to animate thumbnails upon load
I'm trying to add pulse effect to thumbnails in my gallery, so that
they animate one after another upon load.
If you look at the code you'll probably notice I'm using fxqueue
plugin for queuing animation, but the problem persists even if I don't
use it.
This is the code, and it works in my virtual machine setup and on the
web, but some thumbnails fail to fire the load event if I connect to
my virtual machine from the host(thumbnails probably load before the
code has a chance to attach the event):
$(document).ready(function() {
$(.dlPicturesImg).each(function() {
$(this).load(function() {
$(this).data(tmbWidth, $(this).width());
$(this).data(tmbHeight, $(this).height());
//fadeTmb(this);
pulseTmb(this);
}).attr(src, this.src);
/*$('.dlPicturesImg').bind('readystatechange load',
function(){
if(this.complete)
pulseTmb(this);
}).attr('src',this.src);//.appendTo('body'); */
});
});
function pulseTmb(tmb) {
var tmbWidth = $(tmb).width();
var tmbHeight = $(tmb).height();
var parWidth = $(tmb).parent().width();
var parHeight = $(tmb).parent().height();
$(tmb).data(tmbWidth, tmbWidth);
$(tmb).data(tmbHeight, tmbHeight);
$(tmb).width(1);
$(tmb).height(1);
$(tmb).css(margin-left, Math.round(parWidth / 2) +
px);
$(tmb).css(margin-top, Math.round(parHeight / 2) +
px);
// $(tmb).css(display, inline);
$(tmb).animate({ borderWidth: %=tmbBorder% + px,
marginLeft: Math.round((parWidth - (tmbWidth + %=tmbBorder% *2)) /
2) + px, marginTop: Math.round((parHeight - (tmbHeight + %=tmbBorder
% *2)) / 2) + px, width: tmbWidth + px, height: tmbHeight +
px }, { queue: pulseTmbs, speed: 200, wait: 10, callback: function
() { bindMouseToTmb(tmb); } });
}
function fadeTmb(tmb) {
$(tmb).data(tmbWidth, $(tmb).width());
$(tmb).data(tmbHeight, $(tmb).height());
//$(tmb).fadeIn(slow, bindMouseToTmb(tmb));
//$(tmb).fadeIn({ queue: fadeTmbs, speed: 300, preDelay:
50, postDelay: 50, complete: function() { bindMouseToTmb(tmb); } });
$(tmb).fadeIn({ queue: fadeTmbs, speed: 200, wait: 10,
callback: function() { bindMouseToTmb(tmb); } });
}
[jQuery] Re: Animated resize of a thumbnails inside a table
Great stuff Mike, thanx! On 3 sij, 18:47, Mike Alsup mal...@gmail.com wrote: Here's an example that may help: http://www.malsup.com/jquery/cycle/thumbs.html I decided to make a little plugin for this: http://jquery.malsup.com/hoverpulse/
[jQuery] Animated resize of a thumbnails inside a table
I'm (still) trying to create a hover effect over a thumbnail image, a
simple animated grow is what I'm looking for.
Has anyone done this and is interested to share some insight?
I'm tripping on the first step, changing the thumbnail position to
absolute (of 4 major browsers that I'm using to test the site, every
one of them has a different idea of where the thumbnail top and/or
left position should be.
This is what I've got so far:
$(.dlPicturesImg).bind(mouseenter, function() {
// if (bResizing) return;
var parDivWidth = $(this).parent().width();
var parDivHeight = $(this).parent().height();
var tmbWidth = $(this).outerWidth();
var tmbHeight = $(this).outerHeight();
var newTmbWidth = Math.round(tmbWidth * 1.2);
var newTmbHeight = Math.round(tmbHeight * 1.2);
var newLeft = Math.round((parDivWidth / 2) -
(newTmbWidth / 2)) + px;
var newTop = - + Math.round(newTmbHeight / 2) +
px;
prevTmbWidth = $(this).width();
prevTmbHeight = $(this).height();
$(#txaDebug).val($(#txaDebug).val() + over +
nw: + newTmbWidth + nh: + newTmbHeight + nt: + newTop + nl:
+ newLeft + \n);
var pos = $(this).position();
$(this).css({ top: - + Math.round(parDivHeight / 2)
+ px, left: pos.left, position: absolute });
/* $(this).css(left, newLeft);
$(this).width(newTmbWidth);
$(this).css(top, newTop);
$(this).height(newTmbHeight);*/
//bResizing = true;
//$(this).animate({ top: newTop, left: newLeft, width:
newTmbWidth, height: newTmbHeight });
return false;
});
[jQuery] Re: Resize an element without affecting the layout
I made some progress as you can see here: http://tinyurl.com/645ow4 , but I've ran into problem with jquery hover function. Its over and out functions fire too many times while the cursor is still over the same image. That happens only if I use the animate effect inside the over function, if I just switch the size of the images it works without a problem. On 20 stu, 13:08, Liam Potter [EMAIL PROTECTED] wrote: erm, best way to explain is to show an example. lets say the image is 400x400 to get it in the center you will need to set top and left to half that. top:-200px; left:-200px; If I'm right this should work, and you can use this in jquery animate. vani wrote: That's it, weehee! Now if only I could somehow position the center of the images to coincide with the center of parent cell? Any ideas on that one, and perhaps compatible with jquery animated resize? On 20 stu, 12:43, Liam Potter [EMAIL PROTECTED] wrote: ok, got it. Un comment the div in the td, and apply the position relative to that. for some reason position relative doesn't seem to work on a table cell. Ivan Svaljek wrote: Here is the link, but it changes often:http://tinyurl.com/634p9s On Thu, Nov 20, 2008 at 12:20 PM, Liam Potter [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: do you have a live example I can see? vani wrote: That made it work in IE, but firefox and opera exhibit serious problems with it. Firefox sets the top/left to document top/left, and opera sets it to table top/left, only IE sets it to cell's top/left. On 20 stu, 11:03, Liam Potter [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: make sure you have made the td position:relative Ivan Svaljek wrote: If I do that, they all pile up on each other at the top/left corner of the table, like this:http://tinyurl.com/5tdmgm On Thu, Nov 20, 2008 at 10:21 AM, Liam Potter [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: set the css on them to this position:absolute; top:0; left:0; vani wrote: I've taken out the div, but it doesn't matter because as soon as I change the images positioning to absolute they change their top/left coordinates to the center of the cell, like this: http://tinyurl.com/5vmb42 On 20 stu, 09:57, Liam Potter [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: is the div necessary? Try taking it out. vani wrote: Thanks for replying, but I'm still having trouble making it work. I tried to set the table to relative and img to absolute but it didn't work as intended. This is the layout of the table: table tr tddivimg //div/td tddivimg //div/td tddivimg //div/td /tr /table ...I'm trying toresizethe img elements. On 19 stu, 18:15, Liam Potter [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: use absolute positioning and set the parent element to relative. vani wrote: Is it possible to create an animatedresizeof an element without affecting the layout of the parent element table? I'm usingjQuery1.2.6 and possibly personalized jQueryUI, if necessary.
[jQuery] Re: Resize an element without affecting the layout
I have thus far tried the hover, mouseover/out, and bind methods with
pretty much the same effect, over and out happen unexpectedly...
On 21 stu, 11:14, Liam Potter [EMAIL PROTECTED] wrote:
rather then using hover try binding the mouseenter and mouseleave events
to it.
$(img).bind(mouseenter, function () {
animate stuff});
$(img).bind(mouseleave, function () {
back to normal
});
vani wrote:
I made some progress as you can see here:http://tinyurl.com/645ow4,
but I've ran into problem with jquery hover function. Its over and out
functions fire too many times while the cursor is still over the same
image. That happens only if I use the animate effect inside the over
function, if I just switch the size of the images it works without a
problem.
On 20 stu, 13:08, Liam Potter [EMAIL PROTECTED] wrote:
erm, best way to explain is to show an example.
lets say the image is 400x400 to get it in the center you will need to
set top and left to half that.
top:-200px;
left:-200px;
If I'm right this should work, and you can use this in jquery animate.
vani wrote:
That's it, weehee! Now if only I could somehow position the center of
the images to coincide with the center of parent cell? Any ideas on
that one, and perhaps compatible with jquery animated resize?
On 20 stu, 12:43, Liam Potter [EMAIL PROTECTED] wrote:
ok, got it.
Un comment the div in the td, and apply the position relative to that.
for some reason position relative doesn't seem to work on a table cell.
Ivan Svaljek wrote:
Here is the link, but it changes often:http://tinyurl.com/634p9s
On Thu, Nov 20, 2008 at 12:20 PM, Liam Potter [EMAIL PROTECTED]
mailto:[EMAIL PROTECTED] wrote:
do you have a live example I can see?
vani wrote:
That made it work in IE, but firefox and opera exhibit serious
problems with it. Firefox sets the top/left to document
top/left, and
opera sets it to table top/left, only IE sets it to cell's
top/left.
On 20 stu, 11:03, Liam Potter [EMAIL PROTECTED]
mailto:[EMAIL PROTECTED] wrote:
make sure you have made the td position:relative
Ivan Svaljek wrote:
If I do that, they all pile up on each other at the top/left
corner of
the table, like this:http://tinyurl.com/5tdmgm
On Thu, Nov 20, 2008 at 10:21 AM, Liam Potter
[EMAIL PROTECTED] mailto:[EMAIL PROTECTED]
mailto:[EMAIL PROTECTED]
mailto:[EMAIL PROTECTED] wrote:
set the css on them to this
position:absolute;
top:0;
left:0;
vani wrote:
I've taken out the div, but it doesn't matter because as
soon as I
change the images positioning to absolute they change
their top/left
coordinates to the center of the cell, like this:
http://tinyurl.com/5vmb42
On 20 stu, 09:57, Liam Potter [EMAIL PROTECTED]
mailto:[EMAIL PROTECTED]
mailto:[EMAIL PROTECTED]
mailto:[EMAIL PROTECTED] wrote:
is the div necessary?
Try taking it out.
vani wrote:
Thanks for replying, but I'm still having trouble
making it
work. I
tried to set the table to relative and img to absolute
but it
didn't
work as intended.
This is the layout of the table:
table
tr
tddivimg //div/td
tddivimg //div/td
tddivimg //div/td
/tr
/table
...I'm trying toresizethe img elements.
On 19 stu, 18:15, Liam Potter [EMAIL PROTECTED]
mailto:[EMAIL PROTECTED]
mailto:[EMAIL PROTECTED]
mailto:[EMAIL PROTECTED] wrote:
use absolute positioning and set the parent element
to relative.
vani wrote:
Is it possible to create an animatedresizeof an
element
without
affecting the layout of the parent element table?
I'm usingjQuery1.2.6 and possibly personalized
jQueryUI, if
necessary.
[jQuery] Re: Resize an element without affecting the layout
I've taken out the div, but it doesn't matter because as soon as I change the images positioning to absolute they change their top/left coordinates to the center of the cell, like this: http://tinyurl.com/5vmb42 On 20 stu, 09:57, Liam Potter [EMAIL PROTECTED] wrote: is the div necessary? Try taking it out. vani wrote: Thanks for replying, but I'm still having trouble making it work. I tried to set the table to relative and img to absolute but it didn't work as intended. This is the layout of the table: table tr tddivimg //div/td tddivimg //div/td tddivimg //div/td /tr /table ...I'm trying to resize the img elements. On 19 stu, 18:15, Liam Potter [EMAIL PROTECTED] wrote: use absolute positioning and set the parent element to relative. vani wrote: Is it possible to create an animated resize of an element without affecting the layout of the parent element table? I'm using jQuery 1.2.6 and possibly personalized jQuery UI, if necessary.
[jQuery] Re: Resize an element without affecting the layout
That made it work in IE, but firefox and opera exhibit serious problems with it. Firefox sets the top/left to document top/left, and opera sets it to table top/left, only IE sets it to cell's top/left. On 20 stu, 11:03, Liam Potter [EMAIL PROTECTED] wrote: make sure you have made the td position:relative Ivan Svaljek wrote: If I do that, they all pile up on each other at the top/left corner of the table, like this:http://tinyurl.com/5tdmgm On Thu, Nov 20, 2008 at 10:21 AM, Liam Potter [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: set the css on them to this position:absolute; top:0; left:0; vani wrote: I've taken out the div, but it doesn't matter because as soon as I change the images positioning to absolute they change their top/left coordinates to the center of the cell, like this: http://tinyurl.com/5vmb42 On 20 stu, 09:57, Liam Potter [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: is the div necessary? Try taking it out. vani wrote: Thanks for replying, but I'm still having trouble making it work. I tried to set the table to relative and img to absolute but it didn't work as intended. This is the layout of the table: table tr tddivimg //div/td tddivimg //div/td tddivimg //div/td /tr /table ...I'm trying to resize the img elements. On 19 stu, 18:15, Liam Potter [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: use absolute positioning and set the parent element to relative. vani wrote: Is it possible to create an animated resize of an element without affecting the layout of the parent element table? I'm using jQuery 1.2.6 and possibly personalized jQuery UI, if necessary.
[jQuery] Re: Resize an element without affecting the layout
That's it, weehee! Now if only I could somehow position the center of the images to coincide with the center of parent cell? Any ideas on that one, and perhaps compatible with jquery animated resize? On 20 stu, 12:43, Liam Potter [EMAIL PROTECTED] wrote: ok, got it. Un comment the div in the td, and apply the position relative to that. for some reason position relative doesn't seem to work on a table cell. Ivan Svaljek wrote: Here is the link, but it changes often:http://tinyurl.com/634p9s On Thu, Nov 20, 2008 at 12:20 PM, Liam Potter [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: do you have a live example I can see? vani wrote: That made it work in IE, but firefox and opera exhibit serious problems with it. Firefox sets the top/left to document top/left, and opera sets it to table top/left, only IE sets it to cell's top/left. On 20 stu, 11:03, Liam Potter [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: make sure you have made the td position:relative Ivan Svaljek wrote: If I do that, they all pile up on each other at the top/left corner of the table, like this:http://tinyurl.com/5tdmgm On Thu, Nov 20, 2008 at 10:21 AM, Liam Potter [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: set the css on them to this position:absolute; top:0; left:0; vani wrote: I've taken out the div, but it doesn't matter because as soon as I change the images positioning to absolute they change their top/left coordinates to the center of the cell, like this: http://tinyurl.com/5vmb42 On 20 stu, 09:57, Liam Potter [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: is the div necessary? Try taking it out. vani wrote: Thanks for replying, but I'm still having trouble making it work. I tried to set the table to relative and img to absolute but it didn't work as intended. This is the layout of the table: table tr tddivimg //div/td tddivimg //div/td tddivimg //div/td /tr /table ...I'm trying toresizethe img elements. On 19 stu, 18:15, Liam Potter [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: use absolute positioning and set the parent element to relative. vani wrote: Is it possible to create an animatedresizeof an element without affecting the layout of the parent element table? I'm usingjQuery1.2.6 and possibly personalized jQueryUI, if necessary.
[jQuery] Resize an element without affecting the layout
Is it possible to create an animated resize of an element without affecting the layout of the parent element table? I'm using jQuery 1.2.6 and possibly personalized jQuery UI, if necessary.
[jQuery] Re: Resize an element without affecting the layout
Thanks for replying, but I'm still having trouble making it work. I tried to set the table to relative and img to absolute but it didn't work as intended. This is the layout of the table: table tr tddivimg //div/td tddivimg //div/td tddivimg //div/td /tr /table ...I'm trying to resize the img elements. On 19 stu, 18:15, Liam Potter [EMAIL PROTECTED] wrote: use absolute positioning and set the parent element to relative. vani wrote: Is it possible to create an animated resize of an element without affecting the layout of the parent element table? I'm using jQuery 1.2.6 and possibly personalized jQuery UI, if necessary.
