Jump to content

AARRGGHHH

Members
  • Content Count

    42
  • Joined

  • Last visited

Community Reputation

0 Neutral

About AARRGGHHH

  • Rank
    Newbie

Recent Profile Visitors

971 profile views
  1. Changing to absolute or block , or removing the position entirely, just creates different problems. There's no way to " Just put it in at the bottom of the page." since the location of the bottom will vary based on screen resolution
  2. This CSS does a good job of keeping the footer at the bottom of a page. https://www.w3schools.com/howto/howto_css_fixed_footer.asp The problem is that the footer is always visible. I'd like the footer to only be visible when the user has scrolled to the bottom of the page. Suggestions? Thank you
  3. AARRGGHHH

    Strange Issue: Canvas will not open in iOS

    No need for concern, this is one I will not forgot! Thank you for the additional info. :)
  4. AARRGGHHH

    Strange Issue: Canvas will not open in iOS

    That was the problem !!! Thank you so much, dsonesuk. The corrected code is below: function click5() { document.getElementById("preview").style.visibility = "visible"; document.getElementById("cPreviewCaption").style = "font-size:90%; font-weight:550; text-align:center; color:#FFFFFF; padding-top:6px;"; //This could also be updated if needed. // Apply change to preview image which will open beneath thumbnails var cP = document.getElementById("cPreview"); var contextP = cP.getContext("2d"); var cO = document.getElementById("cOriginal"); var contextO = cO.getContext("2d"); var imgData = contextO.getImageData(0,0,cO.width,cO.height); var data = imgData.data; //read full size image for (i = 0; i < data.length; i += 4) { red[i] = imgData.data[i]; green[i] = imgData.data[i+1]; blue[i] = imgData.data[i+2]; alpha[i] = imgData.data[i+3]; } //set adjustments represented by user interaction with thumbnails for (i = 0; i < data.length; i += 4) { red[i] = red[i] + finalRedAdjust; if (red[i] < 0) red[i] = 0; if (red[i] > 255) red[i] = 255; green[i] = green[i] + finalGreenAdjust; if (green[i] < 0) green[i] = 0; if (green[i] > 255) green[i] = 255; } //write full size image with adjustments to memory for (i = 0; i < data.length; i += 4) { imgData.data[i] = red[i]; imgData.data[i+1] = green[i]; imgData.data[i+2] = blue[i]; imgData.data[i+3] = alpha[i]; } //write image in memory to canvas contextP.putImageData(imgData, 0, 0); //set new styles - one at a time to keep Mr. Cook happy... document.getElementById('cOriginal').style.borderStyle = "solid"; document.getElementById('cOriginal').style.borderColor = "#C0C0C0 #C0C0C0 #606060 #606060"; document.getElementById('cOriginal').style.visibility = "hidden"; document.getElementById('cOriginal').style.display = "none"; document.getElementById('cPreview').style.borderStyle = "solid"; document.getElementById('cPreview').style.borderColor = "#C0C0C0 #C0C0C0 #606060 #606060"; document.getElementById('cPreview').style.visibility = "visible"; document.getElementById('cPreview').style.display = "block"; //Scroll page to preview image location.hash = "null"; location.hash = "previewAnchor"; } // End Table Click Event Functions Thanks again
  5. AARRGGHHH

    Strange Issue: Canvas will not open in iOS

    I will try that next Ingolme, thank you very much. I have a feeling, since the page is not triggering any errors in the iPhone "Inspector" app, it may not trigger any errors here either. But it's definitely worth a try. Errors like this are how I chose the name AARRGGHHH. 😡
  6. AARRGGHHH

    Strange Issue: Canvas will not open in iOS

    This requires a Mac, correct? Unfortunately, I do not have one. I have run the file on iOS (on my iPhone) in Chrome, Firefox, and Safari, and the problem appears the same in all three browsers. The iOS "Inspector" app, which usually points me in the right direction, shows no errors, and its built in browser (I assume Safari) also displays the same lack of a canvas.
  7. This code works perfectly on a desktop or laptop, and on non-iOS mobile devices. It takes a thumbnail sample of an edited image and displays it at full size in a new canvas. On iOS, I just see a blank screen where the canvas should be. function click5() { document.getElementById("preview").style = "visibility:visible;"; document.getElementById("cPreviewCaption").style = "font-size:90%; font-weight:550; text-align:center; color:#FFFFFF; padding-top:6px;"; // Apply change to preview image which will open beneath thumbnails var cP = document.getElementById("cPreview"); var contextP = cP.getContext("2d"); var cO = document.getElementById("cOriginal"); var contextO = cO.getContext("2d"); var imgData = contextO.getImageData(0,0,cO.width,cO.height); var data = imgData.data; //read full size image //similar image read/write code works fine in another image filter so this does not appear to be the issue for (i = 0; i < data.length; i += 4) { red[i] = imgData.data[i]; green[i] = imgData.data[i+1]; blue[i] = imgData.data[i+2]; alpha[i] = imgData.data[i+3]; } //set adjustments represented by user interaction with thumbnails for (i = 0; i < data.length; i += 4) { red[i] = red[i] + finalRedAdjust; if (red[i] < 0) red[i] = 0; if (red[i] > 255) red[i] = 255; green[i] = green[i] + finalGreenAdjust; if (green[i] < 0) green[i] = 0; if (green[i] > 255) green[i] = 255; } //write full size image with adjustments to memory for (i = 0; i < data.length; i += 4) { imgData.data[i] = red[i]; imgData.data[i+1] = green[i]; imgData.data[i+2] = blue[i]; imgData.data[i+3] = alpha[i]; } //write image in memory to file contextP.putImageData(imgData, 0, 0); //add borders for canvases. document.getElementById('cOriginal').style = "border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060; visibility:hidden; display:none;"; document.getElementById('cPreview').style = "border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060; visibility:visible; display:block;"; //Scroll page to preview image location.hash = "null"; location.hash = "previewAnchor"; } // End Table Click Event Functions I have tried this with small images, so dimensions and file size do not appear to be the issue. Thank you
  8. AARRGGHHH

    Strange Footer Issue

    Amazing, that fixed it. Thank you very much, Ingolme.
  9. AARRGGHHH

    Strange Footer Issue

    I'm having a <footer> issue that I cannot figure out. The footer displays exactly as expected on my desktop at several different resolutions. On my iPhone, sometimes the footer displays normally, and sometimes it displays at a font size of 100% (it should be quite a bit smaller). The part that's confusing me is that all of the pages us identical HTML and CSS code: HTML: </main> <footer> <script>footer()</script> <!-- footer() is in an external .js page so all pages read the same footer() --> </footer> </body> </html> CSS: html { background-color:#000000; width:100%; margin-left:auto; margin-right:auto; } header { background-color:#000000; width:100%; max-width:1024px; margin-left:auto; margin-right:auto; } body { background-color:#000000; width:100%; max-width:1024px; margin-left:auto; margin-right:auto; } nav { background-color:#000000; width:100%; max-width:1024px; margin-left:8px; margin-right:auto; } main { background-color:#000000; width:100%; max-width:1024px; margin-left:auto; margin-right:auto; /* float:right; */ } h1, h2, h3, h4, h5, h6 { font-family:calibri,verdana,arial,sans-serif; color:#938FEB; text-align:center; margin-left:auto; margin-right:auto; } p, form, ul, td { font-family:calibri,verdana,arial,sans-serif; color:#FFFFFF; /* text-align:left; */ } li { font-family:calibri,verdana,arial,sans-serif; color:#FFFFFF; text-align:left; font-weight:bold; } div { font-family:calibri,verdana,arial,sans-serif; color:#FFFFFF; text-align:center; } span { font-family:calibri,verdana,arial,sans-serif; color:#FF0000; text-align:center; } footer { background-color:#000000; width:100%; max-width:1024px; bottom:0; /* float:right; */ /* position:fixed; */ margin-left:auto; margin-right:auto; font-size:10px; font-family:calibri,verdana,arial,sans-serif; color:#FFFFFF; text-align:center; } #wrapper { width:100%; } button { background-color:#8000FF; border:none; border-radius:12px; color:white; padding:12px 24px; text-align:center; text-decoration:none; display:inline-block; font-family:calibri,verdana,arial,sans-serif; font-size:14px; } button:hover { background-color:#CC0000; box-shadow: 10px 10px 10px RGBA(255,255,255,0.8); } a:link { font-family:calibri,verdana,arial,sans-serif; color:#00CCFF; text-decoration:underline; } a:hover { font-family:calibri,verdana,arial,sans-serif; /* color:#00CCFF; */ color:FF0000; } a:visited { font-family:calibri,verdana,arial,sans-serif; /* color:#800080; */ color:#938FEB; } function footer() { document.getElementsByTagName("footer")[0].innerHTML = '<p>Line 1<br>' + 'Line 2<br>' + 'Line 3<br>' + '©2018 Line 4<br></p>'; } I also tried: function footer() { document.getElementsByTagName("footer")[0].innerHTML = '<div>Line 1<br>' + 'Line 2<br>' + 'Line 3<br>' + '©2018 Line 4<br></div>'; } and tried: function footer() { document.write('<div>Line 1.<br>'); document.write('Line 2<br>'); document.write('Line 3<br>'); document.write('©2018 Line 4<br>'); } Yes, I know, the CSS is politically incorrect because I don't use margin and padding. That does not cause this kind of issue. So, how can the same HTML, CSS, and JavaScript cause different pages to print the footer in different ways on the same iPhone? Thank you very much!
  10. AARRGGHHH

    Making unusual navigation work in all screen dimensions

    I have a lot to read through here, but 1 question comes to mind immediately: If I should not use a fixed width for body, could you supply a code sample of the "wrapper container" you suggested? Thank you
  11. AARRGGHHH

    Making unusual navigation work in all screen dimensions

    No, your original suggestion that the CSS is throwing off the alignment is correct. However, the page looks ridiculous without constraining the width. I tried using % instead of pixels and have the same problem. Is there a workaround for controlling page width which will allow me to use my code, which works perfectly, AND keep width control? The offset of the buttons is the concern. At a width of 1366 and an offset of -340, the buttons don't disappear, they're about 10% visible before they animate (that's exactly what I want). By using screen.width, there should be a way to adjust this offset dynamically, so that it's right for any size display. But I can't figure out the math... Interestingly, 1366 (my screen width) - 1024 (my <body> and <main> width = 342. If I use "left: -342;" the result is perfect. But screen.width - 1024 = leftOffset does not work at higher resolutions. A resolution of 1600 requires "left: -460;" a resolution of 1920 requires "left: -620;". So, I still haven't figured out the math needed to adjust for the <body> and <main> width throwing off my left alignment.
  12. AARRGGHHH

    Making unusual navigation work in all screen dimensions

    Hi Here is the relevant HTML: <div id ="container"> <br><br><br><br> <img src="homeSilverGlassText.png" alt="Home" width="200" height="35" id="bar0" onmouseover="startMove(0)" /> <br><br><br><br> <img src="aboutSilverGlassText.png" alt="Anout Me" width="200" height="35" id="bar1" onmouseover="startMove(1)" /> <br><br><br><br> <img src="contactSilverGlassText.png" alt="Contact Me" width="200" height="35" id="bar2" onmouseover="startMove(2)" /> <br><br><br><br> <img src="gallerySilverGlassText.png" alt="Gallery" width="200" height="35" id="bar3" onmouseover="startMove(3)" /> <br><br><br><br> <img src="uiSilverGlassText.png" alt="Design" width="200" height="35" id="bar4" onmouseover="startMove(4)" /> <br><br><br><br> <img src="imgeditSilverGlassText.png" alt="Editor" width="200" height="35" id="bar5" onmouseover="startMove(5)" /> </div> The container item is only used on this page, not on the entire website, so its CSS is in the <style></style> tags, it did not work on any resolution but mine. If it's possible to avoid absolute positioning here, please tell me how! Your sample menu is doing exactly what it should be doing. You mentioned that the CSS in the <style></style> tags should work regardless of resolution. Do you know why it's not working? Many thanks!
  13. AARRGGHHH

    CSS NOT CHANGING DYNAMICALLY

    dsonesuk, an absolute positioning follow up question: I'm using canvases layered with z-index on a page. And, as you know, everything that occurs after position: absolute; becomes a problem. I'm under the impression absolute is needed when layering canvases, is this correct? Thank you
  14. AARRGGHHH

    Making unusual navigation work in all screen dimensions

    That would be nice!!! The first block of code looks fine at my resolution of 1366. When I switch to my laptop's resolution of 1920, the images disappear (possibly off to the far left). Also, the scrollbar at the bottom of the page extends to the far right, beyond 1920 pixels In case it's useful, here is the page's style sheet: header { background-color:#000000; width:1024px; margin-left:auto; margin-right:auto; } body { background-color:#000000; width:1024px; margin-left:auto; margin-right:auto; } nav { background-color:#000000; width:1024px; margin-left:15px; margin-right:auto; } main { background-color:#000000; width:1024px; margin-left:auto; margin-right:auto; /* float:right; */ } h1, h2, h3, h4, h5, h6 { font-family:calibri,verdana,arial,sans-serif; color:#938FEB; text-align:center; margin-left:auto; margin-right:auto; } p, form, ul, td { font-family:calibri,verdana,arial,sans-serif; color:#FFFFFF; /* text-align:left; */ } li { font-family:calibri,verdana,arial,sans-serif; color:#FFFFFF; text-align:left; font-weight:bold; } div { font-family:calibri,verdana,arial,sans-serif; color:#FFFFFF; text-align:center; } span { font-family:calibri,verdana,arial,sans-serif; color:#FF0000; text-align:center; } footer { background-color:#000000; width:1024px; bottom:0; /* float:right; */ /* position:fixed; */ margin-left:auto; margin-right:auto; } Thank you !!!
  15. I'm using somewhat unusual navigation, as seen here. When a user mouses over the bars, they slide out into view. All of that is working fine. The problem is, I cannot find the CSS to make the buttons align left of the edge of the screen (as seen in the image), regardless of the display dimensions. I originally tried: <style> #container {width: 600px; height: 25px; position: relative;} #bar0, #bar1, #bar2, #bar3, #bar4, #bar5 {position: absolute; left: -340px;}"; </style> Which worked perfectly. But only on my screen. I thought that position:absolute inside position:relative would work regardless of screen dimensions, but I was obviously wrong. I then tried several variations on dynamically adjusting the screen width in the container <div> with a function that runs onload: function populateArrays() { // populate arrays for (i = 0; i <= 5; i++) { position[i] = -340; bar[i] = document.getElementById("bar" + i.toString()); id[i] = i; } // Add a dynamically built style sheet var sheet = document.createElement('style'); var sWidth = screen.width; var lWidth = sWidth - 1024 // 1024px is width of the page body. The result, 342, works perfectly at my resolution of 1366: 1366 - 1024 = 342 (I use -342). sheet.innerHTML = "#container {width: " + sWidth + "px; height: 25px; position: relative;} #bar0, #bar1, #bar2, #bar3, #bar4, #bar5 {position: absolute; left: " + -(lWidth) + "px;}"; document.body.appendChild(sheet); } But this also did not work. Perhaps I should be using a formula other than screen.width - 1024 = -(lWidth)? All I know is it doesn't work at other resolutions. What is the correct way to align the images to the far left, partially (mostly) off screen, regardless of dimensions? I've lost an entire day's work to this. Thank you very much
×