< BACK TO POST
LinkedIn Facebook Twitter

Blog

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.

Screenshot

This is how my works page look after launching a project

DEMO DOWNLOAD

Source Code

<!DOCTYPE html>
<html>
<head>
	<title>View your projects in Iframe</title>
	<link rel="stylesheet" href="css/view-project.css" />
</head>
<body>
	
	<!--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>
	</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>
</body>
</html>
/*Overlay Container*/
#project-frame-container{
	display: none;
}

/*Black Bar*/
#back-to-projects{
	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;
}

/*Iframe*/
#project-frame{
    position: fixed;
	background: #000;
    width: 100%;
    height: 100%;
    top: 45px;
    left: 0;
    overflow: auto;
    z-index: 99;
}

/*Hide Vertical Scrollbar*/
.oyh {
	overflow-y: hidden;
}
$().ready(function(){
	
	/* Show container and load url */
	$('.view-project').click(function(){
		var href = $(this).attr('href');
		$('#project-frame').attr("src", href);
		$('body').addClass('oyh'); //Hide body's vertical scrollbar 
		$('#project-frame-container').fadeIn();
		return false;
	});
	
	/* Hide container */
	$('#back-to-projects').click(function(){
		$("body").removeClass("oyh");
		$('#project-frame-container').fadeOut();
		$("#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