CODEWITHSUNDEEP
javascriptjqueryruby-on-rails-3facebookfacebox
CodeWombat
CodeWombat

Reputation: 778

Show spinner while loading an iframe in a facebox

I am using jQuery facebox to open a new window for authenticating Facebook users with Devise/Omniauth in my rails app.

At first I wanted to simply load this in a div like so:

$('#facebook-auth').live 'click', ->       
  $.facebox '<div id="foo"></div>'
  $('#foo').load $(this).attr 'href'
  false

But the problem is that this will not work because there are multiple redirects. The first link opens /auth/facebook, which redirects to graph.facebook.com, which redirects back to my callback url, which finally redirects to a confirmation page. I need to display the confirmation page to the user. The way I have it working right now is by opening an external window like this:

$('#facebook-auth').live 'click', ->
  width = 600
  height = 400
  left = (screen.width / 2) - (width / 2)
  top = (screen.height / 2) - (height / 2)
  window.open $(this).attr('href'), 'authPopup', "menubar=no,toolbar=no,status=no,width=#{width},height=#{height},toolbar=no,left=#{left},top=#{top}"
  false

Is there a way for me to open a new window and load its contents in the facebox? Or is there a better approach?

Edit

Thanks to Jared's suggestion I was able to do this using an iFrame mod from here. See this jsFiddle. However I would like to show the loading spinner while the iframe content is loading. Is this possible? According to the documentation, the way to do it normally is like this:

$(".badge").live "click", ->
  $.facebox ->
    $.get "page.html", (data) ->
      $.facebox data
  false

But I'm not sure how to do this with the iframe mod.

Upvotes: 13

Views: 8508

Answers (2)

Richard Andrew Lee
Richard Andrew Lee

Reputation: 1177

try this css trick.. is this what you are trying to do?

http://jsfiddle.net/7CBjn/3/

iframe {
    background-image: url("http://jimpunk.net/Loading/wp-content/uploads/loading2.gif");   
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

Upvotes: 35

Guard
Guard

Reputation: 6955

Well, you can probably show a spinner, then constantly check if an iframe finished loading, or use iframe's onload event handler.

Not completely sure how will it work with redirects, but you could try smth like that.

Upvotes: 0

Related Questions