Curved corners on a popup.html? - html

I'm wondering how I curve the corners of the popup.html page on a Chrome extension? I've tried... http://borderradius.com/ entering 10 for all cornors and putting that in the body of my CSS but it doesn't seem to work. Is there a special way I have to style it?

Do you mean this whole popup container? It's not possible.
You can right click on a popup icon and select "Inspect popup" and then play with css in the inspector - you will see that popup container itself is out of reach (its some system GUI element probably).

Related

Can't find an element in the Web Inspector

There's an element that appears on the site, but I can't seem to find it in the inspector of the browser. I would like to hide it somehow.
On this page: http://gdhbau.hu/#bemutatkozas
It is the "BEZÁR" word with white color, next to the "Becsuk" button, when clicking on the "MÉG TÖBB" button (to expand the content).
This problem shows up when I turn on the "Automatically add paragraphs" in the WordPress SiteOirgin editor; but I need to use it, otherwise the content falls apart.
EDIT: This is with the plug-in called: "Collapse-O-Matic"
You will never find it since it's not an element.
It's part of the image in the background http://gdhbau.hu/wp-content/uploads/2018/03/bemu-bg-large.jpg

how to stop webpage click events from like firefox/chrome developer console inspector tools?

Question #1:
I am working on a chrome extension where it requires an inspector like tool to let user hover on a webpage. And to show outline on hover on a DOM element.
When user clicks on any element, I need to show a popup besides the element.
But at the same time that elements click event must not execute. It is very similar to developer consoles inspector tool. Can you please help how to do this ?
Question #2:
Can you please suggest why Chrome developer console's inspector tool does not work in this case ?
To reproduce:
1. Go to https://www.google.co.in/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwjQ377A-8vQAhUHQY8KHUHxCv0QFggaMAA&url=https%3A%2F%2Fconsole.developers.google.com%2F&usg=AFQjCNF0eH059mv86nMIlRmfsf42kde-wA&bvm=bv.139782543,d.c2I
2. Click on "products & services" menu (3 horizontal lines icon) in left top. A slide menu will open.
3. Start developer console (click F12).
4. Select anything on this menu.
Actual result: Side menu closes.
Expected result: Side menu should not have closed and developer console should have shown its html.
I got a solution to this. I created a div (of size 4x4 px). I move
this div with the mouse move event. I set the div coordinates so
that mouse tip is exactly at the middle of the div.
Div background is kept transparent, so that it is not visible to
users. So when user clicks on element, he is actually clicking on
the div.
And inside the div mouse down event, I stop event propagation.
Please let me know if anyone reading need any more pointers.
You may have tried this already, but I'd suggest adding a click listener to any clickable items, by adding these lines:
$(document).click(function() {
event.stopPropagation();
event.preventDefault();
});
Though because of the way things bubble up in the DOM, events attached to children may still fire, depending on the browser.

inspect script in chrome debug without losing ability to scroll webpage

When I have some breakpoints set up in a script google chrome removes the ability to scroll the webpage, saying at the top of the screen Paused in debugger. Is there a way to disable this so that I can look at elements in various parts of the page, while also looking at the script in the debugger?
Taken from here.
An easy workaround for the scrolling lock-up is to just jump to the console, and:
window.scrollTo(0, 800). (Replace 800 as needed)
You can click on the Elements tab and then hover over the HTML to the element you are interested in and right click to "Scroll into view". Not the most natural and fast, but it works...

How is the "travel mode" menu in Google Maps implemented?

I see this type of menu all over the Internet as a way to filter out data:
Does it have a specific name? I'm particularly interested in seeing how the pushed in effect is achieved. I've gone through the Chrome developer tools but viewing the CSS applied Chrome only returns a few classes and not the id of the element.
The menu type does not have a specific name as far as I know (although for all effects and purposes it is a set of radio buttons).
The pushed in effect is caused by an inset shadow and darker background color.
Here is a JSFiddle.
That menu is from Google maps.
It is what I might call an "icon" menu.
Buttons are not pushed in.
Instead, the images are swapped in and out depending on what is chosen.
Javascript is used to change the images and the content below the images.
Use Chrome and go to Google Maps. Type in an address and then click Get Directions. Once the buttons appear, right click on one of the button and choose Inspect element. That will show you the code that Googe is using.
The pushed effect is simply an image applied to the element when it's clicked
They're usually done with sprites
Here are some sprites from google
When the image is hovered/clicked a different spot on the image is used as the background for that element.

how to visualise/debug an imagemap?

I'm dynamically generating an imagemap for a chart tool I have.
I was hoping to be able to set a border or color on the area tags so I could check everything was being generated with the right coords, but a little research shows this is not possible.
So whats the easiest way to check my image map is correct? Are there any browser tools which will "visualise" the areas?
What about using JavaScript (and jQuery) to test it?
http://davidlynch.org/js/maphilight/docs/demo_usa.html
This plugin will highlight image map areas.
You can use FireBug for that:
Right-click your image and choose "Inspect Element with FireBug"
In the HTML tab of Firebug, the image tag is highlighted: locate and expand the associated map tag, which usually is right after it
You can now place your mouse over each area tags to see them highlighted over your image
One way to visualize an area tag in Chrome is to add a tabindex to the area tag(s) you want to see, and then click or tab to it. Chrome will nicely highlight the actual outline of the clickable area.
This solution unfortunately doesn't work in Firefox.
Image Map Editor is a plug-in for Firefox. It is the best tool I have found so far, makes creating, inspecting, and editing image maps very easy.
In Chrome you can select the area of the image map and click on the three little dots
to the left and then select "focus"
Never thought I would ever say that, but this is one of the few cases where Dreamweaver could be helpful. You'll have an interface, you will be able to work with anchor points and set your imagemap easily.