vorrei fare in modo che lo stile venga caricato solo tramite js e nn tramite css.
vedendo in giro ho visto che è possibile ed ho fatto una prova, che ovviamente nn funziona.
index.html
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Scroll</title>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/jquery.li-scroller.1.0.2.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
$(function(){
$("ul#ticker01").liScroll();
});
</script>
</head>
<body onload="createCSS()">
<ul id="ticker01">[*]<span>18/10/2010</span>news[*]<span>18/10/2010</span>news[*]<span>18/10/2010</span>news[*]<span>18/10/2010</span>news[*]<span>18/10/2010</span>news[*]<span>18/10/2010</span>news[/list]
</body>
</html>
css:
codice:
.tickercontainer { /* the outer div with the black border */
border: 1px solid #000;
width: 640px;
height: 40px;
margin: 0;
padding: 0;
overflow: hidden;
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 10px;
top: 14px;
width: 620px;
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 750px;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
font: bold 10px Verdana;
margin: 0 50px 0 0;
}
ul.newsticker span {
margin: 0 10px 0 0;
}
funzione js:
codice:
function createCSS() {
var str = ".tickercontainer{border: 1px solid #000;width: 640px;height: 40px;margin: 0;padding: 0;overflow: hidden;background-color: black;}";
var str2 = ".tickercontainer .mask{position: relative;left: 10px;top: 14px;width: 620px;overflow: hidden;}";
var str3 = "ul.newsticker{position: relative;left: 750px;font: bold 10px Verdana;list-style-type: none;margin: 0;padding: 0;}";
var str4 = "ul.newsticker li{float: left;padding: 0;}";
var str5 = "ul.newsticker a{white-space: nowrap;padding: 0;font: bold 10px Verdana;margin: 0 50px 0 0;}";
var str6 = "ul.newsticker span{margin: 0 10px 0 0;}";
var pa = document.getElementsByTagName('head')[0] ;
var el = document.createElement('style');
el.type = 'text/css';
el.media = 'screen';
if(el.styleSheet) { // IE method
el.styleSheet.cssText= str;
el.styleSheet.cssText= str2;
el.styleSheet.cssText= str3;
el.styleSheet.cssText= str4;
el.styleSheet.cssText= str5;
el.styleSheet.cssText= str6;
} else { // others
el.appendChild(document.createTextNode(str,str2,str3,str4,str5,str6));
}
pa.appendChild(el);
}
è possibile fare caricare tutto lo stile in js senza css??