Button shadow

approg
approg Community Member Posts: 258 ♪ Opening Act ♪
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?

Comments

  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    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.
  • jvalley4735
    jvalley4735 Community Member Posts: 1,357
    The Shadow effect is also editable in the Button States dialog box.
  • timk
    timk Community Member Posts: 1,207 ♦ Idol ♦
    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.
  • approg
    approg Community Member Posts: 258 ♪ Opening Act ♪
    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.
  • jasonadal
    jasonadal Community Member Posts: 441 ♪ Opening Act ♪
    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...
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    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
  • klaatu
    klaatu Community Member Posts: 988
    It would be a big step forward if Lectora output standard HTML5 then we can do anything we wanted.
  • klaatu
    klaatu Community Member Posts: 988
    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.
  • klaatu
    klaatu Community Member Posts: 988
    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.
  • klaatu
    klaatu Community Member Posts: 988
    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.