1

I'm trying to combine a couple of functions on a single js file. I'm very new to jquery, right now I've got the functions working on separate files, being called on diferent pages (working on drupal), but the strings are so small that I thing it would be best to combine them all in the script.js file.

Here are the functions:

$(document).ready(function() {
    switches = $('#na-paises-list > li');
    slides = $('#na-paises-images > div');
    switches.each(function(idx) {
            this.slide = slides[idx];
        }).click(function(){$(this).addClass('selected'); $(this.slide).unbind();}).hoverIntent(paisesOver,paisesOut);
});

function paisesOver(){ $(this).addClass('active'); $(this.slide).fadeIn(); }
function paisesOut(){ switches.removeClass('active'); slides.fadeOut('fast'); }

(this one I've found on stack overflow here and changed it a bit, maybe this is where I've made a mistake...)

The second one:

$(document).ready(function() {
    $("#na-areas-actividade div").tabs({ fx: { opacity: 'toggle', duration: 'fast' }, cookie: { expires: 30 } });
});

And the third:

$(document).ready(function() {
    $("#agencias div").tabs({ fx: { opacity: 'toggle', duration: 'fast' }, cookie: { expires: 30 } });
});

whenever I try to combine either the second or third function with the first one something goes wrong and only one of them works. And I am placing the functions inside the document ready function like this:

$(document).ready(function() {
    switches = $('#na-paises-list > li');
    slides = $('#na-paises-images > div');
    switches.each(function(idx) {
            this.slide = slides[idx];
        }).click(function(){$(this).addClass('selected'); $(this.slide).unbind();}).hoverIntent(paisesOver,paisesOut);

$("#na-areas-actividade div").tabs({ fx: { opacity: 'toggle', duration: 'fast' }, cookie: { expires: 30 } });

$("#agencias div").tabs({ fx: { opacity: 'toggle', duration: 'fast' }, cookie: { expires: 30 } });

});

function paisesOver(){ $(this).addClass('active'); $(this.slide).fadeIn(); }
function paisesOut(){ switches.removeClass('active'); slides.fadeOut('fast'); }

Any help or pointer in the right direction for more info about this problem is very welcome.

Community
  • 1
  • 1
Jolidog
  • 13
  • 3
  • Could you include a link to a demo page online, perhaps? – montrealist Jul 17 '09 at 15:43
  • I think there may be some errors in the modifications you've made. Can you post an HTML sample? – sixthgear Jul 17 '09 at 15:52
  • Also, you need to explain what you expect these snippets of code to do for you. What is the expected result? – sixthgear Jul 17 '09 at 16:05
  • The site is only running on a localhost environment, so no demo... The expected result with the first code block is a show/hide of div's containing imagens, therefor animating a menu selection. The other blocks of code are simply using the jqueryUI tabs plugin for selecting content, but they are being used on diferent pages, witch leads me to the comment on sixthgear anwser... – Jolidog Jul 20 '09 at 08:18

1 Answers1

1

I managed to get your code working fine (nearly) unmodified. A couple things.

  1. hoverIntent is not a jQuery method or event handler. I changed this to hover.
  2. Make sure you are linking to the jQuery cookie plugin if you want to use the cookie option on the tabs widget. I didn't want to go find the plugin, so I just removed the option.
$(document).ready(function() {

    switches = $('#na-paises-list > li');
    slides = $('#na-paises-images > div');

    switches.each(function(idx) {
        this.slide = slides[idx];
    }).click(function(){
        $(this).addClass('selected'); 
        $(this.slide).unbind();
    }).hover(paisesOver,paisesOut); 

    $("#na-areas-actividade div").tabs({ 
        fx: { 
            opacity: 'toggle', 
            duration: 'fast' 
        }});

    $("#agencias div").tabs({
        fx: {
            opacity: 'toggle', 
            duration: 'fast' 
        }});    
});

function paisesOver() { 
    $(this).addClass('active');
    $(this.slide).fadeIn();
}

function paisesOut() { 
    switches.removeClass('active'); 
    slides.fadeOut('fast'); 
}
sixthgear
  • 6,390
  • 2
  • 22
  • 17
  • There is a hoverIntent plugin which the author could be using. http://cherne.net/brian/resources/jquery.hoverIntent.html – SolutionYogi Jul 17 '09 at 16:27
  • Ahh that makes more sense. Well then, I'm stumped, unless the asker hasn't linked to the required plugins. (cookie and hoverIntent) – sixthgear Jul 17 '09 at 16:29
  • This last comment was what triggered my AHAH moment. hoverIntent and the cookie plugin were being added only to the pages here they were needed. So the code was ok in fact, but I'm guessing when parsing it wouldn't know what to do when it reached .hoverIntent and the plugin wasn't loaded on that specific page, breaking the rest of the code. When I swapped the order of the codes, functionality was broken on the other page. Didn't know this could happen, like I said I'm new to jquery! :D – Jolidog Jul 20 '09 at 08:24