مشکل فوتر متحرک

[neginalmasi 16]

با سلام

من قبلا تو این تاپیک در مورد هدر متحرک سوال کردم و جواب گرفتم و فوتر متحرک رو نیز مثل هدر درست کردم

http://forum.wp-pars...ری/#entry137488

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

فکر کنم مشکل مربوط به ارتفاع سایت باشه که کم یا زیادش کنم ؟

اینم کد های من :

جی کوئری هاش:

<script type="text/javascript">
								 var $k = jQuery.noConflict();
							    $k(document).ready(function(){

								  var $kcontent = $k(".footer_center").hide();
								  $k(".footertoggle").on("click", function(e){
							    $k(this).toggleClass("expanded2");
							    $kcontent.slideToggle(800);
										  });
							    });
							    </script>

کد اصلیش :

<div id="footer">

		 <div class="footer_holder">
			    <span class="footerEcBtn">
						 <a href="#" class="footertoggle">مواردبیشتر</a>
				  </span>
			    <div class="bottom_footer">
					    <span>
					    Copyright © 2014
					    </span>
			    </div>
	    </div><!--footer_holder-->
	    <div class="clear"></div>
	    <div class="footer_lin" style="margin-top:0px;">
	    <div class="footer_center" style="position:relative;">

	    </div>
	    </div>
</div><!--footer-->

[SM-Mahdavi 5428]

سلام

به footer ویژگی float دادین یا نه؟ آدرس آنلاین بزارید بهتر میشه بررسی کرد.

[neginalmasi 16]

دارم تو لوکال کار می کنم نه float ندادم

اینم کدهای css :

 #footer

{

font-size: 11px;

color: #FFF;

background: url(images/footer-background.png) #09397C;

height:auto;

position: relative;

z-index:55;

}

.footerEcBtn

{

position:absolute;

display:block;

width:199px;

height:41px;

background:url(images/footerbtn2.png) no-repeat 0 0;

left:0;

top:-38px;

}

.footer_holder

{

width:980px;

position:relative;

margin:0 auto;

height:40px;

}

.footertoggle{

color:#FFF;

font:normal 11px Tahoma, Arial, Calibri;

background:url(images/footerarrow1.png) no-repeat 100% 5px;

padding-right:15px;

display:inline-block;

margin:20px 0 0 70px;

text-decoration:none;

}

.footertoggle.expanded2{

color:#fff;

font:normal 11px Tahoma, Arial, Calibri;

background:url(images/footerarrow2.png) no-repeat 100% 5px;

padding-right:15px;

display:inline-block;

margin:20px 0 0 70px;

text-decoration:none;

}

.bottom_footer

{

border-top:1px solid #19508a;

padding-top:13px;

padding-left:60px;

}

.bottom_footer span

{

display:block;

height:20px;

float:left;

background:url(images/footerlogo.png) no-repeat 100% 3px;

padding-right:40px;

color:#a3aabb;

font:normal 13px Tahoma, Geneva, sans-serif;

}

#footer .footer_center

{

width:980px;

margin:0 auto;

height:300px;

position:relative;

z-index:55;

}

.footer_lin

{

width: 980px;

margin:0 auto;

position:relative;

margin-top:-300px;

}

ویرایش شده فروردین 93 توسط Morteza

[SM-Mahdavi 5428]

float بدید احتمال زیاد مشکلتون حل میشه. سعی کنید باکس هایی که زیر هم قرار میدید همگی float داشته باشند تا این مشکل پیش نیاد.

[neginalmasi 16]

به نظرتون مشکل از تنظیمات ارتفاع سایت نیست؟

[SM-Mahdavi 5428]

main اصلی سایت شما اگه height برابر auto داره یه overflow:hidden بدید و تست کنید.

[neginalmasi 16]

این کد که کلا اسکرول سایت رو غیرفعال می کنه که باعث میشه نصف سایتم دیده نشه من فکر می کنم برای تنظیمات ارتفاع سایتم باید جی کوئری بنویسم فقط نمی دونم چجوری؟

[neginalmasi 16]

من کدش رو پیدا کردم ولی نمی دونم تو کجای کدش اشکال داره که وقتی رو اون button کلیک می کنم سایت می پره ولی فوتر مخفی و نمایش داده می شه همون کاری رو که می خوام انجام میده ولی سایت می پره و خوشایند نیست .

اینم از کد جی کوئریش :

<script type="text/javascript">

var $k = jQuery.noConflict();

$k(document).ready(function(){

var $kcontent = $k(".footer_center").hide();

$k(".footertoggle").on("click", function(e){

$k(this).toggleClass("expanded2");

$kcontent.slideToggle(800);

var docHeight = $k(window).height();

var footerHeight = $k('.footer_center').height();

var footerTop = $k('.footer_center').position().top + footerHeight;

if (footerTop < docHeight) {

$k('.footer_center').css('height',(docHeight - footerTop) + 'px');

$k('body,html').animate({scrollTop: $k(document).height()},600);

}

});

});

</script>

اینم از کد html :

<div id="footer" style="height: auto;">

<div class="footer_holder">

<span class="footerEcBtn">

<a href="#" class="footertoggle">مواردبیشتر</a>

</span>

<div class="bottom_footer">

<span>

Copyright © 2014

</span>

</div>

</div><!--footer_holder-->

<div class="clear"></div>

<div class="footer_lin" style="margin-top:0px;">

<div class="footer_center" style="position:relative;">

</div>

</div>

</div><!--footer-->

ویرایش شده فروردین 93 توسط Morteza

[Morteza 34190]

آدرس سایت رو بدید

[neginalmasi 16]

این سایت هنوز تو لوکاله ولی من کمی کد جی کوئریش رو تغییر دادم تقریبا درست شده

<script type="text/javascript">

var $k = jQuery.noConflict();

$k(document).ready(function(){

var $kcontent = $k(".footer_center").hide();

$k(".footertoggle").on("click", function(e){

$k(this).toggleClass("expanded2");

$kcontent.slideToggle(500);

var docHeight = $k(window).height();

var footerHeight = $k('.footer_center').height();

var footerTop = $k('.footer_center').position().top ;

if (footerTop < docHeight) {

$k('.footer_center').css('height',(docHeight - footerTop) + 'px');

$k('body,html').animate({scrollTop: $k(document).height()},800);

}

});

});

</script>

[Saeed Fard 4740]

تو سایت‌هایی نظیر http://codepen.io/pen/ کدهارو اجرا کنید و لینک آنلاین بدید تا بشه بررسی کرد