![]() Sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat non proident, In reprehenderit in voluptate velit esse cillum dolore eu fugiat Ut enimĪd minim veniam, quis nostrud exercitation ullamco laboris Tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod We are also using the Roboto font to style the document. Our body contains an image and some random texts. We have a simple header section with the name of our app and the buttons to change the themes. Building the MarkupĪs you can understand from the gif above, we are not using any high-level design. Now that we know the file structure, let's begin the coding. Now that you have a basic understanding of the data attributes, let's start building our Theme Switcher. We can access this using the below codes, let employee = document.getElementB圜lassName("employee-table") Suppose we want to access the identity attribute from before. We can access these attributes in JavaScript with dataset property. And the second point is that we cannot use any valid HTML attribute as a name for data attributes. Two things to keep in mind while creating a data attribute is that the value that is stored inside data attributes can only be of string type. We also have special HTML data tags in HTML 5.įor example, we can name data-identity to create a custom data attribute for employee ID. ![]() Any attribute that starts with data- is a custom data attribute. HTML5 introduced us to the concept of Custom Data Attributes. Before HTML5, we could have used class or IDs, but this is not an impressive solution. Let's take an example, suppose we have a list of employees and we want to save their IDs, which we can use to manipulate them using the DOM. There may be situations when we have to store some information associated with DOM elements. One thing I must explain before we start building the Markup is custom data attributes in HTML. We’ll implement this using the browser’s local storage. The selected theme will be stored in the browser and will apply the same theme even after reloading. Also, the theme switcher will be persistent. I am not going to focus a lot on the styles instead, we’ll try to understand the logic about creating it. In this article, we’ll be building a theme switcher like that. The theme switcher can also be used as a dark mode switcher. Regardless of which solution you gravitate towards, be sure to weigh the pros and cons of each and aim to offer the best user experience.You might have noticed that nowadays many websites have a theme switcher on top of their website. However, it requires quite a bit of repetitious, markup-reliant CSS to get it to work properly, and can have a negative impact on a site’s accessibility, since you have to use elements in ways they weren’t meant to be used. The CSS only solution is great for those looking to experiment with CSS or for those that aren’t familiar enough with JavaScript. The downside to this solution is that some of the JavaScript used is not supported in all browsers, and to support those browsers, you’ll need to write additional work-around functions (as I’ve done). Minified it clocks in at 486 bytes – obviously much smaller than the jQuery alternative. The Vanilla JavaScript solution, utilizing CSS transforms and transitions is a very close replication to the jQuery solution. The downside to the jQuery solution is that if you only need the library for this one interface, you’re adding an entire library for a single purpose. The jQuery solution is by far the easiest to implement, having very little code. Each technique has its own pros and cons. We just considered three different ways to create a similar interface using jQuery, then using vanilla JavaScript, and then again using just CSS. In conclusion, a short summary of the pros and cons… See the Pen Content switching component with pure CSS by SitePoint ( on CodePen. You can see the above, and more, in action by viewing the source code of the CSS-only CodePen demo: ![]() While not replicating the code exactly, I’ve created the following example to showcase the type of UI component she was trying to create: Make a Selection Option 1 Option 2 Option 3 Option 1 Content Īfter optimizing it a bit, here is the jQuery we ended up using to toggle the display state of the selected content block. Her code worked, but being new to JavaScript, she had built the component in jQuery and had asked me to help optimize it. ![]() Not too long ago, a friend of mine had constructed a UI component to change a page’s content based on the the current selection of a element.
0 Comments
Leave a Reply. |