Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,471
There are 878 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     Programming     Javascript :

Need javascript problem fixed =P

Thread title: Need javascript problem fixed =P
Closed Thread    
    Thread tools Search this thread Display Modes  
11-26-2007, 11:56 PM
#1
querk is offline querk
Status: Junior Member
Join date: Nov 2007
Location:
Expertise:
Software:
 
Posts: 39
iTrader: 1 / 100%
 

querk is on a distinguished road

  Old  Need javascript problem fixed =P

Ok so I am new here as a registered user but I have been here several times before (over a year ago I probably have an old username).

I need help with my site, here is the problem and code.

Ok so I need a better working way to do this

Code:
  <a id="poTer" onclick="switchMenu('poTerms');switchMenu('poTerH'); switchMenuBack('poContent');switchMenuBack('poTer');this.innerHTML='Hide Terms';" /> Show Terms </a>  <a id="poTab" onclick="switchMenu('poContent');switchMenu('poTabH');switchMenuBack('poTerms');switchMenuBack('poTab');this.innerHTML='Hide Options';" /> Show Options </a>
  <a style="display:none;" id="poTerH" onclick="switchMenu('poTerms');switchMenu('poTer'); switchMenuBack('poContent');switchMenuBack('poTerH');this.innerHTML='Show Terms';" /> Hide Terms </a>  <a style="display:none;" id="poTabH" onclick="switchMenu('poContent');switchMenu('poTab');switchMenuBack('poTerms');switchMenuBack('poTabH');this.innerHTML='Show Options';" /> Hide Options </a>
Thats in the HTML file and this is in a js file

Code:
<!--
function switchMenu(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != "none" ) 
    {
        el.style.display = 'none';
    }
    else 
    {
        el.style.display = '';
    }
}
function switchMenuBack(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != "" ) 
    {
        el.style.display = 'none';
        el.class
    }
    else 
    {
        el.style.display = 'none';
    }
}
//-->
I need the bottons to when they are clicked change the text to hide or show depending on weather or not the box is showing. When show options is clicked the options show and when youthen click Show Terms options is hidden and Terms is shown vise versa.

Here is a live demo of how it is workign witht he current code.
http://privily.us/

Please?

11-27-2007, 12:30 AM
#2
CreativeLogic is offline CreativeLogic
CreativeLogic's Avatar
Status: Request a custom title
Join date: Feb 2005
Location:
Expertise:
Software:
 
Posts: 1,078
iTrader: 6 / 100%
 

CreativeLogic is on a distinguished road

Send a message via MSN to CreativeLogic

  Old

This is untested. I think this is what you're after. It could be done much easier if the html was coded differently but this should work fine.

Code:
<!--
function swap (element)
{
	var el = document.getElementById(element.id);
	var split = el.innerHTML.split (' ');
	if (split[0] == 'Hide')
	{
		// ##### SHOW CONTAINER ####
		document.getElementById(element.id + '_conainer').style.display = 'none';

		// ##### CHANGE TEXT #####
		el.innerHTML = 'Show ' + split[1];
	}
	else
	{
		// ##### HIDE CONTAINER ####
		document.getElementById(element.id + '_conainer').style.display = 'none';

		// ##### CHANGE TEXT #####
		el.innerHTML = 'Hide ' + split[1];
	}
}

function hide (id)
{
	// ##### HIDE CONTAINER ####
	document.getElementById(id + '_conainer').style.display = 'none';

	// ##### CHANGE TEXT #####
	var el = document.getElementById(id);
	var split = el.innerHTML.split (' ');
	el.innerHTML = 'Show ' + split[1];
}
//-->
Your links should be like this:
Code:
<a id="terms" onclick="swap (this); hide ('options');" />Show Terms</a>
<a id="options" onclick="swap (this); hide ('terms');" />Show Options</a>
Your containers should be like this:
Code:
<div id="terms_container" style="display: none;"><!-- ANY TEMRS HTML HERE --></div>
<div id="options_container" style="display: none;"><!-- ANY OPTIONS HTML HERE --></div>

11-27-2007, 12:39 AM
#3
querk is offline querk
Status: Junior Member
Join date: Nov 2007
Location:
Expertise:
Software:
 
Posts: 39
iTrader: 1 / 100%
 

querk is on a distinguished road

  Old

Thanks for the help but I am still runnin into troubles
The site is updated for a live preview of what it is doing and here is my code.

HTML ALL
Code:
<?php 

if (basename(__FILE__) == basename($_SERVER['PHP_SELF']))
{
    exit(0);
}

echo '<?xml version="1.0" encoding="utf-8"?>';

