Differences

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

--- devwiki:html [2021/08/28 07:37] – [css file not loading] ying
+++ devwiki:html [2023/02/07 17:21] – [HTML5 Elements (Widgets)] ying
@@ Line 26: / Line 26: @@
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
@@ Line 51: / Line 52: @@
     * 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**
   * SASS/SCSS/LESS likes, it turns what you write into a css code
@@ Line 128: / Line 143: @@
 </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>
 ====== HTML 5 - Interactive Charts and Canvas ======
@@ Line 192: / Line 217: @@
   }
 }
+</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>