[Proto-Scripty] Re: Centering
On Feb 13, 2:57 pm, "Alex Mcauley" wrote: > because the body is not a dynamically added element !!! > > I want to add an element to the document dynamically and have it appear in > the center of the screen no matter where the scroller is > Well, if you ignore standards-busting browsers, you can do it in CSS with position:fixed ;-) Colin --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Centering
This works :
function test(){
$('mydiv').hide();
var vp_dims = document.viewport.getDimensions();
var vp_scrolloffset = document.viewport.getScrollOffsets();
var mydivdims = $('mydiv').getDimensions();
$('mydiv').setStyle({ top:''+Math.abs((vp_dims.height-
mydivdims.height)/2+vp_scrolloffset.top)+'px', left:''+Math.abs
((vp_dims.width-mydivdims.width)/2+vp_scrolloffset.left)+'px' });
$('mydiv').show();
}
document.observe('dom:loaded', function() {
Event.observe(window, 'resize', test, true);
Event.observe(window, 'scroll', test, true);
test();
});
...
and then :
...
you have to declare the style propertes of "mydiv" when you create it
dynamically.
It works a bit fine on IE & FF but "flicky" when you scroll.
The div.hide() / div.show() i added in the function are not efficient
enough to prevent it...
Tell me if this is what you wanted.
Best regards.
Michel L'HUILLIER
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Centering
because the body is not a dynamically added element !!!
I want to add an element to the document dynamically and have it appear in
the center of the screen no matter where the scroller is
Thanks for the reply
I sorted it
Alex
- Original Message -
From: "asterix"
To: "Prototype & script.aculo.us"
Sent: Friday, February 13, 2009 2:45 PM
Subject: [Proto-Scripty] Re: Centering
>
> Hey, guys !
>
> There's an answer, that i use on my site http://famille.lhuillier.free.fr
> You can see that live at this adress.
>
> It's just a bit of CSS :
>
>
> body {
> font-family:Verdana, Arial, Helvetica, sans-serif;
> font-size:12px;
> color:#666;
> background:center no-repeat fixed #33;
> background-image:url(images/fond_014.png);
> cursor:default;
> margin:0px;
> }
>
>
> It centers the background image horizontally and vertically.
>
> You'll have to adapt to your needs...
>
> A question : Why to put JS code where a simple CSS declaration can do
> it fine ?
>
> Best regards.
> Michel L'HUILLIER
>
> >
>
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Centering
Hey, guys !
There's an answer, that i use on my site http://famille.lhuillier.free.fr
You can see that live at this adress.
It's just a bit of CSS :
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#666;
background:center no-repeat fixed #33;
background-image:url(images/fond_014.png);
cursor:default;
margin:0px;
}
It centers the background image horizontally and vertically.
You'll have to adapt to your needs...
A question : Why to put JS code where a simple CSS declaration can do
it fine ?
Best regards.
Michel L'HUILLIER
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Centering
Jeztah wrote:
> Mornign guys ..
>
> I am very well being really thick here but i was wondering how to
> center a window vertically to the viewport (i.e if the user is
> scrolled down the page a bit to still be in the center) ..
>
> Now the really annoying thing is i've done it before and put it into a
> nice function but i cant for the life of me find it on my mess that is
> a server !!!
>
>
You should determine the offset the document have been scrolled down,
the total height of the viewport, and the height of your window.
var offsets = document.viewport.getScrollOffsets();
var viewPortDims = document.viewport.getDimensions();
var windowDims = $(your_window_here).getDimensions();
var windowOffsets = {position: 'absolute'};
windowOffsets.top =
offsets.top + (viewPortDims.height - windowDims.height) / 2;
//if you want to center also horizontally:
windowOffsets.left =
offsets.left + (viewPortDims.width - windowDims.width) / 2;
$(your_window_here).setStyle(windowOffsets);
//Or use Scriptaculous to move windows
var effect = new Effect.Move(your_window_here,
{ x: windowOffsets.top, y: windowOffsets.left, mode: 'absolute' }
);
Of course your window have to be a child of body, or it might be
posisioned to any relatively positioned of its ancestors!
Should work, but not tested
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Centering
So'k i sorted it !! On Feb 13, 12:09 pm, Jeztah wrote: > Mornign guys .. > > I am very well being really thick here but i was wondering how to > center a window vertically to the viewport (i.e if the user is > scrolled down the page a bit to still be in the center) .. > > Now the really annoying thing is i've done it before and put it into a > nice function but i cant for the life of me find it on my mess that is > a server !!! > > Ay help would be appreciated > > Regards > Alex --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
