TOC's from many pages

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

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]

Fold

Table of Contents

Description

Code

put-comments-in-the-editor-that-won-t-show

Description

So my colleague and I needed this function but we could not find it on wikisyntax. The purpose is to put it in a template in order to warn the writer to read some instructions first.

I know its certainly obvious for the most of you but I thought it could be useful for other noobs like us :)

Code

So we found this solution:

 [[HTML]] <!-- This is a comment. Comments are not displayed in the browser --> [[/HTML]]

However, if you know another way that is more simple or if you think of other functions that could be useful with this one, you are more than welcome!

Have a nice day.

Table of Contents

Description

This is a variation of the Bootstrap Image Box which transposes images into a Bootstrap modal upon being clicked.

To see how this works, click here!

Instructions

To use this snippet, paste the following code and fill in the desired fields:

If you leave a field blank, then a default value will be applied instead. The below table shows you the possible values and what each field does:

NOTE: Do not use quotes when filling out fields (unless you want quotes to display).

Attribute	Default Value	Description
name	Required!	A UNIQUE name for the image that does not contain any spaces.
image	Required!	The URL of the image to be displayed.
heading	Hidden	The title of the image, displayed over the image.
caption	Hidden	Description of the image or its context, displayed under the image.
link	The Image URL	Web location that the user is directed to when the image is clicked. When supplied with a value of `none`, the link will be deactivated.
title	Hidden	Text that appears when the user hovers over the image long enough.
alt	Image Unavailable	Text that appears when the image at the specified URL does not exist.
max-width	auto	The maximum width the image should be. Scales when the screen width becomes small enough.
width	auto	Forces the image to always be at this width.
float	middle	Aligns the image to either the `left` or `right`.
force-float	false	When `true`, the image will always float regardless of screen size.
kind	default	Can be one of the Bootstrap predefined color schemes: `primary`, `warning`, `danger`, `info`, or `success`. Changes the scheme of the image box to that specified.
size	md	Can either be `lg`, `md`, or `sm`. This adjusts the width of the modal, where `lg` is large, `md` is medium, and `sm` is small.

CSS Customization

Like its predecessor, the Modal Image snippet may be easily customized for your site via CSS. Use the following classes for customization:

Class	Description
image-box	The overall Image Box
image-box-modal	The modal box that appears when the image is clicked
image-box-heading	The heading area above the image
image-box-image	The image area where the image itself resides
image-box-caption	The caption area below the image

You may also use the following Bootstrap-specific classes that correspond to the kind field (see above):

Class
image-box-warning
image-box-danger
image-box-info
image-box-success

How do I…

…disable the link on the modal so the user cannot get to the image itself?
- Give the link field the value none, and the link will be deactivated.
…disable the link so the modal does not appear?
- Use the regular Bootstrap Image Box instead.
…make the image respond to the device?
- This is done automatically unless you gave a value to the width field. To maintain screen responsiveness, we recommend you use max-width instead.
…make it so the image box is not bigger than the image?
- Supply a value to the max-width field.
…allow the user to navigate through a gallery of images?
- This is not the tool you want to use. Instead, we recommend looking at the Carousel snippet.
…it doesn't work!
- Your site probably does not have Bootstrap enabled. Read more about this here.
…so uh, your image thing is hideous.
- If you do not like how it looks, you can define your own CSS using the CSS classes stated above in the "CSS Customization" section.
…your snippet doesn't do what I want.
- Unfortunately, I cannot cater to everyone's needs. If you wish, you can copy the source code directly and hence have total power over its operation.

Table of Contents

Description

This is a simple countdown timer. I Slightly edited it to fit for the holidays.

Code

<script type="text/javascript">
today = new Date();
BigDay = new Date("December 25, 2014"); // Change date to countdown to
msPerDay = 24 * 60 * 60 * 1000 ;
timeLeft = (BigDay.getTime() - today.getTime());
e_daysLeft = timeLeft / msPerDay;
daysLeft = Math.floor(e_daysLeft);
e_hrsLeft = (e_daysLeft - daysLeft)*24;
hrsLeft = Math.floor(e_hrsLeft);
minsLeft = Math.floor((e_hrsLeft - hrsLeft)*60);
document.write("Er zijn nog maar : <BR> <H4>" + daysLeft + " dagen " + hrsLeft +" Uren " + minsLeft + "  minuten over</H4> Tot het Kerstmis is! <P>"); // you can change the words, Don't change the methods 
// origineel afkomstig van moonfruit.com Aangepast door Massimo methode aangepast en vertaald 
</script>

Blank version ( for easy editing)
Dont forget the html tag when inserting

<script type="text/javascript">
today = new Date();
BigDay = new Date("Month dayofmonth, year"); // Change date to the day you would like to countdown to
msPerDay = 24 * 60 * 60 * 1000 ;  // Vbs
timeLeft = (BigDay.getTime() - today.getTime());// Vbs
e_daysLeft = timeLeft / msPerDay;// Vbs
daysLeft = Math.floor(e_daysLeft);// Vbs
e_hrsLeft = (e_daysLeft - daysLeft)*24;// Vbs
hrsLeft = Math.floor(e_hrsLeft);// Vbs
minsLeft = Math.floor((e_hrsLeft - hrsLeft)*60);// Vbs
document.write("there are only ... the days left will come after this " + daysLeft + " Days  " + hrsLeft +" Hours " + minsLeft + "  Minutes</H4> Until it is ... your reason of count down like my birthday or ... <P>"); 
// I started this from something I got from moonfruit.com  Credits for them. 
</script>

That's how it would look like

Fold

Table of Contents

Description

Code

That's how it would look like

html-embed-code-opening-in-new-window-tab

