---
# System prepended metadata

title: Notes for HTML/CSS/JavaScript
tags: [webpage, thesis, jptw, technology, html/css/js]

---

###### tags: `jptw` `thesis` `technology` `html/css/js` `webpage`
# Notes for HTML/CSS/JavaScript

## Waveform & Spectrogram
**Framework** | [wavesurfer.js](https://wavesurfer-js.org/)
![](https://i.imgur.com/R4JNTc8.png)

```javascript
var wavesurfer = WaveSurfer.create({
    // your options here
    plugins: [
        WaveSurfer.spectrogram.create({
            wavesurfer: wavesurfer,
            container: "#wave-spectrogram",
            labels: true
        })
    ]
});

wavesurfer.load('../media/demo.wav');
```
> Tutorial:
> [1] [wavesurfer.js + Spectrogram](http://wavesurfer-js.org/example/spectrogram/index.html)
> [2] [WaveSurfer.js - spectrogram with frequency labels](https://www.codeseek.co/entonbiba/wavesurfer-js---spectrogram-with-frequency-labels-Bpmqrq)


## Select Box
![](https://i.imgur.com/d2viAbw.png)
> Ref: [How TO - Custom Select Box](https://www.w3schools.com/howto/howto_custom_select.asp)


## Button "Close" upon Hover
```html
<div class="hide-button"><a href="#">x</a></div>
```
```css
.hide-button {
    float: right;
    margin-top: -13px;
    font-size: 11px;
    font-family: helvetica;
    color: tray;
    display: none;
}
```
> Ref: [Displaying a “close” icon upon hover](https://stackoverflow.com/questions/6879823/displaying-a-close-icon-upon-hover)


## Read YAML File
**Module** | [nodeca/js-yaml](https://github.com/nodeca/js-yaml)
```javascript
(function () {
"use strict";
    $(document).ready(function () {
        $.get('/common/resources/LessonContentsLv01Ln01.yml')
        .done(function (data) {
          console.log('File load complete');
          console.log(jsyaml.load(data));
          var jsonString = JSON.stringify(data);
          console.log(jsonString);
          console.log($.parseJSON(jsonString));
      });
    });
}());
```
> Ref:
> [1] [Reading from YAML File in Javascript](https://stackoverflow.com/questions/13785364/reading-from-yaml-file-in-javascript/22671960)
> [2] [JavaScript YAML Parser](https://stackoverflow.com/questions/4335804/javascript-yaml-parser)


## Resizable DIV
Make element resizeable
```css
.resizeable {
  resize: both;
  overflow: auto;
  border: 2px solid black;
}
```
Detect dimension changed
```html
<script src="css-element-queries/src/ResizeSensor.js"></script>
<script src="css-element-queries/src/ElementQueries.js"></script>
```
```javascript
new ResizeSensor(jQuery('#divId'), function(){ 
    console.log('content dimension changed');
});
```
> Ref:
> [1] [How can I resize a DIV by dragging just ONE side of it?](https://stackoverflow.com/questions/6219031/how-can-i-resize-a-div-by-dragging-just-one-side-of-it)
> [2] [How to detect DIV's dimension changed?](https://stackoverflow.com/questions/6492683/how-to-detect-divs-dimension-changed)
> [3] [CSS-Element-Queries-ResizeSensor](http://marcj.github.io/css-element-queries/)


## Others
[1] [Convert css width string to regular number](https://stackoverflow.com/questions/3530127/convert-css-width-string-to-regular-number)
```javascript
var width = parseInt(element.style.width,10); // always use a radix
```
[2] [SASS教學 ＋SCSS：CSS 再進化，掌握語法攻略！](https://frankknow.com/sass-tutorial/)

[3] [Notes for JavaScript | Cosine](/@ahglab/thesis-tech-js)
[4] [Frontend Bookmarks | Cosine](/@cosine/bookmark-frontend)