2 javascript problems - any ideas

[A.N.Other]

I'm in the process of finishing the latest iteration of my photography gallery:
www.gyphotography.co.uk/dev/v2

I've got two display issues I was after some help with

1) -- is now solved

I've got some hidden divs that I've got appearing with mootools javascript. It works nicely, but the page is extremely long, as obviously the html doesn't realise they're hidden. This means there's a scroll bar up permanently that goes down a long way. I can set the overflow to hidden to get rid of this, but that won't allow me any scrolling at all and some of the longer divs will likely go over the end of the page when they're showing, which means I'll have missing content.

Any ideas as to what I can do about this?

2)

As you can see I'm using phatfusion's mootools imagemenu for the main menu - the image accordion, for those that haven't come across it before. My javascript for hiding and opening hidden divs works on both the options from this and from the links in the left of the footer (not cart - that opens a new page). As it stands, if you choose an option from the imagemenu and then select one of the links from the footer, the imagemenu remains open.

I need a way of closing this - I'm guessing either by programmatically clicking the open option to get it to close again, or by calling the reset function from the imagemenu script. Unfortunately, I can't get either to work, but that may well just be me doing it wrong. How would you go about doing this?

My js for the hidden divs: www.gyphotography.co.uk/dev/v2/common/scripts/collapsibles.js
Phatfusion's imagemenu: www.gyphotography.co.uk/dev/v2/common/scripts/imagemenu.js

I figured I might be better off asking about the second problem in the mooforum, but it doesn't seem to have a particularly large user base, so I haven't had any luck there.

The site is still under dev at the moment, so there's only a few filler images up at the moment in the nature gallery, and there are a few bugs I already know about.

 

[PaulM]

For #1 make sure you're using display: none; instead of visibility: hidden; when hiding the elements.

edit: ah, it's the height of OverlayContainer div causing it, you need to hide the elements before creating the gallery overlay div. Include the collapsibles.js above the inline gallery javascript so its domready gets executed first.

For #2 you could make myMenu global and then use:

<script language="javascript" type="text/javascript">
    $$('[class=collapselabel]').addEvent('click', (function(){
        myMenu.reset(this.id);
    }));
</script>

I've never used mootools/imagemenu before though so there's probably a better way to do it.

 

[A.N.Other]

Yup calling collapsibles.js first has sorted the scrolling problem. Thank you kindly.

As for 2) yes, I was trying to call myMenu.reset(x) straight from my collapsibles script to close the imagemenu but I'm new to javascript, so I've missed the whole 'declaring as a global variable' bit, which I'd imagine is why it wasn't working. From my understanding of it from having a google just now, I can do this by just not putting 'var' infront of the variable name when I first declare it? Is that right?

That's the downside of learning a language through trial and error, I suppose. I can get by, and knowledge of other languages has allowed me to do the collapsibles script, but I only learn according to what I need to do.

 

[PaulM]

I rarely use javascript so I don't actually know for sure, I assume it's just like most other languages, any variables declared within a function are local... so you need to declare it outside, e.g.:

    <script type="text/javascript">
        var myMenu;
        window.addEvent('domready', function(){
            myMenu = new ImageMenu($$('#imageMenu a'),{
                    openWidth:265,
                    onOpen:function(e,i){ window.location=e; }
            })
            var gallery = new multiBox('inline', {
                    overlay: new overlay()
            })
        });
    </script>

would enable myMenu to be used globally.

 

[BunnyKillBot]

Using global variables to get round a problem is bad programming practice.

I notice to parse the class="collapselabel" in collapsibles.js you are adding to the domready event same as index file.

window.addEvent('domready',function() {
// add referring elements to an array
var headings = $$('.collapselabel');
// array to store all of the collapsibles
var collapsibles = new Array();
......

You could encapsulate collapsibles in a class, create it after you create the ImageMenu and pass myMenu in as a variable.

window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{
openWidth:265,
onOpen:function(e,i){window.location=e;}
})
var collapsibles = new Collapsibles('collapselabel', myMenu)
var gallery = new multiBox('inline', {
overlay: new overlay()
})
});

That way, you can access the data and methods of your instance of ImageMenu within the Collapsibles class.

However, it may be best in this case to simply integrate a Collapsibels class into the ImageMenu class. When you initialize the ImageMenu, gather all the elements of class collapselabel. Iterate through them, if containing div is myMenu add a reset(thisdiv) event, otherwise add a reset() event.

 

[A.N.Other]

Thanks, I may well have a look at doing it that way - though I'd like to use the collapsibles script on other pages that don't have the imagemenu, so probably as a separate class. I'll read up on it