Hybrid app - Connect to local database by SQLite

---o0o---

Original link

1. Install the sqlite plugin
2. Add ngCordova
3. Add SQLitePlugin.js file

1. Install the sqlite plugin

Run command:

ionic plugin add https://github.com/brodysoft/Cordova-SQLitePlugin

When done, in plugins folder add new folder names com.brodysoft.sqlitePlugin

2. Add ngCordova

Download the zip file here

Extract file and put ng-cordova-master\dist\ng-cordova.js or ng-cordova-master\dist\ng-cordova.min.js file in your folder such as www\js

Include ng-cordova.js or ng-cordova.min.js in your index.html file before cordova.js and after your AngularJS / Ionic file (since ngCordova depends on AngularJS).

    
<script src="js/ng-cordova.js"></script>
<script src="cordova.js"></script>
   

3. Add SQLitePlugin.js file

Go https://github.com/brodysoft/Cordova-SQLitePlugin and clone code

Copy SQLitePlugin.js file from Cordova-SQLitePlugin\www folder to in your folder such as www\js

Include SQLitePlugin.js file in your index.html file before everything

    
<script src="js/SQLitePlugin.js"></script>
<script src="lib/ionic/js/ionic.bundle.js">></script>
<script src="js/ng-cordova.js"></script>
<script src="cordova.js"></script>
   

Done, now you can run

• ionic build
• ionic run

Ionic - Button

---o0o---

Original link

1. Button

a) Style for headers

• button class: add default style for button
• display: inline-block are default
• Style for button likes header, choose one of those below class:
  • button-light
  • button-stable
  • button-positive
  • button-calm
  • button-balanced
  • button-energized
  • button-assertive
  • button-royal
  • button-dark

b) Block button

• add button-block class to applies display: block for this button
• A block button will however go 100% of its parent's width

c) Full Width Block Buttons

• add button-full class to applies display: block and removes borders on the left and right, and any border-radius which may be applied for this button
• A block button will however go 100% of its parent's width

d) Other styles

• button-small: for smaller button
• button-large: for larger button
• button-outline: apply an outline button style, which also has a transparent background.
• button-clear: remove the background button color and border

e) Icon Buttons

Add icon for button by add below classes, use icon-right or icon-left to set posion of icon if button has text
• ion-loading-c
• ion-home
• ion-star: for favorites list
• ion-chevron-right: likes > symbol
• ion-chevron-left: likes < symbol, use for back button
• ion-gear-a: use for setting button
• ion-settings
• ion-navicon

f) Button Bar

You can group together button by button-bar class and add style for each button by
• add color class like 'button-light'
• add icon
• ...

			
<div class="button-bar">
	<a class="button">First</a>
	<a class="button">Second</a>
	<a class="button">Third</a>
</div>
			

Ionic CSS

---o0o---

Original link

1. Header

• Headers are fixed regions at the top of a screen
• Can contain:
  • a title label
  • left/rights buttons for navigation or to carry out various actions

a) Style for headers

			
<div class="bar bar-header bar-light">
	<h1 class="title">This is header bar</h1>
</div>
			

• bar: notify that <div> is a bar
• bar-header: notify that bar is in header
• bar-light: style for this header bar
• title: center <h1> in screen

You can change style or color for heardes by choose one of those below classes

• bar-light
• bar-stable
• bar-positive
• bar-calm
• bar-balanced
• bar-energized
• bar-assertive
• bar-royal
• bar-dark

b) Button in headers

Default

<div class="bar bar-header">
	<button class="button icon ion-navicon"></button>
	<h1 class="title">This is header bar</h1>
	<button class="button">Edit</button>
</div>
		

• ion-navicon: add navicon icon
Simple button:
• Add button-icon
• Add button-clear to remove the background button color and border

2. Sub Headers

a) Position of sub headers bar

• Can be placed below the original header bar. That mean, put below class after bar-header <div>
• Use bar-subheader class to defines sub headers

					
<div class="bar bar-subheader">
	<h2 class="title">Sub Header</h2>
</div>
				

3. Footer

• Footers are regions at the bottom of a screen
• Footers have the same color options as the headers

a) Simple footer

			
<div class="bar bar-footer bar-balanced">
	<div class="title">Footer</div>
</div>
			

• bar-footer: notify that bar is in footer
• bar-balanced: style for this footer bar

b) Footer with buttons

If no title is present, you'll need to add pull-right or pull-left classes to set position

<div class="bar bar-footer">
	<button class="button button-clear pull-right">Right</button
</div>
		

If a title, any buttons will automatically be placed on the correct side of the title in relation to how the markup was written

Eclipse Hotkey

---o0o---

Original link

Ctrl + D : xóa dòng tại chứa con trỏ

Ctrl + Y: Redo

Ctrl + F : tìm chuỗi trong class

Ctrl + H : mở nhanh màn hình search

Ctrl + E : nhảy nhanh tới 1 tab trong các tất cả các tab đang mở

Ctrl + W : đóng tab hiện tại

Crtl + Alt + mũi tên lên /xuống: Copy dòng hiện tại lên hoặc xuống

Ctrl + Shift + W : đóng toàn bộ các tab đang mở (trong trường hợp có nhiều tab quá

Ctrl + Shift + C : comment, uncomment một đoạn code

Ctrl + Shift + F : định dạng lại đoạn code theo chuẩn -> nhìn cho nó đẹp

Ctrl + Shift + R: Mở nhanh 1 file

Ctrl + Shift + X: CHUYỂN ĐOẠN ĐƯỢC CHỌN SANG CHỮ HOA

Ctrl + Shift + Y: chuyển đoạn được chọn sang chữ thường

Alt + mũi tên lên/xuống : di chuyển dòng hiện tại lên/xuống

Alt + mũi tên trái/phải : nhảy qua tab bên trái/phải

Ctrl-Shift-L: brings up a List of shortcut keys

See Windows/Preference->General->Keys.

Hybrid App: Ionic Framework + Cordova

---o0o---

Original link

I. Ionic

• Ionic is an HTML5 mobile app development framework targeted at building hybrid mobile apps.
• The bulk of an Ionic app will be written in HTML, Javascript, and CSS.
• Ionic also uses AngularJS for a lot of the core functionality of the framework.

1. Install

a) Git + Consoles2

If you are on Windows, make sure to download and install Git for Windows and optionally Console2.

b) Cordova

To install Cordova, make sure you have Node.js installed, then run

        npm install -g cordova
        npm install -g ionic
    

2. Create the project

        ionic start todo blank
        cd todo && ls
    

For reg ionic acc: https://apps.ionic.io/signup

Login: https://apps.ionic.io/login

Repeating HTML Elements: ng-repeat

---o0o---

Original link

• The ng-repeat directive clones HTML elements once for each item in a collection (in an array).

1. Repeats an array

 
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
 <ul>
  <li ng-repeat="x in names">
   {{ x }}
  </li>
 <ul>
</div>
 

• {{ x }}

2. Repeats an array of objects

 
<div ng-app="" ng-init="names=[
 {name:'Jani',country:'Norway'},
 {name:'Hege',country:'Sweden'},
 {name:'Kai',country:'Denmark'}]">
 <ul>
    <li ng-repeat="x in names">
      {{ x.name + ', ' + x.country }}
    </li>
 <ul>
</div>
 

Result:

• Jani, Norway
• Hege, Sweden
• Kai, Denmark

3. ng-repeat + ng-controller

 
<div ng-app="" ng-controller="namesController">
 <ul>
    <li ng-repeat="x in names">
      {{ x.name + ', ' + x.country }}
    </li>
 <ul>
</div>

<script src="namesController.js"></script>
 

In namesController.js file

 
function namesController($scope) {
 $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
 ];
}
 

Result:

• Jani, Norway
• Hege, Sweden
• Kai, Denmark

AngularJS Controllers: ng-controller

AngularJS Controllers

---o0o---

Original link

1. AngularJS Controllers

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
	First Name: <input type="text" ng-model="firstName"><br>
	Last Name: <input type="text" ng-model="lastName"><br>
	Full Name: {{firstName + " " + lastName}}
</div>

<script>
	var app = angular.module('myApp', []);
	app.controller('myCtrl', function($scope) {
		$scope.firstName = "John";
		$scope.lastName = "Doe";
	});
</script>
	

First Name:
Last Name:
Full Name: {{firstName + " " + lastName}}

