Stefan Helander

Vivotek PT7137 rtsp stream to webpage using VLC plugin

/0 Comments/in , /by

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.

Stefan Helander

CSS background-position not working on Android Mozilla

/0 Comments/in /by

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.

Stefan Helander

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

/0 Comments/in , , /by

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

Stefan Helander

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

/0 Comments/in /by

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

Stefan Helander

FormMail.pl keeps reporting Bad referrer

/0 Comments/in , /by

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.

Stefan Helander

Extend a wrapped div to full screen width outside it’s wrapper

/0 Comments/in /by

A very common design model for websites in fluid/reponsive design is to make a centered container taking up for example 80% of the screen width. It is not very unusual that the designer then wants the background on a header, footer, horizontal menu or any other similar object to have it’s background extended to the fulls screen width.

 

Website with wrapper container

Website with wrapper container

The problem with this quickly becomes pretty obvious as all objects are contained in a 80% wrapper. One solution is of course to close the wrapping container, then create a full width object with the background and the begin a new wrapper.

However, there is a neat trick that can be used to make an object “break out” outside the containing wrapper. It is done by using negative margins. To not get a horizontal scrollbar in the browser we add overflow-x: hidden to the body.

This is an example how to do it (click here to view the example live):

<html>
<head>
<style>
 body {
   overflow-x: hidden; /* to prevent horizontal scroll bars */
 }
 .container {
   width: 80%;
   height: 100%;
   margin-left: auto; /* center the container */
   margin-right: auto;
   padding: 10px; /* some padding inside the container */
   background-color: yellow;
 }
 .divider {
   line-height: 30px;
   background-color: grey;
   color: white;
   margin-left: -1000%;
   margin-right: -1000%;
   padding-left: 1000%; /* push content back in on the screen */
   padding-right: 1000%;
 }
</style>
</head>
<body>
<div class="container">
 <p>Some text inside the container</p>
 <div class="divider">Here is a section divider in full width</div>
</div>
</body>
</html>
Stefan Helander

Centering a horizontal bullet list

/0 Comments/in /by

Horizontal bullet lists are often used to create a horizontal menu. This is how to make the horizontal bullet list centered.

  1. Create a <div> container and set the text-align: center style on it.
  2. Create a <ul> <li> inside the div and set display: inline-block style on it.

This is an example of how it is done:

<html>
<head>
  <style type="text/css">
   div#container {
     text-align: center; /* center the horisontal list */
   }
   ul.list {
     list-style: none; /* no bullets */
     display: inline-block; /* this will cause the list to be centered */
   }
   ul.list li {
     float: left; /* horizontal list */
     margin-left: 10px; /* some space between items */
     margin-right: 10px;
   }
  </style>
</head>
<body>
<div id="container">
 <ul class="list">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
 </ul>
</div>
</body>
</html>
Stefan Helander

Start embedded Youtube video at specific time

/0 Comments/in /by

When you share a video on Youtube you can select to start the shared video at a certain point of time in the video. Like this (selected to start at 0:40).

Youtube share with start at

This option however is not availible when embedding a video. It can be solved manually though. The embed code from Youtube looks something like this:

<iframe width=”560″ height=”315″ src=”//www.youtube.com/embed/6bHSP9Ddw5w” frameborder=”0″ allowfullscreen></iframe>

To start the video from a specific time, you add the ?start=XXX where XXX is the point counted in seconds. So if the start time includes minutes you have to convert into seconds. If I want the embedded video to start at 0:40 I add ?start=40 like this:

<iframe width=”560″ height=”315″ src=”//www.youtube.com/embed/6bHSP9Ddw5w?start=40” frameborder=”0″ allowfullscreen></iframe>

This is the embedded video starting at 0:40 (and yes, that is me reverse driving an articulated 18 meter bus – sometimes, when I’m not busy ruling Nerdia or working as an IT consultant I walk out into the real world where I sometimes work as a bus driver and it is great fun! :)):

Stefan Helander

Vertical and horizontal center img in div

/0 Comments/in /by

This example shows how an image (img) can be vertically and horizontally centered inside a div. At the same time it illustrates how to resize the image to fit inside the div.

A live view of this code can be seen here. 

<html>
  <head>
    <title>Vertically aligned img in div</title>
    <style type="text/css">
      #container {
        position: absolute;
        width: 600px;
        height: 600px;
        background-color: lightyellow;
        vertical align: middle;
      }  

      #container img {
        max-width: 80%;
        max-height: 80%;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
      }


      p {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <img src="sl-buss-6050.jpg" alt="SL-buss 6050" title="SL-buss 6050">
      <p>The yellow box is here to show the div</p>
    </div>
  </body>
</html>

Stefan Helander

Div with width 100% and margins or padding gets wider than 100% [solved]

/0 Comments/in /by

If a div is set to width (or height) 100% and margins or padding are added, it will be wider than 100% causing the scrollbars to appear in the browser. 

For example like this (click here to view live sample):

<html>
<head>
  <style type="text/css">
    body, html {
      width: 100%;
      border: 0;
      margin: 0;
      padding: 0;
    }
    #wrapper {
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
    }
    #container {
      width: 100%;
      margin: 10px;
      padding: 0;
      border: 0;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <div id="container">
      <h1>Div taking more than 100% space</h1>
      <p>It demonstrates a div that is taking up more than 100%. Notice the horizontal scroll bar below.</p>
    </div>
  </div>
</body>
</html>

The solution is to set the inner container width to auto instead of 100%, like this (click here to view live sample):

<html>
<head>
  <style type="text/css">
    body, html {
      width: 100%;
      border: 0;
      margin: 0;
      padding: 0;
    }
    #wrapper {
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
    }
    #container {
      width: auto;
      margin: 10px;
      padding: 0;
      border: 0;
      background-color: lightblue;
    }
</style>
</head>
<body>
  <div id="wrapper">
    <div id="container">
       <h1>Div NOT taking more than 100% space</h1>
       <p>It demonstrates a div that is NOT taking up more than 100%. Notice the absence of the horizontal scroll bar below.</p>
       <p>The difference/solution is to set the inner div with width: auto.</p>
    </div>
  </div>
</body>
</html>