Blog of Wei-Hsiung Huang: HTML

Showing posts with label HTML. Show all posts

2019/10/06

A bare minimum, working HTML + jQuery framework that will be executed automatically upon the completion of page load.

This is a bare minimum, working HTML + jQuery framework that will be executed automatically upon the completion of page load.

index.html

<!DOCTYPE html>

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> -->
        <!-- script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
    </head>
    
    <body>
    </body>
</html>

<script>

    $(document).ready(function(){
        
        console.log('Hello World');
        alert('Hello Kitty');
      
    });
    
</script>

The Result

2018/02/05

How to get the ID of the clicked button using JavaScript

This post is about how to get the ID of the clicked button using JavaScript.

The Code

<!DOCTYPE html>
<html>
    <body>

        <button id="1" onClick="reply_click(this.id)">B1</button>
        <button id="2" onClick="reply_click(this.id)">B2</button>
        <button id="3" onClick="reply_click(this.id)">B3</button>

    <script type="text/javascript">
        function reply_click(clicked_id)
        {
            alert(clicked_id);
        }
    </script>
    </body>
</html>

The Result

Reference:

JavaScript - onClick to get the ID of the clicked button
https://stackoverflow.com/questions/4825295/javascript-onclick-to-get-the-id-of-the-clicked-button

2017/03/27

How to sort multi-dimensional arrays in JavaScript

This is a continuation of my previous post on How to create a line chart using Chart.js and the data parsed from a CSV string using Papa Parse. In the previous post, the x-axis is not in ascending order (see below photo). This post will address this issue by sorting the data in the desired order before making the chart.

How to create a line chart using Chart.js and the data parsed from a CSV string using Papa Parse

This is a quick summary about how to create a line chart using Chart.js and the data parsed from a CSV string using Papa Parse.

How to create a simple line chart using Chart.js

Here is a quick example of how to make a line chart using Chart.js.

Code

How to turn JSFiddle example into standalone code

This post is about how to turn JSFiddle example into standalone code.

Source: https://jsfiddle.net/red_stapler/mfvmoy64/

How to get the selected option in a drop down list

This post is about how to get the selected option in a drop down list. The source of the code is at https://www.w3schools.com/js/tryit.asp?filename=try_dom_select_option.

Code

Working with cookies

This is a quick summary of how to work with cookies.

The code below is from https://www.w3schools.com/js/js_cookies.asp.

How to get input text field using HTML and JavaScript

This is a quick example of how to get the input value from the input text filed, display it and reset it back to the original content.

Code

How to use swipe gestures to change webpages

The original post of is at http://stackoverflow.com/questions/23797331/using-swipe-gestures-to-change-pages-in-multi-page-jquery-mobile-application.

Note that because of minor differences, the code at http://jsfiddle.net/Gajotres/JB22E/3/ doesn't work. The code below is from the stackoverflow post and has been tested to work.

How to get input from check boxes and toggle switches

This post is about how to get the input value from check boxes and toggle switches.

Getting the input from check boxes

HTML & CSS Tips - How to vertically align text and image inside a paragraph

This post is about how to vertically align text and image inside a paragraph <p>.

Notes for JavaScript Tutorial for Beginners - Traversing The DOM

The 12 different HTML DOM node types

Source: http://www.w3schools.com/jsref/prop_node_nodetype.asp

Notes for JavaScript Tutorial for Beginners - Create Attribute

The source of this post is from "JavaScript Tutorial for Beginners - 39 - Create attribute" located at
https://youtu.be/FbcB8CroByk?list=PLr6-GrHUlVf96NLj3PQq-tmEB6woZjwEl

Notes for JavaScript Tutorial for Beginners - Adding / Removing Elements Programmatically

The note in this post cover section 36 to 38 of the JavaScript Tutorial for Beginners.

Adding Elements

The photo below shows how a web page is structured.

Notes for JavaScript Tutorial for Beginners - Section 1 to 35

Here I put my notes for section 1 to 35 of the "JavaScript Tutorial for Beginners" on Youtube.

Typical HTML Template

<!DOCTYPE html>

<html>
 
<head> 
<script>


</script>
</head>

<body>

</body>

</html>

Blog of Wei-Hsiung Huang

Pages

2019/10/06

A bare minimum, working HTML + jQuery framework that will be executed automatically upon the completion of page load.

2018/02/05

How to get the ID of the clicked button using JavaScript

2017/03/27

How to sort multi-dimensional arrays in JavaScript

How to create a line chart using Chart.js and the data parsed from a CSV string using Papa Parse

2017/03/26

How to create a simple line chart using Chart.js

2017/03/25

How to turn JSFiddle example into standalone code

2017/03/08

How to get the selected option in a drop down list

Working with cookies

How to get input text field using HTML and JavaScript

2017/03/07

How to use swipe gestures to change webpages

2016/12/06

How to get input from check boxes and toggle switches

2016/11/19

HTML & CSS Tips - How to vertically align text and image inside a paragraph

2016/11/13

Notes for JavaScript Tutorial for Beginners - Traversing The DOM

2016/11/11

Notes for JavaScript Tutorial for Beginners - Create Attribute

Notes for JavaScript Tutorial for Beginners - Adding / Removing Elements Programmatically

2016/11/10

Notes for JavaScript Tutorial for Beginners - Section 1 to 35

Popular Posts

My Links