I knew that it is possible to programmatically force the browser to open a new window instead of a new tab, or the other way round. But I didn't know until now how to open a new tab together with text or code 'of my choice'.
The text or code we may want to 'add' to a new tab must have the format of a string. The more complex the text or code we want to add, the bigger the danger of making mistakes in writing the string.
As part of a school website's responsive rebuild, I wondered if it would feasible to remake this dartboard-esque "faculty web" menu and convert it from an image into pure CSS. Well, it *is* possible, but not without glitches - follow my journey from this to this (best viewed in Firefox, Opera and Chrome) below, and grab a more refined "take-away" freebie too.
Inspiration: http://fofwebdesign.co.uk/template/_...t-menu/source/ (made with images)
Updated 05-11-2015 at 09:54 AM by Beverleyh
Responsive web design (done well) allows users to achieve their goals on any internet accessible device, but what if they *want* to view the fixed width desktop version of a website, even on mobile?
This post comes at a time when responsive web design interest is piquing - certainly here on DD - probably the result of those emails we've been receiving via Google Webmaster Tools, that basically tell us how "X % of your web pages do not provide an optimal mobile experience... your
Updated 04-16-2015 at 06:41 PM by Beverleyh
I learned a few things after I posted this on my blog about putting a close button on top of centered fluid images.
I used jquery and translate in CSS transforms there to do the job. But I found that it can also be done with the help of a combination of window.innerWidth/Height and element.clientWidth/Height. As window.innerWidth/Height and element.clientWidth/Height are also supported by older browser, a technique using these methods must be preferred. Demos and explanations here.
Updated 04-10-2015 at 10:52 PM by molendijk
EDIT: see this for an alternative (better?) method..
CLICK HERE IF YOU WANT TO GO STRAIGHT AWAY TO THE DEMO PAGE.
The translate() method used inside the HTML-code below moves both a (super) div-containing-a-close-buttom (id: 'the_div') and an image (id: 'the_img') to the center of the window. The jquery-onload in the image ensures that the width of the div equals the width of the image. This is a requirement if we want to get the button (in the div) at the right position in front of
Updated 04-10-2015 at 10:47 PM by molendijk