• AngularJS applications are controlled by controllers.
• AngularJS Controllers is a JavaScript Object, created by a standard JavaScript object constructor.
• ng-app: Tells AngularJS that the <div> element is the "owner" of an AngularJS application.
• ng-model: binds the value of the input field to the application variable firstName, lastName.
• ng-controller: names the controller object.
• myCtrl function: is a standard JavaScript object constructor. (hàm dựng). Creates two properties (variables) in the scope (firstName and lastName).
• $scope is the application object (the owner of application variables and functions)
• AngularJS will invoke myCtrl with a $scope object.(đối tượng)

a) Internal File

Like above code

b) External Files

	
<div ng-app="myApp" ng-controller="personController">
	First Name: <input type="text" ng-model="firstName"><br>
	Last Name: <input type="text" ng-model="lastName"><br>
	Full Name: {{fullName()}}
</div>
<script src="personController.js"></script>
	

In personController.js file

	
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
	$scope.firstName = "John";
	$scope.lastName = "Doe";
});
	

2. Multiple controllers

	
<div ng-app="myApp">
	<div ng-controller="myCtrl">
		{{firstName + ' ' + lastName}}
	</div>
	<div ng-controller="myCtrl2">
		<ul>
  			<li ng-repeat="x in names">
    			{{ x.name + ', ' + x.country }}
  			</li>
		</ul>
	</div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

app.controller('myCtrl2', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});
</script>
	

Result:

John Doe

• Jani, Norway
• Hege, Sweden
• Kai, Denmark

3. Controller Methods

	
<div ng-app="myApp" ng-controller="personCtrl">
	//First Name: <input type="text" ng-model="firstName">
	//Last Name: <input type="text" ng-model="lastName">
	Full Name: {{fullName()}}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>
	

Result:

Full Name: John Doe

AngularJS Init: ng-init

ng-init

---o0o---

Original link

I. ng-init: Initialize application variables.

1. One variable

	
<div ng-app="" ng-init="firstName='John'">
	<p>The name is <span ng-bind="firstName"></span></p>
</div>
	

The name is

2. Multiple varibles

	
<div ng-app="" ng-init="quantity=1;cost=5">
	

II. AngularJS Expressions

• are written inside double braces: {{ a + b }}.

• binds data to HTML the same way as the ng-bind directive.

  Ex: {{ firstName + " " + lastName }} <=> <span ng-bind="firstName + ' '+ lastName"></span>

• "output" data exactly where the expression is written

	
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
===> My first expression: 10
	

1. AngularJS Numbers

	
<div ng-app="" ng-init="quantity=1;cost=5">
	<p>Total in dollar: {{ quantity * cost }}</p>
</div>
===> Total in dollar: 5
	

2. AngularJS Strings

	
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
	<p>The name is {{ firstName + " " + lastName }}</p>
</div>
===>The name is John Doe
	

3. AngularJS Arrays

	
<div ng-app="" ng-init="points=[1,15,19,2,40]">
	<p>The third result is {{ points[2] }}</p>
</div>
===>The third result is 19
	

4. AngularJS Objects

	
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
	<p>The name is {{ person.lastName }}</p>
</div>
===>The name is Doe
	

5. Object in Array

	
<div ng-app="" ng-init="points=[1,15,{firstName:'John',lastName:'Doe'},2,40]">
	<p>The third result is {{ points[2]}}</p>
	<p>The third result is {{ points[2]['firstName'] }}</p>
</div>
===>The third result is {"firstName":"John","lastName":"Doe"}
===>The third result is John
	

6. Array in Object

	
<div ng-app="" ng-init="person={firstName:'John',lastName:[1,15,19,2,40]}">
	<p>The name is {{ person.lastName }}</p>
	<p>The name is {{ person.lastName[3]}}</p>
</div>
===>The name is [1,15,19,2,40]
===>The name is 2
	

Using ng-init is not very common. You will learn how to initialize data by ng-controllers.

AngularJS: ng-directives

AngularJS

---o0o---

Original link

1. AngularJS

• is a JavaScript framework. It is a library written in JavaScript.
• is distributed as a JavaScript file
• starts automatically when the web page has loaded
• AngularJS can be added to a web page with a script tag

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

• AngularJS extends HTML with ng-directives.

2. ng-directives

• ng-app: defines an AngularJS application.
• ng-model: binds the value of HTML controls (input, select, textarea) to application data.
• ng-bind: binds application data to the HTML view.

