top of page

Forum Comments

Text-Align html
In Coding with Velo
Responsive Site - Auto adjusting strip/image to screen size
In Coding with Velo
Change font color based on condition
In Coding with Velo
mypurdy
Jan 21, 2019
*UPDATE* I spent a few weeks trying to figure out how to solve this problem above and I finally got this to work. For those who are interested in seeing how I did it, I wanted to code my own menu with different menu items (workMenu + index) that, when hovered over, change from navy to teal, and when clicked, change to orange. The part I was struggling with that I just figured out how to write is when a menu item is clicked (for example, #workMenu1) and is orange, how do I get #workMenu1 to stay orange on mouse in and out until I click a different menu item (for example, #workMenu2) in which case #workMenu2 turns orange and #workMenu1 goes back to the default navy and hover actions. Here is a link to my test page if you want to see it work: https://www.marisaypurdy.com/menu-test-page Here is my code: function HoverMenu(index){ let $menu = $w("#workMenu" + index) let $orange = ` ${$w("#workMenu" + index).text} ` let $teal = ` ${$w("#workMenu" + index).text} ` let $navy = ` ${$w("#workMenu" + index).text} ` //--To keep a "clicked" menu item orange-- if ($menu.html=== $orange) { $menu.html= $orange; } else { $menu.html= $teal; } } function UnHoverMenu(index){ let $menu = $w("#workMenu" + index) let $orange = ` ${$w("#workMenu" + index).text} ` let $teal = ` ${$w("#workMenu" + index).text} ` let $navy = ` ${$w("#workMenu" + index).text} ` //--To keep a "clicked" menu item orange-- if ($menu.html=== $orange) { $menu.html= $orange } else { $menu.html= $navy; } } function OnClickMenu(index){ let $menu = $w("#workMenu" + index) let $orange = ` ${$w("#workMenu" + index).text} ` let $teal = ` ${$w("#workMenu" + index).text} ` let $navy = ` ${$w("#workMenu" + index).text} ` $menu.html = $orange; // --To make sure only 1 "clicked" orange menu item at a time: [1,2,3] .filter(idx => idx !== index) .forEach(idx => { $w('#workMenu' + idx).html= ` ${$w("#workMenu" + idx).text} `; }) }
0
0
Change the Text Color On Click
In Coding with Velo
mypurdy
Jan 20, 2019
I'm also trying to set up a sort of menu using hover and click events, but I've hit a problem. What I'm trying to do with my code is make a little menu that, when you hover on a menu item ("#workMenu" + index), it changes from navy (#0F1227) to teal (#3C958B) and changes back to navy on mouseOut. Then I would like to code it so that when you click on a menu option, it changes to orange (#FCB449) and stays there even on mouseOut until I click another menu option, at which point it turns navy again. I have all of this hooked up to a repeater and a database so that as I click different menu options, it displays different pictures from my database. The problem is that my code is making it so that the 2 actions interfere with each other. If I click something, it turns orange, but it's changing back to navy as soon as I take my mouse away rather than staying orange until I click a new menu item. Does anyone know how to help me fix this issue? Here's the link to the test page I'm working with if you want to see what I mean: https://www.marisaypurdy.com/menu-effects-test-page Here's the code: $w.onReady(function () { }); function workHover(index){ $w("#workMenu"+index).html = ` ${$w("#workMenu"+index).text} `; } function workUnHover(index){ $w("#workMenu"+index).html = ` ${$w("#workMenu"+index).text} `; } function workOnClick(index){ $w("#workMenu"+index).html = ` ${$w("#workMenu"+index).text} `; }
0
0
Change font color based on condition
In Coding with Velo
mypurdy
Jan 04, 2019
@Rodney If you could help me, that would be awesome! Basically, what I'm trying to do with my code is make a little menu that, when you hover on a menu item ("#workMenu" + index), it changes from navy (#0F1227) to teal (#3C958B) and changes back on mouseOut. Then I would like to code it so that when you click on a menu option, it changes to orange (#FCB449) and stays there even on mouseOut until I click another menu option, at which point it turns navy again. I know how to set up a similar condition in a function if I were to use something like a hide/show function where if one thing is showing, it automatically hides everything else until I choose to show something else, but since I can't figure out the "if" statement for changing text color, I can't figure this out. I tried a variety of options, none of which worked, so I stripped it down to the basics of what I have so far. Let me know if you think of anything. Also, here is the link to the page if you want to see it: https://www.marisaypurdy.com/menu-effects-test-page $w.onReady(function () { }); function workHover(index){ $w("#workMenu"+index).html = ` ${$w("#workMenu"+index).text} `; } function workUnHover(index){ $w("#workMenu"+index).html = ` ${$w("#workMenu"+index).text} `; } function workOnClick(index){ $w("#workMenu"+index).html = ` ${$w("#workMenu"+index).text} `; } //------------EXPORT FUNCTIONS: HOVER------------ //-----Work Menu 1 "Branding"----- export function workMenu1_mouseIn(event) { workHover(1); } export function workMenu1_mouseOut(event) { workUnHover(1); } //-----Work Menu 2 "Typography"----- export function workMenu2_mouseIn(event) { workHover(2); } export function workMenu2_mouseOut(event) { workUnHover(2); } //-----Work Menu 3 "Illustration"----- export function workMenu3_mouseIn(event) { workHover(3); } export function workMenu3_mouseOut(event) { workUnHover(3); } //-----Work Menu 4 "Photography"----- export function workMenu4_mouseIn(event) { workHover(4); } export function workMenu4_mouseOut(event) { workUnHover(4); } //-----Work Menu 5 "All"----- export function workMenu5_mouseIn(event) { workHover(5); } export function workMenu5_mouseOut(event) { workUnHover(5); } //------------EXPORT FUNCTIONS: CLICK------------ //-----Work Menu 1 "Branding"----- export function workMenu1_click(event) { workOnClick(1); } //-----Work Menu 2 "Typography"----- export function workMenu2_click(event) { workOnClick(2); } //-----Work Menu 3 "Illustration"----- export function workMenu3_click(event) { workOnClick(3); } //-----Work Menu 4 "Photography"----- export function workMenu4_click(event) { workOnClick(5); } //-----Work Menu 5 "All"----- export function workMenu5_click(event) { workOnClick(5); }
SOLVED: Change text color on hover
In Coding with Velo
mypurdy
Dec 08, 2018
Is there a way to code this so that one code works with multiple different texts? I have several different textboxes that I would like to all change color when I hover over them (I'm essentially making a mini menu that I want to interact with filters for my dataset). I've been trying to find a way to take the code you wrote above and apply the way I've been able to code for hiding/showing elements of similar IDs. For example, if I have 2 different textboxes, one has an ID of 'projectMenu1' and says "Illustration" and one has an ID of 'projectMenu2' and says "Typography" If I write a code intended to hide and show the 2 textboxes on hover, it would work like this: function showText(index){ let $textbox = $w('#projectMenu' + index); $textbox.show(); } function hideText(index){ let $textbox = $w('#projectMenu' + index); $textbox.hide(); } export function projectMenu1_mouseIn(event) { hideText(1); } export function projectMenu1_mouseOut(event) { showText(1); } export function projectMenu2_mouseIn(event) { hideText(2); } export function projectMenu2_mouseOut(event) { showText(2); } But I can't seem to implement this concept for changing color on hover. I can't seem to make it work with the $w.onReady(function (), so I tried doing it by applying the mouseIn and mouseOut functions to each textbox and it SORT OF works but the problem is keeping the two different texts that read "Illustration" and "Typography" and getting them each to continue to say that when hovered due to this part of the code: let newHtmlStr = $w('#projectMenu' + index).html = " YOUR TEXT HERE"; What can I do so that projectMenu1 and projectMenu2 will each change color when you hover over them individually without changing what each say? Nothing that I have tried has been working.
0
0
Desperate to learn how to add my own custom code!
In Coding with Velo
Problems with my expand/collapse items in mobile view!
In Coding with Velo
"Default" avatar on member page using DBs and input forms
In Coding with Velo

mypurdy

More actions

This website was designed with Velo by Wix

bottom of page