Want to set Opacity Programatically

Avatar

Avatar

sunitac93243435

Avatar

sunitac93243435

sunitac93243435

19-01-2020

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 ???

 

 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Umesh_Sondhi

MVP

Avatar

Umesh_Sondhi

MVP

Umesh_Sondhi
MVP

20-01-2020

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 🙂

Answers (2)

Answers (2)

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

(val/1000)?string[".0"]}K

Likes

958

Correct Answer

820

Avatar

Arun_Patidar

MVP

Total Posts

(val/1000)?string[".0"]}K

Likes

958

Correct Answer

820
Arun_Patidar
MVP

20-01-2020

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.

Avatar

Avatar

ArpitVarshney

MVP

Avatar

ArpitVarshney

MVP

ArpitVarshney
MVP

19-01-2020

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);
    });