Solved

Expanding table columns with smooth slide effect

Posted on 2015-01-22
18
246 Views
Last Modified: 2015-01-30
Hi,
    I have a table with four column headings, however I want to be able to expand the individual columns when clicked, so hidden columns appear underneath with the data from the mysql table....

How could this be achieved?

Thanks

Damian
0
Comment
Question by:damianb123
  • 7
  • 7
  • 4
18 Comments
 
LVL 33

Expert Comment

by:Slick812
ID: 40564543
? ? ? , damianb123 , , I read your question, and understand a little about what you say, you can certainly give most any <th> or <td> of a <table> a touch-click event. And, <table> column widths can be changed with javascript. What I do NOT understand is your - "hidden columns appear underneath" , I have no Idea what structure or amount of columns you may have OR what is it that you want them to be "underneath". You can show and hide elements with javascript. But I can NOT make a one size fits all suggestion to reveal hidden stuff, to help you. Also you say - "with the data from the mysql table" ? ?, as MySQL is server side (PHP), then this may make this more difficult to do, unless you already have the "hidden columns" on the page with the "data from the mysql" already in them.

Can you give more information, or show the successful HTML you have for your working <table>, so we can see what needs to be used and done? ?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40564717
We are probably going to need a link to the page so we can see the context and experiment.

Cd&
0
 

Author Comment

by:damianb123
ID: 40564813
Hi,
    Sorry I should have provided more information.  this is my code from a page called results.php, it receives a parameter from a prior page, which is passed here via:

$searchdata = $_GET['field'];

This then performs a select statament against a database and ALL rows are output to an html table (as below).  The table contains approx. 30 columns from the database, which are gathered into 4 headers, each header contains 10 columns of data..... what i want to happen, is when one of the four columns are clicked, it expands full table width and shows all the columns, click again and it retracts.  I've attached a screenprint to show you the table.... and the code used is:



<?php



$db="database";

$link = mysql_connect("localhost","user","pass");

if (! $link)

die("Couldn't connect to MySQL");



mysql_select_db($db)

or die("Couldn't open $db: ".mysql_error());


$searchdata = $_GET['field'];

$data = $_GET['DoID'];    

$resultall = mysql_query("SELECT * FROM maindata WHERE gpname LIKE '%".$_GET['field']."%' OR postcode LIKE '%".$_GET['field']."%' OR area LIKE '%".$_GET['field']."%' OR Do LIKE '%".$_GET['DoID']."%'")or die("SELECT Error: ".mysql_error());

$num_rows = mysql_num_rows($resultall);



?>



<html>



<head>

<meta http-equiv="Content-Language" content="en-gb">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Search Results</title>

