In UIAutomator Viewer can see that the markers do not have anything unique except the index.
I tried to simulate a click on a specific marker in the following way:
UiObject gMap = mDevice.findObject(new UiSelector().descriptionContains("Google Map"));
UiObject marker = mDevice.findObject(gMap.getSelector().index(1));
marker.clickAndWaitForNewWindow();
But the click did not happen. How can I simulate clicking on the markers?
Don't use gMap.getSelector(). You should use childSelector to search markers inside map view
UiObject marker = mDevice.findObject(UiSelector()
.descriptionContains("Google Map")
.childSelector(UiSelector().instance(1))
)
And try to use marker.waitForExists(5000) before clicking. Usually they appear not immediately on map
Using CulebraTester and a sample map application (as shown)
which has 3 markers: the 2 red have title and snippet and the blue doesn't, you can see how the generated code differ.
mDevice.findObject(By.desc("title_of_marker1. snippet_of_marker1.").clazz("android.view.View").text(Pattern.compile("")).pkg("com.example.diego.mymapapplication")).clickAndWait(Until.newWindow(), DEFAULT_TIMEOUT);
mDevice.findObject(By.desc("title_of_marker2. snippet_of_marker2.").clazz("android.view.View").text(Pattern.compile("")).pkg("com.example.diego.mymapapplication")).clickAndWait(Until.newWindow(), DEFAULT_TIMEOUT);
mDevice.findObject(By.desc("Google Map").clazz("android.view.View").text(Pattern.compile("")).pkg("com.example.diego.mymapapplication")).clickAndWait(Until.newWindow(), DEFAULT_TIMEOUT);
the 3rd selector is too broad and ambiguous.
I guess if you add title and/or snippet you'll have no problem clicking on them.
I've have found some weirdness with Maps V3 in jQuery UI tabs.
A common issue, when a map is initialized in a hidden tab, it gets confused and doesn't know how big to make the map.
The solution for this is:
$('#tabs').tabs({show: function(e, ui) {if (ui.index == 5) {google.maps.event.trigger(map, "resize"); } }});
That works fine. That maps resizes visually in the tab.
The next issue, perhaps less commonly, is that I want to load markers based on the latLng of my site's users. When I try to load them via the init function, the getBounds appear to be the same... I assume it's the same issue. The map is confused about the load size.
Like the trigger for resize, is there a way to trigger a function and pass the map DOM info after it has been initialized? I am so new to this!
I'd like to add buttons to specific cells in Google docs spreadsheet. The apps script UI documentation talks about how to add a new panel, but it's not clear how UI in that panel could be attached to specific rows or cells.
Is it possible to add UI to particular cells, or are we limited to adding new panels?
The apps UI only works for panels.
The best you can do is to draw a button yourself and put that into your spreadsheet. Than you can add a macro to it.
Go into "Insert > Drawing...", Draw a button and add it to the spreadsheet.
Than click it and click "assign Macro...", then insert the name of the function you wish to execute there. The function must be defined in a script in the spreadsheet.
Alternatively you can also draw the button somewhere else and insert it as an image.
More info: https://developers.google.com/apps-script/guides/menus
Status 2018:
There seems to be no way to place buttons (drawings, images) within cells in a way that would allow them to be linked to Apps Script functions.
This being said, there are some things that you can indeed do:
You can...
You can place images within cells using IMAGE(URL), but they cannot be linked to Apps Script functions.
You can place images within cells and link them to URLs using:
=HYPERLINK("http://example.com"; IMAGE("http://example.com/myimage.png"; 1))
You can create drawings as described in the answer of #Eduardo and they can be linked to Apps Script functions, but they will be stand-alone items that float freely "above" the spreadsheet and cannot be positioned in cells. They cannot be copied from cell to cell and they do not have a row or col position that the script function could read.
Use checkboxes(say, in F1) instead of buttons/Images. This is a intermediate to a full ui inside cells. Then hook your function, that is supposed to run on button click to onEdit() trigger function.
Sample script:
function onEdit(e){
const rg = e.range;
if(rg.getA1Notation() === "F1" && rg.isChecked() && rg.getSheet().getName() === "Sheet1"){
callFunctionAttachedToImage();
rg.uncheck();
}
}
References:
Class Range
Event Objects
Buttons can be added to frozen rows as images. Assigning a function within the attached script to the button makes it possible to run the function. The comment which says you can not is of course a very old comment, possibly things have changed now.
There is a silly trick to do something that might help you :
You can make the drawing object as tall as your sheet (To appear to every row in the sheet).
You can make the script affects the current cell value by the following code:
SpreadsheetApp.getActiveSpreadsheet().getActiveCell().setValue(cellValue);
I noticed a lot of JQuery answers on this, but I'm using MooTools...
I have a Table of Contents which uses CSS Fixed positioning to keep it off to the left side, except for 20 pixels. The user hovers their cursor over the 20 pixels, which fires the DIV's mouseover event and the ToC slides fully into the page. When the cursor leaves, the ToC slides back to where it was.
$('frameworkBreakdown').addEvents({
'mouseover': function(event){
event = new Event(event);
$('frameworkBreakdown').tween('left', 20);
event.stop;
},
'mouseout': function(event){
event = new Event(event);
$('frameworkBreakdown').tween('left', (10 - $('frameworkBreakdown').getStyle('width').toInt()) );
event.stop;
}
});
This works well (aside from unrelated issues) except that when I move the mouse on the DIV it starts to jitter, presumably because the contents of the DIV are also firing the event, or the event refires as the mouse tracks over the DIV.
How can I stop this behaviour from occuring? Is there a standard method, or do I use some sort of nasty global variable that determines whether effects are in action, and thus ignore the event?
Use mouseenter/mouseleave instead of mouseover/mouseout.
Also, you shouldn't be doing this in MooTools 1.2+:
event = new Event(event);
event.stop;
A simple event.stop() will suffice.
Sometimes I need to inspect elements that are only showing up on a page if you put mouse over some area. The problem is that if you start moving mouse towards firebug console in order to see the changes, mouse-out event is triggered and all changes I am trying to inspect disappear. How to deal with such cases?
Basically I am looking for something that would either:
Switch to firebug console without moving a mouse (using keyboard shortcuts maybe? But I can't figure out how to use firebug with keyboard only)
Have an ability to "freeze" the page so your mouse movements don't trigger any events anymore.
Thanks.
HTML Tooltip (Firebug)
Select the element with the inspector or in the DOM. Go to the "Styles" tab in firebug and click to the small arrow on the tab and select ":hover" (also available ":active"). The state will remain on "hover" and you can select other elements to make them hover.
HTML Tooltip (Firefox developer tools)
Click the button to see three checkboxes, which you can use to set the :hover, :active and :focus pseudo-classes for the selected element
This feature can also be accessed from the popup menu in the HTML view.
If you set one of these pseudo-classes for a node, an orange dot appears in the markup view next to all nodes to which the pseudo-class has been applied:
JQuery Tooltip
Open the console and enter jQuery('.css-class').trigger('mouseover')
Regular Javascript Tooltip
Open the console and enter document.getElementById('yourId').dispatchEvent(new Event('mouseover'));
The style panel in Firebug has a dropdown menu where you can choose the :active or :hover state.
You can also start the debugger on a timer. Enter this command into the console:
setTimeout(function(){ debugger; }, 10000);
This will give you 10 seconds to use the mouse and make the page look the way you want in order to inspect it. When the debugger starts, the page will freeze, and you'll be able to explore the elements in the developer tool tab, without the DOM changing or responding to any additional mouse events.
I think you can also do this :
Choose Firebugs Inspect mode
Hover over the item that pops up the element you wish to inspect and then use the Tab key several times to make Firebug active (I found it tricky to see when Firebug was the active component but nothing like trial and error - when I saw that Firefoxes Find Toolbar was active I'd then Shift + Tab backwards twice to get into Firebug.
Then I'd use the L/R arrow keys to contract/expand elements and U/D arrow keys to navigate through Firebugs console
Worked for me anyway!
For Jquery UI tooltip I finally set up a long delay for the hiding of the element so I have time to inspect it before it's deleted. For example, I used this to inspect the tooltip:
$( document ).tooltip({ hide: {duration: 100000 } });
instead of:
$( document ).tooltip();
You could insert a breakpoint at the start of the mouseout event handler. Its code won't be executed until you allow it to continue, and you can use the DOM inspector and so forth while execution is stopped.
Firebug's hotkey for inspecting elements is Ctrl + Shift + C (Windows/Linux).
Go here for a list of all Firebug keyboard shortcuts.
For the bootstrap tooltip:
$(document ).tooltip({delay: { show: 0, hide: 100000 }});
While selecting :hover in the CSS menu might be nice if you only want to inspect some CSS code, it doesn't work if whatever you want to inspect is changed using JavaScript.
A simple hack in this case is to open Firebug in a different window (top right corner of the Firebug bar) than move your mouse at the desired location and drag and drop something from there out of the browser window. Now you can inspect whatever in the Firebug window. Just don't move your mouse back into the browser window.
For Javascript events such as Mouse over.
Open Firebug/Inspect an element.
Click on the element before the mouseover event, e.g. click on a div. It will turn blue to show it is selected.
Put your mouse over the element and don't move it from this point forward.
Use your ↑/↓ arrow keys to manoeuvre in Firebug.
Use your ←/→ arrow keys to expand/contract code with + or -.
Double tap Tab to get to the CSS pane.
Use the arrow keys to navigate. Use shift and arrow keys to select text. Ctrl & C to copy.
Hold Shift and double tap Tab to get back to the HTML pane.
I'd like to chip in with my preferred method. Putting this little snippet in your console allows you to start the debugger at any time with a simple keypress on your keyboard (F8 is used in this example)
document.addEventListener("keydown", (event) => {if (event.key == 'F8') {debugger}});
You can also use a keycode if you prefer:
document.addEventListener("keydown", (event) => {if (event.keyCode == 119) {debugger}});
I found that Chrome does work a bit differently than Firefox. In particular, menus that close when the mouse is clicked outside of the menu remain open when inspecting them in Chrome (and they close when inspecting them with Firebug). So the advice is to try to use a different development tool in a different browser to see if it makes a difference.
Open console:
If you have javascript based tooltip, find applicable elements in console with appropriate selector. like below and confirm you able to find appropriate element with selectors.
$('your selector')
Write above javascript and Press enter. you will have list of elements.
Now e.g. If library added event on mouseenter enter following script:
$('your selector').mouseenter()
Press enter.
This way you can simulate mouse movement events without actual mouse. and can use actual mouse pointer to investigate thing in debugger tool.
This is an extremely old question by now, but I've found an answer that directly answers the "freeze the browser" portion of the question.
Control + Alt + B. This is "break on mutate". Which means, when you are hovering over an element with firebug engaged (Control + Shift + C), that when the HTML attributes would change, instead they hit a breakpoint, allowing you to easily navigate around to examine for paths, etc.