Search

Search Code by entering the text above.
site bugs
spin rotate an element on mouse over [css]
...

i thought it might look good to spin this element around when the mouse is over it. Added the following css to second_nav_toggle.  

12:51 am, January 17, 2021
site bugs
linking search results to view pages [finished] 🤣
...

I was thinking it might be useful to link the search term to the page, so that it can be found more easily using that search. For example, Link this search text (somehow) to the post page and display..

2:44 am, January 12, 2021
site bugs
badge placement is offset in list pages [fixed]
...

Another bug caused by the badge changes I think this can be added to a grid as well, and have the category on the left and the date on the right. Then need to align the category badge nicer.  ..

2:43 am, January 1, 2021
css
make an image white with css using filter brightness and invert
...

If you have an icon or something with transparency this can be useful if you dont want to have to edit the image and create another copy of it you can apply the filter brightness and invert. You can ..

5:16 am, December 22, 2020
jquery
replicating the bootstrap dropdown toggle in jquery
...

here is a code that can toggle a sub element using the same format as bootstrap. Update: also added another line that closes all the open menu's when one is clicked, so that you dont have a bunch of ..

2:36 am, December 17, 2020
svg
download icon svg
...

a simple download icon in svg format, also added button example usage so you can use the svg within the button as an icon and change the fill colour on mouse over, plus it scales nicely on mobile devi..

10:28 pm, December 3, 2020
bootstrap
Bootstrap Darkmode Switch
...

I have tried this before without success but i googled "Bootstrap Darkmode Switch" and found this repo at the top of the list. So i thought i would give it a try on here and see how it looks. Demo pag..

11:54 pm, August 18, 2020
jquery
add a class or remove it based on window scroll location
...

if you inspect the header div you will see a class added to it when scrolled down, i have added additional margins to it so you can still see it even when scrolled. then you add a fixed property to m..

1:45 am, June 30, 2020
css
css using perspective for transforms
...

just playing around with the perspective and transforms, it does weird and annoying things to the margins. I was interested in how this page worked, so i thought i would try and deconstruct it a bit. ..

5:57 am, June 16, 2020
javascript
inline fancybox modal testing
...

just testing to see if i can get a fancybox popup loading using an inline script rather than a document ready one, might be easier to implement. similar to this one, but without the need for documen..

6:12 am, June 3, 2020
javascript
Use Recursion to Return a Range Array
...

using recursion to return a range array between the two numbers added

11:38 pm, February 2, 2020
js
FCC - Basic: Profile Lookup
...

my solution to the FCC Basic js Profile Lookup, with added results area and button to run the function.

5:38 am, August 26, 2019
css
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.

11:24 pm, July 1, 2019
wordpress
wordpress enqueue slicknav and slick slider
...

add this to your theme scripts functions file here is the full one from HTML5 Blank // Load HTML5 Blank scripts (header.php) function html5blank_header_scripts() { if ($GLOBALS['pagenow'] != ..

6:20 am, August 31, 2018
php
csv read example
...

Not sure if this is the best or correct way of handling CSV file imports, but it worked for me. here is an example of opening a csv and importing the content into a class, you will need to create ..

6:20 am, August 31, 2018
php
using custom request headers array with curl
...

this function passes in an array with custom request headers to curl, good if you need to pass in some headers to request an api url and give it an auth key or something like that. Also added to the a..

6:20 am, August 31, 2018
js
digital clock with jquery
...

Just a simple digital jquery clock that updates every second. Also added the dropshadow animation, not sure why... ;) .digital-clock { font-size:80px; } .transition { transition..

6:20 am, August 31, 2018
html
meta refresh reload page
...

this can use a meta tag to get the browser to reload the current page. the following code will reload the page every 30 seconds. usually you have to add meta tags into the header of your page, not ..

6:20 am, August 31, 2018
css
css grid sidebar main content fluid layout with fallback
...

this is a continuation from the original post with added fallback for older browsers that do no support the grid elements yet. I have tested this fallback in IE11 and it seems to work well, if you wa..

6:20 am, August 31, 2018
css
css grid for layouts and how to use it
...

Note: Added version 2 of this with no rows for the grid css grid for layouts with no rows so there is this thing called the CSS Grid Layout, and apparently we dont need a framework for grids anymore...

6:20 am, August 31, 2018
css
flex align center vertical horizontal
...

lets say you have a box within another box, like so: .box { height:500px; width:500px; background:#CCC; } .another-box { height:50px; width:50px; background:#999; } ..

6:20 am, August 31, 2018
css
stack a table using css responsive
...

this can be useful for fitting tables into smaller screens, usually add this to a media query. #tableid td { display: table-row; width:100%; display:block; } and with a screen size added @me..

6:20 am, August 31, 2018
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹

Random Quote
There is no way to happiness. Happiness is the way.
Unknown