Showing posts with label HTML5. Show all posts
Showing posts with label HTML5. Show all posts

Tuesday, 12 February 2019

Vanilla JS Bind

I have created a Vanilla JavaScript bind class. This has been built using https://github.com/guitarbeerchocolate/vanilla-js-component and resides at https://github.com/guitarbeerchocolate/JS_Bind
It employs :


  • HTML5
  • ES6

Vanilla JS carousel

I have created a Vanilla JavaScript carousel. This has been built using https://github.com/guitarbeerchocolate/vanilla-js-component and resides at https://github.com/guitarbeerchocolate/vanilla-js-carousel
It employs :

  • HTML5
  • SASS
  • BEM
  • ES6

Vanilla JS component

I'm creating a number of elements using Vanilla JavaScript. They will use :

  • HTML5
  • SASS
  • CSS grid
  • BEM
  • Media queries
  • ES6

In order to put these elements together more efficiently, I have put together a small framework, from which I will fork.
It lies at https://github.com/guitarbeerchocolate/vanilla-js-component

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.

Wednesday, 10 June 2015

Bootstrap formhandler calling class methods with JSON returned and processed

This entry offers a number of techniques through 4 files.

  • index.php contains a message alert which will only be displayed when there is a message to put in it. The forms use an action which contains the name of a class and method which will be used to process the results. There is also a call to custom.js
  • custom.js handles the form submissions and delivers the data returned to the page. It passes the form action and field content to formhandler.php. It receives JSON which then is either passed to a message alert or a data table.
  • formhandler.php receives the call from custom.js. This contains the form action and field content. It takes the form action and uses them to create calls to classes and methods named in the form action. For example and action of myclass/mymethod would be used to create calls similar to those below. The inclusion of the $_POST array allows the form field content to be passed to the class. The data returned is then passed back to custom.js for processing.
$myclass = new myclass($_POST);
$myclass->mymethod;

  • myclassname.class.php contains the example class and methods. The class receives the $_POST array and processes its content. There are 3 methods which demonstrate how to return a string, an array and an object.

This approach is a quick way of utilising many classes. It does not require a .htaccess file to simplify form actions and is flexible in its handling of returned data through JSON.
Have fun.

index.php

<!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>Form handler for many PHP classes using jQuery</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
    body
    {
      margin-top:2em;
    }
    #message, #data-table
    {
      display:none;
    }
    </style>
  </head>
  <body>
    <div class="row">
      <div class="container">
        <div class="col-md-12">
          <div id="message" class="alert alert-success" role="alert"></div>
          <!-- <form action="myclassname/myclassmethod_string" method="POST"> -->
          <!-- <form action="myclassname/myclassmethod_array" method="POST"> -->
          <form action="myclassname/myclassmethod_object" method="POST">
            <div class="form-group">
              <label for="name"></label>
              <input type="text" name="name" class="form-control" />
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form>
          <table id="data-table" class="table table-striped">
            <thead>
              <tr>
                <th>Name</th>
                <th>Age</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="custom.js"></script>
  </body>
</html>

custom.js

(function()
{
  $('form').on('submit', function(event)
  {
    $.post('formhandler.php?action='+$(this).attr('action'), $(this).serialize(), function(data)
    {
      var json_obj = JSON.parse(data);
      if(json_obj.hasOwnProperty('message'))
      {
        $('#message').text(json_obj.message);
        $('#message').show();
        $('#message').fadeOut(3000);
      }
      else
      {
        $.each(json_obj, function(name,age)
        {
          $('#data-table > tbody').appendRow(name,age);            
        });
        $('#data-table').show();
      }
    });
    event.preventDefault();
  });
})();

$.fn.appendRow = function()
{
  var s = '<tr>';
  for (var i = 0; i < arguments.length; i++)
  {
    s += '<td>'+arguments[i]+'</td>';
  }
  s += '</tr>';
  return $(this).append(s);
}

formhandler.php

