devwiki:html

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
devwiki:html [2021/08/28 07:37] – [css file not loading] yingdevwiki:html [2023/02/07 18:21] (current) – [HTML5 Elements (Widgets)] ying
Line 26: Line 26:
 <head> <head>
 <meta charset="UTF-8"> <meta charset="UTF-8">
 +<meta name="viewport" content="width=device-width, initial-scale=1">
 </head> </head>
 <body> <body>
Line 51: Line 52:
     * 12 or 16 grid system     * 12 or 16 grid system
  
 +**Responsive Elements**
 +
 +  * responsive image map: 
 +    * image map basic and tool
 +      * https://www.w3schools.com/html/html_images_imagemap.asp
 +      * http://www.htmldrive.net/items/show/704/pure-CSS-Image-Maps
 +      * (works) https://summerstyle.github.io/summer/
 +      * https://www.mobilefish.com/services/image_map/image_map.php
 +    * (works) js method to recalculate map when image resize (need to call when image visible): https://github.com/davidjbradshaw/image-map-resizer
 +    * (not sure, not on attemp) instead map, it use generated svg method: https://imagemapper.noc.io/#/
 +      * https://stackoverflow.com/questions/19484707/how-can-i-make-an-svg-scale-with-its-parent-container
 +      * https://css-tricks.com/scale-svg/
 +    * (similar js but old) https://github.com/stowball/jQuery-rwdImageMaps
 +      * https://researchasahobby.com/responsive-image-clickable-areas-free/
 **CSS Pre-processor** **CSS Pre-processor**
   * SASS/SCSS/LESS likes, it turns what you write into a css code   * SASS/SCSS/LESS likes, it turns what you write into a css code
Line 128: Line 143:
 </code> </code>
  
 +
 +** center image in div**
 +  * horizontal center image, just put div text-align as center <code css>.div_name{ text-align: center; } </code>
 +  * another way is to put image to respond to div center, margin itself, and it need to be block not inline to have margin <code css>.img_name{ margin: auto; display: block;} </code>
 +  * 3rd method is to use latest div tech, flex, put div as flex<code css>
 +.div_name{
 +    display: flex;
 +    justify-content: center;
 +}
 +</code>
 +  * 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 <code css>
 +.div_name{
 +    display: flex;
 +    justify-content: center;
 +    align-items: center; /* flex-start: align top, flex-end: align btm; */
 +}
 +</code>
 ====== HTML 5 - Interactive Charts and Canvas ====== ====== HTML 5 - Interactive Charts and Canvas ======
  
Line 192: Line 224:
   }   }
 } }
 +</code>
 +
 +===== html select dropdown and remove focus =====
 +  * 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 <code javascript>
 +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";
 </code> </code>
  • devwiki/html.1630136246.txt.gz
  • Last modified: 2021/08/28 07:37
  • by ying