IDEA: Greasemonkey script etc to hide Slashdot Video box?

[TaoPhoenix]

Slashdot has been struggling for a while, and Dice seems to have its own ideas on UI layout. It seems the much reviled Beta one is parked for a while, but a few days ago, something truly awful appeared: This video box:

[attachthumb=#]

It's pretty clear in the page source it gets pulled with (variants by day?) code that starts off with stuff like this:

[attachthumb=#]

So I'm looking for some way it simply gets hidden local side, then the rest of the page would just be normal and I can pretend it wasn't there.

Mouser seems to think this is a good thing for Greasemonkey. (Which I've never used much! So I'll need some user help!)

Thoughts?

[4wd]

Do you have a link to a page with it on?

I don't get it just looking around the site, (not even with uBlock/etc disabled), so maybe it's specific pages or a geo-localised object.

Edit: Just tried with a VPN and still don't see it, (using IE, Pale Moon, Dragon, or IceDragon).

[TaoPhoenix]

Do you have a link to a page with it on?

I don't get it just looking around the site, (not even with uBlock/etc disabled), so maybe it's specific pages or a geo-localised object.

Edit: Just tried with a VPN and still don't see it, (using IE, Pale Moon, Dragon, or IceDragon).

That's really weird!
Geo-Localized!? Where are you?
I get it on EVERY day's front page!


It's about 6 down on the page for me right now, and about there every time. Slashdot does a "rolling live update" with a script, and it always is forced to be about that spot on the page.

[4wd]

Do you have a link to a page with it on?

I don't get it just looking around the site, (not even with uBlock/etc disabled), so maybe it's specific pages or a geo-localised object.

Edit: Just tried with a VPN and still don't see it, (using IE, Pale Moon, Dragon, or IceDragon).

That's really weird!
Geo-Localized!? Where are you?

Australia

I get it on EVERY day's front page!

Found it!

Strange, I could have sworn it wasn't there the first time I looked.  Guess my brain's not completely caffeinated yet  

Slashdot-VideoBytes.user.js

Code: (javascript)

// ==UserScript==
// @name /. VideoBytes kill Kill KILL
// @namespace I'm responsible
// @include http://slashdot.org/*
// ==/UserScript==
 
// Just removes the  element with id 'slideshow-wrap'
function remove(id) {
  return (elem=document.getElementById(id)).parentNode.removeChild(elem);
}

remove('slideshow-wrap');

That gets rid of the video images but leaves the placeholder, now I can see some source I'll try and get rid of the rest.

[TaoPhoenix]

Glad my guess was good!
I can fake pretending most of the other stuff Dice is doing doesn't matter, but that one is in a league of its own!

(They also had the bright idea to stick polls into the news section, but at least those start minimized and I can just decide to ignore minimized things. But the video one is brutal!)

Hehe Actually, are you ready to make *two* of them? Because if you can make it so easy even I can use it, I'm gonna post it ON slashdot in like 9 comment threads, and watch them then get grumpy and change it!

(But then the people that catch on can just change the script themselves/their tech buddy.)

[4wd]

Try this:

Slashdot-VideoBytes.user.js

Code: (javascript)

// ==UserScript==
// @name /. VideoBytes kill Kill KILL
// @namespace Modify it yourself
// @include http://slashdot.org/*
// ==/UserScript==

document.getElementsByClassName('vid-river-header')[0].outerHTML = '';
document.getElementsByClassName('units-12 river-group')[0].outerHTML = '';

Rather simplistic, if the class name changes each day then it will only work for the days that it matches.  Your best bet is to grab all matching tags and iterate through them to find something particular to those DOM elements, then remove them.

[TaoPhoenix]

Recall, I was saying I never used scripts before, can you give me a primer on what to do with it?
Something bothers me, it looks too short ...

Also I don't exactly understand how it works, but a guess was a script could look for the starter and closer and nuke everything in between.

[4wd]

Create a file called Slashdot-VideoBytes.user.js and copy the code from the post above into it, then save it.

Drag'n'Drop it onto Pale Moon/Firefox, if GreaseMonkey is installed it will see it as a valid Userscript and ask if you want to install it.


What it does:

Code: (html4strict)

	</article><article id="firehose-000" class="fhitem fhitem-poll article usermode thumbs grid_24">
	<header>
		<div class="vid-river-header">
			<span> 
				<a href="/videos">Video Bytes</a>
			</span>
			<span class="sub-link pull-right"> 
				<a href="/videos">view more</a>
			</span>
		</div>
	</header>
	<div class="units-12 river-group">
           <div id="slideshow-wrap">
              <input type="radio" id="button-6" name="controls" checked="checked"/>
              <label for="button-6"></label>

The above is the section of the page source that deals with the VideoBytes display.

Code: (javascript)

document.getElementsByClassName('vid-river-header')[0].outerHTML = '';

To break this statement down simply, (I'm nothing if not simple):

Code: (text)

document.getElementsByClassName('vid-river-header')

Retrieves an array (it's not really an array but for this explanation it'll do) of DOM elements that have the class vid-river-header which you can see in line 3 of the page source above.

There's only one instance of this class in the whole page, it's the first in our array so we reference it as 0 (zero numbered):

Code: (text)

[0]

We reference the HTML that contains this class using .outerHTML, this will also include all its descendents, (the following <span> tags, etc), until the end of the tag.

Code: (text)

document.getElementsByClassName('vid-river-header')[0].outerHTML

references all of this:

Code: (text)

<div class="vid-river-header">
  <span>
    <a href="/videos">Video Bytes</a>
  </span>
  <span class="sub-link pull-right">
    <a href="/videos">view more</a>
  </span>
</div>

Finally, we replace it with '' (a pair of apostrophes, ie. nothing).  So the page source for that class effectively becomes:

Code: (text)

<header>

</header>

The same thing happens with the next line except we're now looking for a class of units-12 river-group.

The first line takes care of the blue VideoBytes header, the second takes care of everything in the box below it.

As I said, it's a rather simplistic solution and a simple change of the class name will break it but it works with the source I can currently see.

[TaoPhoenix]

Whee!
See? 2 lines of code! Bye bye videos!

Smart people beat the common denominator every time! Go DC!

[TaoPhoenix]

"We reference the HTML that contains this class using .outerHTML, this will also include all its descendents, (the following <span> tags, etc), until the end of the tag."

That's really the magic bullet, and I think it can be surprisingly adapted to ...
well ... nuke stuff.

I'm betting it will eat a lot of those sliders, and maybe lots of other ad scripts, complementing adblock.

Meanwhile slashdot isn't known for pushing fast code changes, so I bet the basic one will work for a good while, and I'll try to report back in with some good "nukes".

Stay tuned!

[4wd]

You should check out the other getElement(s) methods as they can get specific tags, ids, and everything other than just classes.

http://www.w3schools.com/jsref/dom_obj_document.asp

The above has examples you can edit that interact with you.

[TaoPhoenix]

Sure, some day when I have a matching couple of pages to hack at!

I have glanced at web mag code, it's kinda clean as far as it goes. That's why I like your method (pun intended?) - because after a pseudo code like

header
news
video
comments

then it goes something like "begin red-mountain advert slider".

So you just nuke the whole thing and be done with it.