Forums/Community/Community tips & tricks

Uber iFrame Widgets (Zendesk Classic)

Tom Howard
posted this on August 31, 2009 20:30

Want to create an iframe widget to another site, but there isn't enough screen real-estate?  Try this.

Add the following code to a CSS widget

 

.lightbox {
display:none;
}
.lightbox:target {
display:inline;
}
.lightbox .overlay {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:black none repeat scroll 0 0;
display:block;
height:100%;
left:0;
opacity:0.6;
position:fixed;
top:0;
width:100%;
z-index:100;
}
.lightbox .content-frame {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#484848 url(images/loading.gif) no-repeat scroll center center;
border:5px solid white;
position:fixed;
z-index:200;
}
.lightbox .content-frame.text {
height:80%;
left:10%;
top:10%;
width:80%;
}

.lightbox .controls {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:white none repeat scroll 0 0;
border-left:5px solid white;
border-right:5px solid white;
height:22px;
margin:0 -5px;
position:relative;
}
.lightbox .controls.top {
bottom:22px;
}
.lightbox .controls.bottom {
margin-top:-5px;
top:5px;
}
.lightbox .controls.top + .content {
bottom:22px;
position:relative;
}
.lightbox .close-lightbox {
float:right;
margin-left:10px;
font-weight: bold;
text-transform: uppercase;
line-height: 22px;
}
div#container .lightbox .content {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#484848 none repeat scroll 0 0;
color:white;
padding:0;
}
.lightbox .content.image {
height:100%;
width:100%;
}
.lightbox .content-frame.text .content {
height:100%;
width:100%;
}

 

 

Then create a custom widget as follows

 

<p id="showmyiframelink">
    <a href="#showmyiframe">Show My iframe</a>
</p>

<div id="showmyiframe" class="lightbox">
    <div class="overlay"></div>
    <div class="content-frame text">
        <div class="controls top">
            <a class="close-lightbox" href="#showmyiframelink">Close</a>
        </div>
        <div class="content">
            <iframe style="width:100%; height: 100%; border:none;" src="http://www.uber.com">
                <p>Your browser does not support iframes.</p>
            </iframe>
        </div>
    </div>
</div>

 

 

Enjoy!

 

Comments

User photo
Graham Robson
Coherence Design

Stunning again Tom - great work and very useful and generally Zenful!

Notice on slight side effect on a particular usage- If you place the Uber iFrame widget at the tip of the widget column, the iFrame display beneath the other widgets in the column.

September 01, 2009 03:27
User photo
Tom Howard

you've lost me with "place the Uber iFrame widget at the tip of the widget column".  Do you mean make that widget the top one?  I tried that and couldn't reproduce what you describe.  Did I misunderstand?  What browser do you use?

September 01, 2009 04:52
User photo
Graham Robson
Coherence Design

Hi Tom - yes making the widget the top one - I have a screen shot but can't embed it here.

However, mystery solved to some extent, since a browser refresh sorts it out. If you attempt to open the ifame just after you have moved the widget, you get the anomaly I described. It's a temporal browser thing.

September 01, 2009 05:17
User photo
Tom Howard

Cool, but I'll try to reproduce it anyway.

September 01, 2009 21:31
User photo
Neil Whitworth
unimarket

This looks really awesome in Firefox but I just can't get it to work in IE7 or IE8 - is there something I'm missing ?

September 15, 2009 13:08
User photo
Tom Howard

People still use IE? ;)

Yep, so the problem is the use of the :target css pseudo class to tell the lightbox to display.  The technique was copied from <a href="http://windyroad.org/static/css-lightbox/css-lightbox.html ">an old tech demo of mine</a> and the goal was to do lightboxes without javascript.

Since we aren't worried about that restriction here, just add the following JS after the div

<pre>$$('#showmyiframelink a').observe('click', function() { $('showmyiframe').show(); });
$$('#showmyiframe a.close-lightbox').observe('click', function() { $('showmyiframe').hide(); });</pre>

That should do the trick.

September 15, 2009 17:03
User photo
Tom Howard

Hmmm.. wish there was an edit comment button, so I could remove the html elements in my previous comment.

September 15, 2009 17:05
User photo
Neil Whitworth
unimarket

Thanks for the quick response Tom - yes there are some dinosaurs still using IE :)

I was using a tacky workaround so that our IE users could still get a link, but other browser users would get the lightbox :

<!--[if IE]>
    <a href="http://maps.google.com" target="_blank">Google !</a>
<![endif]-->

<!--[if !IE]>-->
Your cool lightbox stuff

<!--<![endif]-->

 

But now I'll try your suggestion instead.


 

September 15, 2009 17:47
User photo
Neil Whitworth
unimarket

Hmm - I'm getting this error:

Message: Object doesn't support this property or method
Line: 240
Char: 1
Code: 0
URI: http://unimarket.zendesk.com/home


