Make ZERO graphic weight buttons

klaatu

If you use a lot of buttons in your projects this may be of interest to you. As you know, Lectora adds four graphics for every button you use. This adds a tremendous amount of weight to your project. Notice when you look the attached sample that there are ZERO button images. None. No weight. These are real buttons and while I quickly styled them (yeah, the hover and active states are pretty ugly) just to show that you can have real, highly styled, buttons without the overhead.

If anyone finds this of interest and wants detailed instructions contact me privately or here in the forum and I will put something up. No sense going through the motions if there's no interest.

ssneg

I just use textboxes with actions on them. Or images.

jvalley4735

I know for a fact that the development team is hard at work reducing the number of files associated to buttons So there's a light at the end of the tunnel!

klaatu

I like that. You can style it and you can add actions directly. No JavaScript needed at all. Sergey's is a better solution until Trivantis whips something else up (hopefully SVG and CSS).

jvalley4735

SVG has also been talked about behind the scenes.  Lectora Online started supporting the file type in version 3.2 which was released last month.  I'll vote it up with our development team on your behalf for desktop

klaatu

Here's the same solution using Sergey's method (text block). It requires less JavaScript (none if you don't need a 'visited' state button) and is simple to execute. Your limitations are only bound by your CSS abilities and imagination.

Hint: Go to Enjoy CSS to create amazing buttons with practically no knowledge of CSS.

nwilliams3743

Hi Darrel,

I'm looking at your first solution with the cat being toggled.

I can read the CSS file fine and understand all the styling added to the buttons there.

I noticed that action246 is Toggle Show/Hide target is empty. I figured this must then be listed in the JS to show the cat.

The type, class and value I understand, but the action in the JS, I cannot see where the cat.jpg (image153) is linked?? The JS calls action246 but again I'm missing where the link to the cat.jpg is

What am I missing?

 

klaatu

Interesting. You're not missing a thing. Before you do anything, it's working, correct? Okay, now drag the Group_1 so that it is in Page 1 instead of the root. Now look at action 246 and you will see that indeed the cat is the target. Somehow (I must have done it without realizing) the group moved to the root and the target, although it still works, does not show. As a matter of fact, for me, when the group is in the root I do not even see the cat image as a potential target.

I am using JS to set up event listeners that fire off actions held in group_1.

 

 

zliquorman1276

I'm not sure if Lectora's developers have updated the pre-built buttons since September 2016, but it's worth noting that as of today they are still the product of 4 distinct images, 1 for each state. Moreover, any button text that you have is converted into a data URI (4 in total for each button, one for each state) which are then displayed over the buttons.

Data URIs will save on HTTP requests, but add to the total file size (it takes 4 characters to express 3 bytes of data, so each data URI usually weighs out to 1-1/3 times the size of the original binary without compression).  Why the developers went with a mix-and-match approach here I don't know. Regardless, Lectora's pre-built buttons are still adding weight to your files, making HTML/CSS-based alternatives superior as long as you're not creating, like, 100 separate stylesheets or something, to the point that loading the CSS files become more burdensome than loading image files.

 

On the subject of CSS-buttons it may be of interest to those working on their own that Lectora applies its own CSS affecting the focus selector to your content (trivantis-focus.css). This has the effect of drawing a border around your content when clicked.

I believe the implementation of this has changed since the time of the OP, because in the example Darrel provided above, the border is actually hidden by his button. It appears that the padding on his button is covering the focus-border (since the padding would be created outside of the div it might make sense that this got layered on top of the border in an earlier implementation of the focus styling).

Still, if you want to remove the border that appears when you click your CSS buttons today, you can add this to your CSS:

.YourButtonClass:focus {
border: none;
border-radius: none;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
This will override the earlier focus styling and prevent a border form being drawn around your button. The pre-built buttons don't have a visual border appear by default either. My guess is, this was a safety net to preserve 508/WCAG 2.0- compliance should you create a button (or other focusable object) that was otherwise not compliant.

klaatu

FYI, vendor prefixes for box-shadow are not necessary anymore.

zliquorman1276

Good point! I should have also added that the attributes I put above should really match your CSS pseudo-class for the "active" state, otherwise your active-state styling may be overridden by this.

jasonadal

I'd like to add a comment to the option @ssneg mentioned for using text blocks with actions.

For accessibility purposes, this would be a highly discouraged practice (see the post about issues with text-to-speech and reading buttons). Text blocks with actions are read by screen readers completely differently than actual buttons. Buttons always have the "button" type, where as text blocks do not, even when clickable. Screen readers will announce a text block action with an "href" and use "has JavaScript onUp". While I'd wager screen readers are used to this, it does not truly represent what the element is or what it does.

I've used HTML extensions to build buttons as well and if you properly use the "<button>" type, all will be well with screen readers. I'll always highly encourage developing with accessibility in mind up front, regardless - it can be considerable work to have to go back and add features or requirements at a later time. This is from experience

davidcm

Darrel,
<div class="activity-inner">

I’m trying to create buttons in Lectora 17 using an HTML extension based on an article you wrote on styling entry fields with CSS (and without any prior knowledge of CSS or JS). So far, I’ve created a Frankenstein button that's a cross between the Lectora button and the CSS styling, and the text isn’t any crisper than a typical Lectora-generated button (when viewed using Run and Preview in Browser (Chrome and Firefox).

Zipped file attached that includes the .css file from Enjoy CSS. I would really appreciate any guidance.

</div>
Best, David

 

davidcm

Jason,

 

Good post. These days, everything must be accessible. Could you point me to a resource that explains how to create accessible buttons with HTML?

 

Thanks, David