/    Sign up×
Community /Pin to ProfileBookmark

Make div/ Iframe full-screen/ revert to original size i.e. like YouTube videos

Copy linkTweet thisAlerts:
May 28.2009

Hi I am very new to JavaScript I have only copied and pasted and made work one code example from this language before.

At the moment I have my index page with an Iframe centred within this page.

When a user interacts on the index page they can load external web pages or movies into the Iframe.

For movies I use the LongTailVideo Player which is great as the user can click the full-screen option and it covers both the Iframe and the index page utilising the whole monitor.

How would I achieve this affect with external web-pages so readers have the option to make the Iframe content full-screen and then close full-screen mode to interact again with the index page (like movie player).

So…

  • 1.

    (Optional). Using an Iframe is the pre-JavaScript method I am aware that this needs replacing using div and JavaScript control, this is first request please.

  • 2.

    Secondly the issue at hand in making the DIV/ Iframe scalable to full-screen and then revert back to it original size using full-screen/ original screen button/ menu.

    • I may well need redirecting in this approach I understand this. Any criticism welcomed as-long as it swiftly becomes constructive ?

    Thanks in advance,

    Sem White.

    to post a comment
    JavaScript

    3 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @semioticallyauthorMay 28.2009 — If you decline, I won't hesitate to use another frame...

    or maybe I'll get so bored 'Java: the Definitive Guide' will look interesting...

    Ok I did glance at the other O'Reilly 'JavaScript & DHTML Cookbook,' Chapter 6.11: Simulating a Window with Layers... maybe this is the right path ? ... ... ...

    Even though a Cookbook I wouldn't say quick fix (albeit I have the code in pdf), anyways will persevere....
    Copy linkTweet thisAlerts:
    @semioticallyauthorJun 23.2009 — Hey everyone,

    my website is semiotically.com, and yes it's a personal site ?

    I have time to dedicate to this issue now so hopefully can fulfill this.

    There are 2 issues.

  • 1. At the right-hand side of the page is an 'menu' with environment; possessions; perspectives; hair. When clicked they load images in an external IFrame page just right of the menu. These individual images once clicked load pages (sometimes my own/ mostly external) within the main centre frame (typically there are a couple of exceptions that load new tabs). Please try this if you wish to be sure.


    • I need to create a javascript that as well as opening the main centre frame also can affect the IFrame directly beneath the centre frame: i.e. affect 2 frames simultaneously. At the moment this is causing diffulties as the side-menu loads separate Iframe pages from the index meaning Framesets are currently inviable. I could contain images in individual frames that all are contained within the index page (like other 2 frames) allowing use of Framesets though this would entail many frames and perhaps a more elegant code is available for the current setup.

  • 2. Once this is set-up I will try codes to resize the Centre Iframe to full window, i.e. reload the Iframe to full-screen if the user wishes to enlarge the centre Iframe (and can then navigate back using the 'back' in browsers)/ alternatively just open the IFrame in new tab, by use of the Frame beneath the Centre Frame. This part will be quite easy I think once Part 1 is in place.


    • Please let me know how I can navigate Part 1.

    Thanks in advance,

    Sem.
    Copy linkTweet thisAlerts:
    @semioticallyauthorJun 24.2009 — If unsure please question me, I think once people see the site the issue is quite easily visualised: interacting the 3 frames.

    Please respond if available, you will have my undivided attention, thank you.
    ×

    Success!

    Help @semiotically 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.17,
    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: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

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