Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Web Development Articles
Page 417 of 801
How to create a responsive bottom navigation menu with CSS and JavaScript?
In this article we will create a responsive bottom navigation menu using CSS and JavaScript. A responsive bottom navigation adapts to different screen sizes and provides mobile-friendly navigation. A responsive navigation menu adjusts its layout and behavior based on the viewport size. On larger screens, it displays all menu items horizontally. On smaller screens, it collapses into a hamburger menu to save space. HTML Structure First, let's create the HTML structure for our bottom navigation menu: Home Tutorials Contact About ...
Read MoreGet unique item from two different array in JavaScript
We are required to make a function that accepts an array of arrays, and returns a new array with all elements present in the original array of arrays but remove the duplicate items. For example − If the input is − const arr = [ [12, 45, 65, 76, 76, 87, 98], [54, 65, 98, 23, 78, 9, 1, 3], [87, 98, 3, 2, 123, 877, 22, 5, 23, 67] ]; Then the output should be single array of unique elements like this − ...
Read MoreHow to resize a navigation bar on scroll with CSS and JavaScript?
In this article, we will discuss how to resize a navigation bar on scroll with the help of CSS and JavaScript. A navigation bar contains the list of elements present in your website, including the links to navigate through the website. It's usually the first pit-stop for users visiting the website who seek guidance to walk through the website. Resizing is achieved by dynamically changing the padding and font sizes of the navigation bar elements using JavaScript when the user scrolls. This creates a smooth transition effect that makes the navbar smaller as the user scrolls down. ...
Read MorePad a string using random numbers to a fixed length using JavaScript
We need to write a function that takes a string and a target length, then pads the string with random numbers until it reaches the specified length. This is useful for creating fixed-length identifiers or codes. How It Works The function uses recursion to add random digits (0-9) to the end of the string until it reaches the target length. Each recursive call generates a new random digit using Math.random(). Implementation const padString = (str, len) => { if(str.length < len){ const random ...
Read MoreHow to create a top navigation menu for smartphones / tablets with CSS and JavaScript?
In this article, we are going to discuss how to create a responsive top navigation menu for smartphones and tablets using CSS and JavaScript. A navigation bar is usually the first pit-stop for users visiting a website who seek guidance to navigate through the site. It contains links to different sections of your website, providing easy access to important pages. Creating a mobile-friendly navigation menu involves using CSS media queries to hide navigation links on small screens and display a hamburger menu icon instead. When clicked, this icon toggles the visibility of the navigation links. How It ...
Read MoreHow to create a curtain navigation menu with CSS and JavaScript?
In this article, we will learn how to create a curtain navigation menu using HTML, CSS and JavaScript. The curtain navigation menu will overlay on the entire screen by pushing back the current page. These menus display the sub-links of a link to make the navigation more specific. To create curtain navigation, we have to do the same as we had done earlier. In curtain navigation, we have two buttons one is an open button (menu) and the other one is a close button (cross). When you click on the open button the navigation will be visible ...
Read MoreHow to create a collapsible sidebar menu with CSS and JavaScript?
A collapsible sidebar menu is a navigation component that can be toggled to show or hide menu items. When collapsed, it saves screen space while maintaining easy access to navigation links. This tutorial demonstrates how to create a responsive collapsible sidebar using HTML, CSS, and JavaScript. The sidebar starts hidden and slides in from the left when activated. When opened, it pushes the main content to the right, creating a smooth transition effect. This pattern is commonly used in responsive web design to optimize navigation on both desktop and mobile devices. HTML Structure First, create the basic ...
Read MoreOrder items alphabetically apart from certain words JavaScript
In JavaScript, you can sort an array alphabetically while keeping certain priority words at the top. This is useful when you need specific items to appear first, regardless of alphabetical order. Let's create a function excludeSort(arr, ex) where arr is the array to be sorted and ex contains the priority words that should appear at the top. How It Works The sorting logic uses a custom comparator that: Places priority words (from ex array) at the top Sorts remaining words alphabetically Uses Array.includes() to check if a word is in the priority list Example ...
Read MoreHow to create responsive Modal Images with CSS and JavaScript?
A modal is a dialog box/popup window that is displayed on top of the current page. Creating responsive modal images allows users to view enlarged versions of images that adapt to different screen sizes. Responsive modal images are images that enlarge to fit the viewport based on device resolution, orientation, and screen size. When clicked, they open in a modal overlay with smooth animations and can be easily closed by users. HTML Structure First, create the basic HTML structure with an image and modal container: ...
Read MoreHow to check existence of NaN keyword in an array JavaScript
We have an array of elements that contains both truthy and falsy values. Our job is to write a function that returns an array with indices of those elements which are NaN in the original array. NaN !== NaN The datatype of NaN is actually number. Although NaN is a falsy value, it has a peculiar property that no other datatype or variable has. It's that the expression NaN === NaN yields false. And it's only in the case of NaN that this is false. So, we can use this behavior to our advantage and pick out ...
Read More