View Full Version : Noob - Failing to mod Imageflow ..

02-12-2012, 03:51 AM
Please help ...

I'm trying to use Imageflow (imageflow.finnrudolph.de) for something I'm certain it wasnt designed for. I'm trying to use it do do a couple of levels hierarchical menu navigation. And I mean menu in every sense of the word, because it's a food ordering app that i'm putting together.

Find attached where I’m up to .. & utterly stuck. I have very little idea what I’m doing here. I’ve spent hours & hours on it. The HTML I can deal with, but the javascript is an enigma ... Once this is cracked the rest of it I can do.

Unzip & open index.html in any browser other than IE

Say I've got a menu with 10 categories (appertisers, mains, drinks etc) and within each category there are 4 dishes (onion bhajis, prawn coctail, soup, whatever)

So ... I’ve got a main imageflow at the top containing 10 images (for the categories 1 – 10)

There are 10 divs below & I only want one of the 10 displayed at once, depending on the image in focus in the parent.

Each of those 10 category divs contains an imageflow with 4 images (for Dishes 1 - 4) which in turn relate to 4 further divs which will contain details & a buy button for the dish in focus.

Again, I only want one dish on display at a time, depending on the focus image in its parent imageflow.

In any browser apart from IE, you can see the behaviour I want by resizing the browser after each move of THE TOP sombrero (the coloured blob!). The bottom sombrero behaves as planned in all browsers other than IE.

Apart from instantiating each imageflow at the foot of imageflow.js (as per the documentation), the only changes I’ve ended up making (even though I’ve written 10,000 lines of ‘code’ :/ ) are these ...

...search for “silas” to find em...

/* START OF silas messing about */

document.getElementById(my.imagesDiv.childNodes[imageID+1].getAttribute('alt')).style.display = "none";
document.getElementById(my.imagesDiv.childNodes[imageID-1].getAttribute('alt')).style.display = "none";
document.getElementById(my.imagesDiv.childNodes[imageID].getAttribute('alt')).style.display = "inline";

/* END OF silas messing about */

... which reveals the child div by changing css display to from none to inline, and hides the div either side by doing the reverse.

The two real problems I have at the moment ....

• The lower imageflows aren’t rendering while they are within a div that’s hidden. And so when the div is revealed, the imageflow isn’t. Other stuff within the div is shown. The imageflows are rendered by resizing the browser.

• In IE the child divs mostly don’t load correctly when moving the sombrero to the right (but are ok when moving it to the left!) I think this is something to do with the speed or order of events. Again it is corrected when IE is resized ....

In IE, on the lower imageflow you often get a mismatch here when moving to the right ...
(ONLY in IE & ONLY when moving to the right)


In IE, on the upper imageflow, you often get a mismatch here when moving to the right ...
(ONLY in IE & ONLY when moving to the right)


Something else I’m going to have to crack is fading in each of the 10 child divs so the visitor isn’t made ill by the flickering ... I’m hoping to do this with a jquery fade, which I’ve used in the past, but I don’t know how to use it here ... do you?

Listen ... thanks for coming this far with me ... I really apprectiate it.


02-12-2012, 11:20 PM
Am I allowed to offer to pay for some help with this ?? ... desperate.

02-12-2012, 11:38 PM
You can post here if you want paid help:
(Feel free to link to this thread.)

02-12-2012, 11:44 PM
wow .. thanks.

02-13-2012, 12:08 AM
OK, its here ... http://www.dynamicdrive.com/forums/showthread.php?t=67473