Google ads are not displayed in IE but visible in Firefox! - javascript

I have weird problem,
i've placed an google ads on my page and it is visible in firefox but it's not visible in IE. I tried in different systems..
I could not find the problem...
Javascript is on and google ads are no blocked and no specific ad blocker are enabled. I'm sure about that but i could not find about this issue..
My link is http://hiox.org

Open the site in IE8
Press F12 for developer tools
Click the mouse icon on the HTML tab
Go back to the browser window and click the DIV above "user comments" where the ads are supposed to render
Go back to the Develop Tools window and look at the list of Styles (on the right) the DIV has inherited
Untick to disable overflow-x: hidden and the ads will appear
Fix that CSS!

Related

How to make Chrome Extension popup draggable?

I noticed that the 1password chrome extension browser action popup is draggable. How can I make my own chrome extension do the same thing? I can't seem to find anything in the chrome extension docs.
A few other features the 1password chrome extension popup has that I also can't find in the docs.
When the 1password popup appears, there's a little triangle at the top of the popup which appears where my cursor is. How does this happen? As far as I'm aware, then html document I associate with the popup is displayed as a rectangle without the triangle.
I can't right-click on the body of the 1password popup to inspect javascript. Could this be because they overrode the default contextMenu behavior?
The standard popup window cannot be dragged, neither you can add anything outside of its borders. It's a popup page declared via browser_action or page_action in manifest.json.
The workarounds are:
open a separate window using chrome.windows.create,
specify the type parameter as 'popup'
create a DOM element inside the web page using a content script,
see also How to really isolate stylesheets in the Google Chrome extension?
The element can be draggable.
To inspect pages that block the context menu you can open devtools from the browser menu, then "More tools", or focus the address bar first, then press the hotkey to open devtools (CtrlShifti or F12 in Windows) or from the internal UI page chrome://inspect/#pages.
P.S. technically you can write an external utility and run it via nativeMessaging so it'll use a low-level OS API to move the standard popup window, but that's very fragile.

Gmail message "Show details" pop-up box is is hidden upon mouse-over when InboxSDK chrome extension is installed

I am developing a chrome extension for Gmail using InboxSDK. I have an obscure, but frustrating issue. The email message "Show details" pop-up box disappears upon mouse-over whenever the extension is installed. The extension does not directly interact with the pop-up in any way. The issue usually goes away after a few replicating it a few times in a row for a thread.
I've looked at the live html and css of the page to see what's going on. The visibility css tag for the details pop-up is switching from "visible" to "hidden" against my will.
I expect for the pop-up to stay visible until I click outside outside of the pop-up. This is it's normal behavior.
The problem fixed itself when I updated my Chrome to Version 72.0.3626.96. This question is closed.

How did the popup of this chrome extension open from bottom?

I know about chrome extensions and I built one.
As far as I know, popup can only be opened from the button action (page action too) and will be closed once they lose focus (i.e. if users clicks somewhere on the webpage).
But how did this extension - barc manage to
1) open from bottom
2) refrain from closing even after losing focus
I looked at my chrome://flags/#enable-panels and found panels to be disabled. So, this ain't the cause.
I'll be happy if some one can point me to the underpinnings of this implementation or API?
It's injecting custom UI into pages via content scripts, not showing it in a panel.
You can test it by minimizing/moving the Chrome window.

How to inspect dynamic on-hover elements of the webpage in Firebug?

I have a webpage where photo previews are displayed when you hover the mouse over certain icons. I want to inspect these preview divs in Firebug, but the problem is that you cannot reach it with the mouse, since the preview will disappear when you move the mouse off the icon!
Is there any solution to this problem?
One possible solution would be to stop the JavaScript by some keyboard shortcut. It must not require to move the mouse cursor, because then the preview would disappear. But looking at answers in "Is it possible to stop a javascript with Firebug without using breakpoints?" it doesn't seem to be possible...
Also note that the element is not hidden anywhere when unseen, it is created on-hover and then removed.
In a case like this: http://www.starplugins.com/cloudzoom a quick solution that works with Firefox/Chrome Developer Tools and firebug is the following:
have the developer tools opened
scroll your page to a position where the element that has the hover effect is a bit covered by the developer tools pane.
this way, when you "mouse-out" of the element and "mouse-in" to the developer tools pane the hover effect is still in action.
It's not the best solution but it might help :)
Update:
(it covers this case and works with Chrome):
have the developer tools opened
right-click on the element you want to examine but don't click "inspect element" or anything else
the pop-up will freeze so you will be able at least to find it in the already opened inspector
For Chrome developer tool. you can select the parent dom node and right-click and then select "Break on subtree modification". For details, checking on https://camerondwyer.com/2018/07/11/how-to-inspect-dynamic-html-elements-that-keep-disappearing-in-chrome/

How to stop the header from reloading in chrome

I have a small problem which is dependent on browser. If you open this link, http://mazzeyprod-env-wbyfpn2srt.elasticbeanstalk.com/ in chrome and mozilla firefox you can see that in Mozilla Firefox if click on any buttons on the header the page smoothly transitions but if you do the same in Chrome, it reloads the entire page. But in Mozilla the Header always stays on the page. Can anyone help me how can I fix it ?
Both browsers are loading the pages as you navigate. It happens that ff does not make it apparent when reloading parts whose content remains the same. To notice the reloading you may use firebug or dev tools of ff and change the color of a menu link, once you navigate to another page the menu link will be reloaded and the color will be reverted.

Categories