RSS

Tiny class for an easy IFrame shim

06 May

Recently I had to add IFrame shims to several projects and I quite like the idea of darking the background and focusing user’s attention on particular part of the form. I have created a very simple tiny class that creates the shim and brings up a div or any other element you would want to show.

 
//constructor takes 2 parameters: 
//ID of the shim. If element with specified ID doesn't exist it will be created and added to the end of body element 
//Second parameter is the boolean true/false value that says if the IFrame should be used for the shim
var shim = function(shimId,addIframe){
	//Function that gets current document height and width. Used to stretch the shim to the very bottom of the page 
        var getHeightWidth = function(){
		if( window.innerHeight && window.scrollMaxY )  {
			pageWidth = window.innerWidth + window.scrollMaxX;
			pageHeight = window.innerHeight + window.scrollMaxY;
		}
		else if( document.body.scrollHeight > document.body.offsetHeight )	{
			pageWidth = document.body.scrollWidth;
			pageHeight = document.body.scrollHeight;
		} else { 
			pageWidth = document.body.offsetWidth + document.body.offsetLeft; 
			pageHeight = document.body.offsetHeight + document.body.offsetTop; 
		}
		return [pageWidth,pageHeight]
	}
	var windowSize = getHeightWidth();
	var getWindowSize = function(){	return windowSize; }
	//Function creates the shim and IFrame if required
	var createShim = function(){
		shimDiv = document.createElement('div');
		shimDiv.id = shimId;
		shimDiv.style.position = 'absolute';
		shimDiv.style.top = 0;
		shimDiv.style.left = 0;
		shimDiv.style.width = "100%";
		shimDiv.style.height = getWindowSize()[1]>600 ? getWindowSize()[1]+ 'px' : "100%";
		shimDiv.style.display = 'none';
		shimDiv.style.backgroundColor = '#000';
		shimDiv.style.opacity = '0.75';
		shimDiv.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=75)';
		document.body.appendChild(shimDiv);   
	
		if(addIframe) {
			var iframe = document.createElement('iframe');
			iframe.id = shimId+'_iframe';
			iframe.style.position = 'absolute';
			iframe.style.top = 0;
			iframe.style.left = 0;
			iframe.style.width = "100%";
			iframe.style.height = getWindowSize()[1]>600 ? getWindowSize()[1]+ 'px' : "100%";
			iframe.style.display = 'none';
			iframe.style.backgroundColor = '#000';
			iframe.style.opacity = '0.1';
			iframe.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=10)';
			iframe.setAttribute("src", "javascript:false");
			document.body.appendChild(iframe);     
		}   
	}
	//Function that makes shim visible
	this.showShim = function(showElem,zindex){
		shimDiv.style.display = 'block';
		shimDiv.style.zIndex = zindex - 1;
		if(document.getElementById(shimDiv.id+'_iframe')) {
                      document.getElementById(shimDiv.id+'_iframe').style.display = 'block';                     
                      document.getElementById(shimDiv.id+'_iframe').style.zIndex = zindex - 2;
                }
		var showElem = document.getElementById(showElem);
		showElem.style.position = 'absolute';
		showElem.style.display = 'block';
		showElem.style.left = (Math.round(getWindowSize()[0]/2) - Math.round(showElem.offsetWidth/2))-15+'px';
		showElem.style.top = '200px';(Math.round(document.body.offsetHeight/2) - Math.round(showElem.offsetHeight/2))+'px';
		showElem.style.zIndex = zindex;
	}
        //Function hides the shim
	this.hideShim = function(showElem){
		shimDiv.style.display  = 'none';
		if(document.getElementById(showElem)) 
                      document.getElementById(showElem).style.display = 'none';
		if(document.getElementById(shimDiv.id+'_iframe')) 
                      document.getElementById(shimDiv.id+'_iframe').style.display = 'none';
	}
	this.shimDiv = (document.getElementById(shimId)) ? document.getElementById(shimId): createShim();	
}

Shim will be created only once and then the existing link to the object will be used. Class works in IE6 as long as in IE7, last Opera, FF and Chrome.

Class is very simple but can be useful. Will be updated soon 😉

Advertisements
 
4 Comments

Posted by on May 6, 2009 in CSS, HTML, JavaScript

 

Tags: ,

4 responses to “Tiny class for an easy IFrame shim

  1. jamessye

    May 24, 2009 at 10:32 am

    so can an iframe be put on a regular wordpress.com blog? I’m novice as far as iframes and css and whatnot.. However, I’d like to put a few iframes on my blog. Any help would be appreciated…

    Thanks

     
  2. Dasha

    May 25, 2009 at 7:50 am

    Where exactly you want to add IFrame? Do you have Wordpess running on your hosting or on wordpress.com?

     
    • jamessye

      May 25, 2009 at 9:58 am

      I’m hosting on wordpress.com

      I wanted to put it here: http://wheniwrite.com/inthenews/

      but I’m not sure if wordpress.com lets you do that or intergrate an rss feed directly on my blog…

       
      • Dasha

        May 26, 2009 at 6:47 pm

        I don’t think they will let you add any javascript to the page 😦

         

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: