├── Auto Completion Text Box ├── index.html ├── script.js └── style.css ├── Back to Top ├── index.html └── style.css ├── Content Slider ├── arrow-left-out.svg ├── arrow-left-over.svg ├── arrow-right-out.svg ├── arrow-right-over.svg ├── arrow-right.svg ├── index.html ├── script.js └── style.css ├── Image Lightbox ├── images │ ├── image-1.jpeg │ ├── image-2.jpeg │ ├── image-3.jpeg │ ├── image-4.jpeg │ ├── image-5.jpeg │ ├── image-6.jpeg │ ├── image-thumb-1.jpeg │ ├── image-thumb-2.jpeg │ ├── image-thumb-3.jpeg │ ├── image-thumb-4.jpeg │ ├── image-thumb-5.jpeg │ ├── image-thumb-6.jpeg │ └── loading.gif ├── index.html ├── script.js └── style.css ├── README.md └── Tab Control ├── index.html ├── script.js └── style.css /Auto Completion Text Box/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript for Web Designers - Textbox autocomplete demo 6 | 7 | 8 | 9 | 10 |
11 |
12 | 13 | 14 |
15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Auto Completion Text Box/script.js: -------------------------------------------------------------------------------- 1 | var targetInput = document.getElementById("country"), 2 | results = document.getElementById("autocomplete-results"); 3 | countryList = ['Albania', 'Colombia', 'Cuba', 'El Salvador', 'India', 'Jordan', 'Kenya', 'Nepal', 'Romania', 'Sri Lanka', 'Wales'], 4 | matches = [], 5 | resultsCursor = 0; 6 | 7 | targetInput.focus(); 8 | 9 | targetInput.addEventListener("keydown", function(event) { 10 | if (event.keyCode == "13") { 11 | event.preventDefault(); 12 | } 13 | }) 14 | 15 | targetInput.addEventListener("keyup", function(event) { 16 | /* Key codes: 17 | Enter - 13 18 | Arrow up - 38 19 | Arrow down - 40 */ 20 | 21 | results.innerHTML = ""; 22 | toggleResults("hide"); 23 | 24 | if (this.value.length > 0) { 25 | matches = getMatches(this.value); 26 | } 27 | 28 | if (matches.length > 0) { 29 | displayMatches(matches); 30 | } 31 | 32 | if (results.classList.contains("visible")) { 33 | switch(event.keyCode) { 34 | case 13: targetInput.value = results.children[resultsCursor].innerHTML; 35 | toggleResults("hide"); 36 | resultsCursor = 0; 37 | break; 38 | case 38: if (resultsCursor > 0) { 39 | resultsCursor--; 40 | 41 | moveCursor(resultsCursor); 42 | } 43 | break; 44 | case 40: if (resultsCursor < (matches.length - 1)) { 45 | resultsCursor++; 46 | 47 | moveCursor(resultsCursor); 48 | } 49 | break; 50 | 51 | case 8: if (this.value.length == 0) 52 | toggleResults("hide"); 53 | break; 54 | } 55 | } 56 | }); 57 | 58 | function toggleResults(action) { 59 | if (action == "show") { 60 | results.classList.add("visible"); 61 | } else { 62 | results.classList.remove("visible"); 63 | } 64 | } 65 | 66 | function getMatches(inputText) { 67 | matches = [] 68 | 69 | for (var i = 0; i < countryList.length; i++) { 70 | if (countryList[i].toLowerCase().indexOf(inputText.toLowerCase()) != -1) { 71 | matches.push(countryList[i]); 72 | } 73 | } 74 | 75 | return matches; 76 | } 77 | 78 | function displayMatches(matches) { 79 | var j = 0; 80 | 81 | while (j < matches.length) { 82 | results.innerHTML += '
  • ' + matches[j] + '
  • '; 83 | j++; 84 | } 85 | 86 | moveCursor(resultsCursor); 87 | 88 | toggleResults("show"); 89 | } 90 | 91 | function moveCursor(pos) { 92 | for (var x = 0; x < results.children.length; x++) { 93 | results.children[x].classList.remove('highlighted'); 94 | } 95 | 96 | results.children[pos].classList.add('highlighted'); 97 | } 98 | -------------------------------------------------------------------------------- /Auto Completion Text Box/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | -webkit-font-smoothing: antialised; 4 | } 5 | 6 | body { 7 | background-color: #fbfdff; 8 | font: 16px/1.5 Helvetica, Arial, sans-serif; 9 | color: #5E6063; 10 | } 11 | 12 | .container { 13 | width: 30em; 14 | margin: 10em auto; 15 | } 16 | 17 | label { 18 | display: block; 19 | margin-bottom: 1em; 20 | font-weight: bold; 21 | } 22 | 23 | input[type="text"] { 24 | width: 100%; 25 | background: #FFFFFF; 26 | border: none; 27 | border: 1px solid #E2E8EE; 28 | box-shadow: 0 0 0 10px rgba(146,151,156,0.03); 29 | border-radius: 5px; 30 | height: 60px; 31 | font-size: 20px; 32 | outline: none; 33 | padding-left: 1em; 34 | } 35 | 36 | #autocomplete-results { 37 | opacity: 0; 38 | color: #8B8D90; 39 | background: #FFFFFF; 40 | border: 1px solid #E2E8EE; 41 | font-size: 20px; 42 | margin: 10px 0 0 0; 43 | padding: 0; 44 | } 45 | 46 | #autocomplete-results li { 47 | list-style: none; 48 | padding: 1em; 49 | } 50 | 51 | #autocomplete-results li.highlighted { 52 | background-color: #E2E8EE; 53 | color: #5E6063; 54 | } 55 | 56 | #autocomplete-results.visible { 57 | opacity: 1; 58 | } 59 | -------------------------------------------------------------------------------- /Back to Top/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript for Web Designers - Back to top button demo 6 | 7 | 8 | 9 | 10 | 11 |
    12 |

    Moby Dick

    13 |

    by Herman Melville

    14 |
    15 | 16 |
    17 |

    Presently a breeze sprang up; Stubb feigned to cast off from the whale; hoisting his boats, the Frenchman soon increased his distance, while the Pequod slid in between him and Stubb's whale. Whereupon Stubb quickly pulled to the floating body, and hailing the Pequod to give notice of his intentions, at once proceeded to reap the fruit of his unrighteous cunning. Seizing his sharp boat-spade, he commenced an excavation in the body, a little behind the side fin. You would almost have thought he was digging a cellar there in the sea; and when at length his spade struck against the gaunt ribs, it was like turning up old Roman tiles and pottery buried in fat English loam. His boat's crew were all in high excitement, eagerly helping their chief, and looking as anxious as gold-hunters.

    18 | 19 |

    And all the time numberless fowls were diving, and ducking, and screaming, and yelling, and fighting around them. Stubb was beginning to look disappointed, especially as the horrible nosegay increased, when suddenly from out the very heart of this plague, there stole a faint stream of perfume, which flowed through the tide of bad smells without being absorbed by it, as one river will flow into and then along with another, without at all blending with it for a time.

    20 | 21 |

    "I have it, I have it," cried Stubb, with delight, striking something in the subterranean regions, "a purse! a purse!"

    22 | 23 |

    Dropping his spade, he thrust both hands in, and drew out handfuls of something that looked like ripe Windsor soap, or rich mottled old cheese; very unctuous and savory withal. You might easily dent it with your thumb; it is of a hue between yellow and ash colour. And this, good friends, is ambergris, worth a gold guinea an ounce to any druggist. Some six handfuls were obtained; but more was unavoidably lost in the sea, and still more, perhaps, might have been secured were it not for impatient Ahab's loud command to Stubb to desist, and come on board, else the ship would bid them good bye.

    24 | 25 |

    Now this ambergris is a very curious substance, and so important as an article of commerce, that in 1791 a certain Nantucket-born Captain Coffin was examined at the bar of the English House of Commons on that subject. For at that time, and indeed until a comparatively late day, the precise origin of ambergris remained, like amber itself, a problem to the learned. Though the word ambergris is but the French compound for grey amber, yet the two substances are quite distinct. For amber, though at times found on the sea-coast, is also dug up in some far inland soils, whereas ambergris is never found except upon the sea. Besides, amber is a hard, transparent, brittle, odorless substance, used for mouth-pieces to pipes, for beads and ornaments; but ambergris is soft, waxy, and so highly fragrant and spicy, that it is largely used in perfumery, in pastiles, precious candles, hair-powders, and pomatum. The Turks use it in cooking, and also carry it to Mecca, for the same purpose that frankincense is carried to St. Peter's in Rome. Some wine merchants drop a few grains into claret, to flavor it.

    26 | 27 |

    Who would think, then, that such fine ladies and gentlemen should regale themselves with an essence found in the inglorious bowels of a sick whale! Yet so it is. By some, ambergris is supposed to be the cause, and by others the effect, of the dyspepsia in the whale. How to cure such a dyspepsia it were hard to say, unless by administering three or four boat loads of Brandreth's pills, and then running out of harm's way, as laborers do in blasting rocks.

    28 |
    29 | 30 | 34 | 35 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /Back to Top/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | -webkit-font-smoothing: antialised; 4 | } 5 | 6 | body { 7 | background-color: #313944; 8 | padding: 5em 20em; 9 | } 10 | 11 | h1 { 12 | color: #fff; 13 | font-family: 'Cormorant Infant'; 14 | font-size: 72px; 15 | font-weight: 700; 16 | line-height: 72px; 17 | letter-spacing: -1px; 18 | margin-bottom: 48px; 19 | text-align: center; 20 | } 21 | 22 | h1:after { 23 | color: #1fcfcb; 24 | display: block; 25 | content: '. . .'; 26 | font-size: 26px; 27 | line-height: 24px; 28 | height: 24px; 29 | margin: 48px auto; 30 | } 31 | 32 | h2 { 33 | color: #fff; 34 | font-family: 'Cormorant Infant'; 35 | font-size: 54px; 36 | font-weight: 700; 37 | line-height: 72px; 38 | letter-spacing: -1px; 39 | margin-bottom: 48px; 40 | text-align: center; 41 | } 42 | 43 | p { 44 | color: #bbc8d8; 45 | font-family: 'Lato'; 46 | font-size: 22px; 47 | font-weight: 500; 48 | line-height: 36px; 49 | margin-bottom: 36px; 50 | text-align: center; 51 | } 52 | 53 | a { 54 | color: #1fcfcb; 55 | font-family: 'Lato'; 56 | } 57 | 58 | a:hover { 59 | color: #fff; 60 | } 61 | 62 | #back-to-top { 63 | position: fixed; 64 | bottom: 3em; 65 | right: 3em; 66 | background-color: rgba(255, 255, 255, .9); 67 | color: #313943; 68 | border: none; 69 | border-radius: 5px; 70 | padding: 1em; 71 | text-transform: uppercase; 72 | cursor: pointer; 73 | font-weight: 700; 74 | box-shadow: 0 0 2em 0 rgba(0, 0, 0, .25); 75 | transition: all .3s ease-in-out; 76 | display: inline-block; 77 | opacity: 0; 78 | text-decoration: none; 79 | font-size: .75em; 80 | } 81 | 82 | #back-to-top:hover { 83 | background-color: #fff; 84 | padding: 1em 3em; 85 | } 86 | 87 | #back-to-top.visible { 88 | opacity: 1; 89 | } 90 | -------------------------------------------------------------------------------- /Content Slider/arrow-left-out.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 2 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Content Slider/arrow-left-over.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 2 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Content Slider/arrow-right-out.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 2 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Content Slider/arrow-right-over.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 2 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Content Slider/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Content Slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript for Web Designers - Simple content slider demo 6 | 7 | 8 | 9 | 10 |
    11 | 55 | 56 | 57 | 58 |
    59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /Content Slider/script.js: -------------------------------------------------------------------------------- 1 | var slides = document.getElementsByClassName("slide"), 2 | slider = document.getElementById("slider"), 3 | cursor = 0, 4 | slideWidth = 0, 5 | topHeight = 0, 6 | slideCount = slides.length; 7 | 8 | if (slideCount > 0) { 9 | slideWidth = slides[0].offsetWidth; 10 | 11 | for (var i = 0; i < slideCount; i++) { 12 | slides[i].style.left = slideWidth * i + "px"; 13 | } 14 | 15 | calculateTallestSlide(); 16 | 17 | for (var i = 0; i < slideCount; i++) { 18 | slides[i].classList.add("animated"); 19 | } 20 | 21 | document.getElementById("next").addEventListener("click", function(event) { 22 | event.preventDefault(); 23 | 24 | if (cursor < slideCount - 1) { 25 | moveSlides("forward"); 26 | cursor++; 27 | } 28 | }); 29 | 30 | document.getElementById("prev").addEventListener("click", function(event) { 31 | event.preventDefault(); 32 | 33 | if (cursor > 0) { 34 | moveSlides("backward"); 35 | cursor--; 36 | } 37 | }); 38 | 39 | window.addEventListener('resize', function() { 40 | // Get the new slide width 41 | slideWidth = slides[0].offsetWidth; 42 | 43 | // Recalculate the left position of the slides 44 | for (i = 0; i < slides.length; i++) { 45 | if (i <= cursor) { 46 | slides[i].style.left = "-" + slideWidth * (cursor - i) + "px"; 47 | } else if (i > cursor) { 48 | slides[i].style.left = slideWidth * (i - cursor) + "px"; 49 | } 50 | } 51 | 52 | // Recalculate the height of the tallest slide 53 | calculateTallestSlide(); 54 | }); 55 | } 56 | 57 | function calculateTallestSlide() { 58 | for (var i = 0; i < slideCount; i++) { 59 | if (slides[i].offsetHeight > topHeight) { 60 | topHeight = slides[i].offsetHeight; 61 | } 62 | } 63 | 64 | slider.style.height = topHeight + "px"; 65 | } 66 | 67 | function moveSlides(direction) { 68 | for (var j = 0; j < slides.length; j++) { 69 | if (direction == "backward") { 70 | slides[j].style.left = +slides[j].style.left.replace(/[^-\d\.]/g, '') + slideWidth + "px"; 71 | } else if (direction == "forward") { 72 | slides[j].style.left = +slides[j].style.left.replace(/[^-\d\.]/g, '') - slideWidth + "px"; 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /Content Slider/style.css: -------------------------------------------------------------------------------- 1 | /* General styles */ 2 | * { 3 | box-sizing: border-box; 4 | -webkit-font-smoothing: antialised; 5 | } 6 | 7 | body { 8 | margin-top: 5em; 9 | font: 20px/1.5 "Helvetica", Arial, sans-serif; 10 | } 11 | 12 | .container { 13 | position: relative; 14 | } 15 | 16 | .slider-container { 17 | position: relative; 18 | overflow: hidden; 19 | width: 80%; 20 | left: 10%; 21 | } 22 | 23 | .slide { 24 | position: absolute; 25 | width: 100%; 26 | top: 50%; 27 | left: 0; 28 | transform: translateY(-50%); 29 | text-align: center; 30 | } 31 | 32 | .slide.animated { 33 | -webkit-transition: left .3s ease-in; 34 | transition: left .3s ease-in; 35 | } 36 | 37 | blockquote { 38 | color: #636363; 39 | font-weight: 300; 40 | font-style: italic; 41 | margin-bottom: 1.5em; 42 | } 43 | 44 | cite { 45 | font-size: .75em; 46 | font-weight: 700; 47 | font-style: normal; 48 | } 49 | 50 | /* Utility */ 51 | .simple-list { 52 | list-style-type: none; 53 | margin: 0; 54 | padding: 0; 55 | } 56 | 57 | /* Nav */ 58 | #prev, 59 | #next { 60 | position: absolute; 61 | top: 50%; 62 | transform: translateY(-50%); 63 | z-index: 999999; 64 | display: inline-block; 65 | height: 5em; 66 | width: 5em; 67 | border-radius: 50%; 68 | background-position: center center; 69 | background-repeat: no-repeat; 70 | -webkit-transition: all .3s ease-in; 71 | transition: all .3s ease-in; 72 | } 73 | 74 | #prev { background-image: url('arrow-left-out.svg'); } 75 | 76 | #prev:hover { background-image: url('arrow-left-over.svg'); } 77 | 78 | #next { 79 | right: 0; 80 | background-image: url('arrow-right-out.svg'); 81 | } 82 | 83 | #next:hover { background-image: url('arrow-right-over.svg'); } 84 | -------------------------------------------------------------------------------- /Image Lightbox/images/image-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MihirShri/Javascript-mini-projects/08cebf0199d4c9072da97685dcf7ab935b985c6b/Image Lightbox/images/image-1.jpeg -------------------------------------------------------------------------------- /Image Lightbox/images/image-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MihirShri/Javascript-mini-projects/08cebf0199d4c9072da97685dcf7ab935b985c6b/Image Lightbox/images/image-2.jpeg -------------------------------------------------------------------------------- /Image Lightbox/images/image-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MihirShri/Javascript-mini-projects/08cebf0199d4c9072da97685dcf7ab935b985c6b/Image Lightbox/images/image-3.jpeg -------------------------------------------------------------------------------- /Image Lightbox/images/image-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MihirShri/Javascript-mini-projects/08cebf0199d4c9072da97685dcf7ab935b985c6b/Image Lightbox/images/image-4.jpeg -------------------------------------------------------------------------------- /Image Lightbox/images/image-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MihirShri/Javascript-mini-projects/08cebf0199d4c9072da97685dcf7ab935b985c6b/Image Lightbox/images/image-5.jpeg -------------------------------------------------------------------------------- /Image Lightbox/images/image-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MihirShri/Javascript-mini-projects/08cebf0199d4c9072da97685dcf7ab935b985c6b/Image Lightbox/images/image-6.jpeg -------------------------------------------------------------------------------- /Image Lightbox/images/image-thumb-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MihirShri/Javascript-mini-projects/08cebf0199d4c9072da97685dcf7ab935b985c6b/Image Lightbox/images/image-thumb-1.jpeg -------------------------------------------------------------------------------- /Image Lightbox/images/image-thumb-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MihirShri/Javascript-mini-projects/08cebf0199d4c9072da97685dcf7ab935b985c6b/Image Lightbox/images/image-thumb-2.jpeg -------------------------------------------------------------------------------- /Image Lightbox/images/image-thumb-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MihirShri/Javascript-mini-projects/08cebf0199d4c9072da97685dcf7ab935b985c6b/Image Lightbox/images/image-thumb-3.jpeg -------------------------------------------------------------------------------- /Image Lightbox/images/image-thumb-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MihirShri/Javascript-mini-projects/08cebf0199d4c9072da97685dcf7ab935b985c6b/Image Lightbox/images/image-thumb-4.jpeg -------------------------------------------------------------------------------- /Image Lightbox/images/image-thumb-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MihirShri/Javascript-mini-projects/08cebf0199d4c9072da97685dcf7ab935b985c6b/Image Lightbox/images/image-thumb-5.jpeg -------------------------------------------------------------------------------- /Image Lightbox/images/image-thumb-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MihirShri/Javascript-mini-projects/08cebf0199d4c9072da97685dcf7ab935b985c6b/Image Lightbox/images/image-thumb-6.jpeg -------------------------------------------------------------------------------- /Image Lightbox/images/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MihirShri/Javascript-mini-projects/08cebf0199d4c9072da97685dcf7ab935b985c6b/Image Lightbox/images/loading.gif -------------------------------------------------------------------------------- /Image Lightbox/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript for Web Designers - Simple image lightbox demo 6 | 7 | 8 | 9 | 10 | 20 | 21 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Image Lightbox/script.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("click", lightBoxClick); 2 | 3 | function lightBoxClick(event) { 4 | var elem = event.target, 5 | elemID = elem.getAttribute("id"), 6 | lightboxImg = document.getElementById("lightbox-image"), 7 | lightbox = document.getElementById("lightbox-overlay"), 8 | newImg = new Image(); 9 | 10 | if (elem.hasAttribute('data-lightbox')) { 11 | event.preventDefault(); 12 | 13 | newImg.onload = function() { 14 | lightboxImg.src = this.src; 15 | } 16 | 17 | lightboxImg.src = ''; 18 | newImg.src = elem.getAttribute("data-lightbox"); 19 | lightbox.classList.add("visible"); 20 | } 21 | 22 | if (/*elemID == 'lightbox-image' ||*/ elemID == 'lightbox-overlay') { 23 | event.preventDefault(); 24 | 25 | lightbox.classList.remove("visible"); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Image Lightbox/style.css: -------------------------------------------------------------------------------- 1 | /* General styles */ 2 | * { 3 | box-sizing: border-box; 4 | -webkit-font-smoothing: antialised; 5 | } 6 | 7 | img { 8 | max-width: 100%; 9 | height: auto; 10 | } 11 | 12 | .gallery { 13 | margin: 0; 14 | padding: 0; 15 | list-style: none; 16 | } 17 | 18 | .gallery li { 19 | float: left; 20 | width: 48%; 21 | margin: 1%; 22 | } 23 | 24 | .gallery li img { 25 | transition: opacity .3s ease-in-out; 26 | } 27 | 28 | .gallery li img:hover { 29 | opacity: .75; 30 | } 31 | 32 | #lightbox-overlay { 33 | opacity: 0; 34 | pointer-events: none; 35 | position: fixed; 36 | width: 100%; 37 | height: 100%; 38 | top: 0; 39 | left: 0; 40 | background-color: rgba(29, 31, 33, .95); 41 | transition: opacity .3s ease-in; 42 | } 43 | 44 | #lightbox-overlay.visible { 45 | opacity: 1; 46 | pointer-events: auto; 47 | } 48 | 49 | #lightbox-image { 50 | max-height: 90%; 51 | position: absolute; 52 | left: 50%; 53 | top: 50%; 54 | transform: translate(-50%, -50%); 55 | max-width: 90%; 56 | background: transparent url("images/loading.gif") 50% 50% no-repeat; 57 | text-indent: -99999px; 58 | } 59 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Javascript-mini-projects 2 | This repository contains 5 mini projects done using vanilla Javascript. 3 | 4 | # Get-Started 5 | Just search for the "index.html" file and open it in a browser to see that particular project. 6 | -------------------------------------------------------------------------------- /Tab Control/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript for Web Designers - Simple tabs demo 6 | 7 | 8 | 9 | 10 |
    11 | 16 | 33 |
    34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /Tab Control/script.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('click', tabClick); 2 | 3 | function tabClick(event) { 4 | var elem = event.target, 5 | elemHREF = elem.getAttribute('href'), 6 | tabs = document.querySelectorAll('.tabs li a'), 7 | tabContents = document.querySelectorAll('.tab-contents li'); 8 | 9 | if (elemHREF != null && elemHREF.indexOf('tab-') != -1) { 10 | event.preventDefault(); 11 | 12 | if (elem.className.indexOf('active') == -1) { 13 | for (var i = 0; i < tabs.length; i++) { 14 | tabs[i].classList.remove('active'); 15 | tabContents[i].classList.remove('visible'); 16 | } 17 | 18 | elem.classList.add('active'); 19 | document.getElementById(elemHREF).classList.add('visible'); 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /Tab Control/style.css: -------------------------------------------------------------------------------- 1 | /* General styles */ 2 | * { 3 | box-sizing: border-box; 4 | -webkit-font-smoothing: antialised; 5 | } 6 | 7 | body { 8 | margin-top: 5em; 9 | font: 300 20px/1.5 "Helvetica", Arial, sans-serif; 10 | } 11 | 12 | .container { 13 | width: 75%; 14 | margin: 0 auto; 15 | } 16 | 17 | /* Tab styles */ 18 | .tabs, 19 | .tab-contents { 20 | list-style: none; 21 | margin: 0; 22 | padding: 0; 23 | } 24 | 25 | .tabs { 26 | text-align: center; 27 | font-size: 0; 28 | } 29 | 30 | .tabs li { 31 | display: inline; 32 | } 33 | 34 | .tabs li a { 35 | font-weight: 700; 36 | font-size: 16px; 37 | text-decoration: none; 38 | color: #8D8D8D; 39 | border: 1px solid #DCDADA; 40 | background-color: #F5F5F5; 41 | height: 5em; 42 | line-height: 5em; 43 | display: inline-block; 44 | padding: 0 3em; 45 | transition: all .3s ease; 46 | } 47 | 48 | .tabs li a.active { 49 | background-color: #FFFFFF; 50 | color: #424242; 51 | cursor: default; 52 | } 53 | 54 | .tabs li a:hover:not(.active) { 55 | background-color: rgba(245, 245, 245, .25); 56 | color: #424242; 57 | } 58 | 59 | 60 | .tabs li:first-child a { 61 | border-radius: 5px 0 0 5px; 62 | } 63 | 64 | .tabs li:last-child a { 65 | border-radius: 0 5px 5px 0; 66 | } 67 | 68 | .tabs li:not(:first-child) { 69 | margin-left: -1px; 70 | } 71 | 72 | .tab-contents { 73 | width: 100%; 74 | position: relative; 75 | } 76 | 77 | .tab-contents li { 78 | padding: 2em; 79 | position: absolute; 80 | top: 0; 81 | left: 0; 82 | opacity: 0; 83 | transition: opacity .3s ease; 84 | pointer-events: none; 85 | } 86 | 87 | .tab-contents li.visible { 88 | opacity: 1; 89 | pointer-events: auto; 90 | } 91 | --------------------------------------------------------------------------------