Javascript change style attribute of span

diabolo · Apr 26, 2010

So everyone that has a Facebook knows that there is a feature where you can hide content from 'non-members' of a group/fan page. I, if not many, have found a way to bypass this. Since Facebook does not actually keep the content away from 'non-members' rather it just hides the content with some cheap styling.

Code:

visibility:hidden;

so I just use FireBug and delete that attribute so I dont actually have to join the group.

Now opening FireBug each time and looking for the content is not a hassle but can be simplified. I was thinking of javascript and changing the style to visible.

Code:

document.*.style.visibility = "visible";

but then the span tags do not always have an id or class attached to define them. so i came across this.
http://robertnyman.com/2006/01/23/monday-code-giveaway-getelementsbyattribute/
which basically allows you to search by attribute and its properties.

the only problem is. I cant get the javascript to work properly. anybody know what im doing wrong.
i would post up the code i was working with, but it might just confuse you all, because i did a ****ty job.

here is the template for most of these pages

Code:

<div style="position: relative; overflow: hidden;">
<span style="background: none repeat scroll 0% 0% white;">
Un-Hiden Content

<span style="visibility: hidden;">
/*********
* Hidden Content
*********/
</span>
<span style="visibility: visible;"></span>
</span>
</div>

essellar · Apr 27, 2010

Why not just use getElementsByTagName() and cycle through the collection?

diabolo · Apr 27, 2010

how would I cycle? because I have no javascript experience

descalzo · Apr 27, 2010

Code:

var spanArray = document.getElementsByTagName('span');
var number_spans = spanArray.length ;

for( var i = 0; i < number_spans ; i++ ){

 var target = spanArray[ i ] ;

// do something with target like set visibility

}

diabolo · Apr 27, 2010