Message: Object required
Line: 89
Char: 3
Code: 0
URI: http://www.unimarket.com/js/scripts/prototype.lite.js

For completeness this is my custom widget  :

<p> <b>Western Institute of Technology signs with Unimarket</b></p>

<p id="showmyiframelink">
    <a href="#showmyiframe">Show me more Unimarket News !</a>
</p>
<div id="showmyiframe" class="lightbox">
    <div class="overlay"></div>
    <div class="content-frame text">
        <div class="controls top">
            <a class="close-lightbox" href="#showmyiframelink">Close</a>
        </div>
        <div class="content">
            <iframe style="width:100%; height: 100%; border:none;" src="http://www.unimarket.com/index.php?page=news_all">;
                <p>Your browser does not support iframes.</p>
            </iframe>
        </div>
    </div>
</div>
<script type="text/javascript">
$$('#showmyiframelink a').observe('click', function() { $('showmyiframe').show(); });
$$('#showmyiframe a.close-lightbox').observe('click', function() { $('showmyiframe').hide(); });
</script>

September 15, 2009 18:51
User photo
Tom Howard

OK, here we go. Uber iframe goodness, tested in IE6, Firefox 3.5 and Safari 4.

Global CSS Widget:

.lf-container .lf-overlay {
    background:black none repeat scroll 0 0;
    display:block;
    height:100%;
    left:0;
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
    padding: 0;
    margin: 0;
}

.lf-container .lf-frame {
    position:fixed;
    z-index:200;
    height:80%;
    left:10%;
    top:10%;
    width:80%;
}

.lf-container .lf-controls {
    height:27px;
    position:relative;
    bottom:22px;
}

.lf-container .lf-controls a {
    background:white none repeat scroll 0 0;
    float:right;
    border-left: solid white 5px;
    border-right: solid white 5px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 22px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-box-shadow: 0px 5px 5px #444;
    -webkit-box-shadow: 0px 5px 5px #444;
    -moz-box-shadow: 0px 5px 5px #444;
    -webkit-box-shadow: 0px 5px 5px #444;
    z-index: 250;
}

.lf-container iframe {
    border: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position:relative;
    bottom:27px;
    border: solid white 5px;
    background:#484848;
    z-index: 300;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0px 5px 5px #444;
    -webkit-box-shadow: 0px 5px 5px #444;
}

.lf-container .lf-overlay {
    _position:absolute;
    _top:expression(eval(document.documentElement.scrollTop));
    _left:expression(eval(document.documentElement.scrollLeft));
    _width:expression(eval(document.viewport.getWidth()));
    _height:expression(eval(document.viewport.getHeight()));
}

.lf-container .lf-frame {
    _position:absolute;
    _top:expression(eval(document.documentElement.scrollTop + document.viewport.getWidth()*0.1));
    _left:expression(eval(document.documentElement.scrollLeft + document.viewport.getHeight()*0.1));
    _height:expression(eval(document.viewport.getHeight()*0.8));
    _width:expression(eval(document.viewport.getWidth()*0.8));
}

Global JS Widget:

Event.observe( document, 'dom:loaded', function() {
    var lightframes = $$('a.lightframe');
    lightframes.each( function(item) {
        item.observe('click', function(event) {
            var container = new Element('div', {'class': 'lf-container'});
           
            var overlay = new Element('div', {'class': 'lf-overlay'});
            overlay.setOpacity(0.6);
           
            container.insert(overlay);
       
            var frame = new Element('div', {'class': 'lf-frame'});
   
            var controls = new Element('div', {'class': 'lf-controls'});
           
            var close = new Element('a', {'href': '#'});
            close.insert("×");
            controls.insert(close);
           
            frame.insert(controls);

            frame.insert(new Element('iframe', {'src': this.href}));
   
            container.insert(frame);
           
            item.insert({
                  after: container
            });
           
            close.observe('click', function(event) {
                container.remove();
                event.stop();
            });


            event.stop();
        });
    });
});

 

You can now create uber iframes as follows:


<a href="http://maps.google.com" class="lightframe"/>

 

Enjoy.

September 20, 2009 23:08
User photo
Tom Howard

oops.  That was meant to be

<a href="http://maps.google.com" class="lightframe">Show Maps</a>

September 20, 2009 23:09
User photo
Graham Robson
Coherence Design

Well done Tom!

IE6 a pain the **** but my site sats are still indicating 18% still using IE6, so like it or not it is still part of the landscape.

September 20, 2009 23:14
User photo
Neil Whitworth
unimarket

Yes - well done Tom !  This worked a charm - really appreciate it, you've made my Help desk look great! 

September 21, 2009 13:08
User photo
Tom Howard
windyroad

Small improvement.  Add the following line:

            if( event.isMiddleClick() ) return;

