Jump to content

AARRGGHHH

Members
  • Posts

    74
  • Joined

  • Last visited

Everything posted by AARRGGHHH

  1. I have been away from programming for quite a while due to health issues. I have an image editing page written in HTML5, CSS3, and JavaScript. No additional libraries. I believe I used the HTML5 API to create Save As JPEG with a quality setting or Save As PNG. This works fine on laptops and desktops and works fine on Android. It does not work on iPhone. IIRC, there is now a way for this to work on iPhone/iOS. How do I go about doing this? If I am incorrect and there is not a new method, what work arounds are available? Currently, the edited image opens in a new tab, and the user has to tap the image and then tap “save to photos”. Is there a less awkward work around? I know, I’m tired and rusty. So, thank you very much!
  2. Okay, makes sense. I'm guessing the "element inspector" is part of one of the major browser's troubleshooter. Which browser uses it? Where do I find it? Thank you!
  3. function hideElements() { document.getElementById('div1').style.display = "block"; document.getElementById('div2').style.display = "none"; document.getElementById('div3').style.display = "none"; document.getElementById('div4').style.display = "none"; document.getElementById('div5').style.display = "none"; hideScreenElements(); } How do I get the div that I'm hiding to stop taking up space when style.display = none? It's throwing off the vertical placement of a video beneath the divs that are set to none. Thank you
  4. I'm fairly certain that I tried that but I'll try it again to see what happens. Thanks
  5. Accomplished what I wanted with CSS Animation: <style> p {text-align: center;} #span0 { animation: animate 8s; animation-iteration-count: 1; } @keyframes animate { from {color: rgb(255,128,64);} to {color: black;} } </style> <div id="div0" style.display = "block";> <span id="span0">QUOTE GOES HERE</span><br><br> </div> But I am curious as to why I was unable to get it to work using the JavaScript setTimeout() function. If anyone knows, please share the knowledge! Thank you
  6. When I step through this, it never changes to black. It just stays red. <body onload = "hideQuote0();"> <script> function hideQuote0() { document.getElementById("span0").color = "rgb(255,0,0)"; setTimeout(hideQuote1(), 3000); } function hideQuote1() { document.getElementById("span0").color = "rgb(128,0,0)"; setTimeout(hideQuote2(), 3000); } function hideQuote2() { document.getElementById("span0").color = "rgb(0,0,0)"; } </script> <div id="div0" style.display = "block";> <span id="span0" color: rgb(0,0,0);> QUOTE GOES HERE </span><br><br> </div> ... </body> Thank you very much
  7. Okay, thank you very much The quotes in the parenthesis, is this correct?
  8. I appreciate your reply. I didn't quite catch what you meant by the above, can I ask you to clarify "looping through index's"? In regard to my "syntax error", if I understand correctly, the syntax and quotes are fine, the problem is the placement of the script in the "<head></head> area, correct? Thank you very much
  9. I don't recall ever having a problem with that. Are you saying that this code should be in the <body> and not the <head>? Are the quotes correct? Thank you very much
  10. for (i = 1; i = 5; i++) { document.getElementById("" + i + "").style.display = "none"; } Error: Uncaught TypeError: Cannot read properties of null (reading 'style') I'm going to have to write out all 5 lines of code because the loop won't work. So that this does not happen again, I'd appreciate if someone could tell me what rookie mistake I made. The quotes don't look right but nothing I tried fixed the error. Thank you!
  11. Did I mention "rusty"? for (var getHEX = 1; getHEX < 4; getHEX++) Thank you so much, Ingolme. If I hadn't already shaved my head, I would've been pulling my hair out over this one.
  12. I am rusty beyond words. This is selecting a random color in hexadecimal. Instead of selecting three colors (like #FF8000)(orange) the loop never ends, and the page is never able to load. It just keeps making that hex color code longer (#FF8080FCAD694897... etc...). Apologies for the somewhat amateurish question. // Use random number to select primary and secondary colors var color = Math.floor((Math.random() * 8) + 1); if (color == 1) copy.style.stroke = "#FF0000"; // red if (color == 2) copy.style.stroke = "#FF8000"; // orange if (color == 3) copy.style.stroke = "#FFFF00"; // yellow if (color == 4) copy.style.stroke = "#00FF00"; // green if (color == 5) copy.style.stroke = "#0080FF"; // blue if (color == 6) copy.style.stroke = "#FF00FF"; // purple if (color == 7) copy.style.stroke = "#FFFFFF"; // white // Add some random colors. var hexString = "#"; if (color == 8) { // generate random color var min = 128; var max = 255; var range = 1 + max - min; for (var getHEX = 1; getHEX = 3; getHEX++) { var randomNumber = Math.floor(Math.random() * range + min); // Convert to hex randomNumber = randomNumber.toString(16); // Concatenate until I have a color for all three color channels hexString = hexString + randomNumber; // It should exit here. But it doesn't. It goes into an infinite loop creating an endless string of hex codes... }; copy.style.stroke = hexString; };
  13. I didn't know toString() could change base. That's VERY informative. As is choosing a random between two numbers. I was going about it entirely the wrong way. Thank you very much!
  14. I need to create a random number between two numbers. For example, between 64 and 255. I then need to convert that number to hex. Assistance is appreciated. Thank you!
  15. Once again, thank you very much! "querySelector" and "cloneNode" definitely were not covered in my college JavaScript class! :-)
  16. That worked fine (as you know!) thank you. What I'm trying to do here is create a lot of rectangles. I thought it would be a simple issue of iteration: <script> var rect = document.querySelector(".rect"); for (count = 1; count < 1001; count++) { rect.style.left = String( Math.floor(Math.random() * 101)) + "vw"; rect.style.top = String( Math.floor(Math.random() * 101)) + "vh"; } </script> But, as you've probably guessed, each rectangle is replacing the previous rectangle. So when the loop ends, there's only one rectangle. How do I get the rectangles to stay put as the loop runs? I tried using an array (I may have declared it wrong) as that just produced an error. <script> const rect = [document.querySelector(".rect")]; for (count = 1; count < 1001; count++) { rect.style.left = String( Math.floor(Math.random() * 101)) + "vw"; rect.style.top = String( Math.floor(Math.random() * 101)) + "vh"; } </script> // ERROR: "Uncaught TypeError: Cannot set properties of undefined (setting 'left')" I'm part new to drawing on the page and part rusty beyond description. This part of the code just seems like it should be easy. But I'm lost. I truly appreciate your help! Thanks
  17. I'm a former Go Daddy customer and plan on keeping it that way. I've contacted justhost, but they seem to only offer yearly billing. Suggestions are welcomed. Thank you
  18. Simple question: where is the file manager (what is the URL)? SEVEN emails so far and I still have not received an answer. I've always been happy with w3Schools and this forum, but it seems w3Spaces tech support needs a lot of work.
  19. I tend to lean toward PNG as well, since the compression is lossless (no data is lost). One observation worth noting is that PNG basically assumes your visitor is using broadband (most people are), since PNG images can be too large for slow connections. JPG is certainly still usable, providing you choose your settings wisely. A quality setting of 80 to 95 is usually best, less than 80 tends to produce poor results, greater than 95 is unnecessary, since it tends to increase file size without improving quality. If you have hard edges in your image, such as text, be sure to turn subsampling OFF (sometimes called "444"). Subsampling compresses by averaging color values of neighboring pixels, if an image has hard edges, such as text on a background, the neighboring pixels may have very different color values, averaging those values will produce artifacts. It always bothered me that Photoshop did not have a subsampling option. I'm not an adobe fan, does anyone know if they ever added that option?
  20. Just to make it more painful: I fixed it last night. Then looked at it half asleep and broke it. And I can't remember how I fixed it.
  21. I'll certainly post that if needed, but I think I found the problem, after stepping through all 700+ lines of code. This line is blocking the SVG filter: if (document.getElementById("cPreview") != null) document.getElementById("cPreview").style.WebkitFilter = "brightness(" + parseInt(percentB) + "%)" + " contrast(" + parseInt(percentC) + "%)" + " hue-rotate(" + parseInt(degrees) + "deg)" + " saturate(" + parseInt(percentS) + "%)"; That line was only there for backwards compatibility with older browsers. Commenting that line blocks the CSS filters (brightness, contrast, etc..) but allows the SVG to work. If I change style.WebKitFilter to style.filter, the CSS filters work, but the SVG stops working. So the question becomes how do I add the SVG filter to that line of code? I tried this with no luck: if (document.getElementById("cPreview") != null) document.getElementById("cPreview").style.filter = "brightness(" + parseInt(percentB) + "%)" + " contrast(" + parseInt(percentC) + "%)" + " svgCOLOR(value)" + " saturate(" + parseInt(percentS) + "%)"; Apparently "svgCOLOR(value)" is not the proper way to reference the SVG filter. So... how do I add the SVG filter to that line of code? Thank you!
  22. I'm not sure what you mean by a "use case" example. Please let me know!
  23. Hi Ingolme Thank you once again! I was away for a while due to the holidays and an illness in the family. For some reason, the SVG filter is not being applied to the canvas cPreview, but is being applied to the canvas cSave. Do you have any thoughts on why this may be happening? Here's my code: <style> #cSave { filter: url("#svgCOLOR"); } #cPreview { filter: url("#svgCOLOR"); } </style> <!-- SVG Declaration --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" width="2" height="1"> <defs> <filter id="svgCOLOR"> <!-- Matrix values will eventually be adjustable using a range slider control --> <feColorMatrix type="matrix" values="2 0 0 0 0 0 1 0 0 0 0 0 2 0 0 0 0 0 0 1" /> </filter> </defs> </svg> <!-- CANVAS cPreview --> <canvas id="cPreview" width="2" height="1" style="position:relative; max-width:100%;"></canvas> <!-- CANVAS cSave --> <canvas id="cSave" width="2" height="1" onclick="clickPreview()" style="position:relative; max-width:100%;"></canvas> Thank you!
  24. I've been experimenting with various models for edge detection in an image. Everything I've tried reduces the image to grayscale. How do I perform edge detection with an SVG Sharpen Filter and preserve the image's underlying color? Here's a sample of the effect I'm looking for: Thank you very much!
×
×
  • Create New...