Expando script. Is expanding upward possible?

[jjoyner]

1) Script Title: Expando

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/expando.js

3) Describe problem: When the image to be expanded is near the bottom of the viewable area, it expands downward off the screen; then the user has to scroll down to see the whole image. Is it possible to modify the script to expand upward? Of course, this raises the question of detecting whether the image is near the bottom, but ... one thing at a time.

[jscheuer1]

By adjusting the css of the image or of the image and its container, any expansion direction may be achieved. Detection is another issue and can be employed. But if you know where the image is to begin with, you can adjust the style accordingly.

If you want more help:

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

See also:

http://www.rubescartoons.com/

discussed here:

http://www.dynamicdrive.com/forums/s...ad.php?t=40871

[jjoyner]

I had noticed that CSS was used to control the leftward/rightward expansion at RubesCartoons, but for some reason I assumed that CSS wouldn't work to make it expand upward. I'll start experimenting today. Thanks!

Small world! I'm the fellow who put the Rubes Cartoons creator in touch with Lori. I host the site on my account at Pair Networks. Seeing Lori's use of Expando at Rubes was my first exposure to this script.

Best -
--
JJ

[jjoyner]

Well, that didn't take long! Who knew that all one has to do to make the image expand upward is to specify a bottom position! Thanks, jscheuer1!
--
jjoyner

[jscheuer1]

And thank you. Give my best regards to the gang.

[jjoyner]

By adjusting the css of the image or of the image and its container, any expansion direction may be achieved. Detection is another issue and can be employed. But if you know where the image is to begin with, you can adjust the style accordingly.

If you want more help:

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

See also:

http://www.rubescartoons.com/

discussed here:

http://www.dynamicdrive.com/forums/s...ad.php?t=40871

John -
I have written the code to detect where the image is, and how far it is from the top or bottom of the visible area, so that I know whether to "fix" the top or bottom of the image, in order to make it expand downward or upward, respectively (there's no telling in advance, of course, how close to the edge the image might be, since the visitor can scroll all s/he wants). When I set the top/bottom of the image to equal what the top/bottom already is, the image behaves properly, so I'm part-way there.

Now, when the site-visitor moves the mouse over the image, I must set the style:top or style:bottom on-the-fly before the expando script code does its thing ... and I'm not sure where to attempt to "hook" into the expando script ... if indeed I should at all. My best guess would be to start adding my code after the beginning of the resize function, before ...
cos = (1 - Math.cos((e.ims[i].jump ... etc
But I'd much rather ask your advice first (not that I've ever spent days thrashing or anything).

Best -
--
JJ

[jscheuer1]

I'm thinking you may not need to edit expando at all. Just attach events to the expanding elements that change their styles as indicated by your detection scheme:

<img src="some.jpg" class="expando" 
onmouseover="if(whatever detects needs expand down){
this.style.top = whatever; this.style.bottom = '';
} else {
this.style.top = '';this.style.bottom = whatever;
}">

The order may need to be reversed, as I'm unsure of your layout and of how you are achieving your results. As long as the top or bottom don't need to be updated while expando is expanding/contracting, the above should be fine. That is to say, if we can set one value at the onset of expansion, the above will be good. If we have to change the top or bottom value at each increment of the expansion/contraction process, there is probably a better way to lay it out in the first place. But if we must we can integrate it into the script, might get choppy on some browsers though, all those calculations and screen updates going on at once.

The event could probably be attached more elegantly. Try this idea out on one image, if it works I'll see if I can write it up as a document listener that will work off the expando or any other class of your choosing. But I'd need your detection routine, preferably a link to your page.

I should probably have a link to the page anyway:

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

[jjoyner]

Thanks for the help!!

Your suggestion to attach events to the expanding elements worked perfectly. There was, indeed, no need to modify expando. (I had wrongly assumed that I couldn't add an event w/o messing up the event listeners in your script ... when it comes to [java][ecma]script I'm more of a "dumb guy" than a "DOM guy".)

Now "all" I have to do is finish my detection scheme. I'm currently wading through the morass of different functions for different browsers to detect how much the page has scrolled, etc. Ugh. Here's a snapshot of my testing page (not production-ready):
http://www.burgerwebsites.com/dev/test_expando.html

Best -
--
JJ

[jscheuer1]

Your findTop function looks fine to me. You don't need the isUndefined function. The setPosition function should work fine cross browser like so (untested):

      function setPosition(element) {
        var windowHeight;
        var elementHeight;
        var elementTop;
        var scrollTop;

        windowHeight = window.innerHeight || document.documentElement.clientHeight;
        elementHeight = element.height;
        elementTop = findTop(element);
        scrollTop = typeof window.pageYOffset === 'number'? pageYOffset : document.documentElement.scrollTop;
        element.style.position = 'absolute';
        if( ( elementTop - scrollTop ) < 250 ) {
          element.style.top = elementTop + 'px';
          element.style.bottom = '';
        }
        else {
          element.style.bottom = (windowHeight - elementTop - elementHeight) + 'px';
          element.style.top = '';
        }
      }

Note: The use of document.documentElement, which is for IE only, assumes a valid URL DOCTYPE like the page already has, and IE 6+. If you need backward compatibility to IE 5.5 and earlier or the ability for your code to work in IE on non-standard pages, a function to determine what a given IE browser is capable of visa vis the document will need to be employed.

[jjoyner]

Thanks!! I've already tested the streamlined cross-browser code on two browsers, and it works perfectly. When my partner gets back from his daughter's victory party today (1st place team at Irish dance World Championships) he'll test on three more. Your help has saved us lots of wandering in the browser forest. A PayPal token coming your way for IRC or whatever you choose (maybe you could prevail on them to take PP directly(?) ... if you think that's a good idea).
Best -
--
JJ