jquery load and animate iframe with content

Question

I'm trying to achieve an effect of content sliding (and easing) in a menu button when it is clicked. It would be for a normal site with different content (gallery, portfolio, videos, etc) and submenus on some pages that would slide in.

I have learned about all the sliding plugins (like coda slider) that slide through pre loaded and hidden divs. but i have concerns that if i load the whole website on the first page, that just sound wrong. on the other hand doing it with iframes and loading in data with load() i'm unsure i can slide and ease the data in (like coda slider example 8).

has anyone done this before or had the same idea and wouldn't mind sharing? would be greatly appreciated!

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

Answer 1

I am currently working on a similar feature for our api. I and loading a menu div with rows of links which pull ajax content into a"view" div, I then animate the menu away and then animate the view into the main iFrame. This was so easy to do so check out some of my javascript and html bellow. When I push this up i'll come back and update the answer you you can have a dig around the finished product. Hope this helps.

<!-- list all the available matches first -->
    <div id="MatchContainer">
        <div id="spinner"></div>
        <div id="matchesListHolder">
            <% 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 %>
        </div>
        <div id="matchHolder">

        </div>
        <div id="closeMatchView">x</div>
    </div>

The matchHolder is used to display the loaded and content and is given a -600px position so its hidden outside the top of the iFrame. Then I make a call to get the scorecard for a match

$(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() {

        });
    });
}

All very loosely put together at the moment but I hope this gives you an indication of where to start and that it is possible to do it. Thanks.

Answer 2

I wrote the Coda Slider, and have recently also wrote the Liquid Slider, which is the responsive version of the Coda Slider.

I also wrote a short tutorial about how you can load Twitter feeds after a panel is clicked, using Ajax. I hope this helps...

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