Home/ Questions/Q 6046959
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T07:17:56+00:00

While working on an answer to this question I created this jsfiddle . For

  • 0

While working on an answer to this question I created this jsfiddle. For some reason it isn’t working, and when I used firebug’s error consol it was returning that “.show” is not a function. This leads me to believe that jsfiddle is incorrectly loading jQuery. Are there any known issues between JSFiddle and jQuery? Is my code simply incorrect (BTW when I change .show("slow") to .style.display = "inherit" it works fine which is why I think it has to be a problem with jQuery…)

A working JSFiddle would be greatly appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A couple of issues:

    1. You forgot a }.
    2. You’re calling jQuery methods on elements that aren’t wrapped in a jQuery object. You would need to do:
    $(itemName.getElementsByTagName("span")[0]).show("slow");

    (Note the wrapping). jQuery methods don’t magically extend default elements, the object must be wrapped first.

    Note now that this version works.

    EDIT:

    Alternatively, you could use the second parameter of jQuery’s construct (scope) and shorten this code:

    function showy(itemName) {
    $('span:first',itemName).show("slow");
}
function closy(itemName) {
    $('span:first',itemName).hide("slow");
}

    EDITv2

    Juan brought up a good point, you should also separate javascript with markup. By this I mean avoid using the on* attributes of the elements, and keep the bindings within the external .js file or <script> tags. e.g.

    <head>
  ...
  <script src="http://path.to/jquery.js">
  <script>
    $(function(){ // execute once the document is ready (onload="below_code()")

      // bind to the buttons' hover events
      // find them by the "button" and "white" class names
      $('.button.white').hover(function(){ // hover event (onmouseover="below_code()")

        // find the first span within the link that triggered the event
        $('span:first',this).show('slow');

      },function(){ // mouse out event (onmouseout="below_code()")

        // likewise, find first span
        $('span:first',this).hide('slow');

      });
    });
  </script>
  ...
</head>

<body>
  ...
  <a href="#" class="button white" id="button1">
    <span id="spanToShow">SHOW: this text&nbsp;</span>
    on hover
  </a>
  ...
</body>
    • 0