All posts by martsblog

Cool design

http://melanie-f.com/en/

This site uses really cool design skills. I Iove the way  the words dynamically enter the screen. They must use javascript for this. 

The page has quite limited text, but they make it interesting by their use of colours and white space. 

Very cool design.

adding twitter to your site

You can embed code directly from tweets in the content of your website using the more … functionality of twitter.

Twitter embedded tweets:

<blockquote class="twitter-tweet" lang="en"><p>Good times on Richmond river <a href="http://t.co/QaHosKx5oW">pic.twitter.com/QaHosKx5oW</a></p>&mdash; Martin Green (@m_r_green) <a href="https://twitter.com/m_r_green/status/557158863091564544">January 19, 2015</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

 

However, if you are going to use multiple twitter widgets on your site, then you should add the javascript to your template. This script will asynchronously inject widget.js into your page.

Details on the twitter developers page

Code to add to template:

<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
 
  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };
 
  return t;
}(document, "script", "twitter-wjs"));</script>

Drop caps

First letter drop caps. The main styles are float, font size and line height.

Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum

Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum

Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum

Ajax notes

Ajax stands for asynchronous javascript and xml.

From the w3schools website:

The XMLHttpRequest object is used to exchange data with a server behind the scenes.This means that it is possible to update parts of a web page, without reloading the whole page.

To handle all modern browsers, including IE5 and IE6, check if the browser supports the XMLHttpRequest object. If it does, create an XMLHttpRequest object, if not, create an ActiveXObject.

When the XMLHttpRequest object has been created – use the open and send methods to send a request to the server.

xmlhttp.open(“GET”,”ajax_info.txt”,true);

xmlhttp.send()

Example:

<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","text_response.txt",true);
xmlhttp.send();
}
</script>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

 

To POST data like an HTML form, add an HTTP header with setRequestHeader(). Specify the data you want to send in the send() method.

Use the responseText or responseXML methods to display the data from the server.In the onreadystatechange event, we specify what will happen when the server response is ready to be processed.

When readyState is 4 and status is 200, the response is ready

Google charts

Testing out google charts. Google charts uses HTML5 and SVG to create the charts with a VML fallback for IE and earlier.