Want to set Opacity Programatically

[#1]

Dear All,

I have a page and my navigation background color is blue and it is coming from css , as below.

sunitanavigation.css

.sunitaNavigation {

background-color: #ff0000;
opacity:1;
min-width: 380px;
}

In my navigation component cq:dialog ,

I have mentioned the below opacity dropdown.

<opacity
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/numberfield"
fieldDescription="0.1 is nearly transparent; 1 is solid"
fieldLabel="Background Opacity"
increment="0.1"
max="{Long}1"
min="{Double}0.1"
name="./bgOpacity"
step="{Double}0.1"/>

Now If I will select opacity 0.5 , then my background color will come as 0.5

Currently my opacity is hard coded in CSS , as shown in above. How can I set this selected opacity value in CSS "or" in any other way ???

[sunitac93243435 · Accepted solution]

Hi @sunitac93243435 

You can add following css property in your html i.e.
<div class="sunitaNavigation" style="opacity:${properties.bgOpacity @context='unsafe'}">
..
..
..
</div>

Hope it helps 🙂

[sunitac93243435 · Accepted solution]

Thanks Umesh...I have achieved my scenario like below

<div class="sunitaNavigation" style="opacity:${properties.bgOpacity @CONTEXT='styleString'}">

But , just a quick doubt ?

What is the difference between @CONTEXT='styleString'  and @CONTEXT='unsafe'  ????

[#4]

Hi,

I would recommend to use drop down instead of number field. define the classes with opacity e.g. opacity-1-0, opacity-0-5 till opactiy-0-0 and so on, the dropdown text and value you can decide, it is jut and example.

Read this value in HTL of navigation component and append a class e.g.

<nav class="other classes ${properties.bgOpacity?properties.bgOpacity:''}">

</nav>

This will restrict the content author to choose opacity from predefined values in order to maintain/respect design guidelines.

[#5]

Hi @sunitac93243435 ,

You can achieve your requirement by setting the css property using Javascript.

What exactly you needs to do is:

1. Retrieve the value selected in dialog dropdown in your htl/JSP like below:<input type="hidden" id="opacity" name="opacity" value="${properties.bgOpacity}">
2. on page load ready function please use below JS(in respective clientlib) to set the opacity authored in dialog which is fetched from DOM.

   $( document ).ready(function() {
        var opacity = $('#opacity').value;
        $(".sunitaNavigation").css( "opacity", opacity);
   });