Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

jQuery problem in SugarCube

So I'm using jQuery in SugarCube to make different elements appear when someone mouses over the header, but for some reason it doesn't work on any page but Start, and that's only the first time you visit it: if you hit the back button to try visit Start again, it also doesn't work. I tried the exact same thing in Sugarcane and it works on every single page I want it to.

Can anyone please advise?

Thanks!

Comments

  • You're going to have to give more background than that.  What, exactly, are you trying and where.  It's probably something simple.
  • TheMadExile wrote:

    You're going to have to give more background than that.  What, exactly, are you trying and where.

    Oh yeah DUH. Uh, sorry bout that. *facepalm*

    Well, here's the code I have in a script passage for the sidebar, which is my main problem really:
    $(document).ready(function(){
    $(".header").mouseenter(function(){
    $("#ui-bar").show();
    });
    });


    $(document).ready(function(){
    $("#ui-bar").mouseleave(function(){
    $("#ui-bar").hide();
    });
    });
    I've added css to the .header to make it visible (just a border property) on certain pages using tags.

    I intend for the user to be able to be able to mouse over the header to get to the sidebar on every single page the header is visible, but right now the jQuery only works on the Start page. If I go to another page and then click the back button to get back to Start, then it doesn't work either. I've experimented a bit, tried noConflict() and then getting rid of the document ready function, but predictably, neither worked.

    I tried the exact same thing in Sugarcane as a test and it seemed to work fine, so I'm thinking it's just maybe some special syntax or something I need for SugarCube?

    Anyway, here's a copy of part of my story file, if you need it.

    Thank you! :)
  • Try changing your code to this:

    $("#passages").on("mouseenter", ".header", function() {
    $("#ui-bar").show();
    });
    $("#ui-bar").mouseleave(function() {
    $("#ui-bar").hide();
    });
    That should be all you need code-wise.  The primary changes are:
    [list type=decimal]
    $(document).ready() was dropped, as it's unnecessary (and really shouldn't be used here anyway *).
    The ui-bar showing code was changed to use a delegated handler for .header on the #passages element.  This is necessary because the .header element is deleted and recreated on every passage view, so you can't directly bind an event handler to it unless you do it every time it's recreated, say in PassageDone.  I chose to use a delegated handler to keep your code together in one place.

    * SugarCube's main entry function is handled via $(document).ready(), so I'd refrain from attaching extra functions to it (especially since your trying to do so from within a ready event handler, after the event has already fired).
Sign In or Register to comment.