Hi, I''m new to using Prototype and script.aculo.us. I''m
trying to use
prototype to adjust an elements top margin based on the height of the
screen. I''m also using script.aculo.us to make the element move
negatively off the left of the window to create a scrolling effect. It
works fine in Firefox, but I keep getting an Invalid argument error in
IE6.
Here my margin code in the header:
var winWidth, winHeight, d=document;
if (typeof window.innerWidth!=''undefined'') {
winWidth = window.innerWidth;
winHeight = window.innerHeight;
} else {
if (d.documentElement &&
typeof d.documentElement.clientWidth!=''undefined'' &&
d.documentElement.clientWidth!=0) {
winWidth = d.documentElement.clientWidth
winHeight = d.documentElement.clientHeight
} else {
if (d.body &&
typeof d.body.clientWidth!=''undefined'') {
winWidth = d.body.clientWidth
winHeight = d.body.clientHeight
}
}
}
var new_margin = (winHeight/2)-268;
function init() {
$(''timeline'').setStyle({
marginTop: new_margin + ''px''
});
}
window.onload = init;
</script>
And heres my link in the body that moves it:
<a href="javascript:void(0)" onclick="new
Effect.MoveBy(''timeline'',0, -
winWidth);">Click</a>
The whol thing it self it a timeline of the 60s. I hope to add more
cool effects.
Any help would be greatly appreciated!
Thanks!
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
I had a similar problem recently with IE. Turns out the measurements I''d get from the two were different, such that a div''s top plus its height were greater than the document height--so when I subtracted, I ended up with a negative number. Without any sort of testing, I bet your problem is here: new_margin = (winHeight/2)-268; Try this: new_margin = Math.max(0, (winHeight/2)-268); You may also run into problems if you''re trying to get the element heights/widths before the page is fully loaded... TAG On Mar 13, 2007, at 5:15 PM, andymadonna wrote:> > Hi, I''m new to using Prototype and script.aculo.us. I''m trying to use > prototype to adjust an elements top margin based on the height of the > screen. I''m also using script.aculo.us to make the element move > negatively off the left of the window to create a scrolling effect. It > works fine in Firefox, but I keep getting an Invalid argument error in > IE6. > > Here my margin code in the header: > > var winWidth, winHeight, d=document; > if (typeof window.innerWidth!=''undefined'') { > winWidth = window.innerWidth; > winHeight = window.innerHeight; > } else { > if (d.documentElement && > typeof d.documentElement.clientWidth!=''undefined'' && > d.documentElement.clientWidth!=0) { > winWidth = d.documentElement.clientWidth > winHeight = d.documentElement.clientHeight > } else { > if (d.body && > typeof d.body.clientWidth!=''undefined'') { > winWidth = d.body.clientWidth > winHeight = d.body.clientHeight > } > } > } > > var new_margin = (winHeight/2)-268; > > function init() { > $(''timeline'').setStyle({ > marginTop: new_margin + ''px'' > }); > } > > window.onload = init; > </script> > > > > And heres my link in the body that moves it: > > <a href="javascript:void(0)" onclick="new Effect.MoveBy(''timeline'', > 0, - > winWidth);">Click</a> > > The whol thing it self it a timeline of the 60s. I hope to add more > cool effects. > > Any help would be greatly appreciated! > Thanks! > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Thanks Tom, I entered the new_margin = Math.max(0, (winHeight/2)-268); you suggested. It still works in Firefox, but I still get the Invalid argument error. On Mar 13, 7:21 pm, Tom Gregory <t...-PGZyUNKar/Q@public.gmane.org> wrote:> I had a similar problem recently with IE. Turns out the measurements > I''d get from the two were different, such that a div''s top plus its > height were greater than the document height--so when I subtracted, I > ended up with a negative number. > > Without any sort of testing, I bet your problem is here: > new_margin = (winHeight/2)-268; > > Try this: > new_margin = Math.max(0, (winHeight/2)-268); > > You may also run into problems if you''re trying to get the element > heights/widths before the page is fully loaded... > > TAG > > On Mar 13, 2007, at 5:15 PM, andymadonna wrote: > > > > > Hi, I''m new to using Prototype and script.aculo.us. I''m trying to use > > prototype to adjust an elements top margin based on the height of the > > screen. I''m also using script.aculo.us to make the element move > > negatively off the left of the window to create a scrolling effect. It > > works fine in Firefox, but I keep getting an Invalid argument error in > > IE6. > > > Here my margin code in the header: > > > var winWidth, winHeight, d=document; > > if (typeof window.innerWidth!=''undefined'') { > > winWidth = window.innerWidth; > > winHeight = window.innerHeight; > > } else { > > if (d.documentElement && > > typeof d.documentElement.clientWidth!=''undefined'' && > > d.documentElement.clientWidth!=0) { > > winWidth = d.documentElement.clientWidth > > winHeight = d.documentElement.clientHeight > > } else { > > if (d.body && > > typeof d.body.clientWidth!=''undefined'') { > > winWidth = d.body.clientWidth > > winHeight = d.body.clientHeight > > } > > } > > } > > > var new_margin = (winHeight/2)-268; > > > function init() { > > $(''timeline'').setStyle({ > > marginTop: new_margin + ''px'' > > }); > > } > > > window.onload = init; > > </script> > > > And heres my link in the body that moves it: > > > <a href="javascript:void(0)" onclick="new Effect.MoveBy(''timeline'', > > 0, - > > winWidth);">Click</a> > > > The whol thing it self it a timeline of the 60s. I hope to add more > > cool effects. > > > Any help would be greatly appreciated! > > Thanks!--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
I''ve been testing the code with alerts and determined the script I was
using to get the viewport size wasn''t working. So I tried a different
one and this one returns a correct size. But when a try to assgin it
to a variable it fails with the error "Object required" in IE6
<script type="text/javascript">
var Client = {
viewportWidth: function() {
return self.innerWidth || (document.documentElement.clientWidth ||
document.body.clientWidth);
},
viewportHeight: function() {
return self.innerHeight || (document.documentElement.clientHeight
|| document.body.clientHeight);
},
viewportSize: function() {
return { width: this.viewportWidth(), height:
this.viewportHeight() };
}
};
var winHeight = Client.viewportHeight(); // The one below wasn''t
working so I tried this, same "Object required"
//var new_margin = Math.max(0, (Client.viewportWidth()/2)-268);
//var new_margin = 175;
//var new_margin = winHeight;
function init() {
alert(Client.viewportHeight());
//alert(new_margin);
alert(winHeight);
//$(''timeline'').setStyle({
// marginTop: new_margin + ''px''
//});
}
window.onload = init;
</script>
On Mar 13, 7:35 pm, "andymadonna"
<andymado...-Wuw85uim5zDR7s880joybQ@public.gmane.org>
wrote:> Thanks Tom,
>
> I entered the new_margin = Math.max(0, (winHeight/2)-268); you
> suggested. It still works in Firefox, but I still get the Invalid
> argument error.
>
> On Mar 13, 7:21 pm, Tom Gregory <t...-PGZyUNKar/Q@public.gmane.org>
wrote:
>
>
>
>
>
> > I had a similar problem recently with IE. Turns out the measurements
> > I''d get from the two were different, such that a
div''s top plus its
> > height were greater than the document height--so when I subtracted, I
> > ended up with a negative number.
>
> > Without any sort of testing, I bet your problem is here:
> > new_margin = (winHeight/2)-268;
>
> > Try this:
> > new_margin = Math.max(0, (winHeight/2)-268);
>
> > You may also run into problems if you''re trying to get the
element
> > heights/widths before the page is fully loaded...
>
> > TAG
>
> > On Mar 13, 2007, at 5:15 PM, andymadonna wrote:
>
> > > Hi, I''m new to using Prototype and script.aculo.us.
I''m trying to use
> > > prototype to adjust an elements top margin based on the height of
the
> > > screen. I''m also using script.aculo.us to make the
element move
> > > negatively off the left of the window to create a scrolling
effect. It
> > > works fine in Firefox, but I keep getting an Invalid argument
error in
> > > IE6.
>
> > > Here my margin code in the header:
>
> > > var winWidth, winHeight, d=document;
> > > if (typeof window.innerWidth!=''undefined'') {
> > > winWidth = window.innerWidth;
> > > winHeight = window.innerHeight;
> > > } else {
> > > if (d.documentElement &&
> > > typeof
d.documentElement.clientWidth!=''undefined'' &&
> > > d.documentElement.clientWidth!=0) {
> > > winWidth = d.documentElement.clientWidth
> > > winHeight = d.documentElement.clientHeight
> > > } else {
> > > if (d.body &&
> > > typeof d.body.clientWidth!=''undefined'') {
> > > winWidth = d.body.clientWidth
> > > winHeight = d.body.clientHeight
> > > }
> > > }
> > > }
>
> > > var new_margin = (winHeight/2)-268;
>
> > > function init() {
> > > $(''timeline'').setStyle({
> > > marginTop: new_margin + ''px''
> > > });
> > > }
>
> > > window.onload = init;
> > > </script>
>
> > > And heres my link in the body that moves it:
>
> > > <a href="javascript:void(0)" onclick="new
Effect.MoveBy(''timeline'',
> > > 0, -
> > > winWidth);">Click</a>
>
> > > The whol thing it self it a timeline of the 60s. I hope to add
more
> > > cool effects.
>
> > > Any help would be greatly appreciated!
> > > Thanks!
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---