jQuery messing with Slide Show and other CSS

Question

I'm using Cargo Collective to host http://cargocollective.com/amytdatta/biography

I have this bit of jQuery in place to implement a simple true/false game at the bottom of the biography page.

<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();
    });

The problem is this code seems to prevent the slideshow from displaying correctly (also on the bio page). The thumbnails for the 3 images do not display correctly and clicking the image of the prev/next buttons takes me back to the Cargo homepage.

Here is the slide show 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;
}

The jQuery also seems to override some CSS.

For instance my top navigation bar is no longer fixed in place like it should be.

#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;
}

Also the gap between the top nav bar and the page Title appears to increase when the jQuery is enabled.

Here is the CSS for my content container, individual content entries and titles

#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;
}

Any advice on resolving this would be much appreciated.

Cheers!

have you checked your error console? you have errors. don't know if they're related, but they are errors nonetheless. — drewfrisk, Oct 24 '12 at 04:25
I haven't actually! I'm sorry but how do I check them? Complete CSS n00b here. — Jiver, Oct 24 '12 at 05:32
The errors I saw were actually javascript, but this is a tidbit still useful to know about if you don't already. Depending on the browser you use, the control is a little different. [this post is a year old](http://stackoverflow.com/a/1648614/1252744), but it should still be relevant. — drewfrisk, Oct 24 '12 at 19:41

score 0 · Accepted Answer · answered Oct 24 '12 at 04:27

declare your jquery file to top of other file

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

jQuery messing with Slide Show and other CSS

1 Answers1