Cmotion right-align? How to do it?

**Dalileis** · 05-13-2007, 03:35 PM

Amazing script, very useful. Thank you.

1) Script Title: Cmotion (horizontal version)

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

3) Describe problem:

How do I align the images (let's say there were only 2 or 3 in the gallery) so that they are aligned completely to the right on the webpage?

When the width is set to 100 % (great feature), there is lots of white space, in cases where there are only 2-3 small images in the gallery, and that white space is to the right of the images, with standard settings.

I want the eventual white space in such cases to be to the left of the images in such gallery. How is this doable?

Thank you.

**Dalileis** · 05-13-2007, 03:42 PM

To make it a bit clearer...

I want the right edge of the rightmost book in the gallery here:

http://www.dynamicdrive.com/dynamici...iongallery.htm

to be aligned with the right edges of the scrolling strips belonging to the Step 1 & 2 code windows.

Thank you.

**Dalileis** · 05-13-2007, 09:00 PM

Right, so I changed the "motionagallery" div style to:

<div id="motiongallery" style="position:absolute;right:0;top:0;white-space: nowrap;">

Working like a charm in Firefox 2.0.0.3, Opera 9.10 and even Netscape 8.1 (Firefox-based), but no signs of the desired effect whatsover in IE 7.

All help sincerely appreciated.

BIG EDIT: What I thought is working isn't working. Why? When I try to maximize or restore down the main webpage window, Firefox, Opera and Netscape all put the gallery back left where I don't want it.

**Dalileis** · 05-14-2007, 01:52 AM

Well, middle of the night here in Sweden, but I finally found the root of my little problem, as no one else was around to help me out, seems like. Funny thing, looks like such a lively forum.

So the solution above seems indeed to be the right way to go (right:0), it totally works in all major browsers, but only if you remember to check for this as well:

In motiongallery.js: set startpos variable to 1, nothing else will do if you want to align things correctly to the right in the same way I wanted to.

So in the motiongallery.js code, look for this:

var startpos=1;

The value after starpos= should be 1, as above. This, of course, if you want to build the same right-aligned layout I was looking to accomplish.

Once again, thanks for this wonderful script. I'll put the files online once they are ready, so you can see what I was talking about all along. Hope my experience helps someone.

John a.k.a Global Moderator, experts, please correct me if I've got this all wrong, I'm really just getting to know Java.

**jscheuer1** · 05-14-2007, 04:32 AM

Well, if it works for you, I have no problem with it. However, since the align attribute has been deprecated and setting a right value can mess with the code for the gallery, what I would do is simply put a container division around the gallery:

HTML Code:

<div style="margin-left:auto">
gallery body code here
</div>

Note: Requires a DOCTYPE that puts browsers in standards or 'almost standards' mode like:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

or, the ever popular:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

**Dalileis** · 05-14-2007, 12:48 PM

Done. Changed back the align attribute to default left:0, DOCTYPE to recommended and implemented your code like so:

HTML Code:

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

<div style="margin-left:auto"><nobr id="trueContainer"><a href="../terrace.html" target="_parent"><img src="fs_frame_data/terrace.jpg" width="145" height="54" border=1></a><a href="../lobster.html" target="_parent"><img src="fs_frame_data/lobster.jpg" width="145" height="54" border=1></a><a href="../nightterrace.html" target="_parent"><img src="fs_frame_data/terracenight.jpg" width="145" height="54" border=1></a></nobr></div></div>
</div>
</body>

And it's working perfectly. Thanks.

**jscheuer1** · 05-14-2007, 02:10 PM

Actually, I had this:

HTML Code:

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

<nobr id="trueContainer"><a href="../terrace.html" target="_parent"><img src="fs_frame_data/terrace.jpg" width="145" height="54" border=1></a><a href="../lobster.html" target="_parent"><img src="fs_frame_data/lobster.jpg" width="145" height="54" border=1></a><a href="../nightterrace.html" target="_parent"><img src="fs_frame_data/terracenight.jpg" width="145" height="54" border=1></a></nobr>

</div>
</div>
</div>

in mind. But I still say, "If it works for you, I have no problem with it." And, it really could depend upon just exactly what you are going for and exactly what the rest of your layout is like. All other things being as they say equal though, making the positioning division a container to the entire gallery markup (as I have shown it) is preferred. However, a style width (equal to the visible width of the gallery) may need to be specified for that container.

**Dalileis** · 05-21-2007, 12:02 PM

Done. I've now changed it the way you suggested is to be preferred.

This is the webpage I'm working on.

You can see how your script fits in perfectly, as I sometimes have up to 16 different nodes in a single virtual tour. On small screens even 5, like in this example, do not get enough room, so as soon as I saw this script I knew it's the one I've been thinking of, for some time, of implementing.

However, there is one problem left, that just won't leave me alone. I thought I'll accept it, but it's getting more and more frustrating the more I look at it.

The problem is that the rightmost image in the gallery is treated like the image nr. 1, as the gallery "flows" from right to left, so that it stays right-aligned. But I want the LEFTMOST image to be the image nr. 1, the one that the rest of the slideshow continues after. The gallery itselft should stay right-aligned.

In other words: gallery to the right, but scrolling from the left.

Make your browser window small, so that only 3 gallery images get enough space, and you will understand what I'm talking about. It's unnatural and kinda wrong from the design perspective to have it like this.

But if I change the flow of the gallery so that the leftmost image is treated like image nr. 1 (through startpos var in motiongallery.js) then the whole gallery jumps back to the lefthand side where I definitely do not want it .

Thank you.

**Dalileis** · 05-27-2007, 02:25 AM

*bump*

**jscheuer1** · 05-27-2007, 03:25 AM

Hard to test locally, the way you have it set-up in the iframe and all, but at least I think I know what you are saying.

If you like:

Code:

 //4) Set to 1 for left start, 0 for right, 2 for center.
var startpos=0;

But that somehow messes things up. Try setting it as you have it (to 1), and adding in this code as indicated (red) in the script:

Code:

function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer;
if(typeof crossmain.style.maxWidth!=='undefined')
crossmain.style.maxWidth=maxwidth+'px';
menuwidth=crossmain.offsetWidth;
cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery;
actualwidth=document.getElementById? document.getElementById("trueContainer").offsetWidth : document.all['trueContainer'].offsetWidth;
if (startpos)
cross_scroll.style.left=(menuwidth-actualwidth)/startpos+'px';
crossmain.onmousemove=function(e){
motionengine(e);
cross_scroll.style.left=0;
}

and here:

Code:

onresize=function(){
if (typeof motioncontainer!=='undefined'&&motioncontainer.filters){
motioncontainer.style.width="0";
motioncontainer.style.width="";
motioncontainer.style.width=Math.min(motioncontainer.offsetWidth, maxwidth)+'px';
}
menuwidth=crossmain.offsetWidth;
cross_scroll.style.left=startpos? (menuwidth-actualwidth)/startpos+'px' : 0;
cross_scroll.style.left=0;
}

Thread: Cmotion right-align? How to do it?

Thread Tools

Search Thread

Cmotion right-align? How to do it?

Bit clearer

Onto something

Got it

Done

Bookmarks

Bookmarks

Posting Permissions