Posted by 
Helmuti_pdorf on 1222081085|%e %b %Y|agohover, last edited by 
James Kanjo on 1236379355|%e %b %Y at %H:%M |agohover
This "howto" explains how it is possible to use ANY html scripting on a page instead of embedding the scripts…
"html" scripting on a page
- You can use ALL html codings on a page by storing it in a separate [[code type="html"]] code block!
- You can use this code in an [[iframe]] tag with an URL - showing on even the same page extended with "/code/#" - where the # is the number of the code block on this page.
- You can hide any "html code" block behind a collapsible block or in a comment - to see the iframed script-results only!
Example with "aNobii" embeded code ( embed not yet working now)
There are some other examples at the bottom under "Links"
1. the code block you get from aNobii with your" book-shelf" badge:
<!-- 1 This is the HTML section of the badge -->
<div id="badge">
<script type="text/javascript" src="http://www.anobii.com/anobi/badge_generator.php?p=012d64e5c2a5327d15&language=2,4&tag=0,11,9,1,8,5,6,4,10,3&count=5&recent=1&progress=3&title=title&subtitle=0&author=0&img=small&link_to=1&az_site=&a_id="></script>
</div>
<!-- Badge ends -->
2. the html code you need on this page ( hidden later) :
[[code type="html"]] !!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>aNobii Title of badge</title>
</head>
<body>
<!-- 2 This is the HTML section of the badge -->
<div id="badge">
<script type="text/javascript" src="http://www.anobii.com/anobi/badge_generator.php?p=012d64e5c2a5327d15&language=2,4&tag=0,11,9,1,8,5,6,4,10,3&count=5&recent=1&progress=3&title=title&subtitle=0&author=0&img=small&link_to=1&az_site=&a_id="></script>
</div>
<!-- Badge ends -->
</body>
</html>
[[/code]]
3. The same Code "hidden"
This will make your code invisible on the page. You can hide the code block in a comment too!
[[div style="display : none;"]]
[[code type="html"]]
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>aNobii Title of badge</title> </head> <body> <!-- 3 This is the HTML section of the badge --> <div id="badge"> <script type="text/javascript" src="http://www.anobii.com/anobi/badge_generator.php?p=012d64e5c2a5327d15&language=2,4&tag=0,11,9,1,8,5,6,4,10,3&count=5&recent=1&progress=3&title=title&subtitle=0&author=0&img=small&link_to=1&az_site=&a_id="></script> </div> <!-- Badge ends --> </body> </html>
[[/code]]
[[/div]]
4. Iframe it on the same page!
Here is the place in the source where the code block is hidden… :)
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>aNobii Title of badge</title> </head> <body> <!-- 4 This is the HTML section of the badge --> <div id="badge"> <script type="text/javascript" src="http://www.anobii.com/anobi/badge_generator.php?p=012d64e5c2a5327d15&language=2,4&tag=0,11,9,1,8,5,6,4,10,3&count=5&recent=1&progress=3&title=title&subtitle=0&author=0&img=small&link_to=1&az_site=&a_id="></script> </div> <!-- Badge ends --> </body> </html>
5. And now the iframe:
Note the number 4 in the source url! Here is the 4. code block used!
[[iframe http://community.wikidot.com/howto:use-html-scripting/code/4 frameborder="1" scrolling="yes" width="320px" height="720px"]]
in Action:
Links
Have a look on some examples how it is done in:
[http://community.wikidot.com/blog:html-within-wikidot-type-2]
[http://community.wikidot.com/embed:openstreetmap]
[http://community.wikidot.com/embed:archive-org]
Backlinks
Author
Helmuti_pdorf. Please visit his/her userPage.
If you want to comment this - there is the button "Discuss" at the right bottom (in the page edit buttons)
