Klik vinduet for at lukke hjælpen
It requires 4 steps to get it started
The steps are given below.
To read this, you should at least be familiar with Screwturn snippets, and optionally be familiar with Javascript, JQuery and HTML.
Write a snippet called 'tutorbutton'
If you dont know how you can use my code.
Snippet
tutorbutton can exist as many times you need on a page.
<span
style="display:none;"
class="tutorbutton"
id="tutorbutton_?navn?"
onclick="return tutor_show('?navn?', '?filter?', '?y-offset?', '?x-offset?', '?beskrivelse?');"
>?linktekst?</span><span
style="display:block;"
class="tutorwarning">Du mangler at indsætte <b>{s:tutorpage}</b> i toppen af siden</span>
Write a snippet called 'tutorpage'
If you dont know how you can use my code.
Snippet
tutorpage should exist only once at the top of pages, that also have any number of
tutorbutton snippts further below.
<style>
.tutorwarning{
display: none !important;
}
.tutorbutton{
display: inline-block !important;
height:18px;
line-height: 18px;
vertical-align: baseline;
cursor:hand;
background-color: #d6d8db;
margin-top: 3px;
margin-bottom: 3px;
text-decoration: none;
color: black;
paddding:2px;
}
.tutorbutton:hover{
text-decoration:none;
color:blue;
}
.tutorbuttonvisited{
background-image: url('{UP}/Icons/Filter.png');
background-position: left top;
background-repeat: no-repeat;
padding-left: 10px;
}
</style>
<div id="tutormarker" style='
position:absolute;
border:5px solid #faa;
display:none;
top: 0px;
left: 0px;
z-index:50;
'></div>
<div id="tutorinfo" style="
display:none;
cursor: hand;
max-width: 200px;
position:absolute;
top: 0px;
left: 0px;
text-align:center;
color:white;
border:1px solid #aaadaf;
padding:3px;
background-color:#8af;
z-index: 100;
" onclick="return tutor_hide();">
<div style="
text-align:left;
color:black;
border:1px solid #cacdcf;
background-color: white;
padding: 3px;
"></div>
Klik vinduet for at lukke hjælpen
</div>
<nowiki>
<script>
speed = 'fast';
function tutor_show(name, element, yoff, xoff, text){
tutor_hide(tutor_setvisible, name, element, yoff, xoff, text);
$("#tutorbutton_" + name).addClass("tutorbuttonvisited");
return false;
}
function tutor_setvisible(name, element, yoff, xoff, text){
offs = {'x': parseInt(xoff), 'y': parseInt(yoff)};
rect = {'left': 0,'top': 0,'width': 0,'height': 0};
eitem = $(element);
// er #[0] et image element
if(eitem.get(0).tagName == 'IMG' && eitem.attr('usemap'))
{
// find mapname, og dermed find area og dermed find image koordinater
c = $('#' + eitem.attr('usemap') + ' area:eq(' + name + ')').attr('coords').split(',');
rect.left = eitem.offset().left + parseInt(c[0]);
rect.top = eitem.offset().top + parseInt(c[1]);
rect.width = parseInt(c[2]) - parseInt(c[0]);
rect.height = parseInt(c[3]) - parseInt(c[1]);
}
else
{
rect.left = eitem.offset().left;
rect.top = eitem.offset().top;
rect.width = eitem.outerWidth();
rect.height = eitem.outerHeight();
}
$("#tutorinfo").css({
"left": rect.left + offs.x + "px",
"top": rect.top + offs.y + "px"
});
$("#tutorinfo div").html(text);
if($("html").scrollTop() > eitem.offset().top)
{
$("html").scrollTop(eitem.offset().top - 30);
}
$("#tutormarker").css({
"left": (rect.left - 5) + "px",
"top": (rect.top - 5) + "px",
"width": (rect.width) + "px",
"height": (rect.height) + "px"
}).show(speed,
function(){
$("#tutorinfo").show(speed,
function(){
if($("html").scrollTop() < ($("#tutorinfo").offset().top + $("#tutorinfo").outerHeight() - $("html").innerHeight()) )
{
$("html").scrollTop(($("#tutorinfo").offset().top + $("#tutorinfo").outerHeight() - $("html").innerHeight() + 4));
}
}
)
}
);
};
function tutor_hide(callback, name, element, yoff, xoff, text) {
$('#tutormarker').hide(speed,
function() {
$('#tutorinfo').hide(speed,
function() {
if(typeof(callback) == 'function') {
callback(name, element, yoff, xoff, text);
}
}
);
}
);
return false;
}
</script>
</nowiki>
Create a screendump and an imagemap for it¶
The MAP tag for html is not used that often, but they are quite usefull for this purpose. I came up with a different way to use them. I use the MAP tag to hold data about where to highlight the map, instead of the normal, to implement clickable areas.
Here is how:
Take a screendump of the frontend you want to share knowledge about, save it to disk. You can use Win7 snippet tool or just press PRINT SCR key, and paste all into your paint program.
Use your favorite paint program to cut and scale the screendump, I prefer
Paint.net. 75% scaling is good, and then and cut away not needed areas at top, left, bottom and right sides.
Go to
image map website and upload the image, draw the areas you want to work with. An important issue is: use rectangles only.
Get the HTML for the imagemap back, and edit the returned text in your notepad. Edit long names like the map id to a shorter version. Remember to edit all copies of an ID you edit. Remove also anything inside area tags except for
coords. The map is not supposed to be working with the browser, the tutorpage code needs only coords to work. Also upload the image to your wiki, and edit the URL for the image to point to your version in the wiki code.
Cut and paste both the generated/edited IMG tag and the MAP tag to your wiki page.
Write a page like this
{s:tutorpage}
<img id="MyImage" src="{UP}/MyImage.png" usemap="MyImageMap" border="0" width="745" height="449" alt="" />
<map id="MyImageMap">
<area coords="580,58,612,74" />
<area coords="616,58,684,73" />
<area coords="689,59,736,74" />
<area coords="8,81,479,99" />
<area coords="245,120,261,138" />
<area coords="300,121,316,139" />
<area coords="227,120,243,138" />
<area coords="191,120,207,138" />
<area coords="210,120,226,138" />
<area coords="549,120,585,141" />
<area coords="7,117,585,141" />
<area coords="8,141,732,444" />
<area coords="11,1,151,21" />
<area coords="7,102,203,120" />
<area coords="0,0,744,448" />
</map>
{s:tutorbutton
| navn = 0
| filter = #MyImage
| y-offset = 10
| x-offset = 10
| beskrivelse = This is the button text for button 0
| linktekst = This is the textual description for area with index 0 in the image
}
{s:tutorbutton
| navn = 1
| filter = #MyImage
| y-offset = 10
| x-offset = 10
| beskrivelse = This is the button text for button 1
| linktekst = This is the textual description for area with index 1 in the image
}
{s:tutorbutton
| navn = 2
| filter = #MyImage
| y-offset = 10
| x-offset = 10
| beskrivelse = This is the button text for button 2
| linktekst = This is the textual description for area with index 2 in the image
}
What are the tutorbutton parameters
I am Danish so, the names are Danish, but you can fix that if you want to and have the skills.
- navn
- for image maps this is the zero based index of the areas in the image map's map.
- filter
- filter is the same in English. Filter is the JQuery filter to find the image. If the ID for the image is ID="SomeImage", then the filter should be #SomeImage.
- y-offset
- the y-offset (down the image) for the div shown with the help text you define in the beskrivelse field. You can use negative numbers too.
- x-offset
- the x-offset (to the right of the image) for the div shown with the help text you define in the beskrivelse field. You can use negative numbers too.
- beskrivelse
- The textual description of the point on the image being explained
- linktekst
- The text on the button to show the help for the point in the image.
How does it work
When the image and its imagemap are pasted into the document, the shown webpage contains the id of the image and the corresponding map for the image. The map is a set of areas specified with coordinates relative to the image.
The tutorbutton snippet inserts a button formatted to show a gray button with some text into. The button also contain a onclick, that calls some code stored in the tutorpage snippet. The tutorbutton snippet has a few parameters you specify when you add the snippet to the page. The most important parameters that makes the code place the popups, are the image id and the area index, while other parameters define the texts and some x y offsets.
A nice little css trick has been implemented in the tutorbutton, to show a warning to the user, only if the tutorpage snippet is not added to the page.
When the tutorpage code is called, it will locate the image, then locate the map, find the coordinates of the image and the area you specified in the
navn parameter.
With these coordinates a red bordered div is set up to mark the area of interest on the image, and a blue bordered div is set up to show the text you define in the
beskrivelse parameter.
Much of the code ensures the JQuery can animate appearance and disapperance for the red and blue div.
But wait, there is more
The tutor system with these two snippets can actually find anything on the page.
If the target specified in
filter is
not an IMG tag, with an attached map, the tutorpage code switch mode, and instead tries to find the target in the page's DOM. Filter is actually a
JQuery selector returning DOM elements. The first found element is marked and the blue framed text can then descripe the element. Lets say we want to show a help text for the wiki systems dicussion button. In this mode,
navn must be unique for all that pages tutorbuttons.
You can then create a tutorbutton like this:
{s:tutorbutton
| navn = dischelp
| filter = #DiscussLink
| y-offset = 25
| x-offset = -100
| linktekst = Show me how I can participate in a pages discussion
| beskrivelse = Click on this link to enter the pages discussion. Each page in the wiki has its own discussion forum. Everyone can participate and comment the page.
}
Show me with page elements
How do i edit a sectionDu mangler at indsætte {s:tutorpage} i toppen af sidenCome back here to see the checkmark that indicates you have clicked this item.
The checkmark is nice, if the user has 20 or more items to click through for a tutorial.
The button above looks in page code like this. It only requires the two snippets and the checkmark image.
{s:tutorbutton
| navn = exampleA
| filter = #PageContentDiv .editsectionlink:eq(7)
| y-offset = -30
| x-offset = -220
| linktekst = Show me an example please
| beskrivelse = the edit section link allows you to edit the page partially. When you save after edit, that section of the page is merged into the final page contents. At the same time, a new version of the complete page is created.
}
Show me on image
Save buttonDu mangler at indsætte {s:tutorpage} i toppen af siden
Save & Continue buttonDu mangler at indsætte {s:tutorpage} i toppen af siden
Page titleDu mangler at indsætte {s:tutorpage} i toppen af siden
The code for this image and the three buttons looks like this in the page code.
<img id="myimage" src="{UP(Henriks.How-to-make-a-crash-course-using-Screwturn-Wiki)}Udklip.PNG" usemap="mymap" border="0" width="741" height="250" alt="" />
<map id="mymap">
<area shape="rect" coords="579,4,610,20" />
<area shape="rect" coords="615,4,683,20" />
<area shape="rect" coords="6,17,477,33" />
<area shape="rect" coords="7,84,730,245" />
<area shape="rect" coords="9,65,582,85" />
</map>
{s:tutorbutton
| navn = 0
| filter = #myimage
| y-offset = 20
| x-offset = -150
| linktekst = Save button
| beskrivelse = Press this to save your text
}
{s:tutorbutton
| navn = 1
| filter = #myimage
| y-offset = 20
| x-offset = -150
| linktekst = Save & Continue button
| beskrivelse = Press this to save your text and continue to edit
}
{s:tutorbutton
| navn = 2
| filter = #myimage
| y-offset = 20
| x-offset = 50
| linktekst = Page title
| beskrivelse = Set the page title here
}
What more
We could discuss design here, but you can just change all that. My examples above are not pretty on this site, since I have copied it from another project is was working on. everythins is put in the snippet, so its easy to play with styles.
With JQuery you can do amazing things with very little code and this is an example of what you can do. This example, can easily be expanded to a tutorial-framework if you give it enough manhours.
Well, I hope I have inspired someone out there.