thr3ads.net - Rails spinoffs - scriptaculous - scroll within div:overflow [Apr 2008]

If this information is useful, please help other people find it:
Share via:

ben

2008-Apr-23 17:53 UTC

scriptaculous - scroll within div:overflow

This seems to be a subject of some discussion - and several apparent
solutions - but either I''m looking for/at the wrong thing, or my
implementation sucks.

I want to scroll content into and out of a viewport that''s defined by
a div with overflow:hidden. But when I use the code below, although
scrolling happens, the content that was previously hidden is still
hidden - images, for instance, are cut in half. Evidently I''m missing
something. Any suggestions what it is?

This is what I have:

----------------------------

#pagination_container{position:relative; width: 420px; height: 148px;
overflow:hidden;}
#pagination_content{position: relative; width: 10000px;  height:
148px;}
.pagination_item{width:125px; float:left; margin:0 5px; font-size:
10px; color:#b2b2b2; text-align:center;}
.pagination_item img{border:5px solid #e6e6e6;}
.pagination_item a{display:block; font-size:12px; color:#24a9ec; text-
decoration:none;}


----------------------------

document.observe("dom:loaded", function() {

	$(''pagination-prev'').observe(''click'',
function(event){
		new Effect.Move($(''pagination_content''),{x: 420, y: 0,
duration: 1,
mode:''relative''})
		Event.stop(event);
	});

	$(''pagination-next'').observe(''click'',
function(event){
		new Effect.Move($(''pagination_container''),{x: -420, y: 0,
duration:
1, mode:''relative''})
		Event.stop(event);
	});

});

----------------------------

<div id="latestwork_content">

	<p class="grey">Lorem ipsum yada yada</p>

	<div id="pagination_container">

		<div id="pagination_content">

			<div class="pagination_item"><img
src="img/thumb_lg.jpg"
width="115" height="113" alt="thumb" /><a
href="">Some</a>Content</
div>
			<div class="pagination_item"><img
src="img/thumb_lg.jpg"
width="115" height="113" alt="thumb" /><a
href="">Some</a>Content</
div>
			<div class="pagination_item"><img
src="img/thumb_lg.jpg"
width="115" height="113" alt="thumb" /><a
href="">Some</a>Content</
div>
			<div class="pagination_item"><img
src="img/thumb_lg.jpg"
width="115" height="113" alt="thumb" /><a
href="">Some</a>Content</
div>
			<div class="pagination_item"><img
src="img/thumb_lg.jpg"
width="115" height="113" alt="thumb" /><a
href="">Some</a>Content</
div>
			<div class="pagination_item"><img
src="img/thumb_lg.jpg"
width="115" height="113" alt="thumb" /><a
href="">Some</a>Content</
div>
			<div class="pagination_item"><img
src="img/thumb_lg.jpg"
width="115" height="113" alt="thumb" /><a
href="">Some</a>Content</
div>

		</div>

	</div>

	<a id="pagination-prev" class="bodylink left"
href="#">&laquo;
Previous</a>
	<a id="pagination-next" class="bodylink right"
href="#">&raquo; Next</
a>

</div>


----------------------------

Thanks for any replies.
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Brian Williams

2008-Apr-23 18:08 UTC

head link

Re: scriptaculous - scroll within div:overflow

i would guess, and this is just off the top of my head:

validate your html

I believe the width="xxx" should have a unit i.e. px in the image tags



On Wed, Apr 23, 2008 at 1:53 PM, ben
<ben.r.casey-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> wrote:
>
> This seems to be a subject of some discussion - and several apparent
> solutions - but either I''m looking for/at the wrong thing, or my
> implementation sucks.
>
> I want to scroll content into and out of a viewport that''s defined
by
> a div with overflow:hidden. But when I use the code below, although
> scrolling happens, the content that was previously hidden is still
> hidden - images, for instance, are cut in half. Evidently I''m
missing
> something. Any suggestions what it is?
>
> This is what I have:
>
> ----------------------------
>
> #pagination_container{position:relative; width: 420px; height: 148px;
> overflow:hidden;}
> #pagination_content{position: relative; width: 10000px;  height:
> 148px;}
> .pagination_item{width:125px; float:left; margin:0 5px; font-size:
> 10px; color:#b2b2b2; text-align:center;}
> .pagination_item img{border:5px solid #e6e6e6;}
> .pagination_item a{display:block; font-size:12px; color:#24a9ec; text-
> decoration:none;}
>
>
> ----------------------------
>
> document.observe("dom:loaded", function() {
>
>       
$(''pagination-prev'').observe(''click'',
function(event){
>                new
Effect.Move($(''pagination_content''),{x: 420, y: 0,
> duration: 1,
> mode:''relative''})
>                Event.stop(event);
>        });
>
>       
$(''pagination-next'').observe(''click'',
function(event){
>                new
Effect.Move($(''pagination_container''),{x: -420, y: 0,
> duration:
> 1, mode:''relative''})
>                Event.stop(event);
>        });
>
> });
>
> ----------------------------
>
> <div id="latestwork_content">
>
>        <p class="grey">Lorem ipsum yada yada</p>
>
>        <div id="pagination_container">
>
>                <div id="pagination_content">
>
>                        <div class="pagination_item"><img
> src="img/thumb_lg.jpg"
> width="115" height="113" alt="thumb"
/><a href="">Some</a>Content</
> div>
>                        <div class="pagination_item"><img
> src="img/thumb_lg.jpg"
> width="115" height="113" alt="thumb"
/><a href="">Some</a>Content</
> div>
>                        <div class="pagination_item"><img
> src="img/thumb_lg.jpg"
> width="115" height="113" alt="thumb"
/><a href="">Some</a>Content</
> div>
>                        <div class="pagination_item"><img
> src="img/thumb_lg.jpg"
> width="115" height="113" alt="thumb"
/><a href="">Some</a>Content</
> div>
>                        <div class="pagination_item"><img
> src="img/thumb_lg.jpg"
> width="115" height="113" alt="thumb"
/><a href="">Some</a>Content</
> div>
>                        <div class="pagination_item"><img
> src="img/thumb_lg.jpg"
> width="115" height="113" alt="thumb"
/><a href="">Some</a>Content</
> div>
>                        <div class="pagination_item"><img
> src="img/thumb_lg.jpg"
> width="115" height="113" alt="thumb"
/><a href="">Some</a>Content</
> div>
>
>                </div>
>
>        </div>
>
>        <a id="pagination-prev" class="bodylink left"
href="#">&laquo;
> Previous</a>
>        <a id="pagination-next" class="bodylink
right" href="#">&raquo;
> Next</
> a>
>
> </div>
>
>
> ----------------------------
>
> Thanks for any replies.
> >
>
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

ben

2008-Apr-24 09:39 UTC

head link

Re: scriptaculous - scroll within div:overflow

The page validates as XHTML transitional.

HTML image tags don''t use CSS values; the width should be an integer.

The page behaves exactly the same in FF2, IE7, Safari 3 and Opera 9
(WinXP).

Clearly I''m misunderstanding something about Effect.Move() but the
Scriptaculous documentation doesn''t offer any clues and... well, if I
was smart enough to figure out the code in effects.js I''d have written
my own....

--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Brian Williams

2008-Apr-24 13:40 UTC

head link

Re: scriptaculous - scroll within div:overflow

try mode:''fixed''

On Thu, Apr 24, 2008 at 5:39 AM, ben
<ben.r.casey-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> wrote:
>
> The page validates as XHTML transitional.
>
> HTML image tags don''t use CSS values; the width should be an
integer.
>
> The page behaves exactly the same in FF2, IE7, Safari 3 and Opera 9
> (WinXP).
>
> Clearly I''m misunderstanding something about Effect.Move() but the
> Scriptaculous documentation doesn''t offer any clues and... well,
if I
> was smart enough to figure out the code in effects.js I''d have
written
> my own....
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Rails spinoffs - Apr 2008 - scriptaculous - scroll within div:overflow

scriptaculous - scroll within div:overflow

Re: scriptaculous - scroll within div:overflow

Re: scriptaculous - scroll within div:overflow

Re: scriptaculous - scroll within div:overflow