Luke's public fiddles
-
W3Schools Hover ToolTip to change
Want to change this to automatically add tooltips into the document with JS
-
HTML Form to JSON
This code example demonstrates how you can use a form to collect input and output in a json format. The way this example works is excellent because it works dynamically, the inputs of your form are the names of the attributes stored in JSON, if a field is blank then this is setup to not insert that field in the JSON. This currently only supports the text form input, but I am planning to add other inputs to this script as well such as checkboxes, radio buttons, and more.
-
Paypal Donate Widget
This is a PayPal donation widget I have used on previous blogs which enable you to describe briefly what donating enables you to do and link to your paypal page.
-
Add Was This Helpful buttons to your blog!
In this setup I have created a for with yes and no buttons, once the user clicks one a textbox appears allowing them to enter additional feedback about what they liked or didn't like, this data is then submitted and recorded to a Google Spreadsheet via a Google Apps Script. Looking to create a tutorial on this soon!
-
Basic Social Media Icons for Blog
This is a basic HTML structure with CSS to create social media icons for your blog or website that allows users to click through to your other online profiles such as Twitter.
-
Embed latest tweet from specific user and hashtag
No-Library (pure JS), HTML, CSS, JavaScript
-
VSCO Save
No-Library (pure JS), HTML, CSS, JavaScript
-
Remove all videos from a playlist on YouTube
This script will remove all videos from a playlist on YouTube, just navigate to the playlist, make sure all the videos are on screen by pressing the "Load more" button at the bottom, then just paste this code into Chrome developer tools console or the equivalent for your browser and all the videos will be removed.
-
Add all YouTube videos on screen to a playlist
This is probably not the most efficient way to do this but it works, this is good for adding all the videos from a channel to your watch later playlist and as thier in a playlist you can download the entire playlist or do whatever you like, you can also use the "Add all videos to" option to move them somewhere else, you can also remove all the videos a playlist using the other script I have uploaded. To use this simply open up YouTube on the page you want and paste this code into chrome developer tools console or equivalent for your browser.
-
xfu5w079
No-Library (pure JS), HTML, CSS, JavaScript
-
y5pzjbhx
No-Library (pure JS), HTML, CSS, JavaScript
-
First Image CSS Selector
The purpose of this test is to figure out how to select the first and only the first image element inside of a wordpress post which has many p elements. This worked for the first image but it hid the image in the folowing p element also, this may not be possible in CSS, may have to resort to JavaScript or serverside code.
-
paper-input test
The purpose of this test is to find out how to change the colour of Polymer's paper-input element. The results were to use the CSS ::shadow selector to access the Shadow DOM.
-
Testing addEventListener
The purpose of this test is to figure out how I can show a search bar when you click the search button but hide it if you click anywhere else.
-
CSS Dropdown Menu
Experimenting with a CSS Dropdown Menu
-
Loading Icon
This was an attempt to make a animated multicoloured loading icon, obviously I lost track with the colours and it didn't turn out as expected.