Load appropriate size image on firefox resize - javascript

I found this example of using tag to use responsive feature. It works fine in Chrome but does't work in firefox as expected. Firefox downloads image which is according to current firefox window width. Is it possible to download image according to window size dinamically on resize without any js?

There is bug reported regarding the srcset attribute
https://bugzilla.mozilla.org/show_bug.cgi?id=870021
As of right now is available in the dev channel of Chrome and in Firefox 34+. In both cases you’ll need to enable it. In Firefox, head to about:config and search for “dom.image.picture.enabled”. In Chrome you’ll need to go to chrome://flags/#enable-experimental-web-platform-features, enable that feature and restart.
Reference Site

Related

Chrome PDF viewer malfunctioning when extension in started

I have a chrome extension which allows to write on screen in chrome tabs. The default behaviour looks like :
It works be simply inserting a canvas tag in the DOM and doing all the stuff in it. It works well in all sites. However, chrome PDF viewer behaves strangely when I use it :
Before -
After -
I don't think there is any issue with the extension because it works on all other sites. I think there is an issue with chrome PDF viewer itself.
I can attach the code here if asked in comments.
Ok, so I tried to replace all innerHTML += <value>; by insertAdjacentHTML("afterbegin",<value>); And now it's working fine.
It's because your canvas must be on top to ensure it will works on every website.
The z-index propery is not enough for that.
Hope that helped !

Drag a file out of the browser

Most tutorials on javascript drag and drop explain how to handle file drops into the browser and how to drag data out of the browser. But I have seen almost nothing about draging a file out of the browser.
For example, you start a drag on a div element, drop it on the desktop and a file appears there.
What I have found is this: (from this example)
e.dataTransfer.setData('DownloadURL', `image/png:Luigi.png:${e.target.href}`);
However, as far as I can see, setting using DownloadURL this causes errors in chrome, a crash report in edge and doesn't do anything in firefox.
Is there a standard way to download a file through drag and drop, preferably from a url?
Ok, the problem in the example seems to be that Chrome now requires same origin on the DownloadURL.
At least that's what the Firefox developers believe that have had an issue to replicate this feature for 11 years now: https://bugzilla.mozilla.org/show_bug.cgi?id=570164
Safari doesn't seem to support it either

chrome extensions: full width toolbars

Im currently working on a fork of the famous web developer extension (chrome, firefox, opera). Exactly I am working on the chrome extension.
The Firefox extension is shown like that:
Chrome instead shows only a icon...
..which toggles the "pretty small" widget:
A part of my goal with this fork is to change this toggle icon to a toolbar such as firefox does.
After studying the documentation chrome extensions (https://developer.chrome.com/extensions/devguide) I came to the result that this is not possible with default settings (browser actions, page actions,...).
When I looked again at the Table of Contents in the documentation I got an idea. There is the possibility to edit the bookmarks. So it could be possible to add an additional bookmark bar/row and place the single web developer actions as bookmark with the function on it.
Is this the right way for solving this? Because at the moment I only see possibilities with more or less dirty hacks. And doing it via bookmarks seems at least dirty.
PS: I also thought about this:
The plugin is actually the same on firefox and chrome and from the same author. So when this adaption of the toolbar in chrome would be easy possible then would not have such differences in the chrome and firefox addon.
Nope, that's simply impossible.
Chrome does not support custom toolbars, and that includes "an additional bookmark bar/row".
The closest, visually, would be injecting UI directly into the top of all pages. I don't think I need to explain why that is hacky.

Why my webpage is loading without CSS in Chrome and Safari?

I am developing a website with CSS and JS modifications.
While testing the website, it is working fine in IE-8 and Firefox browsers. But in Google Chrome and Safari the web page is loading without CSS.
I checked all the CSS paths on browser and all files are loading perfectly. But on the HTML page, these CSS files are not loading. So the webpage is displaying the contents without any CSS properties.
What changes do we need to make in Chrome and Safari in order to make the website work perfectly.
As for Chrome, it probably the cache. Chrome assumes that he has cache of the css that's why he will not load it. Deleting cache helps in troubleshooting unloaded css problems . Same things happens on Safari base on my experience with it

HTML5 Drag and Drop styles not displaying on Windows Server 2003

I'm working on a file upload utility based on Valum's Ajax-Uploader. The idea is similar to the Gmail attachment process. The user should be able to drag a file from the desktop into the browser window and onto the file upload area to get it to upload. This works fine in the browsers that support this functionality (Firefox 3.6+, Chrome 7+).
The problem I'm running into are the styles that should be re-drawn when the user:
Drags the file anywhere in the browser
Drags the file into the upload area
I have tested in the exact same browser versions on WinXP, Vista, and Win7. The appropriate styles are redrawn. However, in Windows Server 2003, they do not.
In Win2003, when I inspect the div that should be redrawn via Firebug, the "drop-area" and "drop-area-active" classes are applied correctly. Firebug even shows the correct style declarations, but the changes are never visible.
The only difference between FF and Chrome that I'm able to spot is that in Chrome, the "drop-area-active" style is displayed for a split second when the user drops the file.
I'm not positive that it is a Windows2003 issue, but that's the only OS in which I'm able to recreate the bug.
Edit:
If you're running Win2k3, try the Gmail drag'n'drop functionality. I can see the alternate styles in other OS's, but not Win2k3.
Edit #2:
Still seeing this issue in many different places. Anyone have any suggestions? I have submitted this as a bug to the Chromium Project. Issue 68632.
http://code.google.com/p/chromium/issues/detail?id=68632

Categories

Resources