Web Development Projects | Website Applications | HarrisWeb Creative | Milton Ontario

Web Applications You Can Learn From

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.

How to Code a Responsive Navigation From Scratch

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.

Simple Responsive Slider

  • img/slider-project-images/image1.jpg
  • img/slider-project-images/image2.jpg
  • img/slider-project-images/image3.jpg
  • img/slider-project-images/image4.jpg
  • img/slider-project-images/image5.jpg
  • Woman With Horse
  • Fast Car
  • Lillies
  • Pretty Eyes
  • don Quixote
  • This is a dramatic shot of a young woman with a horse
  • Nice seaside shot of a red convertible Porsche
  • Top-lit calla-lillies on black, taken with Canon EOS Rebel T6i, 100mm lens, F4.2
  • Exceptionally Pretty Eyes - Model: Tara Ambrosie, Rome, Italy, 2005
  • Don Quixote is a 1955 sketch by Pablo Picasso of the Spanish literary hero and his sidekick, Sancho Panza. It was featured on the August 18–24 issue of the French weekly journal Les Lettres Françaises in celebration of the 350th anniversary of the first part of Cervantes’s Don Quixote.

Title

prev

Slide Title

Lorem ipsum dolor sit amet, in suspendisse odio arcu morbi est ut, tellus velit risus cum viverra libero, tincidunt ultrices libero quasi est sem aliquam, a purus orci feugiat duis. Mauris imperdiet sed ac dui mi vitae. Ridiculus eu vehicula euismod ut, est non eget nisl

Slider Development by HarrisWeb
next
Full size slider example here

Free Responsive Slider Download

Download files here

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:

  1. width in percent or pixels
  2. height in pixels
  3. show or hide the following:
    • prev/next arrows
    • border
    • title
    • slide title
    • slide description
  4. choose to cover slide with image or contain whole image within the slide body
  5. choose the position of the slide image within the slide body top, bottom, center, left, right, center
  6. choose to auto-start or not
  7. choose fade-in and fade-out speeds
  8. choose auto-start time between slides

How to Make Videos Mobile Responsive

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}) ; 
									
		}
	});
});

Reviews

ThreeBest Rated Badge | HarrisWeb Creative

Our Clients Drive Our Business

Here's what they have to say:

Contact Us for a Quote
Reviewer Published: 2024-11-05
⭐⭐⭐⭐⭐
Review Pending

Pause or Play Reviews