Visa/Göm radnummer

3 svar · 342 visningar · startad av Qimen 2 maj 2007

QimenMedlem sedan juni 20015 009 inlägg

2 maj 2007 22:19#1

Hej,

Har ett litet script som gör att man kan visa och dölja radnummer på kod- och phpboxar i mitt forum. Det fungerar som det ska och firefox säger inget men i IE får jag ett javascriptfel när jag klickar på länken som aktiverar scriptet.

"Object required"

Scriptet ser ut såhär:

function stringLeftPad(sTarget, sPad, sLength) {
	while(sTarget.length < sLength) {
		sTarget = sPad+sTarget;
	}
	return sTarget;
}

function toggleRowNumbers(iCodeBlock, iRowCount, iRowStart) {
	var iRowNr;
	var rElement;
	
	for(var i = 0; i <= iRowCount; i++) {
		iRowNr = i+iRowStart;
		rElement = document.getElementById('codeBlock'+iCodeBlock+'RowNr'+iRowNr);
		
		[B]if(rElement.style.display == 'none') {[/B]
			rElement.style.display = 'inline'
			rElement.innerHTML = stringLeftPad(''+iRowNr,'0',(((iRowCount+iRowStart)+'')).length)+':&nbsp;';
			
		} else {
			rElement.style.display = 'none'
			rElement.innerHTML = '';
		}
	}
}

Länken ser ut såhär:

javascript:toggleRowNumbers(18,7,99);

Raden IE klagar på är den fetmarkerade. Vad kan det vara som är fel? Kan det vara en sådan simpel sak att jag kör med xhtml och detta inte fungerar då? :)

Mvh

nitro2k01Medlem sedan aug. 20039 342 inlägg

2 maj 2007 23:43#2

Felet beror på att document.getElementById på raden innan inte kan hitta ett giltigt element med det id du anger. Varför detta sker är svårt att säga utan mer kod. Det kan t ex vara så att koden som genererar radnumren inte fungerar med IE.

QimenMedlem sedan juni 20015 009 inlägg

3 maj 2007 01:51#3

<div id="codeBlock3Outer" class="codeBlockOuter">
	<div id="codeBlock3Top">
		<span><strong>Fil: test.php5</strong> |&nbsp;</span>
		<a href="javascript:toggleRowNumbers(3,4,13);" class="toggleRowNumbers">Visa/G&ouml;m radnummer</a>
	</div>
			
	<div id="codeBlock3" class="codeBlock">
		<div id="codeBlock3RowNr13" class="codeBlockRowNr" style="display:inline">13:&nbsp;</div>
		
		<span style="color: #0000BB">&lt;?php </span>
		<span style="color: #FF8000">//mooo<br />
			<div id="codeBlock3RowNr14" class="codeBlockRowNr" style="display:inline">14:&nbsp;</div>
		</span>
		<span style="color: #007700">public function </span>
		<span style="color: #0000BB">test</span>
		<span style="color: #007700">() {<br />
			<div id="codeBlock3RowNr15" class="codeBlockRowNr" style="display:inline">15:&nbsp;</div>echo [
		</span>
		<span style="color: #0000BB">b</span>
		<span style="color: #007700">]</span>
		<span style="color: #0000BB">$moo</span>
		<span style="color: #007700">;[/</span>
		<span style="color: #0000BB">b</span>
		<span style="color: #007700">] </span>
		<span style="color: #FF8000">// not working<br />
			<div id="codeBlock3RowNr16" class="codeBlockRowNr" style="display:inline">16:&nbsp;</div>
		</span>
		<span style="color: #007700">} </span>
		<span style="color: #0000BB">?&gt;</span>
	</div>
</div>

Så ser en phpruta ut genererad.

colioneMedlem sedan juni 20014 421 inlägg

3 maj 2007 09:40#4

Få jag ge ett annat tips istället?
Generera radnummrena med hjälp av en ordered list (<ol>) och varje rad får en <li> på så sätt så kan man kopiera koden utan att radnummrena följer med, man kan även väldigt enkelt dölja radnummer om man känner för det genom att sätta list-style-type:none för aktuell <ol>.

En snyggare och mer användarvänlig lösning tycker jag. :)

Prova själv följande kod.

<html>
<head>
<script>
function toggleRowNumbers(divid){
olid=divid.getElementsByTagName("OL")[0]
olid.style.listStyle = (olid.style.listStyle.match("decimal")||olid.style.listStyle=="") ? "none" : "decimal outside none";
}
</script>

<body>
<div id="code3">
<a href="javascript://" onclick="toggleRowNumbers(this.parentNode)" id="toggle_3" class="toggleRowNumbers">Visa/G&ouml;m radnummer</a> 
<ol>
<li>foo
<li>bar
<li>foobar
</ol>
<div>

</body>
</html>