<?php
if(isset($_GET['action']))
{
$arr = split('/', $_GET['action']);
$class = $arr[0];
$method = $arr[1];
require_once $class.'.class.php';
if(class_exists($class))
{
$evalStr = '$'.$class.' = new '.$class.'($_POST);';
eval($evalStr);
if(method_exists($class, $method))
{
$evalStr = '$returnValue = $'.$class.'->'.$method.'();';
eval($evalStr);
}
else
{
$returnValue = 'Method does not exist';
}
}
else
{
$returnValue = 'Class does not exist';
}
}
else
{
$returnValue = 'No action given';
}

if(is_object($returnValue) || is_array($returnValue))
{
echo json_encode($returnValue);
}
else
{
$returnArr = array('message'=>$returnValue);
echo json_encode($returnArr);
}
?>

myclassname.class.php

<?php
class myclassname
{
private $pa;
function __construct($postArray = array())
{
$this->pa = $postArray;
}

function myclassmethod_string()
{
return 'Your name is '.$this->pa['name'];
}

function myclassmethod_array()
{
$myArr = array('Peter'=>'35', 'Ben'=>'37', 'Joe'=>'43');
return $myArr;
}

function myclassmethod_object()
{
$myObj = (object) array('Peter'=>'35', 'Ben'=>'37', 'Joe'=>'43');
return $myObj;
}

function __destruct()
{

}
}
?>

Friday, 6 June 2014

jQuery sticky plugin

The jQuery plugin below allows you to name an element as a sticky header or footer. You can also set the height, width and background colour. This is similar to those available in Twitter Bootstrap and ZURB Foundation.

First the HTML page:
<!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>jQuery sticky footer</title>
    <style>
    body
    {
      font:90%/1.6 sans-serif;
    }
    section
    {
      margin-top:6em;
    }
    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <header>
      <h1>Hello, world!</h1>
    </header>
    <section>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac pretium velit. Morbi scelerisque vel risus sed ullamcorper. Integer nec dui vel magna malesuada tempus. Vivamus dictum elit sem, at mattis leo volutpat in. Phasellus felis metus, dapibus semper nisi non, sagittis lacinia erat. Fusce in diam et velit commodo rutrum in in dui. Sed imperdiet est non dui molestie consequat. Duis ac ipsum in purus tempor dictum. Curabitur ac neque sed sem semper congue. Pellentesque enim enim, congue sed consequat et, lobortis id tortor. Cras a faucibus sem. Mauris sed enim quam. Aenean sollicitudin posuere mauris. Curabitur sollicitudin orci orci, a sagittis neque feugiat nec.</p>
    </section>
    <footer>
      <p>Hello footer world!</p>
    </footer>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="sticky.plugin.js"></script>
    <script>
      /* Example parameters
      $('header').sticky(
      {
        position:'top',
        height:'10em',
        width:'50%',
        background:'red'
      });
      */
      $('header').sticky(
      {
        position:'top'
      });
      $('footer').sticky(
      {
        position:'bottom'
      });
    </script>
  </body>
</html>

Now the jQuery plugin, sticky.plugin.js
(function($)
{
$.fn.extend(
{
sticky:function(options)
{
var defaults =
{
position:'bottom',
height:'4em',
width:'100%',
background:'white'
}

var options = $.extend(defaults, options);

return this.each(function()
{
var o = options;
   $(this).css('position','fixed').css('_position','absolute').css(o.position,0).css('background',o.background);
   $(this).height(o.height);
   $(this).width(o.width);
       $(this).css('z-index', 9999);
});
}
});
})(jQuery);

Friday, 25 April 2014

jQuery accordion plugin you can style how you like

