JavaScript - Problem With Function To Hide Div Content

I have the CoffeeCup Website Font software that gives me a peek at the sIFR Javascript functions, but I can't figure out how to sIFR only the visible Div on my page.

This script (from CoffeeCup) is in my page header:

Quote:
<script type="text/javascript">
//<![CDATA[
var h1_font = {
src: 'websitefontdata/fonts/___1942_report[regular].swf'
};
var h2_font = {
src: 'websitefontdata/fonts/___gatecrasher[regular].swf'
};
var h3_font = {
src: 'websitefontdata/fonts/___High_Strung[regular].swf'
};
var h4_font = {
src: 'websitefontdata/fonts/___Palatino_Linotype[regular].swf'
};
var h5_font = {
src: 'websitefontdata/fonts/___Palatino_Linotype[regular].swf'
};
var h6_font = {
src: 'websitefontdata/fonts/___Beffle[regular].swf'
};
sIFR.useStyleCheck = false;
sIFR.fixHover = true;
sIFR.fitExactly = true;
sIFR.repaintOnResize = true;
sIFR.preserveSingleWhitespace = false;
sIFR.fromLocal = true;
sIFR.activate(h1_font, h2_font, h3_font, h4_font, h5_font, h6_font);
sIFR.replace(h1_font, {selector: 'h1',
css: [
'.sIFR-root { line-height: 1em; font-size: 23px; color: #004080; background-color: #FFFFFF; text-align: left; font-weight: normal; font-style: normal; text-decoration: none; visibility: hidden; }',
'a { text-decoration: none; }',
'a:link { color: #004080; }',
'a:hover { color: #FF0000; }'
],
filters: {
DropShadow: { quality: 3, angle: 45, knockout: false, distance: 2.000000, color: '#000000', strength: 1.000000 }
},
wmode: 'transparent'
});
sIFR.replace(h2_font, {selector: 'h2',
css: [
'.sIFR-root { line-height: 1em; font-size: 18px; color: #006C61; background-color: #FFFFFF; text-align: left; font-weight: normal; font-style: normal; text-decoration: none; visibility: hidden; }',
'a { text-decoration: none; }',
'a:link { color: #0000FF; }',
'a:hover { color: #FF0000; }'
],
filters: {
DropShadow: { quality: 3, angle: 45, knockout: false, distance: 4.000000, color: '#000000', strength: 1.000000 },
Glow: { quality: 2, strength: 2, blurX: 6.000000, blurY: 6.000000, knockout: 0, inner: 0, alpha: 0.250000, color: '#FFFF00' }
},
wmode: 'transparent'
});
sIFR.replace(h3_font, {selector: 'h3',
css: [
'.sIFR-root { line-height: 1em; font-size: 23px; color: #000000; background-color: #FFFFFF; text-align: left; font-weight: normal; font-style: normal; text-decoration: none; visibility: hidden; }',
'a { text-decoration: none; }',
'a:link { color: #0000FF; }',
'a:hover { color: #FF0000; }'
],
filters: {
},
wmode: 'transparent'
});
sIFR.replace(h4_font, {selector: 'h4',
css: [
'.sIFR-root { line-height: 1em; font-size: 14px; color: #000000; background-color: #FFFFFF; text-align: left; font-weight: normal; font-style: normal; text-decoration: none; visibility: hidden; }',
'a { text-decoration: none; }',
'a:link { color: #000000; }',
'a:hover { color: #FF0000; }'
],
filters: {
},
wmode: 'transparent'
});
sIFR.replace(h5_font, {selector: 'h5',
css: [
'.sIFR-root { line-height: 1em; font-size: 14px; color: #000080; background-color: #FFFF80; text-align: left; font-weight: normal; font-style: normal; text-decoration: none; visibility: hidden; }',
'a { text-decoration: none; }',
'a:link { color: #0000FF; }',
'a:hover { color: #FF0000; }'
],
filters: {
},
wmode: 'transparent'
});
sIFR.replace(h6_font, {selector: 'h6',
css: [
'.sIFR-root { line-height: 1em; font-size: 20px; color: #004080; background-color: #FFFFFF; text-align: left; font-weight: normal; font-style: normal; text-decoration: none; visibility: hidden; }',
'a { text-decoration: none; }',
'a:link { color: #0000FF; }',
'a:hover { color: #FF0000; }'
],
filters: {
DropShadow: { quality: 3, angle: 45, knockout: false, distance: 2.000000, color: '#000000', strength: 1.000000 }
},
wmode: 'transparent'
});
//]]>
</script>

