1

Hi thanks for your help. I am using wordpress to run multiple jQuery functions. As soon as I add the second one it breaks the code on the first one. I can't figure out why this is.

<script type="text/javascript">
var timeInterval = null, transition_time = 0, time_between_slides = 4000;
jQuery(document).ready(function ($) {

  /* This is for the slider */
    var $slider = $('.slider');
    var $sliderLi = $slider.find('li');

    $sliderLi.hide();
    //$slider.find('li:first').addClass('active').fadeIn(transition_time);
    slideShow();
    timeInterval = setInterval(slideShow, transition_time + time_between_slides);

    function slideShow() {
        var i = $slider.find('li.active').index();

        $sliderLi.eq(i).removeClass('active').fadeOut(transition_time);

        if (i == -1 || $sliderLi.length == i + 1) {
            $slider.find('li:first').addClass('active').fadeIn(transition_time);
        } else {
            $sliderLi.eq(i + 1).addClass('active').fadeIn(transition_time);
        }
    };

    $slider.mouseenter(function () {
        clearInterval(timeInterval);
    }).mouseleave(function () {
        timeInterval = setInterval(slideShow, transition_time + time_between_slides);
    });

});

</script>

Second Code

<script type="text/javascript">
jQuery(document).ready(function () {

    var $popup = $('.popup');

    $('area').on({
      click : function(e){
        var $this = $(this),
            $obj = $('#'+$this.prop('alt'));

        $popup.text($obj.text()).css({
          top: e.pageY + 10,
          left: e.pageX + 40,
        }).show();
      };

});
</script>

I have tried doing this two different ways. First was by plugging in the second code at the bottom of the first code. This ended up breaking the first code and the second code didn't work. I also tried splitting up as it is here. The second code still isn't working, even though it is working on http://jsfiddle.net/timlcooley/B5wa4/5/ I am not sure what is breaking the code. Any help in this process would be awesome.

Here is the edited code after reading everything people have shared. The problem still occurs. The slider breaks and the clickon area thing isn't working.

<script type="text/javascript">

var timeInterval = null, transition_time = 0, time_between_slides = 4000;
var $slider = $('.slider');
var $sliderLi = $slider.find('li');

var $popup = $('.popup');
jQuery(document).ready(function ($) {

  /* This is for the slider */


    $sliderLi.hide();
    //$slider.find('li:first').addClass('active').fadeIn(transition_time);
    slideShow();
    timeInterval = setInterval(slideShow, transition_time + time_between_slides);

    function slideShow() {
        var i = $slider.find('li.active').index();

        $sliderLi.eq(i).removeClass('active').fadeOut(transition_time);

        if (i == -1 || $sliderLi.length == i + 1) {
            $slider.find('li:first').addClass('active').fadeIn(transition_time);
        } else {
            $sliderLi.eq(i + 1).addClass('active').fadeIn(transition_time);
        }
    };

    $slider.mouseenter(function () {
        clearInterval(timeInterval);
    }).mouseleave(function () {
        timeInterval = setInterval(slideShow, transition_time + time_between_slides);
    });

/* This is for the popup feature */
    $('area').on({
      click : function(e){
        var $this = $(this),
            $obj = $('#'+$this.prop('alt'));

        $popup.text($obj.text()).css({
          top: e.pageY + 10,
          left: e.pageX + 40
        }).show()
      };

});
</script>
Improve this question
9
  • The second set of code appears to have an extra ; (the 2nd to last one) run your code through a validator. Commented Jan 14, 2013 at 22:46
  • Are any of the elements referenced in the first code inside the .popup tags? If so, setting .text() on the popup will destroy the child elements. Commented Jan 14, 2013 at 22:48
  • 1
    Have you tried adding both functions to the same document.ready() function call? Ideally, you would only want to call this once. Commented Jan 14, 2013 at 22:51
  • Do you have any JS errors in your browser console? Also, try running your code through JSLint - it will suggest improvements for you. Commented Jan 14, 2013 at 23:24
  • If it works in a JSFiddle but not in your real use case, then perhaps your selectors are not specific enough. Do you have more than one <area> tag, for example? Commented Jan 14, 2013 at 23:26

2 Answers 2

Reset to default
1

You need to pass the $ into your ready function in the second code if you're going to use it like $('.popup')

jQuery(document).ready(function ($) {

[edit] This is only the case, as Kevin B pointed out, if you have other code that uses the $. I assumed this, since you're using the aliased version in the first one, but I guess I can't make that assumption without see what else you have.

However, there are several syntactic things wrong in your second code snippet.

left: e.pageX + 40,

This doesn't need a comma after it (IE will error on this).

and when you close your click function, you don't need the semicolon.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

This is only an issue if $ is overridden by another library or function, but a good suggestion none the less.
Another advice (not directly linked to the problem) You should put your global vars and function (like slideShow()) outside the $(document).ready(function() {...}); Its not necessary to have all this code inside and this could give you somme problem (visibility of vars and functions) In the ready function, you should put only code that need the DOM to be loaded and ready, so function is not a part of this.
I will make these changes and then see what happens. thanks for the advice.
I have edited the code as it appears above and it is still breaks the original code. Odds are i did something wrong. The .popup has nothing to do with any of the slider divs.
0

There are a few issues I see with the code that can cause problems. The first is the missing $. Also, functions can be placed in better locations. A lot of what's going on has to do with the understanding of what jQuery(document).ready(function ($) { means in jQuery. You can come see me another day for some training on that. In the meantime, try this:

<script type="text/javascript">
var timeInterval = null, transition_time = 0, time_between_slides = 4000, popup = null, slider = null, sliderLi = null;

jQuery(document).ready(function ($) {

  /* This is for the slider */
    slider = $('.slider');
    sliderLi = slider.find('li');

    sliderLi.hide();
    //slider.find('li:first').addClass('active').fadeIn(transition_time);
    slideShow();
    timeInterval = setInterval(slideShow, transition_time + time_between_slides);

    slider.mouseenter(function () {
        clearInterval(timeInterval);
    }).mouseleave(function () {
        timeInterval = setInterval(slideShow, transition_time + time_between_slides);
    });

    popup = $('.popup');

    $('area').on({
      click : function(e){
        var area = $(this);
        var target = $('#' + area.prop('alt'));

        popup.text(target.text()).css({
          top: e.pageY + 10,
          left: e.pageX + 40
        }).show();
      };

});

function slideShow() {
    var i = slider.find('li.active').index();

    sliderLi.eq(i).removeClass('active').fadeOut(transition_time);

    if (i == -1 || sliderLi.length == i + 1) {
        slider.find('li:first').addClass('active').fadeIn(transition_time);
    } else {
        sliderLi.eq(i + 1).addClass('active').fadeIn(transition_time);
    }
}
</script>

Excessive use of the $ sign is really unnecessary. When you pass the $ into the function with the jQuery ready event, it allows the use of the $ in place of jQuery. New parameters are not required to start with $. It's really just a stylistic programming choice. var foo is the same as var $foo, and $(".slider") is the same as jQuery(".slider"). The parameters can simply be called foo, just like your timeInterval, transition_time and time_between_slides parameters.

Second, you only need one ready function as given by the comments. And It's usually a good idea to place a function outside of something like the jQuery ready function so that it can be accessible at a global level.

We will have to see if this works for you, but it should be a step in the right direction. Enjoy, J

Improve this answer

1 Comment

That didn't work either. Neither operations are working. I removed the popup section and it works just fine. Very strange.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.