The application I'm testing is very complex. It has dozens of tabs and thousands of fields. For my tests I need to access ~150 fields.
I'm going through the process of collecting the necessary information to access the elements: xpath, id, css selector, etc. All of these elements sit inside of iframes, sometimes as many as 4 nested iframes. I'm using Firefox to inspect the elements and there is an easy way to get the xpath, css selector, etc. However, in order to figure out what iframe an item is in I have to look through the path in the scrolling bar at the bottom of the inspector window. This is working, my code works, but it's tremendously tedious and has the potential to introduce errors if I miss an iframe.
The question is: is there a way to get the list of iframes that wrap around an element that is easier/faster than the manual investigation that I'm doing now? Possibly something similar to the copy xpath, etc. that is built in to the inspection tool. I'm open to both ideas and applications/extensions.
Once you open the firepath as mentioned in below image :
If you see on top left corner it showing top window, Just click on it, It will show you all the frame present in your web page and once you select any frame then it also show that frams' html as well.
As shown in below image, the frame get highlighted once mouse over on that frame
So here you can easily identify your element is in which frame.
And once you move pointer to the element it will automatically shows that frame as selected where your element is. As shown here.
Related
I've been experimenting with this for over a week and I'm about to give up, as I think this is not possible, but I wanted to reach out to this awesome community first.
What I'm trying to achieve is to, somehow, overcome the stacked z-index settings.
Let me show you an example so you maybe get the idea faster:
http://raulmellado.com/clientes/zindextest/
What I'd like is to have the green div (#shouldbeontop) on top of all elements (I am setting it to position:fixed).
In other responses in stackoverflow (yes I've read dozens of threads here), the answer is to change the html, move elements around, etc, but my problem is that I'm creating the #shouldbeontop and #scrollbar elements dynamically using js (my application is a bit more complex than this example, but I've tried to simplify to share my problem here).
I've created a js that can be embedded (ideally) on any webpage which will add the elements, so I can use js if needed, but I can just assume that the #shouldbeontop and #scrollbar elements will be there; the rest could be any html/css combination that's already there.
Usually, where there is no z-index in different divs, this works beautifully, but as soon as there is some stacking, it breaks :-(
If you would like to see a real life application of this, here you can find a quick & dirty demo: http://videngage.me/demo/demo1.html (here there is no z-index, so the video [#shouldbeontop in my simplified demo] is always shown on top (when you scroll down), but here http://www.members.skolahudbyonline.eu/rytmus-trening-majstra/ the video goes behind when you scroll down)
Is there an universal solution for this (using css and/or js), or should I just give up?
Thanks sooooooooo much for your help
For an Ext JS 4.1 grid with GroupingSummary, I want to be able to print one page per group.
I am able to get a working solution on Firefox by adding a row after each summary, and setting its #media print style to page-break-before:always. However, this does not work on Chrome or Safari. As I understand it, the reason is that Webkit does not support page-break-before on table rows. I even tried setting the table row display style to block to try to force it, but the page top margins are messed up.
I also was able to get a working solution for all browsers by writing a special printer script, which basically extracts the grid html, clones grid html for each group, and moves each group's table rows to one of these new html grids. Then it takes all the html and writes it to an iframe that covers over the existing web page screen and calls window.print(). One nice thing is that the column headers are at the top of each new group's page.
My main two gripes with this solution are: (1) user can't print original web page using browser print function, i.e., user needs to click on my print button; and (2) it's hacky.
It seems like the best solution would be an Ext-native solution for rendering grouped grids, each its own html table. Does anybody have their own solution that they like?
I am new to Fireworks CS4 and keen to learn to use it right but I am having difficulty understanding the whole slicing and exporting mechanism, so that I can also use in Dreamweaver CS4.
What I have is a header banner image where I also have the name of the site to the left of this header banner.
On this same header image, I want to place two buttons (with rollover effects if possible), to the top right area of the header image, with links to another URL.
Now the things that I am unsure how to do are based on the above description are:
1) How can I make the name of the site section only, to the left of the banner as a link to a url when the user hovers over the name part only, the mouse hand turns into a pointer and gets redirected to url
2) The same goes for the two buttons that I have created as two individual symbols?
3) How can I slice the above two queries, so that I can export into Dreamweaver, so that all the required code comes across with all the desired effects, that is, when previewing in Firefox, all hovering on site name and two buttons work as required?
I am unsure how to slice it? Do I have to assign hotspots to the sections? I am unsure how to export it.
There is a slice layer in Fireworks. It is always the top layer. It lets you draw shapes over parts of your graphic, which show up in translucent green. When you click on one, you have the option of adding a URL and other parameters of a link. At that point, you have the option of exporting as sliced images, an HTML page, etc. If exported as HTML, the images will be contained in anchor tags with the URLs you gave them. Or you can just export the slices and assign the links in Dreamweaver.
I have two Flash objects on a webpage (call them A and B), and they overlap so one partially obscures the other. I don't seem to have any control over the z-index, to force B in front of A. Whatever I try, A always 'wins' and stays on the top!
I have read many people's posts about problem with getting HTML to show over the top of Flash...but nothing about when your two overlapping items are both Flash objects.
I have tried various combinations of wmode=opaque/transparent/window
I have tried CSS position:absolute/relative and z-index:0/999
I have tried placing the HTML sections in a different order
The problem is the same in IE and Firefox
I do not want to use jQuery in this case
In my particular situation B must have position:absolute and wmode=transparent, and sit above A. A needs relative positioning and transparency is not required. However, I have been testing without these restrictions, and I still have no control over the overlap. Are some SWFs (ours are adverts sent by clients) created in such a way as to override any code control of z-index?
The reason for this arrangement is that A is a standard banner advert at the top of the page, and B is a 'page curl' effect where a corner peels down from the top right of the page.
Thanks for any advice you can give.
I managed to control the situation for one of my advert banners by getting rid of the <object> tag and just using <embed> on it's own. Then the wmode=opaque trick worked in both IE and Firefox.
However, a different advert SWF did not respond to this change, and still shows above my page curl/corner peel.
I need help. My main page has a long table that will typically be approximately 2 screens "tall" (assuming a 1024x768 browser window).
I want
the user to be able to browse that table up and down, while always having a set of control buttons available in the currently visible portion of the page.
AND
to retain control over the color scheme of all elements on the page.
The problem is that both solutions I could think of that address the first point (using an overflown div or a frame) involve scrollbars that I cannot style. (At least on Firefox they will invariably be gray.)
I cannot implement a "pager" which breaks the data on the table into chunks which are served one at a time (eg, having a "next 40 results" link at the bottom). The user needs to refer to the full table to find and compare multiple rows throughout the table.
What are my options? My head hurts when I think of moving this entire page to Flash for this reason...
thanks in advance...
i would use jquery and a scrollable div.
Here are some resources to get you started.
http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div
http://flowplayer.org/tools/demos/scrollable/vertical.html
http://logicbox.net/jquery/simplyscroll/vertical.html
Don't change the styling of scrollbars unless you really know what you're doing! However, if you understand the usability implications (and try to make them as user-friendly as possible), try the following options:
If you use jQuery, try jScrollPane.
If you use MooTools, try MooScroll or MooScroller.
The following StackOverflow threads might also be useful:
How do I change the browser's scrollbar colours using CSS?
What's the deal with CSS and scroll bars?
How can one use scroll bar images?