Blog Comments

Worth noting that I've expanded on this story in my self-hosted blog http://blog.fofwebdesign.co.uk/38-th...g-publications some user experience quotes and a section on when bosses want to add sizzle to a website.

I tried to add the changes here too but the character limit cut it off

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

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?

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.

Both are needed to keep both the width and the height of the image responsive.

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 (?).

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

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.

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)

The paginated RSS feed tutorial is up: http://www.dynamicdrive.com/forums/e...ith-Pagination

Basic breakdown demo without transitions: https://jsbin.com/qavakiwume/1/edit?html,css,js,output

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.

Proposed iOS 'sticky hover' fix now documented here: http://fofwebdesign.co.uk/template/_...-hover-fix.htm

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

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.

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]-->

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

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
	} 
?>

Responsive CSS3 Any Content Slider (with JavaScript auto-play, simple controls and nav pips): http://fofwebdesign.co.uk/freebies-f...ps-auto-js.htm

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.