Discuss Scratch

iTweak0r
Scratcher
100+ posts

Scratch Project Embed CSS Trick

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
Scratcher
1000+ posts

Scratch Project Embed CSS Trick

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
Scratcher
1000+ posts

Scratch Project Embed CSS Trick

Cool! I'll try to use that

Bush hid the sig
frodewin
Scratcher
500+ posts

Scratch Project Embed CSS Trick

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
Scratcher
1000+ posts

Scratch Project Embed CSS Trick

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
Scratcher
500+ posts

Scratch Project Embed CSS Trick

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!
goldfish678
Scratcher
1000+ posts

Scratch Project Embed CSS Trick

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

Scratch Project Embed CSS Trick

frodewin wrote:

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>
Cool! But please don't necropost

hi!
SuperSmashScratch
Scratcher
1000+ posts

Scratch Project Embed CSS Trick

Thepuzzlegame wrote:

frodewin wrote:

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>
Cool! But please don't necropost
What do you mean? He wasn't necroposting

Bush hid the sig
scratchisthebest
Scratcher
1000+ posts

Scratch Project Embed CSS Trick

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
Scratcher
1000+ posts

Scratch Project Embed CSS Trick

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
Scratcher
19 posts

Scratch Project Embed CSS Trick

Wow, I can't believe that I got so many replies on this! Thanks ^o^
Thepuzzlegame
Scratcher
1000+ posts

Scratch Project Embed CSS Trick

SuperSmashScratch wrote:

Thepuzzlegame wrote:

frodewin wrote:

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>
Cool! But please don't necropost
What do you mean? He wasn't necroposting
He was reviving an old topic. Though a very good one at that.

hi!
djdolphin
Scratcher
1000+ posts

Scratch Project Embed CSS Trick

Thepuzzlegame wrote:

SuperSmashScratch wrote:

Thepuzzlegame wrote:

frodewin wrote:

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>
Cool! But please don't necropost
What do you mean? He wasn't necroposting
He was reviving an old topic. Though a very good one at that.
It isn't considered necroposting if it's for a good reason.

!
Thepuzzlegame
Scratcher
1000+ posts

Scratch Project Embed CSS Trick

djdolphin wrote:

It isn't considered necroposting if it's for a good reason.
Sorry, didn't know that

hi!
s218029
Scratcher
100+ posts

Scratch Project Embed CSS Trick

<iframe allowtransparency=“true” width=“485” height=“402” src="http://scratch.mit.edu/projects/embed/26719863/?autostart=false“ frameborder=”0" allowfullscreen></iframe>

Who Needs Signatures?



This signature is bad.
s218029
Scratcher
100+ posts

Scratch Project Embed CSS Trick

<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.
KillerLP
Scratcher
2 posts

Scratch Project Embed CSS Trick

SuperSmashScratch wrote:

Cool! I'll try to use that
hi

Thepuzzlegame
Scratcher
1000+ posts

Scratch Project Embed CSS Trick

KillerLP wrote:

SuperSmashScratch wrote:

Cool! I'll try to use that
hi

Please don't necropost

hi!

Powered by DjangoBB

Standard | Mobile