Button shadow
June 14, 2017 12:00 AM
I have a button to which I've added a shadow. I'd like the shadow to be hidden when the button is down. Short of actually adding the shadow to the button image is there anyway to set the shadow to none when the button is down?
Discussion (10)
Basically depends on how you added your shadow. Eg. if your shadow is a separate image, you can hide it easily when clicking the button.
The Shadow effect is also editable in the Button States dialog box.
It's only editable in the "Normal" state settings, i.e. for all states. It would be nice to make it available for the separate states.
As there are filters that can be used to drop a shadow off a element by Javascript ...as is they cannot be used in Lectora. Most of these filters need a 'Canvas' tag to work. And allthough you can add a External HTML-object and make a Canvas tag out of it, and then indeed you can use Lectora image elements in it and give them a Dropshadow or Blur-effect or whatever is needed... straight from Lectora it doesnot work, you have to emulate it in external HTML objects. It would be a big step forward if Lectora gave developers these options inside Lectora ( and not just as a extra option in the button states, but by creating a real solid HTML5 page with Canvas tags and more enabled )
~Math
You don't need canvas tags for a box-shadow. It's simple CSS. It's the way Lectora builds buttons that's the issue.
Here it is working in all browsers.
document.getElementById("button150").addEventListener("mousedown", dropShadow);
function dropShadow(){
document.getElementById("button150path").setAttribute("filter","");
document.getElementsByTagName("feOffset")[0].setAttribute("in", "");
}
document.getElementById("button150").addEventListener("mouseup",addShadow);
function addShadow(){
document.getElementById("button150path").setAttribute("filter","url('#button150Shadow')");
document.getElementsByTagName("feOffset")[0].setAttribute("in", "colorResult");
}
This should be relatively simple for the Lectora application developer(s) to implement.
Enjoy.
My idea is that the button is floating in it's normal state and so there's a shadow. When the button is down it is, metaphorically, pressed to the screen and so there'd be no shadow. So it would be nice to make a shadow available to separate states independently of which other states may have a shadow.
It would be a big step forward if Lectora output standard HTML5 then we can do anything we wanted.
Here's a semi-solution for right now. I just have to tweak it to get it working in the dreaded Micro$oft browsers.
document.getElementById("button150").addEventListener("mousedown", dropShadow);
function dropShadow(){
document.getElementById("button150path").setAttribute("filter","");
}
document.getElementById("button150").addEventListener("mouseup",addShadow);
function addShadow(){
document.getElementById("button150path").setAttribute("filter","url('#button150Shadow')");
}
Replace all instances of "buttonXXX" with your buttons name (keep everything else). Add this to a runJS on show of the page.
The first, and more cumbersome, way that I see this done is to edit the down image for the button, since each state is rendered as an image, if I'm not mistaken. The file name for the image ends in _down
There may be a JS function that can help as well - I don't know if the shadow is an attribute you could modify, but one thing I've used is attaching a class via JS, then tacking on an attribute. I don't know that this would work either, as I tried looking at the JS that controls the down state and got lost pretty quickly :)
Agreed that it would be awesome to be able to style within the states - the buttons are already there, just disabled...
Discussions have been disabled for this post