I'm trying to use Firebug to inspect a page element that appears when I hover over a photo.
Problem is, the element's position is dynamically offset from the mouse position, so it's impossible for me to right-click on it to get the "Inspect Element" option.
I had hoped that the onhover element would be inserted into the DOM in a sensible place, but so far, I haven't been able to find it.
Any suggestions?
If you know where in the DOM the new element will be created (quite often those elements are created as children of the body element) you can set up a breakpoint for when it is created.
Let's assume that the element will be created as a child of the body element. You will be able to inspect the element if you follow these steps:
Load the page
activate FireBug's HTML panel
Locate the body element
Right-click on the body element and choose Break on Child Addition or Removal from the popup menu
Go hover over your photo to trigger the wanted element's creation
Script execution should then break as soon as the element is created. At that point you will have all the time you need to inspect that dynamically created element, even in the HTML panel.
This isn't an ideal solution, but you could investigate the onhover code to find out more information about the element that's being created. That info might allow you to find it in Firebug's DOM viewer.
Can you search for the element using the search bar at the top of the firebug window?
You can use CTRL+F to find it in the code view.
Related
I have a TinyMCE editor embedded in a page in which the outer element has an ondrop handler that uploads dropped files.
However, if the user drops a file on the TinyMCE editor, the parent handler is never called. Regardless of whether I enable or disable drag-drop in the editor, the event never propagates to the parent element.
Is there a way to propagate an ondrop event from the TinyMCE editor to the surrounding element?
The editor itself is an iFrame so if you want to propagate the event you need to make sure you are passing it to the parent if you want the page to get the event.
Perhaps you can make a TinyMCE Fiddle or CodePen of what you are doing so people can see what you have tried?
We have a custom input element that contains several div elements that are masked behind a canvas element. The div elements handle click events, and this works fine in all browsers.
How can we click such an element in Watir-Webdriver? If we locate the div element and use the .click method, it causes the error:
Element is not clickable at point (423, 247). Other element would receive the click: <canvas></canvas>
Which of course it would, before event bubbling. What we want to do is to click the location where the div element is (which first clicks the canvas, and then bubbles to the div).
We wouldn't want to fire JavaScript events directly to the div, as it does not correctly test the event bubbling.
You could, of course, just click the canvas element just like you clicked the div. But to answer the question you raised: you can try to access the underlying selenium-webdriver browser driver and utilize selenium-webdriver methods to do this.
driver = $browser.driver
element = driver.find_element(css:'div.class_name')
driver.action.move_to(element).click.perform
I have this page I can only access in the browser. There is a HTML element that only exists during drag&drop, and I want to get / analyze its HTML code in the Inspector / Firebug.. but as soon as I stop dragging, the element is removed.
Is there any way of getting the generated HTML element without wading through the JS source that builds it?
EDIT: got it, using the ctrl+S shortcut in chrome to save the page while holding mouseDown with the dragged-element did the trick.
Firebug html inspection shows the HTML of the page real time, so it does show changes caused by interaction. The trick is probably to scroll the inspection panel to the section of the HTML where your drag element appears. That way you would be able to see it while you drag.
So I have an attribute selector that currently changes the view of a grid based on the attribute passed to that grid. I also have a panel stack directly below the grid, with panels that hold iframes, which needs to be changed as the user selects an attribute in the selector. In other words, as the user selects an attribute from the selector, the panels would changes and show the new iframe. Is there a way I can somehow control the panel stack from an attribute selector?
The panel stack contains iframes , and each panel has an iframe with a specific URL source. What would be great is if I could somehow pass the attribute to the URL so that the iframe in a SINGLE panel could change based on the selection made in the attribute selector. For example, if I set the URL source of the iframe to "/servername/microstrategy/asp/{&attribute}.html" and had my html files stored in the correct folder. But there doesnt seem to be a way to pass the selected attribute to the source URL of the iframe.
The only thing I can think of is to somehow access the "code-behind" for the click event so that it BOTH changes the grid as usual, AND causes the panel stack to change panels.
Is there something in the Web Editor or SDK/Eclipse IDE that would allow me to access such logic? Or is there some cool work-around that would allow an attribute selector to change the panels shown in a panel stack.
Thank you for your help,
Kind of old question, but AFAIK there is no way to do it. You should probably go with text-boxes and use them as selectors. Maybe with view filters you could achieve something similar...
Here is the scenario: a User will see a list of company names, each wrapped in an tag. He is able to see dynamic information and as he hover over each name and then make a request.
So Given a list of companies, each wrapped in an tag.
When the cursor hovers over an tag
Then a "pop-up" appears that contains an -based, dynamic content.
Given the pop-up
When the User clicks on the "submit" button in the pop-up
Then the form (based on the framework" is submitted and ajax displays "request succesful"
So, because I am using a php-framework, I'd like to use iframe to contain the form.
Some challenges:
When the cursor is no longer hovering over the tag, the hover disappears. How do I keep it operating?
How do I make it appear in an so I can have full form-submission and POST-ing dynamic values through the URL?
How do the "popup" disappear when the cursor is no longer on either the -tag or the pop-up itself?
Can I do it without loading a bunch of 's onto the page, because the list of companies could be long.
for an example:
http://browseusers.myspace.com/Browse/Browse.aspx hover over one of the link.
jQuery with the clueTip plugin is something I have used for this in the past.