LinkedIn Facebook Twitter


Preview your projects in an Iframe

March 27th, 2011 | Css3 , Javascript , Tips and Tricks , Tutorials

If you like the way I preview my projects on my works page, you will definitely gonna be interested with the code below.


This is how my works page look after launching a project


Source Code

<!DOCTYPE html>
	<title>View your projects in Iframe</title>
	<link rel="stylesheet" href="css/view-project.css" />
	<!--Overlay Container-->
	<div id="project-frame-container">
		<iframe id="project-frame" src=""></iframe>
		<div id="back-to-projects"><a href="">&larr; BACK TO PROJECTS</a></div>
	<!--Projects List-->
	<a class="view-project" href="http://google.com">Project 1</a><br />
	<a class="view-project" href="http://djhero.com">Project 2</a>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script src="js/view-project.js"></script>
/*Overlay Container*/
	display: none;

/*Black Bar*/
	position: fixed;
	background: #000;
	box-shadow: 0 0 10px #000;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 99;

/*Back Button*/
#back-to-projects a {
    display: block;
    float: left;
    margin: 10px;
    padding: 5px 20px;
    background: #FFCC00;
    color: #000;
    text-decoration: none;

#back-to-projects a:hover {
    color: #fff;

    position: fixed;
	background: #000;
    width: 100%;
    height: 100%;
    top: 45px;
    left: 0;
    overflow: auto;
    z-index: 99;

/*Hide Vertical Scrollbar*/
.oyh {
	overflow-y: hidden;
	/* Show container and load url */
		var href = $(this).attr('href');
		$('#project-frame').attr("src", href);
		$('body').addClass('oyh'); //Hide body's vertical scrollbar 
		return false;
	/* Hide container */
		$("#project-frame").attr('src', '');
		return false;

Responses to "Preview your projects in an Iframe"

  1. Josh says:

    This is great, thanks for sharing!

Leave a Reply