PricingBlog

Dynamic image issue

  • mdxwired-1271746963771097152

    mdxwired

    1 year ago

    Hi all, I am trying to change the src of an image (icon within a div) based on a change to a global variable. My mouse events at the div element level do change the variable, but despite a formula on the src attribute of the image that has an If/Then based upon the variable, the image never changes.

    Clearly, I am doing this wrong.
  • andreasmoller-1271748400634794067

    Andreas Møller

    1 year ago

    Can you share a screenshot of the formula?
  • mdxwired-1271837052396372040

    mdxwired

    1 year ago

    Sure, thanks!

    The two strings are:
    /cdn-cgi/imagedelivery/ZIty0Vhmkm0nD-fBKJrTZQ/numberry_first_test:Icon_Default_Dashboard.svg/full
    ...and...
    /cdn-cgi/imagedelivery/ZIty0Vhmkm0nD-fBKJrTZQ/numberry_first_test:Icon_Active_Dashboard.svg/full

    The only difference is the color.
    1271837052207370330-2024-08-10_09-22-35.png
  • mdxwired-1271842122353475625

    mdxwired

    1 year ago

    The intent is to change the color of the icon to match the color of the text in each state.
    1271842121690775718-2024-08-10_09-40-29.png
    1271842121913208916-2024-08-10_09-43-10.png
    1271842122143633510-2024-08-10_09-43-51.png
  • firdaus___-1271845202037837978

    Mr

    1 year ago

    condition should have boolean outcome
  • andreasmoller-1271868577556725820

    Andreas Møller

    1 year ago

    Yes the condition has to be Null or false to show the second image
  • An empty string is truthy
  • mdxwired-1271890709141524571

    mdxwired

    1 year ago

    Works perfectly. Thank you. Is there any way to do this by referencing a custom property of an element rather than using a variable? I know it is easy to do in regular javascript, just not sure how to reference object properties in toddle. Ideally I would like to reference a relative object like parent.property so that each tab can be self-contained.
  • andreasmoller-1271892086697754848

    Andreas Møller

    1 year ago

    Probably, but how to do it depends on the concrete example
  • mdxwired-1271893178512838809

    mdxwired

    1 year ago

    So, building a nav bar / set of tabs wherein each tab is really just a div with an icon and text. If I can keep the reference to a property internal to the div and its contents, then I can just replicate the tab as many times as needed and the mouseover, mouseleave, and click events will just work without external variables. Sorry to over-rely upon your advice. I know founders have bigger fish to fry.
  • andreasmoller-1271895407131103282

    Andreas Møller

    1 year ago

    Nah I’m watching women’s 1500m
  • andreasmoller-1271895743560683600

    Andreas Møller

    1 year ago

    You can do that by using a repeat on the div.
  • mdxwired-1271895940437114961

    mdxwired

    1 year ago

    Yup, but at the moment it is still reliant upon an external variable. As such, I will need a new variable for each tab. Correct?
  • andreasmoller-1271896049262264330

    Andreas Møller

    1 year ago

    Probably not what do you need it for?
  • mdxwired-1271896344138747905

    mdxwired

    1 year ago

    just to switch the icon color on mouseover, mouseleave, and click. Everything else, text color, border, etc... is handled by the different div state styles.
  • Or I install an icon-font and let everything just do what it needs to.
  • andreasmoller-1271896575370592286

    Andreas Møller

    1 year ago

    Yes but you can just have one variable “highlighted” that you set to the index of the hovered tab
  • mdxwired-1271897036266143826

    mdxwired

    1 year ago

    Trying that now...
  • Tod-1271897037796802728

    Tod

    1 year ago

    Great energy @mdxwired! Your continuous contribution to the toddle Community just made you advance to Community Level 2!
  • mdxwired-1271922608169812089

    mdxwired

    1 year ago

    Ha!!! I just had my head on backwards as far as data binding to elements was concerned. Now I have a nice structured setup that married one array of objects to element.
  • andreasmoller-1271939321095520307

    Andreas Møller

    1 year ago

    Great!