Style multiple parameter values with jquery: code only works for multiple parameter values
I have a select box containing fonts to style
<select class="gfonts">
<option value="arial" style="font-family:arial;">Arial</option>
<option value="tahoma" style="font-family:tahoma;">Calibri</option>
<option value="segoe" style="font-family:segoe;">Segoe</option>
</select>
The options are styled correctly and you can preview the font before applying it. But I have over 700 fonts and the (font-family) style is not working. tried this code but it only works if the fonts are like 200. above this, preview won't work
var fontarray=allfonts.split(",");
var html='';
for(x=0;x<fontarray.length;x++)
{
html += '<option class="f'+x+'" style="font-family:'+fontarray[x]+';" value="' + fontarray[x] + '">' + fontarray[x] + '</option>';
}
$('.font_type').append(html);
}
Note that all fonts are loaded and "var allfonts" is a semicolon string.
source to share
From a user perspective, loading 700 fonts into a list doesn't make sense, I don't like the fact that I'm ever going to go through this entire list. Your client may want to rethink this strategy.
But in order to put less pressure on the browser, you can try filling the list as you browse, rather than loading the entire list at boot time. I believe there are some modules like waypoints ( http://imakewebthings.com/waypoints/ ) that you could use, but you will have to research further.
source to share
try it
var fontarray=allfonts.split(",");
var html='';
var i = fontarray.length/100;
var j = fontarray.length/100;
for(x=0;x<fontarray.length;x++) {
html += '<option class="f'+x+'" style="font-family:'+$.trim(fontarray[x])+';" value="' + $.trim(fontarray[x]) + '">' + $.trim(fontarray[x]) + '</option>';
if(x == (i-(j--))*100){
$('.font_type').append(html);
html = "";
}
}
$('.font_type').append(html);
source to share
I figured out how to solve my problem based on the solutions you suggested. I added a load event to the fonts in the countdown so that they load slowly and allow the browser to load them without load.
var count = 0, timer = setInterval(function() {
var co = ((count++)+1);
console.log(co);
// $('.f'+co).css('font-family',fontarray[co]);
html = '<option class="f'+co+'" style="font-family:'+fontarray[co]+';" value="' + fontarray[co] + '">' + fontarray[co] + '</option>';
if(count == 715)
{
clearInterval(timer);
}
$('.font_type').append(html);
}, 20);
}
Hope this helps someone in the future. greetings
source to share