Jump to content

Hide/Show div functions to hide upon opening page


dc_jt

Recommended Posts

Hi

 

I have the following code which shows a div when you rollover the name. It all works, however when I first open the page, the div is shown, I need this hidden until someone rolls over a name.

 

Any idea how I can set it to be hidden straight away?

 

<?php
require_once($_SERVER['DOCUMENT_ROOT'].'/config.inc.php'); 
require_once(LOCAL_CLASSES.'/Tables/RCLTblClients.class.php');
require_once(LOCAL_CLASSES.'/Tables/RCLTblClientsProjects.class.php');

$oTblClients = new RCLTblClients();
$oTblClientProjects = new RCLTblClientProjects();

$rClients = $oTblClients->GetClientsFront();

?> 
<script language=javascript type='text/javascript'> 

function hideDiv(pass) { 
var divs = document.getElementsByTagName('div'); 
for(i=0;i<divs.length;i++){ 
if(divs[i].id.match(pass)){//if they are 'see' divs 
if (document.getElementById) // DOM3 = IE5, NS6 
divs[i].style.display="none";// show/hide 
else 
if (document.layers) // Netscape 4 
document.layers[divs[i]].display = 'none'; 
else // IE 4 
document.all.hideShow.divs[i].display= 'none'; 
} 
} 
} 

function showDiv(pass) { 
var divs = document.getElementsByTagName('div'); 
for(i=0;i<divs.length;i++){ 
if(divs[i].id.match(pass)){ 
if (document.getElementById) 
divs[i].style.display=""; 
else 
if (document.layers) // Netscape 4 
document.layers[divs[i]].display = ''; 
else // IE 4 
document.all.hideShow.divs[i].display = ''; 
} 
} 
} 
</script> 
<? include($_SERVER['DOCUMENT_ROOT']."/includes/header.inc.php") ?><h1><img src="images/headers/clients.gif" alt="Clients" width="121" height="30" /></h1>
		<div id="contentareablank">
		<div id="newsintrowrapper">
		  <div class="clear"></div>


	 		<!--<div id="clientsleft">-->

<?php 
while ($oClient = mysql_fetch_object($rClients))

{?>			
<?php	$counter++;
	if ($counter%2==0)
	$divid="clientsright";
	else $divid="clientsleft";?>

		<div id="<?=$divid?>">

			<div class="client">
		<?php if($oClient->client_url){?>
		<a href="http://<?=$oClient->client_url?>" target="blank">
		<?php }?>
		<?php if($oClient->client_url){?>
		</a>
		<?php }?>

            <p><strong>
            <?php if($oClient->client_url){?>
            <a href="http://<?=$oClient->client_url?>" target="blank">
            <?php }?>
            <a href="#" onmouseover="javascript:showDiv('projects_<?=$oClient->client_id?>')"
		onmouseout="javascript:hideDiv('projects_<?=$oClient->client_id?>', 'projects_')">
            <?=$oClient->name?>
            </a>
            <?php if($oClient->client_url){?>
            </a>
            <?php }?>
            </strong>
		<?=$oClient->content?></p>

		<?php $rProjects = $oTblClientProjects->GetProjectsForClient($oClient->client_id);?>
		<?php while ($oProjects = mysql_fetch_object($rProjects))
		{?>

		<div class="clientsjobs" id="projects_<?=$oClient->client_id?>">
		<ul>
		<li><?=$oProjects->ProjectName?></li>
		<!--
		<li>Client job one</li>
		<li>Client job one</li>
		<li>Client job one</li>
		<li>Client job one</li>
		-->
		</ul>
		</div>
		<?php }?>

        </div>
	 <div class="clear"></div>


	 </div>
	 <?php }?>
	 <div class="clear"></div>





	 </div>




	  
	  






		<div id="newsletter">
		  <fieldset>
<label for="search">To recieve our email newsletter please enter your email address //</label>

<input name="Keywords" id="search" value="Enter your email here" type="text"  onfocus="if (this.value = 'Enter your email here') this.value = '';" /><input name="btnSearch" id="btnSearch" value="Go" class="formbutton" type="submit" /></fieldset></form></div>

</div>
</div>
</div>
<? include($_SERVER['DOCUMENT_ROOT']."/includes/footer.inc.php") ?>

 

Thanks

 

 

First of all, the id is unique. In your code, if I see it right, you can have multiple clientsright and clientsleft ids.

For the divs to be hidden even when the page loads, use css:

 

div.hidden{
    display:none;
}
[...]
<div class="hidden">You can't see me</div>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.