Hi there,
Does "not yet finished!" mean that it does or does not work? Just wanted to check b4 I tried to implement as my CSS skills are still fairly low.
Tag cloud: (all tags)
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
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
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 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.
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]]
You have a text with a word that needs some extra info and you have the extra info.
For Example:
You can transform this:
into 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).
Text : On his voyage with the Beagle,
collected numerous strange plants and animals.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).
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.
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:
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.
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]]
[!-- --]
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.
Steven Heynderickx. Please visit his/her userPage.
Co-author:
James Kanjo. Please visit his/her userPage.
Hi there,
Does "not yet finished!" mean that it does or does not work? Just wanted to check b4 I tried to implement as my CSS skills are still fairly low.
This page is not finished yet. Only started to make this page yesterday. But as far as it is it should be usable… post the URL of your result here if you wish. So we can make a small gallery.
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
Here is a test using the exact code as listed above.
Remember, after you add the CSS code;
1. [Save Settings] button,
2. admin:manage —> appearence —> Themes and set the new "basic_PU" theme and click the [save changes] button.
I'll post another link of this in use when I've finished applying it to the page I originally wanted this to work for.
Thanks heaps Steven!!! Rate it UP!
I'll [[include]] :-) you remark, thank you!
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
http://popuptestzone.wikidot.com/popupinaction shows the effect …
I think at the last line ( "animals") is included wrong - there is the last pipe symbol ("|") missing after he image end-tag …
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
I don't think it had something to do with the pipe |, just a strange image i borrowed from some site… It was in a sequence with other images… I think it works fine now. Thanks anyway
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
I moved it : http://testingzone.wikidot.com/popup:start
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
Hi again,
I have made the template
And used the code below to test it.
[[note]]
I needed to remove the underscore from "[[include includepopup:template" to get it to work at all. AND change 'text' to 'info'
PROBLEM: Have a look at the and you'll see.
Please feel free to edit either of these pages, they are test pages
Try changing
To this
Then rename this page to be includepopup:_template
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, made for Wikidot users (available early 2023)
Made the 2 changes, it still comes up as:
Own Domain Name
info=test
and
{$info} on the rollover.
Okay, just had a look at his website… this time it should work.
For this part:
Change it to this:
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, made for Wikidot users (available early 2023)
Thanks, I made the change 20 sec before you post appeared. :)
I'll post again when I've done the rest.
There is still something wrong with the layering and the z-indez… if a popup appears over an other word, they will mix becaus they are on the same layer (z-index).
I have also encounter this problem, as seen here.
I was wondering if the position of the box could be moved horizontally to the rich just a fraction. This would solve the problem in my situation. Sorry, not sure how to solve it globally.
I get a few more users to have a look at this "How To" and we'll generate some more interest.
Oh my lord, he used the note syntax…
Some time ago you asked us who is using this *€@# code .. :))
Now we know one user…
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
He probably typed it down accidentally… Obviously he meant to create a div block… right… right?
If you changed the left value from 0 to 50px in the .popupitem class (or added it to your own custom CSS) that would solve it.
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Nah Rob, that's not necessary with the code I've provided.
I improved the code significantly. Test it to see how it works on your sites.
Yes, sorry about using "Note" :p
Tested the code, works 100% now, no overlap. VERY well done.
Hey guys, now it works great… I wanted this for a long time so I made it myself. I did not know that the hover function in the CSS would work for a custom DIV. Previously I was using this behavior.htc file on the body{}CSS. but without it it also works… Can anyone report if it works for older browsers or on the mac?… I'll add a grid above.
thanks James to make the code work!
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
I'm a confirmed mac user (Safari & Firefox). IE6 does not work… somebody else will have to check IE7/8, but it should work on both of those.
Please add your specifications to the table above OS en Browser version.
BTW your inline text popup works nicely… a shame that I had to wait so long that I tried it myself and now you come up with a clean solution a few days after I publish my attempt…Did I give you inspiration?
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
Absolutely it did!
Well, actually, it reminded me of a project I'd started a long time ago, but forgotten about: Multiple Menus. Now I know much more about CSS and was able to finish the project.
Thanks for the inspiration =D
Where is an example?
When I read this howto, I am always searching for an example of this technique, that should be the first thing to show.
See this howto: http://community.wikidot.com/howto:inline-hover-tips
There is a link to it at the bottom of this howto, but it's not obvious it has examples. The "In Action" link at the top of the article leads to a page where the example seems partially broken to me.
-Ed
Community Admin
I agree it should be the first thing on the page so….. that's why I have put it there. Maybe that was a bit to 'first' for you :-)
I don't know why Ed is refering to a page away from this tutorial but like he also mentioned in Action on top of the page.
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
Sorry, but when it says "click on this link to see if this is what you were looking for", I'm not enlightened. For one thing, it formats badly on my notebook (firefox, 1024x800 screen).
Also the hdeader is not clear: "mouseover popup" can refer to many things.,
What you're making is a popup glossary, right? Any reason you can't demo that in the article directly?
Sorry if I sound critical. Maybe I can just edit the howto but i'm still new at this wikidot thing.
What the howto should say is,
- why we make glossaries
- why pop-up glossary is better than linked one
- what it looks like
- different styles, examples, options
- how to make it work in your site
- how it works, technical explanation
I guess all this is there somewhere but it's kind of confused…
ANMyhow, nice work.
Because there was a link to it at the bottom of the article and it seemed to work better as an example.
That's what I was trying to point out and why I referenced the other link.
=Ed
Community Admin
Sorry if my comment sounded offensive (maybe not the right word, but your reaction looks like you are irritaded and since I am not english speaking, this is the only word I know)
You are right… I am trying to make a glossary. It is not finished yet. I will explain how to do it soon but I say in this howto:
however… I wish I could make it work in this page… I know it is possible, but I can not acces the CSS of this page… so that's why I can not make it work here for now… If anybody knows where to find the syntax to make 'inline css' with the code-syntax, please make a link to where to find this.
now for your questions
why we make glossaries
why pop-up glossary is better than linked one
I will not answer these because that is not the content of this howto
what it looks like
I will add some print screens… you are right
different styles, examples, options
I mentioned in my howto that you need to know some CSS… This is not the place and I don't have the time to explain CSS. Do you think I need to mark this howto as "for advanced users"?
how to make it work in your site
how it works, technical explanation
I think I did a fair job in this howto… but if you are specific on something that is not clear to you I will gladly try to help you
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
Hi Steven, my "questions" were not really questions but more a suggestion of how to organise the howto so that it made more sense. I really like the images you've posted,t hat makes it clearer.
Before that I couldn't really understand what you were doing that was different to other pop-up techniques like this one http://blog.wikidot.com/blog:pop-out-edit-help.
to access the CSS of this page you need to be admin of the site, or ask an admin of the site.
sorry to sound critical, i'm not, just trying to provide feedback.
Don't forget to post your site where you make use of this popup if it is open for public…
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
Here I have used it to great effect.
As you can see, I added your site at the top.
Sorry for not asking permission to get the screenshot of your site… After the mail I don't think you mind… But anyway next time I will ask first.
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
Not a problem. =D Link to HobStarCS?
I've also used a link in "Own Domain Name" to an external website that works perfectly.