Custom CSS for each tab (BB TAB module)

Tagged: , , ,

Author Posts

zholy9 October 2, 2017 at 1:06 pm

Hi Sebastian.

I’m wondering if it’s possible to create this scenario with MT (?) :

I’m doing a website for a self-storage company and they want “animated” units, so it’s easier for the customer to imagine how the unit can be used/filled. Now they have like 20 different sizes. Each of them needs to be “animated” = using simple JS fade in, SVG files as pictures)

Now in order to NOT download the same images 20x(that are used to fill up the units) … I was thinking about using the TAB module and insert just the picture of an empty unit (relevant size) in each tab.
Then having the pictures (that will be used to fill the units) below the TAB module. Either as image module or one HTML module where I would just load them and give them ID) and assign position ABSOLUTE to them.

THE QUESTION IS : is it possible to have different positions(X,Y) & “visibility” assigned to those “filling images” according to which TAB is open in the TAB module?

For example : on a 10ft unit I would have visible only a double sofa with a chair. Rest of the images would be hidden. The sofa would be in a corner a chair in front of it.
But if a tab with 20ft unit would be open, I should have the chair next to the double sofa and place a table in front of the sofa. Notice that the chair had change it position and new photo has become visible.

Is that possible? Thank you in advance.

PS: the reason for this setup is to improve PAGE LOADING SPEED (like mentioned in the beginning…if someone would go over few unit sizes, not to load the same “filling stuff”)

zholy9 October 2, 2017 at 9:00 pm

Add => … if I’m correct, I after something like “nested CSS” (SASS). I’ve enabled it in the MT, but when I select an open Tab and then try to style the image through it’s ID … it does nothing.

Sample : `#fl-tabs-59d2a203bb911-panel-0 {
#Sofa {
max-width: 50px !important;
}
}`

http://www.ufocused.com … this is where you can see the setup.

Thanks

Sebastian October 3, 2017 at 9:49 am

Hey,

Thanks for the link. The code you’ve tried will only work if the images are also added to the tab content. The SCSS code you entered compiles to the following CSS code:

#fl-tabs-59d2a203bb911-panel-0 #Sofa {
  width: 50px !important;
}

Which only targets the #Sofa image if it is inside the #fl-tabs-59d2a203bb911-panel-0 container element. To solve this, I think you should include the furniture images inside the tab content. I know you believe this will slow down the page, but I think this reservation might be misplaced.

The browser will only download an image with the same file name once. If you are using SVG images, the file name will be the same for each unique furniture image, even if you render the SVG images at varying sizes via CSS. And even if you were to use PNG images, you would just include the largest size image for each piece of furniture and then scale down if necessary with CSS.

The same goes for the empty room. You can include one SVG or one PNG image for it (at it’s largest size). And then scale down when necessary. In fact, for the empty room, you could apply that as a background image on the tab-panels and then adjust size using the background-size property.

ANSWER TO MAIN QUESTION: The reason I suggest including images in the tab content is because it’s not possible to construct a CSS selector that will target the images based on the active tab. Even if it were possible, it would involve highly complex selectors that would be hard to maintain.

I hope that helps. Please let me know if you have any further questions.

Cheers!
Sebatsian

zholy9 October 3, 2017 at 9:58 am

Sebastian, you’re a LIFE SAVER.

THANK YOU SO MUCH..was waiting for the reply “without sleeping”.

Didn’t know, that the images are loaded only once = happy days. Now it’s just a question of styling something 20x 🙂

Thank you, thank you…

Sebastian October 3, 2017 at 10:23 am

You’re welcome! Best of luck with the project!

Sebastian

You must login or register to reply to this topic.