| Home | Uniquely NZ | Travel | Howto | Pauline | Small Firms |
Advanced Search
Search of pcurtis.com by Freefind
|
| Popup Displays are only supported on Computers with large screens and are not available on Mobile Devices and Touch Screens. Modal (Lightbox Style) Displays can be used on all devices. More... |
More about the Legacy Popup Displays
All the pictures on the pages provide details of where they were taken if you hover the cursor over them and they can all be clicked to open a larger version. Up until a few years ago the only option was that they opened in a popup window. This works very well on Desktop or Laptop with a reasonable size screen and an operating system/browser supporting multiple windows. On such a system it is useful as you can keep a window open one side of a screen whilst browsing in a different Window. Initially I used it extensively on my web site when there were over 6500 images in use and it has been tested on Windows, Linux and Apple Computers in many different browsers including Internet Explorer, Firefox, Opera, Chrome and Safari. That is all the browsers with more than 2% market share.
The popup windows are reused and then closed up when you leave the page so you do not need to close them. You can chose a small size on many pages on my site if you have a slow internet connection or want to restrict data flow on a mobile connection. You can also toggle the resolution by double-clicking an image but it may take an extra click to display the picture in the new size on some browsers. With some systems you may be asked to if you wish to allow popup windows as a protection against adverts. Popups are abused by many advertisers and most browsers offer preference settings, extensions or other ways ways to limit the abuse of popups. The same goes for various security suites. In general the default settings should not inhibit popups which follow all the rules properly although you may find that you are asked if will permit use of popups on my sites and it is safe and desirable to say yes.
More about the Default Modal (Lightbox) Style Display
These days Popup Windows are rarely used as they do not work well on the modern Smart Phones and Tablets with small screens. Their browsers are based round a tabbed approach rather than implementing separate windows. This makes the popup window approach very clumsy as every popup is actually opened in a new tab and the reloading and automatic closing does not work well or at all. The alternative is a modal window approach with has tended to be called Lightbox which is a technique used to display images and other web content overlayed over the screen with the surround dimmed out. This overlayed window can be closed by clicking outside of it or by a close button.
Ideally the image should display full size when there is space available and shrink to fit the space available. Lightbox was originally the name of a specific JavaScript plugin, written by Lokesh Dhakar and was primarily for images. However, common usage of the term has evolved to encompass all Lightbox-style JavaScript plugins and such effects in general. The technique is now used very widely. The main disadvantage is that it blocks use of the main window whilst a popup can just be moved aside but still be visible. The Lightbox displays have the additional advantage that one can click or tap back and forth through the pictures on the page a in a screenshow - click the left or right side of the images. Modal (Lightbox) Popup displays are now the default on my site but Popup dispalys can still be used but only on large screen computers
When changing mode the whole page has to be reloaded - this is automatic but in some browsers such as Firefox one is returned to the top. In most cases however these options are set once and unchanged thereafter. Less... Even More
Some of the less common 'lightweight' desktop browsers as well browsers for Smart Phones and Tablets may open a popup window in a tab instead of a correctly sized window. This is very difficult to use and has the associated problem that the reuse of a window incorrectly displayed as a tab may not work correctly and they may not be closed when the page is left. This also makes them difficult to use with many other sites such as banking sites or anywhere that help information is displayed in a popup window. Midori and Epiphany are examples of browsers which do not handle popups in the way one would expect. Both are based on WebKit code. Chrome also used to use Webkit code but in general it handles popups fine although it has difficulty in bring a popup back into focus (ie displayed in front of the main page) - this meant I had to included a dedicated 'fudge' in the popup code for Chrome as it now has over 20% of the browser 'market'.
Opera also had(or possibly still has) some idiosyncrasies- the popup windows are displayed the correct size but are also attached to their own tab which is opened and closed in tandem with the windows - this is a arguably good compromise between tabs and windows. However Opera has a preference setting which, currently by default, prevents any popups being brought back into focus and this needs to be changed if you plan to spend much time on my pages. You reach it by clicking the Opera Button the Settings -> Preferences -> Advanced -> Content -> JavaScript Options and tick Allow raising of Windows. You can in any case bring the popup window into focus from its tab or the operating system toolbar although this can be tedious if you have a system with a 'dock' such as Ubuntu Unity. I have also noticed that closing Opera does not always close down the tabs with associated popups
For everyone other than the most advanced or adventurous users there should be no problems and that elite will know the solutions as well as I do! Less...
| The Bandwidth setting allows one to reduce the data usage by using smaller popup images and inhibits pre-loading of images. It is only worth considering if you are 'roaming'. More... |
| Return to Previous page |
Bandwidth and associated data usage is at a premium on Tablets and Smart Phones especially when using a mobile network connection with limited data and high charges. In addition there are still areas where broadband is not available or is at a low speed. The original Popup solution had two image sizes which one could switch between to reduce bandwidth or fit to the screen size. Both methods use small high compression images for the thumbnails (icons) on the page. These are 160x120 pixels and are typically 4.5 kbytes - even that adds up with 20 on a page.
The larger popup images are typically 45 kbytes and the smaller images are 400x300 pixels and are typically 22 kbytes. In the case of the popup images the only change is in image size. The Lightbox pages however need a further change as most of the images are by default displayed as 'galleries' with back and forward arrows and the Lightbox software automatically preloads the previous and next image. This means looking at a single image triples the download from 45 to 135 kbytes. This gallery option is inhibited when in low bandwidth mode although the image size is not reduced in my current implementation. Note that one does not get forward and back arrows in the Lightbox with reduced bandwidth mode. As mentioned above, there is also an option to double click an image in Popup mode to change size and bandwidth - this does not automatically reload in the new size but subsequent images are changed - this is deliberate to save bandwidth and avoid glitches. Less...
.
Older Pages and Examples
|
On older style pages the mechanism to change settings are links on the little control panel which is at the bottom right of all the pages which have pictures. There is an example to the right. There is however very little space to put meaningful text and hover messages are not available on touch machines so this page gives some further guidance and background. Firstly the text is a Link so the text refers to What will Happen. If you click Use Lightbox for Images it will switch so all future images will display in a Lightbox and clicking Use Normal Bandwidth means you will switch to use more data and have Images preloaded and galleries activated. Clicking Minimise Bandwidth will switch you to a mode where Popup images are smaller and you avoid having images preloaded and galleries are not activated. Try it out either on the right or at the bottom of the page and see what happens with the test image to the left side and on those below. The pictures below are in two 'galleries'
What are there two icons in the same area and what do they do?
The spanner (an icon from the Oxygen Icon Project) provides a links to a similar page to this. The other icon from W3C indicates that the page uses either the latest standard, HTML 5, or that it uses the older HTML 4.01 standard and provides a link to the World Wide Web Consortiums HTML Validation Page to validate the page it is called from. The pages converted to HTML 5 offer better scaling on small screens. Now it is a W3c Recommendationand almost every browser has adequate HTML 5 support I have started to steadily convert pages but it is not trivial taking at least 15 minutes per page even when they are in a set. There are 225 pages in the travel series with 6500 images each in 3 sizes which gives an indication of the task. Fortunately all current browsers are very tolerant and arguably most of the errors flagged by the validation process are really warnings. The 'errors' currently on the HTML 4.01 pages will almost all go when converted to HTML5 and if corrected will turn into errors at that time! If the pages are forced to validate with HTML5 the errors are quite different and may cause problems in the long term so the pages do need proper conversion.
What about the new Responsive Pages which are fully Mobile Friendly?
An increasing number of pages, including this page, are now fully mobile friendly. These only display the full settings control panel at the right of the footer if you are using a netbook or laptop.
If you are using a mobile device such as a smart phone or tablet then you have a standard menu icon instead (three bars often know as the hamburger icon) at the bottom right which opens upwards into a menu. This gives access to the top level navigation menu and also has a item at the bottom with links to Settings which is rather similar to the panel shown above.
There is an example you can try at the right of the heading to this section as well as the static screenshot to the right.
Normally popups are inhibited for mobile devices so only the bandwith setting is shown.
The menu however also appears if the window is reduce to be too narrow for the normal footer menu to be displayed and under those conditions the menu icon is produced instead but has both settings available as is shown to the right.
The HTML5 icon is not shown in this compact mode.