Phil ChettPhil Chett 09 Aug 2008 22:56

Best way of demonstrating is by example. :-)
Note the url addy in the iframe. it has after it /code/n
where "n" is the number of the code block to look at.

++ first code block
[[iframe http://community.wikidot.com/blog:html-within-wikidot-type-2/code/1 frameborder="0" scrolling="no" width="100%" height="300"]]
++ second code block
[[iframe http://community.wikidot.com/blog:html-within-wikidot-type-2/code/2 frameborder="0" scrolling="no" width="100%" height="300"]]
++ third code block
[[iframe http://community.wikidot.com/blog:html-within-wikidot-type-2/code/3 frameborder="1" scrolling="no" width="100%" height="300"]]

The code must be between

[[code type="html"]]
insert the code here
[[/code]]

Mention the lowercase of the "html" ! Uppercase "should" work too ( soon) …

first code block

Notes.

Save the page

So you have added the html code between the code block and added an iframe.
If you preview it it may say in the iframe box, page does not exist! or similar error
You MUST save the page.
It may still say page does not exist! or similar error
DON'T PANIC!!!
its because its all stored wrong in your browser cache.
Clear it! i have found this to be the most frustrating thing in getting this to work. Every change you make to the edit box, clear your cache on refreshing.
better still close the browser, with options set to clear cache on closing, and then fire it up again!

Hide the code

You can hide the code block with the comments tags:

[!--
[[code type="html"]]
.
.
[[/code]]
--]

or use the collapsible method.

second code block

third code block

This one (at the moment) does not work in ie7

I have included it to demonstrate one of the limitations of including html in wikidot.
Because the code is magically shifted else where, and isn't actually on YOUR page, its shifted to a magical place called wdfiles.
Only trouble is, there is not direct communication between wdfiles and YOUR page.
to demonstrate this below is a social org gizmo.(not viewable in IE7 If you click it, and have a look at one the the social thingies that you are signed up for, you will note that its is talking about linking to wdfiles and not the page that you are actually on. Or in other words. For things like this is just isn't going to work

THE CODE BLOCKS

these can be anywhere on a page. i have just clumped them here for clarity.

1st code block

<html>
<head>
<title>This text appears in the browsers title bar</title>
</head>
<body>
 
<div 
align="center"> <marquee bgcolor="#000080" scrollamount="2" 
direction="up" loop="true" width="60%"> <center> 
<font color="#ffffff" size="+1"><strong> 
WIKIDOT ROCKS<br> Demonstration of including html<br> <br> 
via iframe using code block </strong></font> </center> </marquee></div>
 
</body>
</html>

2nd code block

<html>
<head>
<title>This text appears in the browsers title bar</title>
</head>
<body>
 
<div 
align="center"> <marquee bgcolor="#000080" scrollamount="2" 
direction="up" loop="true" width="60%"> <center> 
<font color="#ffffff" size="+1"><strong> 
Demo Two
<br>
this is the second
<br> <br> 
code block on this page
</strong></font> </center> </marquee></div>
 
</body>
</html>

3rd code block

<html>
<body>
<!-- SocialList.org BEGIN -->
<script type="text/javascript">
sociallist_url = location.href;
sociallist_title = document.title;
sociallist_text = '';
sociallist_tags = '';
</script><script type="text/javascript" src="http://www.sociallist.org/widget.js?type=1&cols=3&rows=5&button_dx=160&button_dy=24&lang=en"></script>
<noscript>
<a href="http://www.sociallist.org/submit.php?type=1&lang=en&url=refpage&title=refpage&tag=refpage&text=refpage" target="_blank" title="Bookmark this Website"><img src="http://www.sociallist.org/buttons/en160x24.gif" border="0" width="160" height="24" alt="Bookmark" /></a>
</noscript>
<!-- SocialList.org END -->
 
</body>
</html>

Recommend this post?

rating: +1+x

What do you think? Give us your thoughts!

Add a New Comment