javascript - Scale Background CSS with Slider -
i working css backgrounds (http://css3pie.com/demos/gradient-patterns/) in application , want able scale design slider. here's jsfiddle. able scale x & y separately on stripes , picnic designs had play background-size:50px 50px;
this:
//setup variables based off css set using dropdown griditems = $(document.activeelement).val().split("; "); (i = 0; < griditems.length -1; i++) { gridsettings = griditems[i].split(":"); if (gridsettings[0]=="background-size"){ gridsize = gridsettings[1].split(" "); gridx = gridsize[0]; gridy = gridsize[1] } //on action of slide - update value $('#gridxy-'+key).on("slide", function(slideevt) { gridxy = slideevt.value; $('.draggable-' + currentlayer).css("background-size", "calc("+ gridx +" * "+ gridxy +") calc("+ gridy +" * "+ gridxy +")"); });
which can set either numerically or using when gets blue print has lot more settings background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
i trying right can take variable number of those, , can write work, method have in mind messy, hoping scaling might little cleaner do.
i did find this:http://codepen.io/erik/pen/jgnsb using less declare variables, if possible stay away that.
update: here jsfiddle of it: http://jsfiddle.net/4l3d9qh2/
i added function should have let me update it, reason calc() function doesn't seem working update div style. after processing, looks this: $('.draggable-0').css("background-size", calc(100px - 4) calc(100px - 4), calc(100px - 4) calc(100px - 4), calc(20px - 4) calc(20px - 4), calc(20px - 4) calc(20px - 4));
$.each(gridsizearray, function( k, v ){ if (gridincrement==1) { gridxy = "calc(" + v +" - " + value + ") "; }else{ if(isodd(gridincrement)){ gridxy = gridxy + "calc(" + v +" - " + value + ") "; }else{ gridxy = gridxy + "calc(" + v +" - " + value + "), "; } } gridincrement++ })
here final code works. using .each() loop through , if even, add comma, remove last comma @ end.
griditems = $(document.activeelement).val().split("; "); (i = 0; < griditems.length -1; i++) { gridsettings = griditems[i].split(":"); if (gridsettings[0]=="background-size"){ gridsizestring = gridsettings[1].replace(/,/gi, ''); gridsizearray = gridsizestring.split(" "); } $('[data-type="sliderlayer"][data-layer="'+currentlayer+'"][data-slide="'+currentslide+'"]').css(gridsettings[0], gridsettings[1]); } $.each(gridsizearray, function( k, v ){ if (gridincrement==1) { gridxy = "calc(" + v +" + " + value + "px) "; }else{ if(isodd(gridincrement)){ gridxy = gridxy + " calc(" + v +" + " + value + "px) "; }else{ gridxy = gridxy + "calc(" + v +" + " + value + "px),"; } } gridincrement++ }) if (isodd(gridincrement)) { gridxy = gridxy.substring(0, gridxy.length - 1); }
Comments
Post a Comment