jquery cargar y animar iframe con contenido

Estoy tratando de lograr un efecto de deslizamiento de contenido (y flexibilización) en un botón de menú cuando se hace clic. Sería para un sitio normal con contenido diferente (galería, portafolio, videos, etc.) y submenús en algunas páginas que se deslizarían.

He aprendido sobre todos los complementos deslizantes (como el control deslizante de coda) que se deslizan a través de divs pre cargados y ocultos. pero me preocupa que si cargo todo el sitio web en la primera página, simplemente suene mal. por otro lado, hacerlo con iframes y cargar datos con load () no estoy seguro de que pueda deslizar y facilitar los datos (como el ejemplo 8 del control deslizante de coda).

¿Alguien ha hecho esto antes o tuvo la misma idea y no le importaría compartirla? sería muy apreciado!

http://www.ndoherty.biz/demos/coda-slider/2.0/#2

Actualmente estoy trabajando en una función similar para nuestra API. I y cargando un div de menú con filas de enlaces que llevan el contenido de ajax a un div de “vista”, luego animo el menú y luego animo la vista al iFrame principal. Esto fue tan fácil de hacer, así que echa un vistazo a algunos de mis javascript y html a continuación. Cuando suba esto, volveré y actualizaré la respuesta. Puedes investigar el producto terminado. Espero que esto ayude.

 
<% if @matches %> <% @matches.each do |match| %> <%= render :partial => 'plugins/live/clubs/matches_list_item', :locals => {:match => match} %> <% end %> <% else %> There are currently no matches to display <% end %>
x

MatchHolder se usa para mostrar el contenido y el contenido cargados y se le asigna una posición de -600px, por lo que se oculta fuera de la parte superior del iFrame. Entonces hago una llamada para obtener la tarjeta de puntuación para un partido

 $(function() { // click event fired to change to the match view window $('.matchLink').click(function(event) { if (!clicked) { clicked = true; // stop click reptition event.preventDefault(); var live = ($(this).attr('live') == 'true') ? true : false; var matchId = Number($(this).attr('id')); $('#matchesListHolder').animate({top: -600}, 500, function() { $(this).hide(); $('#spinner').show(); if (live) { displayLiveMatch(matchId); } else { displayMatch(matchId); } }); } }); // click function on the close button when the match view window is open $('#closeMatchView').click(function() { closeMatchView(); }); }); // display a scorecard for a finished match function displayMatch(id) { $.get('/plugins/matches/scorecard/' + id, function(response) { $('#matchHolder').empty().html(response); moveDownMatchHolder(); }); } // move down the match holder container into the iframe function moveDownMatchHolder() { $('#spinner').hide(); $('#matchHolder').show().animate({top: 0}, 500, function() { $('#closeMatchView').show(); }); } // close the match view and re open the matches list function closeMatchView() { $('#closeMatchView').hide(); clicked = false; $('#matchHolder').animate({top: -600}, 500, function() { $(this).hide(); $('#matchesListHolder').show().animate({top: 0}, 500, function() { }); }); } 

Todo muy suelto en este momento, pero espero que esto le dé una indicación de dónde comenzar y de que es posible hacerlo. Gracias.

Escribí el control deslizante Coda, y recientemente también escribí el control deslizante líquido , que es la versión receptiva del control deslizante Coda.

También escribí un breve tutorial sobre cómo puede cargar feeds de Twitter después de hacer clic en un panel, utilizando Ajax. Espero que esto ayude…

http://liquidslider.kevinbatdorf.com/tutorials/dynamically-add-content-to-a-panel-when-clicked-using-ajax/

    Intereting Posts