4

失敗ログ

-- もう 1 つのアップデート(2012 年 4 月 30 日、午後 3 時 23 分)を心待ちにしている方のために、以下をご覧ください。

メイン コンテナに min-height を追加することで問題を解決できました。コンテンツごとに調整する必要があるため、これは悪い修正であり、私は嫌いです。しかし、これは私がこれまでに集めた唯一の解決策です。

最後のヒント？...

失敗の更新。2012 年 4 月 24 日午後 4 時 35 分 EST // WildPeaks は、以下のコメントで問題を特定しました。

スライダーが切り替わるときの高さの定義を維持する必要があります。指示されたSO参照の質問ですべての提案を何度も試みましたが、構文を取得できないようです。私も別の FX を試しました - HELP !!

<script type="text/javascript">

jQuery(document).ready(function($){
    $("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 6000);
});

</script>

------以下の元の質問:

順序付けられていないリスト内にいくつかの基本的な HTML / CSS リンクをコーディングしました。奇妙な理由で、ホバーすると、一部のリンクで、ページがジャンプして上にスクロールします。ユーザーが「#」をクリックしたかのように。しかし、これはホバー時に発生しますか?

ここに私の完全 footer.php なものがあります（これはWordpress Webサイト内にあります）

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
?>

        <div id="endPage">
            <div id="contactus">

                <br /><br />
                <p>Suggestions? Requests? Feedback? Are you talking about our books?<br />
                Send us links to your book reviews and contact us on <a href="http://twitter.com/readitforward">Twitter</a> or <a href="http://www.facebook.com/ReadItForward">Facebook</a> or email us at <a href="mailto:readitforward@randomhouse.com">readitforward@randomhouse.com</a>.
                </p>                
                </div>

<?php //<!-- =-=-=-=-=-=-=-=-=-=BEGIN RH FOOTER-==-=-=-=-=-=-=-=-= --> ?>




    <div id="footer" style="margin-top: 30px;">

    <div style="float:left;"><img src="http://www.osmproduction.com/RIF/wp-content/uploads/2012/04/RIF-Footerlogo.jpg" style="border:0px;" /></div><br />

    <div style="position: absolute; margin-right: -150px; width: 350px; height: 250px; margin-top: 50px; padding-bottom: 15px;">
    <ul id="feetnav" style="list-style: none; padding-left: 5px;">

    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=9">Free Books</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">Reader Reviews</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=7">Meet the author</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=4">Meet Editor</li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=5">Book Groups</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">Favorites</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/">All Categories</a></li>

    </ul>
    </div>

    <div id="searchfoot" style="margin-left: 550px; margin-top: 75px;">

    <?php get_search_form(); ?>


    </div>

    <br />

    <hr style="color: #fff; border: 1px solid white; height: 1px;" /></hr><br />


    <div id="footer_categories">


    <div style="">

    <ul id="feetnav2" style="list-style: none; padding-left: 5px;">

    <li style="float:left; font-color: #000;"><a href="http://www.osmproduction.com/RIF/?cat=9">The Crown Publishing Group</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">Books</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=7">Authors</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=4">Communites</li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=5">Features</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">Readers Guide</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/">Feature Sites</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">News</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/">Read It Forward</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">CrafterNews</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/">The Recipe Club</a></li>
    <li class="footlink" style="float:left;"><a href="http://www.osmproduction.com/RIF/?cat=10">Books for Better Living</a></li>
    </ul>

    <p class="copyright">Use of this site indicates your consent to the Terms of Use. Copyright &copy; 1995-2012 Random House, Inc. All rights reserved.</p>            
    </div>        
    </div>

</div>
</div>
</div>

<?php
function homepagename() {
    $homepagename = "";
    if(strlen($_SERVER['REQUEST_URI']) < 2) {
        $homepagename = "Read It Forward Homepage";
    }
    print $homepagename;
}
?>

以下の CSS スニペットも試してみました(あまり意味がありませんが、試してみる価値はあると思います)。

.footlink li:hover { 

margin: 0px;

}

ライブ URL [ http://tinyurl.com/cz6sawg ] (いくつかの下部フッター リンクにカーソルを合わせます)

私のスライダーが原因である可能性がありますか？これを引き起こすはずのコードが見つからないようです。スライダーコード:

<!-- Top of Page Slider -->


<div id="photo-rotator">
<?php $slide_id=1; ?>
<?php
 $featuredPosts = new WP_Query();
 $featuredPosts->query("showposts=4");
 while ($featuredPosts->have_posts()) : $featuredPosts->the_post();
 ?>


    <div id="slide-<?php echo $slide_id; $slide_id++;?>">
     <a href="<?php the_permalink() ?>" class="post-image">
         <?php the_post_thumbnail( 'rotator-post-image' ); ?>
         <span class="title"><?php the_title(); ?></span>
     </a>
     </div>

    <?php endwhile; ?><!--/close loop-->

    <ul id="slide-nav">
        <?php $nav_id=1; ?>
        <?php while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
            <li>
                <a href="#slide-<?php echo $nav_id; ?>">
                    <span class="thumbnail" style="display:none;">
                    </span>
                    <? the_title(); $nav_id++;?>

                    <div style="">

                    <!--<?php the_excerpt(); ?>-->

                    <?php if($text= get_post_meta($post->ID, "slidetext", true)) { ?>
                         <div class="">

                         <p style="font-weight: normal; font-size: 14px;"><?php echo $text; ?></p> 

                         </div>
                        <?php } //else { print"<div>"; } ?>  

                    </div>   

                </a>
            </li>
        <?php endwhile; ?><!--/close loop-->
        </ul>
        </div>

<!-- End Top page Slider -->

スライダーを開始するJSは次のとおりです。

<script type="text/javascript">
jQuery(document).ready(function($){
    $("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 6000);
});

</script>

(また、何らかの形で JS が相互作用している場合に備えて、マークアップと CSS 内で UL / LI を抜き出そうとしました。) :(

4

1 に答える 1

1

ほとんどの場合、ジャンプはブラウザが「#」リンクをたどったことが原因ではありません。ページがジャンプするのは、アニメーションの 2 つのタブ ペイン間の中間点で、両方のタブ ペインが完全に透明で非表示になっているため (display: none のように)、タブ セクション全体の有効な高さが瞬間的にゼロになるためです。

また、高さゼロのタブ付きセクションによってページが短くなる場合、実際には (一時的に) 短いコンテンツに合わせてサイズを変更しているだけなのに、それを補うためにページが跳ね上がっているように見えます。理にかなっていますか？

これは @wildpeaks が以前に投稿した質問からのもので、何が問題なのかはわかっていると思います。完全にズームアウトすると、スライドショーが問題の原因であることがわかります。何が起こっているのかというと、スライドショーが変わると 0px になり、それによってページが短くなるのだと思います。「タブ ペイン」を画像スライドショーに置き換えるだけです。

彼が提供するコードはまったく機能しませんが、ここに投稿します。動作するようにカスタマイズできると思います：

jQuery('#photo-rotator').tabs({
        fx: { opacity: 'toggle' },
        select: function(event, ui) {
                jQuery(this).css('height', jQuery(this).height());
                jQuery(this).css('overflow', 'hidden');
        },
        show: function(event, ui) {
                jQuery(this).css('height', 'auto');
                jQuery(this).css('overflow', 'visible');
        }
});

お役に立てれば

于 2012-04-28T13:31:23.533 に答える