Plugin Update: CSS Tools (Free Version)

[jarrad]

Quick Update for CSS Tools,

Features :

• Change Element Width and/or Height. (made some changes to better to results).
• Add custom <style> to your pages head on the fly.

Added:

• Change Element Width and/or Height over ms in time (choose the speed of the expansion/retraction via the amount of ms you allow the effect to take to complete).

[vincent56]

Would this be a potential solution to hide elements? Hiding elements makes anything inside those elements not load until the element becomes visible.

I’d like to hide repeating groups but still load their contents. It seems like with this you can expand goups from 0:0 to x:x

[jarrad]

you can expand from 0x0 to whatever so it might help you out.

[petter]

Thanks for sharing!

I’m a newbie when it comes to css I’m afraid…

• What do I fill out in Element ID?
• Is it possible to set the height of a group to 100% of the current scree height?

I’ve been experimenting, but couldn’t see any changes. Probably I’ve misunderstood how the Element ID is used…

[jarrad]

head over to your apps settings tab, then into general and check the option expose element id’s. now head to the group you want to torture and scroll to the bottom of the properties, right at the bottom you will see element id, give it a manly name and that my friend shall be what you need for the css tools. in regards to the 100% of the screen height you should be able to grab the height from the css tools element.

[vincent56]

Thanks for this. Although I’m familiar with CSS, not sure how to implement this plugin. Do you add all css in the header on page level or do you use the plugin element on certain elements? What is the best way to implement?

This is how the CSS tools element looks like for me:

Creating a new style does not let me make changes if it is of the CSS tools type.

[jarrad]

if your trying to perform a task that is specified like change width, height in px or % for an element or two i would go that way but if you have a 300 word <style></style> that you want to add or even dynamically modify on load then go with the add style to head.

use case: lets say i want my users to be able to design how there page looks, then i could have them choose colors fonts and so on, save the prefs to the user, then dynamically insert the data into the add style to head element action on page load to style that users page.

the way this is used is you drop that element on your page, then you use it by going to actions, element actions rather than plugin actions and choose your poison from there. you can also use the states like when CSSTools;s A;s page orientation is portrait alter for mobile experience or users on phones seem to change between portrait to landscape many times maybe i should change something to make it flow.

[vincent56]

Ah! For some reason the element actions were not showing up. After refresh they were there. That explains a lot.

Now, it seems I cannot add the CSS tools element to a RG. The element won’t show up to select in the actions.

What I’m trying to do is setup two attribute ID’s for a RG: rg-big and rg-small and use a condition on the RG to dynamically change the attribute ID on the element. Then use your plugin to set the default height of the RG’s cell. But it can’t seem to reference the RG?

[jarrad]

place the element on your page, it should be able to find the id’s from there…

[vincent56]

Thanks, I’ll give it a shot.

Works fine on my test page even though it gives this error: TypeError: window.width is not a function

[jarrad]

i dont think you have the update??

[vincent56]

Sorry yes, I was on 2.0.0 but now after updating it still gives the error (after browser/editor restart)

[jarrad]

no worries cheers, i will have a look into it. Thanks for the feedback mate.

[vincent56]

It doesnt seem to work for my RG needs unfortunately But I can use it in other elements.

[jarrad]

I will look at adding some rg extras to cover a few common issues. Cheers

[vincent56]

Would something like this be possible?

Shrink or expand repeating group's cell height beyond its default

I have a repeating group in which each cell has 2 groups that are shown based on conditions. Group Large (H:60px) Group Small (H:30px) If parent group’s/current cell’s Thing’s size = large (Group large is visible and vice versa) The point of this is to have 2 30px groups shown in the cell for each 60px group. This is not possible because: If you set the default cell height to 60px, one Small group is shown and the other 30px are blank. If you set the default cell heigth to 30px, the Large…

Cheers!

[rossliddell]

@jarrad - great tool and incredibly useful!

I may be being daft here but when i look to alter the width of elements (results) in a Repeating Group, only the first entry is affected. The rest of the entries stay the same width.

Am I doing something wrong?

Cheers

Ross

[jarrad]

Yes im aware of it mate, when i get a second i will push a fix. i have already had a quick look and its doable. cheers

[rossliddell]

@jarrad top man! that would be fantastic

[petter]

Thanks jarrad!

I’ve managed to successfully make changes to width and height of an element. Two points where I’m confused:

1. I can’t find screen width/height in the CSS Tools element, only page width/height. Which is not necessarily the same, right?
2. When I try to grab the page width, it turns out empty. Am I doing it wrong?
   

My app is mobile first, so I’m trying to adjust the height of Repeating Groups to user’s varying screen heights. Does that sound possible with this?

(btw, I’m getting the same error as vincent:
TypeError: window.width is not a function
at eval (eval at p.create_code)