Should I convert this piece of code from JQuery to JS?

[ulthane]

Hello everyone,
I got a small piece of code, which doesn’t really do anything special with jquery, but I still wrote it using jquery library.
Now I want to get rid of the library from 2 of my pages which uses the excact same code and convert my to normal JS.
Here:s a snippet:

var show = false;
$(document).ready(function() {
	validateCSS();
});
$(window).resize(function() {
	if ($(window).width() > 600)
		switchContent(2);
	validateCSS();
});
$(window).scroll(function() {
	validateCSS();
});
function validateCSS() {
	if ($(window).scrollTop() > $('header').eq(0).height() + ($(window).width() < 1500 ? 42 : 0))
		$('#search_form').css('top', '0');
	else
		$('#search_form').css('top', $('header').eq(0).height() - $(window).scrollTop() + ($(window).width() < 1500 ? 42 : 0) + 'px');
}
function switchContent(num) {
	if (num == 2)
	{
		show = false;
		$('#search_icon').find('img').attr('src', '/images/search_icon.jpg');
		$('#search_form').removeAttr('style');
		$('#gallery_holder').removeAttr('style');
		$('#content_wrap').prepend($('#search_form'));
	}
	else
	{
		if (show)
		{
			show = false;
			$('#search_icon').find('img').attr('src', '/images/search_icon.jpg');
			$('#gallery_holder').css('display', 'block');
			$('#search_form').css('display', 'none');
			$('#content_wrap').prepend($('#search_form'));
		}
		else
		{
			show = true;
			$('#search_icon').find('img').attr('src', '/images/search_icon2.jpg');
			$('#content_wrap_inner').find('h2').after($('#search_form'));
			$('#gallery_holder').css('display', 'none');
			$('#search_form').css('display', 'block');
		}
	}
}

Here is what I did so far, but doesn’t seem to have support for all browsers…

var doc = document.documentElement,
header = document.getElementsByTagName('header')[0],
form = document.getElementById('search_form'),
img = document.getElementById('search_icon').getElementsByTagName('img')[0],
gallery = document.getElementById('gallery_holder'),
wrap = document.getElementById('content_wrap'),
inner = document.getElementById('content_wrap_inner'),
h2 = document.getElementsByTagName('h2')[0],
show = false;
window.onload = function()
{
	validateCSS();
}
window.onscroll = function()
{
	validateCSS();
}
window.onresize = function()
{
	if (window.innerWidth > 600)
		switchContent(2);
	validateCSS();
}
function validateCSS()
{
	if ((window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0) > header.offsetHeight + (window.innerWidth < 1500 ? 42 : 0))
		form.style.top = '0';
	else
		form.style.top = header.offsetHeight - (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0) + (window.innerWidth < 1500 ? 42 : 0) + 'px';
}
function switchContent(num)
{
	if (num == 2)
	{
		show = false;
		img.src = '/images/search_icon.jpg';
		form.removeAttribute('style');
		gallery.removeAttribute('style');
		wrap.insertBefore(form, inner);
	}
	else
	{
		if (show)
		{
			show = false;
			img.src = '/images/search_icon.jpg';
			form.style.display = 'none';
			gallery.style.display = 'block';
			wrap.insertBefore(form, inner);
		}
		else
		{
			show = true;
			img.src = '/images/search_icon2.jpg';
			h2.parentNode.insertBefore(form, h2.nextSibling);
			gallery.style.display = 'none';
			form.style.display = 'block';
		}
	}
}

[oddz]

Assigning event handlers directly to elements like that is a bad idea. Especially if there is other code that it could possibly override. I would just leave the jQuery alone as there are some functions being used there that do have a purpose in providing a normalized api for different browsers. I don’t think there is much to gain by converting it myself – though javascript and performance elitist will say otherwise…

For what it is worth what you have written so far is much more sloppy than the jQuery code. More performant perhaps but not in any significant/noticeable way. Waste of time.

[ulthane]

Well it just didn’t seem something too much complicated to achieve that requires me to add such a library, infact most of the things are already done and I belive are supported in most browsers, about event handlers I do not worry about anything that would override them.
The thing seems to fully work in chrome, but events doesn’t seem to respond properly in other browsers, thats all.

Here are links:
With JQuery: http://petpal.co.il/cats
With JS: http://petpal.co.il/test