Thanks @matthieu_chateau , great job
Mattheiu, this is amazing - working to implement it now. Would you think itās possible to have different visibilities/tabs depending on who is viewing the transaction? Assuming that they are the same user type, but different parties in a transaction for example.
Thanks for posting
Mark would love to hear about how you did this - need the same functionality.
Hi and thank you!
At some point the users should be two different user groups even if itās the same transaction. Seller group /Buyer group for example. Otherwise it should be a huge load of work to make this setup function.
To know how to hide/show multiple blocks at the same time, as Mark did, itās very easy:
You can can add as many document.getElementById("listXXX").style.display = "none"
as you wishā¦ Just replace ānoneā by āblockā each time you want the block to appear on a specific button click.
You just have to play with ānoneā and āblockā
Hi Matthieu, thanks for the reply. Ideally I would make them different user groups, but the issue is that products are dynamically created on my site by users and thereās no way to set up additional user groups like āseller/buyerā without messing with the general setup of the site. Would it be possible to hide the CTA block for a user assuming their recordID matches a condition or element on the page? and then to have two CTA blocks on the page w/ two separate scripts?
Lovely functionality either way, but figured Iād ask!
You can also set two cta blocks up with two separate scripts, yes
Or you can use this method
Great! Was actually just pulling up that thread to share with you and ask - will give this a shot for my use case and can report back. Seems that this may be the new solution however, unsure if those changes to Softr ever messed with it.
Update
I also created a lateral tabs feature - āOn startā tabs (donāt really know how to name it)
Demo design 1: https://test-play.softr.app/lateral-tabs
Demo design 2: https://test-play.softr.app/lateral-tabs-2
I wonāt explain anything here, all the needed codes are at the bottom of each demo page.
Thanks!
Hi @matthieu_chateau this is the best SOFTR custom code I have seen yet. I am trying to use this as a menu bar and set it up for desktop but I donāt have a working solution for mobile. Do you have any code to turn the CTA or custom code buttons into a hamburger menu bar/any sort of dropdown. That would be insanely helpful!
Thank you,
Ilan
Hi Ilan!
I was waiting for this request anxiously .
Tough one but I succeeded. I chose a dropdown menu, which would be the best for UX purpose, IMO.
Here is the demo (to be viewed on mobile): https://test-play.softr.app/tabs-with-custom-buttons-responsive
Note that for what is following I am using the customizable buttons version.
You can find the details of this version here in the community: Update to unofficial Tabs feature: Full customizable buttons + Responsive
Here is the new code to have a dropdown when on mobile
Insert it a custom code block, above the blocks you want to display. These are hard coded buttons, not CTA block buttons
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
.button-group {
display: flex;
justify-content: center;
}
.button {
background-color: #182939;
color: white;
font-family: 'Inter', sans-serif;
font-size: 16px;
padding: 10px 20px;
margin-right: 30px;
padding-top: 9px;
padding-bottom: 9px;
border-radius: 14px;
border: none;
cursor: pointer;
}
.button:active, .active {
background-color: #f5e507;
color: #182939;
outline: none;
}
</style>
</head>
<body>
<div class="button-group">
<button class="button active" onclick="runButton1Script()">Button 1</button>
<button class="button" onclick="runButton2Script()">Button 2</button>
<button class="button" onclick="runButton3Script()">Button 3</button>
</div>
<script>
const buttons = document.querySelectorAll('.button');
buttons.forEach(button => {
button.addEventListener('click', function() {
buttons.forEach(b => b.classList.remove('active'));
this.classList.add('active');
});
});
</script>
</body>
<script>
// hide blocks
window.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("list1").style.display = "block";
document.getElementById("list2").style.display = "none";
document.getElementById("list3").style.display = "none"
});
function runButton1Script() {
document.getElementById("list1").style.display = "block";
document.getElementById("list2").style.display = "none";
document.getElementById("list3").style.display = "none";
document.getElementById("list1").scrollIntoView("list1");
console.log("Button 1 clicked");
}
function runButton2Script() {
document.getElementById("list2").style.display = "block";
document.getElementById("list1").style.display = "none";
document.getElementById("list3").style.display = "none";
document.getElementById("list2").scrollIntoView("list2");
console.log("Button 2 clicked");
}
function runButton3Script() {
document.getElementById("list3").style.display = "block";
document.getElementById("list1").style.display = "none";
document.getElementById("list2").style.display = "none";
document.getElementById("list3").scrollIntoView("list3");
console.log("Button 3 clicked");
}
</script>
</html>
Great job. Looks interesting. It reminds me of āFragmentsā in Android development
This is really great, thank you very much
New update if you want to customize the hover and active button color effects when using a Softr CTA block and not hard-coded buttons
This is amazing!!
I just want one little tweak and Iām not sure how to do it without messing it all upā¦
I donāt want it to scroll down on click - for some reason, it takes it slightly too far and cuts off the filters at the top of the list.
How can I adjust the code to either prevent the scroll completely, or reduce it?
Hi James!
Yes, but before I need to know which version do you want to use (I need to get this organized, there 3 or 4 different versions of the tabs featureš ).
-
if you want to use this feature with a Softr CTA block, it is going to be a problem as it needs the cta block to have the option āscroll toā. Otherwise the buttons have a default behaviour which leads the user to the homepage. That being said Iām gonna ask Artur to remove this behaviour from CTA buttons, as it forces users to add additional stuff when they want to insert code.
I could add anevent.preventDefault()
but asking Softr team to remove this would be easierā¦ for everyone! -
If you want to use custom, hardcoded buttons, yes, itās possible Here. You see the code? just remove all the lines with
document.getElementById("blockX").scrollIntoView("blockX");
Iām using the hardcoded so I can fully customize the buttonsā¦
It worked beautifully, thank you. This has completely changed the user experience on my app now, thank you! (It also makes it easier to manage on Softr as its just one page.
So, how can I have some fun with the code to customize itā¦ i.e. adding some animations to how the new block is displayed. I saw one example had the block come in from the left?
And!! Do you know how to get modals to open a new page within that same modal? If so, this would work beautifully alongside your tabs.
For the block on the left => Lateral tabs feature - "On Start" Tabs - With 2 design versions The codes are in the demo pages, at the bottom.
Concerning new page in the same modal => no, as Softr team decided to not let this happen anymore (unfortunately) if Iām correct. I will try to find a solution with a JS snippet. It will appear in the ācustom codingā section of the public community if I find it
Great! Thanks
So, Iād add this block into the same page as the desktop version, but just set visibility to mobile?
Will that work, or will it mess with all the desktop tab set up?