Sunday, February 12, 2012

Firefox 10 - unclickable buttons?


Has anyone seen this behavior:



I have a couple of HTML buttons used to drive a content rotator:




<div id="rotatorControls" class="rotatorControls" runat="server">
<input name="previous" id="previous" type="button" value="&laquo;" />
&nbsp;
<input name="next" id="next" type="button" value="&raquo;" />
</div>



The buttons are activated with a little jQuery:




$(document).ready(function() {
mcarousel = $("#carouseldiv").msCarousel({ boxClass: 'div.box', height: 100, width: 450 }).data("msCarousel");
//add click event
$("#next").click(function() {
//calling next method
mcarousel.next();
});

$("#previous").click(function() {
//calling previous method
mcarousel.previous();
});
})



In IE this works fine...in Chrome and FireFox 10, the buttons aren't clickable. When I roll my cursor over the buttons, the cursor doesn't change and the buttons don't highlight like other buttons do.



Anyone seen this before and/or have any ideas how to fix this? I've already tried setting the z-index on the buttons, and moving them out of the container div (thinking an invisible element is blocking the click), but neither of those worked.



Any help would be appreciated.



EDIT



I'm using the mCarousel plugin provided by Marghoob Suleman (http://www.marghoobsuleman.com/jquery-ms-carousel)

3 comments:

  1. At a guess without the full code, I would suggest checking the relevant js files have loaded correctly for this plugin in Firefox and Chrome. Also it would be worth noting in the question that it is via a plugin not standard jQuery that this functionality is from.

    ReplyDelete
  2. Maybe you're missing something from the original implementation:

    http://www.marghoobsuleman.com/mywork/jcomponents/carousel/index.html

    For example the boxClass: 'div.box' pointing to the wrong place.

    ReplyDelete
  3. I had this same problem yesterday with a late version of Firefox and I found help on this site from Mikey G.

    This may help if you want to go this route, it worked for me on a similiar issue, also with a slideshow.

    Place your functions inside the buttons:

    <input name="next" id="next" type="button" onclick="$mcarousel.next();" value="&raquo;" />


    Forgive me if I left out a character or two, still pretty new.

    It doesn't seem to be z-index, I've found info that suggests sometimes Firefox has problems with '.click()'

    ReplyDelete