The jQuery accordion plugins I have come across also come with some complex CSS. They rely on the CSS to hide elements and you have to dig your way through complex CSS elements in order to adapt the look for your own purposes. On of the the worst culprits for this is the one which comes with the jQuery UI library.
So I devised my own plugin which operates without any CSS, is easy to style, is lightweight, does not require anchors to open items, and provides flexibility to the item headers.
First the HTML.
<!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>Accordion</title>  
    <style>
    body
    {
      font: 90%/1.618 sans-serif;
      padding-top:2em;
    }
    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div id="micksaccordion">
      <section>
        <header>
          <h1>Header 1</h1>
        </header>
        <article>
          <p>This is from article 1</p>
        </article>
      </section>
      <section>
        <header>
          <h2>Header 2</h2>
        </header>
        <article>
          <p>This is from article 2</p>
        </article>
      </section>
      <section>
        <header>
          <h3>Header 3</h3>
        </header>
        <article>
          <p>This is from article 3</p>
        </article>
      </section>
      <section>
        <header>
          <h4>Header 4</h4>
        </header>
        <article>
          <p>This is from article 4</p>
        </article>
      </section>
    </div><!-- micksaccordion -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="accordion.plugin.js"></script>
    <script>
    (function()
    {
      /* Easy version
      $('#micksaccordion').accordion();
      */
      $('#micksaccordion').accordion(
      {
        /* 'first', 'last', false */
        show:'last'
      });
    })();
    </script>
  </body>
</html>

And now the jQuery plugin:
(function($)
{
  $.fn.extend(
  {
    accordion:function(options)
    {
      var defaults =
      {
          show:false
      }

      var options = $.extend(defaults, options);

      return this.each(function()
      {
        var o = options;              

        var articles = $(this).find('article');

        var firstSection = $(this).children().first();      
        var firstArticle = firstSection.find('article');

        var lastSection = $(this).children().last();      
        var lastArticle = lastSection.find('article');

        articles.hide();

        if(o.show == 'first')
        {
          firstArticle.show();
        }
       
        if(o.show == 'last')
        {
          lastArticle.show();
        }

        var sections = $(this).find('section');

        $(sections).on('click','header', function()
        {
          thesection = $(this).parent();
          thearticle = thesection.find('article');        
          if (thearticle.css('paddingTop') == '0px') thearticle.css({paddingTop: '1px'});
          if (thearticle.css('paddingBottom') == '0px') thearticle.css({paddingBottom: '1px'});        
          thearticle.slideToggle('slow');
        });

      });
    }
  });
})(jQuery);

Enjoy!

Friday, 9 August 2013

Automatically log users into your website using HTML5 Local Storage

So your users has been registered. They have gone through the pain of logging in on a mobile phone and you want them to authenticate more easily next time round, so that they don't give up on using your web app.

The solution : HTML5 Local Storage. In the code below, I take the username and password, and put them in localstorage variables. When the (login) page is visited again, I check to see if those localstorage variables exist. If they do, I add them as values to the username and password field, and perform a submit.

Enjoy!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>HTML5 Save Password</title>
<!--[if IE]>
<script src="html5.js"></script>
<![endif]-->
<script src="jquery.min.js"></script>
</head>
<body>
<form method="POST" action="set.php">
<label for"username">Username</label>
<input name="username" type="email" />
<label for"password">Password</label>
<input name="password" type="password" />
<input type="submit" />
</form>
<script>
(function()
{
u = false;
p = false;
if(localStorage.getItem('username') != null)
{
$('form input[name=username]').val(localStorage.getItem('username'));
u = true;
}
if(localStorage.getItem('password') != null)
{
$('form input[name=password]').val(localStorage.getItem('password'));
p = true;
}
if((u == true) && (p == true))
{
$('form').submit();
}
$('form').submit(function()
{
localStorage.username = $('form input[name=username]').val();
localStorage.password = $('form input[name=password]').val();
});
})();
</script>
</body>
</html>

Thursday, 1 August 2013

HTML5 contenteditable save, re-save and save again

The HTML5 contenteditable attribute is really useful, but when you've got my typing skills, you'd really like to keep saving as you go. In the example below I'm writing to a text file for simplicity. I've got a few things going on.

  • If the text file exists or has data in there, I use it. Otherwise, the editable paragraph holds a default string.
  • I use a form submit to kick off a jQuery event.
  • The jQuery function calls a PHP script to write the contents of my editable paragraph to the file.

This way I can keep pressing the submit button as I go, which will just update the text file with the current editable paragraph contents.

