Search
Search Code
css cursor types testing
testing all (most) of the available css cursor types, you can mouse over to test how the cursors react depending on your browser type and operating system. refs https://developer.mozilla.org/e..
Boots Widget change from widget to cat head and click function
Moving this from the widget area to the bottom, to make it less obvious but still there if needed.
Regions of New Zealand - In Dropdown Form
Split into north and south island lists Also added a combined list, with a disabled options for north and south. /your welcome! :)
Darkmode JS - Add darkmode to your site with one script
This library looks really nice! It drops in ok, but maybe with more complex layouts or coloring, it seems to break a little bit. Darkmode JS Example Source Links https://darkmodejs.learn.un..
add a divider to your dropdown nav toggles
good for seperating menu sections in the same dropdown item add this to your toggle <li><hr class="dropdown-divider"></li>
Idea: Google Font Dropdown Selector Code
just an idea at the moment, a dropdown list of google fonts and when selected it loads that selected font using the @import css tag. Loading the fonts Gist : not tested https://gist.github.com..
document placeholder for a4 in portrait
a nice document placeholder image with dropshadow and transparency
landscape image document placeholder
A nice landscape image of a blank presentation format, in landscape mode with drop shadow.
CSS Drawing - Beach Scene
i did this one a while ago, cantr even remember it just appeared when i searched in google. here is an animated version, check the bottom for the css version of this:
404 Error Page Codepen
found this in my links the other day, still looks cool...
dropdown section
What generates the dropdown widget items? generated by the function generate_section_button() per class template file section-dropdown-bootstrap.html
backdrop-filter: blur(10px);
just testing this filter
dropdown change input box on select
changes the value of an hidden input depending on the selection of the dropdown
css double page document preview with shadow
two div elements that look like blank documents with drop shadows
add years as options to select dropdown
add the years as dropdown items between a range of years with javascript document ready js only version
adding background blur to an image using css fill screen
I had noticed this cool looking effect used on places like google, and other sites that display portrait images, i think i saw it on the google home as well or maybe google photos. Its basicall..
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..
box shadow example(s) - drop shadow
I realised just now, that i dont have a box shadow example! How does that happen, its one of those css elements that i just use so much that i guess i forgot about it. Related Pages: https:/..
top bar overflow issues [fixed]
So i was just browsing throught the site checking for random errors, which there are quite a lot. And noticed this one. Quite a large bug caused by overflow issues in the main header, i think this ..
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.
add a jquery date picker to your text box
This JQuery UI Date picker is good if you want to add a nice dropdown date selector to your input box, rather than having to type in the date manually. Requires: JQuery JQuery UI Documen..
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 ..
setting up css variables in your stylesheet
Using css variables at the start of your stylesheet can make things down the road much easier to change. You can also use it for more complex variables like drop shadow settings as shown below. ..
drop shadow text class easy drop shadow
makes it a bit easier to read light text on a dark background or vice versa
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
country select javascript check which option is selected
this is an example of how you can get the selected country value with javascript from a html countries dropdown
php countries array to dropdown form element
here we generate a form dropdown from a php countries array using the country code as the name of the form option
extracting the useful bits of bootstrap
Back in the early instances of bootstrap they used to provide a build system for the individual components. It seems that these days its all or nothing, or use some kind of build tool to include the b..
Bootstrap 4 Center menu items in a navbar
Here we have an example bootstrap navbar you can find the original navbar here. I just want to center the menu item links so they dont appear over to the left on larger screens. Add the follow..
wordpress main nav dropdown fix
this unsets the flex and allows the menu items to stack properly in a dropdown menu, not sure if this is reusable
Dropdown Box with Searchable Text
Here we have a dropdown select box, that you can type into to search the available options. No Javascript Required for this the browser does all the work. Press into the text box, and you will see a..
Drop Down Menu Swapping Left align to Right
this is useful if you have a nav that hits the right side of the screen and you want it to open on the left rather than the right side. you can see on the very right drop down item opens with its item..
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..
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..
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..
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..
simple dropdown multi level navigation ul li css
updated to work standalone and not effect other list elements on the page
form elements australian state list
A list of the Australian States converted into a form element select option dropdown. Sorted in alphabetical order.
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..
emoji data - version 1.0
Emoji Data version 1.0 This is a better emoji list that you can search by title ctrl + f emoji-data.txt # Emoji Data for UTR #51 # # File: emoji-data.txt # Version: 1.0 # Date: 20..
Form elements New Zealand region list
A list of the Regions of New Zealand converted into a form element select option dropdown. Sorted in alphabetical order. Ready to paste into your own form.
color cycle drop shadow - rainbow drop shadow
Just incase you are bored with a static shadow, here you can cycle through a bunch of different shadow colours. .cycle-shadow { -webkit-animation:img-cycle 3s infinite; animation:img-cycle 3s i..
filter drop shadow
using a filter drop shadow can add shadow to transparent areas of a png filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.9));
simple dropin wordpress dropdown navigation css
this is good if you just want to drop in some css and get a dropdown navigation back using the default wordpress nav example of the default styles code (css) /* Menu Dropdown */ .nav ul { l..
set transparent menu over background image
this is probably obvious, but i found it useful for those themes that look nice with a semi-transparent header sitting over the top of an image. I think ill do this as an external example, as its eas..
