Search

Search Code by entering the text above.
css
...
keyframe animations css

moving a background with css keyframes

12:27 am, August 6, 2019
javascript
...
document ready javascript standalone version no jquery

this is a version of a dom ready or document ready that does not require jquery

1:14 am, July 17, 2019
javascript
...
add a class to a div with an id javascript

a one liner to add a class name to an element with a specific id, for this to run it seems to need a document ready.

1:11 am, July 17, 2019
css
...
using transform scale in css to zoom on hover over

using a css transform will not effect other elements that surround it, so when you mouse over this div (or press it on your phone/tablet) it should scale to 1.5 times its original size.

2:57 am, July 16, 2019
html
...
Bootstrap Card Formatting HTML and CSS - Header and Footer

just a bootstrap card format with header and footer elements, makes a piece of content neat easily

2:38 am, July 10, 2019
css
...
using a css grid area template

here we can specify areas for the grid. using grid-template-areas. once the areas are defined we can add the items into each area with grid-area: header in each element Use grid-area Without Creatin..

2:26 am, July 3, 2019
css
...
using flexbox to align elements in a row

flexbox is so good at aligning elements, yes i used to use float left and then percentages and overflow auto or hidden the surrounding div, but now with flex you can just do something like this.

1:37 am, July 2, 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
css
...
Using Flexbox rather than Floats

So i was still using float left for a bunch of elements i was working on the other day, sometimes it's hard to drop old techniques. What are the actual benefits of using flexbox rather than float lef..

4:27 am, January 16, 2019
core
...
Core Class - Basic Core Structure

A Core class that can be used as a base for all content types and uses the extend classes to define the database variables. So basically you can set up core class and then create sub extend classes to..

11:33 pm, December 13, 2018
html
...
meta keywords tag

used in the page header keywords are seperated by comma's. e.g: key word,keyword,etc

5:50 am, October 17, 2018
html
...
meta description tag

used in the page header

5:48 am, October 17, 2018
php
...
get text between tags

