Icon disappears when page is dragged to second monitor - javascript

I can't find anything, anywhere for this one.
I have an icon for a button, and the URI to that icon is in the CSS. When the browser is on the laptop screen it calls the correct URL for the icon, but when the browser is on a second screen connected to the laptop it makes a call to a different URL and gets a 404, and the icon disappears. I can drag the browser from one screen to the other and the icon will dynamically show up and disappear, depending on what screen the browser is on. It does this on multiple machines, including Windows and Mac. What could be causing this?

Make sure you're not using a media-query with another URL depending on the screen size.

maybe you have pixel density difference between those monitors, this could cause the stylesheet to bring another image, usually a #2x image to fill the extra pixels that "retina" monitors can have.
maybe you have a rule on your responsive css matching the max-width or min-width of the page.
It's really hard to know, can you provide a link for the website?

Related

IE 11 - Very Weird. PNG only displays after certain page interactions

I use JS to create an Image() then set the src to be a PNG from a remote location (Amazon S3). When the image has loaded I attach it to the DOM with appendChild().
This works fine in most browsers but in IE11 nothing displays AT FIRST.
If I open the dev tools then the image element is there in the DOM but not visible in the actual display. As soon as I toggle a style (any style) off and on in dev tools it appears though.
It also appears if I resize the page (I'm not listening for resize anywhere) or select some text elsewhere in the build. If I click and drag on the area where it should be displaying then I get the ghost preview of the image and can drag it around but as soon as I drop it it disappears again.
Most weirdly, if I scroll the page so that part of the area where the image should be moves off screen then when I scroll back that part of the image is visible but the rest is still not rendered, as though it has been masked.
I've loaded this same PNG in the past and never seen this issue and I can't see that I'm doing anything different this time round.
Any thoughts? Or do I need to write another email to my boss asking why we even still support that manky old POS.
IE has planting of issues displaying PNGs, perhaps this might help https://perishablepress.com/css-hackz-series-png-fix-for-internet-explorer/

How to prevent Chrome on Android from auto-scaling the page?

I have a web app which can display images at various sizes. One selection is to scale up to the size of the screen (and then scroll to it so that nothing else is visible). When I do that, the browser automatically zooms out to fit the entire image plus the rest of the page. How do I prevent that automatic scaling, while still allowing the user to zoom in and out?

How to open my page to with a specific size browser window?

This is a one page scrolling site for kids. The content is best viewed at 1200 pixels wide. Is there a way I can make the window default to that size when the site is visited?
No, but you can have a landing page with a button on it that opens your desired page using window.open, and you can tell window.open how big you want the window it opens to be.
Details here, but basically (inside a click handler or similar):
window.open("http://example.com", "width=1200");
This is a suggestion to the browser, which it can ignore if it likes, but a value in that range is likely to be fine. (Whereas browsers tend to disallow very small windows.) You can also specify height, whether it has various window features, etc.
Of course, if you can make the page work well in any width, that would be better. Some of us are positively irritated by sites that try to tell us how wide our browser windows should be. :-)
You can open a new window of specific size on a click of a link/button using window.open like :
<a href="some url"
onclick="window.open(this.href,'targetWindow',
'width=700px,
height=700px');
return false;">Popup link</a>
There are two ways you can do this:
Using a div, iframe, or other element to contain everything on your page and specify the size on it. This won't change the actual size of the browser window.
Open a new window (popup) and specify a size on that. Note that if it's not done as part of the user clicking on something, it will likely be blocked by the browser's popup blocker. More info can be found here
Both of those are ignoring any issues with trying to force a size on the user. Things like:
What if their screen isn't large enough?
Will this be annoying to my users?
What if my user resizes the window?
Will all browsers support the resizing I'm after?
Will trying to resize cause horizontal scroll bars?
In general you should aim for something that can work across multiple sizes, but have a more reasonable minimum size. 1024x768 is usually a good resolution to aim for. This will much around with mobile browsers, but I presume you're not worried about those.

galleria javascript crops topand bootom of images when viewing in Firefox Chrome and IE

galleria javascript crops top and base of images when viewing in Firefox Chrome and IE
However in Safari this issue does not exist.
Please see the issue here
http://galleria.aino.se/media/galleria/src/themes/fullscreen/fullscreen-demo.html
no compare the squirrel image with its original
right click on any image and you will see how the script is not displaying the the full image.
We are using galleria. js full screen for a wordpress theme and all our images are the same size so there is no height issue the images we will use are 1600x900
If any one can help please advise. We need to display the entire image.
Thanks all.
I believe that's how galleria is supposed to behave. In full screen mode it fills the screen, so it will crop the top or sides, whichever extends beyond the aspect ratio of the browser window.
In full-screen mode, if you have a wide browser window, it'll crop the top/bottom. If you resize the browser window to portrait orientation, it'll crop the left/right.
You can control this behavior using the image_crop option.
F.ex if you want the image to always fit, set this to false.
Try to set in your css:
.galleria-image img {max-width:6000px !important;}
this works for me, I think there is some trouble in Safari with the attribute max-width of the image. You could use this simple trick or improve this technique adding some conditional css, so for example setting max-width to a specific value only when option "imageCrop" of galleria is set to true. Let me know if this works also for you!

Laptop settings resizing web page pushing divs 'off' the page - is there a way around this via code?

My boss is running a laptop which has a setting which is resizing font sizes and making them larger by about a third. This is fine but we have a java app running on the site and the div tags are being pushed off of the page because of the increase in font size. Is there a way to stop font being resized, via code?
Thanks, R.
Depends on the browser, but most use zooming now: see this article: http://www.codinghorror.com/blog/2009/01/the-two-types-of-browser-zoom.html
I do not think you can stop this, nor should you. What about people who need to larger font size.
It sounds like the problem is in your DIVs, not in your fonts. Unless your text contains huge strings with no "breaking" characters in them, a DIV should merely set itself to its parent's width as default behavior.

Categories

Resources