Need help with Youtube userscript

Need help with Youtube userscript

Here is the script:

// ==UserScript==
// @include        http://youtube.com/watch*
// @include        http://*.youtube.com/watch*
// ==/UserScript==

// Auto-expand description
document.getElementById('watch-info').className = 'yt-rounded expanded';
document.getElementById('watch-description').className = 'watch-expander yt-uix-expander yt-uix-expander-animated';

// Scrollable watch related
var swr = document.getElementById('watch-related');
swr.style.overflow = 'auto';
swr.style.maxHeight = '580px';

// Auto-scroll to title
function g(ID) {
	return document.getElementById(ID);
}
g("watch-headline-container").scrollIntoView(true);

I mixed a few userjs together to restyle the youtube.com/watch* pages so that the watch related list become a scrollable list, but it doesn't load the hidden content inside the list unless I move the page a bit. I have no idea how to force it to load all the hidden content when I scroll the list downward without moving the page... Please help!!!

Aww... Come on, nobody can help me???

This scrollIntoView thing is part of a YouTube script?

Originally posted by Frenzie:

This scrollIntoView thing is part of a YouTube script?

Uh... yes, I wrote it with my very limited knowledge in JavaScript after read through some tutorials.
Is there anything wrong with that section??? I just try to make the page to scroll to the title on load...

Also, do you know why the hidden content inside the watch related list doesn't load unless I move the page?

Originally posted by dude09:

Is there anything wrong with that section???

No, it's fine. I was just a little confused by your usage of a function while you didn't use the same function earlier for the same action (where the same thing occurred three times).

Originally posted by dude09:

Also, do you know why the hidden content inside the watch related list doesn't load unless I move the page?

Seems that's the way YouTube set up their page. I came up with this workaround:

swr.addEventListener('scroll', function(){document.documentElement.scrollTop=document.documentElement.scrollTop-1;document.documentElement.scrollTop=document.documentElement.scrollTop+1}, false);

Thanks! It works great!

Originally posted by Frenzie:

I was just a little confused by your usage of a same function earlier for the same action (where the same thing occurred three times).

Well, that's because I don't know what I'm really doing... I read a few different "how to" tutorials & just repeat whatever works.

Well, a function is something you use to prevent duplication of effort (i.e. a repetition of a bunch of the same actions), or in some cases just to save keystrokes.

I would've expected you to use your g function each and every time where you used document.getElementById for that reason, rather than declaring the function and using it just once!

Also I just realized I should've used ++ and --, but oh well. :P

Fixed, is this better???

// Auto-scroll to title
document.getElementById("watch-headline-container").scrollIntoView(true);

// Auto-expand description
document.getElementById('watch-info').className = 'yt-rounded expanded';
document.getElementById('watch-description').className = 'watch-expander yt-uix-expander yt-uix-expander-animated';

// Scrollable watch related
document.getElementById('watch-related').addEventListener('scroll', function(){document.documentElement.scrollTop=document.documentElement.scrollTop-1;document.documentElement.scrollTop=document.documentElement.scrollTop+1}, false);
document.getElementById('watch-related').style.maxHeight = '580px';
document.getElementById('watch-related').style.overflow = 'auto';

There wasn't anything wrong with the other one, it was just somewhat inconsistent.

I wouldn't call removing the variable to refer to the same thing multiple times an improvement though.

How about this? Does it make the script load faster or performe better??

function g(ID) {
	return document.getElementById(ID);
}

// Auto-scroll to title
g("watch-headline-container").scrollIntoView(true);

// Auto-expand description
g('watch-info').className = 'yt-rounded expanded';
g('watch-description').className = 'watch-expander yt-uix-expander yt-uix-expander-animated';

// Scrollable watch related
g('watch-related').addEventListener('scroll', function(){document.documentElement.scrollTop=document.documentElement.scrollTop-1;document.documentElement.scrollTop=document.documentElement.scrollTop+1}, false);
g('watch-related').style.maxHeight = '580px';
g('watch-related').style.overflow = 'auto';

What I was saying was more about writing scripts than about the machine's speed of interpreting it. If it does make any difference one way or the other it's only measurable in nanoseconds.

That said, what I personally think would be the most logical way to present your original script would indeed be along the lines of

function g(ID) {
    return document.getElementById(ID);
}

// Auto-scroll to title
g('watch-headline-container').scrollIntoView(true);

// Auto-expand description
g('watch-info').className = 'yt-rounded expanded';
g('watch-description').className = 'watch-expander yt-uix-expander yt-uix-expander-animated';

// Scrollable watch related
var swr = g('watch-related');
swr.addEventListener('scroll', function(){document.documentElement.scrollTop--;document.documentElement.scrollTop++}, false);
swr.style.maxHeight = '580px';
swr.style.overflow = 'auto';]

OK, thanks for the JavaScript 101 enlightenment.