Is it possible to specify user-scalable="yes" only to images? - javascript

I'm developing course lectures for mobile devices, and have zoom capabilities disabled. I would like to keep it this way for everything on the page except images.
I've come close to what I'm aiming to do before by having the meta user-scalable="no" replaced with "yes" via jquery when the user clicks on a link that opens a pop up window within the page, allowing the user to then zoom in when the pop up window was open, and many of these pop up windows contained the images I wanted to enable the zoom for.
However, not all of the images I want the user to be able to zoom in on are inside of the pop up window, and I don't dictate what content goes where. I only control the gui (css, script files, etc.)
Is there a way to apply scalable="yes" to images only, while keeping the rest of the gui scalable="no"?

Scaling part of the page (the image) and not the rest of it doesn't really make sense. I think you'll probably be happy with the default behavior of images in the browser. Set user-scalable="no" for the website as normal, for images have links that open them in a new window (target="_blank") this will open a new browser tab and allow the user to zoom until they decide to go back to the page.
This method is usually far superior for mobile compared to something like lightbox due to performance benefits of the browser only needing to display the image.
I'll also add that many users get annoyed when user scaling is disabled (myself included). You may want to consider setting a minimum scale and allowing the user to zoom if they want instead.

Related

Chrome Extension - Show custom notification/popup (HTML element) on top of a fullscreen video

I want to write an extension for Chrome (as seems the easiest option) that would show notifications on top of a full screen video.
For example, say you're watching a Netflix video, the chrome recognises what video you're watching, checks databases for popups, and if it found some, it shows them at specific times (say when video is at 1:05 or something).
While most of the parts seem doable, main question is, how to display some HTML element on top of a video that is in full-screen mode?
Thanks a lot!
Edit
After some research and links provided by the answer, I could not find an answer for Flash players - I guess that is not (easily) possible.
However, as per my example, I tested Netflix videos, and whether it's fullscreen or not, a simple div with absolute positioning and high value for z-index was visible at all times. As many of the systems are now are or moving onto HTML5 video's, the simple solution should apply to all of them.
Thanks Marc Guiselin for helping.
I asked this a while back for my extension: Force a div to show up and overlay whatever is in fullscreen
The result was this: you can't on things like flash, however, I found out you can detect if an html element is in fullscreen in your content script using document.fullscreenElement||document.webkitFullscreenElement.
If it's null, nothing is in full screen, but if isn't, then you can append stuff to it while its in fullscreen.
Also if you want to do this, you might want to allow your content scripts to work within iframes using "all_frames": true in your manifest, since a lot of sites now use embeded iframe html5 players that can go full screen.
Good luck.

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.

Which technique to hide right column with heavy content?

