Everyone knows how to manipulate traditional html elements with jquery/javascript to add functionalities to a website and manipulate the DOM to achieve these functions.
A classic example would be to open up a div on a button click or make an action on page scroll down. All these can be easily achieved with a few lines of javascript to enhance user experience.
What not everyone realizes is that non-traditional elements can also be manipulated to achieve things that we normally could not.
Here's 3 techniques of non-traditional elements that we can manipulate to achieve powerful results.
1. Style Tags
Say we have a darkmode feature on our website. Now when everything has a dark background, very often our elements' on hover colors need to be modified because we don't want to have colors that are too light. Here's a quick and powerful fix:
<head>
<!-- stylesheets, scripts etc...-->
<style class="added-styles"></style> <!-- we add an empty style tag and give it a class - yes we can do that! -->
</head>
And in our javascript/jquery we can add some lines:
function darkMode() {
$('.added-styles').html('div:hover{background:#142336}');
}
function unDarkMode() {
$('.added-styles').html('div:hover{background:#f1f1f1}');
}
So everytime our function darkmode is called, the hover colors of our elements will change to a dark color and when we turn switch darkmode off, the hover colors are back to a light color.
- Untraditional, but cool!
(The rest of these will build on the idea of the first technique)
2. Modify mobile theme color
Have you noticed that some websites when viewed on a mobile phone, have a colored theme in the navigation area usually at the top of your mobile?
That feature can simply be used by adding this meta tag inside your head section:
Now if we wanna do some really cool stuff we can have the user set his own theme color with some quick code, again by manipulating the meta tag inside javascript:
$('meta[name=theme-color]').attr('content','blue');
In the code above we access the meta tag which has an attribute name=theme-color and we change the attribute of content to blue - this attribute specifies the mobile theme color.
Then we can also make it dynamic by changing 'blue' to a variable that is stored with the user's color pick (we can get the color from a color picker: var user_color = $('.colorpicker').val();
*Note: the colorpicker val() will return rgb colors, which the attribute "content" doesn't accept. To make this work you will need to convert rgb to hex. There are tons of scripts you can find online that will convert rgb to hex.
3. Dynamically swapping scripts or stylesheets
A super powerful technique can be used when we want to swap scripts or stylesheets from a web document to remove a certain stylesheet and swap it for another. Again we'll use our previous, creative idea, as you guessed it, modifying the attribute of the stylesheet or script.
<head>
<link rel="stylesheet" href="style.css"/>
<script class="myjs" src="index.js"></script>
</head>
That's our html, now we want to switch our index.js to index2.js:
$('.myjs').attr('src','index2.js');
And voila, our index.js file has been swapper for index2.js.
We can also remove entirely a script dynamically or similarly add one too.
We can detect if a user scrolled down x pixels and swap out stylesheets to introduce a different stylesheet in real time, all the while boosting efficiency and page load speed.
The possibilities are endless.
I hope you enjoyed this post, try these right now and let me know how it went in the comments, i would love to hear from you.
As always, see you in the next one!
Uriel Bitton
Top comments (0)