devwiki:html

Use custom Font in web

  • convert tff font to webfont:
  • define font face in css 1st line
    @font-face {
        font-family: 'theFontNameHere';
        src: url('theFontNameHere-webfont.woff2') format('woff2'),
             url('theFontNameHere-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
     
    }
    body.CN{
            font-family: 'theFontNameHere';
    }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>

Problem and Solution

css file not loading

  • problem: some css file loaded while some not
  • solution: make sure no number in theCSSName.css

Responsive Design

Responsive Elements

CSS Pre-processor

  • SASS/SCSS/LESS likes, it turns what you write into a css code
    • in SASS, variable support, nesting

HTML pre-processor

  • hammer?

javascript pre-processor

  • coffeescript

to read about web

Done:

  • PACKT Responsive Web Design From Concept to Complete Site
https://www.youtube.com/watch?v=R52AsglN0DE
https://colorlib.com/wp/html5-one-page-website-templates/
https://colorlib.com/wp/one-page-website-templates/
https://onepagelove.com/tag/html5
https://html5up.net/fractal
https://designscrazed.org/flat-onepage-responsive-html5-templates/
https://designscrazed.org/free-responsive-html5-css3-templates/
http://www.informit.com/articles/article.aspx?p=1405555&seqNum=4
https://www.youtube.com/watch?v=FqMIyTH9wSg
https://www.youtube.com/watch?v=gxM1XErjMrc
https://www.youtube.com/watch?v=topjvXzjdYM
https://www.youtube.com/results?sp=SBTqAwA%253D&q=fast+way+to+build+cross+platform+mobile+app
https://www.youtube.com/channel/UCGp1zoGrCqT54f32L6tGgqg/videos
https://www.youtube.com/watch?v=A6Jq7NVBVxU
https://www.youtube.com/watch?v=KBPIRen9ABI
https://www.youtube.com/watch?v=sCnGSOaaZFo
https://www.youtube.com/watch?v=C-UwOWB9Io4
https://www.youtube.com/watch?v=jbopML8dnqg
https://www.youtube.com/watch?v=PE81fyfEJUA

example

http://preview.themeforest.net/item/definity-multipurpose-onemulti-page-template/full_screen_preview/12379946?ref=cirvitis
http://www.octarinethemes.com/demos/definity/#multipage
http://www.octarinethemes.com/demos/definity/index-fs-slider-mp.html
http://www.octarinethemes.com/demos/definity/index-fs-video-mp.html
http://www.octarinethemes.com/demos/definity/index-kenburn-mp.html
http://www.octarinethemes.com/demos/definity/index-fw-slider-mp.html
http://www.octarinethemes.com/demos/definity/index-animated-mp.html
http://www.octarinethemes.com/demos/definity/index-fw-video-mp.html
http://www.octarinethemes.com/demos/definity/index-text-mp.html
http://www.octarinethemes.com/demos/definity/index-freelancer-mp.html
http://www.octarinethemes.com/demos/definity/index-agency-mp.html
http://www.octarinethemes.com/demos/definity/index-agency2-mp.html
http://www.octarinethemes.com/demos/definity/#onepage
http://www.octarinethemes.com/demos/definity/#speciality

HTML5 Elements (Widgets)

Video

  • code for video
    <style>
    video#bgcover{ 
      min-width:100%; min-height:100%; 
      width: auto; height:auto; 
      background: url(./image/my_video.png) no-repeat;
      background-size: cover;
    </style>
     
    <!-- if no poster, it will loop -->
    <video id='bgcover' autoplay poster='./image/my_video.png'>
      <source  src='./image/my_video.ogv' type='video/ogv' />
      <source  src='./image/my_video.webm' type='video/webm' />
      <source  src='./image/my_video.mp4' type='video/mp4' />
    </video>

center image in div

  • horizontal center image, just put div text-align as center
    .div_name{ text-align: center; } 
  • another way is to put image to respond to div center, margin itself, and it need to be block not inline to have margin
    .img_name{ margin: auto; display: block;} 
  • 3rd method is to use latest div tech, flex, put div as flex
    .div_name{
        display: flex;
        justify-content: center;
    }
  • in 3rd method, as it is like hbox default, those elements inside div is like widget in UI, to align those widgets together, set align-items in .div_name
    .div_name{
        display: flex;
        justify-content: center;
        align-items: center; /* flex-start: align top, flex-end: align btm; */
    }

HTML 5 - Interactive Charts and Canvas

Web GL

Javascript for Web

  • toggle class without jquery:
    • function toggleColor() {
        var myButtonClasses = document.getElementById("btn1").classList;
       
        if (myButtonClasses.contains("blue")) {
          myButtonClasses.remove("blue");
        } else {
          myButtonClasses.add("blue");
        }
        if (myButtonClasses.contains("red")) {
          myButtonClasses.remove("red");
        } else {
          myButtonClasses.add("red");
        }
      }
  • problem: when select dropdown, the select focus still stuck on the dropdown list, (when you press arrow key)
  • solution: to remove focus after choose, add onchange event and remove its focus
    const choice_input = document.querySelector(".my_choice")
    choice_input.onchange = function(event){
    choice_input.blur() // remove focus from this input
    }
    // also if you have onload function, you can add this to onload to reset last choice when refresh browser
    const tmp_choice_input= document.querySelector(".my_choice")
    tmp_choice_input.selectedIndex = "0";
  • devwiki/html.txt
  • Last modified: 2023/02/07 18:21
  • by ying