Description

With "html" command ( embed a foreign code) on a page you can insert near all scripts from external suppliers in your wiki-page ( see also snippet Use any html code on a page ).

The problem: sometimes you need the embbeded script called in your page that it is "opening in a new tab/window "

Thanks to Timothy Foster !
There is an information from him on the community forum Thread Html & New Windows which is very clever solving this problem.
I have copied his post here for better understanding:

Code

Currently your iframe looks like this:

[[html]]
<script src="http://www.reddit.com/r/karate/top/.embed?limit=5&t=month" type="text/javascript">

</script>
[[/html]]

Change it to this:

[[html]]
<base target="_blank" />
<script src="http://www.reddit.com/r/karate/top/.embed?limit=5&t=month" type="text/javascript"></script>
[[/html]]

Source info: http://stackoverflow.com/questions/1037839/how-to-force-link-from-iframe-to-be-opened-in-the-parent-window
Test Page: http://tarm.wikidot.com/iframe-newwindowall

the little line @base target="_blank" /@ makes the trick…!

In action

Test Page: http://tarm.wikidot.com/iframe-newwindowall

Thanks Timothy!

Table of Contents

todo-list-with-dataforms

Description

A "normal" Wikidot way to make a "Todo List" using a Data Forms _template ( which have to be copied from the snippets here ( or used by include!) and the standard listPages module

Code

 [[include :snippets:todo:_list]]

You need on your own site:

setup in the _admin page the autonumbering of category "todo:"
( in section "Appearance & Behaviour", see our Handbook)
a page called "todo:_list" ( can be copied or [[include :snippets:todo:_list]] !)
a page called "todo:_template" (( can be copied or [[include :snippets:todo:_template]] !)

Note: if you want to copy the _template dataforms definition than you should use the edit button left top and not the source to show the definitions!

In action

([[include :snippets:todo:_list]])

Add a new ToDo-item

Done?

Title

Text

EDIT

The ListPages module does not work recursively.

Notice

Summary on Todo:_List, used dataform _template on Todo:_Template
if you want to change parent or tags - use the normal page options buttons outside the edit of dataforms
comes from Snippets :Todo-List with Dataforms

Now you can add, remove, rename, (un)check items or add links to items.

click the title or the EDIT to edit it
change or remove parents or tags over the standard page options buttons

Table of Contents

Description

Twitter's Bootstrap comes with image carousel functionality built in. This snippet allows you to generate carousels very quickly and easily so that you do not have to look up or memorize Bootstrap's syntax.

This snippet will only work on Boostrap enabled sites! Want a Boostrap site? See the Standard Template for more info.

If you are not using a Bootstrap site, you can use an alternate method. Go to this link, fill in the fields you need to use (following the same rules as listed below), and save the page. When the page loads, you will see a working carousel. To use it, scroll to the bottom of the carousel where you will find an embed code. Copy and paste that embed code into your site.

Syntax

Attribute	Default Value	Description
id	Required!	A unique id that identifies the carousel. This name should not belong to any other carousel on the page.
interval	5000	The time between the automatic image slides in milliseconds. If you set this to `false`, then images will not transition automatically, waiting for user input instead.
pause	hover	The mouse action that defines when the carousel is paused.
wrap	true	The carousel will continue to run even when it hits the end; it will stop if set to false.
indicators	showing	If you set this to `hidden`, the image indicators that allow you to hop immediately to certain images will become invisible
imageMain	Required!	The primary image for the carousel. This will show first upon page load.
imageMainAlt	Not Available	Text message that appears if the main image is unavailable.
imageMainCaption	nothing	Message that appears under the main image
image01	nothing	Another image on the carousel.
image01Alt	Not Available	Text message that appears if the image is unavailable.
image01Caption	nothing	Message that appears under the image
image02	…	Same as above
image02Alt	…	…
image02Caption	…	…
…	…	…
image99	…	…
image99Alt	…	…
image99Caption	…	Supports up to 100 images

Important Note! In order for the carousel to function properly, you must use consecutive image numbers! In other words, avoid defining images for 03, 08, and 21 without anything else in between. Use the proper numerical order (01, 02, 03, etc). There isn't a problem if you have indicators set to hidden.

Code

[[include :snippets:carousel
|id=my-carousel
|interval=6000
|imageMain=http://timothyfoster.wdfiles.com/local--files/filestore:testimage/testImage.png
|image01=http://timothyfoster.wdfiles.com/local--files/filestore:testimage/testImage.png
|image01Caption=+++ Title
This is a test
|image02=http://timothyfoster.wdfiles.com/local--files/filestore:testimage/testImage.png
|image03=http://timothyfoster.wdfiles.com/local--files/filestore:testimage/testImage.png
|image04=http://timothyfoster.wdfiles.com/local--files/filestore:testimage/testImage.png
]]

In action

You can see a live example at this link.

Table of Contents

Description

This snippet will add the official Wikidot facebook button to your wikidot page. This allows visitors to post on facebook about the page they are on by displaying a popup window, meaning they don't need to leave your site.

Code

[[social facebook]]

In action

(You can also use the button in a live template…-see as an example on one of the Community-Blogs: http://community.wikidot.com/blog:tweet-button-snippet-now-available where the twitter and google+ button are used also

Table of Contents

Thanks to tsangk for this great snippet: conditional-blocks

text above inserted with:

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

Wiki Code Snippets

Snippets

Description

Code

In action

Description

Code

In action

Description

Code

Description

Code

Description

Instructions

CSS Customization

How do I…

Description

Code

That's how it would look like

Description

Code

In action

Description

Code

In action

Description

Syntax

Code

In action

Description

Code

In action

Rate this solution