Note: You can use data-ng-, instead of ng-, if you want to make your page HTML5 valid.

 
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
Your Name: <span ng-bind="name"></span>
 
 

• ng-app: Tells AngularJS that the <div> element is the "owner" of an AngularJS application.
• ng-model: binds the value of the input field to the application variable name.
• ng-bind: binds the innerHTML of the <p> element to the application variable name.

Please fill input below

Name:

Your Name:

Wordpress - Print Friendly and PDF Button Plugin

---o0o---

https://wordpress.org/plugins/printfriendly/screenshots/

1. Install plugin

Good for project uses Timber plugin

2. Config plugin

3. Fix bug: Images are not showned/printed

Best way to fix is to add class="print-only" to the elements containing content you want included in the print/pdf.
Class="print-only" will force only those elements (and their child elements) to be included in the print/pdf.
If you add to a parent element, and would like to excluded some of the child elements, add class="print-no" to those elements

Set Default Terms for your Custom Taxonomies

Wordpress - Set Default Terms for your Custom Taxonomies

---o0o---

Original link

Set default category for custom post type

            
function mfields_set_default_object_terms( $post_id, $post ) {
    if ( 'publish' === $post->post_status && $post->post_type === 'your_custom_post_type' ) {
        $defaults = array(
            'your_taxonomy_id' => array( 'your_term_slug' )
            //'your_taxonomy_id' => array( 'your_term_slug', 'your_term_slug' )
            );
        $taxonomies = get_object_taxonomies( $post->post_type );
        foreach ( (array) $taxonomies as $taxonomy ) {
            $terms = wp_get_post_terms( $post_id, $taxonomy );
            if ( empty( $terms ) && array_key_exists( $taxonomy, $defaults ) ) {
                wp_set_object_terms( $post_id, $defaults[$taxonomy], $taxonomy );
            }
        }
    }
}
add_action( 'save_post', 'mfields_set_default_object_terms', 100, 2 );
        

Google Maps Overlays

---o0o---

Original link

Overlays are objects on the map that are bound to latitude/longitude coordinates.

Google Maps has several types of overlays:

• Marker - Single locations on a map. Markers can also display custom icon images
• Polyline - Series of straight lines on a map
• Polygon - Series of straight lines on a map, and the shape is "closed"
• Circle and Rectangle
• Info Windows - Displays content within a popup balloon on top of a map
• Custom overlays

1. Add a marker

<script>
    var myCenter = new google.maps.LatLng(51.508742,-0.120850);
    function initialize()
    {
        var mapProp = {
            center:myCenter,
            zoom:5,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

        var marker = new google.maps.Marker({
            position:myCenter,
        });
        marker.setMap(map);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
            

• google.maps.Marker: creat new marker
• marker.setMap(map): add the marker to the map

2. Using icon instead marker

add icon property when creat the marker

var marker = new google.maps.Marker({
    position:myCenter,
    icon:'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Left-Pink-icon.png'
});
            

3. InforWindow

inforWindow's position depend on marker position

var infowindow = new google.maps.InfoWindow({
    content:"Hello World!"
});

infowindow.open(map,marker);
            

4. Set Markers and Open InfoWindow for Each Marker

http://www.w3schools.com/googleAPI/google_maps_events.asp

Wordpress - Creat new theme

---o0o---

1. Create new folder to content theme

wp-content/themes/allegro

wp-content/themes/allegro/style.css

Create style.css file with content as below

/*
Theme Name: Allegro
*/
            

Create file: allegro/index.php

Login Admin => Appearance Tab, new theme named 'Allegro'

Click [Active] button to active this theme

Go to Timber to download Timber plugin

Create folders: allegro/views, allegro/js, allegro/images, allegro/fonts ... to separate files by their function

2. Create html file to show content

a) Create file: allegro/views/base.html with content

<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        {{ wp_head }}

        <link href='{{ template_uri }}/main.css' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

        <link rel="shortcut icon" href="{{ template_uri }}/images/favicon.ico" type="image/x-icon">
        <link rel="icon" href="{{ template_uri }}/images/favicon.ico" type="image/x-icon">
        <meta name="viewport" content="width=device-width, user-scalable=no">

        <script type="text/javascript" src="{{ template_uri }}/js/app.js"></script>
    </head>
    <body>
        <div class="header">

        </div>
        {% block content %}
        {% endblock %}

        <div class="footer">

        </div>
        {{ wp_footer }}
        {% block scripts %}
        {% endblock %}
    </body>
</html>
            

b) in index.php file

