Tiny zero-dep JavaScript module that allows you to set a color of the browser's Toolbar from your website.
Module works only on Safari browser on macOS and iOS because they have a little transparency on the Toolbar. So we can add the colorful layer and place it under the Toolbar. That's it. This tool just simplifies the trick.
Reviews
Discussion
Hunter
Makers
You need to become a Contributor to join the discussion.
Max@rdev · JS Developer
I'm using it everywhere from now on!
Upvote (1)Share·
Peter SavchenkoMaker@peter_savchenko · CodeX founder, spark.ru cofounder
@rdev Appreciated this, thanks.
Upvote Share·
Shahzod Alizoda@shahzod_alizoda
Guys you on 3018 already;)
Upvote (1)Share·
Peter SavchenkoMaker@peter_savchenko · CodeX founder, spark.ru cofounder
@shahzod_alizoda ~(˘▾˘~)
Upvote Share·
🦁 Steve Mount@stemount1
Heh, cool hack. It doesn't work if you have translucency disabled in "Accessibility" inside system prefs, but nice anyway #Javascript #Safari #Webkit
Upvote (1)Share·
Peter SavchenkoMaker@peter_savchenko · CodeX founder, spark.ru cofounder
@stemount1 yep
Upvote Share·
Jacqueline von Tesmar@jacqvon · Community at Product Hunt ⚡️
It's all about the little things, right @peter_savchenko?
Upvote Share·
Peter SavchenkoMaker@peter_savchenko · CodeX founder, spark.ru cofounder
@jacqvon Exactly. An additional personalization for the webpages such as media or social communities, where user spends time mostly being scrolled down.
Upvote (1)Share·
Ariel@ariel_jedrzejczak · Store Inc. ✌🏻✌🏼✌🏽✌🏾✌🏿✌️
I love such little details. I am gonna use it on all of my sites! Thank you!
Could you explain me how to implement this? I put script with js file in header and I am stuck. Where should I write code which adds color and animation? I mean this:
toolbarColor.animate({
colors: ["#ff0a8a", "blue", "#61ffa7", "yellow"],
speed: 600
});
I always stuck on this when I enter Github projects ;>
Upvote Share·
Peter SavchenkoMaker@peter_savchenko · CodeX founder, spark.ru cofounder
Thanks, Ariel.
You can write an initialisation code anywhere below the connected script, but inside the «body» tag. For example, by inline «script» section or at your app's script.
Firstly, you need to make a module's exemplar:
var toolbarColor = new SBToolbar({
color: "red"
});
after that, you can call any public method, such as «.animate()» on the instance («toolbarColor»)
Upvote Share·
Ariel@ariel_jedrzejczak · Store Inc. ✌🏻✌🏼✌🏽✌🏾✌🏿✌️
@peter_savchenko Thanks for reply. I did everything and still it doesn't work for me :(
Can you check my site please? -> https://storestickers.pl
Upvote Share·
Murod Haydarov@murod_haydarov · Web Developer
@peter_savchenko @ariel_jedrzejczak Hi, Ariel.
I checked your website and noticed the following issues - your sample that initializes the library can't append necessary elements on document.body because it is not rendered yet.
You can fix it with the one of this ways:
- add "script" tag that creates toolbar with color at the end (after body tag)
- add window.onload = function() {
var toolbar = new SBToolbar({
color: "red"
})
}
I tried this suggestions and it works!
Hope it will work for you too :)
Upvote Share·
Peter SavchenkoMaker@peter_savchenko · CodeX founder, spark.ru cofounder
@ariel_jedrzejczak @murod_haydarov thanks for the correction. I've updated the comment above.
Upvote Share·
Ariel@ariel_jedrzejczak · Store Inc. ✌🏻✌🏼✌🏽✌🏾✌🏿✌️
@peter_savchenko @murod_haydarov
Yes! That was a problem. Very appreciated guys! ✌️
Upvote (1)Share·
Show more replies