Figured it out. Thought I'd post my own answer here. Seems I was using an older version of scriptaculous.js . Apparently... "there is a conflict with an older version of Scriptaculous and jQuery (Scriptaculous was attempting to extend the native Array prototype incorrectly)". For anyone who may have a similar problem in the future I found this on this page http://stackoverflow.com/questions/134572/jquery-prototype-conflict (see reply three marked as the answer). So I upgrading scriptaculous.js including effects.js to version v1.8.0 and now Superfish and Lightbox2 work perfectly well together on the same page.
The Prototype JavaScript framework was also upgraded to version 1.6.0.3. I followed the upgrade instructions on this page http://www.myphpbook.com/articles/updgrading-prototype-and-scriptaculous jQuery.noConflict(); was also required in the page header. The all important ordering of the calls to the external javascript libraries and files was as follows (according to Firefox Developer tools no errors are now occurring - please though if someone experienced with this kind of thing sees order errors in the below great if you could amend and post): <!-- Prototype JavaScript framework Library - used by Lightbox2 --> <script type="text/javascript" src="../js/prototype.js"></ script> <!-- jQuery JavaScript framework Library - used by Superfish --> <script type="text/javascript" src="../js/jquery-1.2.6.min.js"></ script> <script type="text/javascript"> jQuery.noConflict(); // initialise plugins jQuery(document).ready(function(){ jQuery("ul.sf-menu").superfish({ pathClass: 'current' }); }); // Use Prototype with $(...), etc. $('someid').hide(); </script> <!-- Lightbox2 --> <script type="text/javascript" src="../js/scriptaculous.js? load=effects"></script> <script type="text/javascript" src="../js/lightbox.js"></ script> <!-- Superfish --> <script type="text/javascript" src="../js/hoverIntent.js"></ script> <script type="text/javascript" src="../js/superfish.js"></script> On Jul 3, 5:53 pm, JayD <jaydaniel...@gmail.com> wrote: > Thanks again Charlie, > > Have done as you've said but still no luck. > > I've placed the script file referencing to the 'prototypelibrary' > above the below as you described. > // UsePrototypewith $(...), etc. > $('someid').hide(); > > The relevant parts of the page head now look like this: > > <!-- CSS --> > <link rel="stylesheet" type="text/css" href="" > title="default" /> > <style type="text/css" media="all"> > @import url(../css/reset.css); > @import url(../css/styles-2-column.css); > @import url(../css/styles.css); > @import url(../css/lightbox.css); > </style> > > <!--SuperfishjQueryCSS. --> > <link rel="stylesheet" type="text/css" href="../css/superfish.css" > media="screen"> > <link rel="stylesheet" type="text/css" href="../css/superfish- > navbar.css" media="screen"> > > <!-- All external javascript --> > <script type="text/JavaScript" src="../js/global.js"></script> > <script type="text/javascript" src="http://s7.addthis.com/js/ > 250/addthis_widget.js?pub=pp023"></script> > > <!-- Lightbox2 --> > <script type="text/javascript" src="../js/prototype.js"></ > script> > <script type="text/javascript" src="../js/scriptaculous.js? > load=effects"></script> > <script type="text/javascript" src="../js/lightbox.js"></ > script> > > <!--SuperfishjQuery: link to the JavaScript files (hoverIntent is > optional) --> > <script type="text/javascript" src="../js/jquery-1.2.6.min.js"></ > script> > > <script type="text/javascript"> > jQuery.noConflict(); > > // initialise plugins > jQuery(document).ready(function(){ > jQuery("ul.sf-menu").superfish({ > pathClass: 'current' > }); > }); > > // UsePrototypewith $(...), etc. > $('someid').hide(); > > </script> > > <script type="text/javascript" src="../js/hoverIntent.js"></ > script> > <script type="text/javascript" src="../js/superfish.js"></script> > > I've placed the calls to the 2 externalSuperfishrelated JavaScript > files belowjQuery.noConflict(); script. Above or below I didn't see > any difference when testing not that this was something you suggested > to try. > > I have also restored allSuperfishjs and css files back to the > originals. I've taken out other 3rd party scripts along the way also. > The 2nd tier extra top space issue has now come good so that was > obviously something I'd done wrong with theSuperfishstyle sheet > tweaking. > > Have re-added the 'PHP if statement' on the <li> and the <a> (have > been using this tutorial to do such things for a while > nowhttp://www.crucialwebhost.com/blog/you-are-here-using-php-to-highligh... > ). That all seems to be behaving itself though theSuperfishprimary > nav bar arrows disappear causing right padding between each button to > collapse which was part of the original problem (in fact this now > would be the only problem not yet resolved). Note: the above mentioned > ‘missing arrows’ occurs with or without the ‘current class’ assigned > to the unordered list. > > As soon as I removed the script reference to the 'prototype.js' file > though even that little error fixes itself… so I'm still left thinking > the conflict between thejQuery.js and theprototype.js file is still > occurring and therefore thejQuery.noConflict(); is still not properly > implemented and therefore not doing it's job. > > The page location remains the > samehttp://www.the2jays.com/news/papua-new-guinea001.php > . Would you mind having another look for me please? I know this must > be taking up your time and do appreciate all the assistance you’ve > supplied so far. I’m thinking there must just be something very minor > that I've not implemented correctly. > > Thanks again, > JayD > > On Jul 3, 3:24 pm, Charlie <charlie...@gmail.com> wrote: > > > gone too far, only place the $ needs changing is in the script tag you use > > to call menu and create functions based onjquery.js or plugins. The plugins > > are safely contained in special function wrappers. For now just consider > > plugin files as read only, and library files are always read only > > you've placed noConflict properly within the script tag with document > > .ready, however I would follow the instructions on placement of script > > files a little closer. > > Yourprototypecall of // UsePrototypewith $(...), etc. > > $('someid').hide(); > > is above theprototypelibrary so that is already throwing an error that "$ > > is not a function" > > best to just get a clean copy ofsuperfish.js and replace the one you > > modified. The visuals are CSS related I'm fairly sure. The current class > > isn't being applied correctly, it's showing up on <a> tags, look at markup > > onsuperfishwebsite for navbar example and tags that have current class > > applied, compare to yours. > > Also, sf-menu is floated right, no float applied on originalsuperfish, not > > sure if that is a problem but since you're having problems I'd get rid of > > it, maybe use margin, or float a container instead > > My suggestion is start over. Clean CSS file, clean markup, clean js file. > > Also kill the other scripts one at a time, see what happens > > JayD wrote:Thanks Charlie, Greatly appreciate your assistance with this. > > Unfortunately however still no joy... I'd prefer to continue using > > thePrototypeversion ofLightboxand I've now been informed by other team > > members that I must so am really keen to getSuperfishand Lightbox2 working > > properly independent of one another on this and similar pages. Have had a > > go at implementingjQuery.noConflict(); and you'll be able to see how I've > > gone about doing this within the head section of the same page as > > beforehttp://www.the2jays.com/news/papua-new-guinea001.php. Not sure if I > > followed your instructions to a tee though: I added what I thought to be > > the correctjQuery.noConflict(); code to the existingSuperfishscript tag > > within the page head. I then proceeded to change/ swap out (used > > Dreamweaver's 'find and replace') every instance of '$' in the two external > > javascript files related toSuperfish-superfish.js & hoverIntent.js . I've > > not made any changes to thejquery-1.2.6.min.js file contents. I was > > assuming this is what you meant by, "[...] then you have to change all "$" > > used forjQueryfunctions to "jQuery"." The reference/ call to the > > externalprototype.js remains positioned under the above script tag > > mentioned above. On the remote website the initial problem still remains so > > I'm assuming I've not properly implemented thejQuery.noConflict(); I've > > been searching the web for a beginners/ n00b step by step tutorial on how > > to properly implementjQuery.noConflict(); but yet to find one so thought > > I'd post again here . Thanks again, JayD On Jul 3, 4:38 am, > > Charlie<charlie...@gmail.com>wrote:was trying to look at the navbar and > > didn't see protoype script there one problem is you have 2 versions > > ofjquery.js loading, one with each plugin. That can cause problems. Keep > > the top one, delete bottom one. See if that helps. If menu problem persists > > seeing a version with no other scripts running might help if you use > > prototye put thejQuery.noConflict() right at beginning of the script tag > > with $(document).ready and place it before $(document).ready, then you have > > to change all "$" used forjQueryfunctions to "jQuery". JayD wrote:Hi, > > Firstly, really likeSuperfish! Also should mention I'm a complete noob when > > it comes to JavaScript code. Have successfully implemented the > > out-of-the-boxSuperfishnav-bar style within this website though - it's > > temporarily located herehttp://www.the2jays.com/index.php(notethis site is > > still very much under construction, styling is still yet to be done > > (including the nav bar) and the site-wide build is only partially uploaded > > to the remote server). The site is a partial rebuild/ redesign and the old > > site used Lokesh Dhakar's lightbox2 on a number of pages (page contents on > > the new site are to remain the same as the old). On pages that reference > > the lightbox2 script (using 'PrototypeJavaScript framework - version > > 1.4.0') a slight conflict with the desired rendering of theSuperfishnav-bar > > seems to occur - example > > pagehttp://www.the2jays.com/news/papua-new-guinea001.phpLightbox2seems to > > still work fine and so doesSuperfishmostly, however the ‘PHP if statem ent’ > > generating the ‘current class tab’ on the top level 'News' button is lost/ > > missing and the second tier level button row has greater space between it > > and the top level than desired (while on this page mouse-over a different > > top level button to see what I mean). Hope the above makes sense. When I > > turn off <script type="text/javascript" src="../js/prototype.js"></script> > > in the head section of the pageSuperfishappears perfect so I'm assuming > > it's got something to do with the ‘prototype’ framework ? I've looked at > > 'jQuerywith Other Libraries' but as a noob this is over-my-head > > atmhttp://docs.jquery.com/Using_jQuery_with_Other_Librariesandto be honest > > I'm not sure if I'm on the right track. Did also try turning 'Lokesh > > Dhakar's lightbox2' off and used 'jQueryLightbox0.5' instead thinking the > > twojQueryscripts should work together. The same problem still occurred > > however. Anyway, thought at this point I should probably post here an d see > > if someone can assist me. Thanks in advance. JayD
