Striped Background Gradients in CSS + HTML

Testing out Stacked Linear Gradient background to create striped gradients in CSS and HTML. 

🔗How to add a Link in HTML?

How to add a link in your HTML and other random things about html links! 

HTML how to add an IMAGE! Quick HTML Tutorial

Just doing a bit of a series on HTML basics, i will list them here as i add them. We upload an image to imgur, and i show how to get the image link and insert it into html to show it! Super basic a..

HTML How to CENTRE Text Easy! - Quick HTML and CSS Tutorial

How to center text in html, there is a few options i discuss here and probably more that i missed out.  Codepen: https://codepen.io/kruxor/pen/poMOVYe

fade in and out elements on scroll - css js html

find a custom data attribute in simple html dom

locate the div based on a custom data attribute, in this case the data-field="regularMarketChange" full docs

css html vertical center

seems to break this layout... there must be a better way... 

flip card animation 3d front and back css html

3d flipping card with front and back content and animation

six box grid css html custom no gap

re-usable four box grid with no gap, plus stack on responsive 1024px

four box grid css html custom

re-usable four box grid with gap calculations

Using the HTML tag details for easy accordions

Using the HTML Tag ` ` for automatic accordions.

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.

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in simple_html_dom.php on line 722

Initial thought on this error is that there is a version issue. This only happened on version 1.11 for me, will check what other version i have.  Yep not sure why but the older version of php ht..

cookie consent quick install script js html css vanilla

Found this super slick looking cookie consent script here, looks awesome, and its easy to install (i hope). https://github.com/orestbida/cookieconsent  CDN Links https://cdn.jsdelivr.net/gh/or..

Video Placeholder Image HTML

a quick image embed for a common video placeholder image size made by this amazing placeholder site

Warning: file_put_contents(/var/www/html/bundle/responsive-viewport-meta-tag-responsive-meta-tag/index.php): failed to open stream: Permission denied in /var/www/html/pages/update.page.php on line 167

i think that the content in this location is not writable by php so need to change the permissions too fix this error.  This should fix it, as it was not correctly write permissioned Bash cs /..

Warning: Undefined variable $class_single_hero in /var/www/html/pages/section.page.php on line 177

This warning was caused by a dot in front of the equals $class_single_hero .= $code->hero_widget($t_uid = $class_single->uid,$t_class = $p2); Fixed version Easiest way to fix this is remo..

share to twitter html link only

share to twitter the html version of the link only

linked in share link html only, linkedin, linked-in

share a post or url to linked in html only version

Facebook HTML for Sharing a Link

just the html for the link, that is all. Replace kruxor.com with your url to share E.g: share to facebook

html and css hoizontal simple timeline section in foundation

a horizontal simple timeline section example done in foundation grid with some custom styles. This also uses the Lato Font quick install! So Quick!..  :P Also works on responsive and mobile dev..

best way to write html into an existing page javascript

this probably isnt the "best way" but it is a way that works. say you want to add some elements to a page with javascript this is a method to do it.  Add an element, before including the script..

convert a string into its html entitles using php htmlentities function

this takes a html string such as the following example and converts it into its html entities. it will take a character such as < and convert it into &lt; so that the string is not parsed as h..

Auto Create HTML Code Snippets

make anything within a <code> tag into a nice looking code snippit with highlighting via prism. To get this code to make a snippit, you need to: Give an element a .make-snippet class and it's ..

card.html template

a card template with title, content and a mb-3 for bottom margin for usage with the php template system.

extract meta attributes with simple html dom

pass in the url as import_url and it will search for the meta keywords tag and echo the result.

simple html dom check if an attribute is set and has a value

using the kbd html tag

  You can use the tag <kbd> to highlight keyboard shortcuts, i love this tag!  Now i just need a reason to use it.   

foundation base html template - foundation template

just a basic html template with foundation and the required javascripts, good for a starter html page using foundation framework.

How to Define a HTML Class in JSX in React

When writing JSX you cant add classes like you would in HTML so this code would not work: JSX <div class="my-class"></div> Instead we have to use className. JSX uses camel case for a l..

How to Render HTML Elements to the DOM with React

Once you have a JSX element defined you can write it to the page with ReactDOM.render(componentToRender, targetNode),  In this example we are targeting the div with the id challenge-node. JSX ..

php html template class system

just a simple php templating system to extract your html files from within the php code into external files, makes things (or your code) a bit neater.

create a 200 character summary from a longer html string

this is a quick function that can create a 200 word plain text summary from a html string. Also added the option to specify the char length of the string.  Function function create_summary($htm..

Scroll down indicator css javascript and html

I have seen these a couple of times, indictating to the user that there is further content down the page, and they should scroll to view it. Then as you scroll down the indicator dissapears. So we w..

python extract title tag from url and html using regex

this will extract the title tag as text from the url and the title tag in the following python script Python import refrom urllib.request import urlopenurl = "http://olympus.realpython.org/profiles/..

set the html of an element javascript

this will set the innerhtml value of an element

Adding HTML Templates into TinyMCE Editor

This can be very useful if you are using the tinymce editor on your site and want to be able to add simple or complex html templates. Here is how to do it: Add this to your tinymce init Javascrip..

codemirror htmlmixed textarea

a working (hopefully) version of codemirror using the htmlmixed mode, not sure why its not doing code highlighting. Update: 5 Jul 2022, this is working now. 

@import and html link to Montserrat font family google font

includes the Montserrat font family as @import in your css or add as a link in html with preconnect. also has basic usage as the .montserrat class.

Modern HTML5 Techniques for changing classes

using attr in css to get content from html

im not sure (yet) how this would be useful, but it shows that you can get title attribute content from a div with css

Fix for Fatal error: Uncaught Error: Call to undefined function file_get_dom() simplehtmldom simple_html_dom

This error is caused due to a function name change in the simple_html_dom.php library if you are using an older one and upgrading to the never version, you can see it in the change log here: https://s..

scroll to top html css and js

add a button to your website that allows scrolling to the top of the page css add scroll behavior smooth to your html, to allow the page to scroll nicely rather than just jumping to the top, in supp..

how to display a php file as html with php

you can use the following function to show a php source file as html

template for testing and live reloading html files

this is a template that i use while testing flat html files, if you add it to a server it will live reload. this does seem to cause issues depending on the site that is is used on, like reloading all ..

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

function to create a uid from html

this function converts a html string into a uid or unique id type string, its not actually unique, but its a string that can be used to make the title of something that contains html into a usable str..

simple html dom extract attributes simplehtmldom

this is if you have an element as follows, and you want to extract attributes from it. <img class="an-image-wow" src="image.jpg" data-image="data-image.jpg" alt="my alt tag"> list all its attr..

validate form data using javascript to check required html elements

for use in a javascript function to submit a form var form = document.getElementById('myForm'); for(var i=0; i < form.elements.length; i++){ if(form.elements[i].value === '' && form.elements[i..

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..

target internet explorer with css and html

target all internet explorer versions with this <!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> <![endif]--> target ie 10 and 11 p { col..