Blog Comments

  1. Beverleyh's Avatar
    Thanks for the feedback

    I guess the impossibility of clicking on items of the individual external pages (in the show) is intentional?
    Yes, the "mask" is always present, but transparent, so this acts as a blocking mechanism for the framed page content. The idea is that the admin (the person triggering the hover menu) wouldn't need to interact with the pages that are showing - just the SiteShow hover menu, to test the schedule via a computer. The SiteShow is being displayed to all other 'users' via a TV screen where interaction isn't necessary.

    The way you reveal new web pages into an iframe has a disadvantage, though. When we let the show go on for a while, then new entries are constantly added to the browser's history, which makes it hard to go back to a preceding window via the browser's back button. We're captured in the show, so to speak. Couldn't you make it so that new iframed pages are added via replace, not via href?
    If you wanted to display the SiteShow via a website then yes, the replace() method might be a better choice, but this is for display via a TV (no controls) so the browser history isn't an issue in the intended context. All users (except the admin) are looking at the output via a mounted TV and have no way of interacting - they look but don't touch
  2. molendijk's Avatar
    That's very nice. I guess the impossibility of clicking on items of the individual external pages (in the show) is intentional?
    The way you reveal new web pages into an iframe has a disadvantage, though. When we let the show go on for a while, then new entries are constantly added to the browser's history, which makes it hard to go back to a preceding window via the browser's back button. We're captured in the show, so to speak. Couldn't you make it so that new iframed pages are added via replace, not via href?
  3. 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:

    http://www.dynamicdrive.com/forums/s...088#post318088

    For general info, see:

    http://php.net/manual/en/function.xm...nto-struct.php

    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.
  4. Beverleyh's Avatar
    Both are needed to keep both the width and the height of the image responsive.
  5. 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-28-2016 at 12:11 AM by molendijk (typo)
  6. 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
  7. 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.
  8. 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)
  9. Beverleyh's Avatar
    The paginated RSS feed tutorial is up: http://www.dynamicdrive.com/forums/e...ith-Pagination
  10. Beverleyh's Avatar
    Basic breakdown demo without transitions: https://jsbin.com/qavakiwume/1/edit?html,css,js,output
  11. 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.
  12. Beverleyh's Avatar
    Proposed iOS 'sticky hover' fix now documented here: http://fofwebdesign.co.uk/template/_...-hover-fix.htm
  13. 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
  14. 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.
  15. 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]-->
  16. 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
  17. 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
    	} 
    ?>
  18. 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
  19. 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.
  20. 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
Page 1 of 3 123 LastLast