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.
Related
I have this weird problem - when I'm editing my website on elementor, the accordion works fine (open and close). when I'm not editing, it doesn't work.
I found the the problem is that the anchor that supposed to open and close the accordion element, is empty (just empty href attribute), so when I press it to open the element the page refreshing.
any idea why it happens? or how to fix that?
I want to develop a firefox addon sdk to show a sidebar or a panel that contains an embedded browser with a navigation bar.
I have constraint too : Since the page shown in the embedded browser, I want to be able to inspect the dom, to hightlight some specific text and also to be able to select text from and send it to a specific input in sidebar with right menu.
Is there some examples or ideas how can I do this?
P.S : I'm sorry for my bad English ;)
Use sidebar module, create HTML file with a fixed textarea top:0, left:0, width: 100%. Create an iframe that takes up the rest of the sidebar. User enters text into the textarea, then listen for enter keystroke, use regex to see if it's a URL, and set iframe source to the URL if it's a URL or to a Google search if not.
Loading a whole browser into the sidebar seems like overkill, but if you really want to, try to load chrome://browser/content/browser.xul into the sidebar.
View Source from the IE browser, to check if the values are binded to labels and input boxes whenever the partial view are being loaded dynamically through jQuery ajax call.
How to find the updated values to text boxes and labels?
I know by using Firebug or web-kit or chrome inspect element we can identify but through view source how can this be achieved>?
You cannot do that through IE View Source, in IE8 you have Developer Tools for this (Shortcut: F12)
View Source will show you the actual static markup sent from the webserver.
It doesn't show dynamic updates.
I have written an panel which supports file / image uploads. So the panel is a simple plain form. The panel works in a normal Wicket page.
What I would like to do now:
I would like to use the panel in a modal window. The panel is displayed correctly. However, when I submit it / upload a new file, my browser prompts whether or not I would like to leave the page. The page which contains the DIV of the modal window is a form itself.
My research didn't turn up any interesting information about forms in a modal window expect it has to be self contained (nested form). I think this prerequisit is met.
Is there any information available, what I have done wrong? Any tutorials?
You need to use an AjaxSubmitButton (or AjaxSubmitLink) to submit your form. The problem is that the modal window requires Ajax communication. If you use the window to just reprocess a whole page and don't care about the Ajax'ness, then you can override the ModalWindow#getCloseJavaScript() method.
As Martijn pointed out, the modal window relies on AJAX communication. So use AjaxSubmitButton or equivalents. When components in the main window need to be updated after the submit of the modal window, this can be done by adding them to the AjaxRequestTarget.
However when it comes to multi part forms (file uploads) this does not work quite. Apparently multi part doesn't play nicely with AJAX. One has to do an IFrame trick as pointed out e.g. here: http://www.dooriented.com/blog/2008/04/23/wicket-ajax-like-file-upload-on-a-modal-window/
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.