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)

Specs 1 (main): Safari on MacBook Pro; Late 2008; Core 2 Duo @2.4GHz; 8GB 1067MHz DDR3 RAM; Mac OS X 10.10;

Specs 2: Firefox on Lenovo Yoga 13; Core i7 @2.0GHz; 8GB 1600MHz DDR3 RAM;
tri-boots Windows 10 Pro, Mac OS X 10.10, and Ubuntu 14.01 LTS;

All have the latest version of Flash.

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.

I am a Lava Expert

SuperSmashScratch

Cool! I'll try to use that

Bush hid the sig

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)

You can also find my best projects here or stop at my profile and say hi!

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.

$(".box-head")[0].textContent = "committing AT crimes since $whenever"

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>

You can also find my best projects here or stop at my profile and say hi!

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>

I am a Lava Expert

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.

Convert your Scratch projects to JavaScript automatically with Leopard!

iProductions

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

Main account | Korewa | My curated project!

s218029

Who Needs Signatures?

…

This signature is bad.

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>

Who Needs Signatures?

…

This signature is bad.

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.

$(".box-head")[0].textContent = "committing AT crimes since $whenever"

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)

You can also find my best projects here or stop at my profile and say hi!

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.

You can also find my best projects here or stop at my profile and say hi!

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!

Who Needs Signatures?

…

This signature is bad.

iTweak0r

Can we get back on topic?

Specs 1 (main): Safari on MacBook Pro; Late 2008; Core 2 Duo @2.4GHz; 8GB 1067MHz DDR3 RAM; Mac OS X 10.10;

Specs 2: Firefox on Lenovo Yoga 13; Core i7 @2.0GHz; 8GB 1600MHz DDR3 RAM;
tri-boots Windows 10 Pro, Mac OS X 10.10, and Ubuntu 14.01 LTS;

All have the latest version of Flash.

frodewin

s218029 wrote:
Hey!

Am I wrong with assumption? Sorry in this case.

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

You can also find my best projects here or stop at my profile and say hi!

PinballX

Discuss Scratch