syntaxhighlighter hover effect

기본단계
 http://sexybone.tistory.com/189 
 

syntax highlihgter hover effect 스크립트 적용 오류 해결

문제점 1. 순수 소스를 봤을때, 소스상에  class=syntaxhighlighter가 없다. (firefox에만 보인것임)

즉. class=syntaxhighlighter는 js로 돌린 후에 나중에 만들어 지는 애. html도 css도 아니다. 

곧, javascript로 돌린다음에 나오는 애라는 뜻인데,

그러면 syntaxhighlighter hover effect도 javascript 인데..

그럼 혹시 두개의 스크립트가 동시에 일어나거나 시간적으로 텀을 주지 않아서, 스크립트가 꼬이는거 아닌가??

* 순서 : all() 이 다 돌아간거 확인 된 후에 hover effect 가 들어가야 마땅하다. 

* 불필요한 js brush들 다 지우기.

해결방법 : setTimeout("함수명()",1000) 함수가 있다.

syntaxhighlighter.all() 이 실행된거 확인된 후, hover effect를 줘야 하니까.

지정된 시간후 스크립트가 실행되는 함수를 사용하자. 

그렇게 해서 나온 소스 

// 미선 블로그 syntax highlighter hover 효과 나타나도로 시간텀 주는거

//syntax highlighter 적용.
SyntaxHighlighter.all();

// 요거는 시간 텀주기
setTimeout(function() {
	$('.syntaxhighlighter').parents('div').css({
	'height' : function() {
		return $(this).height();
	}
	});
	$('.syntaxhighlighter').hover(function() {
		$(this).css({
			'position' : 'absolute',
			'border' : '1px solid red',
			'z-index' : '100'
		});
	}, function() {
		$(this).css({
			'position' : 'relative',
			'border' : '1px solid silver'
		});
	});
}, 1000);

css 정리

위의, postition, border.. 이런거 보일거다.

이건 뭐지?? css에서 많이 봤던거다.

쓸대없이 저런게 스크립트에 들어가면 굉장히 느려진다.

곧, 저걸 css로 옮기고, class를 하나 잡아준다.

최종 : 스크립트를 가볍게 

$('.syntaxhighlighter').hover(function() {
	$(this).addClass('syntaxt-on');
}, function() {
	$(this).removeClass('syntaxt-on');
});

염두해 둬야 할것: css 는 선처리, javascript는 후처리.. 

javascript는 서로간의 시간텀도 중요하고, 전체적인 스토리를 잘 짜야한다.

안그러면, 스크립트가 꼬이거나, 실행이 안되거나 안돌아가는 일이 발생.

js 적용 process

1. firefox로 콘솔에서 바로 실행.. 디버깅도 하고..

2. index.html 에 script자체를 붙여넣기 해서 되는지 안되는지 보기 : 간혹 자바스크립트끼리 꼬이거나, 겹쳐서 안될땐 시간텀도 주고, 스크립트 순서도 맞춰주고 안쓰는건 빼고..

3. 그다음에, css로 정리할건 정리하고, js파일로 인클루드 한다.