mjhjmtu

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); How TO - Search Menu ❮ Previous Next ❯ Learn how to create a search menu to filter links with JavaScript. Search/Filter Menu How to search for links in a navigation menu: Menu HTML CSS JavaScript PHP Python jQuery SQL Bootstrap Node.js Page Content Start to type for a specific category inside the search bar to "filter" the search options. Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text.. Some other text..Some text..Some text..Some text..Some text..Some text..Some text..Some text.. Some text.. function myFunction() { var input, filter, ul, li, a, i; input = document.getElementById("mySearch"); filter = input.value.toUpperCase(); ul = document.getElementById("myMenu"); l...

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); How TO - Responsive Top Navigation ❮ Previous Next ❯ Learn how to create a responsive top navigation menu with CSS and JavaScript. Responsive Navigation Bar Resize the browser window to see how the responsive navigation menu works: Home News Contact About function myFunction() { var x = document.getElementById("myUl"); if (x.className === "topnav2") { x.className += " responsive"; } else { x.className = "topnav2"; } } Try it Yourself » Create A Responsive Topnav Step 1) Add HTML: Example <!-- Load an icon library to show a hamburger menu (bars) on small screens --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="topnav" id=...

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); How TO - Top Navigation ❮ Previous Next ❯ Learn how to create a top navigation bar with CSS. Top Navigation Bar Home News Contact About Try it Yourself » Create A Top Navigation Bar Step 1) Add HTML: Example <div class="topnav">   <a class="active" href="#home">Home</a>   <a href="#news">News</a>   <a href="#contact">Contact</a>   <a href="#about">About</a> </div> Step 2) Add CSS: Example /* Add a black background color to the top navigation */ .topnav {     background-color: #333;     overflow: hidden; } /* Style the links inside the navigation bar */ .topnav a {     float: left;     color: #f2f2f2;     text-align: center;     padding: 14px 16px;     text-decoration: none;     font-size: 17px; } /* Cha...

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> How TO - Full Page Tabs ❮ Previous Next ❯ Learn how to create full page tabs, that covers the entire browser window, with CSS and JavaScript. Full Page Tabs Click on the links to display the "current" page: Home News Contact About Home Home is where the heart is.. News Some news this fine day! Contact Get in touch, or swing by for a cup of coffee. About Who we are and what we do. function openCity(cityName,elmnt,color) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < tablinks.length; i++) { tablinks[i].style.backgroundColor = ""; tablinks[i].style.color = ...

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> How TO - Tab Headers ❮ Previous Next ❯ Learn how to create tab headers with CSS and JavaScript. Tab Headers Click on the "city" buttons to display the appropriate header: London London is the capital city of England. Paris Paris is the capital of France. Tokyo Tokyo is the capital of Japan. Oslo Oslo is the capital of Norway. London Paris Tokyo Oslo function openCity(cityName,elmnt,color) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < tablinks.length; i++) { tablinks[i].style.backgroundColor = ""; tablinks[i].style.color = ""; } document.getE...

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> How TO - Vertical Tabs ❮ Previous Next ❯ Learn how to create a vertical tab menu with CSS and JavaScript. Vertical Tabs Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects. Try it Yourself » Create Togglable Vertical Tabs Step 1) Add HTML: Example <div class="tab">   <button class="tablinks" onclick="openCity(event, 'London')">London</button>   <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>   <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent">   <h3>London</h3>   <p>London is the capital city of England.</p> </div> <div...

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); How TO - Tabs ❮ Previous Next ❯ Learn how to create tabs with CSS and JavaScript. Tabs Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects: London Paris Tokyo London London is the capital city of England. Paris Paris is the capital of France. Tokyo Tokyo is the capital of Japan. Try it Yourself » openCity(event, "London") function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tabcontent.length; i++) { tablinks[i].classList.remove("active"); } docu...

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); How TO - Collapsibles/Accordion ❮ Previous Next ❯ Learn how to create an accordion (collapsible content). Accordion Accordions are useful when you want to toggle between hiding and showing large amount of content: Section 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Section 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Section 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mi...

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> How TO - Menu Icon ❮ Previous Next ❯ Learn how to create a menu icon with CSS. How To Create a Menu Icon If you are not using an icon library, you can create a basic menu icon with CSS: Menu Icon: Try it Yourself » Animated Menu Icon (click on it): Try it Yourself » function myFunction(x) { x.classList.toggle("change"); } Step 1) Add HTML: Example <div></div> <div></div> <div></div> Step 2) Add CSS: Example div {     width: 35px;     height: 5px;     background-color: black;     margin: 6px 0; } Try it Yourself » Example Explained The width and the height property specifies the width and height of each bar. We have added a black background-color , and the top and bottom margin is used to create some distance between each bar. <!-- mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,...

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); How TO - Icon Bar ❮ Previous Next ❯ Learn how to create icon bars with CSS. Vertical: Try it Yourself » Horizontal:   Try it Yourself » How To Create an Icon Bar Step 1) Add HTML: Example <!-- Add icon library --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="icon-bar">   <a class="active" href="#"><i class="fa fa-home"></i></a>   <a href="#"><i class="fa fa-search"></i></a>   <a href="#"><i class="fa fa-envelope"></i></a>   <a href="#"><i class="fa fa-globe"></i></a>   <a href="#">...

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> W3Schools How To Code snippets for HTML, CSS and JavaScript. Slideshow 1 / 4 Caption Text 2 / 4 Caption Two 3 / 4 Caption Three 4 / 4 Caption Four ❮ ❯ var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("sldot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} ; for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].classList.remove("slideractive"); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1]...

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> Game Movement ❮ Previous Next ❯ With the new way of drawing components, explained in the Game Rotation chapter, the movements are more flexible. Play again How to Move Objects? Add a speed property to the component constructor, which represents the current speed of the component. Also make some changes in the newPos() method, to calculate the position of the component, based on speed and angle . By default, the components are facing up, and by setting the speed property to 1, the component will start moving forward. Example function component(width, height, color, x, y) {     this.gamearea = gamearea;     this.width = width;     this.height = height;     this.angle = 0;     this.speed = 1;     this.x = x;     this.y = y;     this.update = function() {         ctx = myGameArea.context;         ctx.save();         ctx.translate(this.x, this.y);         ctx.rotate(this.an...

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> Game Rotation ❮ Previous Next ❯ The red square can rotate: Rotate var myGameArea; var myGamePiece; function startGame() { myGameArea = new gamearea(""); myGamePiece = new component(30, 30, "red", 25, 90); myGameArea.start(); } function gamearea(x) { this.canvas = document.createElement("canvas"); this.canvas.width = 320; this.canvas.height = 180; document.getElementById("canvascontainer" + x).innerHTML = ""; document.getElementById("canvascontainer" + x).appendChild(this.canvas); this.context = this.canvas.getContext("2d"); this.frameNo = 0; this.start = function() { this.interval = setInterval(updateGameArea, 20); } this.stop = function() { clearInterval(this.interval); } this.clear = function(){ this.context.clearRect...

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> Game Bouncing ❮ Previous Next ❯ This red square bounces when it hits the floor: RESTART var myGamePiece; var myoverlay; var myresult; var accel = false; function startGame() { myGamePiece = new component(30, 30, "red", 50, 50); myGameArea.start(); } var myGameArea = { canvas : document.createElement("canvas"), start : function() { this.canvas.width = 320; this.canvas.height = 180; this.context = this.canvas.getContext("2d"); document.getElementById("canvascontainer").appendChild(this.canvas); this.interval = setInterval(updateGameArea, 20); }, stop : function() { clearInterval(this.interval); }, clear : function() { this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); } } function component(width, height, color, x, y, ...

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> Game Gravity ❮ Previous Next ❯ Some games have forces that pulls the game component in one direction, like gravity pulls objects to the ground. RESTART var myGameArea; var myGamePiece; var myoverlay; var myresult; var accel = false; function startGame() { myGameArea = new gamearea("canvascontainer"); //myresult = new component(myGameArea, "30px", "Consolas", "white", 30, 50, "text"); //myresult.text = "Land me Safely" myGamePiece = new component(30, 30, "red", 50, 50); //myoverlay = new component(myGameArea, 640, 360, "rgba(0,255,0,0.1)", 0, 0); myGameArea.start(); } function gamearea() { this.canvas = document.createElement("canvas"); this.canvas.width = 320; this.canvas.height = 180; document.getElementById("canvascontainer").ap...