ظاهر شدن div با افکت خاص [بایگانی]

saeidejafari

چهارشنبه 08 آبان 1387, 13:53 عصر

سلام بر همگی،
من میخوام با کلیک بر روی یه دکمه یه div نمایش داده بشه که تا اینجاش رو مشکلی ندارم ولی می خوام این div با حالتی شبیه به سایت یاهو(قسمت mail و messenger) باز بشه.
ممنون از همگی.

emad_67

چهارشنبه 08 آبان 1387, 21:03 عصر

من متوجه نشدم چه جوری منظورت هست، قسمت mail و مسنجر یاهو افکتی نداره که.
لینک بده اگه میشه.

jaza_sa

چهارشنبه 08 آبان 1387, 23:52 عصر

احتمالا منظورشون این افکته

saeidejafari

پنج شنبه 09 آبان 1387, 08:03 صبح

احتمالا منظورشون این افکته

سلام
بله منظورم همینیه که دوستمون گفتن.

امید امرایی

جمعه 10 آبان 1387, 11:09 صبح

در این نمونه که فرمودین کمی متفاوت عمل شده.
به این شکل که ابتدا طول یا عرض div بزرگ تر و بعد محتوای داخلی اون مقدار دهی می شه.

var MaxHeight; 200;
var incperTime = 10;

function incHeight(elementID){ // ارسال شناسه عنصر
var El = document.getElementById(elementID); // تعریف نشانه گر عنصر
if(El.style.height < MaxHeight){ // اگر ارتفاع عنصر بیشتر از حداکثر آن نیست
El.style.height += incperTime; // افزایش ارتفاع بر اساس واحد تعریف شده در هر بار
window.setTimeout('incHeight('+elementID+')', 100); // فراخوانی مجدد تابع
}
else{ // اگر ارتفاع عنصر برابر یا بیشتر از حداکثر آن است
// اجرای عملیات پردازش محتوای آن
}
}

این صرفا یک نمونه بود و می شه از روش های کارآمد و استاندارد تر هم استفاده کرد

saeidejafari

شنبه 11 آبان 1387, 08:57 صبح

سلام
من اینو نوشتم ولی این تابع فقط یکبار اجرا میشه. مشکلم اینه که از این خط برنامه

self.setTimeout('incHeight('+elementID+')', 100);
رد میشه ولی اجراش نمیکنه یعنی تابع رو دوباره فراخوانی نمیکنه !!!

var MaxHeight= "500px";
var incperTime = "10px";
function incHeight(elementID){ // ارسال شناسه عنصر
var El = document.getElementById("elementID"); // تعریف نشانه گر عنصر
if(El.style.height < MaxHeight){ // اگر ارتفاع عنصر بیشتر از حداکثر آن نیست
El.style.height += incperTime; // افزایش ارتفاع بر اساس واحد تعریف شده در هر بار
self.setTimeout('incHeight('+elementID+')', 100); // فراخوانی مجدد تابع
}
else{ // اگر ارتفاع عنصر برابر یا بیشتر از حداکثر آن است
// اجرای عملیات پردازش محتوای آن
}
}

امید امرایی

شنبه 11 آبان 1387, 20:39 عصر

خوب این چیزی که شما نقل قول کردید با قول بنده متفاوته

بنده هیچ وقت همچین چیزی نگفتم :

var MaxHeight= "500px";
و البته تغییرات دیگه که شما خودتون ایجاد کردید

کاری که شما کردید باعث می شه شرط :

if(El.style.height < MaxHeight)هیچ گاه درست نباشه

و
self.setTimeout
قابلیت حمل رو پایین میاره

saeidejafari

یک شنبه 12 آبان 1387, 07:16 صبح

خوب این چیزی که شما نقل قول کردید با قول بنده متفاوته

بنده هیچ وقت همچین چیزی نگفتم :

var MaxHeight= "500px";
و البته تغییرات دیگه که شما خودتون ایجاد کردید

کاری که شما کردید باعث می شه شرط :

if(El.style.height < MaxHeight)هیچ گاه درست نباشه

و
self.setTimeoutقابلیت حمل رو پایین میاره
سلام
:خجالت:من کد شما رو امتحان کردم ولی یه بارم توی شرط نرفت نمی دونم چرا!:متفکر:
اون self رو هم اگه بجاش document بذارم اجرا نمیشه بازم نمی دونم چرا!:متفکر:

emad_67

یک شنبه 12 آبان 1387, 11:42 صبح

من کد جناب kassit رو به این شکل ادیت کردم:

<script type="text/javascript">
var MaxHeight= 200;
var incperTime = 10;

function incHeight(elementID){
var E1 = document.getElementById(elementID);
if(parseInt(E1.style.height) < MaxHeight){
E1.style.height = parseInt(E1.style.height) + incperTime+"px";
setTimeout("incHeight('"+elementID+"')", 100);

}
}
</script>
</head>

<body>
<div id="test" style="height: 20px; border: 1px solid #000;" onmouseover="incHeight(this.id);">
</div>
</body>
موس رو روی div ببیرید تا تغییر اندازه شروع بشه.
مقدار El.style.height یه رشته هست که اول باید اونو تبدیل به عدد و بعد مقایسه کنید.
همچنین این خط هم غلطه:

El.style.height += incperTime;
که من به این شکل تغییر دادم:

E1.style.height = parseInt(E1.style.height) + incperTime+"px";
آخر اون برای اینکه تو ff هم کار کنه باید "px" رو بزارید.
و در آخر توی این خط '' ها فراموش شده بود :

window.setTimeout('incHeight('+elementID+')', 100);
تبدیل کردم به:

setTimeout("incHeight('"+elementID+"')", 100);

اون self رو هم اگه بجاش document بذارم اجرا نمیشه بازم نمی دونم چرا!:متفکر:چون تابع setTimeout برای window هست نه document.
موفق باشید.