Question

Language: jQuery / Javascript / PHP

I am trying to show a hidden DIV once a user clicks on a link.

There are 3 types of actions that should take place, depending on the value inside data-action attached inside the href tag.

It has 3 possible values:

• shake
• bounce
• default (my problem)

Now using switch, I switch through these actions in the Javascript code.

My problem is, I can’t show the hidden div I am trying to target (code under default is where I’m running into some trouble with).

JSfiddle: http://jsfiddle.net/ryxcw/1/ (problem starts at line 59)

Javascript code in use:

function loadBubbleActions() {
  $('#container > a').each(function () {

    switch ($(this).attr('data-action')) {
      case "shake":
        //bind shake action to bubble
        $(this).live("click", function (e) {


          var props = $.parseJSON($(this).attr('data-action-properties'));
          var ox = $(this).css('left').replace('px', '');
          var oy = $(this).css('top').replace('px', '');
          if ($('#tae').length == 0) {

            var overlay = jQuery('<div id="overlay" style="background-color: #fff !important; background-image: url(images/texture-shake.jpg);"> </div>');
            overlay.appendTo(document.body)

            $(document.body).append('<div id="tae" class="shake" style="position:absolute;opacity:1;z-index:12000;">Info goes here</div>');

            $('#overlay').click(function () {

              $('#overlay').remove();
              $('#tae').remove();

            });


            var cssWidth = ($(this).css('width').replace('px', '') / 2 - 20);
            var cssHeight = ($(this).css('height').replace('px', '') / 2 - 20);
            var ss = ($(window).width() / 2);
            var dd = ($(window).height() / 2);

            $('#tae').css('left', (ss - cssWidth) + "px");
            $('#tae').css('top', (dd - cssHeight) + "px");


            $('#tae').effect("shake", {
              times: 5
            }, 500);
          } else {
            $('#tae').effect("shake", {
              times: 5
            }, 500);

          }
        });

        break;



      case "bounce":
        //do specific action stuff here

        $(this).live("click", function (e) {
          alert("This is a bouncing post " + $(this).attr('data-link'));
        });
        break;
      default:
        //do action code for default here
        $(this).live("click", function (e) {

          divID = $(this).attr('id');

          var props = $.parseJSON($(this).attr('data-action-properties'));
          var act = $(this).attr('data-action');
          var ox = $(this).css('left').replace('px', '');
          var oy = $(this).css('top').replace('px', '');
          if ($('.panda').length == 0) {

            $("#theDIV-" + divID).show();
            $("#overlay").show();

            $('#overlay').click(function () {

              $('#overlay').remove();
              $('.panda').remove();

            });


            var cssWidth = ($(this).css('width').replace('px', '') / 2 + 400);
            var cssHeight = ($(this).css('height').replace('px', '') / 2 - 20);
            var ss = ($(window).width() / 2);
            var dd = ($(window).height() / 2);

            $('.panda').css('left', (ss - cssWidth) + "px");
            $('.panda').css('top', "100px");
          } else {
            //$('#tae').effect("shake", { times:props.shakeNumber }, 200);
          }

        });
    }
  });
}

I really hope someone would be able to help out, I’ve spent the entire night nitpicking on this thing, I could really use the guidance. Thank you so much for your time!

Once again, here is a JsFiddle for your convenience —
JSfiddle: http://jsfiddle.net/ryxcw/1/ (problem starts at line 59)

Answer 1

You’re doing this

if ($('.panda').length==0) {
      $("#theDIV-" + divID).show();

but $('.panda').length returns 1 because

<div class="panda hiddenDIV" id="theDIV-77" style="position:absolute;z-index:12000;">This is the content</div>

exists so the action $("#theDIV-" + divID).show(); won’t run.

http://jsfiddle.net/ryxcw/2/

ASIDE

Where you’ve used $(this).live() you should have used $(this).on() (though live will still work there).

You’re using data wrong. data-action="something" is stored in the DOM on run. You access its contents using .data('action') not .attr('data-action')

Also I have to agree with Pointy, kind of. There’s not so much “a lot of things wrong with the code” but rather, you’re doing a lot of things wrong.