#✅ | Shift element when another appears?

1 messages · Page 1 of 1 (latest)

orchid osprey
#

I'd like to make a status icon that shifts if another one is there, that way multiple can stay in the same area. how can i achieve this?

waxen remnantBOT
# orchid osprey I'd like to make a status icon that shifts if another one is there, that way mul...

Hi there! 👋

To make an element shift its position when another one appears, you'll want to use a combination of placeholders, loading requirements, and advanced positioning.

Here's a general approach to achieve this:

  1. Define a "Base" Position: Give your primary status icon its normal position.
  2. Create a Condition for the Other Icon: Use a loading requirement to detect if the "other" status icon is present or visible. For example, if the other icon's visibility is tied to a FancyMenu variable, you might use the Is Variable Value requirement. If it's another element, Is Layout Enabled (if it's in a separate layout) or even Is Element Hovered could be possibilities depending on what "there" means for you.
  3. Use IF Statements in Advanced Positioning:
    • Enable Advanced Positioning for the status icon you want to shift. You can do this by right-clicking the element and selecting "Advanced Positioning."
    • In the position value (e.g., X position), you can use the Calculator placeholder along with conditional logic (e.g., checking the Is Variable Value requirement through a Get Variable Value placeholder).

Let's say you have icon_A and icon_B. You want icon_A to shift right if icon_B is visible.

First, you'd likely have a way to control the visibility of icon_B, perhaps through a variable like icon_B_visible.

Then, for icon_A's X position, you could use something like this in its advanced positioning:

{"placeholder":"calc","values":{"expression":"if ({"placeholder":"getvariable","values":{"name":"icon_B_visible"}} == "true") { return 100; } else { return 0; }","decimal":"false"}}

This is a simplified example. 100 would be the new shifted X-position and 0 would be the original X-position (you'd replace these with your actual pixel values or more complex calculations using guiwidth, elementwidth, etc.).

Key concepts you'll need to explore:

#

Could you tell me a bit more about how you determine if the "other" icon is "there"? Is it a separate element, controlled by a toggle, or something else? Knowing that might help me provide a more specific example! 😊

orchid osprey
#

so far im just having it load when a variable is True, so i could just use that to shift it over?

waxen remnantBOT
# orchid osprey so far im just having it load when a variable is True, so i could just use that ...

Yes, absolutely! That makes it even easier. 😊

If your status icons are already loading based on a variable being true, you can directly use that variable in the advanced positioning for the one you want to shift.

Let's assume you have two status icons:

  • Icon A: Your main status icon.
  • Icon B: The "secondary" icon, which loads when a FancyMenu variable (let's call it is_icon_b_active) is true.

You want Icon A to shift when is_icon_b_active is true.

Here’s how you can set it up for Icon A:

  1. Right-click on Icon A in the layout editor.

  2. Choose Advanced Positioning.

  3. For the X-Position (or whatever axis you want to shift along), you would use a JSON placeholder similar to this:

    {"placeholder":"calc","values":{"expression":"if ({"placeholder":"getvariable","values":{"name":"is_icon_b_active"}} == "true") { return ({"placeholder":"elementposx","values":{"id":"icon_a_id"}} + 50); } else { return {"placeholder":"elementposx","values":{"id":"icon_a_id"}}; }","decimal":"false"}}

Let's break down that placeholder:

#
  • "placeholder":"calc": We're using the Calculator placeholder to perform a conditional calculation.
  • "expression":"...": This is the core logic.
    • {"placeholder":"getvariable","values":{"name":"is_icon_b_active"}} == "true": This checks if your variable is_icon_b_active has the value "true".
    • return ({"placeholder":"elementposx", "values":{"id":"icon_a_id"}} + 50);: If is_icon_b_active is true, it takes the current X position of icon_a (replace "icon_a_id" with the actual ID of Icon A, which you can get by right-clicking it and choosing "Copy Element Identifier") and adds 50 to it (to shift it 50 pixels to the right). You can adjust 50 to your desired shift amount.
    • else { return {"placeholder":"elementposx", "values":{"id":"icon_a_id"}}; }: If is_icon_b_active is false, Icon A stays at its original X position.
  • "decimal":"false": Set this to false if you only need whole pixel values.

This way, Icon A will automatically shift when your is_icon_b_active variable changes. Just remember to replace "icon_a_id" with the actual element identifier of your "Icon A" and adjust the + 50 for your desired shift amount! 😊

Here are the docs pages for reference:

waxen remnantBOT
#
Thread Marked as Solved

This support thread has been automatically marked as solved because there were no new messages for at least 24 hours.

If you still need help, feel free to continue the conversation or create a new support thread.

Marked automatically after 24h of inactivity