I know it's possible to save as... and look at the html file and see all the classes generated by javascript, but I would love to know if there's a firefox (or other browser) add-on which will show me page source with the javascript generated classes.
Working with jQuery mobile and trying to carefully modify all the CSS it generates is tough without it. Thanks.
Try Firebug. It's a line-level javascript debugger for firefox. It will show you all of your script code and even let you step debug it.
To view generated mark-up, use the element inspector (the blue "box & arrow" icon in the top left of the firebug toolbar). The element inspector allows you to hover over elements on your page and view its markup.
Try "View Source Selection".
Right click page and Select All and right click again to View Selection Source to view the source that a script generated, in FF. (at least in v.3.?)
Related
I saw similar problems to my problem, but I have not seen useful solutions for my issue.
Situation:
When I play a video file within firefox, I can see current state of html-markup (F12) because of that I can trigger some funtions in my php behat/mink code.
The same situation occurs in IE, and I dont see current state of my markup-code and I can´t trigger my test-functions.
Example:
Firefox opens modal dialog and it appears by markup (F12) css class "open window"
IE opens modal dialog and it not appears by markup (F12) css clas "open window"
How can I detect current markup state in IE, when I can look only at markup?
UPDATE
Here is my code. I just looking for one css-selector, but it does not working
on IE10
$node = $this->getSession()->getPage()->find('css', $css_selector);
Problem beginns by IE10:
When i press F12 within IE10, i will see developertools.
I see within "HTML-section" current state of html-markup.
I click on icon and modal dialog appears.
Actually my html-markup changes after that. Some css classes come additionaly to video-tag.
I have to click by developertools on "refresh"-Button or F5 to see
currently markup-state, which contains modal-dialog.
To achieve same effekt whithin behat, i use:
$this->getSession()->reload();
That does not work. Behat can not find new css classes, which referes on modal-dialog.
Please look on picture:
I hope, it is clear now, what i mean :)
As i understood, for IE the class that you are using in the validation is not added and you are not able to check that the modal is opened.
As an alternative you could use alternative methods to verify that the modal is opened and to avoid cross-browser issues like this.
I think is better to work with what you already have without reloading or doing any actions that could lead to extra code that could affect other browser or could affect the stability of the scenario.
One way of doing this is to check that the modal is visible using isVisible() method.
I need to show a dialog box that's is like chrome's. But I want a modal alert, because js alert freeze the page.
I tried getting the css from it, but I think it's not possible.
Does anyone know how to do it? Or have the css for it?
Chrome JS Alert
You might want to check out this page. Sounds exactly like what you're trying to do. It uses the onload javascript attribute, which says "run when the document is finished loading".
http://www.htmlcodetutorial.com/linking/linking_famsupp_88.html
In my website project, an element only changes style when I drag something over it. It does this by adding a CSS class to it.
The problem is that I have a hard time editing this style because I can't live edit it in Chrome. I have to edit the file, reload the webpage, then drag something to see the changes.
Is there any way to do this just inside Chrome? Most magically, would be if there was some way to freeze my dragging and then be able to edit. Anything close?
Browse to the desired page
Open console (F12)
Select 'SOURCES' tab in chrome inspector
Drag the element
Hit F8 to freeze (if you have clicked anywhere on the actual page F8
will do nothing, your last click needed to be somewhere in the inspector, like the sources tab)
Go back to elements tab in inspector
It should now be nested in the trigger element's html
Try this trick:
in Google Chrome Console type at any time you want to test that class
var elm = document.getElementById('yourElementId'); elm.classList.add('yourClassToTest');
(please note: you have to press SWIFT+ENTER if you like to create a new line break in Google Chrome Console)
At this point you have added the class you want to test on the div.
Just use the web inspector, in order to change/inspect any CSS properties.
This solution lets you avoid to manually drag something to see your class/changes.
I have a bug that I experience only in IE. I would like to inspect DOM by using IE developers toolbar, but unfortunately cannot seem to do it as complete DOM is generated dynamically. Does anybody have an idea how to overcome this problem?
There is a reload button in the toolbar to the right of the floppy disc icon. Hitting this also works.
Once that div is generated dynamically, then inspect it. Answered it as it seemed to work for you... :)
once page is completely loaded then click F12, after that reload page again and then on developer toolbar click REFRESH button which is available to exactly next to save button in developer tool bar. After that click the arrow for inspect element.
Alternatively, make sure Inspector pane is active then hit F5 key.
I use fileUpload control in asp.net web page, so how could I control the "browse" button, just like any other button?
etc. I want to change "browse button" back color, border style.
Thank you in advance.
how could I control the "browse" button, just like any other button?
What makes you sure there will be a browse button? That's up to the web browser; some might not have a text-plus-browse arrangment at all. In particular Safari arranges the control quite differently.
For reasons of security, and because there is no standardisation about what a file upload control should look like, CSS gives you almost no control of the style of file upload controls.
Whilst the opacity hack mentioned in phoenix's link does kind of work, I wouldn't recommend it at all. There's no guarantee of getting the ‘clickable’ part of the input control lined up with the part of your ersatz control that looks clickable. Even on a single browser, different fonts and other settings will mess it up. For example on my browser with the quirksmode example only the right half of the textbox is clickable to open the browse dialogue; clicking the faux-button does nothing and clicking the left edge of focuses the faux-textbox. With fake-input you will be offering a shoddy and in the worst case broken experience to many of your visitors.
Live with the default upload styling, or augment it with a Flash uploader in the progressive-enhancement manner.
You can add a div layer on top of the fileupload control and style the div layer. Make the file upload control transparent by setting its opacity.
A good one
Styling an input type="file"