Update(22/05/13): The data will be sent as URL vars (method="get") and everyone can share directly submitted URL
A Pen by Mario Vidov on CodePen.
Update(22/05/13): The data will be sent as URL vars (method="get") and everyone can share directly submitted URL
A Pen by Mario Vidov on CodePen.
<div id="wrapper"> | |
<div id=goTo> | |
<a href="" target="_blank">Go to the website</a> | |
</div> | |
<div class="devices"> | |
<div class="desktop"> | |
<iframe id="desktop"></iframe> | |
</div> | |
<div class="tablet"> | |
<iframe id="tablet"></iframe> | |
</div> | |
<div class="mobile"> | |
<iframe id="mobile"></iframe> | |
</div> | |
</div> | |
<div class="url"> | |
<form method="get"> | |
<input id="getURL" placeholder="http://www." name="rwdURL" /> | |
</form> | |
</div> | |
</div> |
$(function() { | |
if(document.URL.indexOf("?rwdURL") > -1) { | |
var AddressURL = document.URL.indexOf("?"); | |
var ParamURL = document.URL.substr(AddressURL+8); | |
ParamURL = unescape(ParamURL); | |
if (ParamURL.match(/^http:/)) { | |
$("iframe").attr("src", ParamURL); | |
goTo(); | |
} | |
else { | |
$("iframe").attr("src", "http://" + ParamURL); | |
goTo(); | |
} | |
} | |
else { | |
var srcURL = "http://vidov.it"; | |
$("iframe").attr("src", srcURL); | |
} | |
function goTo() { | |
if (ParamURL.match(/^http:/)) { | |
setTimeout(function(){ | |
$("#goTo a").attr("href", ParamURL); | |
$("#goTo").slideDown("slow"); | |
}, 2000); | |
} | |
else { | |
setTimeout(function(){ | |
$("#goTo a").attr("href","http://" + ParamURL); | |
$("#goTo").slideDown("slow"); | |
}, 2000); | |
} | |
} | |
function UpdateFrame() { | |
var getURL = $("#getURL").val(); | |
getURL = unescape(getURL); | |
if (getURL.match(/^http:/)) { | |
$("iframe").attr("src", getURL); | |
goTo(); | |
} | |
else { | |
var validURL = "http://" + getURL; | |
$("iframe").attr("src", validURL); | |
goTo(); | |
} | |
} | |
$("#getURL").keypress(function(e){ | |
if(e.which == 13){ | |
UpdateFrame(); | |
} | |
}); | |
}); |
@import url(http://fonts.googleapis.com/css?family=Press+Start+2P); | |
* { | |
margin: 0; | |
padding: 0; | |
} | |
body { | |
background: #A7A7A7; | |
overflow-x: hidden; | |
font-family:'Press Start 2P', cursive; | |
width: 960px; | |
margin: 0 auto; | |
position: relative; | |
} | |
#wrapper { | |
width: 700px; | |
margin: 0 auto; | |
padding-top: 20px; | |
} | |
#goTo { | |
display: none; | |
background: #0096CF; | |
cursor: pointer; | |
font-size: 12px; | |
position: absolute; | |
right: -50px; | |
top: 0; | |
width: 120px; | |
text-align: center; | |
padding: 5px; | |
border-radius: 0 0 5px 5px; | |
} | |
#goTo a { | |
opacity: .6; | |
transition: opacity 1s; | |
text-decoration: none; | |
outline: none; | |
color: #FFF; | |
} | |
#goTo a:hover, #goTo a:visited, #goTo a:focus { | |
opacity: 1; | |
text-decoration: none; | |
outline: none; | |
} | |
#logo { | |
position: absolute; | |
left: -120px; | |
} | |
.devices { | |
position: relative; | |
height: 575px; | |
overflow: hidden; | |
} | |
iframe { | |
transform-origin: top left; | |
margin: 0; | |
padding: 0; | |
position: relative; | |
background-color: #fff; | |
} | |
.mobile { | |
background: url(http://i41.tinypic.com/332846d.png) no-repeat -278px -479px; | |
position: absolute; | |
width: 130px; | |
height: 251px; | |
top: 330px; | |
left: 520px; | |
z-index: 3; | |
} | |
.mobile iframe { | |
width: 320px; | |
height: 480px; | |
top: 42px; | |
left: 10px; | |
transform: scale(0.332); | |
} | |
.tablet { | |
background: url(http://i41.tinypic.com/332846d.png) no-repeat 0 -470px; | |
width: 264px; | |
height: 348px; | |
z-index: 2; | |
position: absolute; | |
top: 227px; | |
} | |
.tablet iframe { | |
width: 768px; | |
height: 1024px; | |
top: 36px; | |
left: 26px; | |
transform: scale(0.273); | |
} | |
.desktop { | |
position: absolute; | |
width: 594px; | |
height: 457px; | |
background: url(http://i41.tinypic.com/332846d.png) no-repeat 0 0; | |
top: 0px; | |
left: 100px; | |
} | |
.desktop iframe { | |
transform: scale(0.342); | |
left: 21px; | |
top: 26px; | |
width: 1600px; | |
height: 900px; | |
} | |
.url { | |
margin: 10px 0; | |
padding: 30px 30px 0 30px; | |
} | |
.url input { | |
font-size: 20px; | |
font-family:'Press Start 2P', cursive; | |
width: 625px; | |
padding: 5px; | |
border: 2px solid #ff6400; | |
border-radius: 5px; | |
color: #0096cf; | |
opacity: .6; | |
} | |
.url input:focus { | |
opacity: 1; | |
} |