Blog Comments

That would be good but unfortunately the data saved in local storage can only be accessed by the browser that created it - more info here http://www.gwtproject.org/doc/latest....html#Overview

For cross browser (in the sense of one browser using data stored via another browser) support, I think we'd be looking at user IDs/accounts and databases

Hello Beverleyh,
Nice! Would it be possible to make this also work for visitors who click on a link using a given browser, and then come back to the page (containing the link) using another browser? (If so, YouTube would be interested!).

The PHP code/logic from the article above can also be used to opt out of responsive website design to allow users to view fixed width desktop layouts on mobile devices: http://www.dynamicdrive.com/forums/e...uts-on-mobile)

Here's how to use Selectivizr to make the Modal Gallery work, with all features, on IE8 too: http://www.dynamicdrive.com/forums/e...-Modal-Gallery

If you'd prefer to use a dropdown select box, you can make a simple one like this;

Code:

<select onchange="if(this.value)window.location.href=this.value">
    <option value="">STYLES - Please Select - :</option>
    <option value="?css=<?php echo $lightcss;?>">Light</option>
    <option value="?css=<?php echo $darkcss;?>">Dark</option>
    <option value="?css=<?php echo $default;?>">Default</option>
</select>

Basic support has now been added for IE7. Content is accessible via a scrollbar, like it is in IE8.

Basic support has now been added for IE7. Content is accessible via a scrollbar, like it is in IE8.

If you want to remove the 300ms delay on touch devices, try the SwiftClick script that can be found on this page: http://fofwebdesign.co.uk/freebies_f...swiftclick.htm

Notice how everything responds instantly - a tap on an arrow or the active-area play/pause toggle - Nice.

This may also be of interest - a responsive grid of images, which incorporates method 2 from above for fluid/responsive scaling: http://fofwebdesign.co.uk/template/_...id-img-rwd.htm

Also see diamond grid images: http://fofwebdesign.co.uk/template/_...cale-v-img.htm

Just a note that this menu has been replaced with a version that has better tap-support for the desktop view on large screen touch devices;

UPDATED Responsive CSS3 Multi-Level, Drop-Down Menu (no JavaScript): http://fofwebdesign.co.uk/freebies_f...-down-menu.htm

UPDATED Responsive CSS3 Multi-Level, Drop-Down Menu (with JavaScript enhancement): http://fofwebdesign.co.uk/freebies_f...wn-menu-js.htm

And for a menu where sub-menu drops-downs can be closed by tapping anywhere in the surrounding area, try this: http://fofwebdesign.co.uk/freebies_f...swiftclick.htm

Ah, I see what you mean. Good catch!

No problem - the fix is to add this to the desktop CSS media query;

Code:

.container, #menu, #menu .sub-nav { -webkit-transform:translate(0,0) !important; -ms-transform:translate(0,0) !important; transform:translate(0,0) !important }

I'll update the demo (and the other menu scripts, as I imagine they'll all need this little snippet too) shortly.

Just heading off home for the weekend. Have a good one!

Hi Beverleyh,
Just a quick thing I noticed when I resized http://fofwebdesign.co.uk/freebies_f...swiftclick.htm from fullscreen to a size where the mobile-icon appears. If after a click on the icon I return directly to fullscreen mode, part of the horizontal menu is cut off / becomes invisible.

To remove the 300ms touch delay and make the fly-out menus contract again on large touchscreen devices, please install the SwiftClick script from the source of this page: http://fofwebdesign.co.uk/freebies_f...swiftclick.htm

The article to support this update is here: http://www.dynamicdrive.com/forums/e...lose-Sub-Menus

Ah, I see. Thanks.
Arie.
===

Yes, but wouldn't that just preserve the original aspect ratio, doing the same thing as the 1st method?: http://fofwebdesign.co.uk/template/_...tio-resize.htm

The rest of this post (Demo 2 and 3) is to demonstrate image scaling and ratios that change within responsive design - e.g. shifting from a wide 5:1 ratio on desktop, to a squarer 2:1 ratio on mobile, which typically produces more visually pleasing results that maintain artistic direction in fluid/flexible layouts.
Its probably most evident in this demo: http://fofwebdesign.co.uk/template/_...le-img-cfp.htm

All 3 methods have their merits - #1 is more convenient for user-generated content, while #2 and #3 are more useful from a design perspective - think of them as a way of fake-cropping to retain visual impact at small sizes.

If I have misunderstood your description though, and it doesn't behave as demo 1 does, let me know.

Hi Beverleyh,
Maybe I'm being naive, but can't we scale images in a more simple way by giving them EITHER a size in percentages for the width OR a size in percentages for the height (not both!).
If we give them a size in percentages for the width, we can add a max-width and/or a min-width.
If we give them a size in percentages for the height, we can add a max-height and/or a min-height.
This will always preserve the width-height ratio.

To demonstrate the on-demand image script, see this YSlow component report showing only 4 images downloaded - 3 thumbs from the first page of the gallery, plus the header logo (there are 18 gallery images in total!).

And the YSlow component report showing only 9 images downloaded - 8 thumbs from the first page of the PHP gallery, plus the header logo (there are 80 gallery images in total!).

Now considering that the 80 images in the PHP gallery (40 thumbs, 40 enlargements) weigh in at just over 3MB altogether, that's a BIG difference for a page that YSLOW reports as 144.5kb. The on-demand image script saves around 2.85MB

What the?.... Somebody had my menu listed and was selling it on codecanyon. I posted it here on 1st April, and the unscrupulous person started selling it about 10 days ago (17th June?). I stumbled on the listing via this Tweet: http://www.jqueryrain.com/2014/06/re...3-canvas-menu/

How cheeky!

The listing has now been pulled but I took screen caps of what they copied and sold as their own. The markup structure, CSS and comments, even the wording of the features list and meta description was a blatant copy.

http://fofwebdesign.co.uk/freebies_f...yon/jnix01.png
http://fofwebdesign.co.uk/freebies_f...yon/jnix02.png
http://fofwebdesign.co.uk/freebies_f...yon/jnix03.png

A saving is still a saving. And this would be used on a live site, not necessarily what you'd be expected to edit and work on during build stages. As part of your workflow you can use 'beautifying' tools to convert the minified CSS/JS/HTML back and forth when you need to make changes, there isn't really an issue.

Here are examples of to such 'beautification' tools:

Dirty Markup: http://www.dirtymarkup.com/ and
CSS Beautify: http://cssbeautify.com/

The only issue with that however, is that it seriously reduces code readability, for such a small tradeoof.