Here's the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Editable jQuery save</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
</head>
<body>
<p id="content" contenteditable="true">
<?php
$text = file_get_contents('test.txt');
if(!empty($text))
{
echo $text;
}
else
{
echo 'Put some text here.';
}
?>
</p>
<form>
<input type="submit" />
</form>
<script>
(function()
{
$('form').submit(function()
    {
        $.post('set.php',
        {
            content:$('#content').text()
        }, function(data)
        {
        if(data)
        {
        console.log(data)
        }    
        });
        return false;
    });
})();
</script>
</body>
</html>

And set.php

<?php
if(isset($_POST['content']))
{
file_put_contents('test.txt', $_POST['content']);
}
else
{
echo 'write was not successful';
}
?>

Wednesday, 17 July 2013

HTML5 Data methods

Here are various ways you can use data through HTML5. The code is larger than usual, that's because I've provided code for 8 different methods of storing and using data. I have tried to highlight the related code and method using colours. To run this, you'll need 3 files:

  • index.php
  • twittieserver.php
  • webworker.plugin.js

The code for all of these files is below. So, let's start with index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Localstorage</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font:0.9em/1.1em Sans-serif;
color:#808080;
}
.column
{
float:left;
width:440px;
}
form, section
{
margin:10px;
padding:10px;
width:400px;
border:2px solid #808080;
}
p.description, section article ul
{
margin:4px 4px 8px 0px;
padding:4px;
}
section article ul
{
background:#F5DA55;
}
p.description
{
background:#F5F555;
}
h1, h2
{
font:1.4em/1.5em Georgia, Serif;
}
h1
{
margin:14px 0 10px 10px;
}
strong
{
font-weight:bold;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
</head>
<body>
<h1>HTML5 Data Options</h1>
<div class="column">
<form>
<h2>Input</h2>
<p class="description">This form will be used to add content to the sessionStorage, localStorage and Web SQL Objects.</p>
<input type="text" id="one" /><br />
<button>Save</button>
</form>
<section id="customdataattribute">
<h2>Custom Data attributes</h2>
<p class="description">Allows you to hold data values within a selector.<p>
<p class="description">E.g &lt;li data-no="20"&gt;<br />Can therefore be called through jQuery as $('li').data('no');<p>
<article>
<ul>
<li data-no="22">This value is 22<li>
<li data-no="33">This value is 33<li>
</ul>
</article>
</section>
<section id="sessionstorage">
<h2>sessionStorage</h2>
<p class="description">This data will be lost when the browser is closed.<p>
<article></article>
</section>
<section id="localstorage">
<h2>localStorage</h2>
<p class="description">This data will be retained after the browser is closed. It persists until deleted by user through browser settings or by this application.<p>
<article></article>
</section>
</div>
<div class="column">
<section id="cachemanifest">
<h2>cache-manifest</h2>
<p class="description">A file which tells the browser what to cache, and not cache. <br /><strong>CACHE MANIFEST</strong> entries will be cached after they are downloaded for the first time.
<br /><strong>NETWORK</strong> entries require a connection to the server, and will not be cached.
<br /><strong>FALLBACK</strong> are fallback pages, if a page is unavailable.
<br />Instructions below:</p>
<article>
<p>First create a .htaccess file for your site (if you are using a proper web server) and add to it the following line:</p>
<p>AddType text/cache-manifest    .manifest</p>
<p>Next, create a file called cache.manifest. In this file, add the lines:</p>
<p><strong>CACHE MANIFEST</strong></p>
<p>index.html</p>
<p><strong>NETWORK</strong>:</p>
<p>login.html</p>
<p><strong>FALLBACK</strong>:</p>
<p>/html/ /offline.html</p>
</article>
</section>
<section id="sse">
<h2>Server-Sent Events</h2>
<p class="description">Allows this application to get data updates from a server. In this example I've simulated a twittie server using a PHP script called twittieserver.php. This data will be lost when the browser is closed.</p>
<article>
<ul>
</ul>
</article>
</section>
<section id="webworker">
<h2>Web Worker</h2>
<p class="description">A piece of JavaScript or jQuery running in the background, without affecting the performance of this application.</p>
<article></article>
</section>
<section id="websql">
<h2>Web SQL</h2>
<p class="description">Allows an application such as this to build a SQL database at the client end. It is also possible to synchronise this data at the server end. This supports applications which ahve both and online and offline state. It persists until deleted by user through browser settings or by this application.</p>
<article>
<ul>
</ul>
</article>
</section>
</div>
<script>
/* Calculates the custom data attributes and appends them to the result of a selector */
$.fn.calculatecustomattributes = function()
{
lis = $(this).children('li');
res = 0;
ve = 0;
$(lis).each(function()
{
ve = parseInt($(this).data('no'));
if(!isNaN(ve))
{
res += ve;
}
});
$(this).append('<li>Result is '+res+'</li>');
};

/* Sets the form contents which were stored in the sessionStorage object to the calling selector */
$.fn.displaysessionstorage = function()
{
$(this).html('<p>Content is '+sessionStorage.getItem('one')+'</p>');
};

/* Sets the form contents which were stored in the localStorage object to the calling selector */
$.fn.displaylocalstorage = function()
{
$(this).html('<p>Content is '+localStorage.one+'</p>');
};

/* Lists contents of the Web SQL object in the calling selector */
$.fn.displaywebsql = function(db)
{
container = $(this);
db.transaction(function(tx)
{
tx.executeSql('SELECT * FROM jimmy', [], function(tx, results)
{
  var len = results.rows.length, i;
for (i = 0; i < len; i++)
{
$(container).append('<li>'+results.rows.item(i).text+'</li>');
}
});
});
};

/* This function is called when the 'Save' button is clicked */
$.fn.saveit = function(db)
{
/* Put the value of the form input in a variable */
one = $('form #one').val();

/* Create an item in the sessionStorage object and apply the value of our variable */
sessionStorage.setItem('one', one);

/* Create an item in the localStorage object and apply the value of our variable */
localStorage.one = one;

/* Insert the value of our variable into the Web SQL object */
db.transaction(function(tx)
{
tx.executeSql('INSERT INTO jimmy (text) VALUES (?)',[one]);
});

/* Refresh the contents of our containers */
$('#sessionstorage article').displaysessionstorage();
$('#localstorage article').displaylocalstorage();
$('#websql article ul').displaywebsql(db);
};

(function()
{
/* Check to see if web storage is supported */
if(typeof(Storage) == 'undefined')
        {
            alert('Sorry! No web storage support..');
        };

        /* Check to see if web workers are supported */
        if(typeof(Worker) == 'undefined')
{
    alert('Sorry! No web worker support..');
}

/* Check to see if Server-Sent Events are supported */
if(typeof(EventSource) =='undefined')
{
alert('Sorry! No server-sent events support..');
}

/* Calculate custom attibutes */
$('#customdataattribute article ul').calculatecustomattributes();

/* Create a Web SQL object */
var db = openDatabase('mydb', '1.0', 'jimmy database', 2 * 1024 * 1024);
db.transaction(function(tx)
{
tx.executeSql('CREATE TABLE jimmy (id unique, text)');
});

/* Refresh the contents of our containers */
$('#sessionstorage article').displaysessionstorage();
$('#localstorage article').displaylocalstorage();
$('#websql article ul').displaywebsql(db);

/* Call the saveit function when the button is clicked */
$('button').click(function()
{
$(document).saveit(db);
});

/* Get updates for a server, here I've simulated the server with a PHP script */
var feed = new EventSource('twittieserver.php');
feed.onmessage = function(event)
{
/* Add new articles to the top of the list and limit the list to 4, thus removing the fourth item from the list */
$('#sse article ul').prepend(event.data);
if($('#sse article ul > li').size() == 4)
{
$('#sse article ul li:last-child').remove();
}
};

/* Get updates from a JavaScript, simply replacing the contents of the container with each new value returned */
w = new Worker("webworker.plugin.js");
w.onmessage = function(event)
{
$('#webworker article').html(event.data);
};
})();
</script>
</body>
</html>

Now twittieserve.php
<?php
header('Content-Type:text/event-stream');
header('Cache-Control:no-cache');
$seconds = date('s');
echo 'data:<li>Item '.$seconds.'</li>'.PHP_EOL.PHP_EOL;
flush();
?>

And finally, webworker.plugin.js
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();

Enjoy!

Wednesday, 26 June 2013

At last the HTML5 main element

For those of us who've been using HTML5 for a long time, it's been a bit frustrating to step back to those old divs. Now we finally have the element we've been waiting for <main>. Now look at our page.
<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <header>
      <h1>This is the header</h1>
    </header>
    <main>
      <p>The main content</p>
    </main>
    <footer>Copyright mine</footer>
  </body>
</html>

Monday, 17 June 2013

Your first jQuery plugin

Here is a quick tutorial in how to create a jQuery plugin. Below is my basic page with a call to:
A file called 'first.plugin.js' containing the plugin (in red).
A call to a method called 'changetored' within that plugin (in blue).

<!DOCTYPE html>
<html lang="en">
<head>
<title>First jquery plugin test page</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
<style>
.red
{
color:red;
}
</style>
</head>
<body>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
</body>
<!-- Call the plugin -->
<script src="first.plugin.js"></script>
<script>
(function()
{
/*
* changetored is a method declared in first.plugin.js
*/
$('p').changetored();
})();
</script>
</html>
Now for the plugin. Here is the file 'first.plugin.js'.

(function($)
{
$.fn.changetored = function()
{
/*
* In the context of a call like $('p').changetored();
* $(this) would become all paragraphs
*/
$(this).addClass('red');
};
})(jQuery);

Tuesday, 4 December 2012

Fullscreen presentations using twitter bootstrap and the HTML5 API

I can't take all the credit for this. I have to acknowledge the great work done by HTML5 Demos. What I did was, simplify some of the JavaScript and CSS. I then used Twitter Bootstrap as a template, so to make this work, you'll have to make that download. I also made use of the carousel library which came with Twitter Bootstrap. You'll also have to download jQuery and refer to it as I have.

Here's how it works. You load put the page in your browser. When loaded, you press the 'f' jey to make the page full screen. Press the 'enter' key to move forward through the slideshow. Press the backspace key to move back. Press the 'Esc' key when you've done.

I've tested it on Chrome and Firefox. I believe there's another popular browser, but it's not installed on my computer.

Anyway. Here's the code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Fullscreen demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <!-- <link href="application/application.css" rel="stylesheet"> -->
    <style>
    ::-webkit-scrollbar
    {
      width:15px;
      background:white;
    }
    ::-webkit-scrollbar-thumb
    {
      box-shadow:inset 0 0 99px rgba(0,0,0,.2);
      border:solid transparent;
      border-width:6px 4px;
    }
    html, body
    {
      height:100%;
      background:white;
      overflow-y:auto;
      overflow-x:hidden;
    }
    :-webkit-full-screen-document
    {
     
    }
    :-webkit-full-screen:not(:root)
    {
      width:100% !important;
      float:none !important;
    }
    :-moz-full-screen:not(:root)
    {
      width:100% !important;
      float:none !important;
    }
    #fs:-webkit-full-screen
    {
      width:98%;
      height:98%;
      background-color:white;
    }
    .carousel-inner .item
    {
      margin-left:80px;
    }
    </style>
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->  
  </head>
  <body>
    <div id="fs">        
      <div class="container">
        <div class="page-header">
          <h1>f for full screen, Esc for quit.</h1>
        </div>
        <div id="myCarousel" class="carousel slide">
          <!-- Carousel items -->
          <div class="carousel-inner">
            <div class="active item">
              <ul>
                <li>First bullet</li>
                <li>Second</li>
                <li>Third</li>
              </ul>
            </div>
            <div class="item">
              <ul>
                <li>Fourth bullet</li>
                <li>Fifth</li>
                <li>Sixth</li>
              </ul>
            </div>
            <div class="item">
              <ul>
                <li>Seventh bullet</li>
                <li>Eighth</li>
                <li>Ninth</li>
              </ul>
            </div>
          </div>
          <!-- Carousel nav -->
          <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
          <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
      </div>
    </div>
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>  
    <script>
    $(document).keyup(function(event)
    {
      $('.carousel').carousel('pause');
      if (event.keyCode === 13)
      {
        $('a.carousel-control.right').trigger('click');
      }    
      if (event.keyCode === 8)
      {
        $('a.carousel-control.left').trigger('click');
      }
    });

    var elem = document.querySelector(document.webkitExitFullscreen ? '#fs' : 'body');  
    document.addEventListener('keydown', function(e)
    {
      switch (e.keyCode)
      {
        case 70:
          enterFullscreen();
          break;
      }
    }, false);  

    function enterFullscreen()
    {
      if (elem.webkitRequestFullscreen)
      {
        elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
      }
      else
      {
        if (elem.mozRequestFullScreen)
        {
          elem.mozRequestFullScreen();
        }
        else
        {
          elem.requestFullscreen();
        }
      }    
    }
    </script>
  </body>
</html>

Monday, 1 October 2012

Simple JSON retrieval through jQuery

This page explains how to retrieve some simple JSON data and append it to a page. First the JSON through a script called jsonout.php

{
  "one": "Singular sensation",
  "two": "Beady little eyes",
  "three": "Little birds pitch by my doorstep"
}


Now the HTML with jQuery to retrieve and display it within the page.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple JSON retrieval through jQuery</title>
<!--[if IE]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font:10px/15px Sans-serif;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1"); 
</script>
</head>
<body>
<script>
(function()
{
$.getJSON('jsonout.php', function(data)
{
  $.each(data, function(key, val)
  {
    $('body').append('<p>'+key+':'+val+'</p>');
  });
});
})();
</script>
</body>
</html>

Wednesday, 11 July 2012

HTML5 Audio Slideshow

Here, I've created a slideshow which syncs with a piece of audio. You can add different types of image and you can set the position in the audio when the image/slide appears. All free for you to play with.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>HTML5 Audio Slideshow</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
audio img
{
display:none;
}
#display_meta
{
width:300px;
min-height:225px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
</head>
<body>
<br />
<img id="display_meta" src="1.png" /><br />
<audio id="greeting" controls="controls">
<source src="http://dl.dropbox.com/u/17154625/greeting.ogg" type="audio/ogg" />
<img src="jimmy.png" data-seconds="2" />
<img src="johnnie.png" data-seconds="4" />
<img src="julie.png" data-seconds="6" />
</audio>
<script>
var allImages = new Array(3);
var inc = 0, foundie = 0;
$('audio img').each(function()
{
allImages[inc] = new Array(3);
allImages[inc][0] = $(this).attr('src');
allImages[inc++][1] = $(this).data('seconds');
});
(function()
{
var displayTime = function()
{
var rVer = Math.round(greeting.currentTime);
foundie = giveBackImageName(rVer);
if(foundie != 0)
{
document.getElementById('display_meta').src = foundie;
}
}

var giveBackImageName = function(vr)
{
for (var i = 0; i < allImages.length; i++)
{
    if(allImages[i][1] == vr)
    {
    return allImages[i][0];
    }
}
return 0;
}
$('#greeting').bind('timeupdate', displayTime);
})();
</script>
</body>
</html>

Friday, 10 June 2011

Simple liquid grid layout

I was reading this blog post earlier today, in which it recommends to "Use liquid layouts" and "Roll your own grids". The example below does just this, so with jQuery mobile, fttext etc. I may just be in a good place to develop responsive web designs.

See demo.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Liquid Grid</title>
<!--[if IE]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:sans-serif;
}
.oneCol, .twoCol, .threeCol, .goldenRatioLeft, .goldenRatioRight
{
clear:left;
}
.oneCol
{
width:100%;
}
.twoCol section
{
width:50%;
}
.threeCol section, .goldenRatioLeft section.first, .goldenRatioRight section.last
{
width:33.3%;
}
.oneCol, .twoCol section, .threeCol section, .goldenRatioLeft section, .goldenRatioRight section
{
background:#EEEEFE;
float:left;
}
.goldenRatioLeft section.double, .goldenRatioRight section.double
{
width:66.6%;
}
h1, p
{
margin:0.5em;
}
</style>
</head>
<body>

<section class="oneCol">
<h1>Header 1</h1>
</section>

<section class="twoCol">
<section class="first"><p>Column 1 of 2 columns.</p></section>
<section><p>Column 2 of 2 columns.</p></section>
</section>

<section class="threeCol">
<section class="first"><p>Column 1 of 3 columns.</p></section>
<section class="second"><p>Column 2 of 3 columns.</p></section>
<section><p>Column 3 of 3 columns.</p></section>
</section>

<section class="goldenRatioLeft">
<section class="first"><p>Golden ratio left column 1.</p></section>
<section class="double"><p>Golden ratio left column 2.</p></section>
</section>

<section class="goldenRatioRight">
<section class="double"><p>Golden ratio right column 1.</p></section>
<section class="last"><p>Golden ratio right column 2.</p></section>
</section>

</body>
</html>

Monday, 11 April 2011

YUI 3 Grids with HTML5

Here is a simple example of how to combine HTML5 layout tags with the YUI 3 Grid library (which is still in beta). It works cross-browser.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sharing data from the Facebook API</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssgrids/grids-min.css" />
<style>
body
{
font-family:Sans-serif;
line-height:1.5em;
margin: auto; /* center in viewport */
     width: 960px;
}
nav
{
text-align:center;
}
nav a
{
float:right;
display:block;
text-decoration:none;
}
section p, footer p, img, hgroup
{
margin:0.5em 0.5em 0.5em 0.5em;
}
</style>
</head>
<body class="yui3-g">
<section class="yui3-u-1-2"></section>
<nav class="yui3-u-1-2">
<a href="#" class="yui3-u-1-5">home</a>
<a href="#" class="yui3-u-1-5">services</a>
<a href="#" class="yui3-u-1-5">portfolio</a>
<a href="#" class="yui3-u-1-5">contact</a>
</nav>
<header class="yui3-u-1">
<hgroup>
<h1>Header 1</h1>
<h2>Header 2</h2>
</hgroup>
</header>
<section class="yui3-u-1-2">
<p>Your image here</p>
</section>
<section class="yui3-u-1-2">
<p>Your text here</p>
</section>
<section class="yui3-u-1-3">
<p>Your text here</p>
</section>
<section class="yui3-u-1-3">
<p>Your text here</p>
</section>
<section class="yui3-u-1-3">
<p>Your text here</p>
</section>
<footer class="yui3-u-1"><p>Your text here</p></footer>
</body>
</html>

Monday, 28 March 2011

Google TTS API for my paragraphs using HTML5, jQuery and PHP

Most of the credit for this post goes to Abu Ashraf Masnun for this post http://www.masnun.me/2009/12/14/googles-text-to-speech-api-a-php-wrapper-class.html
You'll need to take a copy of his code for this to work. Then you need to append the following lines to the end of the PHP (after his object declaration).
$tts = new TextToSpeech();
$tts->setText($_POST['text']);
$tts->saveToFile("masnun.mp3");

Once you've done this, you can create a HTML file like mine below. To use the page, click on the speaker icons.

Note:This will not work in rubbish browsers. For this you will need to change my HTML5 <audio> tag for something awful like the <object> tag.

Another note:The Google TTS has a 100 character limit.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text to speech</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
line-height:1.5em;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
var audioText = '<audio controls="controls" autoplay="autoplay">';
audioText += '<source src="masnun.mp3" type="audio/mpeg" />';
audioText += 'Your browser does not support the audio element.';
audioText += '</audio>';
$(document).ready(function()
{
$('.tts').each(function()
{
$(this).after('<a href="#" class="speaker"><img src="http://farm6.static.flickr.com/5091/5568186294_a396c02f4f_t.jpg" /></a>');
});
$('.speaker').click(function()
{
$.post('tts.php',
{
text:$(this).prev('p').text()
}, function(data)
{
$(this).after(audioText);
});
return false;
});
});
</script>
</head>
<body>
<section id="mainContent">
<p class="tts">Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
<p class="tts">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p class="tts">Johnny Diamond. Peter Sam</p>
</section>
</body>
</html>