Tinderbox Forum

Hover Effects on Export HTML

Hello - Does anyone have any suggestions or experience with Hover effects (presumably using Javascript) which are applied to exported HTML and thus work for a project ultimately hosted on the web?

Whilst if you know the code to use you can add it in a template or exported JS document, web site design is not a part of Tinderbox’s intended feature set. I suggest you find a pop-over method of choice (I don’t think there is a ‘master’ method) test the software in your web page editor then you can work out what code goes in what source note so that Tinderbox creates those files & HTML code on export.

1 Like

Once you know the ‘design’ (i.e. code) you need do ask if stuck on how to ‘reverse’ it into a Tinderbox-publishable document. Most likely the JavaScript you need is a standalone file so it doesn’t need to be created by TBX export, in the same way that you can create links to images stored outside TBX that work once you add the images to the right folder in your exported notes. What you will need to do is find something that explains where you add the necessary hooks to your code.

Roll-overs (i.e. triggered via cursor movement rather than a click) can be effected in just HTML, HTML+CSS, HTML+JS or all three. It rather depends on what you want the pop-up to do, whether you want a custom styling, what sort of device is used (e.g. read on a computer screen vs on a phone), etc.

Thanks - I have been very pleased to see how easy it is to put CSS or Javascript into an HTML template - it makes it very easy to adopt a particular design and have it propagate through an entire document. I am just working through now what would work best for my documents.

I agree this is in fact mostly a website design question so not specific to Tinderbox even though it is something that may come up consistently when using the software. The the freedom/flexibility is certainly there - anything that generally works in HTML seems to do fine integrated into Tinderbox.

1 Like

Thanks. Yes, it can seem counter-intuitive to use another tool as well. But HTML editors (some free) have things like syntax highlighting and debugging tools that would simply bulk out Tinderbox.

‘Reversing’ code into a template is a matter of finding what goes where in the template (or $Text) and either inserting actual HTML code or using a relevant Tinderbox Export code to generate desired HTML.