Show/Hide button code

this button isn't working properly

Page 1 of 1

7 Replies - 6245 Views - Last Post: 21 September 2008 - 07:34 AM

#1 WhiteFang  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 105
  • Joined: 20-April 08

Show/Hide button code

Post icon  Posted 17 September 2008 - 01:55 PM

I tried putting this button on to my forum but its not working too well, can anyone spot whats wrong with it, its supposed to show a spoiler when the button is clicked, and when clicked again it hides it, Thanks

<div style="margin:20px; margin-top:5px">
<div class="smallfont" style="margin-bottom:2px"><b>Spoiler</b>:

 <input type="button" value="Show" style="width:45px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';		this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }">
</div>
 


Is This A Good Question/Topic? 0
  • +

Replies To: Show/Hide button code

#2 mocker  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 50
  • View blog
  • Posts: 466
  • Joined: 14-October 07

Re: Show/Hide button code

Posted 17 September 2008 - 02:25 PM

To hide /display divs, use the value 'none' and 'block' . It looks like you are just setting display to ''

I'd really very strongly recommend taking all that out of the onclick tag and putting it in its own function.

<script>
function toggleSpoiler(objButton){
  if(this.blah.blah.style.display == 'none'){
	   this.blah.blah.style.display == 'block'
   }
   else {
	  this.blah.blah.style.display == 'none';
	}
}
</script>

<input type=button onclick="toggleSpoiler(this);">



Also, instead of doing this.parentNode.parentNode why not use document.
Was This Post Helpful? 0
  • +
  • -

#3 WhiteFang  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 105
  • Joined: 20-April 08

Re: Show/Hide button code

Posted 17 September 2008 - 02:53 PM

That would be beyond my capabilities I'm afraid. I tried your solution but it seems like you missed one '' out, there are four which don't have any values in them. Also, I found this code in the page source of this page if that would help - http://forums.naruto...46#post18764446
Was This Post Helpful? 0
  • +
  • -

#4 mocker  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 50
  • View blog
  • Posts: 466
  • Joined: 14-October 07

Re: Show/Hide button code

Posted 17 September 2008 - 03:26 PM

You are going to need a lot more context as to where you are putting this code in. Their code is ugly but works because it knows that wherever those buttons are placed, 2 nodes up, 2nd div in, first div in from there, is the spoiler div. Unless you have the exact same layout, it will not work for you.

The code I posted was an example as to how to make the javascript. I didn't fill in every detail for you since unless what you posted is the full page you are putting up, it will need to change.
Was This Post Helpful? 0
  • +
  • -

#5 WhiteFang  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 105
  • Joined: 20-April 08

Re: Show/Hide button code

Posted 17 September 2008 - 04:04 PM

Well they have a vb forum the same as us but your right, layouts may differ quite a bit. I'm not sure what other info I can supply apart from stating the obvious, I dont suppose showing you the site would help but here it is anyway - SITE
Was This Post Helpful? 0
  • +
  • -

#6 mocker  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 50
  • View blog
  • Posts: 466
  • Joined: 14-October 07

Re: Show/Hide button code

Posted 17 September 2008 - 04:18 PM

I'm not familiar with VB. How is the button you want getting inserted into the forum post? If it is getting put inside someone post you need to look at the html layout the forum uses. It looks like this:

<td class="alt1" id="td_post_1369" style="border-right: 1px solid #000000">
	
			<!-- icon and title -->
			<div class="smallfont">
				<img class="inlineimg" src="images/icons/icon1.gif" alt="Default" border="0" />				
			</div>
			<hr size="1" style="color:#000000; background-color:#000000" />
			<!-- / icon and title -->
		<!-- message -->
		<div id="post_message_1369">
		THIS IS THE ACTUAL MESSAGE
		</div>
		<!-- / message -->	
		<!-- sig -->
			<div>
				THIS IS SOMEONES SIG
			</div>
		<!-- / sig -->	
	</td>



the part of that with the actual message
		<div id="post_message_1369">
		THIS IS THE ACTUAL MESSAGE
		</div>



Now if your function or whatever inserts html directly into here, then you can manipulate the spoiler knowing this
		<div id="post_message_1369">
			   <input type=button value="Show Spoiler"		
			   onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display == 'none'){ this.parentNode.getElementsByTagName('div')[0].style.display == 'block'; this.value='Hide Spoiler'; }
else { this.parentNode.getElementsByTagName('div')[0].style.display == 'none'; this.value='Show Spoiler'; }">
		 <div style='display: none;'>SPOILER HERE</div>
		</div>


This post has been edited by mocker: 17 September 2008 - 04:19 PM

Was This Post Helpful? 1

#7 WhiteFang  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 105
  • Joined: 20-April 08

Re: Show/Hide button code

Posted 17 September 2008 - 04:49 PM

There is a function in the Admin CP which allows you to add custom BB Codes so I shouldn't have to go into the page HTML. The BB buttons which are already integrated into the posting function can be edited in the forum HTML I think, but you can't edit the custom ones you add from the same place - I think this means the code is being put into the posts themselves?
Was This Post Helpful? 0
  • +
  • -

#8 WhiteFang  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 105
  • Joined: 20-April 08

Re: Show/Hide button code

Posted 21 September 2008 - 07:34 AM

anybody have any ideas please? If you need more info, tell me what you need.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1