Here's what I'm working with to show a specific Div:

Quote:
function showSec(n) {
hideSec();
if (ng5) document.getElementById('sec1').style.visibility = "visible";
else if (ns4) document.layers["sec1"].visibility = "show";
else if (ie4) document.all["sec1"].style.visibility = "visible";
if (ng5) document.getElementById('sec'+n).style.visibility = "visible";
else if (ns4) document.layers["sec"+n].visibility = "show";
else if (ie4) document.all["sec"+n].style.visibility = "visible";
}
How do I have sIFR only draw the visible Divs?

Hi,

I have a problem with my script, I have a php request and the result is shown in a div, so there is several divs and their id is the "id" in the database, and I want that if we click on a link, it hides every divs...


Here is how I tried to do that:

Code:

<script type="text/javascript">
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
targetElement.innerHTML = "" ;
}
</script>

Code:

$hide = "";
while($ligne=mysql_fetch_array($ress)){


$hide.= "visibilite('$ligne[id]'); ";


$return.= "<tr><td>$ligne[heure] - $ligne[fin]</td><td>$ligne[sport]</td><td>$ligne[salle]</td><td>$ligne[ville]</td><td>$dispo/$ligne[place]</td><td><div id=$ligne[id]>";

$return.= "<a href=# onClick=\"maFonctionAjax($ligne[id],$tennis); $hide return false\">Reserver</a>";

$return.= "</div></td></tr>";
}

Every div'id is the id in the database, with the onClick we call an ajax function and $hide which is the call for the function visibilite for each div

It works for some request, I don't know how is it possible because I can have the same number of results and sometimes it works, and sometimes not...

Does somebody can help me?

Thanks a lot!

Jeff

Hi
I need help getting my show/hide function to work in all browsers.
The function below works everywhere but Firefox.

Can someone see why it's not working?

My javascript function:

Code:

<script language="javascript" type="text/javascript">
  
function hideShow(el_id){
	var el=document.getElementById(el_id);
	if(el_id.style.display!="none"){
		el_id.style.display="none";
	}else{
		el_id.style.display="";
	}
}

</script>

My php code (sensured):

PHP Code:
$sql="*****";
$result= mssql_query($sql);

echo "<table>";
echo "<tr><th>Header1</th><th>Header2</th><th>Header3</th><th>Header4</th></tr>";

$row=0;
$row2=1;

while($row = mssql_fetch_array($result)) {
    
    $id=$row["id"];
    
    $row++;
    $row2++;
    
    echo "<tr>";
        echo "<td>". $row['field1'] ."</td>";
        echo "<td>". $row['field2'] ."</td>";
        echo "<td><a onclick='hideShow(row$row);'> hide/show details</a></td>";
    echo "</tr>";
    echo "<tr id='row$row' style='display:none;'>";
        echo "<td><b>Input1: </b>". $row['field3']."</td>";
        echo "<td><b>Input2: </b>". $row['field4'] ."</td>";
        echo "<td><b>Input3: </b>". $row['field5'] ."</td>";
        echo "<td><a onclick='hideShow(row$row2)'>Delete this info</a></td>";
    echo "</tr>";
    echo "<tr id='row$row2' style='display:none;'>";
        echo "<td>Are you sure you want to delete?</td>";
        echo "<td><a onClick=menuRequest('$id')>Yes</a></td>";
        echo "<td><a onClick=menuRequest('home')>No</a></td>";
    echo "</tr>";
    
    $row++;
    $row2++;
} 

