How to minimize this jquery code

Avatar

Avatar
Give Back 3
Level 2
sampath_kumar_g
Level 2

Likes

4 likes

Total Posts

17 posts

Correct reply

0 solutions
Top badges earned
Give Back 3
Give Back
Ignite 1
Validate 1
Boost 3
View profile

Avatar
Give Back 3
Level 2
sampath_kumar_g
Level 2

Likes

4 likes

Total Posts

17 posts

Correct reply

0 solutions
Top badges earned
Give Back 3
Give Back
Ignite 1
Validate 1
Boost 3
View profile
sampath_kumar_g
Level 2

01-07-2021

$(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();

 


}
});

 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

648 likes

Total Posts

608 posts

Correct reply

240 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

648 likes

Total Posts

608 posts

Correct reply

240 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

01-07-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. 

Answers (2)

Answers (2)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,462 likes

Total Posts

3,329 posts

Correct reply

949 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,462 likes

Total Posts

3,329 posts

Correct reply

949 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

03-07-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

}

Avatar

Avatar
Boost 5
Level 7
Ritesh_M
Level 7

Likes

179 likes

Total Posts

142 posts

Correct reply

45 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
Affirm 1
View profile

Avatar
Boost 5
Level 7
Ritesh_M
Level 7

Likes

179 likes

Total Posts

142 posts

Correct reply

45 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
Affirm 1
View profile
Ritesh_M
Level 7

01-07-2021