PDA

View Full Version : 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/dynamicindex4/cmotiongallery.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/dynamicindex4/cmotiongallery.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:


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

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


<!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:


<!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:


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


<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 (http://planetdalmatia.se/planetadriatica/javavr/ruskamen/ljetnisan/terrace/terrace.html) 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:


//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:


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:


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;
}

Dalileis
05-27-2007, 05:38 AM
No joy, John.

I've just tested that solution and the scrolling stopped working + the whole gallery became left-align again instead. It happenes both in the basic page and in the iframe, same symptoms.

I realize, of course, it's hard for you to test locally. I have zipped and uploaded the local files (basic page outside iframe and incl. motiongallery.js) here (http://www.planetdalmatia.se/stored/fs_frame.zip). Hope it can help identify the problem easier. I am looking into it myself, but am far from being as fluent in Javascript as you are, so my bet's on you. Grateful for all the help.

jscheuer1
05-27-2007, 03:34 PM
I've looked at this a bit more and the problem appears to be that your layout is a bit too fluid. I think you need to decide on a width for the iframe and/or the gallery.

You have:


#motioncontainer {
/*margin:0 auto; Uncomment this line if you wish to center the gallery on page */
width: 100%; /* Set to gallery width, in px or percentage */
height: 73px; /* Set to gallery height */
}

and:


<td valign="top" width="100%">
<iframe name="iframe" src="terrace-filer/fs_frame.htm" align="top" frameborder="0" height="73" scrolling="no" width="100%">
This is an iframe. It contains a menu for opening the Full Screen movies. Netscape 4. is not compatible</iframe></td>

With all of that, there is nothing stopping the gallery from moving all the way to the left as it takes up 100% of the page in the iframe (in the case of the style) and 100% of the table cell (in the case of the code from your top page).

Try this:


var startpos=0;

and on the iframe page:


<div style="margin-left:50%">
<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/lobster.html" target="_parent"><img src="fs_frame_data/lobster.jpg" width="145" height="54" border=1></a><a href="../../barlounge/barlounge.html" target="_parent"><img src="fs_frame_data/barlounge.jpg" width="145" height="54" border=1></a><a href="../../terracenight/terracenight.html" target="_parent"><img src="fs_frame_data/terracenight.jpg" width="145" height="54" border=1></a><a href="../../lodge/lodge.html" target="_parent"><img src="fs_frame_data/lodge.jpg" width="145" height="54" border=1></a></nobr></div>
</div>
</div>

Leave the rest 'as is'.

This may still be too fluid. The gallery may become too narrow on smaller screens. Fixed units like pixels or relative units like em's that are at least a bit more constraining than % may need to be used some spots in all this.

Again, it is hard to test. With the archive you sent, I still cannot see how changes carried out there will be reflected on the top page.

Dalileis
06-02-2007, 05:22 PM
I really didn't want to bother you with this one anymore.

I've tried everything you suggested and I've read your posts over and over again trying to find the solution for this myself. Tried ems and pixels, less fluid, all in pixels, various combinations, pixels, percents, ems, nothing sems to work the way I intended it to, from the design perspective the only reasonable one, all things considered:

Gallery right-aligned, scrolling from the left, leftmost image in the gallery always first in scrolling order, not the rightmost, as it is now.

It's always either one or the other, but never both righ-aligned and scrolling from the left, I just can't get my head around this one.

I am grateful if you can find out what is wrong, I learned a lot about Javascript during this problem-shooting process, but obviously not quite enough yet. It's a GREAT script, but it just won't scroll from the left when right-aligned. :(

Here is the entire folder, with all the local files:

http://planetdalmatia.se/stored/terracenight.rar

Thank you.

Dalileis
06-02-2007, 05:31 PM
To turn off fullscreen mode, just change the terracenight.html APPLET parameter from:

<param name="fullscreen" value="true">

to:

<param name="fullscreen" value="false">

You probably know this better than I do, but anyways... ;o)

Dalileis
06-05-2007, 05:43 PM
As there is probably no direct solution here (is there?), I've moved to this instead:

http://www.dynamicdrive.com/forums/showthread.php?t=21457

But alas, new problem.

Will I ever see this working as I need it to work? :confused: