Avoid grey hover with DecoratedText in Apps Script addons - google-apps-script

Working with Apps Script addons (the new ones, based on Card UI) I use DecoratedText elements so I can display icons and better design my labels in the addons.
But, it always has a gray background when hovering the zone, just like a clickable element. Which they're not.
Is there a way to remove this hover effect ? (I don't declare any click action, nor any kind of action).
Can I achieve the same visual result (icon on the left or right, text wrapped or not) with TextParagraph instead ?
Thanks

Related

Can't find an element in the Web Inspector

There's an element that appears on the site, but I can't seem to find it in the inspector of the browser. I would like to hide it somehow.
On this page: http://gdhbau.hu/#bemutatkozas
It is the "BEZÁR" word with white color, next to the "Becsuk" button, when clicking on the "MÉG TÖBB" button (to expand the content).
This problem shows up when I turn on the "Automatically add paragraphs" in the WordPress SiteOirgin editor; but I need to use it, otherwise the content falls apart.
EDIT: This is with the plug-in called: "Collapse-O-Matic"
You will never find it since it's not an element.
It's part of the image in the background http://gdhbau.hu/wp-content/uploads/2018/03/bemu-bg-large.jpg

How to choose a color on a palette to change part of an image?

I don't even know where to begin or what codes will be needed.
I'm trying to build a website that allows the user to change a certain part of an image's color. Just like a coloring book page online, where someone can choose a color from the palette and it will allow them to click on that part of the image to change it to that color. Once they are done they can save the image to their computer.
Any help in the right direction would be incredible!
You can try to make a transparent div over a div containing the image which is in absolute position of the div containing the image.
Then you can check some javascript plugin to get a color picker plugin.
With Javascript and for example jQuery, you can add some events on click on the color picker and then on click of the div which is hover the image to apply the picked color.
I hope this is clear for you, otherwise I can make a JSfiddle

Google Spreadsheet - how to modify image that has assigned script?

Everywhere I've read, it says to create a "button" in Google Spreadsheet you need to insert an image and assign a script to it. Easy enough. Done.
Now how do I modify that image? Clicking on the image runs the script. I cannot right-click the image for any context menu. I cannot select the image in any other way. I cannot ever remove the image now.
Perhaps Slav was using a Mac when he tried it the first time. Strangely, in this specific scenario, the Mac equivalent of right-clicking (which is CTRL+click) really does not work. What works is CMD + click.
While you can "assign a script" to an image, you can also do so to a drawing - which is much easier to customize. Either way, you end up with a picture in the spreadsheet, and when you click on it a script is triggered.
To edit this behavior, just right-click the image or drawing. (I know you said you did this, but it DOES work. Just click - then let go.) An anchor will appear on the image or drawing, and from there you can access a menu to edit or delete the image or change the attached script.
So that was tricky to me because the anchor was invisible in my image; it had a black background. If you can't see the anchor on your image follow these steps:
Right click on the image, You should find that it now has resize handles
Move your cursor to the top right of the image until it changes to a hand that points with the index finger (like when you hover over a link)
Click
Do whatever you want (Edit, delete... etc.)

How is the "travel mode" menu in Google Maps implemented?

I see this type of menu all over the Internet as a way to filter out data:
Does it have a specific name? I'm particularly interested in seeing how the pushed in effect is achieved. I've gone through the Chrome developer tools but viewing the CSS applied Chrome only returns a few classes and not the id of the element.
The menu type does not have a specific name as far as I know (although for all effects and purposes it is a set of radio buttons).
The pushed in effect is caused by an inset shadow and darker background color.
Here is a JSFiddle.
That menu is from Google maps.
It is what I might call an "icon" menu.
Buttons are not pushed in.
Instead, the images are swapped in and out depending on what is chosen.
Javascript is used to change the images and the content below the images.
Use Chrome and go to Google Maps. Type in an address and then click Get Directions. Once the buttons appear, right click on one of the button and choose Inspect element. That will show you the code that Googe is using.
The pushed effect is simply an image applied to the element when it's clicked
They're usually done with sprites
Here are some sprites from google
When the image is hovered/clicked a different spot on the image is used as the background for that element.

how to visualise/debug an imagemap?

I'm dynamically generating an imagemap for a chart tool I have.
I was hoping to be able to set a border or color on the area tags so I could check everything was being generated with the right coords, but a little research shows this is not possible.
So whats the easiest way to check my image map is correct? Are there any browser tools which will "visualise" the areas?
What about using JavaScript (and jQuery) to test it?
http://davidlynch.org/js/maphilight/docs/demo_usa.html
This plugin will highlight image map areas.
You can use FireBug for that:
Right-click your image and choose "Inspect Element with FireBug"
In the HTML tab of Firebug, the image tag is highlighted: locate and expand the associated map tag, which usually is right after it
You can now place your mouse over each area tags to see them highlighted over your image
One way to visualize an area tag in Chrome is to add a tabindex to the area tag(s) you want to see, and then click or tab to it. Chrome will nicely highlight the actual outline of the clickable area.
This solution unfortunately doesn't work in Firefox.
Image Map Editor is a plug-in for Firefox. It is the best tool I have found so far, makes creating, inspecting, and editing image maps very easy.
In Chrome you can select the area of the image map and click on the three little dots
to the left and then select "focus"
Never thought I would ever say that, but this is one of the few cases where Dreamweaver could be helpful. You'll have an interface, you will be able to work with anchor points and set your imagemap easily.