Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #37650

Re: Hide and swap code parts within <TD> "and remain format"

Show all headers | View raw

Den torsdag 31 oktober 2019 kl. 15:24:20 UTC+1 skrev Jonas Thörnvall:
> I found this code that i butchered and tried to use in my own program to swap HTML witin a column."My code is to big to show", but in the TD there resides a table", however that table lose its format as soon i put the div tag around it i tried to format the table with hard pixels. I also tried to set the DIV size "height" in the container part. But i just can't get the table to fill up the <TD> when i embed it with the <DIV>.
> 
> Basicly what i try to do is swap the "recording play" mode, to a mode that hold the editor in the <TD>. But it does not come out correct.
> 
> 
> <!DOCTYPE HTML>
> <html>
> <head>
> <title> Untitled </title>
> <script type="text/javascript">
> // From: http://www.webdeveloper.com/forum/showthread.php?266743-Switch-Div-Content-Using-Javascript&p=1229155#post1229155
> 
> function showDiv(idInfo) {
>   var sel = document.getElementById('divLinks').getElementsByTagName('div');
>   for (var i=0; i<sel.length; i++) {
>     sel[i].style.display = 'none';
>   }
>   document.getElementById('container'+idInfo).style.display = 'block';
> }
> </script>
> <style type="text/css">
> #container1, #container2 {
>   display:none;
>   border:3px solid blue;
>   width:200px;
>   overflow:hidden;
> }
> 
> #container3, #container4 {
>   display:none;
>   border:3px solid blue;
>   width:500px;
>   overflow:hidden;
> }
> 
> </style>
> 
> </head>
> <body onload="showDiv('1');return false" >
> <div id="linkDiv" >
> 
>  <button onclick="showDiv('1');return false">link 1</button>
>  <button onclick="showDiv('2');return false">link 2</button>
>  <button onclick="showDiv('3');return false">link 3</button>
>  <button onclick="showDiv('4');return false">link 4</button>
>  
> </div>
> <p>
> 
> <div id="container">
>  The container I want all content divs to load into... and by default, to show the first container content
> </div>
> 
> <!-- The 4 container content divs. -->
> <div id="divLinks">
>  <div id="container1">Container #1<p>Whole bunch of text 1</div>
>  <div id="container2">Container #2<p>Whole bunch of text 2</div>
>  <div id="container3">Container #3<p>Whole bunch of text 3</div>
>  <div id="container4">Container #4<p>Whole bunch of text 4</div>
> </div>
> 
> </body>
> </html>

I think i solved it position:relative; and 100% seem to work.

#container1, #container2 {
  position:relative;
  bgcolor:yellow;
  display:none;
  border:3px solid blue;
  width:100%;
  height:100%;
  overflow:hidden;
}

#container3, #container4 {
  position:relative;
  bgcolor:yellow;
  display:none;
  border:3px solid blue;
  width:100%;
  height:100%;
  overflow:hidden;
}

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Hide and swap code parts within <TD> "and remain format" Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-10-31 07:24 -0700
  Re: Hide and swap code parts within <TD> "and remain format" Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-10-31 10:45 -0700
    Re: Hide and swap code parts within <TD> "and remain format" Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-10-31 10:53 -0700
      Re: Hide and swap code parts within <TD> "and remain format" Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-10-31 14:37 -0700
  Re: Hide and swap code parts within <TD> "and remain format" Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-10-31 11:52 -0700
    Re: Hide and swap code parts within <TD> "and remain format" "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-11-01 00:34 +0100

csiph-web