MyBB Community Forums

I'm pretty useless at JavaScript but am especially so when using Prorotype. I'm trying to create a prototype based alternative script for my MyAlerts plugin. All it needs to do is open the dropdown right now (I'll likely be coming back for more help later...). I'm trying to completely replicate the way the jQuery dropdown works in prototype, effects and all. Cue scriptaculous (which I believe is distributed with MyBB right?).

Here's my current code:

$$('.myalerts_popup_hook').each(function(elmt)
{
	elmt.observe('click', function(ev)
	{
		Event.stop(ev);
		var popup_id = ev.target.identify() + '_popup';

		Effect.toggle(popup_id, 'blind');

		return false;
	});
});

if (typeof unreadAlerts !== 'undefined')
{
	if (unreadAlerts > 0)
	{
		document.title = document.title + ' (' + unreadAlerts + ')';
	}
}

Now, that all works fine when I test it in a jsFiddle. As soon as I try to use it with MyBB though, it doesn't work. Clicking on the link just takes you to the listing page (Event.stop() is meant to stop that and does in the fiddle) so obviously it's not even running the code for some reason.

Any ideas?

Well, for a blind effect you could use a classic toggle, assuming the data is already "hidden" on the page or is it coming from an AJAX call?

It's not so much that the effect isn't working, the whole script just doesn't. When you click the alerts link (it's a link so it'll degrade gracefully in browsers without JS) nothing should happen but it does.

Well, on your fiddle I tried it and nothing happened. Just an error from chrome that local host was not found or something.

I did notice you were using the $$ construct - that is the proto/scripty class thing like in jQuery, but that IS slow in Prototype. Have you considered using the id of the div instead to do the dropdown?That way you can use good old toggle

<div id="alertdiv" align="center" style="display: none;" class="smalltext"> 
hallo, I was hidden until you clicked :)
</div>
<div>
<span class="smalltext" title="alert">
<a href="javascript:;" onclick="Element.toggle('alertdiv'); 
($('alertdiv').visible() == false) ? $('mytoggle').update('Show Alerts') : $('mytoggle').update('Hide Alerts');" 
id="mytoggle">Show Alerts</a>
</span>
</div>

Fiddle thing >> http://jsfiddle.net/leefish/awcW7/

(2012-08-05, 12:21 AM)Leefish Wrote: [ -> ]Well, on your fiddle I tried it and nothing happened. Just an error from chrome that local host was not found or something.

I did notice you were using the $$ construct - that is the proto/scripty class thing like in jQuery, but that IS slow in Prototype. Have you considered using the id of the div instead to do the dropdown?That way you can use good old toggle

<div id="alertdiv" align="center" style="display: none;" class="smalltext"> 
hallo, I was hidden until you clicked :)
</div>
<div>
<span class="smalltext" title="alert">
<a href="javascript:;" onclick="Element.toggle('alertdiv'); 
($('alertdiv').visible() == false) ? $('mytoggle').update('Show Alerts') : $('mytoggle').update('Hide Alerts');" 
id="mytoggle">Show Alerts</a>
</span>
</div>

Fiddle thing >> http://jsfiddle.net/leefish/awcW7/

Yeah, I must say $$ has caused issues in the past in MyStatus. I'll try it using the id as a selector and see if it helps.

Just bumping this up as I'd still prefer to use $$ if at all possible...

Fallen victim to the fundamental flaw with Effects; you can't place an effect on an element hidden by a CSS stylesheet. This isn't a limitation of Prototype or Scriptaculous, or I think jQuery, but is how CSS is supposed to work.

You need to hide the elements in-line with Prototype itself. $$ isn't slow, but if you use a selector that cycles through dozens of elements it will slow down the page (so at least be descriptive; use div.css-class instead of just .css-class).

http://jsfiddle.net/ZE2B2/2/

$$('div.myalerts_popup').each(function(e){ e.setStyle({ display: 'none' }) });
                                           
$$('.myalerts_popup_hook').each(function(elmt)
{
    elmt.observe('click', function(ev) {
        Event.stop(ev);
        var popup_id = ev.target.identify() + '_popup';

        Effect.toggle(popup_id, 'blind');
    });
});

if (typeof unreadAlerts !== 'undefined') {
    if (unreadAlerts > 0)
    {
        document.title = document.title + ' (' + unreadAlerts + ')';
    }
}

Ah, thanks so much Tomm! I'll try the above and hopefully it'll work ok.

Finally got a chance to try your code Tomm and... nothing. Still no luck I'm now just using the ID seeing as it should be far easier given my luck with prototype and it's still not even stopping the event:

$('unreadAlerts_menu').observe('click', function(clickEvent) {
    Event.stop(clickEvent);
    var popup_id = clickEvent.target.identify() + '_popup';

    Effect.toggle(popup_id, 'blind');
});