Superfish > superfish.js + prototype.js + scriptaculous.js

[rui gomes]

Hi,
I´m using the superfish vertical menu with an ajax (scriptaculous
+prototype) application and the superfish was working just fine,
before add this application.

Now, when i do a mouseover the 2st level menu, just appears and
disappears !??

here´s the link:
http://marteleira.com

[code]
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/vertical.css"
media="screen">
<script type="text/javascript" src="js/jquery-1.2.3.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/bgiframe.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script src="js/lib/prototype.js" type="text/javascript"></script>
<script src="js/src/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
        function highlightCalendarCell(element) {
                $(element).style.border = '1px solid #d91a84';
        }

        function resetCalendarCell(element) {
                $(element).style.border = '1px solid #2C2C2C';
        }

        function startCalendar(month, year) {
                new Ajax.Updater('calendarInternal', 'rpc.php', {method: 'post',
postBody: 'action=startCalendar&month='+month+'&year='+year+''});
        }

        function showEventForm(day) {
                $('evtDay').value = day;
                $('evtMonth').value = $F('ccMonth');
                $('evtYear').value = $F('ccYear');

                displayEvents(day, $F('ccMonth'), $F('ccYear'));

                if(Element.visible('addEventForm')) {
                        // do nothing.
                } else {
                        Element.show('addEventForm');
                }
        }

        function displayEvents(day, month, year) {
                new Ajax.Updater('eventList', 'rpc.php', {method: 'post', postBody:
'action=listEvents&&d='+day+'&m='+month+'&y='+year+''});
                if(Element.visible('eventList')) {
                        // do nothing, its already visble.
                } else {
                        setTimeout("Element.show('eventList')", 300);
                }
        }

        function addEvent(day, month, year, body) {
                if(day && month && year && body) {
                        // alert('Add Event\nDay: '+day+'\nMonth: '+month+'\nYear: '+year
+'\nBody: '+body);
                        new Ajax.Request('rpc.php', {method: 'post', postBody:
'action=addEvent&d='+day+'&m='+month+'&y='+year+'&body='+body+'',
onSuccess: highlightEvent(day)});
                        $('evtBody').value = '';
                } else {
                        alert('There was an unexpected script error.\nPlease ensure that
you have not altered parts of it.');
                }

                // highlightEvent(day);
        } // addEvent.

        function highlightEvent(day) {
                Element.hide('addEventForm');
                $('calendarDay_'+day+'').style.background = '#<?= $eventColor ?>';
        }

        function showLoginBox() {
                Element.show('loginBox');
        }

        function showCP() {
                Element.show('cpBox');
        }

        }
</script>
<script type="text/javascript">
<!--
$(document).ready(function(){
        $(".nav")
        .superfish({
                animation : { opacity:"show",height:"show"}
        })
});
//-->
</script>
[/code]

Regards,
ps - it´s very urgent! and thanks!

[Joel Birch]

I think you are experiencing a library conflict as both jQuery and
Prototype both want to use $. By the time you initialise Superfish,
the dollar symbol has been hijacked by Prototype and no longer works
for jQuery. A quick solution is to change your initialisation code to
this:

/* use "jQuery" where you would use "$" */
jQuery(document).ready(function(){
       jQuery(".nav")
       .superfish({
               animation : { opacity:"show",height:"show"}
       })
});

jQuery also has an inbuilt way of resolving multi-library conflicts
which is really useful - you can learn about it here:
http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Joel Birch.

[rui gomes]

thanks ;)

2008/5/13 Joel Birch <joeldbirch@...>:

I think you are experiencing a library conflict as both jQuery and
Prototype both want to use $. By the time you initialise Superfish,
the dollar symbol has been hijacked by Prototype and no longer works
for jQuery. A quick solution is to change your initialisation code to
this:

/* use "jQuery" where you would use "$" */
jQuery(document).ready(function(){
      jQuery(".nav")
      .superfish({
              animation : { opacity:"show",height:"show"}
      })
});

jQuery also has an inbuilt way of resolving multi-library conflicts
which is really useful - you can learn about it here:
http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Joel Birch.

--
______________________________________
Rui Gomes