PDA

View Full Version : سوال: نمایش پنجره یا عکس کوچک هنگام لود صفحه



htarahi
شنبه 20 شهریور 1389, 00:32 صبح
باز هم سلام و عرض خسته نباشید
دوستان ،اسکریپت onload سایت
http://rapidbaz.com یا مشابه اون رو می خوام.
به عبارت دیگر در زمان لود صفحه ی اصلی یک پنجره یا عکس کوچک به نمایش در بیاد.:متفکر:

Hell Lord
شنبه 20 شهریور 1389, 06:02 صبح
برای انجام چنین کاری، باید یک عنصر بسازید که اولا، بالاتر از تمام عنصر ها قرار بگیرد، و ثانیا طول و عرض آن برابر کل صفحه باشد.
اول یک div میسازیم با این خصوصیات :

<div id="shadow" class="shadow" >
LOADING!... or whatever
</div>
کلاس این عنصر به این شکل است، البته این چیزی است که من خودم ساختم شما میتوانید به سلیقه ی خودتان تغیرش بدید :

.shadow{
background-color:#000000;
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
visibility:hidden;
filter: alpha(opacity=60);
opacity: 0.6;
}خب این از عنصر برای نمایش، اما الان مشکل آنجاست که height این دایو، اندازه ی height صفحه نیست.
برای تغییر height آن باید از این دستور هنگام بار گذاری اولین خط استفاده کرد :

document.getElementById("shadow").style.height = screen.height+"px";برای نمایش آن هم هنگاه لود صفحه ، در اولین خط صفحه (البته بعد از تعریف div زیرا خطا ایجاد میشود اگر ان div در صفحه حضور نداشته باشد) این کد قرار میگیرید :

document.getElementById("shadow").style.visibility="visible"; و در پایان صفحه هم این کد :

document.getElementById("shadow").style.visibility="hidden"; ببخشید اگر طولانی شد، اگر مشکلی بود در خدمتم.

htarahi
شنبه 20 شهریور 1389, 23:16 عصر
عزیز من فکر کنم درست نگرفتم !
من بعد از <body> این کد رو وارد کردم :

<div id="shadow" class="shadow" >
LOADING!... or whatever
</div>
<script>document.getElementById("shadow").style.visibility="visible";
document.getElementById("shadow").style.height = windowHeight+"px";
</script>
و در انتها قبل از </body> هم این رو :

<script>document.getElementById("shadow").style.visibility="hidden";</script>
استایل shadow رو هم در فایل css سایت وارد کردم.
اما ظاهراً درست نبوده چون چیزی عوض نشد:گیج:

Hell Lord
شنبه 20 شهریور 1389, 23:39 عصر
در لوکال هاست امتحان کردید!؟
1 . خب وقتی صفحه لود میشود ، آن قسمت هم دوباره محو میشود!چون سرعت بالا است در لوکال هاست هیچ تغییری نمیبینید!قسمت آخر را نگذارید تا ببینید تغییر را.
2. با عرض شرمندگی من این را تست نکردم و نوشتم فقط ، دو قسمتش اشتباه هست اصلاح کنید (در بالا اصلاح شد!) ::خجالت:
در سی اس اس :
به جای
display:none;این را بگذارید :

visibility:hidden; و کد تغییر سایز div :
به جای :

document.getElementById("shadow").style.height = windowHeight+"px";این را بگذارید


document.getElementById("shadow").style.height = screen.height+"px";