Web Design Tips and Tricks

Computing the new average by going over the entire box for each pixel is obviously wrong.. you should subtract the edge column that's leaving and add the one that's entering the box.. but, at least, it works 😊 https://codepen.io/chipdesigner/pen/YzONwOo function doBlur(){   var w = img.getWidth();   var h = img.getHeight();   var x,y;   var imgBlur = new SimpleImage(width=img.getWidth(), height=img.getHeight());   var p, pb, pij, avgR,avgG,avgB,total;   for( p of img.values() ){     avgR = 0;     avgG = 0;     avgB = 0;     total = 0;     x = p.getX();     y = p.getY();     for( let i = Math.max(0,x-BOX); i <= Math.min(w-1,x+BOX);i++ ){       for( let j = Math.max(0,y-BOX); j <= Math.min(h-1,y+BOX);j++){         pij = img.getPixel(i,j);         avgR += pij.getRed();         avgG += pij.getGreen();   ...

https://stackoverflow.com/questions/2805977/how-do-i-call-a-javascript-function-after-selecting-a-file-from-the-select-file I have a file input element < input type = "file" id = "fileid" > How do I call a JavaScript function after selecting a file from the dialog window and closing it? Yikes! No answer marked right and the most upvoted says : jQuery ("input#fileid") .change (function () { alert (jQuery(this) .val ()) }); I say : OMG All you need to do is  <input type="file" onchange="calledFunction()"> FYI, to use the Duke Javascript Library , in your HTML (say in Codepen) : <script src="http://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js"> </script> What they didn't do a terrific job of covering in the course (or their documentation) : whether SimpleImage objects can be passed to/from functions? Ans : Yes, just do var name_of_var = function_that_returns_SimpleImage(args...

Another priceless one - a must do every few weeks. With practice, you should be able to build this one in about five minutes of coding - that's what it'll take to reach an elite level. Ok, I hadn't gotten the width-setting right at this point - because I hadn't yet used onchange="functionName()" . It's really simple - I thought you needed something elaborate (like this ) to be able to process the text-field when ENTER was pressed. But, no. You only need that to do a Google-suggest kind of autocomplete function.. To send the field value, functionName(this.value) . Powerful stuff :) Be sure to use input validation - check that the text field is numeric. https://codepen.io/chipdesigner/pen/poONPrQ

How do you add a wikipedia style tooltip to a link in a blogger blog post? From the oracle : To add a Wikipedia-style tooltip to a link in a Blogger blog post, you can use a JavaScript library called "Opentip". Here are the steps to do it: First, you need to add the Opentip JavaScript library to your Blogger blog. You can do this by adding the following code to the HTML of your blog template, just before the </head> tag: html Copy code < script src = "https://cdnjs.cloudflare.com/ajax/libs/opentip/2.4.6/opentip-native.min.js" > </ script > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/opentip/2.4.6/opentip-native.min.css" > Next, you need to add a class to the links that you want to add the tooltip to. You can do this by adding the following code to the HTML of your blog post: html Copy code < a href = "#" class = "tooltip" data-ot = "Tooltip text" > Li...

This ( PDF ) is one of those that I think you should build completely from memory (Google/chatGPT fair game) every few weeks to stay sharp - if you're into web that is.. If you're only using the course to satisfy a pre-req for getting into software architecture, that's a different thing.. https://codepen.io/chipdesigner/pen/YzOGBGp I added the extra-credit feature and even went beyond, but I didn't think in terms of a software product. If you just add code, then how can you charge for an additional license for the new feature? 😊 Meaning, you need to add the feature in a smart, modular way. Ja? How do you change the onclick value of a button when you're passing an argument (if not passing, you just do whatever.onclick=nameoffunc; // no quotes or () Ans : whatever.onclick= function() { nameoffunc( arg );}; For submitting a text-field when ENTER is pressed :  Thanks :  https://stackoverflow.com/questions/16011312/how-can-i-execute-a-function-on-pressing-the-enter-key...

Desired behavior : About button pressed : display text and change onclick to clear() (button text also changed) Clear (same button) pressed : go back to being ready for About to be pressed (onclick changed back to about() ) Using : <input id="aboutButton" type="button" onclick='doAbout()' value="About"> and function doAbout() {   document.getElementById("divabout").innerHTML = "by Ananth Chellappa<br>One Hour Design<br>Your questions answered within the hour";   document.getElementById("divabout").className="aboutcolor";   document.getElementById("aboutButton").onclick="clearAbout()";   document.getElementById("aboutButton").value="Clear"; } function clearAbout() {   document.getElementById("divabout").innerHTML = "";   document.getElementById("divabout").className="aboutcolor";   document.getElementById("ab...

Why? Say you want to display a rating - four stars, but how do you indicate that the rating is not the highest? Exactly, so you want that whitespace at the end! <td><span>**** </span></td> And the CSS : span {   background-color : yellow;   white-space : pre;   font-family : "courier"; }