[jQuery] Re: Animate using relative %
Not sure - do you have a sample that we can look at?
--John
On Thu, Mar 5, 2009 at 6:16 AM, Adam Jessop a...@infused-gaming.net wrote:
Hi,
I am working on a site where are wanting to create a full screen site using
percentages for positioning and displaying of content. As part of the
project we also want to have some animation to bring objects onto the page.
We have the objects in their correct positions using relative positioning
and negative top values for example:
#myDiv{ top: -26%;}
This is where we wish the animation to end with the block in position so
therefore its starting value in the CSS could be: “top: 0%”.
Now I made the assumption that my js to achieve this would be:
$(‘#myDiv’).animate({top : “-26%”});
After testing this, it became clear that the animate function was ignoring
the ‘%’ sign and was just applying ‘-26px’ instead.
After positing this directly to John Resig via twitter I got a response
asking me to try:
$(‘#myDiv’).animate({top : “-=26%”});
However the object always animates to: “top: 0px” regardless of its starting
position, percentage value and the +=, -= notation.
Is this a bug or am I missing something here? – Using JQuery 1.3.2
Adam Jessop.
[jQuery] Re: Animate using relative %
Sure,
The site in question is at: http://be.0wned.co.uk
I have currently got active on there two examples of the situations I'm running
into but let me run down the scene.
What we are trying to achieve is that the field, city, rocks and sign (divs
have ID's reflecting those names) are different layers and will animate into
the page from the bottom at queued intervals.
The rock and sign are in position as pointers.
With the field I am giving you the example where I use:
$(#field).animate({
top:-=2%
}, 1500);
The above results in an animation setting the result to: top:0px.
With the city... the position where it fits correctly is top:-69% however as
explained previously, the animate function ignores percentage values and does
them as px. So for the sake of an example I use:
$(#city).animate({
top:'-565%'
},1600);
This moves the position into the correct position, but proves the case that it
uses px instead of % which is no good to me as on browser resize it loses its
relative position.
I hope this helps, please let me know if I can assist any more.
Adam Jessop.
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf
Of John Resig
Sent: 05 March 2009 12:34
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Animate using relative %
Not sure - do you have a sample that we can look at?
--John
On Thu, Mar 5, 2009 at 6:16 AM, Adam Jessop a...@infused-gaming.net wrote:
Hi,
I am working on a site where are wanting to create a full screen site
using percentages for positioning and displaying of content. As part
of the project we also want to have some animation to bring objects onto the
page.
We have the objects in their correct positions using relative
positioning and negative top values for example:
#myDiv{ top: -26%;}
This is where we wish the animation to end with the block in position
so therefore its starting value in the CSS could be: “top: 0%”.
Now I made the assumption that my js to achieve this would be:
$(‘#myDiv’).animate({top : “-26%”});
After testing this, it became clear that the animate function was
ignoring the ‘%’ sign and was just applying ‘-26px’ instead.
After positing this directly to John Resig via twitter I got a
response asking me to try:
$(‘#myDiv’).animate({top : “-=26%”});
However the object always animates to: “top: 0px” regardless of its
starting position, percentage value and the +=, -= notation.
Is this a bug or am I missing something here? – Using JQuery 1.3.2
Adam Jessop.
[jQuery] Re: Animate using relative %
Sure,
The site in question is at: http://be.0wned.co.uk
I have currently got active on there two examples of the situations I'm running
into but let me run down the scene.
What we are trying to achieve is that the field, city, rocks and sign (divs
have ID's reflecting those names) are different layers and will animate into
the page from the bottom at queued intervals.
The rock and sign are in position as pointers.
With the field I am giving you the example where I use:
$(#field).animate({
top:-=2%
}, 1500);
The above results in an animation setting the result to: top:0px.
With the city... the position where it fits correctly is top:-69% however as
explained previously, the animate function ignores percentage values and does
them as px. So for the sake of an example I use:
$(#city).animate({
top:'-565%'
},1600);
This moves the position into the correct position, but proves the case that it
uses px instead of % which is no good to me as on browser resize it loses its
relative position.
I hope this helps, please let me know if I can assist any more.
Adam Jessop.
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf
Of John Resig
Sent: 05 March 2009 12:34
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Animate using relative %
Not sure - do you have a sample that we can look at?
--John
On Thu, Mar 5, 2009 at 6:16 AM, Adam Jessop a...@infused-gaming.net wrote:
Hi,
I am working on a site where are wanting to create a full screen site using
percentages for positioning and displaying of content. As part of the
project we also want to have some animation to bring objects onto the page.
We have the objects in their correct positions using relative positioning
and negative top values for example:
#myDiv{ top: -26%;}
This is where we wish the animation to end with the block in position so
therefore its starting value in the CSS could be: top: 0%.
Now I made the assumption that my js to achieve this would be:
$('#myDiv').animate({top : -26%});
After testing this, it became clear that the animate function was ignoring
the '%' sign and was just applying '-26px' instead.
After positing this directly to John Resig via twitter I got a response
asking me to try:
$('#myDiv').animate({top : -=26%});
However the object always animates to: top: 0px regardless of its starting
position, percentage value and the +=, -= notation.
Is this a bug or am I missing something here? - Using JQuery 1.3.2
Adam Jessop.
***
IMPORTANT INFORMATION CONFIDENTIALITY NOTICE
The information in this e-mail is confidential and may be legally privileged.
It is intended solely for the named recipient. Access to this Email by anyone
else is unauthorised.
If you are not the intended recipient or the employee or agent responsible for
delivering the message to the recipient named,
please note that any use, disclosure, copying, distribution of this e-mail or
any action taken or omitted to be taken in reliance on it is
prohibited. If you are not the intended recipient, please inform us by
returning a copy of the e-mail with the subject
line marked wrong address and then deleting the e-mail, and any attachments
and any copies of it. Any questions should be directed
to postmas...@sivltd.com.
Sheffield International Venues Limited uses regularly updated anti-virus
software in an attempt to reduce the possibility
of infection. However we do not guarantee that any attachments to this e-mail
are virus free.
***
[jQuery] Re: Animate using relative %
On Thu, Mar 5, 2009 at 8:22 AM, Adam Jessop a...@infused-gaming.net wrote: Sure, The site in question is at: http://be.0wned.co.uk Do you really expect anyone to click that link with JS enabled? ;-) I think the way I'd approach this would be to first get the CSS set up so that, with the images already in place when the page loads, they assume their proper positions regardless of window size. Then, I'd replace each of the images with a single pixel img. When the page loaded, I'd get the positions of each of the 1 pixel imgs on the screen and set the animation params for the respective images which a re off-screen.
[jQuery] Re: Animate using relative %
* * * Well contrary to the domain name, it is a real site with no threat, disable your JS first if you like! I have the CSS values for how I want the end result to be already, but I don’t want them visible when the page loads, defies the whole point of the effect. After that I'm afraid I don’t really see how that achieves what I want. -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of brian Sent: 05 March 2009 17:23 To: jquery-en@googlegroups.com Subject: [jQuery] Re: Animate using relative % On Thu, Mar 5, 2009 at 8:22 AM, Adam Jessop a...@infused-gaming.net wrote: Sure, The site in question is at: http://be.0wned.co.uk Do you really expect anyone to click that link with JS enabled? ;-) I think the way I'd approach this would be to first get the CSS set up so that, with the images already in place when the page loads, they assume their proper positions regardless of window size. Then, I'd replace each of the images with a single pixel img. When the page loaded, I'd get the positions of each of the 1 pixel imgs on the screen and set the animation params for the respective images which a re off-screen.
[jQuery] Re: Animate using relative %
On Thu, Mar 5, 2009 at 1:12 PM, Adam Jessop a...@infused-gaming.net wrote: Well contrary to the domain name, it is a real site with no threat, disable your JS first if you like! I was joking. I have the CSS values for how I want the end result to be already, but I don’t want them visible when the page loads, defies the whole point of the effect. I meant that you should leave them visible only for as long as it takes to set up your CSS to have them positioned where you want them. I'm guessing this is a fluid design, so that the image locations would adjust according to screen size changes.. If the CSS isn't correctly done the next step would be pointless. Once the images are how you want them to ultimately be, regardless of screen size changes, replace them with single-pixel images (ie, invisible) at the top-left corner position of your actual images. After that I'm afraid I don’t really see how that achieves what I want. When the page loads, have your script find the positions--using pixels--of each of the placeholder images. Feed those coordinates to your animate function. You could probably achieve the same thing without the placeholders by doing a bit of math based on the screen size and the CSS percentages but this other way seems to me to be simplest.
[jQuery] Re: Animate using relative %
I appreciate the help :) Again though, seems a long winded approach to something that should work using the right syntax etc right? Surely this must be a bug in jQuery of some kind? Adam. -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of brian Sent: 05 March 2009 18:47 To: jquery-en@googlegroups.com Subject: [jQuery] Re: Animate using relative % On Thu, Mar 5, 2009 at 1:12 PM, Adam Jessop a...@infused-gaming.net wrote: Well contrary to the domain name, it is a real site with no threat, disable your JS first if you like! I was joking. I have the CSS values for how I want the end result to be already, but I don’t want them visible when the page loads, defies the whole point of the effect. I meant that you should leave them visible only for as long as it takes to set up your CSS to have them positioned where you want them. I'm guessing this is a fluid design, so that the image locations would adjust according to screen size changes.. If the CSS isn't correctly done the next step would be pointless. Once the images are how you want them to ultimately be, regardless of screen size changes, replace them with single-pixel images (ie, invisible) at the top-left corner position of your actual images. After that I'm afraid I don’t really see how that achieves what I want. When the page loads, have your script find the positions--using pixels--of each of the placeholder images. Feed those coordinates to your animate function. You could probably achieve the same thing without the placeholders by doing a bit of math based on the screen size and the CSS percentages but this other way seems to me to be simplest.
[jQuery] Re: Animate using relative %
* * * I appreciate the help :) Again though, seems a long winded approach to something that should work using the right syntax etc right? Surely this must be a bug in jQuery of some kind? Adam. -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of brian Sent: 05 March 2009 18:47 To: jquery-en@googlegroups.com Subject: [jQuery] Re: Animate using relative % On Thu, Mar 5, 2009 at 1:12 PM, Adam Jessop a...@infused-gaming.net wrote: Well contrary to the domain name, it is a real site with no threat, disable your JS first if you like! I was joking. I have the CSS values for how I want the end result to be already, but I don’t want them visible when the page loads, defies the whole point of the effect. I meant that you should leave them visible only for as long as it takes to set up your CSS to have them positioned where you want them. I'm guessing this is a fluid design, so that the image locations would adjust according to screen size changes.. If the CSS isn't correctly done the next step would be pointless. Once the images are how you want them to ultimately be, regardless of screen size changes, replace them with single-pixel images (ie, invisible) at the top-left corner position of your actual images. After that I'm afraid I don’t really see how that achieves what I want. When the page loads, have your script find the positions--using pixels--of each of the placeholder images. Feed those coordinates to your animate function. You could probably achieve the same thing without the placeholders by doing a bit of math based on the screen size and the CSS percentages but this other way seems to me to be simplest.
[jQuery] Re: Animate using relative %
On Thu, Mar 5, 2009 at 2:29 PM, Adam Jessop a...@infused-gaming.net wrote: I appreciate the help :) Again though, seems a long winded approach to something that should work using the right syntax etc right? Surely this must be a bug in jQuery of some kind? I don't think it's a bug at all. The issue is that you have a page which needs to position images using percentages. That's fine, but means that the specific *pixel* positions cannot be known until the page loads. The only ways around your problem that I can see are the two options I suggested. If you don't want to use the placeholder method, you'll have to do some math and figure out the pixel positions based upon the current screen size and your desired CSS position.