<?php
$context = Timber::get_context();
Timber::render('home.html', $context);
            

So create allegro/views/home.html file

{% extends "base.html" %}

{% block content %}
<div class="page">

</div<
{% endblock %}



{% block scripts %}
<script type="text/javascript"<
    jQuery(window).load(function() {
        var newClass = 'home_page';
        jQuery('body').addClass(newClass);
    });
</script<
{% endblock %}

            

3. Note for ubuntu

Display images

chmod - R 777 wp-content/themes/allegro/images/logo.png

4. Create header Menu & footer Menu

In allegro/functions.php file

add_action( 'init', 'register_my_menus' );

function register_my_menus() {
    register_nav_menus(
        array(
          'header-menu' => __( 'Header Menu' ),
          'footer-menu' => __( 'Footer Menu' )
        )
    );
}
            

Call object menu

add_filter('timber_context', 'add_to_context');

function add_to_context($data){
        $data['header_menu'] = new TimberMenu('header-menu');
        $data['footer_menu'] = new TimberMenu('footer-menu');

        return $data;
 }
            

Display menu

In base.html

HEADER MENU
<ul class="menu-items">
    {% for item in header_menu.get_items %}
    <li class="{% if item.current %}current{% endif %} {{ item.class }}">
        <a href="{{ item.get_path }}">{{item.title}}</a>
        {% if item.get_children %}
        <ul class="nav-drop">
            {% for child in item.get_children %}
            <li class="nav-drop-item"><a href="{{child.get_link}}">{{child.title}}</a></li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
</ul>

FOOTER MENU
<ul class="menu-items">
    {% for item in footer_menu.get_items %}
    <li class="{% if item.current %}current{% endif %} {{ item.class }}">
        <a href="{{ item.get_path }}">{{item.title}}</a>
    </li>
    {% endfor %}
</ul>
            

5. Create new post_type width taxonomy

init function

add_action('init', 'create_posttype');
add_action('init', 'create_taxonomies', 0);
            

declaring new post_type named allegro_artist

function create_posttype() {
        //allegro_artist post_type
        register_post_type('allegro_artist', array(
                'labels' => array(
                    'name' => __('Artists'),
                    'singular_name' => __('Artist'),
                ),
                'public' => true,
                'rewrite' => array('slug' => 'artist'),
                'taxonomies' => array('artist_category'),
                'supports' => array('title'),
            )
        );
}
            

declaring new taxonomy like category for allegro_artist post_type

function create_taxonomies() {
    //allegro_artist category
    $labels = array(
        'name' => _x( 'Artists Categories', 'taxonomy general name' ),
        'singular_name' => _x( 'Artists Category', 'taxonomy singular name' ),
        'search_items' =>  __( 'Search Artists Categories' ),
        'all_items' => __( 'All Artists Categories' ),
        'parent_item' => __( 'Parent Artists Category' ),
        'parent_item_colon' => __( 'Parent Artists Category:' ),
        'edit_item' => __( 'Edit Artists Category' ),
        'update_item' => __( 'Update Artists Category' ),
        'add_new_item' => __( 'Add New Artists Category' ),
        'new_item_name' => __( 'New Artists Category' ),
    );

    register_taxonomy('artist_category',array('allegro_artist'), array(
        'hierarchical' => true,
        'labels' => $labels,
        'show_ui' => true,
        'query_var' => true,
        'show_in_nav_menus' => true,
        'show_admin_column' => true,
        'rewrite' => array('slug' => 'artist_category', 'with_front' => false),
    ));
}
            

declaring new taxonomy like tags for allegro_artist post_type

function create_taxonomies() {
    //allegro_artist taxonomy
    $labels = array(
        'name' => __('Artists tags'),
        'singular_name' => __('Artist tag'),
    );

    $args = array(
        'hierarchical' => false,
        'labels' => $labels,
        'show_ui' => true,
        'show_admin_column' => true, //is display in admin colum
        'query_var' => true,
    );

    register_taxonomy('artist_tags', array('allegro_artist'), $args);
}
            

Google Map - Creat a map

Google Map

---o0o---

Original link

I. Creates a Google Map - when the page is loaded

1. Call API

