Jump to content

CSS selectors...


Recommended Posts

EDIT: MOVED to Javascript forum after being steered towards javascript eventually.Anyone know if it's possible to use more than one attribute selector in CSS?Like, say, there's this website that displays ads, and I want to get rid of the ads through adding a custom stylesheet for that site in Opera. Now, this element doesn't have a unique ID or Class (actually none at all), and selecting based on just one attribute will change other things on the site too, things that I can't miss (this is a forum I'm talking about). Some other elements share some but not all attributes of the one I want to hide. Here's the element I want to get rid of by using display: none;<table border="0" cellpadding="0" cellspacing="0" width="100%" height="108">So, is that possible to get rid of?

Link to post
Share on other sites

I may have misunderstood but can't you use inline style.<table style="display:none" border="0" cellpadding="0" cellspacing="0" width="100%" height="108">

Link to post
Share on other sites

im not very good with javascript but is there someway to apply a function to the element even if it doesnt have a name, id or class? if the parent element has an id? with childNodes or something? then you could maybe apply the css with javascript or by getElementByAttribute and use the height="108"

Link to post
Share on other sites
I may have misunderstood but can't you use inline style.<table style="display:none" border="0" cellpadding="0" cellspacing="0" width="100%" height="108">
I don't have control of the page. It's a forum I often visit that have ads. Before it was possible to pay for full membership and get rid of ads. Now they took that out of the membership privileges, so I need another way to get rid of them.
Link to post
Share on other sites
post an example of the code and we'll see what we can do.Does opera let you add custom Javascript or only CSS?
You can customize it however you want. Tools -> Preferences -> Advanced -> Content -> Manage Site Preferences -> Add... -> site adress -> Display (for custom CSS file)/Scripting (for custom JS file).Example of code:
	<table border="0" cellpadding="0" cellspacing="0" width="100%" height="108">	<tr>		<td align="center" valign="middle" width="100%" height="108" bgcolor="#000000"> 		<table border="0" cellpadding="0" cellspacing="0" width="974" height="108" align="center">			<td align="left" valign="middle" height="108" width="728">			<script LANGUAGE="JavaScript">			headAd = true;			document.write('<script LANGUAGE="JavaScript1.1" SRC="http://ad.doubleclick.net/adj/swlucas.forums/;dcopt=ist;pos=top;tile=1;sz=728x90;ord=' + ord + '?" ><\/SCRIPT>');			</script>			<NOSCRIPT>			<A HREF="http://ad.doubleclick.net/jump/swlucas.forums/;pos=top;tile=1;sz=728x90;ord=123456789?" TARGET="_blank">			<IMG SRC="http://ad.doubleclick.net/ad/swlucas.forums/;pos=top;tile=1;sz=728x90;ord=123456789?" WIDTH="728" HEIGHT="90" BORDER="0" ALT=""></A>			</NOSCRIPT>			</td>			<td><img src="/images/clear.gif" width="172" height="1" /></td>		</table>		</td>	</tr>	<tr>		<td><img src="/images/clear.gif" width="1" height="18" /></td>	</tr>	</table>

Now, the table element I want to get rid of (the one above) is the first table element in the body element, however it is NOT the first element, so I believe the table:first-child pseudo-class is out the window, unless someone knows something I don't.Anyone get any ideas from this site:http://www.w3.org/TR/CSS21/selector.html?If not, looking into javascript would probably not be a bad idea either. Is it possible to check for all those things (border="0" cellpadding="0" cellspacing="0" width="100%" height="108") and then hide the table element based on that?

Link to post
Share on other sites
Is it possible to check for all those things (border="0" cellpadding="0" cellspacing="0" width="100%" height="108") and then hide the table element based on that?
maybe with getElementByAttribute not sure tho
Link to post
Share on other sites

Tried this:

var ad = document.getElementsByTagName("table");if (ad.border="0" && ad.cellpadding="0" && ad.cellspacing="0" && ad.width="100%" && ad.height="108") {	ad.style.display="none";};

Didn't work.Perhaps make an array of all the table elements in the source and then hide the first one? Although I wouldn't know how to do that...

Link to post
Share on other sites

Jonas, You can avoid ads by modding your Hosts file, too. The basic procedure is to add the domain to your Hosts file and point the URL to 127.0.0.1. The ads aren't found on your localhost and never get displayed. :)

Link to post
Share on other sites
Jonas, You can avoid ads by modding your Hosts file, too. The basic procedure is to add the domain to your Hosts file and point the URL to 127.0.0.1. The ads aren't found on your localhost and never get displayed. :)
Sorry, what? Does this require server access? Because I don't have that.
Link to post
Share on other sites

Hmm. I can still just block ad.doubleclick.net/* through Opera's Blocked Content function. However, I also want to get rid of the black bar the ads are displayed on. See here, and you'll understand:http://forums.starwars.com/That black 108 px high bar at the top.

Link to post
Share on other sites

If you have multiple tables in your page (I mean, in addition to the one that you want to be rid of) you could assign a special class to each of those tables like this:

<!-- Table that has the ad--><table></table><!-- tables that you want to keep--><table class="keepme"></table><table class="keepme"></table><table class="keepme"></table>

Then you can use javascript to loop through all the tables:

var tables = document.getElementsByTagName("table");for(var i = 0; i < tables.length; i++){	if(tables[i].className != "keepme")	{		tables[i].style.display = "none";	}}

If, on the other hand, you don't have control over any of the content other than the javascript, and that table is always going to be the first table in the code, you might just try this:

var tables = document.getElementsByTagName("table");tables[0].style.display = "none";

Link to post
Share on other sites

I don't have control over any content on the actual site, only what I can manipulate through Opera (javascript/css overriding, custom js file/stylesheet). That last script you gave me I suppose should work, but doesn't. I'm not an expert or anything, but do you perhaps have to make tables an array or something first?var tables = new Array()or something like that?

Link to post
Share on other sites

The getElementsByTagName returns an array of elements; you wouldn't have to declare tables as an Array first.You might try this to see if it's doing anything:

var tables = document.getElementsByTagName("table");// should alert the number of table elements on the page.alert(tables.length);

If the tables[0].style.display = "none" part isn't working, could it be that the script is running before all the elements on the page have been loaded into the DOM? If so, you might try this instead:

function hideAd(){	var tables = document.getElementsByTagName("table");	tables[0].style.display = "none";}window.onload = hideAd;

Link to post
Share on other sites
The getElementsByTagName returns an array of elements; you wouldn't have to declare tables as an Array first.You might try this to see if it's doing anything:
var tables = document.getElementsByTagName("table");// should alert the number of table elements on the page.alert(tables.length);

If the tables[0].style.display = "none" part isn't working, could it be that the script is running before all the elements on the page have been loaded into the DOM? If so, you might try this instead:

function hideAd(){	var tables = document.getElementsByTagName("table");	tables[0].style.display = "none";}window.onload = hideAd;

that window.onload thing didn't work either. I'm beginning to doubt if Opera's ability to add your own js really works. Anyway, I'll move this to the Javascript forum, since there doesn't seem to be a CSS solution.
Link to post
Share on other sites

Does opera say were this custom js gets inserted? It makes big difference when the js is executed. Ideally it should be added at then end of the page to give you the ability override everything on the page.If the window.onload doesn't work that means that the page is already using the onload event.If the custom JS gets added at the end you can use

window.onload += hideAd;

to insert the function and not break existing onload events.

Link to post
Share on other sites
Does opera say were this custom js gets inserted? It makes big difference when the js is executed. Ideally it should be added at then end of the page to give you the ability override everything on the page.If the window.onload doesn't work that means that the page is already using the onload event.If the custom JS gets added at the end you can use
window.onload += hideAd;

to insert the function and not break existing onload events.

Hmm, I tried applying the javascript to a spesific site (through "Manage site preferences..."). After I applied it to general user javascript it worked, however now it removes the first table on every page I visit, which means that I need a way for the script to filter sites. I'm thinking along the lines of
function hideAd(){	var tables = document.getElementsByTagName("table");	if (window.location.search(/starwars.com/) >= 1) {	tables[0].style.display=none;	}}window.onload = hideAd;

or

function hideAd(){	var tables = document.getElementsByTagName("table");	if (location.href.search(/starwars.com/) >= 1) {	tables[0].style.display=none;	}}window.onload = hideAd;

Although that doesn't work. Isn't that the correct way to search for a string within another string?

Link to post
Share on other sites

Weird, for some reason it just works on forums.starwars.com, and not on other starwars.com sites... :|

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...