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 [2022/07/08 02:08] – [Responsive Design] ying
@@ Line 51: / Line 51: @@
     * 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 192: / Line 206: @@
   }
 }
+</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>