/    Sign up×
Community /Pin to ProfileBookmark

click a link in one page, open another html page with sliding effect

Copy linkTweet thisAlerts:
Oct 07.2013

Hello,

I need help. How to do, when I clik link such as (click here for more info) in index page, which is I use full page image with link, then it will open another html page with sliding effect. means click link, the next page slide in vertically.

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@jedaisoulOct 08.2013 — Split the problem in to two parts:

  • 1. Standard link in page A to display page B in a new tab or window (target="_blank").

  • 2. Use Javascript (or HTML5?) to slide page B into view.


    • However, if you meant that you want the new page to slide in [i]over the old page[/i], that will not do what you want.
    Copy linkTweet thisAlerts:
    @priyankagoundOct 09.2013 — you can try something like:

    loading your target content within an iframe

    or, use ajax method to load content

    or, make a sliding effect with your previously loaded content

    You can use .load() as used in the below example:

    $('#target_container').load('YOUR_URL', function() {

    // do something

    });

    Another approach is ,can use .ajax() like following:

    $.ajax({

    url: 'YOUR_URL'.

    dataType: 'html',

    success: function(response) {

    $('#target_container').html(response);

    }

    });

    Hope this helps.
    ×

    Success!

    Help @aelynne spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.4,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...