<style>
.whiteBackground { background-color: #9DC3E6; }
.grayBackground { background-color: #DBE8F6; }
</style>

</head>



<body>



<div align="center">

<br>

<font face="Arial" size="2" color="#CC0000"><a href="./">

<font color="#CC0000">Back to search option</font></a></font><br>



      &nbsp;<p><b><font face="Tahoma" size="6">Results</font></b></p>

      <p>&nbsp;</p>

      <div align="center">

      <br>

      <font face="arial" size="4" color="'FF0000"><strong><?php echo $num_rows; ?></strong> Results Returned</font><br><br>

<div align="center">

      <table border="0" width="1000" cellspacing="0" cellpadding="0">

            <tr>

                  <td width="23%" height="100" valign="top"><b><font face="Arial"><u>Practice Name</u></font></b></td>

                  <td width="5%" height="100" valign="bottom">

                  <p align="center"><font face="Arial" size="1">Tick to Compare</font></td>

                  <td width="18%" height="100" background="http://www.h.co.uk.co.uk/gpw-admin/images/filler1.png">

                  <b><font face="Arial">Booking &amp; </font></b>
                  <p><b><font face="Arial">Contact</font></b></td>

                  <td width="18%" height="100" background="http://www.h.co.uk.co.uk/gpw-admin/images/filler2.png">&nbsp;</td>

                  <td width="18%" height="100" background="http://www.h.co.uk.co.uk/gpw-admin/images/filler3.png">&nbsp;</td>

                  <td width="18%" height="100" background="http://www.h.co.uk/gpw-admin/images/filler4.png">&nbsp;</td>



            </tr>

      </table>

</div><br><br>

<?php

 while ($rows1 = mysql_fetch_array($resultall)) {  

        $x++;

 $class = ($x%2 == 0)? 'whiteBackground': 'graybackground';

 ?>

          <div align="center">

      <table border="0" width="1000" cellspacing="0" cellpadding="0">

            <tr class=<?php echo $class; ?>>

                  <td width="23%" height="40"><b><font face="Arial" size="2">&nbsp;&nbsp;<?php echo $rows1['gpname']; ?></font></b></td>

            <td width="5%">

            <p align="center"><b><font face="Arial"><input type="checkbox" name="comparecheck" value="OFF"></font></b></td>

                  <td width="18%"><b><font face="Arial"><u></u></font></b></td>

                  <td width="18%"><b><font face="Arial"><u></u></font></b></td>

                  <td width="18%"><b><font face="Arial"><u></u></font></b></td>

                  <td width="18%"><b><font face="Arial"><u></u></font></b></td>

            </tr>

      </table>

</div>

  </div>

  <?php

  }

?>

</body>

</html>
results.jpg
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40564870
Wow; that markup is straight out of the 20th century and a lot of the attributes you are using are obsolete.

You need to use CSS classes to do the presentation, then it should be possible to do the effects you want with simple scripting that swaps classes and triggers the transitions.

As it stands doing the transitions with that markup is going to require scripting each cell.

Cd&
0
 

Author Comment

by:damianb123
ID: 40564904
Cheers Cd&, any chance you could point me in the right direction?
0
 
LVL 33

Expert Comment

by:Slick812
ID: 40564917
I was just looking at your code work above,   First, , here in Experts Ex,  you really HAVE TO USE the BB  Code display for any code work more than 4 or 6 lines long, you get the Code block by clicking on the Code selector, in the top of the "Post a Comment" input.

I may not can talk myself into doing much on this question, your code work is so out of date, you use the, no longer relevant, OLD MySQL, instead of the only choice these days, of the current mysqli (improved).
And in your HTML you have the out of date tag and setup such as the font tag -
    <font face="Arial">
this tag and other old HTML standards are no longer relevant. You really, really need to update your page code to use more efficient and useful CSS container code work. . . . . . .

as COBOLdinosaur has said, , This is not in a state to do javascript code to change a of CSS, as you have it you could waist alot of time because you need to change disconected individual elements, etc.

I can show you some example code to have a hidden <table> be shown and hidden in javascript, but not sure about your javascript knowledge and what I would need to explain.
0
 

Author Comment

by:damianb123
ID: 40564922
Thanks Slick812, JS code is okay - if you can point me in the right direction.....

Cheers
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40564944
Well you need to start with the CSS no matter what,  

However I am not sure I actually understand exactly what you are trying to do.

Are you selecting all the data and hiding part of it, or are you intending to go back to the DB for additional data in response to the user request.  It makes a big difference.

I don't see any client side scripting so how are your javascript skills this going to require client side support to respond to the user activity.

Cd&
0
 
LVL 33

Expert Comment

by:Slick812
ID: 40564954
I will do some page work for u in a while, doin another question now.
  You really need to consider that people now view a web page in "Mobil" devices (phones, tablets), 10 TIMES more often than a laptop. And page code these days HAS TO BE WIDTH RESPONSIVE for that reason. Just something for you to consider.
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

Author Comment

by:damianb123
ID: 40564959
Hi Cd&,
    Basically the intention is to select ALL the data, but have 'some' of it hidden until each of the headings are clicked.  On the image I added, each of the coloured header blocks are clickable, when clicked will expand the contents for that section.....

If you can get me going with some code, I should be able to work things out....

Cheers
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40564993
You need to come up to speed for the markup and CSS.  I would recommend you spend a couple of hours looking at CSS and HTML areas of http://www.w3schools.com/

It is not the most comprehensive site around but it presents things in small bites.  You just need to get enough of the basic modern code to be able to do clean markup and CSS so that content and presentation are separated. Once you are able to do that we can workout the detailed structure and interfacing necessary to produce the effects you want.

You need to learn how to write the code otherwise you won't learn anything and I will end up having to do the work for you.

Cd&
0
 
LVL 33

Expert Comment

by:Slick812
ID: 40565644
OK, here is a web page, it has NO server side influence,
I have placed some CSS in this, although I tried to use only CSS 2 and not any CSS 3, but I may have used some CSS3.
I have keep the javascript to a minimum, all this javascript does is show or hide three tables at the bottom. If a Table is shown on the bottom (in grey) , then click on it to clear off ALL tables.

<!DOCTYPE html>
<html><head><title>Hidden Table Javascript</title>
<style>
.body {background-color: #def;}

.chooser {border:1px solid #cfc;
 margin-left:7.65%;}

.chooser td {width: 6em;
 height: 36px;
 text-align: center;
 background-color: #fdc;
 border:3px outset #944;
 cursor: pointer;}


.popTbl {font-weight:bold;
 border:1px solid #3526d8;
 width: 1000px;
 font-family: Arial, sans-serif;
 margin: 12px 1px;}

.popTbl td {width:18%;
 height: 40px;}


.noShow {display: none;}
.noShow td {font-size:75%;}
</style>
<script>/* <![CDATA[ */
var showin = null;

function showTbl(id) {
  if (showin) document.getElementById(showin).style.display = "none";

  if(id) {document.getElementById(id).style.display = "block";
  showin = id;}
    else showin = null;
  }
/* ]]> */</script>
</head><body>
<h3 style="text-align: center; color: red;">Hidden Table Javascript</h3>
<table class="chooser" ><tr>
<td style=" cursor: default; background-color: #fee; border-style: hidden;">Click One -></td>
<td onclick="showTbl('Junk')">Junk</td>
<td onclick="showTbl('Jokes')">Jokes</td>
<td onclick="showTbl('Bargins')">Bargins</td></tr></table>
<table class="popTbl" cellspacing="0" cellpadding="0">
<tr>
<td style="width:23%; padding-left: 9px;">Top Catagory</td>
<td style="width:5%"><input type="checkbox" name="comparecheck" value="OFF"></td>
<td>mmnkh jyui</td>
<td><u>jgjkh iyuutyrt</u></td>
<td><u>mb ngjjut</u></td>
<td><u>BBHJHH7765gvvgdghdjeiwhqwjw</u></td>
</tr>
<td style="width:23%; padding-left: 9px;">Next Catagory</td>
<td style="width:5%"><input type="checkbox" name="comparecheck" value="OFF"></td>
<td>jhkhu bgtre</td>
<td>m7h#ft)2 n5zk</td>
<td>BB - - - -000</td>
<td></td>
</tr>
</table>
<div id=tlbCont" style="display:inline-block; background: #ccc; margin-left:7.65%;" onclick="showTbl(0)">
<table id="Junk" class="noShow"><caption>Table Junk</caption>
<tr><td>JUNK jyui</td>
<td>JUNK iyuutyrt</td>
<td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td>
<td>BBHJHH7765gvvgdghdjeiwhqwjw</td></tr>
<tr><td>JUNK jyui</td>
<td>jgjkh iyuutyrt</td>
<td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td>
<td>1 2 3 4 5 6 7 8 9</td></tr>
</table>

<table id="Jokes" class="noShow" style="color: red;"><caption>Table Jokes</caption>
<tr><td>JOKES jyui</td>
<td>jgjkh iyuutyrt</td>
<td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td>
<td>BBHJHH7765gvvgdghdjeiwhqwjw</td></tr>
<tr><td>JOKES jyui</td>
<td>jgjkh iyuutyrt</td>
<td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td>
<td>1 2 3 4 5 6 7 8 9</td></tr>
<tr><td>THIRD jyui</td>
<td>jgjkh iyuutyrt</td>
<td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td>
<td>a b c d e f g h</td></tr>
</table>

<table id="Bargins" class="noShow" style="color: green;"><caption>Table Bargins</caption>
<tr><td>Bargins jyui</td>
<td>jgjkh iyuutyrt</td>
<td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td>
<td>BBHJHH7765gvvgdghdjeiwhqwjw</td></tr>
<tr><td>Bargins jyui</td>
<td>jgjkh iyuutyrt</td>
<td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td>
<td>1 2 3 4 5 6 7 8 9</td></tr>
<tr><td>THIRD jyui</td>
<td>jgjkh iyuutyrt</td>
<td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td>
<td>a b c d e f g h</td></tr>
<tr><td>Fourth jyui</td>
<td>jgjkh iyuutyrt</td>
<td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td><td>mb ngjjut</td>
<td>a b c d e f g h</td></tr>
</table>
</div>
</body></html>

Open in new window

as I said, this is not anthing that requires more CSS or javascript knowledge, ask question if it is unclear.
0
 

Author Comment

by:damianb123
ID: 40569217
Hi all,
    Sorry for the delay getting back to you, I've been busy recreating in DIV's, much better and lazy on my part for not doing it that way in the first place.  So this is what I have now:

I'll explain again what i need:


Basically the four coloured headers are made up from div's, when each header is clicked, I need that colour/section to expand across the other three, removing them - the idea being, there will be database rows underneath which only become visible when the div is expanded.  Click the div again, and it contracts...

<html>

<head>

<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<style>

.lightblue { background-color: #DBE8F6; }

.darkblue { background-color: #9DC3E6; }

.lightlilac { background-color: #C1BEFF; }

.darklilac { background-color: #7B76E2; }

.lightyellow { background-color: #FFFFBE; }

.darkyellow { background-color: #E5E850; }

.lightgreen { background-color: #BEFFC0; }

.darkgreen { background-color: #72D874; }

.lightred { background-color: #FFBEBE; }

.darkred { background-color: #EA6C6C; }

</style>

</head>

<body>

<div style="width: 1000px;">

	<div>

		<div class="darklilac" style="float: left; width: 23%; font-size: 14pt; font-family:Arial; font-weight:bold; text-align: left; height: 100px;"><u>Practice Name</u></div>

		<div class="darklilac" style="float: left; width: 5%; font-size: 7pt; font-family:Arial; text-align: center; height: 100px;"><div style="margin-bottom: 10px;"><p>&nbsp;</p></div></div>

		<div class="lightblue" id="sidebar" style="background-image: url(http://domain.co.uk/admin/images/filler1.png); height: 100px; float: left; width: 18%; font-family:Arial; font-size: 12pt; font-weight:bold; text-align: left;"><div style="margin-top: 5px;"><p>&nbsp;Bookings &<br>&nbsp;Contact</p></div><div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt;"><p>&nbsp;Opening<br>&nbsp;Hours</p></div></div></div>

		<div class="lightyellow" id="steam" style="background-image: url(http://domain.co.uk/admin/images/filler2.png); height: 100px; float: left; width: 18%; font-family:Arial; font-size: 12pt; font-weight:bold; text-align: left;"><div style="margin-top: 5px;"><p>&nbsp;Arrival &<br>&nbsp;Waiting</p></div><div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt;"><p>&nbsp;Parking</p></div></div>

		<div class="lightgreen" style="background-image: url(http://domain.co.uk/admin/images/filler3.png); height: 100px; float: left; width: 18%; font-family:Arial; font-size: 12pt; font-weight:bold; text-align: left;"><div style="margin-top: 5px;"><p>&nbsp;Clinical <br>&nbsp;Services</p></div><div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt;"><p>&nbsp;Telecare</p></div></div>

		<div class="lightred" style="background-image: url(http://domain.co.uk/admin/images/filler4.png); height: 100px; float: left; width: 18%; font-family:Arial; font-size: 12pt; font-weight:bold; text-align: left;"><div style="margin-top: 5px;"><p>&nbsp;Follow-up &<br>&nbsp;Support</p></div><div style="margin-bottom: 0px; font-family:Arial; font-size: 8pt;"><p>&nbsp;Repeat<br>&nbsp;Prescriptions</p></div></div>	

</div>

</div>



<div style="width: 1000px;">

	<div>

		<div class="darklilac" style="float: left; width: 23%; height: 40px; font-size: 10pt; font-family:Arial; font-weight:bold; text-align: left;"><p class="tooltip">&nbsp;&nbsp;<?php echo $rows1['name']; ?></div>

		<div class="darklilac" style="float: left; width: 5%; height: 40px;"><p><input type="checkbox" name="comparecheck" value="OFF"></p></div>

		<div class="lightblue" style="float: left; width: 18%; height: 40px; text-align: left;">&nbsp;&nbsp; <?php echo $rows1['hours']; ?></div>

		<div class="lightyellow" style="float: left; width: 18%; height: 40px; text-align: left;">&nbsp;&nbsp; <?php echo $rows1['parking']; ?></div>
		
		<div class="lightgreen" style="float: left; width: 18%; height: 40px; text-align: left;">&nbsp;&nbsp; <?php echo $rows1['telecare']; ?></div>
		
		<div class="lightred" style="float: left; width: 18%; height: 40px; text-align: left;">&nbsp;&nbsp; <?php echo $rows1['repeat']; ?></div>

    </div>

</div>

</body>

</html>

Open in new window

0
 
LVL 33

Expert Comment

by:Slick812
ID: 40569591
? ? ?
I copy and pasted your code above, to look at in my firefox browser, BUT, your complex DIV arrangement was Out of sorts :-( , as it had <div> without proper closing </div> AND it had PHP in it as  <?php echo $rows1['repeat']; ?>, and many other things that did not seem to match. It also had incorrect Float Left scope, as I tried to separate the two 1000px wide <div>, but the float left prevented it. you also have classes that you do NOT DEFINE like -  class="tooltip". . ., , AND the background image addys as "http://domain.co.uk/admin/images/filler2.png" are crap, no image there, I get some redirect to a "https://sedo.com/" web page, ouch for me.
I also have trouble with the fact that there are TWO 1000px wide <div>, that appear as One page Section or element, so I do Not relate to you saying "I need that colour/section to expand across the other three, removing them", is that the upper or lower div.
I am sorry but this is more than I have time to deal with, just stripping out the unnecessary blogging repetition of CSS attributes like "40px; text-align: left;" would take time.

I may can do my own version of 5 side by side  rectangular elements, where if you touch one of four to the right, it will expand to cove ALL 5 rectangles (100% width) and hide if then clicked. I just do not have the time or motivation to do such a complex and time consuming task.
0
 

Author Comment

by:damianb123
ID: 40569598
Thanks for taking time Slick812 to look at this, do you have your example which you can post and i can take a look at how you got it going? Thanks.
0
 
LVL 33

Expert Comment

by:Slick812
ID: 40569613
This is something I copied (more or less) from another project of mine, This IS NOT RELATED to your last comment, but somethin I did after my last code example. Any way, Maybe you can look at this and do your own version of something useful for you,

<!doctype html>
<html lang="en"><head><title>Slide out for Tables</title>
<style>
body {background: #def;}

.clicker{border:1px solid #ada; margin-left:8.2%;}
.clicker td {width: 8em; height: 2.3em; text-align: center; background-color: #fdc; border: 3px outset #944; cursor: pointer;}

.prods {position:relative; width: 1002px; margin: 12px 1px;}
.prTbl {font-weight: bold; color: #fff; border: 1px solid #3526d8; width: 100%; font-family: Arial, sans-serif;}
.prTbl td {height: 40px; background: #868; text-align: center;}

.slidTlb {position: absolute; top: 0.32em; right: 1px; width: 1px; overflow: hidden; padding-left: 1px; transition: width 1.8s;}
.non1 {width: 753px; height: 36px; color: #777;  background: #ff0;}
</style>
<script>/* <![CDATA[ */
var shown = null, out1 = -1, slDis=["sld10", "sld20", "sld30"];

function getE(id1) {
var e = document.getElementById(id1);
if (!e) alert("ERROR, invalid ID");
return e;
}

function slideTbl(sho, id1) {
var ck=-1, radios = document.getElementsByName( 'ra' );
for (var i = 0; i < radios.length; i++) {
  if (radios[i].checked) {ck=i; break;}
  }
//alert(id1+" slDis= "+slDis[id1])
if (ck < 0) {
  getE("inst1").innerHTML = "No radio Checked";
  return;} else getE("inst1").innerHTML = "Click Choice ->";

if(sho) {
if (out1 > -1) {
    if (ck != out1) getE(radios[out1].value).style.width = "1px";
    }
  getE(slDis[ck]).style.display = "none";
  getE(radios[ck].value+id1).style.display = "table";
  slDis[ck] = radios[ck].value+id1;
  getE(radios[ck].value).style.width = "755px";
  out1 = ck;
  } else {if(out1 > -1)getE(radios[out1].value).style.width = "1px";
  out1 = -1;}
  }
/* ]]> */</script>
</head>
<body>
<h3 style="text-align:center;">Slide out for Tables</h3>
<table class="clicker"><tr>
<td id="inst1" style="cursor: default; background-color: #fee; border-style: hidden;">Click Choice -></td>
<td id="junk" onclick="slideTbl(true,0);">Junk</td>
<td id="jokes" onclick="slideTbl(true,1);">Jokes</td>
<td id="bargin" onclick="slideTbl(true,2);">Bargins</td>
</tr></table>

<div class="prods">
<table class="prTbl">
<tr>
<td style="width:20%">Top Product</td><td style="width:4%"><input type="radio" name="ra" value="sld1"></td><td>top description</td>
</tr>
<tr>
<td>Mid Product</td><td><input type="radio" name="ra" value="sld2"></td><td>mid description</td>
</tr>
<tr>
<td>Third Product</td><td><input type="radio" name="ra" value="sld3"></td><td>third description</td>
</tr>
</table>

<div id="sld1" class="slidTlb" onclick="slideTbl(false,0);">
<table id="sld10" class="non1"><tr><td>sld1</td><td>junk1</td><td>unk1</td><td>unk1</td><td>unk1</td><td>unk1</td><td>unk1</td><td>unk1</td></tr></table>
<table id="sld11" class="non1" style="display: none;"><tr><td>sld1</td><td>jokes1</td><td>unk2</td><td>unk2</td><td>unk2</td><td>unk2</td><td>unk2</td><td>unk2</td></tr></table>
<table id="sld12" class="non1" style="display: none;"><tr><td>sld1</td><td>bargin1</td><td>unk1</td><td>unk1</td><td>unk1</td><td>unk1</td><td>unk1</td><td>unk1</td></tr></table>
</div>
<div id="sld2" class="slidTlb" style="top: 3.1em;" onclick="slideTbl(false,0);">
<table id="sld20" class="non1"><tr><td>sld2</td><td>junk2</td><td>junk2</td><td>junk2</td><td>junk2</td><td>junk2</td><td>junk2</td><td>junk2</td></tr></table>
<table id="sld21" class="non1" style="display: none;"><tr><td>sld2</td><td>jokes2</td><td>unk2</td><td>unk2</td><td>unk2</td><td>unk2</td><td>unk2</td><td>unk2</td></tr></table>
<table id="sld22" class="non1" style="display: none;"><tr><td>sld2</td><td>bargin2</td><td>unk3</td><td>unk3</td><td>unk3</td><td>unk1</td><td>unk1</td><td>unk1</td></tr></table>
</div>
<div id="sld3" class="slidTlb" style="top: 5.8em;" onclick="slideTbl(false,0);">
<table id="sld30" class="non1"><tr><td>sld3</td><td>junk3</td><td>junk3</td><td>junk3</td><td>junk3</td><td>junk3</td><td>junk3</td><td>junk3</td></tr></table>
<table id="sld31" class="non1" style="display: none;"><tr><td>sld3</td><td>jokes3</td><td>unk3</td><td>unk3</td><td>unk3</td><td>unk1</td><td>unk1</td><td>unk1</td></tr></table>
<table id="sld32" class="non1" style="display: none;"><tr><td>sld3</td><td>bargin3</td><td>unk3</td><td>unk3</td><td>unk3</td><td>unk1</td><td>unk1</td><td>unk1</td></tr></table>
</div>
</div>
<p>Click on the yellow slide out to dismiss.</p>
</body>
</html>

Open in new window

 You will need to do Javascript in order to have events that change the display.
0
 
LVL 33

Accepted Solution

by:
Slick812 earned 500 total points
ID: 40571371
Had some time today, I took the <div> display you gave, and took out all Style, and then added style the way I do it. Please note :  When I say "container CSS", what I mean, , is that you can Give a CSS style to ALL elements of one type (or more) INSIDE another element (the container) by just using the Class Name, then a space and then the element tag name such as a <table class="tdBorder>, , you can give ALL the <td> inside this <table> a border WITHOUT any style or class name by doing the style as -
<style>
.tdBorder { color: blue; }
.tdBorder td {border: 2px solid #5ad;}
</style>
in html as -

<table class="tdBorder>
<tr><td>a1</td><td>b2</td><td>c3</td></tr>
</table>

Then all of the <td> in that table will have a 2px border.

in my code below I use this for a style -
        .upper div{width: 18.5%;
then ALL the divs inside that upper <div> will be width 18.5%  even with no style or class.

BUT you must define any style for a div That is NOT 18.5 %  to the width you need for that one.

Also, if you make a container as style  -
   position:relative;

then any element inside that that has style of   position: absolute;    can be placed as a "Layer" over that element in a specified position using       left: 5px;  top: -3px;

here is some code to look at, this works for me in the current firefox , however, It is much to difficult for me to get a <div> to expand and then deal with all the other <div> in that Row, , which must be shrank OR hidden, and then they all must be expanded or shown when the shown is dismissed, Since you use % for widths, this gets tricky. I probally can be done, but no time for me on that kind of thing.

I used some code that was already in my previous comment, and modified it to do a slide Over,
Which to me, seems to be visually effective-
<!doctype html>
<html lang="en">
<head><title>Show related</title>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
.upper {width: 1000px;
  }
  .upper div{width: 18.5%;
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    height: 98px;
    padding-left: 5px;
    padding-top: 7px;
    }
  .upper p {font-size: 11px;
    margin-top:20px;
    font-weight: normal;
    }
.lower {position:relative;
  width: 1000px;
  border-top:1px solid #55d;
  }
  .lower div{width: 18.5%;
    height: 40px;
    padding-left: 5px;
    padding-top: 6px;
	cursor: pointer;
    }
.inblk, .upper div, .lower div{
  display:-moz-inline-box;
  -moz-box-orient:vertical;
  display:inline-block;
  vertical-align:top;
  zoom:1;
  *display:inline;
  }
  
.slidTlb {position: absolute;
  display:block;
  top: 0.1em;
  right: 1px;
  width: 1px;
  cursor: pointer;
  overflow: hidden;
  z-index:3;
  transition: width 1.8s;
  }
.non1 {width: 770px;
  height: 42px;
  color: #777;
  margin-left: 1px;
  background: #DBE8F6;
  }
  
.ltblue { background-color: #DBE8F6; }
.drlilac { background-color: #7B76E2; }
.ltyellow { background-color: #FFFFBE; }
.ltgreen { background-color: #BEFFC0; }
.ltred { background-color: #FFBEBE; }
</style>

<script>/* <![CDATA[ */
var out1 = -1, slDis=["sld10", "sld20", "sld30", "sld40"],
bkg = ["#DBE8F6", "#FFFFBE", "#BEFFC0", "#FFBEBE"];

function getE(id1) {
var e = document.getElementById(id1);
if (!e) alert("ERROR, invalid ID");
return e;
}

function slideTbl(sho, id1) {
var ck=0, lue="sld1";
if(sho) {
if (out1 > -1) return;
  getE(slDis[ck]).style.display = "none";
  var tlb = getE(lue+id1);
  tlb.style.display = "table";
  tlb.style.backgroundColor = bkg[id1];
  slDis[ck] = lue+id1;
  getE(lue).style.width = "772px";
  out1 = ck;
  } else {if(out1 > -1)getE(lue).style.width = "1px";
  out1 = -1;}
  }
/* ]]> */</script>
</head>
<body>
<div class="upper ltred">
    <div class="drlilac" style="width: 22%; font-size: 19px; text-decoration: underline;">
      Practice Name
    </div><div class="ltblue" style="background-image: url(filler1.png);">
Bookings &<br />Contact
        <p>Opening<br />Hours</p>
    </div><div class="ltyellow" style="background-image: url(filler2.png);">
Arrival &<br />Waiting
        <p>Parking</p>
    </div><div class="ltgreen" style="background-image: url(filler3.png);">
Clinical <br />Services
	  <p>Telecare</p>
    </div><div class="ltred" style="background-image: url(filler4.png);">
Follow-up &<br/>Support
      <p>Repeat<br />Prescriptions</p>
    </div>	
</div>
<div class="lower ltred">
<em id="sld1" class="slidTlb" onclick="slideTbl(false,0);">
<table id="sld10" class="non1"><tr><td>Hours</td><td>unk1</td><td>unk1</td><td>unk1</td><td>unk1</td><td>unk1</td></tr></table>
<table id="sld11" class="non1" style="display: none;"><tr><td>Parking</td><td>unk1</td><td>unk2</td><td>unk2</td><td>unk2</td><td>unk2</td><td>unk2</td></tr></table>
<table id="sld12" class="non1" style="display: none;"><tr><td>TeleCare</td><td>unk1</td><td>unk1</td><td>unk1</td><td>unk1</td><td>unk1</td><td>unk1</td></tr></table>
<table id="sld13" class="non1" style="display: none;"><tr><td>Repete</td><td>unk1</td><td>unk1</td><td>unk1</td><td>unk1</td><td>unk1</td></tr></table>
</em>
    <div class="drlilac" style="width: 22%; font-size: 10pt; font-family: Arial, sans-serif; font-weight:bold; cursor: default;">
  <input style="float:right; margin-right:12px;" type="checkbox" name="comparecheck" value="OFF">Dr Smith . . . . . . . . . . . . . . . . . . . . . . . M g
    </div><div class="ltblue" onclick="slideTbl(true,0);">
       -hours-
    </div><div class="ltyellow" onclick="slideTbl(true,1);">
       -parking-
    </div><div class="ltgreen" onclick="slideTbl(true,2);">
       -telecare-
    </div><div class="ltred" onclick="slideTbl(true,3);" style="border-right:1px solid #555;">
       -repeat-
    </div>

</div>
<div class="lower">
    <div class="drlilac" style="width: 22%; font-size: 10pt; font-family: Arial, sans-serif; font-weight:bold;">
  <input style="float:right; margin-right:12px;" type="checkbox" name="comparecheck" value="OFF">Dr. Jones . .
    </div><div class="ltblue">
       -hours-
    </div><div class="ltyellow">
       -parking-
    </div><div class="ltgreen">
       -telecare-
    </div><div class="ltred" style="border-right:1px solid #555;">
       -repeat-
    </div>
</div>
<div class="lower">
    <div class="drlilac" style="width: 22%; font-size: 10pt; font-family: Arial, sans-serif; font-weight:bold;">
  <input style="float:right; margin-right:12px;" type="checkbox" name="comparecheck" value="OFF">Dr. Docter . .
    </div><div class="ltblue">
       -hours-
    </div><div class="ltyellow">
       -parking-
    </div><div class="ltgreen">
       -telecare-
    </div><div class="ltred" style="border-right:1px solid #555;">
       -repeat-
    </div>
</div>


</body>
</html>

Open in new window

0
 

Author Closing Comment

by:damianb123
ID: 40580131
Thanks very much for all your help and showing me the demo code, this helped me greatly in being able to produce my code which works.  thanks.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
CSS grid style change 2 14
sql sentence 2 12
Strip leading 0 from a var 3 13
Programatically extract date from website 8 17
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now