show/hide

[eT`]

Uztaisīju it kā elementāru show/hide skriptu, bet man atverot to show tas contents uzlien virsū nākamajam DIV

 

JS kods

function showHide(shID) {
  if (document.getElementById(shID)) {
     if (document.getElementById(shID+'-show').style.display != 'none') {
        document.getElementById(shID+'-show').style.display = 'none';
        document.getElementById(shID).style.display = 'block';
     }
     else {
        document.getElementById(shID+'-show').style.display = 'inline';
        document.getElementById(shID).style.display = 'none';
     }
  }
}

 

HTML daļa

<div class="monitors" align="center">
<div class="mon_header">AAA</div>
AAA
<br />
   <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Rādīt</a>
   <div id="example" class="more">
   <a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Paslēpt</a><br />
   <p>XXX</p>
   </div>
</div>

<div class="monitors" align="center">
<div class="mon_header">AAA</div>
AAA
<br />
   <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Rādīt</a>
   <div id="example" class="more">
   <a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Paslēpt</a><br />
   <p>XXX</p>
   </div>
</div>

 

CSS daļa

.more {
width:100%;
display: none;
float:right;
}

.more p {
margin-right:-120px;
}

a.showLink, a.hideLink {
padding-left:10px;
text-decoration: none;
float:right;
margin-right:5px;
margin-bottom:10px;
background: transparent url('images/show.png') no-repeat left; 
}

a.hideLink {
padding-left:10px;
text-decoration: none;
float:right;
margin-right:5px;
background: transparent url('images/hide.png') no-repeat left; 
}

.mon_header {
background-color: #fcfcfc;
height:20px;
margin-top:20px;
margin-bottom:20px;
color:#838382;
text-align:center;
}

.monitors {
margin-top:10px;
margin-bottom:10px;
display:block;
}

[briedis]

id vērtībām ir jābūt unikālām! Tev nedrīkst būt vairāki elementi ar vienu un to pašu id..

[eT`]

nomainīju

 

<div class="monitors" align="center">
<div class="mon_header">XXX</div>
AAA
<br />
   <a href="#" id="1-show" class="showLink" onclick="showHide('1');return false;">Spēlētāji</a>
   <div id="1" class="more">
   <a href="#" id="1-hide" class="hideLink" onclick="showHide('1');return false;">Paslēpt</a><br />
   <p><small>AAA</small></p>
   </div>
</div>

<div class="monitors" align="center">
<div class="mon_header">XXX</div>
AAA
<br />
   <a href="#" id="2-show" class="showLink" onclick="showHide('2');return false;">Spēlētāji</a>
   <div id="2" class="more">
   <a href="#" id="2-hide" class="hideLink" onclick="showHide('2');return false;">Paslēpt</a><br />
   <p><small>AAA</small></p>
   </div>
</div>

 

bet tik un tā iet virsū.

man likās, ka CSS kaut kas nav pareizi, bet kas nezinu.

Edited September 10, 2010 by eT`

[indoom]

pameklē internetā css float fix. Arī te pat forumā jau 100x apspriesta lieta. visdrīzāk skaties html/css sadaļā. PHP sadaļa domāta php jautājumiem.

[eT`]

Paldies, izdevās.

 

CSS

.clearfix:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}

 

un pirms monitors noslēdzošā DIV tagad ieliku - <div class="clearfix"></div>

[indoom]

vispār jau tas fix jāliek uz paša elementa, kuram ir float.

Ja liek papildus <div class="floatfix"> </div>, tad jāizmanto

.floatfix { 
 clear:both;
 overflow:hidden;
 height:0;
 visibility:hidden;
}

[briedis]

vispār jau tas fix jāliek uz paša elementa, kuram ir float.

Ja liek papildus <div class="floatfix"> </div>, tad jāizmanto

.floatfix { 
 clear:both;
 overflow:hidden;
 height:0;
 visibility:hidden;
}

 

 

<div konteineris>

<div floato></div>

<div floato></div>

<div floato></div>

<div class="fix"></div>

</div>

 

Daru šitā, nekādus nbsp; nelieku, viss strādā...

[indoom]

  ir, jo tukši tagi neesot pareizi :)

[Леший]

Tik tiešam, sročno visi labojam

<script src=".."></script>

uz

<script src=".."> </script>

[sheps]

Tik tiešam, sročno visi labojam

<script src=".."></script>

uz

<script src=".."> </script>

 

 

 

šodien pat sākšu :D:D:D

[briedis]

Man ir neliela škrobe, ka nedrīkst <div/>...

[indoom]

var jau izmantot <br class="floatfix" /> un visi būs laimīgi