We’ve explored various methods for creating a modal box using only HTML and CSS, so we’ll share our thoughts and notes after trying it out. Can we create a Modal Box using only HTML and CSS? Let me get straight to the point, modal box can be created using only HTML and CSS.However, we found […]
In this article, we will introduce how to create a toggle switch using only HTML and CSS and introduce 5 designs. ①Prepare parts of toggle switch with HTML Let’s start by preparing the parts of toggle switch with HTML.We will use the functionality of checkboxes and create a toggle switch with div tags (since the […]
With the ::file-selector-button pseudo-element, it is no longer necessary to use JavaScript to modify the design of input type=”file”.In this article, we will discuss how to modify the design of input type=”file” using only CSS. We will also provide an explanation for changing button text, which can be a bit tricky. What the ::file-selector-button is […]
In this article, we are going to describe how to make infinite loop slider which continue to flow automatically using only CSS. ①Prepare slide elements Prepare slide elements in HTML. Don’t forget to prepare two sets of slides as shown below (here, 4 slides per set). ②Add slide animation The CSS is sufficient as follows. Ensure […]
In this article, we will describe about how to automatically generate Table of Contents from headings using PHP.Our method also supports multiple levels of headings. Goal of this article We aim to automatically generate a table of contents from headings using PHP, assuming the presence of HTML as below.The table of contents will be inserted just before […]
In this article, we will describe about how to automatically generate a Table of Contents (toc) from headings using Javascript.Our method also supports multiple levels of headings. Table of Contents from Headings We aim to automatically generate a table of contents from headings, assuming the presence of HTML as below. The table of contents will […]
In this article, we will discuss how to convert HTML string into Nodes. Converting HTML string to Node This can be very simple, and you can define the function in just one line. The following information is supplementary. DOM operations on the converted Node The Node converted using the previous method is formally known as […]
In this article, we will discuss about how to detect whether an event is triggered by actual user’s actions or forced triggering by a script. In the case of plain Javascript By referencing the isTrusted property of the event object passed to the event listener’s callback, you can determine whether the event was triggered by […]
There are times when you might want to place the navigation arrows and pagination dots of a slider created using Swiper and React outside of the slider itself. In this article, we will explain how to achieve this with the help of demos. ①Create a normal swiper slider For clarity, let’s start by creating a […]
In this article, we will explain how to create a slider with thumbnails using swiper.js and React.This will be achieved by utilizing the options of swiper.js to synchronize two sliders. ①Create the main Swiper slider Let’s add navigation and looping only. We’ll use the same images for the thumbnails, so we’ll keep them in an […]
