Description
This Snippet explains how it is possible to use ANY html scripting on a page instead of embedding the scripts:
- 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..)
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>
3. The same Code "hidden"
Note the show= " " and hide=" " — this makes this collapsible block unvisible ( you cannot click on show ).
If you want - you can change this to any other text for visibility.
You can hide the code block in a comment too!
[[collapsible show=" " hide=" "]]
<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>
[[/collapsible]]
4. Code and Iframe it on the same page!
Here is the place in the source where the used code block is hidden… :)
==>
Note the number 4 in the source url in the iframe! There is the 4. code block of this page used…
[[iframe http://snippets.wikidot.com/code:use-any-html-code-on-a-page/code/4 frameborder="1" scrolling="yes" width="340px" height="740px"]]
( do not forget! ! - The code blocka bove is the 5. code block in this page! )
Another minimised test html block to show how this works:
1.. Do not forget - the code block needs to be type="HTML ! like [[code type="HTML"]] !!
2. this is the 6. code block on this page..! :)
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>title</title> </head> <body> <h1>Introduction</h1> <p> Welcome … </p> </body> </html>
=> in Action you will see this in one of the comments of this page …down with /code/6 !!
[[iframe http://snippets.wikidot.com/code:use-any-html-code-on-a-page/code/6 frameborder="1" scrolling="yes" width="340px" height="150px"]]
( do not forget! ! - The code block above is the 7. code block in this page! )
In action
The iframe from above, using the (hidden 4.) code from the same page!
Rate this solution
If you think this solution is useful — rate it up! Or dump it otherwise.
You can also just attach a html file to a page and then load the html file in an iframe on that page.
An Innovator at heart.
But how do you reference the HTML attachment?
View the File Attachments and copy the link address for your html file. Then make an iframe on your page that loads the address of the html file.
An Innovator at heart.
I do everithing like you say, but In my page appears something like that:
The site does not exist.
I want to put some pub from affiliation and im unable to put the html code that they give to me.
http://statisticum.wikidot.com
thanks
if you make it so we can see the sourse code we might be able to help
thanks for your answer
the code is
<!— START of the zanox affiliate HTML code >
<! ( The HTML code may not be changed in the sense of faultless functionality! ) >
<img src="http://ad.zanox.com/ppv/?12453608C1041503684" align="bottom" width="1" height="1" border="0" hspace="1"><a href="http://ad.zanox.com/ppc/?12453608C1041503684T">Ganha um iPhone Apple na tua cor favorita</a>
<! ENDING of the zanox-affiliate HTML-Code —>
Thanks
i ment the sorce code on your wiki page.
I want a blank html page using the following code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
</head>
<body>
<h1>Introduction</h1>
<p>
Welcome …
</p>
</body>
</html>
I then create an html file and try in the wiki page:
But the result wiki page is a text box with the html code!
I want to use html.
And ? What have you done? ( means - have you a link for us to a page , a test example..or can you insert here a code block for us …. I have no idea what you have or have not done…
please - give us a hint here ! :)
Could be the explanation is better here: http://community.wikidot.com/howto:use-html-scripting ?
Edit_ I made a little copy & paste onto the page above and get this iframe-ed html code
( this is the 6. code block on this page..! :)
Done with > [[iframe http://snippets.wikidot.com/code:use-any-html-code-on-a-page/code/6 frameborder="1" scrolling="yes" width="340px" height="150px"]]
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
Look at the source code of this page, the text box in my last post was …subdomainname.wikidot.com/local—files/home/filename.html
The html scripting explanation is poor; I want simple instructions to use html.
The text box in your message was created using …snippets.wikidot.com/code:use-any-html-code-on-a-page/code/6
I cannot see how this is added to a wiki page. Where is the number 6? Why can't you write the complete code plain text?
Exact this is not possible here to view the code of your post.!
- can you insert a "code" block with your iframe test ?
Done with
Exact this is happening onb a wikidot- page of your site… see my post below..
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
1. You need a page to "store" the html code
I have done this on this page code:use-any-html-code-on-a-page" with the Tilte "Use any html code on a page" at the last changes ( use the history button at the bottom to find out what I have inserted…)
2. You have to be careful to use [[code type="HTML"]]
to store your html code on such page - or you will get troubles.
3. Using such code-block in an "Iframe" needs an identifier
like /code/# - where the # equals the sequence number of such code block on the page.
In my example this is the 6. code block on the page http://snippets.wikidot.com/code:use-any-html-code-on-a-page and with teh extension /code/6 it takes (renders) only the content of this code block.
4. Every visitor can see this code block ?
if you do not want this readable by everyone than you can easily "hide" the code block behind a collapsible block or even in a comment!
5. Why not uese "files"
This has the problem that any changes on a html block are not documented - there is only ONE version of a file availabe ( attached).
In a code block you have all version automaticlly saved….
6. Have all such html code be stored on the used page?
No, could be perjhaps better to have it on an extra page ( like "all-files" for images or "all-html-codes" for a collections of used codes in a special namespace ( = category) "mycodes:" where nobody else the author is allowed to edit…
Hope this makes it clear ?
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
The correct terminology is verbatim text, not code block. My explanation of this function.
Wikidot software assigns automatically an indentification number for all verbatim text boxes within a wiki page. This number increases in series for each text box. For example, in this wiki page, the text box shown below the time stamp 30-06-09 7:28 bst has an identification number 6 (count each text box, which appears with a light coloured background, surrounded by dash (-) marks).
To convert verbatim text to appear as html in the wiki page:
[[code="html"]]
[[iframe …wikipage.wikidot.com/code/n]]
[[/code]]
where … is replaced by http:// and n is replaced by the identification number of the verbatim text box
The element iframe may have the following attributes, for example
frameborder="1" scrolling="yes" width="340px" height="150px"
I cannot get this instruction to work on this page!
[[code="html"]]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
</head>
<body>
<h1>Introduction</h1>
<p>
Another try …
</p>
</body>
</html>
[[/code]]
you can call it what you like, every one else calls it code block.
http://psc.wikidot.com/test:wikic
took me 15 secs
If everyone misspelt your name you'd be fully within your rights to correct them accordingly, not change your name! I make this comment to aid clarification
This is the problem with this automatic id assignment
1. Sorry, but a code block inside a Forums post is not on the snippets page and cannot be used in an iframe.
2. exact your code block text is stored under code typ3e"html" on the snippets page with some running number…
3. This is complete wrong…:
[[code="html"]]
[[iframe …wikipage.wikidot.com/code/n]]
[[/code]]
is for documentation only (and renders to nothing…
Iframe should not be used inside a coblock WITH pure html codecs…
I think - you shoukld CREATE a page on your wiki ( wherever ) and store ONE CODE block type ="html" with your codes.
and tthan CREATE ANOTHER PAGE where you can iframe the first page with the cobe block (1 i think) .
This will never work with codblocks n Forum posts..
..
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
I do not want to create a wiki page containing all of my html and then refer to each verbatim text block in another wiki page.
I want to use html for each wiki page that I create. Below are the steps I have done, which fail to format the wiki page using html:
*create a new page
myhtmlpage
*add some text:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
*add the text box syntax:
*save new page
According to the instructions here, the first (and only!) verbatim text box will be converted to html when the iframe element includes the attribute '…wikidot.com/myhtmlpage/code/1'
This does not work. The verbatim text box shows the html in the standard wiki text box (dashed lines around text box)
*create a new page
myhtmlpage
*add some text:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
*add the text box syntax:
[[iframe ...wikidot.com/myhtmlpage/code/1]]
some text if you want…
and than ( or before the iframe line)
[[code type="HTML"]]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
</head>
<body>
<h1>Introduction</h1>
<p>
Another try …
</p>
</body>
</html>
[[/code]]
*save new page
This should work
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
The instruction I added to my wiki page:
[[iframe …wikidot.com/code/1]]
The result is shown at the address http://s1002.photobucket.com/albums/af143/imagesr/
This is wrong. Only the html should be shown.
please - can you insert here your ifrme statement ?
It shouldlook like :
[[iframe http://snippets.wikidot.com/code:use-any-html-code-on-a-page/code/4 frameborder="1" scrolling="yes" width="340px" height="740px"]]
and : which of the images are the öast one ?
If you want to iframe something you should hide all on the page which is not the iframe line itself ( like the code block - which is normally seen and can be hodden by commenting oiut or collapsible block using…
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
Your iframe should look like [[iframe …wikidot.com/YOUR_PAGE-NAME/code/1]]
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
What you now need is to "hide" all the html coding block - staff behind a "collapsible block" or insert it into a "comment" - start and comment- end .line..
Than you will see only the html-output…
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
See image at previous internet address. The code below was used. Only the frame with the html:
INTRODUCTION
Another try
should appear. This is wrong
[[iframe ….wikidot.com/myhtmlpage/code/1 frameborder="1" scrolling="yes" width="340px" height="140px"]]
I do not understand - what is wriong on this output.
This is exact what the documentatin says..
Could be this is not what you want…
if you want to hide the code block ( this is "wikidot.com terminology" ) than you should hide it with a simple syntax line.
Wikidot was not designed to host the html pages of a wiki.
This is possible , but was never the target at the beginning,
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
So the behaviour is that the html code used to generate the format of a wikipage is shown in a verbatim text box immediately below!
I tried to remove the text box which produces the image as shown at the previous internet address, using code below:
[[iframe …wikidot.com/myhtmlpage/code/1]]
The html format disappears and the text box becomes a dash (-)! This is also wrong
1. "Code block" was implemented to show the visitors of a wikpage the used code on such a wikidot page
2. "Code block" got a type="…" attribute for a better visuality -
3. After detecting that the "code blocks" had internally UNIQUE identifier on their wikidot.page and could be referenced in an iframe sentence like any other http:\..source in the web this was used by some people to insert ther html pages on a wikidot page.
4. With the iframe syntax you can insert every readable html code in the web on a page. - if this page holds ( like in yours) the underlaying "code block" too than this is your decision to show this codes.. adding it before or after the place ehere the rendered ( and replacing ) "iframe output" is shown.
If you dop not wnat this behaviour - than put your code block into a comment:
[!--
code block
--]
- this is the brutal way .
Normally I would put the code block into a "collapsible block" hiding it behind an unvisible character -
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
I think there is a great misunderstanding with the wikidot syntax:
Most users of wikidot do not write in html code- and the gerenated html code is only visible in firebug or in the html-page output ( "show source") - but this is senseless because you cannot change it.
Like in this forum posts the syntax is super-macro like with some predefined wikidot-"tags" creating a xhtml code for the rendered pages. Rendering of a single page is done by reading the stored "code" and translöating it into html language and not in the moment of storing your pages.
I hope this makes something clear?
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
1. the written source code
2. gives you :
INTRODUCTION
Another try
3. Why do you want to write all in html ?
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
oI!, Listen up.
Is this what you rae trying to do?
http://psc.wikidot.com/test:wikic
If it is
look at it!
read it
look at the source code.
copy and adjust to suit.
the page is fully open so you can even edit it if if you so wish.
!!!IT DOES WORK!!!!!
If not then explain EXACTLY what the hell you want in a language that non techy geeks will understand.
Not here, because there are only a few helpers that monitor the snippets. go to the community help site,
http://community.wikidot.com/
Thanks, finally achieved what was requested. I have created (what I think is) a new snippet page with better explanation.
I framed a page according to the instructions here. I mean I was able to put some html codes on my pages, but the problem I'm haven is the back ground. The back ground of the pages framed, remain white. how do I change the back ground, to blend with my page bgcolor. This is what i did,
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Business Ideas Ad2</title>
</head>
<body bgcolor="gray">
[[/code]]
</body>
</html>
many can be found at:
http://businessideas.wikidot.com/
As you can see, I tried defining the back ground color, but I can't see any effect in IE. Google Crome has never showed the back ground of this ad. It appears as if there is no background in Google Crome, which is what I want it to be like in IE. I need a solution. Please help.
I would use css, for example as below, works in opera and therefore probably all other standard compliant web browsers.
[[iframe http://subdomain.wikidot.com/page/code/1]]
@!
code type="HTML"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{background-color:gray}
</style>
<title></title>
</head>
<body>
<h1>Introduction</h1>
<p>
A paragraph of text…
</p>
<h2>Section 1</h2>
<p>
Another paragraph of text…
</p>
<h3>Sub-section 2</h3>
<p>
A third paragraph of text…
</p>
</body>
</html>
[[/code]]
@
Thanks wikic, for your concern. I did as you suggested. But I'm still having the same problem. please could you or anyone give an alternative way.
Is there another way I can add the ad code to my page, without framing. Any suggestion is most welcome.
' Love you all.
You cannot add a "foreign code" to a wiki page without "using it in an iframe" - there is no other way.. sorry..
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
Is it possible to use this technique to apply CSS to a particular page
I'm hoping to acheive the following:
a) My whole site has the default CSS
b) selected pages (or templates) use a different CSS to give those pages individual themes.
Why?
You might think that that would make for an awful looking site, but this is for my 'testing site' and would be very useful.
Any advise on this matter would be greatly appreciated.
This embeds HTML, not wikidot code. What you are looking for is the CSS Module, which has not been implemented yet.
— Shane | Blog | CycloDS Revolution | Compatibility List | Get your free Wiki! | XBL: leiger40
100% Wikidot. 100% Awesome.