0

http://cargocollective.com/amytdatta/biographyをホストするために Cargo Collective を使用しています

私はこのちょっとした jQuery を用意して、簡単な true/false ゲームをバイオグラフィー ページの下部に実装しています。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('document').ready(function(){
    $(".showtrue").click(function() { 
        $('.false').css('color','#f5f5f5');
        return false;        
    });

    $(".showfalse").click(function() { 
        $('.false').css('color', '#666666');
        return false;        
    });
});


    $("a").click(function (e) {
        e.preventDefault();
    });

問題は、このコードがスライドショーが正しく表示されないように見えることです (バイオページでも)。3 つの画像のサムネイルが正しく表示されず、前/次のボタンの画像をクリックすると Cargo のホームページに戻ります。

スライド ショーの CSS は次のとおりです。

/* 
* Slideshows
*/

.slideshow_nav {
color: #999999;
font-size: 11px;
padding-bottom: 10px;
}

.slideshow_nav a {
color: #666666;  
text-decoration: none;  
}

.slideshow_nav a:hover {
background: none !important;
color: #999999;
text-decoration: none;
}

.slideshow_nav a:active {
color: #ff3300;
}

.slideshow_count {
color: #999999;
font-size: 11px;
}

.slideshow_wrapper {
clear: both;
margin: 0 15px 15px 0;
}

#slideshow_container img {
margin: 0;
}

.slideshow_wrapper a, 
.slideshow_wrapper a:hover, 
.slideshow_wrapper a:active {
background: none !important;
}

.slideshow_thumbs {
margin: 7px 0 7px -3px;
}

ul.slideshow_thumbs {
margin: 0;
padding: 0;
}    

.slideshow_thumb {
float: left;
list-style: none;
margin: 0 0 0 -3px;
padding: 0 7px 10px 0;
}

.slideshow_thumb a {
background: none;
border: 1px solid transparent;
display: block;
padding: 2px;
}

.slideshow_thumb a:hover {
background:none;
border: 1px solid #cccccc;
}

a.activeSlide {
background:none;
border: 1px solid #cccccc;
}

.slideshow_thumb a:active, 
a.activeSlide:active {
background: transparent;
border: 1px solid #666666;
}

.slideshow_thumb img {
border: 0;
display: block;
margin: 0;
height: 60px;
}

.slideshow_caption {
clear: both;
display: block;
font-size: 11px;
padding: 5px 0 5px 0;
}

jQuery は一部の CSS をオーバーライドしているようにも見えます。

たとえば、トップ ナビゲーション バーが所定の位置に固定されなくなりました。

#nav_wrapper {
background: #f5f5f5;
height: 50px;
position: fixed;
left: 0; right: 0; top: 0;
z-index: 999;
}

.feed_nav {
border-bottom: 2px solid #cccccc;
border-bottom: 2px solid rgba(0,0,0,0.20);
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
height: 50px;
line-height: 50px;
margin: 0 auto 0 auto;
padding: 0 35px 0 35px;
position: relative;
width: 905px;
z-index: 999;
}

.feed_nav br {
display: none !important;
}

.feed_nav div {
float: left;
}


.page_nav {
background: f5f5f5;
max-width: ;
overflow: hidden;
}

また、jQuery を有効にすると、トップ ナビゲーション バーとページ タイトルの間のギャップが大きくなるように見えます。

コンテンツ コンテナ、個々のコンテンツ エントリ、およびタイトルの CSS は次のとおりです。

#content_container {
clear: both;
margin: 50px auto 25px auto;
position: relative;
width: 975px;
z-index: 10;
border-bottom: 1px dotted #cccccc;

}

.entry {
background: #f5f5f5;
border-bottom: 0 solid #cccccc;
clear: both;
padding: 35px 35px 50px 35px;
margin: 0 0 0 0;
width: 905px;
}

.project_title {
font-family: Helvetica, Arial, sans-serif;
font-size: 32px;
line-height: 50px;
padding: 0 0 36px 0;
text-rendering: optimizeLegibility;
width: 560px;
}

これを解決するためのアドバイスをいただければ幸いです。

乾杯！

4

1 に答える 1

0

jqueryファイルを他のファイルの先頭に宣言します

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript' src='/_js/cargo.jquery.package.js?12.09.14'></script>
<script type='text/javascript' src='/_js/cargo.site.package.js?12.09.14'></script>
<script type='text/javascript' src='/_js/cargo.tools.package.js?12.09.14'></script>
...............
于 2012-10-24T04:27:38.310 に答える