<script src="http://maps.googleapis.com/maps/api/js"></script>
        

2. Init js function to set map properties

<script>
    function initialize() {
        var mapProp = {
            center:new google.maps.LatLng(51.508742,-0.120850),
            zoom:5,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
        

3. Creat div to contain the map

<div id="googleMap" style="width:500px;height:200px;"<>/div>
        

• initialize : Init function
• mapProp: Creat an object to define the properties for the map
• google.maps.Map: Creat new map object which have the mapProp properties
• google.maps.event.addDomListener: Add an event listener to execute the initialize() function when the page is loaded

I. Creates a Google Map - after the page is loaded

1. Creat js function

 <script>
     function init()
     {
         var mapProp = {
             center: new google.maps.LatLng(51.508742,-0.120850),
             zoom:7,
             mapTypeId: google.maps.MapTypeId.ROADMAP
         };
         var map = new google.maps.Map(document.getElementById("googleMap1"),mapProp);
     }

     function loadScript()
     {
         var script = document.createElement("script");
         script.type = "text/javascript";
         script.src = "http://maps.googleapis.com/maps/api/js?callback=init";
         document.body.appendChild(script);
     }
     window.onload = loadScript;
 </script>
        

• The loadScript() function creates the Google Maps API <script> tag
• callback=init: this parameter to execute init() function after the API is fully loaded
• window.onload: load the Google Maps API after the page has fully loaded

JavaScript

---o0o---

Original link

1. Change HTML Content

a) Creat content

<p id="demo">Before.</p>
                

b) Add js to change content

<button type="button" onclick="document.getElementById('demo').innerHTML = 'After'"> Click Me!</button>
                

Before

• getElementById(): accesses the first element with the specified id
• innerHTML: This property sets or returns the HTML content of an element.

---

2. Change HTML Attributes

a) Creat object

<img id="myImage" onclick="changeImage()" src="http://www.w3schools.com/js/pic_bulboff.gif" width="50">
                

b) Add js to change src of image

<script>
    function changeImage() {
        var image = document.getElementById('myImage');
        if (image.src.match("bulbon")) {
            image.src = "http://www.w3schools.com/js/pic_bulboff.gif";
        } else {
            image.src = "http://www.w3schools.com/js/pic_bulbon.gif";
        }
    }
</script>
                

• image.src: get src of image => return a string(http://www.w3schools.com/js/pic_bulboff.gif)
• image.src.match: Search "bulbon" text in above string => return true or false

---

3. Change HTML Styles

a) Creat content

<p id="demo1">Content</p>
                

b) Add js to change style

<script>
    function myFunction1() {
        var x = document.getElementById("demo1");
        x.style.fontSize = "25px";
        x.style.color = "red";
    }
</script>
                

c) Call js by onclick

<p id="demo1" onclick="myFunction1()">Content</p>
                

Click on content to change style

Content

• x.style: Set the style properties of an existing element

4. Validate Data

a) Creat input

<input id="numb" type="number">
            

b) Add js to validate

<script>
    function myFunction2() {
        var x, text;

        // Get the value of the input field with id="numb"
        x = document.getElementById("numb").value;

        // If x is Not a Number or less than one or greater than 10
        if (isNaN(x) || x < 1 || x > 10) {
            text = "Input not valid";
        } else {
            text = "Input OK";
        }
        document.getElementById("demo2").innerHTML = text;
    }
</script>
            

c) Call function

<button type="button" onclick="myFunction2()">Submit</button>
            

d) Print result

<p id="demo2"></p>
            

Please input a number between 1 and 10:

• isNaN(): Check whether a number is an illegal number
• .value: Return the value property
• innerHTML: This property sets or returns the HTML content of an element.

jQuery - div move with page scroll jquery

---o0o---

Original link

1. Creat div

This div move when scroll

            <div id="div">This div move when scroll</div>
        

2. Styled for div

            <style>
                #div {
                    background-color: #fca9a9;
                    width: 100%;
                    height: 50px;
                    line-height: 50px;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            </style>
        

3. Add jQuery

        <script>
            $(window).scroll(function () {
                $('#div').stop().animate({
                    'marginTop': $(window).scrollTop() + 'px',
                    'marginLeft': $(window).scrollLeft() + 'px'
                }, 'slow');
            });
        </script>
        

4. Sample data to see how it works

scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!
scroll!