![]() ![]() ![]() 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. 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 policies identify the traffic of interest and effectively sorts the traffic to the appropriate LB tier. The Vanilla JavaScript solution, utilizing CSS transforms and transitions is a very close replication to the jQuery solution. If you need content switching, a CS vserver (VIP:port) receives the client-side request, then using CS policies you direct traffic to appropriate LB vservers behind the CS vserver. 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. Desserts Drinks Sed molestie velit vitae suscipit commodo. Start Exploring Use With Any Content You can add content labels and use simple text editor or Elementor templates for the content. The jQuery solution is by far the easiest to implement, having very little code. Content Switcher widget for Elementor allows you to present multiple content options in as smart way. 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. |