html - Loading css thorugh a javascript file, not working -

html - Loading css thorugh a javascript file, not working -

so trying utilize js file load css based on scroll location. have header div 3 nested divs js modifying. here have.

js:

var titles = [ 'pick 1', 'pick 2', 'pick 3', 'pick 4', 'pick 5', '"quote 1"', '"quote 2"', '"quote 3"', '"quote 4"', '"quote 5"', 'footer title', '' ]; $(window).scroll(function(){ var pos = $(this).scrolltop(); var slidetitle1 = $("#slidetitle1").offset().top; var slidetitle2 = $("#slidetitle2").offset().top; var slidetitle3 = $("#slidetitle3").offset().top; var slidetitle4 = $("#slidetitle4").offset().top; var slidetitle5 = $("#slidetitle5").offset().top; var slidefooter = $("#slidefooter").offset().top; if( pos < slidetitle1 - 300) { $('#title').slideup(); } if( pos > slidetitle1 - 300) { $('#title').slidedown(); } if( pos > slidetitle1 - 300) { $('#textbox').text(titles[0]); $('#quotebox').text(titles[5]); } if( pos > slidetitle2 - 100) { $('#textbox').text(titles[1]); $('#quotebox').text(titles[6]); } if( pos > slidetitle3 - 100) { $('#textbox').text(titles[2]); $('#quotebox').text(titles[7]); } if( pos > slidetitle4 - 100) { $('#textbox').text(titles[3]); $('#quotebox').text(titles[8]); } if( pos > slidetitle5 - 100) { $('#textbox').text(titles[4]); $('#quotebox').text(titles[9]); } if( pos > slidefooter - 50) { $('#textbox').text(titles[11]); $('#quotebox').text(titles[10]) $('#quotebox').css("font-size", "35px", "text-align", "center"); $('#textbox').css("display", "none"); $('#ratebox').css("display", "none"); } if( pos < slidefooter - 50) { $('#quotebox').css("font-size", "30px", "text-align", "left"); $('#textbox').css("display", "block") $('#ratebox').css("display", "block") } });

css:

#title { width: 100%; background: black; height: 85px; position: fixed; margin-top: 0px; padding-top: 10px; font-size: 30px; color: white; box-shadow: 0px 10px 5px #888888; z-index: 1001; display: none; } #textbox { width: 250px; height: 40px; margin: 0 auto; margin-left: 25px; padding-top: inherit; float: left; } #quotebox { width: 50%; height: 40px; margin: 0 auto; padding-top: inherit; } .ratebox { width: 75px; height: 75px; float: right; margin: 0 auto; margin-right: 25px; border: greenish 1px solid; background-image: url(../img/rating/rating5.png); background-repeat: no-repeat; } .5 { background-image: url(../img/rating/rating5.png); background-repeat: no-repeat; } .4.5 { background-image: url(../img/rating/rating4.5.png); background-repeat: no-repeat; } .4 { background-image: url(../img/rating/rating4.png); background-repeat: no-repeat; } .3.5 { background-image: url(../img/rating/rating3.5.png); background-repeat: no-repeat; } .3 { background-image: url(../img/rating/rating3.png); background-repeat: no-repeat; }

source:

<div id="title"> <div id="textbox"> </div> <div class="ratebox"> </div> <div id="quotebox"> </div> </div>

but when seek add together $('#ratebox').css("background", "url('../img/rating/rating3.png')"); if's 3-7 not anything. in fact seems undo default white background color have set. tried of far prepare no combination works. know doing wrong.

so found reply issue boldewyn may have got because changing file path ../img/rating/rating5.png rating/rating5.png worked , go. also, in side site folder moved rating folder out of img folder level index.html file.

@mike 'pomax' kamermans trying understand loop out more detailed code , more of explanation how loops prepare minefield , create content anymore manageable cant create heads or tails of post. imo array text easyly updatable, location pluged never change, , if rating changed have alter filename ratingx.png number want be. nameing convention utilize solves that.

javascript html css