# Difference between revisions of "Help:Wiki Tricks"

Welcome to the Wiki Tricks page. Here you can find how to reproduce some of the cool functionality you've seen on this wiki.

# Stuff from this summer

• Iris's fancy hide/show stuff
• Anchoring images
• Update the mouse-over syntax
• Update the "Hide This" syntax (unless it's already right)
• what else?

# The Basics

## Images

To put an image on a page, like: , use the code:

[[Image:Example.jpg]]


after you have uploaded it. You can also specify that you want the image to be aligned right or left of text by writing:

[[Image:Example.jpg|right]] OR  [[Image:Example.jpg|left]]


and you can scale the image by giving it a pixel number, like this

[[Image:Example.jpg|350px]]


produces something like

For links to pages in this wiki such as "Newton's Basin", use the code:

[[Page Name| text you want shown]] OR [[Page Name]]


the latter code is used when the text you want shown is simply the page name. And, yes, when specifying the page name, cAsE MaTTerS.

For a link to an outside webpage, such as wikipedia, use the code:

[PageURL textYouWantShown] OR [PageURL]


the second will just show the URL as the link.

## Splitting Text into Columns

### Two Columns

• To format text into two columns, do the following:
 <div style="float: left; width: 50%">
Info for first column
</div><div style="float: left; width: 50%">
Info for second column
</div>


Info for first column

Info for second column

### Three Columns

• And, to get text into three columns, use the following code:
 <div style="float: left; width: 33%">
Info for first column
</div><div style="float: left; width: 33%">
Info for second column
</div><div style="float: left; width: 33%">
Info for third column
</div>



Info for first column

Info for second column

Info for third column

## Mouse Overs

To generate a , use the code:

<balloon title="Text you want in balloon.">text for mouseover</balloon>


To generate a with images, math, and links.

 <balloon title="load:Title of Content">text for mouseover</balloon>
<span id="Title of Content" style="display:none">Text, links, math, images you want in balloon</span>


### Easier mouse overs

For an easier mouse over with math and images included, use the code :

{{EasyBalloon|Link=text for mouseover|Balloon=text inside the balloon, including math $x^2+y^2=z^2$ and images


A number $n$ is a triangular number if $n$ number of dots can be arranged into an equilateral triangle evenly filled with the dots. As shown in theimage below, the sequence of triangular numbers continue as $1, 3, 6, 10, 15, 21, \dots$. Triangular numbers are given by the formula : $\frac{n(n+1)}{2}$}}

## Hide/Show

### Basic Hide/Show

To hide a block of text, for example:

Like this!

use the code:

{{hide|Text you want hidden}}


if your text contains an "=" sign, you must use the code:

{{hide|1=Text you want hidden}}


otherwise it appears as {{1}} in your page, which is silly.

### "Hide This"

The HideThis option allows you to specify what it is you want to hide. For example,

{{HideThis|1=<text to follow hide/show>|2=<text to hide>}}

### SwitchPreview

If you have two sets of text that you'd like to switch between--for example, one for the preview and one for the actual content, the code for this is:

{{SwitchPreview|ShowMessage=Click to expand|HideMessage=Click to hide|PreviewText=Text to be shown as preview|FullText=The actual text different from the preview|NumChars=75}}


which produces:

Text to be shown as preview

The actual text different from the preview

You can get rid of the part that determines the number of characters to show in the preview by deleting |NumChars=__ .

### HideShow for equations

When you want to show some math as a preview to Hide/Show and want some mathematical equations to show in gray as other preview text, use the same SwitchPreview above and specify the color of the equations by :

{{SwitchPreview|ShowMessage=Click to expand|HideMessage=Click to hide|PreviewText=Hi there, this is a sample ${\color{Gray}a^2+b^2 = c^2}$ equation.|FullText=Hi there, this is a sample ${a^2+b^2 = c^2}$ equation. I might follow it with a proof. Maybe.|NumChars=75}}


This will produce :

Hi there, this is a sample ${\color{Gray}a^2+b^2 = c^2}$ equation.

Hi there, this is a sample ${a^2+b^2 = c^2}$ equation. I might follow it with a proof. Maybe.

One thing to be careful is that when the preview shows a part of the math equation, the preview will appear very weird, such as

This will cut the equation in the middle. ${\color{Gray}a^2+b^2 = c^2}$. [...]

The preview cut the equation in the middle. ${a^2+b^2 = c^2}$.

In this case, change the PreviewText so that either the preview shows all of the math or doesn't show any math at all.

If you have several equations that you want to fit on multiple lines with the equals sign lined up in a column, you can use the template "AlignEquals":

Example:

<template>AlignEquals |e1l=3/2 |e1r=1.5 |e2l=2/3 |e2r=0.3333... |e3l=13/8 |e3r=1.625 </template>

To do this, you should use the code:

 <template>AlignEquals
|e1l=3/2
|e1r=1.5
|e2l=2/3
|e2r=0.3333...
|e3l=13/8
|e3r=1.625
</template>



where you fill in e1l with the content of the left side of your first equation, e1r with the content on the right side of your first equation, etc. Currently, the template handles up to 10 equations.

## Numbering Equations

We can number equations using either a two-part code or a three-part code.

Two-part code

When using the two-part code, use :

{{EquationRef2|label or equation number}}


For instance, when you can use the code :

{{EquationRef2|Eq. 1}}  $x^2+y^2=z^2$


and it will appear as :

Eq. 1        $x^2+y^2=z^2$

When later referring back to the numbered equation, use the code :

{{EquationNote|label or equation number}}


An important thing to remember is that the 'label or equation number' part should be exactly the same for EquationRef and EquationNote. For instance, we can write

{{EquationNote|Eq. 1}}


and clicking on Eq. 1 will refer us back to the original equation.

Three-part code

When using a three-part code, use:

{{EquationRef2|label that you will remember|label that will appear on the page}}


For instance, you can label a equation as pythagorean theorem but make it appear as Eq. 2 by using :

{{EquationRef2|Pythagorean Theorem|Eq. 2}}$x^2+y^2=z^2$


and it will appear as :

Eq. 2         $x^2+y^2=z^2$.

When later referring back, as long as you make the 2nd part of the "EquationRef2" the exact same, you can change the 3rd part, and you will still be able to refer back to the equation. For instance, you can use :

{{EquationNote|Pythagorean Theorem|Equation 2}}


and Equation 2 will refer you back to the original equation.

## Pausing GIF Animations

To enable pausing of gif animations, use the code:

<pausegif id="1" wiki="no">Hypotroc2.gif</pausegif>


where id can be anything, as long as multiple paused gifs on the same page DO NOT have the same name.

Click to stop animation.

# Embedding Videos, Applets, Etc.

## Embedding Videos

You can embed youtube videos by using the code

{{#ev:youtube|xI2eEcqz46E}}


where the xI2eEcqz46E represents the id assigned by youtube (you can find it in the URL of your video (e.g. www.youtube.com/watch?v=xI2eEcqz46E).

...and you can embed parts of youtube videos by using the code:

{{#ev:tubechop|xI2eEcqz46E&start=10&end=20}}


where start and end are the value (in seconds) of where in you want the clip to start and end.

## Embedding Flash Movies

To embed flash movies (.swf files) on a page, first upload your file, then use the code:

<flash>file=filename.swf|attribute=value|...</flash>


"attributes" include width,height,scale,id. For example:

flash>file=cool.swf|width=200|height=300|bgcolor=#FDE742|scale=exactfit</flash></wiki>


## Embedding Java Applets

To embed Java Applets on a page, first upload your file(s) and then use the code:

<java_applet code="Example.class"  height="150" width="150" archive="Example.jar" />