Scratch Project Embed CSS Trick

iTweak0r

I found out that using some clever JavaScript and CSS, you can make the top bar with the Green Flag and Stop Sign disappear on an embedded project.

Here's the code, using my project “Flyer 4.1”:

<div style="overflow-y: hidden; height: 372px;" id="applet">
    <iframe allowtransparency="true" width="485" height="402" src="http://scratch.mit.edu/projects/embed/2801222/?autostart=true" frameborder="0" allowfullscreen></iframe>
    <br/><br/>
</div>
<script>
    var objDiv = document.getElementById("applet");
    objDiv.scrollTop = 38;
</script>

An example of using this is to make a Scratch game on your site look more like a professional Flash game. Do you have any questions or comments?

Edit: Here's a better one made by a replier.

<div style="overflow-y: hidden; height: 720px; overflow-x: hidden; width: 960px;" id="applet">
    <iframe style="margin-top:-70px; margin-left:-12px;" allowtransparency="false" width="980" height="820" bgcolor=#F11111 src="http://scratch.mit.edu/projects/embed/30014850/?autostart=true" allowfullscreen></iframe>
    <br/><br/>
</div>

Last edited by iTweak0r (March 1, 2015 18:21:29)

scratchisthebest

No javascript needed ! Here's my “remix”

<div style="overflow-y: hidden; height: 372px;" id="applet">
    <iframe style="margin-top:-38px;" allowtransparency="true" width="485" height="402" src="http://scratch.mit.edu/projects/embed/2801222/?autostart=true" frameborder="0" allowfullscreen></iframe>
    <br/><br/>
</div>

margin-top:-38px; is a negative value, so instead of pushing the iframe downwards, it gets pulled upwards.

SuperSmashScratch

Cool! I'll try to use that

frodewin

Thanks a lot for this! I modified the offset a bit, since at -38px there was still a part of the frame visible, -39px did the job:

<div style="overflow-y: hidden; height: 372px;" id="applet">
      <iframe style="margin-top:-39px;" allowtransparency="true" width="485" height="402" src="http://scratch.mit.edu/projects/embed/14657795/?autostart=false" frameborder="0" allowfullscreen></iframe>
    <br/><br/>
</div>

Last edited by frodewin (Sept. 12, 2014 14:40:07)

MegaApuTurkUltra

scratchisthebest wrote:
No javascript needed ! Here's my “remix”
<div style="overflow-y: hidden; height: 372px;" id="applet">
    <iframe style="margin-top:-38px;" allowtransparency="true" width="485" height="402" src="http://scratch.mit.edu/projects/embed/2801222/?autostart=true" frameborder="0" allowfullscreen></iframe>
    <br/><br/>
</div>
margin-top:-38px; is a negative value, so instead of pushing the iframe downwards, it gets pulled upwards.

Dem hax. Awesome.

frodewin

I made a version that scales up to 640x480 and cuts out exactly the game window (at least on my browser):

<div style="overflow-y: hidden; height: 480px; overflow-x: hidden; width: 640px;" id="applet">
    <iframe style="margin-top:-56px; margin-left:-11px;" allowtransparency="false" width="658" height="552" bgcolor=#220000 src="http://scratch.mit.edu/projects/embed/14657795/?autostart=true" allowfullscreen></iframe>
    <br/><br/>
</div>

PullJosh_Test

Here's a page with all of the different methods so people can compare.

goldfish678

Very useful. Now all we need to do is hide the ‘loading project’ thing and replace it with a regular loading symbol XD

scratchisthebest

PullJosh_Test wrote:
Here's a page with all of the different methods so people can compare.

Thank you! Great project choice too

At least for me, Version 3 seems to be missing a top border (as it should) but the left, right, and bottom borders are still there. SO, I proudly present Version 5! lol, when will it end?!?!

<div style="overflow: hidden; height: 360px; width:480px;" id="applet">
    <iframe style="margin-top:-39px; margin-left:-2px;" allowtransparency="true" width="485" height="402" src="http://scratch.mit.edu/projects/embed/26657343/?autostart=true" frameborder="0" allowfullscreen></iframe>
</div>

PullJosh

scratchisthebest wrote:
PullJosh_Test wrote:
Here's a page with all of the different methods so people can compare.
Thank you! Great project choice too

