Using $() to wait for DOMReady isn't sufficient for custom JS #18

Open
mojombo opened this Issue Mar 21, 2010 · 4 comments

Projects

None yet

5 participants

@mojombo
mojombo commented Mar 21, 2010

I tried to apply some custom styles like so:

$(function(){
  $("div.reverse").parent("div.slide").addClass("reversed")
})

But that didn't work. It turns out the Showoff-built DOM elements aren't ready yet, so I had to add a timeout to make it work:

$(function(){
  setTimeout(function() {
    $("div.reverse").parent("div.slide").addClass("reversed")
  }, 500)
})

It would be nice if Showoff had a custom function that could be used in place of $() that is called when the Showoff content is ready.

@ncr
ncr commented Jun 18, 2010

Or a custom event fired at some point on window or document object.

@luniki
luniki commented Aug 3, 2010

I forked showoff to provide such events: luniki/showoff/events (see 1)

I tried to describe the events in the README and added an example in the "example" directory.

Have fun!

@rctay
Collaborator
rctay commented Sep 17, 2010

If you read showoff.js, you'll notice that the initialization code is triggered with a resource load handler (for images, if I'm reading it correctly).

What I did was to monkey-patch centerSlides(), which is in this initialization call path. Not clean, I know, but it works.

This is the example I'm talking about.

@badboy
Contributor
badboy commented Jan 3, 2011

d43b65d introduced a custom event. It's just bound to the wrong element (It's id="preso", not class="preso").

Changing it to $("#preso").trigger("showoff:loaded"); and this code works fine:

$("#preso").live("showoff:loaded", function() {
  console.log("loaded!");
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment