4

I hope you can help,

I am relatively new to mootools (and brand new to here) and I have been working on a basic open close div. It can be seen here: http://jsfiddle.net/jessicajet/2jZz5/. It includes a clickable link script I found elsewhere.

   <script>
   window.addEvent('load', function() {

   Element.Events.outerClick = {
    base : 'click',
    condition : function(event){
    event.stopPropagation();
    return false;
     },
    onAdd : function(fn){
    this.getDocument().addEvent('click', fn);
     },
    onRemove : function(fn){
    this.getDocument().removeEvent('click', fn);
    }
    };


    (function() {
var opener = $('box2');
var boxtoopen = $('box');
var testmorph = $('test')

boxtoopen.set('morph', {
    duration: 800, 
});

boxtoopen.addEvent('outerClick', function(event) {
    boxtoopen.morph(".openOff");
     testmorph.morph(".openOff2"); 
});

opener.addEvent('click', function(e) {
    e.stop();
    boxtoopen.morph(".openOn");    
    testmorph.morph(".openOn2");    
});

})();


 var clix = new dwClickables({
elements: $('.box2'),
anchorToSpan: true
});


 });
</script>

It doesn't seem to be working in ie7 although it seems consistant across other browsers?

Can anyone help me resolve this problem and give me some advice for future use?

Kind regards,

Jessica

Jessicajet
  • 53
  • 3

1 Answers1

3

Typos are often te worst bugs to find ;) and IE can be very stern about it.

http://jsfiddle.net/2jZz5/2/

I added a missing semicolon (;) and removed a unneeded comma (,)

Before:

var opener = $('box2');
var boxtoopen = $('box');
var testmorph = $('test')

boxtoopen.set('morph', {
    duration: 800, 
});

After:

var opener = $('box2');
var boxtoopen = $('box');
var testmorph = $('test');

boxtoopen.set('morph', {
    duration: 800 
});
suicidal.banana
  • 206
  • 1
  • 8
  • Thank you for your help, it is now working and I am feeling a bit silly! It is still being strange in ie7, might it be a problem with my CSS rather than the javascript? – Jessicajet Nov 22 '12 at 15:17
  • Dont feel silly, i do this for a living and still make typos and then waste half a day trying to find whats wrong ;) i've learned it usually helps ALOT if you let somebody else have a look, when your not working on it the missing formatting usually jumps out. About further differences, yeah, IE7 does CSS differently, theres enormous amounts of sites and books written about it (IE in general) Honestlly im not really sure whats the deal with the '#test2' div falling below the button while it morphs, you may wanna rethink the html structure though. – suicidal.banana Nov 22 '12 at 15:35
  • To follow up, heres how i would make such a functionality: http://jsfiddle.net/2jZz5/4/ (please note i didnt touch 'clix' since i was clueless what that does) its less css, elements and js, works fine in IE7, but idk if your ok with using negative 'margins' – suicidal.banana Nov 22 '12 at 15:53
  • Thank you for your help, I have now even realised that jsfiddle will help me with the typos! Thank you for the example, it is very different to how I thought about it, it will be really useful to learn from. – Jessicajet Nov 22 '12 at 16:04
  • My pleasure :) (oh and since your new here, its in no way a must, but usually people 'vote up' a awnser once they have resolved their issue, so you may wanna press the little arrow up above the 0 on my 'large awnser', dont feel pressured too though, just saying) – suicidal.banana Nov 22 '12 at 16:07
  • :) Unfortunately vote Up requires 15 reputation points, once I have them I will try again. – Jessicajet Nov 22 '12 at 16:37
  • I have clicked the tick, I hope this has voted it up SB. Thank you Dimitar. – Jessicajet Nov 23 '12 at 17:00
  • (it has, thanks :) also @Dimitar since honestly i didnt know voting needed rep, gave u both some rep aswell) – suicidal.banana Nov 27 '12 at 10:19