Search
Search Code
Left Fixed nav with right fluid content
left fixed nav section with right fluid section css and html using flexbox
slick slider section quick add
everything you need for a quick slide section
four box section template in foundation with classes find and replace (4 box)
this section uses the large-auto classes so you can add or remove boxes easily. find and replace the name "boxsection" to rename your new classes for the section I have layed this one out a ..
four box responsive section with all classes find and replace boxsection title foundation grid (4 box)
four box responsive grid, find and replace the word... boxsection with your new section name to generate all class names and section names to match for rapid section creation. Demo Codepen
Google Font Embed - Play Gaming Font
Quick Embed Codes for the google font Play, kind of a gaming style of font. As usual you can choose the @import or the link tags in the scripts section to embed this font quickly. Then apply the c..
two box responsive section with all classes find and replace boxsection title foundation grid (2 box)
easy copy and paste section and find replace the word boxsection with your new class names, using foundation grid.
basic section item with foundation wrap and grid - single item in section
section with inner and outer css selectors for reuse and basic layout formatting. you can then search for "section-name" and replace it with your own section name. section-name section-name..
Factorio Megabase-In-A-Book
Just in case i decide to start up playing factorio again... Megabase in a Book Lets Play Book Contents Copper Smelting Iron Smelting Steel Smelting (from Ore) Steel Smelting (from Plate) Gr..
Welcome Widget Card - Toggle
Testing the welcome widget with a more or less toggle. This version seems to work, with a jquery slide toggle.
content-visibility and contain-intrinsic-size for page load rendering speed increase
interested to see if this makes any difference content-visibility The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcin..
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..
Footer Design and Redesign
I never usually look this far down on the site, but its a bit average... Lets fix it! Some simple changes Just a few elements added and moved around a bit. Added another row to the f..
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..
Core Function : list_search_by_class_return_links - List Searches by Class Type and Return Links
Function that list's the latest and top searches by the class name and return a list of links, with the search totals on them. I wanted to extract the top searches and the latest searches by da..
simple javascript no library accordion
a simple button and div based accordion with a toggled indicator
Spam IP Database and delete button
The Background and Reason for the SPAM IP Database and Delete I actually wrote up half of this article and was still testing the function and lost the whole post, which will teach me for adding it st..
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>
foundation three boxes with text align links to the bottom of element
For some reason i had the request to align the links in three boxes with different height text, not sure why they wanted them aligned, but i guess my task is not too question that but to fix it. ..
using css counter-increment to add numbering to elements
i just found this element in css where you can add numbering to elements, very handy to add counters and things. This uses the counter-increment: section; in the main element and then adds the ..
timeline class and function
this is a class extend that generates a timeline based on structured data and order's the items by year decending. this code will not work out of the box as it has other requirements, but it is a goo..
responsive three box section with tabular data or table data
here is a section in foundation with 3 hero boxes with images on top, and then a title and some tabular (is that the same as table?) data in each box, so could be good for some kinda products and then..
stackable bio or biography list with portrait image title and text
a nice easily stackable bio or biography list done in foundation, just duplicate the bio-item and switch out the content and you have a nice responsive bio layout. As its in foundation here is ..
easy section wrap in foundation - 3 boxes responsive
this is a 3 box section responsive wrap in foundation, you can change this to large-auto if you want to have multiple boxes
easy section wrap in foundation
i am always writing these wrap sections so i thought i would just add a basic one here, easy to copy and paste into a new section
animated duck on footer
Thought this was cool. How do i do it? Page Source: https://www.learninpublic.org/ Copy this section Lets see what is attached to it. So i can see from the classes its a tailwind based ..
creating embedded php code from a database field
i actually dont know why i didnt think of doing this earlier, i already have the php code field in these code articles. I thought why not embed this code into an actual file and then run it as a test..
center mode slick zoom testing
update : this is a tricky one to get working! I have done a lot of testing on this one, and got a demo working from a combination of the following links. the demo is still not 100% styled, but its..
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
install atom editor on ubuntu
You can download atom from https://atom.io/ and run the .deb package or if you want to use apt you will need to add it as a repository. https://flight-manual.atom.io/getting-started/sections/installi..
Monitoring Visible Objects on Screen
i found this one when researching how to detect visible objects on screen, and then doing something with them. This one does not use any external scripts to change the box colour as it becomes visible..
hero box with title sub title logos and call to action buttons
Here is a basic hero box section that contains: Title Sub Title 6 Logos (could replace with carousel logos) 2 call to action buttons I think it can be made more responsive, by replacing the..
fixing the website footer and making it less ugly
Here i show you in a couple of steps how to make the footer on this site look nicer, while actually doing it. Here is what the footer currently looks like. Yep pretty average looking. Lets add a ..
