TOC's from many pages

By ErichSteinboeckErichSteinboeck

Description

Here's a half-baked solution for discussion thread “TOC's from many pages displayed on one?”

Although this allows you to pull in the TOC's, they aren't linking to their respective pages (but to the current page instead) and fold/unfold only works for the first TOC.

Code

[[module ListPages category="code" limit="9" order="pageEditedDesc"]]
[[table]][[row]]
[[cell]][[[%%page_unix_name%%]]][[/cell]][[/row]]
[[row]]
[[cell]]
[[div style="display : none"]]
[[include %%page_unix_name%%]]
[[/div]]
[[toc]]
[[/cell]][[/row]][[/table]]
[[/module]]

In action

scp-040-id

Item:#SCP-040-ID
Object class:Safe dan Euclid

Prosedur penanganan khusus: SCP-040-ID harus berada di ruangan bawah tanah site [REDACTED] yang dipantau oleh cctv, dijaga oleh 2 MTF,dan diberi makan oleh D-class 3 kali sehari

Deskripsi: SCP-040-ID merupakan sebuah kelompok individu sebanyak 40 individu.kelompok ini memiliki anggota selain manusia dan mempunyai kekuatan masing-masing.SCP-040-ID ditemukan pada sebuah taman bermain terbengkalai yang berada di Jawa barat, Indonesia

Berikut list-list SCP-040-ID,dari SCP-040-ID-1 sampai SCP-040-ID-40:

