Show pageOld revisionsBacklinksBack to top This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. ====== Use custom Font in web ====== * convert tff font to webfont: * https://www.fontsquirrel.com/tools/webfont-generator * use Expert > no subset for full character usage, like non English font * define font face in css 1st line <code css> @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'; } </code> ===== HTML5 Standards ===== <code> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> </body> </html> </code> * html5 tag attribute reference: https://www.w3schools.com/tags/ref_attributes.asp ====== 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 ====== * my notes on [[[[devwiki:bootstrap|bootstrap 3]] * bootstrap (twitter): http://getbootstrap.com/getting-started/#download * with built-in UI elements, 12 grid scaffolding * amazium (less) * 960 grid into 1200 grid * 960 grid system -> unsemantic (sass) * 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 * in SASS, variable support, nesting **HTML pre-processor** * hammer? **javascript pre-processor** * coffeescript to read about web * http://bradfrost.github.io/this-is-responsive * http://browserstack.com Done: * PACKT Responsive Web Design From Concept to Complete Site <code> 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 </code> example <code> 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 </code> ====== HTML5 Elements (Widgets) ====== **Video** * code for video <code html> <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> </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 ====== * no flash, no video, just interactive graphics purely in HTML5, and with 3D as well Tutorial * Intro to charts and canvas: http://www.script-tutorials.com/html5-charts-and-graphs/ Resource * list of HTML5 chats library * http://www.webresourcesdepot.com/category/goodies/charts/ * http://mag.splashnology.com/article/15-awesome-free-javascript-charts/325/ * social visualization : http://readwrite.com/2008/03/13/the_best_tools_for_visualization#awesm=~oHD0na5GWy5jvS * D3 data driven graph library: http://d3js.org/ * arbor.js a graph visualization library: http://arborjs.org/ * yFile, a diagram library: http://www.yworks.com/en/products_yfileshtml_about.html * Neo4j, Graph Database * http://www.neo4j.org/ * demo: http://www.youtube.com/watch?v=h1OIUnqRjH4 * a cloud service based on easy infograph building: https://www.kickstarter.com/projects/trinachi/infoactive-drop-live-data-into-interactive-infogra Reference * advanced feature of HTML5s: * http://webdesignledger.com/inspiration/12-fun-clever-examples-of-html5 * http://www.chromeexperiments.com/ * http://www.brianmokeefe.com/html5_graph * http://updates.html5rocks.com/ * HTML5 api: http://www.w3.org/TR/html5/embedded-content-0.html App * online HTML5 3D graph plot: http://www.graphycalc.com * online 3D card folder: http://caa1211.github.io/webOAcard/?m=castle * online 3D ship viewer: http://www.eveonline.com/universe/spaceships/avatar/ * social network lined canvas: http://9elements.com/io/projects/html5/canvas/ Simulation * http://codepen.io/suffick/pen/KrAwx ====== Web GL ====== * a Japanese ref site: http://wgld.org/ ====== Javascript for Web ====== ===== Style related operation ===== * toggle class with jquery: http://www.w3schools.com/jquery/html_toggleclass.asp * toggle class without jquery: * http://codepen.io/qualitydixon/pen/GoeOOP * <code javascript> 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"); } } </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> devwiki/html.txt Last modified: 2023/02/07 18:21by ying