after

        item.observe('click', function(event) {

to add the ability to open the page in a new tab by middle clicking.

September 21, 2009 18:30
User photo
Dylan
digitalvault

Hi there,

I'm a bit of a newbie with this CSS stuff, wondering if you could help me make this work.  I have created the Global CSS widget but not sure how to make it do it's thing.  I created an html code widget with the code specified:

 

<a href="http://maps.google.com" class="lightframe">Show Maps</a>

 

but nothing seems to happen.  It just takes me to the GoogleMaps site.

May 26, 2010 22:23
User photo
Lisa Dileo

Hi All, need you urgent help.

I created my CSS widget as below, and the Custom widget (as below that)): nothing happens, I get a blank screen - can you assist in which version I should use?

CSS:

.lf-container .lf-overlay {
    background:black none repeat scroll 0 0;
    display:block;
    height:100%;
    left:0;
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
    padding: 0;
    margin: 0;
}

.lf-container .lf-frame {
    position:fixed;
    z-index:200;
    height:80%;
    left:10%;
    top:10%;
    width:80%;
}

.lf-container .lf-controls {
    height:27px;
    position:relative;
    bottom:22px;
}

.lf-container .lf-controls a {
    background:white none repeat scroll 0 0;
    float:right;
    border-left: solid white 5px;
    border-right: solid white 5px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 22px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-box-shadow: 0px 5px 5px #444;
    -webkit-box-shadow: 0px 5px 5px #444;
    -moz-box-shadow: 0px 5px 5px #444;
    -webkit-box-shadow: 0px 5px 5px #444;
    z-index: 250;
}

.lf-container iframe {
    border: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position:relative;
    bottom:27px;
    border: solid white 5px;
    background:#484848;
    z-index: 300;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0px 5px 5px #444;
    -webkit-box-shadow: 0px 5px 5px #444;
}

.lf-container .lf-overlay {
    _position:absolute;
    _top:expression(eval(document.documentElement.scrollTop));
    _left:expression(eval(document.documentElement.scrollLeft));
    _width:expression(eval(document.viewport.getWidth()));
    _height:expression(eval(document.viewport.getHeight()));
}

.lf-container .lf-frame {
    _position:absolute;
    _top:expression(eval(document.documentElement.scrollTop + document.viewport.getWidth()*0.1));
    _left:expression(eval(document.documentElement.scrollLeft + document.viewport.getHeight()*0.1));
    _height:expression(eval(document.viewport.getHeight()*0.8));
    _width:expression(eval(document.viewport.getWidth()*0.8));
}

CUSTOM

<p> <b>USSD Dashboard</b></p>

<p id="showmyiframelink">
    <a href="#showmyiframe">Show the USSD Dashboard !</a>
</p>
<div id="showmyiframe" class="lightbox">
    <div class="overlay"></div>
    <div class="content-frame text">
        <div class="controls top">
            <a class="close-lightbox" href="#showmyiframelink">Close</a>
        </div>
        <div class="content">
            <iframe style="width:100%; height: 100%; border:none;" src="http://www.google.com">;
                <p>Your browser does not support iframes.</p>
            </iframe>
        </div>
    </div>
</div>
<script type="text/javascript">
$$('#showmyiframelink a').observe('click', function() { $('showmyiframe').show(); });
$$('#showmyiframe a.close-lightbox').observe('click', function() { $('showmyiframe').hide(); });
</script>

August 21, 2012 03:29
User photo
Lisa Dileo

Another question: can one make the iFrame scrollable?

In other words if we pull in a source website / the likes, can that then be scrollable within the iFrame?

August 21, 2012 05:20
User photo
Adam
Zendesk

Hi Everyone (and @Lisa):

 

Here's the thing: you can't load google in an iFrame. They specifically block it. I'm going to update the post and change the link to something else. In the meantime, change the SRC on the iframe tag like so:

 

<iframe style="width:100%; height: 100%; border:none;" src="http://www.uber.com">;

August 21, 2012 10:31
User photo
Lisa Dileo

Great, let me try this & will let you know! Many thanks!

August 21, 2012 22:18
User photo
Lisa Dileo

This works well for other sites, thank you!
I still do have 3 questions:
1) I have created both suggested versions of the CSS widget and they are both active: how do I know which one is actually referenced? I deactivated each seperately & tested, and the custom widget iFrame still works: how do I decide which CSS widget to leave active?
2) Can you direct a particular CSS widget to work with a Particular Custom Widget - like a pair / set? (if yes, where do I define this?).
3) If I have 2 seperate Custom Widgets ussing the CSS Widget to enable iFrames,  they work fine if I add them to different pages, but as soon as I have both widgets on one page, they default to whichever one was loaded first (ie. the reference site) - perhaps the answer lies in my 1st quesiton?
rgds, Lisa

August 21, 2012 23:01
User photo
Lisa Dileo

Hi all, thanks I got the answers on 2 & 3. Just need to resolve Q1.

August 22, 2012 00:48
User photo
Adam
Zendesk

This ticket was closed and merged into ticket #256490 "Uber iFrame Widgets (CSS + Custom)".

August 23, 2012 09:19