Chances are screen readers overlook Google’s faux pas when it comes to not providing labels for thier hidden g-recaptcha-response TEXTAREA, but we would prefer not seeing such errors during accessibility evaluations.
Here is a simple script to handle the problem gracefully.
Continue readingStarting with the example code for a carousel with indicators we add another button to the beginning of .carousel-indicators.
<button type="button" class="btn btn-sm" id="carouselExamplePause" aria-label="Pause">⏸︎</button>Then we add JavaScript to make it functional.
Continue readingwindow.addEventListener('resize', () => {
document.documentElement.style.scrollPaddingTop = document.getElementById('content').getBoundingClientRect().top
})Tip: Set default using CSS in case JavaScript is disabled.
html {
scroll-padding-top: 50px;
}How to turn on/off Bootstrap’s collapse function based on window.innerWidth
function toggleCollapsibility(container) {
// Default to disabled
let find = 'collapse', replace = 'collapse-disabled'
// We only want collapse on smaller devices
if (window.innerWidth < 992) {
// Flip to enabled
[find, replace] = [replace, find]
}
document.querySelectorAll(`${container} [data-bs-toggle="${find}"]`).forEach((element) => {
element.dataset.bsToggle = replace
})
}Automating the $baseURL configuration value between test and production servers or when moving public/index.php saves time and potential headaches. Follow this guide to define a DYNAMIC_BASE_URL for use in your CodeIgniter 4 application.
<?php
/*
| --------------------------------------------------------------------
| Dynamic Base URL
| --------------------------------------------------------------------
|
| Generate absolute URL based on request scheme, host and script path.
*/
defined('DYNAMIC_BASE_URL') || define('DYNAMIC_BASE_URL', sprintf('%s://%s%s', (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off') ? 'https' : 'http', isset($_SERVER['HTTP_HOST']) ? $_SERVER['HTTP_HOST'] : 'localhost', str_replace(basename($_SERVER['SCRIPT_NAME']), '', $_SERVER['SCRIPT_NAME'])));<input type="password" id="password">
<span id="warning" style="display:none;color:#c00">[Caps Lock]</span>
<script>
document.getElementById("password").addEventListener("keyup", function(event) {
document.getElementById("warning").style.display = (event.getModifierState("CapsLock")) ? "inline" : "none";
});
</script>Here for me to copy/paste as-needed… feel free to do the same 💁♂️
var inputs=document.getElementsByTagName('input');for(var i=0;i<inputs.length;i++){if(inputs[i].type=='checkbox'){inputs[i].checked=true;}}$('input:checkbox').prop('checked',true);Happy coding 😀
I have an Excel workbook with 13 protected sheets, January through December plus a Summary that needed the same cell comments for each month.
There were 2 options…
Ran into an issue earlier today that I could not figure out and ended up asking my second question on StackOverflow in seven years.
I was trying to use <input type="number" pattern="[0-9]{8}"> to enforce 8-digit numbers while allowing leading zeros. This was being done on an optional field (no required attribute) and I could not understand why it was bypassing my pattern on the populated field (eg: value “1234” was accepted, pattern ignored).
While converting a Bootstrap 3 template design for use with Bootstrap 4, I noticed they removed stateful buttons (eg: “loading” and “reset” button states) from BS4! Granted it was mentioned in BS3, but I never noticed the deprecated warning 🙁
The deprecated code for showing a button’s loading state was $('#selector').button('loading') and to return the button to its original state you would use $('#selector').button('reset') .
I was adding mouse wheel events to a ul element with the CSS rule overflow:hidden to emulate mouse wheel scrolling when no scrollbar was present.
The links in the unordered list also trigger a Bootstrap 4.1 Modal that contains a Bootstrap Carousel. So I decided to add the same functionality to my modal carousel gallery.
Continue reading
Today I had to figure out the most efficient way to generate Emoji from ISO 3166-1 Alpha-2 country codes such as US, GB, etc. I opted to go for a for 100% SQL solution.
The most efficient way to convert each ASCII letter to their Unicode Regional Indicator Symbol Letter that I determined is provided below (simplified)…
Continue reading