PricingBlog

How to show/hide element?

  • patrickmast-1270681236637220918

    Patrick Mast

    1 year ago

    When we create a new style class, we can set its condition based on the viewport width. Can we have a formula that returns the viewport width so we can also control the visibility of an element? For example, show the element only if the viewport width is greater than 375 pixels.
  • chrislaupama-1270690638555516979

    Chris Laupama

    1 year ago

    You don’t need a formula. Check this video out:

    https://youtu.be/AfS62T_jDcA?si=XtBPSRgk-7lLhk4Q
  • patrickmast-1270706602797830204

    Patrick Mast

    1 year ago

    @Chris Laupama , you're correct. We can achieve that through the styles class. However, for my use case, I need to show or hide a specific element based on the viewport width. To do this, I need a formula that returns the viewport width. Have access to this opens up numerous possibilities! 🙏
  • svenning-1270715318628651009

    svenning

    1 year ago

    You must likely will not need a formula for that. Just use viewport sizes and use display: flex and display: none for showing/hiding stuff.
  • patrickmast-1270739091037749268

    Patrick Mast

    1 year ago

    Hey @svenning, we don't have the viewport size as a "formula".
  • patrickmast-1270739644975284246

    Patrick Mast

    1 year ago

    We need "Viewport width" here:
    1270739644652191796-image.png
    😎1
  • svenning-1270743927644881008

    svenning

    1 year ago

    Still don't need a formula for that 😊👍
  • lucasg-1270764691718803586

    Lucas G

    1 year ago

    You can use toddle's built-in viewport options to set display to none
  • If you want to use the show/hide option, this action will do it:
    1270764844437733437-image.png
  • I shared it in another thread
  • function viewportWidth (args, ctx) {
    window.addEventListener('resize', function(){
    const isBelowThreshold = window.innerWidth < args.width;
    ctx.triggerActionEvent('isBelow', isBelowThreshold)
    });
    }
  • it returns true/false for viewport size based on the width you put in
  • Maybe I should just put this as a package lol
  • patrickmast-1271315691743481917

    Patrick Mast

    1 year ago

    @Lucas G, thanks! But why not have this in the standard Formula's list. So much easier for all of us 😉
    1271315691546345553-image.png
  • lucasg-1271318869662765087

    Lucas G

    1 year ago

    It’s not a standard JS function
  • But yeah, maybe an action for it would be nice
  • patrickmast-1271323565555318824

    Patrick Mast

    1 year ago

    Thanks @Lucas G ! Is there an window.onresize event I can trigger to get the viewportwidth updated in a variable. This way I can have a variable that has the viewportwidth always available.
  • chrislaupama-1271338610959843339

    Chris Laupama

    1 year ago

    I hope this helps @Patrick Mast - in this case I'm making something disappear below a certain viewport width.

    https://www.tella.tv/video/disappearing-design-etvz
    👍1
  • andreasmoller-1271373722250510336

    Andreas Møller

    1 year ago

    When ever possible you want to use the pure css solution, without a formula. It is much more performant and generally also simpler.