Search code examples
javascriptcssfrontendstylesheetaem

Inline style using javascript - design approach for Adobe Experience Manager(cms)

I am fixing a bug for a custom component my company got from Adobe. Details about this component : It is a carousel, with the navigator[carousel navigator] numbered. So the carousel is building its navigator completely using javascript.

Structure of the divs <div class="carousel"><div class="pane"><div id="textimage_xyzzz"></div><div class="grotatorNav"></div></div></div>

so the bug is they have designed the '.grotatorNav' such that its 'position is absolute' and 'top is 160px' and the '.carousel' is always fixed to 'height : 300px and width: 700px' grotator is absolute to carousel and always at the same height of 160px.

I wanted to adjust this by using '.pane' height as it is changing as per the "textimage" in the pane [text image is another component where the CMS author can adjust],

so what I have done is 

var heightOfPane = $('.pane').height();
$('#'+componentId+' .gRotatorNav').css('top',heightOfPane);

} is this correct because it is introducing inline styles and also in future we want all the styles and scripts in their own files .css, .less , .js rather than distributed among clientlibs in AEM.

I am more of Backend engineer but as a AEM developer I am touching the FED waters. Any help will be appreciated.

Solution

  • It looks fine, only that your jQuery code must run within a $(document).ready() to ensure that the DOM is fully loaded before you start manipulating elements.

    Also you might consider using jQuery's outerHeight() instead of height()as the latter does not include padding and borders.

    $(function() {
    var heightOfPane = $('.pane').outerHeight();
    $('#'+componentId+' .gRotatorNav').css('top',heightOfPane);
});

    Note: the syntax above is a shorthand for $(document).ready() so you can use it as is (more info).