Hi all - first post - I'm not too hot on javascript so I don't know if this can be done nor how to search for it in the forum because I don't know what keywords to use - but if I give an idea of what I want to do, perhaps someone can suggest an idea of how to proceed?

I have two left floated divs - in the left div I want a series of drop downs (possibly check boxes as well) about a series of products. When the user makes their decision and presses submit, I want the form to submit to a javascript function that says "Right, you will need, from your responses, product C" and in the right hand floated div, a series of hidden product info divs whose visibility is changed depending on which product the function determines is the one for you.

Broken down into parts I think I need to do the following:

a) Standard HTML form with drop downs etc and submit
b) Hidden divs
c) Submission process locally to javascript function to determine which product to show/hide
d) Javascript function that makes the decision
e) Javascript that hides/shows products

Unfortunately a server side option is not available; it has to be a client side solution and I only could think of javascript. I can probably handle all bar c) and d) - any pointers, help or suggestions would be great thanks!

cheers
frank

Hi to All,

I have a table that contains many rows,
some in italian with code <td nome='riga_i'>
and some in english with code <td name='row_e'>.
I have created two buttons with different background flags: italy and uk,
so when one pushes the button with flag uk, the html page will be reloaded with only english rows,
and when one pushes the button with flag it, the same page is reloaded containing only italian rows.
All the code posted here works well, but I think that the code can be better because to reach this result I had to dupplicate the same function and I don' t like this.

Here the code:

<html>
<head>
<script type="text/javascript">
function toggle(name) {
tr=document.getElementsByTagName('tr')
for (i=0;i<tr.length;i++){
if (tr[i].getAttribute(name)){
if (tr[i].style.display=='none'){tr[i].style.display = '';}
else {tr[i].style.display = 'none';}
}
}
}
//
function toggle(nome) {
tr=document.getElementsByTagName('tr')
for (i=0;i<tr.length;i++){
if (tr[i].getAttribute(nome)){
if (tr[i].style.display=='none'){tr[i].style.display = '';}
else {tr[i].style.display = 'none';}
}
}
}
</script>
</head>

<body onload="toggle('name');">
<table>
<tr nome="riga_i">
<td>REQUISITI RELATVI AL SERVIZIO</td>
<td> </td>
<td><input type="button" onclick="toggle('nome');toggle('name');" style="background-image: url(../images/flag_uk.jpg); background-color:Transparent;" /></td></tr>
<tr name="row_e">
<td> </td>
<td>REQUIREMENTS RELATED TO THE SERVICE</td>
<td><input type="button" onclick="toggle('name');toggle('nome');" style="background-image: url(../images/flag_italy.jpg); background-color:Transparent;" /></td></tr>
....
.... and so on....
.....
</table></html>


To better the code I have tried in this way but without success ...

<html>
<head>
<script type="text/javascript">
function toggle(this) {
if (this=='nome' || this=='name'){ tr=document.getElementsByTagName('tr')
for (i=0;i<tr.length;i++){
if (tr[i].getAttribute(this)){ if (tr[i].style.display=='none'){tr[i].style.display = '';}
else {tr[i].style.display = 'none';}
}
}
}
}
</script>
</head>


Thanks in advance !!!

