نمایش فرم جستجو بعد از کلیک بر روی یک آیتم [بایگانی]

abbas3zaar

چهارشنبه 22 اردیبهشت 1395, 13:52 عصر

سلام. من یه منو دارم به شکل زیر:

http://www.8pic.ir/images/n5v056t9a9gwzw716jbp.jpg

تا این بالا که میبینید درست کردم و دکمه قرمزه رو خودم گذاشتم
حالا میخوام وقتی کاربر روی دکمه قرمزه کلیک کرد منوی سایت بشه مثل این شکل زیر و بشه تایپ کرد درش:

http://www.8pic.ir/images/szk70dst5cqrd5cjwoxq.jpg

برای ساختش فکر میکنم به div با کلاس display none میسازیم وبرای اینکه ثابت باشه z-index بهش میدیم تا بیاد بالای منو ها و وقتی روی دکمه کلیک شه نمایش داده بشه ولی کدنویسیشو نمیدونم
اگه راهنمایی کنید ممنون میشم

ravand

پنج شنبه 23 اردیبهشت 1395, 08:23 صبح

از جی کوئری استفاده کن:

$(document).ready(function() {
$('.fa-search').click(function() {
$(".makhfi").animate({ width: 'toggle' },1100);
});
});

abbas3zaar

پنج شنبه 23 اردیبهشت 1395, 14:02 عصر

این کد منوی منه که خروجیش میشه مثل عکس پست اول (اولین عکس). قالبم وردپرس هست.
مشکلی که دارم الان وقتی روی اون آیکون قرمز جستجو کلیک میکنم صفحه submit میشه اینو چجوری میشه برداشت تا سابمیت نشه؟

<nav id="mainnav" class="sixteen columns clearfix mb30">
<?php g7_menu('mainmenu'); ?>
<form method="get" id="searchf" action="<?php echo esc_url(home_url('/')); ?>">
<input type="image" src="<?php echo PARENT_URL; ?>/images/search-16a.png" alt="Go" id="searchbtn">
<input type="text" name="s" id="cari" class="searchtextinput">
</form>
</nav>

اینم کدی که شما دادی رو با class و id قالبم ست کردم:

$(document).ready(function() {
$('#searchbtn').click(function() {
$(".searchtextinput").animate({ width: 'toggle' },1100);
});
});

ravand

پنج شنبه 23 اردیبهشت 1395, 15:08 عصر

شما از button به جای submit استفاده کن. بعد میتونی از ایجکس برای ارسال استفاده کنی.

abbas3zaar

پنج شنبه 23 اردیبهشت 1395, 19:12 عصر

شما از button به جای submit استفاده کن. بعد میتونی از ایجکس برای ارسال استفاده کنی.

ممنون. اون input اولی رو به img تغییر دادم درست شد. الان toggle میشه و مشکلی ندارم

وقتی کلیک میکنم بدون افکت ظاهر میشه input جستجو.
این دمو رو ببینید

http://jsfiddle.net/hcmLw/5397/

میخوام وقتی کلیک کردم مثل افکت right ظاهر بشه. من هرچقدر این کدهای دمو رو بررسی کردم و توی کدهام گذاشتم نشد. نمیدونم شاید از css هام باشه! یا شاید نتونستم

ravand

پنج شنبه 23 اردیبهشت 1395, 19:24 عصر

من کد شما رو تست کردم مشکلی نداشت.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#searchbtn').click(function() {
$(".searchtextinput").animate({ width: 'toggle' },1100);
});
});
</script>
</head>
<body>
<nav id="mainnav" class="sixteen columns clearfix mb30">
<form method="get" id="searchf">
<input type="button" value="دکمه" id="searchbtn">
<input type="text" name="s" id="cari" class="searchtextinput">
</form>
</nav>
</body>
</html>

به جای دکمه همون عکستون رو میتونید بذارید. فکر میکنم مشکل شما سرعتش هست. 1100 رو کمتر کنید.

abbas3zaar

پنج شنبه 23 اردیبهشت 1395, 19:45 عصر

من کد شما رو تست کردم مشکلی نداشت.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#searchbtn').click(function() {
$(".searchtextinput").animate({ width: 'toggle' },1100);
});
});
</script>
</head>
<body>
<nav id="mainnav" class="sixteen columns clearfix mb30">
<form method="get" id="searchf">
<input type="button" value="دکمه" id="searchbtn">
<input type="text" name="s" id="cari" class="searchtextinput">
</form>
</nav>
</body>
</html>

به جای دکمه همون عکستون رو میتونید بذارید. فکر میکنم مشکل شما سرعتش هست. 1100 رو کمتر کنید.

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

دو جا آپلود کردم:

دانلود از پرشین اسکریپت (لینک مستقیم) (http://up.persianscript.ir/uploads2/db8f-abbas9500.zip)

دانلود از پیکوفایل (http://s7.picofile.com/file/8251110968/abbas9500.zip.html)

abbas3zaar

جمعه 24 اردیبهشت 1395, 00:00 صبح

اینم بدون زیپ

http://s6.picofile.com/file/8251139350/abbas9500.mp4.html

ravand

جمعه 24 اردیبهشت 1395, 08:40 صبح

اونقدر کیفیت فیلمتون پایین بود که من نتونستم درست ببینم.
همینطوری که قبلا هم بهتون گفتم این 1100 رو باید تغییر بدید که سرعت تغییر کنه. این الان سرعتش زیاد بود.فکرم نمیکنم غیر از این مشکل دگه ای داشته باشه.مگر اینکه یه لایه هم خودتون روش قرار دادید که با کلیک اون لایه هم عوض میشه و خودتون حواستون نیست.
بهتر بود اون کدی که برای برنامه نوشتید رو از کل قالب جدا کنید و یه جا تست کنید.
هر وقت دگه خواستید فیلم بگیرید با Screen Recorder فیلم بگیرید کیفیتش و حجمش خوبه.
شرمنده که بیشتر از این نتونستم کمکی بکنم.

abbas3zaar

جمعه 24 اردیبهشت 1395, 15:13 عصر

اونقدر کیفیت فیلمتون پایین بود که من نتونستم درست ببینم.
همینطوری که قبلا هم بهتون گفتم این 1100 رو باید تغییر بدید که سرعت تغییر کنه. این الان سرعتش زیاد بود.فکرم نمیکنم غیر از این مشکل دگه ای داشته باشه.مگر اینکه یه لایه هم خودتون روش قرار دادید که با کلیک اون لایه هم عوض میشه و خودتون حواستون نیست.
بهتر بود اون کدی که برای برنامه نوشتید رو از کل قالب جدا کنید و یه جا تست کنید.
هر وقت دگه خواستید فیلم بگیرید با Screen Recorder فیلم بگیرید کیفیتش و حجمش خوبه.
شرمنده که بیشتر از این نتونستم کمکی بکنم.

کیفیت فیلم پایین بود!!!!!! ؟
در حد تیم ملی کیفیت داره با حجم 14 مگابایت!

فیلم رو پلی کردم و اسکرین شات از دسکتاپ گذاشتم ببینید (عکس رو تمام صفحه ببینید)

http://8pic.ir/images/hj97alsmjju3sdnb2e87.jpg

http://8pic.ir/images/hzzzlln2k4c6sujrxkmx.jpg