1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

External pages in XenForo overlays?

Discussion in 'XenForo Questions and Support' started by chrishill, Dec 8, 2012.

  1. chrishill

    chrishill Active Member

    How can I open another page in an xenforo overlay? What code should I use?

    I also want it to be a callToAction button that opens it up.
     
  2. MsJacquiiC

    MsJacquiiC Well-Known Member

    Jake Bunce and chrishill like this.
  3. chrishill

    chrishill Active Member

  4. MsJacquiiC

    MsJacquiiC Well-Known Member

    Jake Bunce likes this.
  5. chrishill

    chrishill Active Member

  6. MsJacquiiC

    MsJacquiiC Well-Known Member

    Yes - however, one drawback is that only one link/page per overlay.php -- so if you have 2-3-4 pages - you'd need overlay2.php - overlay3.php - overlay4.php and so forth.
     
    Jake Bunce and chrishill like this.
  7. chrishill

    chrishill Active Member

    Wait it doesn't work because the overlay is tiny and can't display anything....

    Trying to test by loading Google: http://puu.sh/1zaBE
     
  8. MsJacquiiC

    MsJacquiiC Well-Known Member

    You'll need to make edits via css to display the contents of the iframe as whatever size you like. Here's the contents of my overlay.php

    PHP:
    <?php
     
    if (!isset($_GET['url']) || !isset($_GET['_xfResponseType']) || $_GET['_xfResponseType'] != 'json')
    {
        
    header('HTTP/1.1 404 Not Found');
        echo 
    'Invalid parameters.';
    }
    else
    {
        
    $url $_GET['url'];
        
    $data = array(
            
    'templateHtml' => '<form id="DemoOverlay" class="xenForm formOverlay"><div class="DemoContainer"><iframe style="width:620px; height:490px; border-width: 0; border-style: none;" src="' htmlspecialchars($url) . '"></iframe></div></form>',
            
    'css' => '',
            
    'js' => '',
            
    'title' => isset($_GET['title']) ? $_GET['title'] : 'Like JPiC Forum on Facebook',
        );
        echo 
    json_encode($data);
    }
     
    ?>
    You'll notice the width/height attributes are defined. You could likely add the style to your EXTRA.css and define the iframe class. That'd make the code tidier.

    Then call the overlay.php by similar html code in your template:

    HTML:
    <a href="http://jpicforum.info/facebook/likebox.html" title="Like JPiC Forum" data-href="overlay.php?url=http://jpicforum.info/facebook/likebox.html" class="OverlayTrigger navlike"/>
    HTH ;)

    J.
     
    rafass, otto and Jake Bunce like this.
  9. chrishill

    chrishill Active Member

    Ah I see, thanks for the help! I'll try this out tomorrow. :D
     
    MsJacquiiC likes this.
  10. chrishill

    chrishill Active Member

    Hmm I think I got it, but how would you add something like this to extra.css?
     

Share This Page