1 Attachment(s)
Using iFrame to test your mobile in different screens
yeah, took me 15 min to done it.. the point of it to test your web in different W and H.
index:
Code:
<html>
<head>
<title>Test Your Web!</title>
<script src="JS.js"> </script>
<style>
body
{
background-color:#366;
}
</style>
</head>
<body>
<input type="color" name="iFrame_Color" style="position:absolute; top:0px; left:0px; width:155px; height:50px; background-color:inherit">
<input placeholder="EX: asp.net" type="text" name="iFrame_Src" style="position:absolute; top:50px; left:0px; background-color:inherit">
<input placeholder="Screen Width" type="text" name="iFrame_W" style="position:absolute; top:80px; left:0px; background-color:inherit">
<input placeholder="Screen Height" type="text" name="iFrame_H" style="position:absolute; top:110px; left:0px; background-color:inherit">
<input type="button" value="Post Frame" onClick="JS_PrepareFrame()" style="position:absolute; top:140px; left:0px; width:155px; background-color:transparent;">
<input type="button" value="Restore Frame" onClick="JS_Restore()" style="position:absolute; top:170px; left:0px; width:155px; background-color:transparent;">
</body>
</html>
JS:
Code:
function JS_Restore()
{
location.reload();
document.getElementById("iframe").reset();
}
function JS_PrepareFrame()
{
var Src = document.getElementsByName('iFrame_Src')[0].value;
var Width = document.getElementsByName('iFrame_W')[0].value;
var Height = document.getElementsByName('iFrame_H')[0].value;
var Color = document.getElementsByName('iFrame_Color')[0].value;
iFrame = document.createElement("iframe");
iFrame.setAttribute("src", "http://"+Src);
iFrame.style.position = "absolute";
iFrame.style.top = 0+"px";
iFrame.style.left = 300+"px";
iFrame.style.width = Width+"px";
iFrame.style.height = Height+"px";
iFrame.style.backgroundColor = Color;
document.body.appendChild(iFrame);
}
Re: Using iFrame to test your mobile in different screens
There are addons for that. At least you code, however.
http://dl.dropbox.com/u/55589036/Pic...1120210306.png
Re: Using iFrame to test your mobile in different screens
Ye, whatever. Another useless thing, these companies destroying the coders.
Re: Using iFrame to test your mobile in different screens
Quote:
Originally Posted by
qet123
Ye, whatever. Another useless thing, these companies destroying the coders.
Useless? Company? I'm sorry this is very helpful and just one person who coded it.
I like you still code it for yourself, but it's not really comfort, however.
Re: Using iFrame to test your mobile in different screens
Useless thing from me, not from the company
Re: Using iFrame to test your mobile in different screens
did you learn something from it? if u did then it wasnt useless :D
Re: Using iFrame to test your mobile in different screens
Well in past I coded a lot of things other people made better, too. Just for the personal effort, experience and use. The only difference was, I did not release it, because nobody would need it (except for me, because I like my own stuff). :zippy:
Re: Using iFrame to test your mobile in different screens
Quote:
Originally Posted by
שเ๒єtгเ๒є
Well in past I coded a lot of things other people made better, too. Just for the personal effort, experience and use. The only difference was, I did not release it, because nobody would need it (except for me, because I like my own stuff). :zippy:
I'm like you, and it makes me sad. That's why i'm looking for ideas never been done.
Re: Using iFrame to test your mobile in different screens
Quote:
Originally Posted by
שเ๒єtгเ๒є
I didn't know about that extension, very usefull.
For other people who would like to try it out, here is the link: https://chrome.google.com/webstore/d...ammmilcgefonfh
Re: Using iFrame to test your mobile in different screens
Quote:
Originally Posted by
Eronisch
Yep that's it. No problem.
Re: Using iFrame to test your mobile in different screens
Quote:
Originally Posted by
Eronisch
Why would you use a addon when chrome supports this directly from the developer console.
http://puu.sh/5uSc9.png
Re: Using iFrame to test your mobile in different screens
Quote:
Originally Posted by
Secured
Because ...
- It's two clicks away after pressing F12 and when I keep it open on an extra window I still have to type the numbers manually instead of using resolution bookmarks
- It's zooming the content instead of sizing the window, I want to see real quality
But all in all you're right, those devtools are very useful I never doubt, above extension is just a quick solution.
