Javascript change style attribute of span

**diabolo** · 04-26-2010 08:52 PM

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/mo...tsbyattribute/
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** · 04-27-2010 04:47 AM

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

**diabolo** · 04-27-2010 11:03 AM

how would I cycle? because I have no javascript experience

**descalzo** · 04-27-2010 11:13 AM

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** · 04-27-2010 03:54 PM

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/e...otheurlbox.php)

HTML Code:

<!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** · 04-28-2010 03:42 AM

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** · 04-28-2010 11:09 AM

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** · 04-28-2010 11:45 AM

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');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>

Simple as that.

**descalzo** · 04-28-2010 11:49 AM

You need single quotes around 'visible'

**lemon-tree** · 04-28-2010 11:54 AM

Yes, that is true. I have changed it now

Thread: Javascript change style attribute of span

LinkBack

Thread Tools

Display

Javascript change style attribute of span

Re: Javascript change style attribute of span

Re: Javascript change style attribute of span

Re: Javascript change style attribute of span

Re: Javascript change style attribute of span

Re: Javascript change style attribute of span

Re: Javascript change style attribute of span

Re: Javascript change style attribute of span

Re: Javascript change style attribute of span

Re: Javascript change style attribute of span

Similar Threads

javascript text class change for heading

Can't Change Style

help with float:left; attribute

Javascript to change iframe url

Is it possible to change the Corporate Banner style?

Posting Permissions