Mick Redman: 2016

Monday, 15 August 2016

PHP resize image before base64 encoding

It took me a while to work this out, but it was worth it. base64 encoding can be really useful in presenting and storing images on the web. However you don't want to add a 2000 pixel width base64 encoded image to your database. Here's how to resize the image before it goes in.

<?php
$file = 'mypic.jpg';
$image = imagecreatefromjpeg($file);
$image = imagescale($image , 100);
ob_start();
imagejpeg($image);
$contents = ob_get_contents();
ob_end_clean();
$dataUri = "data:image/jpeg;base64,".base64_encode($contents);
echo '<img src="'.$dataUri.'" />';
?>

Wednesday, 10 August 2016

Using jQuery FormData to include files when making POST request

In this example I create a form, with a text, and file input field. When I submit the form, contents from all input fields are submitted through the 'FormData' class. The results from the called script are returned to a div. Finally, the fields are then cleared.
<html>
<head>
   <title>jQuery File Upload</title>
</head>
<body>
   <form action="upload.php" method="POST" enctype="multipart/form-data">
       <input type="text" name="myname" />
       <input type="file" name="fileinfo" multiple="" />
       <button type="submit">Submit</button>
   </form>
   <div id="result"></div>
   <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
   <script>
   (function()
   {
       $('form').on('submit', function(e)
       {
           var theDiv = $('div#result');
           var thisForm = $(this);
           var action = thisForm.attr('action');
           var method = thisForm.attr('method');
           $.ajax(
           {
               url: action,
               type: method,
               data: new FormData(this),
               processData: false,
               contentType: false
           }).done(function(datareceived)
           {
               thisForm.find('input, textarea').val('');
               theDiv.html(datareceived);
           });
           e.preventDefault();
       });
   })();
   </script>
</body>
</html>

To test if it works I use upload.php. See
<?php
$str = NULL;
foreach($_FILES as $file)
{
    if(move_uploaded_file($file['tmp_name'], $file['name']) == FALSE)
    {
        $str .= $file['name'].' not uploaded<br />';
    }
}
$str .= '<br />POST items include : <br />';
foreach($_POST as $postitem => $value)
{
    $str .= 'Name : '.$postitem.' Value : '.$value.'<br />';
}
echo $str;
?>

Monday, 25 July 2016

Ratings field within Bootstrap using Font Awesome stars

I looked around for a nice easy rating field using stars. Just like the ones you find on tripAdvisor. All the solutions looked a little CSS or JS heavy and needed images which are more HTTP connections.
So my solution uses only a little CSS, a small amount of jQuery and font-awesome. You'll have to get font-awesome for it to work.
See below.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Font awesome stars</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
    
    <style>
    .star-selected
    {
      color:pink;
    }
    </style>
</head>
<body>
<form method="POST" action="someaction.php">
      <div class="form-group">
        <input type="hidden" name="stars">
        <i class="fa fa-star" aria-hidden="true" value="1"></i>
        <i class="fa fa-star" aria-hidden="true" value="2"></i>
        <i class="fa fa-star" aria-hidden="true" value="3"></i>
        <i class="fa fa-star" aria-hidden="true" value="4"></i>
        <i class="fa fa-star" aria-hidden="true" value="5"></i>
      </div>
      <button type="submit">Submit</button>
    </form>

    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script>
    (function()
    {
      var theStars = $('form').find('i');
      $('i').on('click', function()
      {
        theStars.removeClass('star-selected');
        var theStarIclicked = $(this);
        var highVal = theStarIclicked.attr('value');
        theStarIclicked.addClass('star-selected');
        $("input[name='stars']").attr('value',highVal);
        theStars.each(function(i)
        {
          if($(this).attr('value') < highVal)
          {
            $(this).addClass('star-selected');
          }
        });
        console.log('Star selected '+$("input[name='stars']").attr('value'));
      });
    })();
    </script>
</body>
</html>

Wednesday, 6 April 2016

jQuery plugin to insert external content

This jQuery plugin takes 2 parameters:

The location of an external website
The element within that location which contains content you would like to insert in yours

See the code here

Wednesday, 23 March 2016

jQuery plugin which takes and receives form data

This jQuery plugin to take all form data, pass it to a named script and return a message to a named HTML element. Particularly good with Twitter Bootstrap.
See the code here.

Use jQuery to handle GET requests in a Twitter Bootstrap page

Today, I created a jQuery plugin. It takes GET requests via apage URL and passes the content to declared HTML elements.
See the code here.

HTML includes like PHP using jQuery

Here I have created a jQuery plugin to perform HTML includes (sub pages) similar to method possible in PHP.
Find the code here.

Dynamically make items active in Twitter Bootstrap navigation using jQuery

Here, I have created a jQuery plugin. It takes as its parameter the elements containing navigation items from a Twitter Bootstrap page. The plugin then matches the page URL with a navigation item and makes it active.
Find the code here.

Tuesday, 22 March 2016

Search multiple database tables using PDO

I have created a PHP class based on PDO. It searches multiple database tables. It handles boolean and normal string queries. Results are displayed as Twitter Bootstrap tables. Find it here.

Monday, 21 March 2016

H1 shows window width

I'm often trying understand which media queries to add to my CSS in order to control changes in the display of content. For this I need to see the window width as it resizes. There are other ways, but I find it more convenient if the page title show the window width.
To enable this, I add the following jQuery code, which is also available as a public gist here.
$(window).resize(function()
{
$('h1').text($(window).width());
});

Golden ratio

I've been reading this article recently on use of the golden ratio within web design.
As a result I've developed a jQuery plugin to help in its implementation within my pages. You can find it here on my github page. It also include an index.html and custom.css to help demonstrate its use.
There are 2 implementations:

Creating a rectangle where the golden ratio width is derived from the height
Creating 2 rectangles based on their container height

Hope they help.