Blog Comments

  1. Beverleyh's Avatar
    Both are needed to keep both the width and the height of the image responsive.
  2. molendijk's Avatar
    Nice!
    This css gives the image its natural dimensions. So I would think that you don't need both max-width and max-height. Either max-width: 100% or max-height: 100% (together with the other css) would also do the job (?).
    Updated 05-27-2016 at 11:11 PM by molendijk (typo)
  3. Beverleyh's Avatar
    The developer who wrote that tutorial may have overlooked something, but don't worry - the official documentation has other demos and they work fine.

    Scroll: http://julian.com/research/velocity/#scroll
    Reverse: http://julian.com/research/velocity/#reverse

    And they're very easy to manipulate. For example this is a combination of the "Silky Smooth" scroll demo and the official scroll demo: http://codepen.io/anon/pen/mPZZoo
  4. molendijk's Avatar
    Thanks Beverleyh. I didn't know until now what velocity.js was.
    There's one problem with this script on my (recent) iPad Air. On the Silky Smooth page, Scroll and Reverse don't work.
  5. Beverleyh's Avatar
    I've revisited the filter script. The new version allows for multi-category selections to refine results, and can either hide the selected items, or show the selected items, depending on which setting is used: http://www.dynamicdrive.com/forums/e...hide-selected)
  6. Beverleyh's Avatar
    The paginated RSS feed tutorial is up: http://www.dynamicdrive.com/forums/e...ith-Pagination
  7. Beverleyh's Avatar
    Basic breakdown demo without transitions: https://jsbin.com/qavakiwume/1/edit?html,css,js,output
  8. Beverleyh's Avatar
    Also of interest - iOS 'Sticky Hover' Fix - one line of JavaScript to fix the 'sticky hover' problem on iPad/iPhone; Where hover CSS isn't removed from an active element until another focusable element is clicked.: http://fofwebdesign.co.uk/template/_...-hover-fix.htm

    With this script, a tap of the surrounding area will remove hover CSS.

    Notable uses
    - To reset activated button styles.
    - To re-hide hover-activated menus that have overlapped content.
  9. Beverleyh's Avatar
    Proposed iOS 'sticky hover' fix now documented here: http://fofwebdesign.co.uk/template/_...-hover-fix.htm
  10. Beverleyh's Avatar
    iOS 'sticky hover' fix update

    I've isolated the touchend event to reduce the function to one line.
    Code:
    (function(l){var i,s={touchend:function(){}};for(i in s)l.addEventListener(i,s)})(document); // sticky hover fix in iOS
  11. Beverleyh's Avatar
    I've worked a bit more on the script so that the array of filter categories is no longer needed http://fofwebdesign.co.uk/template/_...-single-js.htm

    Hiding and showing filtered items is now done through the manipulation of CSS classes rather than changing the style.display property directly with JS.
  12. 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]-->
  13. 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
  14. 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
    	} 
    ?>
  15. 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
  16. 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.
  17. 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
  18. 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!).
  19. 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)
  20. 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
Page 1 of 2 12 LastLast