(#1) Dinosaurus (T-rex) yang bisa berbicara bahasa Indonesia dan suka membunuh orang

(#2)sebuah patung kartun Shaun the sheep yang ketika melihat maka orang yang melihat ingin memakan semua jenis keju

(#3)sebuah hantu yang dikenal sebagai pocong.kemapuannya adalah bisa terbang dan muncul secara tiba-tiba tanpa diketahui orang dengan wajah yang menyeramkan

(#4)sebuah lukisan pemandangan yang dimana orang yang melihat akan mengalami cegukan dan kejang-kejang

(#5)sebuah kucing abu-abu biasa namun dari perut,kaki belakang,dan ekor panjang sebanyak 10 meter

(#5)sebuah game kuis sebanyak 99 level.dimana orang yang memainkan akan pingsan dan bangun lagi setelah 10 menit setelah menamatkan level dari game kuis tersebut

(#6)sebuah makhluk aneh yang kulitnya berwarna-warni seperti SCP 1544,yaitu seperti mainan slinky.dan kulitnya tahan terhadap panas dan tembakan peluru

(#7)sebuah mainan rubik 3x3 yang dimana saat orang berhasil memecahkan mainan rubik tersebut maka rubik akan bergerak dan ada suara yang berkata "bagus!!"

(#8)sebuah bungkusan permen yang seperti sudah dikunyah,ketika mengunyah permen itu maka permen akan menjadi permen yang belum dimakan

(#9)sebuah siput taman biasa namun jejak dari siput yang tersebut akan menghasilkan zat dan rasa seperti kecap manis

(#10) seorang manusia laki-laki keturunan Asia umur 30an tahun yang memakai Hoodie merah dimana tidak melakukan apa-apa selain berjalan tanpa tujuan

(#11)sebuah koin dengan pecahan Rp 100,dimana saat dilempar akan jatuh dengan berdiri secara seimbang

(#12)sebuah pensil ✏️✏️ 2B yang tidak bisa dipakai menulis,tapi hanya bisa menggambar seorang presiden Indonesia,Soekarno ketika ia sedang membacakan proklamasi kemerdekaan Indonesia

(#13) seorang manusia wanita umur 28 tahun dan dia tergantung kepada makanan yang mengandung gula karena saat tidak memakan makanan manis dia akan kesakitan

(#14)sebuah makhluk aneh yang bertubuh hitam dan wajah bertopeng,dia berjalan dengan cara merangkak

(#15)sebuah gelas yang ditaruh semua jenis minuman tetapi rasanya akan selalu sama yaitu rasa minuman teh

(#16) sebuah piring makanan berwarna putih yang ketika diletakkan makanan akan terasa menggoda menurut definisi apapun,namun ketika makanan tersebut dikonsumsi itu menyebabkan serangan jantung karena penyumbatan arteri dengan lemak secara tiba-tiba

(#17)sebuah bibit bunga yang ketika ditanam maka tanaman bunga akan menyebar ke semua tanah

(#18) sebuah speaker yang ketika di nyalakan tidak ada apa-apa namun ketika dimatikan orang yang memakai speaker tersebut akan mengalami kesulitan berbicara

(#19)sebuah makhluk aneh dengan tubuh jerami yang dikenal sebagai kumpo

(#20)sebuah boneka gadis kecil yang bisa berubah menjadi manusia gadis kecil

(#21)sebuah kipas angin yang tidak bisa dihancurkan

(#22)sebuah jam dinding yang akan hilang dan kembali setiap detiknya

(#23)sebuah pulpen yang bisa berdiri sendiri dengan seimbang tanpa terjatuh

(#24)sebuah bola pingpong yang akan berubah yang awalnya berwarna jingga menjadi warna biru dan kembali lagi menjadi warna merah ketika dimainkan

(#25)sebuah tamborin yang ketika digoyangkan maka terdengar suara piano 🎹🎹🎹🎹

(#26)sebuah makanan telur yang ketika dimakan akan membuat orang tersebut akan pingsan selama 5 menit dan akan bangun lagi setelah pingsan

(#27) sebuah tas wanita yang bisa menyimpan semua barang dari yang kecil sampai yang besar

(#28)sebuah hewan sapi 🐄🐄 yang bisa memakan semua makanan

(#29)sebuah uang kertas dengan pecahan Rp 5.000 yang akan berubah setiap harinya

(#30)sebuah kasur yang ketika tidur maka dia akan tidur selama 1 Minggu dan bangun setelah 1 Minggu

(#31)sebuah penggaris kayu yang tidak bisa dipatahkan

(#32)sebuah kaset VHS yang ketika diputar akan selalu berubah setiap harinya

(#33)sebuah buku ensiklopedia tentang serangga ketika dibuka salah satu halaman dan dibaca maka muncul serangga yang persis di buku

(#34)sebuah hewan kancil yang bisa berbicara namun suka berbohong dan orang lain mudah percaya

(#35)sebuah makanan kue yang ketika dimakan sampai habis kue tersebut akan muncul lagi di piringnya

(#36)sebuah kotak atau keranjang yang berisi mainan dan mainan tersebut bisa bergerak dan hidup

(#37)5 anak yang berusia 12,10,9,7,6 setiap anak memiliki kekuatan masing-masing

Anak laki-laki berusia 12 tahun mempunyai kekuatan berupa bisa menumbuhkan tanaman

Anak perempuan berusia 10 tahun mempunyai kekuatan berupa bisa menggerakkan dan melayangkan benda

Anak laki-laki berusia 9 tahun mempunyai kekuatan berupa bisa menghasilkan listrik

Anak perempuan berusia 7 tahun mempunyai kekuatan berupa bisa mengubah warna yang ada pada benda atau yang ada di dunia

Anak laki-laki berusia 6 tahun mempunyai kekuatan berupa bisa membuat orang amnesia

(#38)sebuah pohon 🌲🌲🌲 yang anomalinya seperti SCP 038 yaitu bisa menggandakan benda hanya dengan menyentuhnya

(#39)sebuah pintu yang ketika dibuka akan muncul portal yang bisa membawa manusia ke mana saja

(#40) seorang perempuan yang memiliki kekuatan berupa bisa menyembuhkan orang lain dari berbagai macam penyakit namun sebagai bayarannya dia yang harus mengalami kesakitan seperti orang yang dia sembuhkan

Table of Contents
click-counter

Description

It counts clicks

Code

[[html]]
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
  if (typeof(Storage) !== "undefined") {
    if (localStorage.clickcount) {
      localStorage.clickcount = Number(localStorage.clickcount)+1;
    } else {
      localStorage.clickcount = 1;
    }
    document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";
  } else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
  }
}
</script>
</head>
<body>

<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>

</body>
</html>

[[/html]]

In action

Table of Contents
8-awesome-things-that-will-make-your-website-awesmome

Description:

Wanna create some nice things for your wiki? This is a tutorial for you!
I will teach you to do 8 things, Colored Text, Tabs, Blockquotes, Collapsible Text, Titles, Horizontal Rules, Code Examples and Clickable links!

Colored Text

Colored Text is freaking easy! Here is some examples of colored text:

This is a red text!
A green one too!
Here is some nice pink, made with hex codes!
multi color!!
You can choose any color you want!

To make a colored text, put the following code in your wiki:

##blue| your text##

your text

You can change the "blue" to any color you want, like yellow, red, any thing.

##green| green text##

green text

Hex colors works too, i will put a brown hex code:

##6d6853| hex code!##

hex code!

Tabs

Tabs is a nice and cool thing to put and organize your website, here is an example:

This is a tab, you can put text here!

You can put images in tabs too, but anyways, here is the code:

[[tabview]]
[[tab name of your tab]]
put your text here.
[[/tab]]
[[tab another tab cool!]]
yeaaaa
[[/tab]]
[[/tabview]]

put your text here.


You can put lots of tabs, if you want another tab, here is the code for a tab, just put it inside the "[[tabview]]": 
[[tab Your Tab Name]]
text goes here.
[[/tab]]

Blockquotes

Blockquotes are nice things to put in your wiki too, it can be used for a lot of things related to text, here is an blockquote:

this is a blockquote

you can put text in it
yeaaa

Nested Blockquotes!

more text!!!

Here is the code for Blockquotes:

> Blockquote
> 
> 
> text
>> blockquote
>>> more blockquotes

Blockquote

text

blockquote

more blockquotes

Reminder:

If you want your blockquotes to work, you need to put a space " " after the ">".

Collapsible Text

Like Tabs, collabsible text can be used to get your wiki nice and organized, here is an example:

+ Collapsible Open

To put a collapsible text in your wiki, just put this code:

[[collapsible show="Text here :)" hide="Dont close me :("]]
##red| Why not red text?##
awesome text here!!
[[/collapsible]]
Text here :)

+Titles
Titles is what you saw in this guide, it helps organization too!

This is a title

Second Title

Third Title

Fourth Title

Fifth Title
Sixth Title

To put a title, put this code in your wiki:

+ Title with only one "+"
++ Title with two "++"
+++ Title with three "+++"
++++ Title with four "++++"
+++++ Title with five "+++++"
++++++ Title with six "++++++"

Title with only one "+"

Title with two "++"

Title with three "+++"

Title with four "++++"

Title with five "+++++"
Title with six "++++++"

Horizontal Rules

Horizontal Rules is for organization too, this is an horizontal rule:

^ Is that line

To make an horizontal rule, just simply type five "-" in your wiki, like this!
"-----"

Horizontal Rules are Awesome!

Code Examples

Code Examples is everything in this guide, as the name says, it's for code showcase:

code here, showcase your viewers

To put a code showcase just put this in your wiki: 
[[code]]
your awesome code :)!
[[/code]]

your awesome code :)!

Clickable Links

As the name says, it's a text that when you click, it leads to something, like this:

https://google.com

You can change the text of the clickable link too, to make it more fancy ;)

This link leads to google :)

To create clickable links, just put this:

[[[https://site here.com]]]

If you want to change the text, put this on your site: 
[[[https://site here.com|Text here]]]

If you want to make the text lead to any other pages of your site, put this: 
[[[name of the page of your site]]]

Thanks for visiting my guide, i hope it helps!
make-clock

Description

It same time on your phone :)

Code

Insert this code into your page

[[html]]
<!DOCTYPE html>
<html>
<body>

<canvas id="canvas" width="400" height="400"
style="background-color:#333">
</canvas>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);

function drawClock() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
}

function drawFace(ctx, radius) {
  var grad;
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2*Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
  grad.addColorStop(0, '#333');
  grad.addColorStop(0.5, 'white');
  grad.addColorStop(1, '#333');
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius*0.1;
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
  ctx.fillStyle = '#333';
  ctx.fill();
}

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius*0.15 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }
}

function drawTime(ctx, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    //hour
    hour=hour%12;
    hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
    drawHand(ctx, hour, radius*0.5, radius*0.07);
    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.8, radius*0.07);
    // second
    second=(second*Math.PI/30);
    drawHand(ctx, second, radius*0.9, radius*0.02);
}

function drawHand(ctx, pos, length, width) {
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.rotate(-pos);
}
</script>

</body>
</html>
[[/html]]

In action

After inserting

Table of Contents
tag

Description

You can disguise the tags and include a link.

Code

[[include :snippets:tag
|tag1=snippets
…
]]

Syntax

Item name Initial value Description
tag1 none You can specify them one at a time just as you would a normal tag.
fake1 false You can set the title of the link you want to fake.
… … …
tag256 … …
fake256 … …

In action

snippets000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

[[include :snippets:tag
|tag1=snippets
…
]]

This is a tag (fake)!!000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

[[include :snippets:tag
|tag1=snippets
|fake1=This is a tag (fake)!!
]]

Important

Tags used in this syntax do not register with the tag as an article.
colalt

Description

Speaking of multiple collapsibles, there's Boyu12Boyu12's colmod.
I wanted to make a similar one, so I used the collapsible-block code to create multiple collapsibles.
The sooner you see it in action first, the better.

Demo1

Colalt is colalt itself…

+ show

Syntax

And the source code is different in the odd and even layers.
You must be wondering what are odd and even layers?

The first layer of colalt is the first layer, and when you nest the colalt in order, the second layer, the third layer, and so on.
In this case, the odd or even number of n in the n layer is determined by whether the n are odd layer or even layer.

Item name Data type Initial value Description
oddtop [ null(none) Add [ as described above.
oddend [ null(none) Add [ as described above.
eventop [ null(none) Add [ as described above.
evenend [ null(none) Add [ as described above.
show String + show block Open link text.
hide String - hide block Close link text.
nohide true,false false true will not display the close link.
folded true,false true false leaves it open and can be collapsed by the user at will.
In this case, add f at the beginning of oddtop, eventop, oddend, and evenend.
oddtop → foddtop
eventop → feventop
oddend → foddend
evenend → fevenend
This is a See Demo 4 for more information.

Code

You can add/modify parameters as needed by enclosing the part you want to fold with the following colalt.

[[include :snippets:colalt |oddtop=[|show=+open|hide=-close]]
…
[[include :snippets:colalt |eventop=[|show=+open|hide=-close]]
…
[[include :snippets:colalt |evenend=[|show=+open|hide=-close|nohide=true]]
[[include :snippets:colalt |oddend=[|nohide=true]]

In action

Demo 2

If you omit nohide in oddend or evenend and set hide…

+ open

Demo 3

If you omit hide in oddtop or eventop and set nohide=true…

+ open

Demo 4

If you set folded=false…

- close

You can reproduce the collapsible folded="no".
You need to convert it to
oddtop → foddtop
eventop → feventop
oddend → foddend
evenend → fevenend .

[[include :snippets:colalt |foddtop=[|folded=false|nohide=true|hide=- close]]
You can reproduce the collapsible folded="no".
[[include :snippets:colalt |foddend=[|folded=false|show=+ open|nohide=true]]

Demo 5

If you enclose a colalt with [[div class="collapsiblealt"]] and [[/div]]…

Login

Demo6

Important

Cannot be used within [[iftags]].

Cannot be used within [[collapsible]].

Skipping and closing odd numbers causes clutching.
falling-snowflakes-effect

Falling snowflakes over pages

  • Put the code in any page you want the effect.
  • Or put it in the Sidebar to has the effect in all pages.
  • Code no need be inside HTML tags

Code

[[module CSS]]
/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
[[/module]]
[[div class="snowflakes" aria-hidden="true"]]
  [[div class="snowflake"]]
  ❅
  [[/div]]
  [[div class="snowflake"]]
  ❆
  [[/div]]
  [[div class="snowflake"]]
  ❅
  [[/div]]
  [[div class="snowflake"]]
  ❆
  [[/div]]
  [[div class="snowflake"]]
  ❅
  [[/div]]
  [[div class="snowflake"]]
  ❆
  [[/div]]
  [[div class="snowflake"]]
    ❅
  [[/div]]
  [[div class="snowflake"]]
    ❆
  [[/div]]
  [[div class="snowflake"]]
    ❅
  [[/div]]
  [[div class="snowflake"]]
    ❆
  [[/div]]
  [[div class="snowflake"]]
    ❅
  [[/div]]
  [[div class="snowflake"]]
    ❆
  [[/div]]
[[/div]]

In action

► Click here to see full page in action 🔎
html5player

Description

Currently we only have a Flash-based option for audio and video inclusion. These snippets fix that by providing an HTML5-based alternative (which should really be the default by now).

+ show code

Code

You can create audio and video embeds like this:

[[include :snippets:html5player
|type=audio
|url=audio file url
]]

If you want the file to play automatically, do it this way:

[[include :snippets:html5player
|type=video
|url=video file url
|autoplay=true
]]

type should be "video" or "audio".
autoplay is optional and only takes the value "true" if you use it. It's off by default.

Due to how the audio and video elements are implemented, they are not stylable this way, but this embed can of course be extended to provide a custom layout which can be styled.

In action

Table of Contents
mail-to-all-moderators

Description

I haven't found a solution so I don't know if this is the proper way to ask the question. Feel free to remove the page if not the appropriate way!

I would like to know if it is possible to create a link that would open a new mail in outlook that is destinated to all moderators (mail addresses can actually appear in the mail, it's not a problem).

Is it possible to ask the site to go get the mail addresses in the wikidot database or do I have to list all the actual addresses in the code?

The only way I see to do this would be the code below. But I would like to refer to the wikidot database so I don't have to change all the links when there is a change in the staff.

The goal is that the user will warn all moderators when the create a new page. If an automatic solution is available for every page creation it would work as well (even better) but it has to be by mail, as I expect people not to check their private messages on a regular basis.

Thanks!

Code

[mailto:email1@mail.com; email2@mail.com,... click here to contact moderators]
Table of Contents

Thanks to tsangk for this great snippet: conditional-blocks

text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]

Other snippets posted by ErichSteinboeck

Redirect: To - 16 Feb 2012 01:37
Module Listpages Tags - 16 Feb 2012 01:24
Module Feed Drilldown: Details Page - 16 Feb 2012 01:24
Module Feed Drilldown - 16 Feb 2012 01:24
Module Feed: Collapsible - 16 Feb 2012 01:23
Module Categories - 16 Feb 2012 01:23
MiniRecentPosts With Limit - 16 Feb 2012 01:23
ListPages: Horizontal? - 16 Feb 2012 01:20
Choose A Page! - 15 Feb 2012 00:32
Redirect: From (1st) - 01 Mar 2009 18:18
Redirect: From (2nd) - 01 Mar 2009 18:17

Rate this solution

If you think this solution is useful — rate it up!

rating: +1+x
Add a New Comment
toc
page revision: 4, last edited: 16 Feb 2012 01:47
Edit Rate (+1) Tags Discuss (1) History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License