Frågan#1
Hej,
Jag tänkte bidra med ett script jag skrev till en vän, scriptet scroller ett antal av användaren valda objekt horisontellt.
Scriptet i fråga är inte feature complete, upplägg och metod/egenskaps namn kan komma att ändras. Många värden som nu är hårdkodade är meningen att användaren själv ska kunna styra vid initieringen av scriptet. När scriptet är helt klart ska man även kunna skapa vertikala scrollningar.
Kända begränsningar:
- I IE6 måste man trigga quirksmode för att texten som scrollas inte ska synas utanför scrollarean. Detta beror på en bugg IE6 när man kör standards mode rörande overflow:hidden och position:relative.
- Man kan endast skapa en scroll på sidan.
Tillkommet:
- Nu skapas den scrollande texten genom att plocka barnen (childNodes) från den specificerade scrolltaggen. Jag har provat med DIV och UL/OL, men det borde fungera med vilka taggar som helst så länge de är avgränsade på ett korrekt sätt. Det gamla sättet fungerar det också, men då måste man skicka in en ny parameter: true.
- Snyggare markup skapas i scrollern.
- Bytt namn på Array.prototype.toBottom till Array.prototype.repush.
Att göra:
- Fixa så att man kan ha fler scrollers på sidan, om man vill det.
- Göra så att man kan styra parametrar i init()-metoden
Scriptet:
<!-- --><!doctype html>
<html>
<head>
<style>
#scroller { border:1px solid black; width: 400px; height:20px; overflow:hidden; padding:0; margin:0; display:block;}
#scroller .contents {position:relative; visibility:hidden; display:inline; padding:0; margin:0;}
</style>
<title>
</title>
</head>
<body>
<ul id="scroller">
<li>Första</li>
<li>Andra</li>
<li>Tredje, med länk:<a href='http://www.webforum.nu'>besök webForum</a></li>
</ul>
<!--
<div id="scroller">
<p>Första</p>
<p>Andra</p>
<p>Tredje, med länk:<a href='http://www.webforum.nu'>besök webForum</a></p>
</div>
-->
<script>
var scroller={
version:0.3,
licenseURL:"http://creativecommons.org/licenses/by-sa/3.0/",
licenseText:"This scroller script is created by Olle Lundberg and licensed under the Creative Commons Attribution-ShareAlike 3.0 license.",
timer:null,
interval:100,
pixelsToScroll:10,
scrollItems:[],
activeItem:null,
nextItem:null,
scrollArea:document.getElementById("scroller"),
init: function() {
Array.prototype.repush = function (i) {
tempVal=this[i];
this.splice(i,1);
return this.push(tempVal);
}
if (!Array.prototype.push) {
Array.prototype.push = function() {
var n = this.length >>> 0;
for (var i = 0; i < arguments.length; i++) {
this[n] = arguments[i];
n = n + 1 >>> 0;
};
this.length = n;
return n;
};
}
scroller.collectScrollItems();
scroller.addEvent(scroller.scrollArea,"mouseover",scroller.stopScroll);
scroller.addEvent(scroller.scrollArea,"mouseout",scroller.startScroll);
scroller.startScroll();
},
addItem: function(strItem,bolCreate) {
var textContainer;
if (bolCreate) {
if (/UL|OL/i.test(scroller.scrollArea.tagName)) {
textContainer=document.createElement("LI");
textContainer.style.listStyleType="none";
} else {
textContainer=document.createElement("P");
}
textContainer.innerHTML=strItem;
} else {
textContainer=strItem;
}
textContainer.className="contents";
scroller.scrollItems.push(textContainer);
},
collectScrollItems: function() {
for (i=0;i<scroller.scrollArea.childNodes.length;i++) {
if ('undefined' !== typeof scroller.scrollArea.childNodes[i].innerHTML)
scroller.addItem(scroller.scrollArea.childNodes[i],false);
}
},
startScroll: function() {
if (!(null === scroller.timer))
scroller.stopScroll();
if (!scroller.activeItem) {
scroller.nextInline();
} else {
scroller.timer=setInterval(scroller.nextFrame,scroller.interval);
}
},
stopScroll: function() {
clearInterval(scroller.timer);
},
killScroll: function() {
scroller.removeEvent(scroller.scrollArea,"mouseover",scroller.stopScroll);
scroller.removeEvent(scroller.scrollArea,"mouseout",scroller.startScroll);
scroller.stopScroll();
scroller.removeOldItems();
return;
},
nextFrame: function() {
if (parseInt(scroller.activeItem.style.left,10)<(-(parseInt(scroller.activeItem.offsetWidth,10))))
scroller.nextInline();
scroller.activeItem.style.left=(parseInt(scroller.activeItem.style.left,10)-scroller.pixelsToScroll)+"px";
},
nextInline: function() {
scroller.nextItem=scroller.scrollItems[0];
scroller.scrollItems.repush(0);
scroller.removeOldItems();
scroller.activeItem=scroller.scrollArea.appendChild(scroller.nextItem);
scroller.activeItem.style.left=(parseInt(scroller.getStyle(scroller.scrollArea,"width"),10))+"px";
scroller.activeItem.style.visibility="visible";
scroller.startScroll();
},
removeOldItems: function() {
while (scroller.scrollArea.hasChildNodes())
scroller.scrollArea.removeChild(scroller.scrollArea.firstChild);
},
addEvent: function ( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
},
removeEvent: function ( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( 'on'+type, obj[type+fn] );
obj[type+fn] = null;
} else
obj.removeEventListener( type, fn, false );
},
getStyle: function (oElm, strCssRule){
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
} else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
return strValue;
}
}
scroller.addItem("Hej!",true)
scroller.init();
</script>
<input type="button" onclick="scroller.killScroll()" value="Sluta scrolla">
</html>
Tråd för att diskutera scriptet:
http://www.webforum.nu/showthread.php?p=1332756