Hi Guys, Before I get started explaining my problem I would like to make it clear that this is a university web scripting assignment so I will not be asking for answers just advice as im stuck.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 <html lang="en">
 <head> 
 <style>
     body{font-family: Arial,sans-serif; background-color: #86bfc9;}
     #content{float:right; width: 75%;}
 </style>
 <script type = "text/javascript">
   function showit(what,where)
   {
        var node = document.getElementById(where);
        while( node.firstChild )
            node.removeChild( node.firstChild );
        node.appendChild( document.createTextNode(what) );
   }
   function hello()
   {
     alert("I'm a Computer Solutions Degree student,\n get me out of here");
   }
   function timestable()
   {
     	str="you code times table here";
	showit(str,"Results");	
   }
   function formattedtimestable()
   {
	str="you code formatted times table here";	
	showit(str,"Results");
   }
   function alerttimestable()
   {
	str="you code alert times table here";	
	// you code here
	alert(str);
   }
   </script>
 </head>
 <body>
   <h1>JavaScript Exercises </h1>
   <div id="content"> <div id = "Results"></div> </div> 
   <a href="#" OnClick = "hello()">Hello Alert</a> <br/><br/>
   <a href="#" OnClick = "timestable()">Times Tables</a> <br/><br/>
   <a href="#" OnClick = "alerttimestable()">Times table in an alert box</a>
   <br/><br/>
   <a href="#" OnClick = "formattedtimestable()">Times Tables in a Table</a>
   <br/><br/>
  </body>
</html>

I have been given this skeleton code and need to created the relevant times tables so a times table in a alert box, a times table in a table and a standard times table. Now the problem isn't creating the table as that's easy the problem is with the showit function. When I use the function it only prints the string once and nothing else so for example if I did

for(x = 0; x< 9; x++)
{
showit(x, "Result");
}

it will only show 8 not 1-2-3-4-5-6-7-8.

or if i did

showit("Danny", "Result");
showit("Joe", "Result");

it will only output Joe not Danny.

The content needs to go in the content div and I cant make it output more than one thing which of course is a problem as I need to output the times tables.

Sorry for the poor explanation.

Hope someone can shed some light on this
Many Thanks
Danny

I'm creating a website where I would like to create some kind of tabbed pages.
To do that I wrote a javascript where I create an array of all the divs I use to create the pages and then sets them all on style="display: none;" except the one I clicked which should get style="display: block;"
But I can't seem to get it to work...

This is the script itself:
Code:

var state = 'none';
var i;
var divs = new Array();
divs[0] = document.getElementById(div1);
divs[1] = document.getElementById(div2);
divs[2] = document.getElementById(div3);
divs[3] = document.getElementById(div4);
divs[4] = document.getElementById(div5);


function showhide(layer_ref) {
	
	divs[0].innerHTML="some contents";
	for (i=0;i<divs.length;i++)
	{	
		if(divs[i] == document.getElementById(layer_ref))
		{
			state = 'block';
			
		}
		else
		{
			state = 'none';
		}
		if (document.all) { //IS IE 4 or 5 (or 6 beta)
			eval( "document.all." + divs[i] + ".style.display = state");
		}
		if (document.layers) { //IS NETSCAPE 4 or below
			document.layers[divs[i]].display = state;
		}
		if (document.getElementById &&!document.all) {
			hza = document.getElementById(divs[i]);
			hza.style.display = state;
		}
	}
}

And this is part of the html of the page:
Code:

<head>
	<script type="text/javascript" src="scriptShowHide.js"></script>
</head>

 <div id="navigation">
	<ul class="tabContainer2">
		<li><a  class="orange" href="#" onclick="showhide('div1');">Tab1</a></li>
		<li><a  class="orange" href="#" onclick="showhide('div2');">Tab2</a></li>
        	<li><a  class="orange" href="#" onclick="showhide('div3');">Tab3</a></li>
        	<li><a  class="orange" href="#" onclick="showhide('div4');">Tab4</a></li>
        	<li><a  class="orange" href="#" onclick="showhide('div5');">Tab5</a></li>
        </ul>
 </div>

<div id="div1" style="display: block;">This is the content of tab1</div> 
<div id="div2" style="display: none;">This is the content of tab2</div>
<div id="div3" style="display: none;">This is the content of tab3</div> 
<div id="div4" style="display: none;">This is the content of tab4</div> 
<div id="div5" style="display: none;">This is the content of tab5</div>

Can anyone help me plz, I've been staring at this for hours...

Hi all,

I'm using a classic toggleLayer function to display content in a div adjacent to one full of links.

The code is
Code:

function toggleLayer( work )
{
  var elem, vis;
  if( document.getElementById ) // this is the way the standards work
    elem = document.getElementById( work );
  else if( document.all ) // this is the way old msie versions work
      elem = document.all[work];
  else if( document.layers ) // this is the way nn4 works
    elem = document.layers[work];
  vis = elem.style;
  // if the style.display value is blank we try to figure it out here
  if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
    vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
  vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}

and the links take on the format of:
Code:

<a href="javascript:toggleLayer('work');...........

My problem is, I want the 'work' div to remain blank, which it does, until I click one of the links. But after that initial click, I don't want the script to act as a toggle, just a show/change content.

Any ideas? Sorry if i'm phrasing all this very badly, i'm pretty new to it all. I have an idea that AJAX could be the solution but I can barely get my head around a little bit of copied and pasted JS

Thanks for any help,

Pat

http://www.suttonsilver.co.uk/client...on-calculator/

Please visit the above website,

Click on a Injury Type (try Minor Head Injury) on the right hand side (the human figure)

Then click on the Calculate button and you will see a "calculated" figure appear, if you then click on another injury type then calculate it again, another Div will show.

If two "You could be entitled up..." DIVs pop up, the previous, initially calculated 'result' should be removed and replaced by the new 'result'.

Can anyone help me do this? Also.. as a side note, does anyone have a solution for when clicking calculate, two divs show up... (i.e. a 'result' and a 'contact us form').

Cheers

Chris SS

I make a menu and in one of it's item I want to show a sub menu under it when the user mouse is over it, I use onmouseover and onmouseout for this and I make the visibility of the sub menu hidden and when the mouse become over the item it's visibility become visible.
the problem I faced is that when the mouse become out of the item of the main menu the sub menu disappear and I couldn't click on or over it.

this is my menus:

Code:

<div id="menu" >
<ul id="ul1" >
<li id="li1" ><a href="index.php"> Home </a></li>
<li><a href="" > About </a></li>
<li><a href="" onmouseover="onlist()" onmouseout="outlist()"> Services </a></li>
<li><a href="" >Contact </a></li>
</ul>
</div>
<ul id="ul2" onmouseover="onlist()" onmouseout="outlist()">
<li> serv1 </li>
<li > serv2 </li>
</ul>

the JS code:

Code:

function onlist()
{
document.getElementById('ul2').style.visibility='visible';
}

function outlist()
{
document.getElementById('ul2').style.visibility='hidden';
}

Hi Guys,

I have a PHP loop region, which repeats all completed projects for each customer, then displays all jobsheets linked to those projects.
I have a javascript show/hide function, which will only show the jobsheets when the project link is clicked.
Without this javascript, the PHP loop works perfectly, but all the information is displayed. How can I use the show/hide function and still show all the jobsheets for completed projects?
Code:

function toggle2(id, link) {
  var e = document.getElementById(id);
 
  if (e.style.display == '') {
    e.style.display = 'none';
    link.innerHTML = '<img src="../Images/plus.gif" border="0" >';
  } else {
    e.style.display = '';
    link.innerHTML = '<img src="../Images/minus.gif" border="0" >';
  }
}

PHP Code:
<table>
<tr>
<th>Project / Job</th>
<th>Language</th>
<th>Words (Net)</th>
<th>Shipped</th>
</tr>

<?php
$previousProject = '';
if ($totalRows_rsComplete_Cust > 0) {
// Show if recordset not empty
while ($row_rsComplete_Cust = mysql_fetch_assoc($rsComplete_Cust)) {
if ($previousProject != $row_rsComplete_Cust['projid']) {
// for every user, show the user name
?>

<tr>
<td colspan="4"><a href="#" onclick="toggle2('<?php echo $row_rsComplete_Cust['projid']; ?>', this)"><img src="../Images/plus.gif" border="0" /></a><?php echo $row_rsComplete_Cust['projid']; ?></td>
</tr>

<?php $previousProject = $row_rsComplete_Cust['projid']; } ?>

<tr id="<?php echo $row_rsComplete_Cust['projid']; ?>" style="display:none">
<td><a href="jobsheet_details.php?id=<?php echo $row_rsComplete_Cust['jobid']; ?>&amp;proj=<?php echo $row_rsComplete_Cust['projid']; ?>"><?php echo $row_rsComplete_Cust['jobname']; ?></a></td>
<td>LANGUAGE</td>
<td>WORD NET</td>
<td>YES / NO</td>
</tr>  

<?php }} // Show if recordset not empty ?>

</table>

<p>
<script type="text/javascript">// <![CDATA[
var metrics = {
"mm" : 1,
"cm" : 10,
"m" : 1000,
"inch" : 25.4,
"foot" : 304.8
};
function convert(num, dec){
var val = document.getElementById("fromVal").value;
if(isNaN(val)){
return
}


function roundNumber(num, dec) {
var result = Math.round( Math.round( num * Math.pow( 10, dec + 1 ) ) / Math.pow( 10, 1 ) ) / Math.pow(10,dec);
return result;
}

document.getElementById("toVal").value = val *
metrics[document.getElementById("fromSystem").value]/
metrics[document.getElementById("toSystem").value];
}
var interval = null;
function watchChanges(){
interval == null ? setInterval("convert()", 500) :
clearInterval(interval);
}
// ]]></script>
</p>
<table>
<tbody>
<tr>
<td><input id="fromVal" style="width: 100px;" onfocus="watchChanges()" onblur="watchChanges()" type="text" /><select id="fromSystem" onchange="convert()"> <option value="mm">millimeters</option> <option selected="selected" value="cm">centimeters</option> <option value="m">meters</option> <option value="foot">feet</option> <option value="inch">inches</option> </select></td>
</tr>
<tr>
<td colspan="1" align="center">=</td>
</tr>
<tr>
<td><input id="toVal" style="width: 100px;" type="text" disabled="disabled" /><select id="toSystem" onchange="convert()"> <option value="mm">millimeters</option> <option value="cm">centimeters</option> <option value="m">meters</option> <option selected="selected" value="foot">feet</option> <option value="inch">inches</option> </select></td>

i'm still a relative noob and this has me stuck -
i have a save button with a "save as copy" in the save dropdown list. add new item directs to a premade/formatted project that is used as a template, so on that item i only want/need the "save as copy" but on all other items that use the form i need to only have the "save" function. is there any way to either change the function of the button depending on item that is being viewed in the edit screen OR hide the "save" button and only show the button associated with "save as copy - and vis versa for the rest of the items?? current button code is -

protected function getToolbar()
{
$options = array();
$user = JFactory::getUser();

$create_ms = $user->authorise('core.create', 'com_pfmilestones');
$create_task = $user->authorise('core.create', 'com_pftasks');


$options[] = array(
'text' => 'JSAVE',
'task' => $this->getName() . '.save');

$options[] = array(
'text' => 'Save as new project',
'task' => $this->getName() . '.save2copy',
'options' => array('access' => ($this->item->id > 0)));


PFToolbar::dropdownButton($options, array('icon' => 'icon-white icon-ok'));

item used as template is id=8

any help or suggestions would be greatly appreciated..

hi all im trying to hide a div on page load,

ive used this.

Code:

<script type="text/javascript">
function hideDiv(){
document.getElementById('sidebar').style.display = "none";
}
hideDiv()
</script>

and this in the body tag

Code:

<body onload="javascript:hideDiv()">

it works fine hiding the div named sidebar, problem comes when i try to then use an Onclick event to show the hidden div, it just wont show.

can this be done?

please help if you can this work has to be in soon