رفتن به مطلب

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


پست های پیشنهاد شده

با سلام

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

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-->

لینک به ارسال

سلام

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

لینک به ارسال

دارم تو لوکال کار می کنم نه 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;

}

ویرایش شده توسط Morteza
لینک به ارسال

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

لینک به ارسال

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

لینک به ارسال

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

لینک به ارسال
  • 3 هفته بعد...

من کدش رو پیدا کردم ولی نمی دونم تو کجای کدش اشکال داره که وقتی رو اون 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-->

ویرایش شده توسط Morteza
لینک به ارسال

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

<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>

لینک به ارسال

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

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...