On this page I will present different projects involving concepts and code. These are free to use but come with no warranty. The projects will take different forms, some will be code, some video and others just explanations &mdash I am uncertain at this point what I will put up here or what form it will take.
In some ways this is my way of giving back to the community. My family has lived in Milton for 3 generations and supported our retail store on Main Street, Harris Stationery Limited & Harris Office Pro, for more than 60 years. If you own a small or medium size business in the community, I know you need a website. I also know you struggle under the workload you have now. I hope that some of the projects on this page can make your life easier and your understanding greater.
There is a lot of code out there for responsive navigation, I find a lot of it cumbersome and javaScript heavy. Though some form of javaScript is necessary for responsive navigation, much of the heavy lifting can be done with CSS. The jQuery script in this project came out to less than 30 lines.
I made a video recording of myself coding this and you can see it to the left here, or above if you are on a smaller screen. The video is about 1 hour long, but I hope at the end of it you will understand how to make your own responsive navigation from scratch.
The actual code for the project is in this blog post: How To Code a Responsive Navigation you can copy and paste it into your favourite text editor.
The HarrisWeb Simple Responsive Slider is just as it states, a very light-weight, less than 250 lines including documentation, slider with many options. It is also responsive if you set the width using a percent.
OPTIONS INCLUDE:
Video is great on websites and YouTube makes it very easy to embed a video into a webpage. You just paste a code that looks something like this:
<iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/ZQkLyGtItWE?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>
The problem is the width="560" and height="315" attributes of the iframe — these are hardcoded html values that no amount of CSS will change. You have to use javaScript to do that and add the class="video" to the iframe
Once you have done that, include the code below in your page either by using <script></script> tags or link to it using <script src="js/videoSize.js"></script> and the code will resize all the videos on the page according to the container size in which it is placed.
$(document).ready(function(){ $('.video').each(function(){ var containerWidth = $(this).parent().width(); var videoWidth = $(this).width(); var videoHeight = $(this).height(); var ratio = videoWidth/videoHeight; if(videoWidth > containerWidth){ var ratioHeight = containerWidth/ratio ; $(this).css({'width':containerWidth , 'height':ratioHeight}) ; } }); });