Search
center image preview with lightbox and caption
I just wanted a thumbnail or preview of the image, where if clicked it would load into a lightbox, but the preview just shows the center of whatever image is added to it. Note: I just picked ra..
center align vertical 2 items in a container flex
i had this issue and i was pretty sure that flex center could fix it but it was causing the two items in the div to sit next to each other, which was annoying as it was a header and content, but i sti..
how to copy the folder path in finder
Moving from windows to mac is quite a shock, especially when you go from explorer which shows the file and folder path on every window in file explorer. Then we go to mac finder, which is nice, but h..
how to join an array in javascript using the join method
This example shows how we can join an array into a string using the join method. Its a nice quick way to convert your array into a string with a delimiter such as , or ; Here we can see the test arr..
using the $_SERVER['HTTP_REFERER'] to check referring pages
shows how you can display the contents of the $_SERVER['HTTP_REFERER'] tag in php to show referring pages i read in an article that this is stripped out of HTTPS requests, but it seems to still be wo..
How to Render a React Class Component to the DOM
This shows how you can get react to render a component into the page or DOM. So actually getting and showing the code that you have been writing in react.
set a cookie on click and then check if the cookie is set and dont show that message again
this script shows a message, and if the message is closed it will set a cookie to not show that message again for 1 day. The cookie in this example is set to expire in a day, so then if you com..
How to Use React to Render Nested Components
It can be useful to take components and render them inside other components while still making them into seperate items. This shows how you can take each component and nest it within another one and ..
How to Create a Component with Composition in React
This shows how you can compose multiple React components together. In this example we return the parent component which has within it the child component, you can add as many child components as requ..
How to Create a React Component using the ES6 class method
One way to add a react component is to use the Stateless Functional Component method, and another way is to use the ES6 extends syntax. This method seems more complex than the 1st for some reason mayb..
react hello world with time and date updating
here is a react hello world with the date and time updating on setInterval 1000 miliseconds. Again with react it has to be compiled from JSX for it to work, so i have included the original and ..
views list function for checking what views have been made on the current week
this is related to the views class that i added with monthly week number and yearly views, this is the function that i use to extract the top viewed pages for the week num, month num and year num. I ..
wordpress show page content on template file
shows the page content on a wordpress template file
vertically align text within a fixed height div using flex
this can be used to make text align nicely while still keeping the same layout. the example below shows how you can set the height of the containing element and still have the text aligned center to ..
how to view a web page in its printer format
if you have to check a website in its print or @media print format this is how you can emulate it in browser if you are using chrome or edge. Open the Dev Tools (usually F12) Click the menu ..
show the browsers name in javascript
This function will show you an alert box with the name of your browser, however im using brave at the moment and it shows as Netscape, so i guess you cant trust the result. Also i just discover..
loop through object json javascript
this shows how you can loop through a javascript object using for if you check the console you can see the loop results
using multiple text shadow
sometimes you want to use more than one text shadow, like if you want one with 2px on the bottom left and then one with 2px on the top right, so you can get a full outline or a more even shadow on you..
change the cursor to a pointer for an element
i find this class quite useful if you are adding a javascript click event to an element, and need the mouse to look like its a click item rather than just a normal item. If you mouse over the test ..
test page for the custom css 12 grid used on this site
This is my testing page for the grid used on this site, it shows elements and other things for use on the grid and other general formatting.
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
list items from blog and filter by category name
this is a bit raw, but shows the $args = array('category_name' => 'Categy Name 1','Categy Name 2','Categy Name 3' => 8, 'paged' => $paged ); for querying the category_name to do multiple pro..
country select javascript check which option is selected and show a hidden element
this shows a country dropdown and then if a selected country name is matched it will show the second part of the form for this test australia is the confirmed country
hide parts of a form until the 1st item is selected
this code can be used when you just want to show the 1st field on a form then when it is selected it shows the rest of the form elements
Add a post date to your custom wordpress post listing
this is an example using: get_the_date: this one gets the post date the_excerpt: which gets the .. excerpt or summary text from the post and get_the_post_thumbnail_url which gets the image from th..
Get the documentURI with JS
This function gets the current document URI assigns it to the variable documentURI so it can be reused and shows it in the result area once you click on run function.
Prevent Object Mutation
This shows how you can lock an object so its content cannot be modified. if you comment out the line Object.freeze(my_object); it will allow it to be modified again.
using let rather than var
Using let rather than var and use strict can avoid some overwriting of variables i will write a function here that shows how let throws an error. This function now gives an error in the console. Uncau..
Radial Click Effect
shows the radial click effect like in the material design, so when you click a button it will show a click at that area with a nice animation. Uses CSS and javascript to generate this effect.
using switch in a function
This shows an example using the switch to select multiple options in a function, you can return from the switch with break, or you can end the whole function with return.
jqueryui date selector
This has to be one of the most used date picker items from jquery ui. And its usually the reason i even include jquery ui. Without using a theme this one looks pretty good. This version of it does n..
