Blog Comments

  1. Beverleyh's Avatar
    You can make IE8 behave like IE9, giving users a really basic slideshow without the fades, by using this CSS wrapped in IE8 conditional comments;
    Code:
    <!--[if IE 8]>
    <style>
    #slideshow .show:first-child 				{ background-image:url(path/to/1024x500/image-ie8-01.jpg) } 
    #slideshow :first-child + div.show 			{ background-image:url(path/to/1024x500/image-ie8-02.jpg) }
    #slideshow :first-child + div + div.show 		{ background-image:url(path/to/1024x500/image-ie8-03.jpg) }
    #slideshow :first-child + div + div + div.show 		{ background-image:url(path/to/1024x500/image-ie8-04.jpg) }
    #slideshow :first-child + div + div + div + div.show 	{ background-image:url(path/to/1024x500/image-ie8-05.jpg) }
    </style> 
    <![endif]-->
  2. Beverleyh's Avatar
    Responsive CSS3 Any Content Slider (with JavaScript auto-play, large touch-toggle and swipe support): http://fofwebdesign.co.uk/freebies-f...h-js-swipe.htm
  3. Beverleyh's Avatar
    TIP: Please be aware that if you have a RewriteCond/Rule in your .htaccess file to prettify URLs by stripping query strings from the end, the query strings on the opt-out switch will be stripped too, and the opt-out cookie will not activate;
    Code:
    <?php if ($layout == 'fixed') { 
    	echo '<p class="switch"><a href="?layout=rwd">Switch to Fluid Mobile Layout</a></p>'; // switch to default/rwd layout
    	} else { 
    	echo '<p class="switch"><a href="?layout=fixed">Switch to Fixed Desktop Layout</a></p>'; // switch to optout/fixed layout
    	} 
    ?>
  4. Beverleyh's Avatar
    Responsive CSS3 Any Content Slider (with JavaScript auto-play, simple controls and nav pips): http://fofwebdesign.co.uk/freebies-f...ps-auto-js.htm
  5. molendijk's Avatar
    Quote Originally Posted by Beverleyh
    That would be good but unfortunately the data saved in local storage can only be accessed by the browser that created it
    Yes I know. I have been thinking of a cross browser version of your code after reading this. But I think it's complicated.
  6. Beverleyh's Avatar
    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
  7. molendijk's Avatar
    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!).
  8. Beverleyh's Avatar
    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)
  9. Beverleyh's Avatar
    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
  10. Beverleyh's Avatar
    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>
  11. Beverleyh's Avatar
    Basic support has now been added for IE7. Content is accessible via a scrollbar, like it is in IE8.
  12. Beverleyh's Avatar
    Basic support has now been added for IE7. Content is accessible via a scrollbar, like it is in IE8.
  13. Beverleyh's Avatar
    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.
  14. Beverleyh's Avatar
    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
  15. Beverleyh's Avatar
    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
  16. Beverleyh's Avatar
    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!
  17. molendijk's Avatar
    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.
  18. Beverleyh's Avatar
    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
  19. molendijk's Avatar
    Ah, I see. Thanks.
    Arie.
    ===
  20. Beverleyh's Avatar
    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.
    Updated 08-14-2014 at 10:38 PM by Beverleyh
Page 1 of 2 12 LastLast