$showTerms = false;

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Privily.us | Browse with the freedom you deserve!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="author" content="Southern Media" />
<meta name="Description" content="http://www.southernmedia.com.ar" />
<link rel="stylesheet" type="text/css" href="inc/styles/common.css" media="all" />
<script src="inc/js/showhide.js" type="text/javascript"></script>
</head>
<body bgcolor="#FFFFFF" onload="document.getElementById('address_box').focus()">
<div id="wrap">
  <div id="header">
    <div id="logo">
      <h1>Privily.us</h1>
      <div id="tagline"><strong>Browse with the freedom you deserve! </strong></div>
      <div id="menu"> <a href="<?php echo $GLOBALS['_script_base'] ?>">URL Form</a> • <a href="javascript:alert('cookie managment has not been implemented yet')">Manage Cookies</a> • <a href="#">Login</a> • <a href="#">Members</a> </div>
    </div>
    <div id="banner">
      <script type="text/javascript"><!--
google_ad_client = "pub-4808569320609367";
//234x60, created 11/26/07
google_ad_slot = "4360867620";
google_ad_width = 234;
google_ad_height = 60;
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
    </div>
  </div>
  <form method="post" action="<?php echo $_SERVER['PHP_SELF'] ?>">
    <div id="search-bar">
      <fieldset>
      <label>
      <input id="search-field" type="text" name="<?php echo $GLOBALS['_config']['url_var_name'] ?>" value="<?php echo isset($GLOBALS['_url']) ? $GLOBALS['_url'] : '' ?>" onfocus="this.select()" />
      </label>
      <label>
      <input id="search-submit" onclick="return submit_form();" type="image" src="../../img/submit.gif" />
      </label>
      </fieldset>
    </div>
    <!--*<div id="poTerms" class="lAlign" style="display:none;">-->
    <div id="terms_container" style="display: none;">
      <p id="terms"> By using the services provided by Privily.us you fully agree to our Terms Of Service. If you do not fully agree then please leave.<br>
        <br>
        User agrees that user shall not hold Privily.us and/or any affiliates liable of any claims, liabilities, losses, costs, damages, expenses, including attorney fees and court costs that arise from any judgments directly or indirectly created by the services of Privily.us and/or affiliates to the customer. <br>
        <br>
        Privily.us shall not be liable under any circumstances for any damages the users business may suffer for any reason, even if Privily.us has been advised of the possibility of such damages. If a problem occurs even if that is within Privily.us's control, as the internet is unpredictable, user is aware that network availability is not guaranteed. Privily.us and/or affiliates shall not be liable for any legal claims from you, the user. <br>
        <br>
        All services provided by Privily.us may only be used for lawful purposes and lawful to access lawful content. Unlawful uses may result in a temporary or permenant ban from Privily.us and/or its affiliates. User agrees to indemnify and hold harmless Privily.us and/or affiliates from any claims resulting from the use of the service that damages the user or any other party. User agrees to take full responsiblity. <br>
        <br>
        Privily.us reserves the right to make changes to our Terms of service at any time without any notification. Changes to our Terms of service take effect immediately upon being posted on our website. It is users responsibilty to update user on any changes, Privily.us is not obliged to notify use of any changes. <br>
        <br>
        Last Updated: November 26, 2005</p>
    </div>
    <!--<div id="poContent" style="display:none;">-->
    <div id="options_container" style="display: none;">
      <table id="options" align="left">
        <?php
      
      					foreach ($GLOBALS['_flags'] as $flag_name => $flag_value)
      					{
          					if (!$GLOBALS['_frozen_flags'][$flag_name])
          					{
              					echo '
									<tr><td id="options"><input type="checkbox" name="' . $GLOBALS['_config']['flags_var_name'] . '[' . $flag_name . ']"' . ($flag_value ? ' checked="checked"' : '') . ' /></td><td id="options">' . $GLOBALS['_labels'][$flag_name][1] . '</td></tr>' . "\n";
          					}
      					}
      				?>
      </table>
      <div style="float:right;"><p id="ex">We recomend that only advanced users change these settings.  The settings that are currently pre-set and checked by default are the recomended settings for anonymity.  However, we (Privily.us) do not under any circumstances guarantee that your privacy and protection is 100% using these settings or any other combination of settings with this proxy.</p></div>
    </div>
  </form>
  <a id="terms" onclick="switchMenu('terms_container');swap (this); hide ('options');" />Show Terms</a> <a id="options" onclick="swap (this); hide ('terms');" />Show Options</a>
  <div id="body" style="display:none;"> </div>
</div>
<div id="footer">
  <p>All Content Copyright © 2006, Privily.us<br />
  </p>
</div>
</body>
</html>
JS File
Code:
<!--
function switchMenu(obj) {
	var el = document.getElementById(obj);
	if ( el.style.display != "none" ) 
	{
		el.style.display = 'none';
	}
	else 
	{
		el.style.display = '';
	}
}
function switchMenuBack(obj) {
	var el = document.getElementById(obj);
	if ( el.style.display != "" ) 
	{
		el.style.display = 'none';
		el.class
	}
	else 
	{
		el.style.display = 'none';
	}
}
<!--
function swap (element)
{
	var el = document.getElementById(element.id);
	var split = el.innerHTML.split (' ');
	if (split[0] == 'Hide')
	{
		// ##### SHOW CONTAINER ####
		document.getElementById(element.id + '_conainer').style.display = 'none';

		// ##### CHANGE TEXT #####
		el.innerHTML = 'Show ' + split[1];
	}
	else
	{
		// ##### HIDE CONTAINER ####
		document.getElementById(element.id + '_conainer').style.display = 'none';

		// ##### CHANGE TEXT #####
		el.innerHTML = 'Hide ' + split[1];
	}
}