At least for me, Version 3 seems to be missing a top border (as it should) but the left, right, and bottom borders are still there. SO, I proudly present Version 5! lol, when will it end?!?!
<div style="overflow: hidden; height: 360px; width:480px;" id="applet">
    <iframe style="margin-top:-39px; margin-left:-2px;" allowtransparency="true" width="485" height="402" src="http://scratch.mit.edu/projects/embed/26657343/?autostart=true" frameborder="0" allowfullscreen></iframe>
</div>

It looks like the bottom border is still there on yours.

I present: version 6!
(No, not six factorial. Just six.)

<div style="overflow: hidden; height: 359px; width:480px;" id="applet">
    <iframe style="margin-top:-40px; margin-left:-2px;" allowtransparency="true" width="485" height="402" src="http://scratch.mit.edu/projects/embed/26657343/" frameborder="0" allowfullscreen></iframe>
</div>

Also, an updated version of the page.

iProductions

Wow, I can't believe that I got so many replies on this! Thanks ^o^

s218029

s218029

<div style=“overflow-y: hidden; height: 372px;” id=“applet”>
<iframe allowtransparency=“true” width=“485” height=“402” src="http://scratch.mit.edu/projects/embed/2801222/?autostart=true“ frameborder=”0“ allowfullscreen></iframe>
<br/><br/>
</div>
<script>
var objDiv = document.getElementById(”applet");
objDiv.scrollTop = 38;
</script>

MegaApuTurkUltra

PullJosh wrote:
MegaApuTurkUltra wrote:
Thepuzzlegame wrote:
KillerLP wrote:
SuperSmashScratch wrote:
Cool! I'll try to use that
hi

Please don't necropost
It's been less than 2 weeks between that post and the last one so I don't think it's really necroposting, but ok.
Maybe it isn't, but it doesn't really add anything useful to the discussion.

True. Maybe it is necroposting then.

frodewin

PullJosh wrote:
MegaApuTurkUltra wrote:
Thepuzzlegame wrote:
KillerLP wrote:
SuperSmashScratch wrote:
Cool! I'll try to use that
hi

Please don't necropost
It's been less than 2 weeks between that post and the last one so I don't think it's really necroposting, but ok.
Maybe it isn't, but it doesn't really add anything useful to the discussion.

But then posting number #17 and #18 (by s218029) is also guilty of this problem. I didn't wanna say anything on this, but the code posted there was just project spam and did not contribute to the embedded CSS trick discussion. On the other hand, SuperSmashScratch's post didn't cost me time to check something and it was a postive message on the results we elaborated in this thread, which I personally found very encouraging.

edit rechecked code from posting #18, appears to be css-trick, but does not work at all.

Last edited by frodewin (Sept. 28, 2014 16:13:13)

frodewin

frodewin wrote:
PullJosh wrote:
MegaApuTurkUltra wrote:
Thepuzzlegame wrote:
KillerLP wrote:
SuperSmashScratch wrote:
Cool! I'll try to use that
hi

Please don't necropost
It's been less than 2 weeks between that post and the last one so I don't think it's really necroposting, but ok.
Maybe it isn't, but it doesn't really add anything useful to the discussion.

But then posting number #17 and #18 (by s218029) is also guilty of this problem. I didn't wanna say anything on this, but the code posted there was just project spam and did not contribute to the embedded CSS trick discussion. On the other hand, SuperSmashScratch's post didn't cost me time to check something and it was a postive message on the results we elaborated in this thread, which I personally found very encouraging.

edit rechecked code from posting #18, appears to be css-trick, but does not work at all.

What I mean is let's not be too nitpicky about what is useful or not.

s218029

But then posting number #17 and #18 (by s218029) is also guilty of this problem. I didn't wanna say anything on this, but the code posted there was just project spam and did not contribute to the embedded CSS trick discussion. On the other hand, SuperSmashScratch's post didn't cost me time to check something and it was a postive message on the results we elaborated in this thread, which I personally found very encouraging.

edit rechecked code from posting #18, appears to be css-trick, but does not work at all.

Hey!

iTweak0r

Can we get back on topic?

frodewin

s218029 wrote:
Hey!

Am I wrong with assumption? Sorry in this case.

Last edited by frodewin (Oct. 4, 2014 20:57:38)

PinballX

Discuss Scratch