Slder Laterale

Con inserto di immagini

by rafmaz

HTML

<div id="expand" class="go">expand</div>

<div id="container" class="brdr">
<div id="inner">
<div class="preview-container">
  <div class="preview-graph">
    <div class="preview-title">
      TITOLO
    </div>
    <img src="http://www.amicidelcastello.it/LoZoeCastle/TORNEI%20DAME%20E%20CAVALIERI/cibo-salento.jpg" />
  </div>
  <div class="preview-summary">
    <button class="btn">LEGGI</button>
  </div>
<hr/>
<div class="preview-container">
  <div class="preview-graph">
    <div class="preview-title">
      TITOLO
    </div>
    <img src="https://lamedicinaestetica.files.wordpress.com/2013/07/dott-loiacono-emilio-alessio-medicina-chirurgia-estetica-benessere-dietologia-sessuologia-ecografie-tabagismo-smettere-di-fumare-fast-food-hai-un-rischio-maggiore-di-rinite-congiuntivit.jpg" />
  </div>
  <div class="preview-summary">
    <button class="btn">LEGGI</button>
  </div>
<hr/>
</div>
</div>
</div>

CSS

body {
    font-family:sans-serif;
    font-size:0.8em;
    background-color:#fc9;
 }
#expand {
    width:80px;
    padding:5px;
    border:3px double #999;
    background-color:#fff;
    text-align:center;
    cursor:pointer;
    display:none;
 }
#container {                             
    width:200px;
    overflow:hidden;
    background-color:#fff;
    margin: 0px 10px 0px auto;
    height: 400px;
 }
#container #inner {                      
    padding:10px;
 }
#container p {
    margin:0;
    padding:10px;
    text-align:justify;
    text-indent:1.5em;
 }
#container p:first-letter {
    font-family:serif;
    font-size:200%;
    color:#600;
 }
.brdr {
    border:1px solid #999;
 }
.go {
    color:#090;
 }
.stop {
    color:#900;
 }
.preview-graph img{
  width: 100%;
}
.preview-title {
  position: relative;
  width: 80%;
  margin: 0px auto -28px;
  padding: 6px 20px 6px 14px;
  -webkit-box-shadow: 0px 8px 20px 5px rgba(250, 250, 250, 0.87);
  -moz-box-shadow: 0px 8px 20px 5px rgba(250, 250, 250, 0.87);
  box-shadow: 0px 8px 20px 5px rgba(250, 250, 250, 0.87);
  border-radius: 0px 0px 100px 100px;
  border: none;
  background: rgba(4, 1, 0, 0.87) none repeat scroll 0% 0%;
  font-weight: bolder;
  color: blanchedalmond;
}
.brdr{
  background: none !important;
}
.btn {
display: inline-block;
font-size: 13px;
line-height: 1.42857;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid #CCC;
border-radius: 4px;
-moz-user-select: none;
font-weight: bolder;
color: #FFEBCD;
background: rgba(4, 1, 0, 0.6) none repeat scroll 0% 0%;
width: 52px;
padding: 4px 0px;
margin: -55px auto 0px 120px;
}
hr {
  height: 2px;
  border-color: rgba(4, 1, 0, 0.87);
}

JavaScript

var c=0;
 var test=true
 var obj,obj1,obj2,hgt,exp,shr;
 var speed=50;
if(window.addEventListener){
   window.addEventListener('load',init,false);
 }
else { 
if(window.attachEvent){
   window.attachEvent('onload',init);
  }
 }

function init(){
   obj=document.getElementById('expand');
   obj1=document.getElementById('container');
   hgt=document.getElementById('inner').offsetHeight;

   obj.style.display='block';
   obj1.className='';
   obj1.style.height=0;

obj.onclick=function(){
if(test==true){
   expandDiv();
   test=false;
 }
else {
   shrinkDiv();
   test=true;
   }
  }
 }

function expandDiv() {
   clearTimeout(shr);
   obj1.style.height=c+'px';
   obj1.className='brdr';
   obj.firstChild.nodeValue='shrink';
   obj.className='stop';

   c+=20;
if(c>=hgt) {
   c=hgt;
   clearTimeout(exp);
   return;
 }
   exp=setTimeout('expandDiv()',50);
 }

function shrinkDiv() {
   clearTimeout(exp);
   obj1.style.height=c+'px';
   obj.firstChild.nodeValue='expand';
   obj.className='go';

   c-=20;
if(c<0) {
   c=0;
   clearTimeout(shr);
   obj1.style.height=0;
   obj1.className='';
   return;
 }
   shr=setTimeout('shrinkDiv()',50);
 }