neginalmasi

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

11 پست در این موضوع قرار دارد

با سلام

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

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

0

به اشتراک گذاری این پست


لینک به پست

سلام

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

1

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

به اشتراک گذاری این پست


لینک به پست

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

1

به اشتراک گذاری این پست


لینک به پست

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

0

به اشتراک گذاری این پست


لینک به پست

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

1

به اشتراک گذاری این پست


لینک به پست

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

0

به اشتراک گذاری این پست


لینک به پست

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

به اشتراک گذاری این پست


لینک به پست

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

1

به اشتراک گذاری این پست


لینک به پست

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

2

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری