Archive for the ‘HTML’ Category

CSS Flexbox not wrapping on iOS

Sunday, April 24th, 2016

I had a problem where flexbox didn’t wrap on iOS but worked fine on all other browsers.
Thankfully it turned out to be a simple fix, on my flexbox child item I had to change

flex: 1

to

flex: 1 0 $minWidth; // Just 'flex: 1' will break wrapping on iOS.

where $minWidth is the minimum desired width of the flexbox child item.

Mouse scroll wheel in flash not working in Chrome

Tuesday, August 14th, 2012

Chrome’s latest update to version 21 introduced a new type of flash player using the PPAPI (pepper) plugin architecture.
I noticed that this version of flash started breaking mouse scroll wheel support for some flash content.

Which flash files break and which don’t depend on one thing; if you are using JavaScript to prevent the default behavior of the mouse scroll wheel or not.

The reason for preventing default mouse scroll wheel behavior is for when you don’t want the page to scroll when you scroll over the flash content.
To prevent that, developers write JavaScript code (or use libraries like SwfWheel.js) that add an event listener for the “mousewheel” or “DOMMouseScroll” event, and in the handler call “evt.preventDefault()” and/or “evt.returnValue = false” to cancel the scroll.

Therein lies the problem, the old NPAPI Flash Player would receive the mouse scroll event even if we prevented the default behavior. Maybe even incorrectly so, since the event was cancelled.
The new PPAPI Flash Player will not receive the event if the default is prevented.

If one were to remove the preventDefault() function, the Flash file would start working correctly again, but the whole page would again start scrolling, which is out of the question.

You will have to not only prevent the default scroll behavior, but also call an external interface function in your flash file to let it know when the user scrolls the mouse wheel.
In my case I was using SwfWheel and only needed a small modification to the library file: in the SWFWheel.getState() function add this code before the “if (br.mac)” line:

// The new pepper plugin requires chrome to always be hacked.
if (br.chrome)
{
	return STATE_HACKED;
}

WordPress replaces — with –

Thursday, November 5th, 2009

I just recently upgraded my wordpress system, and now it does not show my embedded flash at all. I would be surprised, but this isn’t the first time this happens.
The last time I upgraded I found a blog post on how to fix it, but it’s been a while and I just can’t find that post any more, so I’m writing my own.

So this is the deal: I always embed my flash using the html code that SWFobject recommends:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
  <param name="movie" value="myContent.swf" />
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
  <!--<![endif]-->
    <p>Alternative content</p>
  <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>

After the upgrade, instead of my pretty flash objects I get this funky arrow in my posts:

–>

And if I look at the source, it now looks like this:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
  <param name="movie" value="myContent.swf" />
  <!--[if !IE]>&#8211;>
  <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
  <!--<![endif]-->
    <p>Alternative content</p>
  <!--[if !IE]>&#8211;>
  </object>
  <!--<![endif]-->
</object>

Apparently wordpress replaces
<!–[if !IE]>>
with
<!–[if !IE]>&#8211;>, but when I look into my post to edit it, it still looks fine there.

The reason is that wordpress is trying to make your writing prettier, even if you don’t use the wysiwyg editor. To stop wordpress from doing that, go into your wordpress directory and edit the file wp-includes/formatting.php. On lines 55 and 56 (for version 2.8.5) you should see this text:

$static_characters = array_merge(array('---', ' -- ', '--', ' - ', 'xn&#8211;', '...', '``', ''s', '''', ' (tm)'), $cockney);
$static_replacements = array_merge(array('&#8212;', ' &#8212; ', '&#8211;', ' &#8211; ', 'xn--', '&#8230;', $opening_quote, '&#8217;s', $closing_quote, ' &#8482;'), 

If not, just look for it, it should be in the top page or two.
Now all you have to do is comment out the array elements you don’t want wordpress to replace. My lines look like this:

$static_characters = array_merge(array(/*'---', ' -- ', '--', ' - ', */'xn&#8211;', '...', '``', ''s', '''', ' (tm)'), $cockney);
$static_replacements = array_merge(array(/*'&#8212;', ' &#8212; ', '&#8211;', ' &#8211; ', */'xn--', '&#8230;', $opening_quote, '&#8217;s', $closing_quote, ' &#8482;'), 

Hope this helps.