Programming: oktober 2016

maandag 17 oktober 2016

Responsive CSS

Include the following line:

Build a responsive grid-view:

* {
box-sizing: border-box;}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}}

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}}

Showing different images:

/* For width smaller than 400px: */
body {
    background-image: url('img_smallflower.jpg'); }

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body {
        background-image: url('img_flowers.jpg');
    }}

Free responsive CSS templates:

http://www.w3schools.com/css/css_rwd_templates.asp

Responsive CSS

Include the following line:

Build a responsive grid-view:

* {
box-sizing: border-box;}

Showing different images:

Free responsive CSS templates:

http://www.w3schools.com/css/css_rwd_templates.asp

Standard CSS

Syntax:
selector {property: value; property: value;}

p {
    color: red;
    text-align: center;
}

RGB color picker: http://www.w3schools.com/css/css_colors.asp

Background image:
body {
    background-image: url("bgdesert.jpg");
   }
The image above is repeated only horizontally ( background-repeat: repeat-x;) or no repeat (background-repeat: no-repeat;).
The position of the image is specified by the background-position property: background-position: right top;
To specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property: background-attachment: fixed;
Short Key -->
body {
    background: #ffffff url("img_tree.png") no-repeat right top;}

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;}

Border style:
p {
    border: 5px solid red;}

The border-radius property is used to add rounded borders to an element:
p {
    border: 2px solid red;
    border-radius: 5px;}

Margin:
p {
    margin: 100px 150px 100px 80px;}

To use the Font Awesome icons, add the following line inside the <head> section of your HTML page:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

To use the Bootstrap glyphicons, add the following line inside the <head> section of your HTML page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

To use the Google icons, add the following line inside the <head> section of your HTML page:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

The four links states are:

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

Link Button Example:
a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;}

a:hover, a:active {
    background-color: red;}

Add a container element (like <div>) with overflow-x:auto around the <table> element to make it responsive:

Example

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

Web Layout Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 3px solid blue;
}

.clearfix {
    overflow: auto;
}

nav {
    float: left;
    width: 200px;
    border: 3px solid #73AD21;
}

section {
    margin-left: 206px;
    border: 3px solid red;
}
</style>
</head>
<body>

<div class="clearfix">

<nav>
<span>nav</span>
    <ul>
      <li><a target="_blank" href="/default.asp">Home</a></li>
      <li><a target="_blank" href="default.asp">CSS</a></li>
      <li><a target="_blank" href="/html/default.asp">HTML</a></li>
      <li><a target="_blank" href="/js/default.asp">JavaScript</a></li>
    </ul>
</nav>

<section>
    <span>section</span>
    <p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p>
</section>

<section>
    <span>section</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.</p>
</section>

</div>

</body>
</html>

Center an image:
img {
    display: block;
    margin: auto;
    width: 40%;
}

Animation Example:

@keyframes example {
from {background-color: red;}
to {background-color: yellow;}

div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
animation-direction: alternate;
animation-iteration-count: 3; <--- can also be "infinite"
animation-timing-function: linear/ease/ease-in/ease-out/ease-in-out;
}

short cut:
div {
animation: example 5s linear 2s infinite alternate;
}

maandag 10 oktober 2016

Drag and drop example

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">

</body>
</html>

How to add a video to your webpage

<!DOCTYPE html>
<html>
<body>

<div style="text-align:left">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br><br>
<video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
</video>
</div>

<script>
var myVideo = document.getElementById("video1");

function playPause() {
    if (myVideo.paused)
        myVideo.play();
    else
        myVideo.pause();
}

function makeBig() {
    myVideo.width = 560;
}

function makeSmall() {
    myVideo.width = 320;
}

function makeNormal() {
    myVideo.width = 420;
}
</script>

<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>
</body>
</html>

Sample HTML5

<!doctype html>

<head>
<title>Page Title</title>

</head>

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>

</body>

Table Example:

<table>
<tr>
    <th>Name</th>
    <th>Description</th>
</tr>
<tr>
    <td>A</td>
    <td>Description of A</td>
</tr>
<tr>
    <td>B</td>
    <td>Description of B</td>
</tr>
</table>

List Example:

<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>

unordered lists (<ul>) - the list items are marked with bullets
ordered lists (<ol>) - the list items are marked with numbers or letters

Img Example:

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Video Example:

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Audio Example:

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

see more: http://www.w3schools.com/tags/ref_av_dom.asp

Youtube Video Example:

How to make google map on your webpage

<!DOCTYPE html>
<html>
<body>

<h1>My First Google Map</h1>

<div id="map" style="width:400px;height:400px">
function myMap() {
    var mapOptions = {
        center: new google.maps.LatLng(51.5, -0.12),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}

</body>
<html>

Read more on: http://www.w3schools.com/graphics/google_maps_intro.asp