Chrome, Firefox deny image in popup; IE11, Edge fine with it - javascript

I have a JavaScript/jQuery application that dynamically creates a catalog of my film collection, based upon a JSON file. For example, if you click the Titles button, the space below the button fills with all titles in the collection. Each title line also includes a link that uses the serial number as link context, providing a small body of film information that appears within a new window (=popup). All browsers (IE11, Edge, Firefox, Chrome) behave similarly to this point.
IE11 and Edge also show a JPEG image at the bottom of that film data, where that image is a link to another JavaScript application on my server that shows the JPEG image (up to) full screen.
Chrome does not acknowledge the JPEG image at all. Firefox shows an outline of the image but does not show the image nor acknowledge the link that it is to the other JS application.
I have gone through Chrome settings enabling my site for any action Chrome specifies. No change.
Similarly for Firefox. No effect.
The attached photo shows how the Microsoft browsers display my intended effect.
Any idea what browser rule I'm violating here?
4 Feb 2016 I'm adding this link to the application discussed as it is running on my server, which therefore allows access to both the JavaScript and JSON code. Although this is a private application of no use to anyone but myself I cannot understand why the techniques used operate only within the two Microsoft browsers. A Mac-using friend confirmed today that Firefox doesn't show the image, and Safari won't even enable the links on the first page! If there is something I'm doing wrong here, I'd love to know what it is!
http://www.michaelbroschat.com/film/discCatalog.html

Related

Google Chrome - Override White Blank page when loading new tabs