Using DOMDocument you can get strings between tags Useful if you are processing raw html files with php function getTextBetweenTags($string, $tagname){ $d = new DOMDocument(); $d->load..

6:20 am, August 31, 2018
php
...
convert all images into base64 encoded

if you have a bunch of html with inline image links this will convert them into base64 images inline. <?php $html = "my html string with multiple image tags..."; $dom = new DOMD..

6:20 am, August 31, 2018
php
...
read and sort directory contents in php

if you need to read in the contents of a directory in php and sort it by date header('Content-Type: application/json'); $dir = "./html/"; $file_type = ".html"; $out = ""; $files_array[] = ""; ..

6:20 am, August 31, 2018
php
...
show response headers from file get contents

this will show the http_response_header when using file get contents, can be useful for seeing what the server is doing. $contents = @file_get_contents($url); echo "<pre>"; var_dump($http_re..

6:20 am, August 31, 2018
php
...
wordpress show the page content for use in a template

if you are using page templates in wordpress and need to show content from wordpress this is the easiest method. This only works for wordpress "pages" not blog "posts". For showing blog posts you will..

6:20 am, August 31, 2018
php
...
file get contents reads entire file into a string

you can use the file_get_contents function to read a file or a web address usage get a url content $homepage = file_get_contents('http://www.example.com/'); echo $homepage; get a file con..

6:20 am, August 31, 2018
php
...
try catch test

try and catch example try { //enter code to catch file_get_contents($link); } catch(Exception $ex){ //Process the exception $page_content .= "Unable to process : $link"; }

6:20 am, August 31, 2018
php
...
tell wordpress to use the direct file method if its asking for ftp details

this usually happens if the permissions on the wordpress wp-content folder are not correct or writable. check the permissions are correct: (this is for apache, the user names might be different che..

6:20 am, August 31, 2018
php
...
header type json

Changes the header to show json type content when the server requests it. header('Content-Type: application/json');

6:20 am, August 31, 2018
php
...
extract meta tags from url and return as json array

this will download the url and extract its meta tags returning a json encoded string, with json headers. If the url is accessable. <?php header('Content-Type: application/json'); if(!isset($..

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
...
wordpress get site url

good for using in templates in case the site is moved <?php echo get_site_url(); ?> Usage Example (css) using inline styles in a template file <style> .class { background:url("<?p..

6:20 am, August 31, 2018
php
...
search within files in a directory

During my quest to create a semi-static site that is searchable and fast to load. I thought while loading all of this content in with ajax and such that it would be interesting if i could do a text ..

6:20 am, August 31, 2018
php
...
wordpress show the post content for use in a template

if you are looking to show the page content in a template you can find that here. This will show all posts in the selected category <!-- // show the post content --> <?php $my_query ..

6:20 am, August 31, 2018
js
...
google map with overlay data

Ever wanted to add a really slightly complex google map to your site? Working Example /* Always set the map height explicitly to define the size of the div * element that con..

6:20 am, August 31, 2018
js
...
tiny mce editor tinymce

Just loading the editor, as its useful for formatting stuff sometimes 😋. I usually use a function to load it into text areas with the tool bars + styles that i find useful. Example fu..

6:20 am, August 31, 2018
js
...
json loop load elements

Loading json content from a url can be tricky, there are a few different things you need to watch out for. Here is some examples using an example json feed. Load the feed this will load the feed an..

6:20 am, August 31, 2018
js
...
set and check a cookie using js cookie

this library makes setting and checking cookies so easy its amazing! include this script <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.4/js.cookie.m..

6:20 am, August 31, 2018
js
...
find all elements add class jquery

this will grab all a elements, and dump them to the console. var allLinkElements = $( "a" ); console.log(allLinkElements); then we need to split into a jquery object, this is a jquery version of an..

6:20 am, August 31, 2018
js
...
load content with jquery

Load data from the server and place the returned HTML into the matched element. this one seems simple but very useful $( "#result" ).load( "ajax/test.html" ); this one will load the content o..

6:20 am, August 31, 2018
js
...
jquery accordion

here is an easy drop in if you need a quick and dirty accordion sometimes you just need something quick, here is mine for the jquery accordion also changed the default selected tab to green rather t..

6:20 am, August 31, 2018
js
...
using getElementById and innerHTML to change the html of content no jquery

this is pretty simple, but i always forget it so ill add it here document.getElementById("theid").innerHTML = "the new content"; heres how it works, add a div with an id of theid Example .. <d..

6:20 am, August 31, 2018
html
...
make any element editable

not sure if this will work on "all" or "any" elements, but it works on p tags. demo Type whatever you like here. code <p contenteditable="true" style='font-size:30px;'>Type whatever ..

6:20 am, August 31, 2018
html
...
simple dropdown multi level navigation ul li css

updated to work standalone and not effect other list elements on the page

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
html
...
responsive viewport meta tag

this one meta tag will make the page appear correctly on mobile devices. You may need to do other things to get all the other elements to fit. Here is the one I usually use <meta name="viewp..

6:20 am, August 31, 2018
html
...
simple dropdown navigation ul li css

demo .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 16..

6:20 am, August 31, 2018
css
...
use an image to replace bullet in ul list

How to replace the default bullet with an image in a ul tag .widget ul, .page-content ul { list-style-image: url('images/favicon.png'); }

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 sidebar main content fluid layout

I was playing around with css grid the other day and i found a nice (and easy) way to do a standard left sidebar and fluid main content area. this is rather than floating the sidebar and then setting ..

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
...
more complex responsive tables css

i did a simple version of this before here but now im going to make it a bit more complicated and functional. table { width: 100%; border-collapse: collapse; } tr:nth-of-type(odd) { ..

6:20 am, August 31, 2018
css
...
transform rotate a hexagon in css

if you ever needed a hexagon in css here is how you can do it. code <style> .hexagon { position: relative; width: 250px; height: 144.34px; background-color: #64C7CC; margin..

6:20 am, August 31, 2018
css
...
darken background image using css

darken a background image using css only useful if you have overlay text or just want to add a nicer effect to an image, i usually find that adding this to an image with the text over the top makes it..

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
...
make your images look non squished when not using image backgrounds

i deal with a lot of sites where they have a bunch of images listed and sometimes they can end up looking a bit sqashed unless you add a div and set the height and width of it. this method is fine u..

6:20 am, August 31, 2018
css
...
use font awesome on elements lists ul

good if you need to use font awesome in list items like ul lists, etc. .element { position: relative; } /*replace the content value with the corresponding value from the list below*/ ..

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.

❤👩‍💻🕹