‘Toggle Tumblr controls’ tutorial using jQuery
Hi everyone, I made this tutorial as a request by @phantasyreign , hope you’ll find it usefull :3 to follow this tutorial you must have some html, javascript (with some jQuery) and css knowledge. Anyways I’ll try to make it as clear as possible.
1. Add the lastest jQuery release (3.6.0)
jQuery is a javascript library to write javascript code more simple. There is a very important note here. jQuery comes in 4 different “forms”, you can find it:
uncompressed
minified
slim
slim minified
The uncompressed version includes ALL the functionality of jQuery, included AJAX functionalityy and animation effects.
The slim version doesn’t have this functionalities to make it lighter. I remark this point because depending of which version you use, the toggle animation will look different, so in case you are already using jQuery in your theme, consider the result that the button will have.
PD: the minified version is the same as the uncompressed but with all the code is compressed without blank spaces to make it even more lighter, same happens with the slim minified version.
With the slim minified version (which is the one I’m using in this tutorial) the animation will look like this:
And the uncompressed version will look like this:
You can choose any version you want, the uncompressed version by the way has more animations effects you can explore, and the slim version just has the function “toggle” to hide and show elements (which is the one we’re going to use).
Having this clear let’s continue. So we add jQuery inside our <head> tag <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
2. Add an icon library
This is optional if you want that your button will display an icon. You can use any icon library you want like fontawesome, bootstrap icons, CAPPUCCICONS icons, feather icons, etc. In this tutorial I’m using Bootstrap Icons. So inside our <head> tag again, we add the following <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
3. Add a button
In this tutorial we’re going to add a button independent of the navigation menu, so place the button inside your <body> or <main> tag.
<button type="button" class="controls_tumblr"><i class="bi bi-gear"></i></button> And then let’s add it some style in our css (inside your <style> tag): .controls_tumblr { all: unset; color: yourcolor; cursor: pointer; margin: 10px; font-size: 1.2rem; transition: all 0.5s ease; position: fixed; top: 0; right: 0; }
.controls_tumblr:hover { color: yourcolor; }
The ‘.controls_tumblr’ class is to remove all the default styles for the button (all: unset), you can customize as you wish this part. The ‘.controls_tumblr:hover ‘ is to make the button change the color when the cursor is hover the button. If you want your button to be inside your navigation menu or in your footer is okay too, just add the button code where corresponding and remove the fixed positioning in the css.
4. Add css to hide the controls by default
Also inside your <style> tag, add the following css:
.iframe-controls--desktop.tmblr-iframe--unified-controls { margin-top: 30px; display: none; height: 54px !important; }
The margin is for the controls don’t overlap our button, and the display: none is to hide by default our controls. The height is the default tumblr controls height, we add it again because it sometimes gets buggy with using display: none to hide the controls, and the page renders without assigning a height to the controls so the controls won’t show when we click the button.
5. Add the jQuery functionality
Inside your <head> tag, add a <script> tag with the following:
<script> $(document).ready(function(){ //toggle controls $('.controls_tumblr').click(function(){ $(".iframe-controls--desktop").toggle( "slow" ) }); }); </script>
If you’re already using jQuery just add the code below //toggle controls right after your $(document).ready function. The function “toggle” will hide and show your controls using the css attribute "display". The parameteter “slow” will do the transition smooth, if you don’t add it the controls will appear and dissapear without a transition. And that’s all! :3 If you have any questions please send me a message.