How to vertically center text in a div

This is a neat way of centering text in a div. Live demo here.

 

<html>
<head>
 <title>Vertical text center demo</title>
</head>
<body>
<style>
.textbox {
 height: 200px;
 width: 300px;
 text-align: center;
 font-size: 14px;
 font-weight: bold;
 background-color: blue;
}
.textbox p {
 height: 100%;
 display: flex; /* vertically center text */
 justify-content: center;
 align-content: center;
 flex-direction: column;
 margin: 0 50px;
 color: white;
}
</style>
<h1>Vertical text center demo</h1>
<div class="textbox">
 <p>This text is vertically centered in the box</p>
</div>
</body>
</html>

Magento2 System Upgrade fails via Setup Wizard – Error in Update!

When trying to upgrade Magento from 2.0.2 to 2.0.4 I got a windows saying Update in progress and the last line from the system log says “./composer.json has been updated” then nothing more happens for quite a long time. Finally an error screen displays “Error in Update!”.

To restart the update process while trying to figure out the error i had to manually delete the files var/.maintenance.flag and var/.update_in_progress.flag.

Magento System Upgrade error

Magento System Upgrade error

To make Magento run in Apache we had set php.ini for the web user to memory_limit=1024M and according to instructions, the cron jobs should be called with the -c pointing to the php.ini used by the web server, in our case /etc/php5/fpm/php.ini.

No error message revealed why the update failed but I found out that the php.ini we used for cron (/etc/php5/fpm/php.ini) had a memory_limit=128M. By editing this file and increasing it to 1024M the update worked.

Magento and always_populate_raw_post_data readiness test fails

When running the Magento readiness test it failed with the message that always_populate_raw_post_data should be set to -1 since it is running under php 5.6. Even though I tried different methods of setting it to -1 and I could verify it by calling phpinfo(); Magento still complained.

The way I solved is a bit rough and it required that I had full system administrator access to the machine (which I had because it was a dedicated server). This is how I solved it:

echo "always_populate_raw_post_data=-1" > /etc/php5/mods-available/always_populate_raw_post_data.ini
php5enmod always_populate_raw_post_data
service php5-fpm restart
service apache2 restart

Magento “Cron readiness check failed” solved

First of all, check the Magento guide on this problem here.

In my case, at first I didn’t get any errors in the cron logs in <web-root>/var/log. When running the scripts by hand as the website user I got the not so informing “Cron readiness check failed” in the <web-root>/var/log/update.cron.log.

The reason the “Cron readiness failed” was actually due to some files in the file and directory structure in the web root that can not be written by the cron update script. In my case I used the AWstats package to create website statistics placed in a directory called /stats. This directory and it’s file was not writeable by the cron script, causing it to fail, even though the directory /stats and it’s files are not a part of Magento.

I discovered this by investigating the content of the file var/.update_cronjob_status. In this file you can find important information on why the cron update script is failing.

PHP Parse error: syntax error, unexpected end of file in XXXXX.php

  • Check that you have spaces around curly braces, i.e. for example don’t use <?php}?> but instead use <?php } ?>
  • If your script has been running without problems on earlier versions of PHP but you are now running PHP 5.4 or later, replace all occurrences of <? with <?php

Vivotek PT7137 rtsp stream to webpage using VLC plugin

One way of getting the video from Vivotek PT7137 to a webpage is by using the VLC plugin and connect the rtsp stream.

However, in current version of Chrome the VLC plugin is no longer supported. Instead it is suggested to use HTML5 to embed video, but rtsp is not supported in Chrome so it is kind of a dead end there for the moment. This solution works in for example Firefox.

In the webpage where you would like to add the stream:

<object classid=”clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921″ codebase=”http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab” id=”vlc”>
</object>
<embed type=”application/x-vlc-plugin” pluginspage=”http://www.videolan.org” autoplay=”yes” loop=”no” width=”600″ height=”340″ target=”rtsp://USERNAME:PASSWORD@IPADDRESS:554/live.sdp” />

Replace USERNAME, PASSWORD and IPADRESS with real values for your Vivotek PT7137 camera. It might be a good idea to create an account in the Vivotek PT7137 to use from the web as the username and password will be visible for anyone who inspects the webpage source code. That said, putting the root user account and password here would be considered stupid 🙂

Tip for Joomla users: If you include this code in a Joomla site, include {emailcloak=off} before the above, because the @-sign will trig Joomla email cloaking beliving it is an email address.

CSS background-position not working on Android Mozilla

In order to position a background image inside a div I tried to use the CSS3:

background-position: right 10px center;

The goal was to position the background image to the right of a div container, 10px from the right edge and vertically centered. This worked fine in most browsers. However, in the Android devices using the native Mozilla browser the background was positioned at 0,0 (i.e. left top).

The solution was to use:

background-position: right center;

and edit the background image where I added 10 px of extra transparent space into the image.

How to convert a SVG (scalable vector graphics) image to PNG

This method aims at Windows users but similar methods are probably also useable in other environments.

  1. Right click on the SVG image file and select Open with
  2. Select Internet Explorer
  3. In Internet Explorer right click on the image and select Save image as
  4. In the File Format box switch from Scalable Vector Graphics (*.svg) to PNG (*.png) 
  5. Click Save

For Ubuntu there is a simple solution described here -> http://www.upubuntu.com/2012/06/how-to-convert-svg-files-to-other-image.html

Smooth scrolling not working for my website on IOS devices like iphone and ipad

On iPhone and iPad, i.e. IOS devices, in some cases the smooth, accelerated scrolling is not working. Instead the web page feels “lagging”, slow or stuttering and won’t continue to scroll in the smooth accelerated way you are used to.

To solve this, make sure to use overflow-y: scroll; (not auto) and apply  -webkit-overflow-scrolling: touch; to body and possibly other elements. If it is not enough to apply it to the body you might need to also apply it to your div:s, like the wrapper div and so on.

body {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}

FormMail.pl keeps reporting Bad referrer

I used FormMail.pl from Matt’s Script Archive on one of my web sites and called this script from several other web sites. This way I only need to maintain one copy of the script regarding updates.

The script began complaining about “Bad referrer” when called from my other sites, even though I could positively verify that the other site’s domain name was present in the referrers of FormMail.pl.

Not finding the problem in the script itself I began to think over what I had recently changed on the site hosting the FormMail.pl and one thing was that I recently added a http redirect any incoming calls that didn’t go to the site url using https and I also redirected www.sitename to just sitename. For example, a call to http://www.sitename was redirected to https://sitename using Apache’s http rewrite module.

On my other sites using the FormMail.pl script from the main site, I was calling the FormMail.pl using a url beginning with http://www, i.e. the call was redirected by http redirect rules. When changing the url to call the FormMail.pl script to https://sitename (i.e. using SSL and no www), the call would not be touched by http redirect rules and voila – everything was working again.