How to make MouseOver-Popup

Posted by Steven Heynderickx on 24 Aug 2009 17:39, last edited by Steven Heynderickx on 23 Apr 2012 20:46

Tags: glossary mouseover popup

rating: +8+x

THIS PAGE NEEDS UPDATING!!

Depending on what the function of the popup is, there are different solutions. The first and the most simple one is the adjusted footnote function of wikidot. However a combination of popups and footnotes becomes difficult in one page.

Here is what you can do if you want popups in your page and you are not using footnotes in your text.

Include the following code in your page
[[include :csi:include:popup]]
And then just insert a [[footnote]] with your popupcontent [[/footnote]] at the spot where you want it in your text.

This is a simple way to get more info into your text1

The text below became outdated

In action

Before you start reading, have a look at http://testingzone.wikidot.com/popup:start and see if this is what you are looking for.

Here is a list of sites that use this popup

This HowTo

This Howto explains how you can make some text or even images visible by the use of a mouseover or hover. To make this possible you need to know some CSS and you need to have access to the admin-side of the website.

Even more: if you use it together with _templates you can even generate a glossary with it.

Inline version

Step 1 Apply CSS

Just place this code on any page you are going to use the popup on:

[[module CSS]]
@import url(http://community.wdfiles.com/local--code/howto:popup);
[[/module]]

Step 2 Make your wikipage

You have a text with a word that needs some extra info and you have the extra info.

For Example:

You can transform this:

Text : On his voyage with the Beagle, Charles Darwin collected numerous strange plants and animals.

Extra info : 1809 February 12 Charles Robert Darwin was born at The Mount in Shrewsbury, Shropshire, England. He was named after his uncle (Charles) who had died a few years back, and his father (Robert).

into this:


Text : On his voyage with the Beagle,

Charles Darwin

Extra info:1809 February 12 Charles Robert Darwin was born at The Mount in Shrewsbury, Shropshire, England. He was named after his uncle (Charles) who had died a few years back, and his father (Robert).

collected numerous strange plants and animals.

This is done using the following code:

Text : On his voyage with the Beagle, 
[[div class="popup"]]
Charles Darwin 
[[div class="popupitem"]]
[[div class="popup-container"]]
Extra info:1809 February 12 Charles Robert Darwin was born at The Mount in Shrewsbury, Shropshire, England. He was named after his uncle (Charles) who had died a few years back, and his father (Robert).
[[/div]]
[[/div]]
[[/div]] collected numerous strange plants and animals.

So far the simple inline version. This is the simple version because no other files are needed, but as you can see the wikiCode becomes quite messy. The more complex but less messy one is one that uses the include function with transferring variables.

Include version

If you would like to make several popups in one page… there is a lot of code that gets duplicated in the page. This makes your wikicode long and not clear. Therefore you can use the include function. It collects some code from a page and pasts it there where it was called upon. But we can also send variables with the include request. All these things together gives us the following:

  • A wikipage
  • An include function in the wikipage
  • Two variables : a word and extra info
  • An include page

Step 1 the wikipage with the include function

If you never worked with an include function you can find more info here http://www.wikidot.com/doc:wiki-syntax#toc45

On his voyage with the Beagle,
[[include includepopup:_template
word=Charles Darwin |
info=Extra info:1809 February 12 Charles Robert Darwin was born at The Mount in Shrewsbury, Shropshire, England. He was named after his uncle (Charles) who had died a few years back, and his father (Robert).]]
collected numerous strange plants and animals.

As you can see the two variables are indicated in red, the include page is green.

Step 2 the include page

Make a new page called "includepopup:_template" and paste the following code in there. If you understand the code, adjust it so that the looks of your popup are as you wish.

[[div class="popup"]]
{$word} 
[[div class="popupitem"]]
[[div class="popup-container"]]
[[table]]
[[row]]
[[cell]]
[[div style="max-height: 250px; overflow: auto;"]]
{$info}
[[/div]]
[[/cell]]
[[/row]]
[[/table]]
[[/div]]
[[/div]]
[[/div]]
[!-- --]

How it looks

printscreenpopup.gif

If you change your CSS many things are possible. You can also change the include file for example here I made a link to even more info on the topic of the word that is beeing hovered.

printscreenpopup2.gif

Known issues and bugs

The popup alway apears on the right hand side, and it has a certain width (wich you can change)… so if your word stands at the end of the line, the popup will appear off the screen. So I limit the width of my content field.

Also if you leave a blank line in your wikicode, there will be no new paragraph. If you want a blanc line you need to type "_" as described @ http://community.wikidot.com/howto:howto:embelish-text:examples#force-multiple-line-breaks. This is because of the fact that we made the DIV's "inline blocks with the CSS. You could change the CSS-code and also use a thechnique that is descibed @ http://community.wikidot.com/howto:include-inline using the backslash and remark.

Platform Issues
Windows XP Firefox 3.0 works fine
Windows XP IE 8 works fine
Windows XP Google Chrome 2.0 works fine

Please report problems.

Backlinks (pages that refer to this one)

Author

Steven HeynderickxSteven Heynderickx. Please visit his/her userPage.



Co-author:

James KanjoJames Kanjo. Please visit his/her userPage.

Comments

Add a New Comment

Related articles

Comments

Add a New Comment
Footnotes
glossarymouseoverpopup
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.