Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

How to minimize this jquery code

sampath_kumar_g
Level 2
Level 2

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

 


}
});

 

1 Accepted Solution
BrianKasingli
Correct answer by
Community Advisor
Community Advisor

@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. 

View solution in original post

3 Replies
BrianKasingli
Correct answer by
Community Advisor
Community Advisor

@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. 

View solution in original post

Arun_Patidar
Community Advisor
Community Advisor

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

}