I'm building a mobile site for a great magazine with a lot of content that is partly heavily. The problem now is that I have to hide the entire right column on the mobile site (yes, I need it in this case).
I've done a great research on mobile design, read a lot of articles, but can't find a solution that addresses this problem. It's usual to hide the right column with CSS or JS. But then everything still loaded. In this case the right column is so big, with a lot of content, it seems worthwhile to not load it for the page to load faster.
What should I do?
You should be able to detect the user's browser on the backend (I assume you're using PHP) and then make a simple control structure where you decide whether to load or not load that right-hand column on your site.
Here are some libraries that you may find useful (obviously you shouldn't have to reinvent the wheel for such a trivial task):
http://mobiledetect.net/
https://github.com/serbanghita/Mobile-Detect
http://detectmobilebrowsers.com/ (uses regex)
If you think that it is not a problem that mobile users wont be able to see that content, then you should not load it. There are php classes to check for mobile devices and based on that you can decide to not load some part of content. There is one problem - php class can only base on user agent settings, not browser size, so in theory someone with high resolution mobile device wont be able to see that content anyway.
One more idea on my mind - you can not load content in php, but after general content is loaded, check in js viewport width and eventually load part of content by ajax if there is enough place.
In summary, as we dont know your site content, it is up to you to decide if you can afford to not show part of content at all (for mobile devices). In this case when resolution change, users still wont be able to see it (i.e. changing device position horizontal to vertical). Of course in this case page will load faster, which also migh be crucial for mobile internet connections.

Maximum Browser Width and Height On Page Load

Ive Googled and stackoverflowed since earlier on today and i just cant find a solution. I'm looking for a way using JQuery/JS to open up a webpage ive created with a maximized window. So on the page loading whichever browser the user is using, my webpage will be displayed as though the user has hit the maximise button on their browser, but automatically on load.
I need to make an interactive website which is best displayed maximised, any ideas? Btw im very new to building websites so any solution JS fiddle based or properly explained would be so much appreciated.
THANKS :)
For security reasons, JavaScript cannot change the window's size (including minimizing or maximizing it).
You can, however, open a new window set to a certain size - but not automatically - only in response to user interaction, like a click on the page (again, for security reasons).
I don't know what your site's content is - but if it isn't flexible enough to fit different screen sizes (like a game, maybe?) then your best bet from a user experience perspective may be to just put some text up somewhere on the page that says something like "Site best viewed in fullscreen". Or, if it is something like a game, maybe a nice big button on the homepage that says "Launch Game"?
Your best bet, however, is to have your content fit any screen size/shape. This is often called things like "responsive webdesign", and there's tons of info out there on how to design a website responsively, as well as how to implement said design.
Good luck!
window.innerHeight and window.innerWidth
http://www.w3schools.com/jsref/prop_win_innerheight.asp

Detect Another Application on Browser Window (including percentage overlap)

Is there a way to detect if an application (say a chat client or msword) is on top of my browser window.
One way is to check for focus. But that does not absolutely say that another program is on top of the "view-able" area of the browser with respect to complete screen.
What if the complete browser is viewable but the focus is on the word document/chat client.
Edit:
Found a sample demo from a company which does this http://www.spider.io/vStp83jg6/
I don't think this requires flash or any plugin, in order to be effective this has to be based on CSS and Javascript.
The security sandbox of the browser prevents accessing this information from the operating system.
The only thing that they can be doing consistently across browsers is to detect some sort of side effect of the fact that the browser window is hidden by another window.
One of the side effects that can be detected is if browser rendering optimizations for painting elements have kicked in or not.
According to the spider.io viewability video, they are already detecting if an add is visible based on browser rendering optimizations detection.
If an add is not visible, then for that section of the page rendering optimizations kick in and the rendering of that section of the page will become slower, in order to save memory and CPU resources, and speed up the rendering of the visible portion of the page.
This same technique could be used to detect if a browser window is hidden or not.
If they detect that rendering optimizations are ongoing in several regions like the 4 corners of the visible viewport and the center of the page they can safely assume that the app is hidden by another external app, or calculate an estimation for the percentage overlap.
They don't say how they do it in detail, but as it's based on speed measurements it might be something like this:
One way that could be used for detecting if another window is hiding the browser:
Create a small invisible CSS3 or Javascript based animation that animates invisible elements in different parts of the page. The animations should not affect the performance of the page and can be started/stopped at will.
Measure the timings of the animation at page startup, and take an average. If the page get's hidden by another OS window, then the rendering optimizations kick in and the time that the animation takes to run is longer.
Check here a browser API to detect the start and stop of CSS3 animations, this could be a way to implement this.
Commercial web traffic data harvested by company such as Alexa. Is performed by installed software, such as toolbars. And tracks the users activity, programs, windows open.... everything... (with consent)
Controversial answer, it does the above without consent (spyware?)
Note the key point of the above 2 method. is that the data comes from a sample of computers in which the software is installed. Not every visitor of the site (unless visiting the site inserts the spyware)
By having custom software installed. They can get around all the respective browser related restrictions / security.
Perhaps more can be found by providing information on the companies that claim to do this?

Categories

Resources