İPUCU

Java Object Oriented Programming temeline dayanan, çok işlevli, step by step işleyen dilin dökümanlarının paylaşım alanı.

Seçenekler

Testimonial Container (ing)

16-02-2012 18:12
#1
ZeRooCooL - ait Kullanıcı Resmi (Avatar)
Üye
Üyelik tarihi:
01/2012
Mesajlar:
2.627
Teşekkür (Etti):
213
Teşekkür (Aldı):
304
Konular:
1273
Ticaret:
(0) %

Yazının önce küçük bir kısmını gösterip linke tıklanması ile tüm hepsinin görüntülenmesini sağlayabileceğiniz örnek bir JAVASCRIPT uygulaması.


Kod:
<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Will Bontrager | http://www.willmaster.com/Licensed under: U.S. Copyright
 */

function FlipDisplay(d1,d2) {
  if(********.getElementById(d1).style.display == "none") {
    ********.getElementById(d1).style.display = "";
    ********.getElementById(d2).style.display = "none";
  } else {
    ********.getElementById(d1).style.display = "none";
    ********.getElementById(d2).style.display = "";
  }
}
</script>

*********
.testimonialNormalFlow { 
  border:1px #666666 dashed;
  padding:10px;
  width: 180px;
  font: .8em verdana, arial, helvetica, sans-serif;
}

p.testimonial {
  margin:0; 
  font-weight:bold; 
  background-color:#efefef; 
  padding:3px; 
  letter-spacing:3px;
  font-size:larger;
  text-align:center;
}

p.collapseTitle {
  margin:0;
  text-align:right;
  font-size: .8em;
  margin-top: -10px;
}
</style>


<!-- Start of testimonial container div -->
<div class="testimonialNormalFlow">
<p class="testimonial">Testimonial</p>

<!-- Start of collapsed content div -->
<div id="testimonialA">
<p>
Loved the script!
</p>
<p class="collapseTitle">
<a href="javascript:FlipDisplay('testimonialA','testimonialB')">[more ...]</a>
</p>
</div>
<!-- End of collapsed content div -->

<!-- Start of expanded content div -->
<div id="testimonialB" style="display:none;">
<p>
Really sweet!</p>
<p>
Cras lectus sociosqu platea diam ac. Eni ve sollicitudin rhoncus, justo pede aliquet, a, lectus urna quam.</p>
<p>
Eu porta mattis id nulla consequat vestibulum conubia dis. Nulla cubilia cras, id lacus eni risus ridiculus leo facilisi.</p>
<p>Laculis<br><a href="http://javascript.internet.com/">JavaScript Source</a></p>
<p class="collapseTitle">
<a href="javascript:FlipDisplay('testimonialA','testimonialB')">[close]</a>
</p>
</div>
<!-- End of expanded content div -->

</div>
<!-- End of testimonial container div -->


Bookmarks


« Önceki Konu | Sonraki Konu »
Seçenekler

Yetkileriniz
Sizin Yeni Konu Acma Yetkiniz var yok
You may not post replies
Sizin eklenti yükleme yetkiniz yok
You may not edit your posts

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodları Kapalı
Trackbacks are Kapalı
Pingbacks are Kapalı
Refbacks are Kapalı