Explore the community Forums Lectora Tips and tricks Make ZERO graphic weight buttons

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #326245 Score: 1
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @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.

    This post has received 1 vote up.
    #326263 Score: 1
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    336 pts
    @ssneg

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

    This post has received 1 vote up.
    #326266 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Member
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    114 pts
    @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!

    #326268 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @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).

    #326270 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Member
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    114 pts
    @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 😉

    #329819 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @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.

    #335423 Score: 0
    Profile photo of Nick Williams
    Nick Williams
    Member
    friend finder
    beginner
    intermediate
    contributor
    wise owl
    curious george
    advanced
    10 pts
    @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?

     

    #335457 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @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.

     

     

    #391698 Score: 0
    Profile photo of Zachary Liquorman
    Zachary Liquorman
    Member
    beginner
    intermediate
    friend finder
    profile
    curious george
    wise owl
    contributor
    picture perfect
    8 pts
    @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.

    #391956 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @Klaatu

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

    #392028 Score: 0
    Profile photo of Zachary Liquorman
    Zachary Liquorman
    Member
    beginner
    intermediate
    friend finder
    profile
    curious george
    wise owl
    contributor
    picture perfect
    8 pts
    @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.

    #392030 Score: 1
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    45 pts
    @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 🙂

    This post has received 1 vote up.
Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.