Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Gabriel Rodriguez
473 PointsThe Jquery Slideshow will not work
I'm building my first Responsive Web Design project, I added a simple slide show using jQuery on the front page. However, when I test the page, the show does not show up.
Prior taking the RWD approach, I started doing the project in regular html code and it did showed up. Here is the link to the previous design.
http://www.rodriguezstudios.com/updatedtest/
Here is the actual link, html, css code
rodriguezstudios.com/rsrwd
<div class="hero-unit">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="slideshow/images/cisco-access-point.jpg" alt="merakibanner">
<span class="left"><strong>100% Cloud Managed Networking</strong>Cloud services are becoming the norm due to its robust and affordable technology. Meraki delivers the top-notch services by cutting the cost of long term maintenance<br />
<p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p></span>
</li>
<li class="s3sliderImage">
<img src="slideshow/images/webdesign.jpg" alt="webbanner">
<span class="left"><h1>Professional Web Design & Development</h1>Rodriguez Studios would like to help your company or business to succed by presenting to your customers a professional looking website<br /><p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p></span>
</li>
<li class="s3sliderImage">
<img src="slideshow/images/facebook-reseller-cover-photo.jpg" alt="wifibanner">
<a href="#" class="btn btn-primary btn-large">Learn more »</a></p></span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div><!--end of slider unit-->
.hero-unit {
padding-top: 0px;
padding-right: 0px;
padding-bottom:0px;
padding-left:0px;
margin-bottom: 0px;
font-size: 18px;
font-weight: 200;
line-height: 30px;
color: inherit;
background-color: #eeeeee;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 6px;
}
.hero-unit h1 {
margin-bottom: 0;
font-size: 60px;
line-height: 1;
letter-spacing: -1px;
color: inherit;
}
.hero-unit li {
line-height: 30px;
}
#s3slider {
width: 836px; /* important to be same as image width */
height: 244px; /* important to be same as image height */
position: absolute; /* important */
overflow: hidden; /* important */
margin: 300px 0 0 206px;
left: 211px;
}
#s3sliderContent {
width: 836px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}
.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}
.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 12px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 836px;
background-color: #85a3b3;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
}
.left {
top: 0;
left: 0;
width: 180px !important;
height: 280px;
}
.clear {
clear: both;
}
.sliderImage span strong {
font-size: 14px;
}
Please help, thanks in advanced!
2 Answers
Nick Pettit
Treehouse TeacherIt looks like markdown messed up some of the formatting in Brian Story's answer, so I reformatted it here. Keep in mind that you'll need Bootstrap in order for this to work.
Check it out:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style type="text/css">
body{
padding-top: 60px;
}
</style>
</head>
<body>
<!-- Navbar fixed top example -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div nav-collapse collapse>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<!-- Dont use hero-unit for carousel -->
<div id="header-carousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x480" alt="My Content! DUH!">
<div class="carousel-caption">
<p>This may be a stupid caption</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="My Content! DUH!">
<div class="carousel-caption">
<p>This may be a stupid caption two</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="My Content! DUH!">
<div class="carousel-caption">
<p>This may be a stupid caption three</p>
</div>
</div>
</div>
<!-- End of carousel-inner -->
<!-- Start of Controls -->
<a class="carousel-control left" href="#header-carousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#header-carousel" data-slide="next">›</a>
</div>
<!-- end of carousel -->
</div>
<!-- Footer -->
<div class="container">
<footer>© Whoever 2013 </footer>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Gabriel Rodriguez
473 PointsHI Nick! Thanks for your response. Since this is my first bootstrap project, I would like to keep the look of my current design. To tell you the truth, I am literally confused. My concern is which bootstrap css and .js tags to use since I need to utilize the
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
I have alot on the current page so which ones should I use and which ones should I delete, thanks.
P.S. Thanks for your response, Brian.
Nick Pettit
Treehouse TeacherHi Gabriel,
In that case, you may want to take a look at Bootstrap 3 RC1. They have a pretty great Carousel built in. Here's the link to the documentation with example code: http://getbootstrap.com/javascript/#carousel
Do you think that will do what you're looking for?
Gabriel Rodriguez
473 PointsHi Nick,
This is my initial slide show when i first doing the project.
http://www.rodriguezstudios.com/updatedtest/
That link is from my first design.
Nick Pettit
Treehouse TeacherHi Gabriel,
I'm afraid I'm not sure what you want me to look at here.
Are you just trying to figure out which files to include if you want to use the Bootstrap carrousel?
Gabriel Rodriguez
473 PointsHi Nick,
the link on the previous post was my first design before I did the RWD using bootstrap. I actually want to use that slide show on the first design into my bootstrap project. I actually tried to do that but it's not working in the bootstrap design. So not sure what is going on..
Nick Pettit
Treehouse TeacherHi Gabriel,
I know it might seem a little bit difficult at first, but I think you'll have a much easier time using the Bootstrap carrousel, since it's designed to work with Bootstrap. Trying to jam something else in there might be worth it if you need some really special features, but it's probably just going to make things more complicated. I'd refer back to Brian's earlier example and check out the Bootstrap documentation. It's really really good. :)
Brian Story
Courses Plus Student 2,148 PointsThanks for correcting the way it posted my code Nick.
Hey Gabriel, It's good that you're playing around with these concepts and breaking things. I think Nick would agree when I say that you're going to learn a ton by running into these problems.
The thing about using frameworks is that they are setup to work a specific way. Both Bootstrap and Foundation are great frameworks that make building a mobile friendly website quick and easy using proven methods. When you add something in there that isn't set up for the framework its going to break things because it doesn't follow the CSS conventions of the framework.
Heres my recommendation: Learn how Bootstrap works by creating a very basic template with it, keep digging deeper into customizing the template until you have a finished product.
Start with the grid system, then add the basic content, then add the carousel, and for every step you take go back and check out how it works in a mobile environment as well as a desktop environment.
I came up with a rhyme for how I learn: Hack away for an hour a day.
I'll try to answer any questions I see posted. You have everything you need to succeed, You'll be an expert in no time :)
Gabriel Rodriguez
473 PointsIn that case guys, I would DEF give the bootstrap carousel a try. I'll let y'all know if I need any further assistance. Thanks!
You do have a good point, Brian. Thanks bro!
Gabriel Rodriguez
473 PointsOkay, the carousel looks good
rodriguezstudios.com/rsrwd
but when I added the
link href="css/bootstrap.min.css" rel="stylesheet" media="screen
It totally took out my background color.
Also, 1.how do I adjust the caption box to make it the same size of my banners
- center my banners
- put the caption box right below my banner show
Thanks.
Nick Pettit
Treehouse TeacherLooks like you've included two instances of Bootstrap. One is decompressed, and the other minified:
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
background-color:#536475;
}
</style>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
In this code, you have the minified version after the body styling inside the style tags. Due to the cascading nature of CSS, the order of your style matters. If you're saying your background-color on the body element is being knocked out, I don't need to look in boostrap.min.css to know that's where it's occurring. If you move your styles to be after bootstrap (which you should) then it should fix it.
To adjust the size of the caption box, you probably need to define an explicit height on either the #header-carousel element, it's parent, it's children, or some combination thereof. A pixel height should do it.
Brian Story
Courses Plus Student 2,148 PointsBrian Story
Courses Plus Student 2,148 PointsYou're doing all kinds of funky stuff there. I built a small carousel example for you with the bare minimum for it to run properly.
Once you get it running properly you should be able to customize it from here to fit whatever you need.
''' <!DOCTYPE html> <html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <style type="text/css"> body{ padding-top: 60px; } </style> </head> <body> <!-- Navbar fixed top example --> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <div nav-collapse collapse>
<div class="container"> <!-- Dont use hero-unit for carousel --> <div id="header-carousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img src="http://placehold.it/1200x480" alt="My Content! DUH!"> <div class="carousel-caption"> <p>This may be a stupid caption</p> </div> </div>
</div> <!-- Footer --> <div class="container"> <footer>© Whoever 2013 </footer> </div> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> '''