"I'm looking for different Chrome apps to make my pages darker/inverted to reduce eye strain, I found some apps that work but the only thing left, which these apps doesn't seem to override, is the White Blank page.
When a new page is loaded, Chrome first displays a White Blank page, while the page is loading then displays the website's content. Is there a way to override this While page to say Black? At the moment, everytime I click on a link or open a new webpage, the screen goes from darkcoloured (through inverted/darkening page apps) to the White Blank screen for a brief second then the new page loads in a dark colour again. This acts like a "White Flash" by the screen everytime a new page is loaded and causes further eye strain. This is why I want to know if there is a way to override this White colour to Black."
This question was already asked before in here, but the answers suggested back then do not seem to be working on my current version of chrome 49.0.2623.87 m.
The links that I have referred to already :
-This
-comment 261 here
-This
I created two files manifest.json and script.js in AppData\Local\Google\Chrome\User Data\Default\Extensions\
and did the "load unpacked extension" and that did not work either.
Edit 2021-01-01
Install chromium-based Brave web browser as a drop-in alternative to Chrome. Then:
Install DarkReader
Click Settings > Appearance > Brave colors > Dark
Open new tab and click Customize in new tab page to get an acceptably dark appearance:
Additional Benefits to Brave:
Brave is forked off of chromium, so generally behaves the same as chrome. It prioritizes user privacy and comes built-in with Ad Blocking capability that is also very easy to disable as you're browsing. Plus many other features I'm not mentioning here.
Original Solution (If you really don't want to use Brave)
As of April 2016, this issue has been pending for over 8 years (aside from the intermittent work-arounds that no longer apply as you pointed out). If you haven't already, please consider "starring" these reported issues.
Current Reported Bugs:
https://bugs.chromium.org/p/chromium/issues/detail?id=1373
https://bugs.chromium.org/p/chromium/issues/detail?id=470669
https://bugs.chromium.org/p/chromium/issues/detail?id=311
https://bugs.chromium.org/p/chromium/issues/detail?id=457714
https://bugs.chromium.org/p/chromium/issues/detail?id=128290
https://bugs.chromium.org/p/chromium/issues/detail?id=119871
https://bugs.chromium.org/p/chromium/issues/detail?id=409378
https://bugs.chromium.org/p/chromium/issues/detail?id=126341
https://bugs.chromium.org/p/chromium/issues/detail?id=64317
https://bugs.chromium.org/p/chromium/issues/detail?id=530026
Especially the first two links appear to be gaining some traction. More users that support them being fixed helps gain more attention and allows you to monitor progress from email notifications (or you can unsubscribe).
Report This Issue:
Next, submit feedback to chrome through your browser following these steps:
Open Chrome and click the "hamburger" menu on the top right corner
Click Help > Report an issue.
Add detail similar to the following:
Between page loads and new tabs being opened, there is a brief moment
where the entire browser screen is painted white, causing severe eye
strain.
This issue has been referred to in the following chromium issues:
https://bugs.chromium.org/p/chromium/issues/detail?id=1373
https://bugs.chromium.org/p/chromium/issues/detail?id=470669
https://bugs.chromium.org/p/chromium/issues/detail?id=311
https://bugs.chromium.org/p/chromium/issues/detail?id=457714
https://bugs.chromium.org/p/chromium/issues/detail?id=128290
https://bugs.chromium.org/p/chromium/issues/detail?id=119871
https://bugs.chromium.org/p/chromium/issues/detail?id=409378
https://bugs.chromium.org/p/chromium/issues/detail?id=126341
https://bugs.chromium.org/p/chromium/issues/detail?id=64317
https://bugs.chromium.org/p/chromium/issues/detail?id=530026
Click send feedback
I would then recommend installing Chrome Canary, as some of the experimental fixes to those issues above will first appear in Canary.
Invert Computer Colors:
Finally, as a last resort, turn on color inversion and use the whitest chrome theme possible.
http://smallbusiness.chron.com/invert-colors-computer-43975.html
https://discussions.apple.com/thread/5780779?start=0
White theme (that is very dark when inverted):
https://chrome.google.com/webstore/detail/minimal-white/clcbojcafbggjenbeflknhfimpcikmlc?hl=en-GB
Significantly better in Chrome-Beta and even better in Chrome-Dev (chrome-unstable), almost unnoticeable.
Using Ubuntu-Cinnamon-Remix 21.04.

Remove "connecting to..." messages from browser/firefox

My website project uses html, PHP, javascript, css and mysql. My page is always fullscreen. (so no browser bars etc) Everything that is being displayed, is controled by my code. However...
My page reloads a php page in an iframe every 0.5 seconds. (and more might be added) When the page is loading, I get a "connecting with 192.168.XXX.XXX", or something scimilar, in the left bottom of my full screen. How do I disable these kinds of messages?
Most of my buttons are already javascript functions, since they have to do multiple things, but with a href=, I also get that same display in the bottom of my browser. This really screws up my full-screen layout.
Things I've tryed: google, and changing z-index of my images, in the hopes it would cover up this "connecting with" info box.
I would like to get a CSS/javascript solution for this problem. If I need to change browser settings with the "about:config" page in firefox, that is also fine.
*PS: English isn't my native language, and my browser is also in another language then english. Tryed to find a solution on google, but could not get any relevant info, not even the name of that bar.
As far as I know, it isn't possible to fix this problem using any code on my web page. It is browser related.
Finding some help at the mozillazine.org forums, got me to some good search queries.
If you want to remove the status bar (that's what it's called), you can use the plugin "Status-4-evar". It gets you the ability to turn back time, and get some lost functionality back into firefox. It also allows you to disable the status bar. However... When in full-screen, firefox (version 43.something) then puts back the unwanted status bar, even if the plugin/add-on should have blocked it.
Second solution should be to create a userChrome.css file, and put it in some directory in your firefox profile. Finding this directory using the mozilla KB was really frustrating, since it isn't correct/out of date.
Correct location for your userChrome.css file should be:
C:\Users\XXXX\AppData\Roaming\Mozilla\Firefox\Profiles*random string*.default\chrome\
c:\users\XXXXX\ could be different on other windows versions. The chrome folder might not excist, so just create it.
Then create the userChrome.css file, if it does not excist already, and add the following tekst:
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
.statuspanel-label {background:#FF9!important;color:black!important;font-family:"DejaVu Sans Mono"}
statuspanel {display:none!important}
statuspanel {max-width:90%!important}
statuspanel[type="overLink"] .statuspanel-label
statuspanel[type="status"] .statuspanel-label[value^="Looking"]
statuspanel[type="status"] .statuspanel-label[value^="Connect"]
statuspanel[type="status"] .statuspanel-label[value^="Waiting"]
statuspanel[type="status"] .statuspanel-label[value^="Transfer"]
After having done that, restart your firefox, and all status bar messages will be removed, even in full-screen.

In Google Chrome, Google Docs can control headers and footers from javascript. Does anybody know how this is achieved?

That's basically it. Somehow, the javascript in Google Docs can turn off the default headers and footers showing the URL, date, page numbering, etc.
This only works in Google Chrome. When Google Docs is running from another browser it will print the headers/footers unless removed manually through the print configuration dialog. In Safari, it seems to generate a PDF server-side which of course will print outside of the browser.
I've searched around the web and have found nothing on how this is done. The javascript in the page is of course minified and obfuscated so it's difficult to get any insights from there.
So before I'm forced to dive into that spaghetti, I'd like to know if anybody has any ideas of how this is done.
After delving into some source code I found on a web page that has also resolved the issue (not Google Docs), the secret is the following CSS:
#page
{
margin:0;
}
This only works on Chrome, and perhaps Opera though I have to verify if the latter is true as it's printing the background color by default while chrome prints with a white background and the colored background in my page might be just obscuring the header/footer text.
Other browsers give differing results:
Firefox and Safari ignore the margins apparently and print the headers/footers anyway.
IE9 makes a mess of things and the contents print overlapped with the header/footer text. Poor browser always gets all the heat...
In conclusion, combining this with silent printing coming out in Chrome 18 kiosk mode will make for some interesting functionality, such as mail merge capabilities right from the browser though I still have to research how secure kiosk mode is though, as navigating to a malicious page runs the risk of exhausting printer ink and paper.
Navigation should be restricted to a URL white-list in this case.

Dragging and dropping images from Firefox into Microsoft Powerpoint

I am trying to make a web page which allows users to drag and drop images into Microsoft Office applications, specifically Powerpoint.
By default (as of FF3.5), Firefox will insert the source URL when an image is dropped rather than the image itself. After adding the following Javascript/jQuery code (derived from https://developer.mozilla.org/En/DragDrop/Drag_Operations),
$('img').attr('draggable', true).bind('dragstart', function (event) {
event.originalEvent.dataTransfer.effectAllowed = 'copy';
});
dragging and dropping works from Firefox to Word and Excel, but not to PowerPoint. For an example of what happens, see http://slides.html5rocks.com/#drag-and-drop. I have tested this with FF3.6 and FF9.
How can I make it work with PowerPoint?
Just drag'n'drop outside the boundaries of the ppt slide (to make sure you're not dropping on a predefined textbox) - and release the mouse button -no coding needed!
Firefox drag will drop the image at the center of te ppt slide.
Status quo
Sadly there is nothing you can do from within your browser and the application to enable drop support for PowerPoint.
This is something that needs to supported at source level in PowerPoint (and it seem to be if you don't drop the image on an existing element but right outside the slide frame you want to drop it onto - but probably depending on version).
If it (for some reason still) does not support the image part of the drop but just the link (and if there is no option provided for changing this behavior) there is little to do but to hope Microsoft will update PowerPoint with this support in the future, - or - check the following options for work-arounds if needed:
Add-ins
You can look into writing an add-in (or possibly just use a macro - you might need to lower security to medium [PDF] for macros) for PowerPoint that will take the link that is dropped and replace it with the image the link refers to.
Here is one place to get you started making add-ins if this is a viable option.
Here is a commercial framework that makes creating add-ins very simple.
(disclaimer in this regard: I am here assuming this will be possible due to add-ins such as this which allow you to show a live web page inside PP).
Pipe-line / work process
There is also the option of injecting a third-party applications in the pipe-line to do screen snapshots of the image and have it inserted automatically into PP.
SnagIt is such an application (and there are probably others) and it has free extensions that will allow you to integrate "snags" directly with PowerPoint.
Or (the perhaps too obvious option): simply copy the image in browser and paste it into PowerPoint.
What is your version of Powerpoint?
It's very important because image format support may be lacking.
If that's the case your code needs a minimum version warning addition.
Could also ask to convert image to suitable format.
It may even be the case that it's impossible to the version of Powerpoint you're using to support this in the way you want.
You could try to use html code.
This code might help you:
http://classroomtech.org.uk/2008/08/drag-and-drop-in-powerpoint/
Other possibilities are OLE object with a link to a image.
Could check how other Microsoft applications, that do something similar, handle things.
If that doesn't work you could try to generate an OLE object with a link to the image in it.

Lightbox-style dialog shows below YouTube movie on Mac OS 10.6

This is a "but it works on my machine" one and could be tricky:
I have a lightbox-style HTML dialog that shows a menu on top of a web page. It can be injected into any web page via a JavaScript bookmarklet.
One of my users is trying to use it on YouTube.com with the result that the flash movie is rendered on top of the dialog (a div with high z-index).
I can't reproduce this. It works just fine for me. The dialog shows up on top of everything else on youtube.com, the video included.
I had him save the page in Safari as Webarchive and send it to me. Even that shows the menu rendered correctly for me.
I use the exact same version of Safari (4.0.5/531.22.7) and Flash (10.1 r53, latest beta). Only difference I could find is that he uses Snow Leopard (10.6.6) and I "only" 10.5.8.
Has anybody noticed similar problems? I'm afraid that the usual wmode recommendation won't solve this (I tried & it works on my machine anyway)...
Thanks!
Mark
Turned out to be a problem with the combination of Flash Beta and Mac OS 10.6. I had the user revert to the latest production release of the Flash player and everything worked as it was supposed to.

Categories