Blog Comments

  1. jscheuer1's Avatar
    OK, sorry - I'm commenting without thoroughly testing and reading this blog entry. That said, I'm assuming you are relying upon knowing the structure of the xml file/data. Right? In any case, that's always been my approach in the past. I just recently came upon xml_parse_into_struct(). This (standard I believe, or at least common) PHP function allows you to create at least two (or one if you prefer) arrays from the xml data/file. One of these can be easily mined for any text content without needing to know the tag name(s). For an example, see:

    For general info, see:

    You can also get tons of other information (attributes) without needing to know any tag names. I've always thought this should be possible, just never came came across a function (PHP or otherwise) for it before.
  2. Beverleyh's Avatar
    Both are needed to keep both the width and the height of the image responsive.
  3. molendijk's Avatar
    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)
  4. 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.


    And they're very easy to manipulate. For example this is a combination of the "Silky Smooth" scroll demo and the official scroll demo:
  5. 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.
  6. 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:
  7. Beverleyh's Avatar
    The paginated RSS feed tutorial is up:
  8. Beverleyh's Avatar
    Basic breakdown demo without transitions:,css,js,output
  9. 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.:

    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.
  10. Beverleyh's Avatar
    Proposed iOS 'sticky hover' fix now documented here:
  11. Beverleyh's Avatar
    iOS 'sticky hover' fix update

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

    Hiding and showing filtered items is now done through the manipulation of CSS classes rather than changing the style.display property directly with JS.
  13. 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;
    <!--[if IE 8]>
    #slideshow .show:first-child 				{ background-image:url(path/to/1024x500/image-ie8-01.jpg) } 
    #slideshow :first-child + 			{ background-image:url(path/to/1024x500/image-ie8-02.jpg) }
    #slideshow :first-child + div + 		{ background-image:url(path/to/1024x500/image-ie8-03.jpg) }
    #slideshow :first-child + div + div + 		{ background-image:url(path/to/1024x500/image-ie8-04.jpg) }
    #slideshow :first-child + div + div + div + 	{ background-image:url(path/to/1024x500/image-ie8-05.jpg) }
  14. Beverleyh's Avatar
    Responsive CSS3 Any Content Slider (with JavaScript auto-play, large touch-toggle and swipe support):
  15. 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;
    <?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
  16. Beverleyh's Avatar
    Responsive CSS3 Any Content Slider (with JavaScript auto-play, simple controls and nav pips):
  17. 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.
  18. 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

    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
  19. 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!).
  20. 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:
Page 1 of 2 12 LastLast