تغییر در جلوه قسمت سرچ

[shayan 116]

سلام

من میخوام قسمت سرچ سایتم که به صورت استاندارد نمایش داده میشه

تغییر کنه به فقط یک دکمه ذره بین و بعد از کلیک کردن روی آن به آرامی قسمت فیلد متنش باز بشه

همین

ممنون

یاعلی

ویرایش شده آذر 92 توسط shayan

[Parsa 23463]

با jquery animate

http://viralpatel.net/blogs/understanding-jquery-animate-function/

http://css-tricks.com/snippets/jquery/animate-heightwidth-to-auto/

[shayan 116]

یعنی اول اینو بزارم بین تگ هد

<SCRIPT type="text/javascript"
	    src="http://code.jquery.com/jquery-latest.js"></SCRIPT>

ولی نمیدونم این باید کجا گذاشته بشه؟

$("#animate").click(function() {
    $("#content").animate(
		    {"width": "350px"},
		    "fast");
});

فقط همینه ؟

کار دیگه ای نیاز نیست؟

[Morteza 34190]

تکه دوم هم بره توی تگ هدبین تگ script

[imanfakhar 26231]

نکته:

اگر از سرچ فرم پیش فرض وردپرس استفاده می کنید

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

به عنوان مثال:

<form method="get" class="searchform" action="<?php bloginfo('url'); ?>/">
<input name="s" id="searchContent" type="search" value="<?php the_search_query();?>">
<input type="button" value="" id="animateButton">
<input type="hidden" value="submit">
</form>

و تصویر ذره بین را هم باید با استایل به کد فرم اضافه کنید مثل

#animateButton {
border-style:none;
background:transparent url("images/find.png") no-repeat scroll center center;
width:32px;
height:32px;
}

و کد جی کوئریتون هم به این ترتیب می شه

<script type="text/javascript">
<!--
$(document).ready(function() {
$("#searchContent").css("width","32px");
$("#animateButton").click(function() {
	 $("#searchContent").animate(
					 {"width": "350px"},
					 "fast");
});
$("#searchContent").blur(function() {
	 $(this).animate(
					 {"width": "32px"},
					 "fast");
});
})
//-->
</script>

[shayan 116]

این قالب آماده بوده و من نمیدونم که از پیشفرض وردپرس استفاده کرده یا خیر

این محتویات فایل searchform.php قالب منه:

<form method="get" action="<?php echo home_url(); ?>">
<input type="submit" class="sb" value="<?php _e('Search', 'theme'); ?>" />
<input type="text" class="sf" value="<?php _e('Search here ...', 'theme'); ?>" name="s" onfocus="if(this.value == '<?php _e('Search here ...', 'theme'); ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php _e('Search here ...', 'theme'); ?>';}" />
</form>

اینم آدرس آنلاین : http://yaranenamaz.com

این کد جی کوئری کجا یاید پیست بشه؟

[imanfakhar 26231]

این قالب آماده بوده و من نمیدونم که از پیشفرض وردپرس استفاده کرده یا خیر

این محتویات فایل searchform.php قالب منه:

<form method="get" action="<?php echo home_url(); ?>">
<input type="submit" class="sb" value="<?php _e('Search', 'theme'); ?>" />
<input type="text" class="sf" value="<?php _e('Search here ...', 'theme'); ?>" name="s" onfocus="if(this.value == '<?php _e('Search here ...', 'theme'); ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php _e('Search here ...', 'theme'); ?>';}" />
</form>

اینم آدرس آنلاین : http://yaranenamaz.com

کدهای فرمی که گذاشتم را جایگزین همین کدها کنید

این کد جی کوئری کجا یاید پیست بشه؟

تکه دوم هم بره توی تگ هدبین تگ script

[shayan 116]

استاد من میخوام دقیقا همین شکل و شمایل براش باقی بمونه

با این کارا استایلش عوض میشه

دکمه سرچ کار نمیکنه

نتیجه سرچ هم پیشنهاداتی دراه که با انجام این کار نمایش داده نمیشه !

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

و وقتی تو فضای آزاد کلیک میشه بسته بشه

ممنون

[imanfakhar 26231]

ذره بین الان کجاست؟

اگر داخل فیلد نوشتنه فقط این کد را در header.php بگذارید

<script type="text/javascript">
<!--
$(document).ready(function() {
$("form input.sf").css("width","32px");
$("form input.sf").focus(function() {
		 $(this).animate(
										 {"width": "350px"},
										 "fast");
});
$("form input.sf").blur(function() {
		 $(this).animate(
										 {"width": "32px"},
										 "fast");
});
})
//-->
</script>

اگر در لایه ی دیگه ایه در این کد بجای XXX کلاسش را بگذارید

<script type="text/javascript">
<!--
$(document).ready(function() {
$("form input.sf").css("width","32px");
$(".XXX").click(function() {
		 $("form input.sf").animate(
										 {"width": "350px"},
										 "fast");
});
$("form input.sf").blur(function() {
		 $(this).animate(
										 {"width": "32px"},
										 "fast");
});
})
//-->
</script>

و قبل از این کدها هم

<SCRIPT type="text/javascript"
			 src="http://code.jquery.com/jquery-latest.js"></SCRIPT>

مابقی کدها را کاری نداشته باشید

در کدهای بالا 32 اندازه ی فیلد در حالت عادی و 350 اندازه بزرگ شده اش است که می توانید به مقدار دلخواه تغییر دهید

[shayan 116]

بسیار عالییی ممنون

فقط دو مشکل:

1-اینکه وقتی روی ذره بین کلیک میشه سرچ رو انجام میده ! من میخوام با کلیک اول فیلد باز بشه و با کلیک دوم بره برای سرچ

2-با کلیک بر قسمت فیلد هم این اتفاق بیوفته

ممنون

http://yaranenamaz.com

ویرایش شده آذر 92 توسط shayan

[imanfakhar 26231]

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

برای کلیک داخل فیلد هم جواب قبلی را بخونید