[SOLVED] Element getStyle Not Defined error using Show/Hide technique

- 315 Posts
BBloke Reply #1, 19 years, 4 months ago
I’m not sure if this would be the right place to start a new topic on the above subject but I thought I’d put down what brief details I’ve found regarding the error.. its not a lot but thought someone else may have a better idea on the mechanics as to why it broke.

I use FF and firebug to do a little tracking and with Modx 0.9.5 Element.getStyle shows as defined where as Modx 0.9.6 shows it as Not defined.

I updated prototypes.js to v1.5.1 from the website and check modx0.9.6 and it showed as Defined. Hooray. A small step forward. I tested the page to see what happend using CTRL F5 and then clicked the link for show/hide and I had continual and ever increasing errors relating to Mootools.js and camels.
```
Protperty.camelCase not defined
```
Mootools.js line 2

I have looked at mootools and it looses me for some strange and bizarre reason. I have tried to update it but I dont think I was successful.

I hope this comes in handy for others. If this need adding to the Modx 0.9.6 issues thread then please feel free to do so.

I’ll post back more if I have chance to find out anything.

This problem can be eliminated by renaming the manager/media/script/mootools.js file so that it doesnt load with the webpage. It looks like scriptaculous/prototypes use the same function calls as does mootools and thats where the complication lies. Looking at my webpage mootools.js loads after prototype.js which I would presume takes precedence in inheritance!! but I’m not sure.

Edit: Sadly though, it breaks the manager side of things for me and the blind function, although it works doesnt show the snippet behind it
BBloke

315 Posts

BBloke Reply #2, 19 years, 4 months ago

I have finally had chance to have a look into the hide/show bit that was used on the modx page as a sample thing.

This is what it used to be:

<h2 onclick="new Effect.toggle( 'userstyles' , 'blind');" style="cursor: pointer">User Menu <img alt="Show/Hide" src="assets/images/filetypes/default.icon.gif" title="Show/Hide"></h2>  
<div class="stylebox" id="userstyles" style="display: none">

It does seem long winded and I had to change it from using the onclick event to using an <a> tag.

I hope this makes sense.

<script type="text/javascript">
  window.addEvent('domready', function(){
    var mySlide = new Fx.Slide('SlideMe');

    $('toggleSlide').addEvent('click', function(e){
        e = new Event(e);
        mySlide.toggle();
        e.stop();
});
mySlide.hide();
});
</script>
<a href="#" id="toggleSlide">Click here to show/hide Submit Link form <img alt="Show/Hide" src="assets/images/filetypes/default.icon.gif" title="Show/Hide" /></a>
<div id="SlideMe">

SlideMe is the name I gave to the <div> tag which is the bit that moves.
toggleSlide is the name to event that makes it happen.

Good Luck!!

Edit: Confirmed working in FF but not IE6 or IE7 sad

BBloke