Animated Scroll Up and Down

phpBB 3.0.x sürümleri için uygun olan hazır ya da küçük kod parçalarını bu forumda paylaşabilirsiniz.
Forum kuralları
- Yeni bir başlık açarken lütfen konu başlığına "Acil yardım", "Acele yardım" tarzlarında içerisinde "yardım" kelimesi geçen cümleler yazmayınız. Bu tip başlıklara kesinlikle cevap verilmeyecektir. Lütfen konu başlığına içeriği en iyi özetleyen anlaşılabilir bir cümle yazınız.

- Ayrıca yeni başlıklarınızı kesinlikle ilgili forumlara açınız. Örneğin, phpBB3 kurulum ve çalıştırması hakkında bir sorununuz varsa "3.0.x Destek Forumu" forumuna başlık açınız; phpBB3 temasından kaynaklı bir sorunuz varsa "3.0.x Stil/Tema Geliştirme & Tartışma & Yardım" forumuna başlık açınız; phpBB3 mod/eklentileriyle ilgili sorununuz varsa "3.0.x MOD Destek" forumuna başlık açınız. Bu kurala uymayan kullanıcıların başlıkları silinebilir ve kullanıcı uyarı alabilir ya da süresiz uzaklaştırılabilir.

- Site kurallarımızı okumadan kesinlikle forumlarımıza herhangi bir katılım yapmayınız.
Kilitli
Rhaumel
Kayıtlı Kullanıcı
Mesajlar: 163
Kayıt: 27.10.2010, 17:36
İletişim:

Animated Scroll Up and Down

Mesaj gönderen Rhaumel »

Forum sayfalarına yukarı ve aşağı butonları ekleme.

Alıntı yapılan forum:
http://allround-phpbb.de/viewtopic.php?f=17&t=127

Önizleme:

Kod: Tümünü seç

1- http://www.aussie-jack.de/
2- http://www.magastart.com/index.html
Aç:

Kod: Tümünü seç

styles/prosilver/template/overall_header.html 
Bul:

Kod: Tümünü seç

<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/forum_fn.js"></script>
Sonrasına ekle:

Kod: Tümünü seç

    <script type="text/javascript" src="{ROOT_PATH}jquery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="{ROOT_PATH}jquery/scroll-startstop.events.jquery.js"></script>
Bul:

Kod: Tümünü seç

<div id="wrap">
Sonrasına ekle:

Kod: Tümünü seç

    <div title="Top" id="nav_up" class="nav_up" style="opacity: 1;"></div>
    <div title="Down" id="nav_down" class="nav_down" style="opacity: 1;"></div>
    <script type="text/javascript">
    $(function() {
    // the element inside of which we want to scroll
    var $elem = $('#wrap');
    // show the buttons
    $('#nav_up').fadeIn('slow');
    $('#nav_down').fadeIn('slow');
    // whenever we scroll fade out both buttons
    $(window).bind('scrollstart', function(){
    $('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
    });
    // ... and whenever we stop scrolling fade in both buttons
    $(window).bind('scrollstop', function(){
    $('#nav_up,#nav_down').stop().animate({'opacity':'1'});
    });
    // clicking the "down" button will make the page scroll to the $elem's height
    $('#nav_down').click(
    function (e) {
    $('html, body').animate({scrollTop: $elem.height()}, 800);
    }
    );
    // clicking the "up" button will make the page scroll to the top of the page
    $('#nav_up').click(
    function (e) {
    $('html, body').animate({scrollTop: '0px'}, 800);
    }
    );
    });
    </script>
Aç: styles/prosilver/theme/common.css

Sona ekle:

Kod: Tümünü seç

    .nav_up{
         padding:0px;
         background-color: white;
         border:1px solid #0076B1;
         position:fixed;
         background:transparent url("{T_THEME_PATH}/images/arrow_up.png") no-repeat top left;
         background-position:50% 50%;
         width:24px;
         height:24px;
         bottom:435px;
         opacity:0.7;
         right:10px;
         white-space:nowrap;
         cursor: pointer;
         -moz-border-radius: 3px 3px 3px 3px;
             -webkit-border-radius: 3px 3px 3px 3px;
         filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
     }
     .nav_down{
         padding:0px;
         background-color: white;
         border:1px solid #0076B1;
         position:fixed;
         background:transparent url("{T_THEME_PATH}/images/arrow_down.png") no-repeat top left;
         background-position:50% 50%;
         width:24px;
         height:24px;
         bottom:400px;
         opacity:0.7;
         right:10px;
         white-space:nowrap;
         cursor: pointer;
         -moz-border-radius: 3px 3px 3px 3px;
             -webkit-border-radius: 3px 3px 3px 3px;
         filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    } 
root içerisine ve tema sayfasına eklenecek js. ve image dosyları:
animated_scroll_up_down.zip
(34.73 KiB) 146 kere indirildi
Not: İnternet explorer ve firefox da farklılık gösterebiliyor programların sürümüne ve özelliğine göre.Örneğin ie9 da hover özelliği çalışırken kendi makinamda firefoxda çalışmıyor.Bu kodlardan değil tarayıcıların özelliklerinden kaynaklanmakta.Hem kodun yayınlandığı yukarıda ki link den, demo olarak sunulan altında ki 2 linkdende kontrol edebilirsiniz.
Kilitli

“3.0.x Kod Parçaları” sayfasına dön

Kimler çevrimiçi

Bu forumu görüntüleyen kullanıcılar: Hiç bir kayıtlı kullanıcı yok ve 2 misafir