thank you descalzo!
here is what i got so far. the link to show the span tag works but Im having difficulty transforming the javascript script into something I can bookmark and put into the URL. (http://webdevelopmenttutorials.com/enteringjavascriptintotheurlbox.php)

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<title>Dynamic CSS Properties</title>	
	<script language="JavaScript">
	function change(){
	//document.getElementById("box1").style.visibility = "visible";
	
	var spanArray = document.getElementsByTagName('span');
   var number_spans = spanArray.length ;
   for( var i = 0; i < number_spans ; i++ ){
   var target = spanArray[ i ] ;
      // do something with target like set visibility
      target.style.visibility = "visible";
   }
   }
   function change2(){
      var spanArray=document.getElementsByTagName('span');var number_spans=spanArray.length;for(var i=0;i<number_spans;i++){var target=spanArray[i];target.style.visibility="visible";}
   }
	</script>
</head>

<body>
<a href="javascript:change2();">Change</a>
<br />
<div style="position: relative; overflow: hidden;"><center>
<br><br>
<font size="5" color="blue">

1. just press the <img src="http://up203.siz.co.il/up1/jw2k4az1imny.jpg"> button on the top to see the picture i promise you its so funny!!!!:
<br><br><br>

<span style="background: none repeat scroll 0% 0% white;"><span style="visibility: hidden;">

<a onmousedown="UntrustedLink.bootstrap($(this), &quot;77a0d&quot;, event)" rel="nofollow" target="_blank" onclick="(new Image()).src = '/ajax/ct.php?app_id=4949752878&amp;action_type=3&amp;post_form_id=3917211492ade40ee468fbe283b54b3b&amp;position=16&amp;' + Math.random();return true;" href="http://thebigbrotherisrael.blogspot.com/2010/04/all-family-guy-characters-in-real-life.html">Press here to see the picture!!!</a>

</span><span style="visibility: visible;"></span></span></font></center></div>

</body>
</html>

I have tried

Code:

javascript:var spanArray=document.getElementsByTagName('span');var number_spans=spanArray.length;for(var i=0;i<number_spans;i++){var target=spanArray[i];target.style.visibility="visible";};

but it doesnt do anything

misson · Apr 28, 2010

Since you're already using Firefox, install Greasemonkey and write it as a Greasemonkey script. An additional advantage is it will get invoked automatically whenever you visit a facebook page.

diabolo · Apr 28, 2010

I will definitely go and try that misson.
But what about IE users or Safari users? so im still looking for a javascript method

lemon-tree · Apr 28, 2010

Just to let you know that code works just fine as it is. To allow people to drag it to their Bookmark bar, make a link like this:

<a href="javascript:var spanArray=document.getElementsByTagName('span');var number_spans=spanArray.length;for(var i=0;i<number_spans;i++){var target=spanArray;target.style.visibility='visible';};
">Show Spans</a>

Simple as that.

descalzo · Apr 28, 2010

You need single quotes around 'visible'

lemon-tree · Apr 28, 2010

Yes, that is true. I have changed it now

diabolo · Apr 28, 2010

it is still not working. sorry if I am making a silly mistake and relying on you guys.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<title>Dynamic CSS Properties</title>	
	<script language="JavaScript">
	function change(){
	//document.getElementById("box1").style.visibility = "visible";
	
	var spanArray = document.getElementsByTagName('span');
   var number_spans = spanArray.length ;
   for( var i = 0; i < number_spans ; i++ ){
   var target = spanArray[ i ] ;
      // do something with target like set visibility
      target.style.visibility = "visible";
   }
   }
   function change2(){
      var spanArray=document.getElementsByTagName('span');var number_spans=spanArray.length;for(var i=0;i<number_spans;i++){var target=spanArray[i];target.style.visibility="visible";}
   }
	</script>
</head>

<body>
<a href="javascript:change2();">Change</a>
<br />
<a href="javascript:var spanArray=document.getElementsByTagName('span');va r number_spans=spanArray.length;for(var i=0;i<number_spans;i++){var target=spanArray[i];target.style.visibility='visible';};
">Show Spans</a> 
<br />
<div style="position: relative; overflow: hidden;"><center>
<br><br>
<font size="5" color="blue">

1. just press the <img src="http://up203.siz.co.il/up1/jw2k4az1imny.jpg"> button on the top to see the picture i promise you its so funny!!!!:
<br><br><br>

<span style="background: none repeat scroll 0% 0% white;"><span style="visibility: hidden;">



<a onmousedown="UntrustedLink.bootstrap($(this), &quot;77a0d&quot;, event)" rel="nofollow" target="_blank" onclick="(new Image()).src = '/ajax/ct.php?app_id=4949752878&amp;action_type=3&amp;post_form_id=3917211492ade40ee468fbe283b54b3b&amp;position=16&amp;' + Math.random();return true;" href="http://thebigbrotherisrael.blogspot.com/2010/04/all-family-guy-characters-in-real-life.html">Press here to see the picture!!!</a>

</span><span style="visibility: visible;"></span></span></font></center></div>

</body>
</html>

lemon-tree · Apr 28, 2010

How exactly are you trying to run it? All you need to do is open that page and drag the link I gave you to your bookmarks bar. Then, when you're on the page you want to show, just click the bookmark.

diabolo · Apr 28, 2010

lemon-tree said:
How exactly are you trying to run it? All you need to do is open that page and drag the link I gave you to your bookmarks bar. Then, when you're on the page you want to show, just click the bookmark.

I have tested it two way and both give the same result.
1) I tested it using the link on my mock page
2) I have bookmarked it and tested on a facebook page
both, show the hidden content and then quickly change the contents of the entire page to 'visible'

Javascript change style attribute of span

diabolo

Community Advocate

essellar

Community Advocate

diabolo

Community Advocate

descalzo

Grim Squeaker

diabolo

Community Advocate

misson

Community Paragon

diabolo

Community Advocate

lemon-tree

x10 Minion

descalzo

Grim Squeaker

lemon-tree

x10 Minion

diabolo

Community Advocate

lemon-tree

x10 Minion

diabolo

Community Advocate

Free Web Hosting

Our Community

Legal