ProdJuan Posts - Answer Overflow

ProdJuan

•Created by ProdJuan on 6/10/2024 in #back-end

shell script to create file with latest mod time of any other files in directory

My VPS running Plesk, in git settings of a repository on the site, offers an 'enable additional deployment actions' with a box to put shell command statements line-by-line. I'd like to have it create a file in a directory via touch with the mod time of any other file with specific extension (e.g. '.js' /'.css') in that directory so an outside script can examine that (e.g. latest.js / latest.css) for comparison by other code. If this isn't possible or convenient, I must to resort to a frequent 'scheduled task' to do this operation. Thanks for any help! 🙂

3 replies

KPCKevin Powell - Community

•Created by ProdJuan on 4/20/2024 in #os-and-tools

How to split editor in VSC (within pane, not separate pane)

7 replies

KPCKevin Powell - Community

•Created by ProdJuan on 4/18/2024 in #front-end

Text overflows shrinking containers as browser is narrow, how to fix?

Here is the PEN: https://codepen.io/prodjuan/full/qBwJNjB I have a nice layout with a grid of cells on the right column, but the description text spills out past the parent container. How can I fix this to look better? Smaller font? shorter line-height? Any other options? Thanks!

6 replies

KPCKevin Powell - Community

•Created by ProdJuan on 4/3/2024 in #front-end

Why Don't Absolute-Positioned Elements Remain Aligned to Background Image when Browser Widens/Nar?

I put an image on the page to cover 3/4 the browser width (per design). The image is inside a parent <div> with position relative. Also within that div is a container <div class="pins-wrapper"> that I put a few 'pin' elements as <i> elements with display:block; ... here are some snippets:

<map-holder><img src="/map-image.png" alt="Its a map!" />
  <div class="pins-wrapper">
    <i id="pin1" class="material-icons">place</i>
    <i id="pin2" class="material-icons">place</i>
    <i id="pin3" class="material-icons">place</i>
  </div>
</map-holder>

<map-holder><img src="/map-image.png" alt="Its a map!" />
  <div class="pins-wrapper">
    <i id="pin1" class="material-icons">place</i>
    <i id="pin2" class="material-icons">place</i>
    <i id="pin3" class="material-icons">place</i>
  </div>
</map-holder>

map-holder, .pins-wrapper i { display:block; }
map-holder { position:absolute; width:75%; right:0px; top:0px; bottom:0px; overflow:hidden; }
map-holder img { height:100%; width:100%; display:block; pointer-events:none; }
.pins-wrapper { position:absolute; top:0px; left:0px; bottom:0px; right:0px; }
map-holder i.material-icons { position:absolute; font-size:64px; transform-origin:center bottom; transform:translate(-50%,-100%); }
#pin1 { top: 25.000%; left:30.000%; }
#pin2 { top: 40.000%; left:75.000%; }
#pin3 { top: 80.000%; left:50.000%; }

map-holder, .pins-wrapper i { display:block; }
map-holder { position:absolute; width:75%; right:0px; top:0px; bottom:0px; overflow:hidden; }
map-holder img { height:100%; width:100%; display:block; pointer-events:none; }
.pins-wrapper { position:absolute; top:0px; left:0px; bottom:0px; right:0px; }
map-holder i.material-icons { position:absolute; font-size:64px; transform-origin:center bottom; transform:translate(-50%,-100%); }
#pin1 { top: 25.000%; left:30.000%; }
#pin2 { top: 40.000%; left:75.000%; }
#pin3 { top: 80.000%; left:50.000%; }

The container for the pins is edge-anchored to the container holding the map image which is full-sized to that container. When the browser width changes, the precision placed pins creep off their target points so they no longer align to the map behind them. The creep is significant (15px) when the browser width changes from, say, 1400px wide to 1600px wide. Those pins should NOT creep at all due to all the anchoring!! What is causing them to malign?? I need those pins to remain stable above their respective targets no matter what width the browser has. Thanks for any help offered!

27 replies

KPCKevin Powell - Community

•Created by ProdJuan on 4/5/2023 in #front-end

HTML5 input type="date" tag ignoring assigned value in script-triggered picker in Firefox

Can someone offer a workaround for this problem? Objective: allow date picker to appear when wrapper element is clicked for a date element which does not allow direct access.

<form name="dates" method="post" action="">
  Start: <span><input type="date" name="start" value="2023-09-01" /></span><br />
  End: <span><input type="date" name="end" value="2023-09-07" /></span>
</form>

<form name="dates" method="post" action="">
  Start: <span><input type="date" name="start" value="2023-09-01" /></span><br />
  End: <span><input type="date" name="end" value="2023-09-07" /></span>
</form>

span{ position:relative; }
span::after{ content:''; position:absolute; left:0; top:0; right:0; bottom:0; background-color:#EEE1; }

span{ position:relative; }
span::after{ content:''; position:absolute; left:0; top:0; right:0; bottom:0; background-color:#EEE1; }

In Firefox, the picker that appears when input is clicked presents the current date rather than the value on the tag. When the user selects a date, that becomes the value of the input and is what the picker presents on the next click of the input. I use JavaScript to trigger picker and retrieve/assign the date value for the date inputs:

document.forms.dates.addEventListener('click', elem => {
  if(elem.tagName == 'SPAN') { elem.firstElementChild.showPicker(); }
});
document.forms.dates.start.addEventListener('change', elem => {
  var dateValue = elem.valueAsDate;
  dateValue.setDate( dataValue.getDate() + 6 );
  document.forms.dates.end.value = dateValue.getFullYear() + '-' + ('0'+(dateValue.getMonth()+1)).slice(-2) + '-' + ('0'+(dateValue.getDate())).slice(-2);
});

document.forms.dates.addEventListener('click', elem => {
  if(elem.tagName == 'SPAN') { elem.firstElementChild.showPicker(); }
});
document.forms.dates.start.addEventListener('change', elem => {
  var dateValue = elem.valueAsDate;
  dateValue.setDate( dataValue.getDate() + 6 );
  document.forms.dates.end.value = dateValue.getFullYear() + '-' + ('0'+(dateValue.getMonth()+1)).slice(-2) + '-' + ('0'+(dateValue.getDate())).slice(-2);
});

Example: User clicks start date, the picker appears and user selects 10/1/2023 date. Result is the value for start date becomes 2023-10-01 and the change function updates the end date input value to 10/7/2023 and the input value reflects the new value. In Firefox, when the user clicks on the end date input for the first time, the picker appears with "today's date" selected, not the value assigned to the end date input. I have resorted to a JS Datepicker plugin library to offer users a consistent cross-browser experience since the Firefox date picker is deficient until fixed.

1 replies

Gaming

Programming