Mark Your Jump

No difference available. This is the first major revision.

» superaffiliate » Open Wiki » Open Wiki In Dot Net » Dzx Czx » Open Wiki/Extensions/Mark Your Jump

Mark Your Jump

Mark your jump is a super easy extension that help your visitor to know where they had jumped into.

Actually it just make use of :target in CSS3... for detail, see Mark Your Jump in CSS Play.

Currently it only works for jumps from <TableOfContents>, and only browsers which support CSS3 (for instance, only Mozilla and its derivatives).

Try my table of contents using Gecko-based browsers to see what happens...

In order to use :target in CSS, the traditional anchor point need to be modified a little bit. Change

sReturn = "<a id=""h" & (gTOC.Count - 1) & """/><h" & vLevel & ">" & pText & "</h" & vLevel & ">"

at line ~825 to

sReturn = "<div id=""h" & (gTOC.Count - 1) & """><h" & vLevel & ">" & pText & "</h" & vLevel & "></div>"

Then add this CSS styles for the target div:

:target {
    background-color: #ffffcc;
    border: 1px black solid;
}

You might also like to try :before and :after: to add stuffs before and after the target div:

:target::before {
    content: "before the target -->";
}

:target::before {
    content: "<-- after the target";
}

You can also use images. This add an image before the h1 inside the target div:

:target h1:before {
    content: url( before.png );
}

Obviously, you can use any CSS styles...

- Ng Ming Hong (22 Mar 2004)