Search
Search Code
Video different sources on screen sizes video embed html responsive
video embed tag using media tag to switch video sources depending on screen size This example will switch the video souce at 800px screen width.
floating message box on bottom right of screen with close button
A floating fixed message box on the bottom right hand side of the screen with a close button.
center a box in the middle of the screen
and then center everything in that box as well
pi400 how to take a screen shot
This is actually built in, well if you have scrot installed anyway. Which it already was for me. Press Print Screen button and it saves it into your home folder.
responsive menu research full screen multi level
i was just looking into responsive menu's that are easy to impliment and navigate even if they have multiple levels still just in research mode at the moment Menu One Menu Sub One Menu Sub..
adding background blur to an image using css fill screen
I had noticed this cool looking effect used on places like google, and other sites that display portrait images, i think i saw it on the google home as well or maybe google photos. Its basicall..
using jquery appear for checking if an element is visible on screen
Yes.. sometimes i like using jquery as well, as it can make things so easy! :) Here is a quick demo using the JQuery Appear plugin so make an element change if it on or off screen. Plugin Link..
Monitoring Visible Objects on Screen
i found this one when researching how to detect visible objects on screen, and then doing something with them. This one does not use any external scripts to change the box colour as it becomes visible..
Applied Accessibility - Screen reader only css
This is how a screen reader only css markup can be added. The content will still be available to screen reader clients.
stacktable jQuery plugin for stacking tables on small screens
stacktable.js The purpose of stacktable.js is to give you an easy way of converting wide tables to a format that will work better on small screens. It creates a copy of the table that is converted in..
take full page screenshot screencapture using chrome dev tools
This isnt really html, but its handy ;) Here is how to take a full page screen shot using the chrome dev tools. Open dev tools in chrome and the page you want to capture the image from F12 Pr..
video embed full screen all screen sizes
Update: 29 July 2025 For some reason the code was in this post from 2018! but it was not working as a demo, which means i added it ages ago.. man 2018. time goes quick. Ill see if this sti..
