مقاله: روز شمار نوروز 1392 ویبولتین با قابلیت بسته شدن

درود.

مشکلات کد ها مانند بسته شدن کادر های دیگر یا محو شدن تصاویر دیگر حل شد ، از ابتدا آموزش را انجام دهید .

در این مقاله از کد های این مقاله استفاده شده است : روز شمار عید 92 بسیاز زیبا و ساده + شات که فقط چند خاصیت به آن اضافه شده است .

نمونه زنده :

دریافت کد روزشمار نوروز 1392

برای اینکار ابتدا به قالب header رفته و کد های زیر را به اوّل آن اضافه کنید :

کد:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".cross").click(function(){
$("kadr.img").fadeOut(300);
$(".noroz").delay(300).fadeOut(300);
$(".kadr").delay(400).slideUp(300);
});
});


$(document).ready(function(){
$(".cross").mouseenter(function(){
$(".kadrtitle2").fadeIn(300);
});
});


$(document).ready(function(){
$(".cross").mouseleave(function(){
$(".kadrtitle2").fadeOut(300);
});
});
</script>

کد های زیر را به additional.css خود اضافه کنید :

کد:

.noroz * {
font: 11px "tahoma";
direction:rtl;
}


.kadr {
height:57px;
border-radius:5px;
border:1px solid #cecece;
border-bottom:3px solid #cecece;
margin:0 auto;
position:relative;
margin:10px;
background:white;
}


.kadrtitle {
position:absolute;
top:5px;
right:5px;
}


.cross {
background:url(http://www.vbiran.ir/adbox/close.png);
width:41px;
height:35px;
float: left;
margin-left: 2px;
}


#cntdwn {
direction: rtl;
text-align: right;
padding-top: 14px;
float: right;
padding-right: 10px;
}


#cntdwn:after {
content:".";
}


.noroz b {
font-weight:bold;
color:gray;
}


.kadrtitle2 {
background: #f54522;
border: 1px solid #d32f0e;
text-shadow: 1px 1px #d32f0e;
font: 11px tahoma;
position: absolute;
color: white;
padding: 3px 5px;
border-radius: 5px;
left: 45px;
top: 8px;
display:none;
}

این کد ها رو هم هرجا که دوست دارید نمایش داده شود قرار دهید :

کد:

<div class="kadr">
<div class="kadrtitle2">بستن کادر</div>
<div class="kadrtitle">
<div class="noroz"><img src="http://www.vbiran.ir/norooz/haftsin.png" style="float:right;" />
<script language="JavaScript">TargetDate = "3/21/2013 09:18:19 ";BackColor = "";ForeColor = "#000000";CountActive = true;DisplayFormat = " تا آغاز سال جديد 1392 شمسي    %%D%% روز و %%H%% ساعت و  %%M%%  دقيقه و %%S%% ثانيه زمان مانده است";FinishMessage = "آغاز سال 1392 و عيد نوروز بر شما مبارک";</script> <script language="JavaScript">function calcage(secs, num1, num2) {
  s = ((Math.floor(secs/num1))%num2).toString();
  if (s.length < 2)
    s = "0" + s;
  return "<b>" + s + "</b>";
}


function CountBack(secs) {
  if (secs < 0) {
    document.getElementById("cntdwn").innerHTML = FinishMessage;
    return;
  }
  DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
  DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
  DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
  DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));


  document.getElementById("cntdwn").innerHTML = DisplayStr;
  if (CountActive)
    setTimeout("CountBack(" + (secs-1) + ")", 990);
}


function putspan(backcolor, forecolor) {
 document.write("<span id='cntdwn' style='background-color:" + backcolor + 
                "; color:" + forecolor + "'></span>");
}


if (typeof(BackColor)=="undefined")
  BackColor = "blue";
if (typeof(ForeColor)=="undefined")
  ForeColor= "red";
//if (typeof(TargetDate)=="undefined")
  TargetDate = "03/20/2013 15:31:56";
if (typeof(DisplayFormat)=="undefined")
  DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if (typeof(CountActive)=="undefined")
  CountActive = true;
if (typeof(FinishMessage)=="undefined")
  FinishMessage = "";
putspan(BackColor, ForeColor);
var dthen = new Date(TargetDate);
var dnow = new Date();
ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);</script><br><br></div>  
</div>
<div class="cross"></div>
</div>

موفق باشید .

منبع : وی بی ایران