How to Inject Custom HTML and CSS into an iFrame
Loading...
Uploaded by nettutsplus on Nov 21, 2011
Ever been to a site like JSBin, where you can write HTML, CSS, and JavaScript, and then see the results in a panel to the right? An iframe is how we can accomplish this task.
- 96 likes, 0 dislikes
-
Uploader Comments (nettutsplus)
All Comments (24)
-
If there is a head tag in the html textarea is there a way to inject what’s inside this head tag in the head tag of the iframe ? I tried to add a find to the .val but it doesn’t works.
-
@RavacSRB yes there are differences about page's load time and some errors, js sould not run before page fully loaded. insert it before closing body tag.
-
Hi Jefferey, I'd just like to say a huge thanks for all the videos you posted over the years. Especially the codeigniter tutorials, I was scared of MVC at first but after watching your vids and playing around I am now confident in codeigniter and MVC and my work has not only increased but is esier to achieve!!
Loving this also!
-
its about time an iframe becomes depricated.
3 months ago 2
-
yes (requires work around for ie7) you would use box-sizing:content-box; (which would use the webkit / mozilla box model) as box-sizing:border-box; use the IE box model.
-
just a quick question.Im doing the 30 day html and css course and its brillant.Im not finished yet and im worried that once i finish i wont know what to work on next.advice?
-
Is the box model cross platform? If not how you fix the problem then?
-
Hi Jeff, can you tell me, is there any difference if I include js files in the "head" of a document or just above "/body" as you did in the video ?
Cheers
- 5:18
How to Keep the Count with CSSby nettutsplus8,442 views
- 8:18
How to Create Diagonal Lines with CSSby nettutsplus8,888 views
- 59:58
Python from Scratch - Creating a Dynamic Websiteby nettutsplus11,753 views
- 3:49
Cross-Browser CSS in Seconds with Prefixr.comby nettutsplus12,411 views
- 13:02
Facebook iFrame App für HTML, CSS und Javascript auf der Fanpageby networkseffer4,326 views
- 9:30
HTML for Beginners | Lesson 1: The Basicsby SocialMacbook22,895 views
- 57:23
Web Development with Ruby On Railsby skillbuildersDotcom21,733 views
- 6:16
IFrames for Facebook - Part 1by Entreprenette22,083 views
- 4:32
TextMate no Mouse.movby stevenchanin1,625 views
- 4:02
Adding HTML To Your Static HTML iFrame Tabs App Facebook Fanpageby TheActiveMarketer1,513 views
- 22:54
Configure Routing for Windows Server 2008by itfreetraining6,839 views
- 23:05
Coding a Mock in HTML & CSS (Hand-Coding Tutorial)by mlwebco4,583 views
- 5:25
John Mayer vs. Pretty Lights - I Don't Trust My Movingby TheAnd1Shot35,310 views
- 7:58
Getting Clever with CSS3 Inset Shadowsby nettutsplus8,772 views
- 2:22
How to create an iFrame in HTMLby CYMLearnTheWeb8,899 views
- 6:33
Web Development from Scratch 13 - Duplicationby nettutsplus8,641 views
- 3:39
The Real Kids - All Kindsa Girls (1977)by riparapa38,661 views
- 7:50
HTML Iframeby ogsolution23,661 views
- 13:10
Pistons: A revolution for Redstone Circuitryby Kimundi2236,192 views
- 52:48
Fundamentals for Great jQuery Developmentby MarakanaTechTV4,987 views
Wonderful Jeffrey :) Thanks for the tutorial!
I have only one question while watching the tutorial, so forgive me if it seems obvious. Why you have .children('style')? What does it do? Thanks, mate!
al3xandremagalhaes 3 months ago
@al3xandremagalhaes Because I want to make the styleTag reference that style tag. Otherwise, it would reference the head tag of the iframe element.
nettutsplus 3 months ago 6
Your voice sounds very similar to the "Angry former google employee explaining google wave". And if that IS you, you're awesome.
TheJaredWilcurt 3 months ago 3
@TheJaredWilcurt Not me.
nettutsplus 3 months ago 3