How to minimize this jquery code | Community
Skip to main content
sampath_kumar_g
sampath_kumar_g
Level 2
July 1, 2021
Solved

How to minimize this jquery code

  • July 1, 2021
  • 3 replies
  • 1302 views

$(document).ready(function(){

$( "table" ).css( "color", "#222222" );
$( "table" ).css( "font-size", "14.0px" );
$( "table" ).css( "font-family", "Arial , Helvetica , sans-serif" );
$( "div tr:first-child" ).css( "height", "45px" );
$( "div tr:nth-child(2)" ).css( "height", "45px" );
$("#height").css( "height", "24px" );
$("#height-two").css( "height", "24px" );
$("#height-three").css( "height", "24px" );
$("#height-four").css( "height", "24px" );
$("#trheight").css( "height", "17px" );
$("#trheightOne").css( "height", "17px" );

if (window.location.href.indexOf("rightcare") > -1) {
$(".hello a").parent().hide();
}
if (window.location.href.indexOf("screenings") > -1) {
$(".hello").css( "opacity", ".35" );
$(".hello a").parent().addClass("ui-state-disabled");
$('#careoptions').click(function() {
$("#infinity").parent().addClass( "checking" );
$("#validating").css( "display", "block" ).fadeOut(4000);
});
}
if (window.location.href.indexOf("nocondition") > -1) {
$(".hello").css( "opacity", ".35" );
$(".hello a").parent().addClass("ui-state-disabled");
$('#careoptions').click(function() {
$("#infinity").parent().addClass( "checking" );
$("#validating").css( "display", "block" ).fadeOut(4000);
});
}
if (window.location.href.indexOf("nocondition") > -1) {
$(".pageTitle a").hide();
}
if (window.location.pathname === '/content/sdmnew/publishing/careoptionstoolpage.html') {
//var pathname = window.location.pathname;
//console.log("hello", pathname);
$("#condition_input").prepend("<option value='Choose a Condition'>Choose a Condition</option>");
$("#slider-range1").addClass( "ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" );
$("#slider-range1").css( "aria-disabled", "false" );
$("#slider-range1").append("<div class='ui-slider-range ui-widget-header ui-corner-all' style='left: 0%; width: 100%;'></div><a class='ui-slider-handle ui-state-default ui-corner-all' href='#' name='min' value='0' style='left: 0%;'></a><a class='ui-slider-handle ui-state-default ui-corner-all' href='#' name='max' value='100' style='left: 100%;'></a>");
$("#slider-range2").addClass( "ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" );
$("#slider-range2").css( "aria-disabled", "false" );
$("#slider-range2").append("<div class='ui-slider-range ui-widget-header ui-corner-all' style='left: 0%; width: 100%;'></div><a class='ui-slider-handle ui-state-default ui-corner-all' href='#' name='min' value='0' style='left: 0%;'></a><a class='ui-slider-handle ui-state-default ui-corner-all' href='#' name='max' value='100' style='left: 100%;'></a>");
$("#legend1").append("<label id='costLabel$' style='width: 16.6667%; color: blue;'>$</label>");
$("#legend1").append("<label id='costLabel$$' style='width: 33.3333%; color: blue;'>$$</label>");
$("#legend1").append("<label id='costLabel$$$' style='width: 33.3333%; color: blue;'>$$$</label>");
$("#legend1").append("<label id='costLabel$$$$' style='width: 16.6667%; color: blue;'>$$$$</label>");
$("#legend2").append("<label id='timeLabelLow' style='width: 25%; color: blue;'>Low</label>");
$("#legend2").append("<label id='timeLabelMedium' style='width: 50%; color: blue;'>Medium</label>");
$("#legend2").append("<label id='timeLabelHigh' style='width: 25%; color: blue;'>High</label>");
$("#condition_input").prop("selectedIndex", 0).val();

//$("#condition_input").text('Success Stories');
//$("#condition_input").load(location.href + " #condition_input");
//$("#condition_input").focus();

 


}
});

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by BrianKasingli

@sampath_kumar_g 

 

Your code can be refactored. Why are you writing CSS with Javascript, it seems inefficient?

 

The code can be refactored here, for example:

 

1.

$( "table" ).css( "color", "#222222" );
$( "table" ).css( "font-size", "14.0px" );
$( "table" ).css( "font-family", "Arial , Helvetica , sans-serif" );

 

can be written like:

$("table").css({ "color": "#222222", "font-weight": "14.0px", "font-family": "Arial , Helvetica , sans-serif" });

documentation: https://api.jquery.com/css/

 

2. I recommend braking up your code into meaningful named methods; which will give other developers in the future more clarity, for example
setTableStyle();

setScreenings();

setNoConditions();

 

3. remove useless // comments

 

These are just a few pointers, but I recommend you to take some front-end web development courses online, which will help you write better code. 

3 replies

Ritesh_Mittal
Community Advisor and Adobe Champion
Ritesh_MittalCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
July 1, 2021

Hi @sampath_kumar_g ,

 

You can use Adobe Granite HTML Library Manager to achieve this.

 

https://experienceleague.adobe.com/docs/experience-manager-65/developing/introduction/clientlibs.html?lang=en

also, check this thread-

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-6-5-3-publish-html-library-manager-minify-not-working-for/qaq-p/351644

    BrianKasingli
    Community Advisor and Adobe Champion
    BrianKasingliCommunity Advisor and Adobe ChampionAccepted solution
    Community Advisor and Adobe Champion
    July 1, 2021

    @sampath_kumar_g 

     

    Your code can be refactored. Why are you writing CSS with Javascript, it seems inefficient?

     

    The code can be refactored here, for example:

     

    1.

    $( "table" ).css( "color", "#222222" );
    $( "table" ).css( "font-size", "14.0px" );
    $( "table" ).css( "font-family", "Arial , Helvetica , sans-serif" );

     

    can be written like:

    $("table").css({ "color": "#222222", "font-weight": "14.0px", "font-family": "Arial , Helvetica , sans-serif" });

    documentation: https://api.jquery.com/css/

     

    2. I recommend braking up your code into meaningful named methods; which will give other developers in the future more clarity, for example
    setTableStyle();

    setScreenings();

    setNoConditions();

     

    3. remove useless // comments

     

    These are just a few pointers, but I recommend you to take some front-end web development courses online, which will help you write better code. 

      arunpatidar
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      July 3, 2021

      Hi,

      I would suggested injecting a class to the element and write css in separate css file.

      e.g $( "table" ).addClass('mytable');

       

       

      CSS file exmaple:

      .mytable {

      color:#222222
      font-size:14px;

      }
      div .mytable tr:first-child{

      height:45px

      }

      Arun Patidar
        Terms & ConditionsAccessibility statement

        Loading footer...