function hide (id)
{
	// ##### HIDE CONTAINER ####
	document.getElementById(id + '_conainer').style.display = 'none';

	// ##### CHANGE TEXT #####
	var el = document.getElementById(id);
	var split = el.innerHTML.split (' ');
	el.innerHTML = 'Show ' + split[1];
}
//-->
//-->

11-27-2007, 09:04 PM
#4
querk is offline querk
Status: Junior Member
Join date: Nov 2007
Location:
Expertise:
Software:
 
Posts: 39
iTrader: 1 / 100%
 

querk is on a distinguished road

  Old

I'd be very greatfull!

HTML does not have to stay the same. I am still experimenting.

11-28-2007, 12:17 AM
#5
CreativeLogic is offline CreativeLogic
CreativeLogic's Avatar
Status: Request a custom title
Join date: Feb 2005
Location:
Expertise:
Software:
 
Posts: 1,078
iTrader: 6 / 100%
 

CreativeLogic is on a distinguished road

Send a message via MSN to CreativeLogic

  Old

Remove the <!-- and //-->. They are not needed if they are included in a file, they are really only needed (if at all now) within HTML.

11-28-2007, 12:37 AM
#6
querk is offline querk
Status: Junior Member
Join date: Nov 2007
Location:
Expertise:
Software:
 
Posts: 39
iTrader: 1 / 100%
 

querk is on a distinguished road

  Old

That wont change anything though will it? They were left as back ups but only remain as comments?

I will try it and remove them anyways however

EDIT: No luck =/

11-28-2007, 12:44 AM
#7
CreativeLogic is offline CreativeLogic
CreativeLogic's Avatar
Status: Request a custom title
Join date: Feb 2005
Location:
Expertise:
Software:
 
Posts: 1,078
iTrader: 6 / 100%
 

CreativeLogic is on a distinguished road

Send a message via MSN to CreativeLogic

  Old

I had a typo in my javascript.

Find the 3 places it says:
'_conainer'
And change to:
'_container'

11-28-2007, 12:51 AM
#8
querk is offline querk
Status: Junior Member
Join date: Nov 2007
Location:
Expertise:
Software:
 
Posts: 39
iTrader: 1 / 100%
 

querk is on a distinguished road

  Old

After changing those it is still not opening the tabs, maybe another typo? I will look as well before I go to work.
COuld it be this

Code:
var el = document.getElementById(element.id);
and this
Code:
onclick="swap (this);
needing to be something liek this
Code:
onclick="swap (this.terms);

11-28-2007, 06:31 AM
#9
CreativeLogic is offline CreativeLogic
CreativeLogic's Avatar
Status: Request a custom title
Join date: Feb 2005
Location:
Expertise:
Software:
 
Posts: 1,078
iTrader: 6 / 100%
 

CreativeLogic is on a distinguished road

Send a message via MSN to CreativeLogic

  Old

I've edited the file as I'm not sure what the problem is without having the source files on my end. This is all you need in your javascript file. The previous functions you created are not needed.
Code:
function swap (id)
{
	var el = document.getElementById(id);
	var split = el.innerHTML.split (' ');
	if (split[0] == 'Hide')
	{
		// ##### SHOW CONTAINER ####
		document.getElementById(id + '_container').style.display = 'none';

		// ##### CHANGE TEXT #####
		el.innerHTML = 'Show ' + split[1];
	}
	else
	{
		// ##### HIDE CONTAINER ####
		document.getElementById(id + '_container').style.display = 'none';

		// ##### CHANGE TEXT #####
		el.innerHTML = 'Hide ' + split[1];
	}
}

function hide (id)
{
	// ##### HIDE CONTAINER ####
	document.getElementById(id + '_container').style.display = 'none';

	// ##### CHANGE TEXT #####
	var el = document.getElementById(id);
	var split = el.innerHTML.split (' ');
	el.innerHTML = 'Show ' + split[1];
}
You do not need your previous functions for the links. This is exactly what your links should look like. I've edited them to be slightly more 'standard'.
Code:
<a href="#" id="terms" onclick="swap (this.id); hide ('options'); return false;" />Show Terms</a>
<a href="#" id="options" onclick="swap (this.id); hide ('terms'); return false;" />Show Options</a>

11-28-2007, 07:40 PM
#10
querk is offline querk
Status: Junior Member
Join date: Nov 2007
Location:
Expertise:
Software:
 
Posts: 39
iTrader: 1 / 100%
 

querk is on a distinguished road

  Old

Ok I updated it with the current code and there is some life but it is acting weird.

I will send you the files?

Closed Thread    


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed