Cmotion gallery start point

[jdaigneault]

1) Script Title: Cmotion Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...iongallery.htm

3) Describe problem:
on my page the gallery starts at, say, 150 px from the left of the screen. When the mouse moves to the right, the gallery moves left and continues off the screen as i have the gallery container set to 100% width. However, when the gallery moves back to the right, the first image stops at the left edge of the screen where i would like it to return back to its position 150 px from the left. Is this possible? any help would be appreciated.

[jscheuer1]

Please post a link to a page on your site that contains the problematic code so we can check it out.

[jdaigneault]

http://www.johndaigneault.org/test.html

obviously this is a test gallery im working on, notice how the gallery begins to the right of the red line, but when the gallery moves off the left of the page and then returns, the image stops at the left edge while i want it to return to the right of the red.

thank you
-john

[jscheuer1]

You've changed the markup of the gallery here:

<div id="motioncontainer" style="position:absolute; height:520px; width:100%; bottom:150px; left:0; right:0; overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:160px;top:0;right:0; white-space: nowrap;">

It's supposed to be:

<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

Once you restore that. You could have a transparent image of the desired width as the first image in the train. Positioning the gallery where you want it (if necessary at that point) should then be done via a containing division (wrapper) placed around the entire gallery. It probably no longer would need to be shifted to the right as you currently have it though because the transparent lead image would make it look like it was already shifted to the right until it was scrolled. When it returns to the starting point, the transparent image would then make it appear once again as you say you want. You might want to make it's container (the added wrapper mentioned above) position absolute with a width slightly over 100%. Experiment with that if a wrapper is even needed. Be aware that on really wide screens, you may need more images in the train. It might be better to set the width of the gallery in pixels. Just make it really wide. That way on screens that are too wide it should still look OK, just not trail off the right edge. However you do it, there must always be enough images to fill out the width of the train to greater than the width of the gallery.

This transparent image may be a solid color image that matches the background, but a transparent .gif would likely be the most versatile. A .png image may be used as well if it affords a smaller byte size. A very physically small dimensioned image might be able to be used if you explicitly set its dimension in the HTML source code via width and height attributes or style. If so, this would afford the smallest possible byte load for the added image.

[jdaigneault]

thanks for the reply, the blank image worked great.
The reason i had it marked up this way was because i wanted the gallery to move with the bottom of the screen, as the white stripe does. this way there would be no scroll bars regardless of the viewer's screen size. if i use the container around the gallery as you mentioned would i be able to mimic this? also, would it be possible to have it so scroll bars only appear when the window becomes too small to fit the gallery. As you can see, now it just move off the top of the page when the window is made smaller.

thank you,
-John

[jscheuer1]

Hard to say exactly, in that you haven't updated (or haven't fully updated) the live page:

http://www.johndaigneault.org/test.html

But the answer is probably yes.

I don't see any white stripe though, so I'm not sure what you are talking about there. Perhaps I just missed it.

Please update the live page (or provide a link to the current example page using the blank image) and be more specific about the desired layout.

Bear in mind though that what you observe on your computer and browser and deem to be your objective for the layout may or may not be what others see on other screens and in other browsers to begin with. If that is the case, it may not ultimately be translatable to the new approach I've suggested (with the blank image), and that apparently you are using somewhere that I currently have no link to. That is to say that, if the original effects you thought you had were not cross browser and translatable to other screen sizes, the new method with the gallery might not be able to be either, at least not as regards these things (like moving with the page bottom). The start point (utilizing the blank image) though will work in virtually all browsers.

Consider the above a request and a disclaimer. That said, a container for the gallery should be able to place it where you want and to react to window size changes as you want.

I cannot be more specific though until I see what you have and understand more fully how that differs from what you want.

[jdaigneault]

okay the test page is updated.
the positioning of the gallery is not really the issue, but rather how the window is reacting to it. I cannot figure out to to force the window to scroll up once the gallery has proceeded off the top of the page incase someone has a small window size.

By white stripe i was referring to the horizontal bar the menu items and name are in.

[jscheuer1]

Hmm, I see no difference as far as the behavior of the gallery or menu in the two versions visa vis changing the vertical size of the window. In both versions the menu (as far as I can tell) stays in view longer simply because it's lower on the page.

Incidentally, on the current live page:

http://www.johndaigneault.org/images/blankimage.gif

is a 404 not found.

[jdaigneault]

yes the menu is not the problem. im simply wondering if it is possible to have the window react to the gallery moving off the page so people with smaller screen can still scroll to view the whole image. on my machine, if you make the page small enough as to pretend your screen was that small, there is no way to view the whole image.

[jscheuer1]

I'm sorry. I'm still not clear on this. First I thought that you were concerned with resizing the window vertically, now it appears to be horizontally, or horizontally as well as vertically. I'm not sure what you mean by 'the image', or what browser you are using, or how narrow the browser must become before whatever you are trying to avoid occurs. I'm not sure if this relates to the gallery or if it's just a layout issue for the page, or both.

You may place a wrapper division around the gallery's markup and position it as absolute, and/or give it overflow hidden. Two nested wrappers may be employed. The inner wrapper may be set to the dimensions for the gallery. The outer wrapper with overflow hidden may be set to 100% width (or have no width set, the default width of a division is 100%, and not specifying it is sometimes better in some browsers). There are various things that can be done/tried for various effects as far as the layout of the page goes.