I just wrapped up a project and thought I'd share some solutions to problems I encountered since they seem to be fairly common. To give an overview, I was working on a landing page where I used lightbox to display samples of application screenshots as well as a menu in the right column that had collapsible and expandable content. The three things I set out to fix were:
1. A conflict in my .js files 2. Toggling a button graphic on click 3. Getting the first nav item in my menu to fade in and expand on load The files I used were: jquery-1.3.2.min.js (http://jquery.com) mootools.js (http://mootools.net) lightbox.js (http://www.huddletogether.com/projects/lightbox2/) Here are the solutions I came up with: 1. Conflicting FIles - After some reading I looked for things that may be called by both .js files. I noticed that 'hide' was used in both the jquery and mootools scripts. I changed all instances of 'hide' to 'hideit' in the jquery script as well as the inline code in my html file. Also the '$' function seemed to cause problems, so someone suggested using 'j$' for all instances of the '$' in my jQuery script and in my html page. 2. Toggling - A tricky thing I ran into was that my button didn't use an anchor tag for the action to expand and collapse but a div class called "slide" instead. In my ready function I added: // toggle slide button on click j$('.slide').click(function() { j$(this).toggleClass("slideDown"); }); This changes the class from "slide" to "slideDown." The slide class has a background image in my CSS with a down arrow and the slideDown class has... you guessed it, a background image with an up arrow graphic. 3. Getting the first nav menu item to expand and fade in on page load was more complex than I originally thought. After reading documentation on the jQuery site (http://docs.jquery.com) I found what I was looking for, the find expression. By finding the id for my navMenu I was able to get the desired effect. j$('#navMenu').find('div.view:first(0)').fadeIn('slow'); At first every menu item was opening but by using :first(0), I was able to ONLY target the first instance of 'view'. I assumed view:first would do the same thing, but by adding position (0) you get the specificity you need. I hope someone can learn from this and avoid the hours I spent looking for answers. I'm pretty new to jQuery and javascript so if something could be done easier or with best practices feel free to speak up. Also, if I refer to something incorrectly please let me know. Cheers, Erik Wallace
