Archive for the ‘HTML and CSS’ Category

Centering YouTube Videos

Monday, January 23rd, 2017

WordPress automatically displays YouTube videos when you put the shared link into a post. (Leave a blank line before and after the link.)

Sometimes you want to center the video and this code will do it.


<iframe style='margin: 0 auto; display:block' width='560' height='315' src='https://www.youtube.com/embed/xnBAwUV7abA' frameborder='0' allowfullscreen></iframe>
<p class='caption'>Bruiser and Bird</p>

Bruiser and Bird

If you use the centering trick, the video won’t display in preview mode.

You can have the video start at a specific location by appending the time to the link.


https://youtu.be/xnBAwUV7abA?t=43s

Redirecting missing links

Tuesday, May 17th, 2016

I just updated a site so that it works better on phones and tablets. While updating I also cleaned up a lot of old code. In the process of cleaning up many of the old pages are no longer valid. Rather than redirecting to a generic page, I can redirect certain links to specific missing link pages. This is what I did for old manuals pages that I moved.


<?php
$oldurl = $_SERVER['REQUEST_URI'];
// Redirect requests for manuals
switch ($oldurl) {
  case '/products/mobile/manual_1.php';
  case '/products/mobile/manual_2.php';
  case '/products/mobile/manual_3.php';
  case '/products/mobile/manual_4.php';
  etc.

    header("Location: https://www.wellgolly.com/products/manuals_mobile.php",TRUE,301);
    break;
}
?>
<div  class="centered">
<h1>Error 404<br />Document not found</h1>
    <img class='pure-img-responsive centered' src='/images/sad.png' alt='Sad' />
    <p>We’re sorry, but the page you requested could not be found.<br />
    Please use the menus at the top or bottom of this page to find what you are looking for.</p>

</div>

By parsing the $oldurl, you can redirect missing files from sections of your site to a missing page that can help your visitors find what they are looking for rather than just a generic page.

Apache error.log Warning

Sunday, May 15th, 2016

I get a bunch of these warnings in my logs and wondered what they were.


Command line: '/usr/sbin/apache2'
Loading CGI at runtime.  You could increase shared memory between Apache processes by preloading it in your httpd.conf or handler.pl file

From a Mason mailing list it looks like it is caused when Mason is loaded each time it is needed rather than when Apache starts.
“may be a recommendation that comes from HTML::Mason::ApacheHandler2.”

I have one set of pages only site that use Mason so I’m not going to worry about it.

Yahoo Pure: Hamburger Menu Doesn’t Display

Sunday, May 1st, 2016

When the iPad is in portrait mode, the hamburger menu doesn’t display. It works in the Responsive Design Mode simulator in Safari but not on real iPads. The fix is to change the min-width to 49 em in side-menu.css.


/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 49em) {

Breaking URLs and Long Text

Wednesday, April 27th, 2016

When porting a website so that it displays well on phones, I ran across a problem wrapping long text without breaks. This text doesn’t wrap so the whole page gets a horizontal scroll.


<p class='break-word'>On my Windows 7 and 8 computer, with a login name of llsc the location that shows up in the top bar is:
Users\llsc\AppData\Roaming\LocuTourMultimedia\Client Manager\Data
</p>

I added a break-word class to my CSS and it works fine.


.break-word {
    word-wrap:break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

Well Golly


Atheism Plus

Buy from Amazon