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 trialNick Allred
2,603 PointsBuild an Interactive Website- Jquery Plugins- Responsive Slider Plugin / Javascript : problem loading Pagination Links
I reached out to Andrew and Allison the other day about my issue with my code regaurding the responsive slider.
Here are the links to the text files. Thank you again.
This is up to the point where we are to check if the Pagination links are showing and either I'm not able to see them or the links aren't showing up. and the slides seem to not show up on the page, even after i refresh by pressing enter, like suggested in the video.
codepen: http://cdpn.io/IqkFm
https://www.dropbox.com/s/uc4nf6bk5pgsvey/css.html https://www.dropbox.com/s/pv34kek127orjr7/HTML.html
Please let me know if the links dont work. Thank you Nick
13 Answers
Andrew Chalkley
Treehouse Guest TeacherHi Nick,
Both the HTML files in dropbox don't look right. Also codepen isn't linked to wmuSlider right. I think if you have issues like this uploading your site to a hosting service would help anyone out trying to help you.
Regards Andrew
Nick Allred
2,603 Pointsok great im glad to see that at least its wrong and im not going crazy lol. Thank you Andrew.
Codepen: dose that anything to do with that i have external images that are on my machine and aren't coming up on the codepen?
Also would you be able to give me more info on what is incorrect with my code in the HTML file?
Thank you again Nick
Nick Allred
2,603 PointsIf im not able to resolve this issue , what i may do is take a current jquery slider plugin that i have that is not responsive and set it to display none at curtain width and replace it with a image grid to display the images on a lower width like a phone. (and i mean just having rows of several images to display what the slider would show. ) Unless i can resolve my current issue or find a way to make the current non-responsive Jquery slider into a responsive slider.
Thank you for any help in advance. Nick
Andrew Chalkley
Treehouse Guest TeacherWell the CSS file is HTML. And the HTML file looks similar with these <p class="p1"><span class="Apple-tab-span">
tags.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<meta name="Generator" content="Cocoa HTML Writer">
<meta name="CocoaVersion" content="1038.36">
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}
p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px}
span.Apple-tab-span {white-space:pre}
</style>
</head>
<body>
<p class="p1">@charset "UTF-8";</p>
<p class="p1">/* CSS Document */</p>
<p class="p2"><br></p>
<p class="p1">/*global*/</p>
<p class="p2"><br></p>
<p class="p2"><br></p>
<p class="p2"><br></p>
<p class="p1">body{</p>
<p class="p1"><span class="Apple-tab-span"> </span>font-family: 'Fjalla One', sans-serif;</p>
<p class="p1"><span class="Apple-tab-span"> </span>color: #F93;</p>
<p class="p1"><span class="Apple-tab-span"> </span>background-color: #000;</p>
<p class="p1">}</p>
<p class="p2"><br></p>
<p class="p1">.container{</p>
<p class="p1"><span class="Apple-tab-span"> </span>width: 90%;</p>
<p class="p1"><span class="Apple-tab-span"> </span>max-width: 1000px;</p>
<p class="p1"><span class="Apple-tab-span"> </span>margin: 0 auto;</p>
<p class="p1"><span class="Apple-tab-span"> </span>padding: 80px 0 0 0;</p>
<p class="p1"><span class="Apple-tab-span"> </span>/*padding: 100px 0 0 0;*/</p>
<p class="p1">}</p>
<p class="p2"><br></p>
<p class="p2"><br></p>
<p class="p1">img{</p>
<p class="p1"><span class="Apple-tab-span"> </span>cursor: pointer;</p>
<p class="p1">}</p>
<p class="p2"><br></p>
<p class="p1">.logo img{</p>
<p class="p1"><span class="Apple-tab-span"> </span>width: 100%;</p>
<p class="p1">}</p>
<p class="p2"><br></p>
<p class="p2"><br></p>
<p class="p1">/*header*/</p>
<p class="p2"><br></p>
<p class="p1">.containernav{</p>
<p class="p1"><span class="Apple-tab-span"> </span>width: 100%;</p>
<p class="p1"><span class="Apple-tab-span"> </span>height: 58px;</p>
<p class="p1"><span class="Apple-tab-span"> </span>margin: 0 0 0 0;</p>
<p class="p1"><span class="Apple-tab-span"> </span>padding: 0 0 0 0;</p>
<p class="p1"><span class="Apple-tab-span"> </span>background: #1A0100;</p>
<p class="p1"><span class="Apple-tab-span"> </span>position: fixed;</p>
<p class="p1"><span class="Apple-tab-span"> </span>z-index: 100;<span class="Apple-tab-span"> </span></p>
<p class="p1">}</p>
<p class="p2"><br></p>
<p class="p1">.favcon{</p>
<p class="p1"><span class="Apple-tab-span"> </span>background: #1A0100;</p>
<p class="p1"><span class="Apple-tab-span"> </span>margin: 0 0 0 5px;</p>
<p class="p1"><span class="Apple-tab-span"> </span>padding: 5px 5px 3px 5px;</p>
<p class="p1">}</p>
<p class="p2"><br></p>
<p class="p1">.logo{</p>
<p class="p1"><span class="Apple-tab-span"> </span>background-color: ;</p>
<p class="p1"><span class="Apple-tab-span"> </span>border: ;</p>
<p class="p1"><span class="Apple-tab-span"> </span>border-radius: ;</p>
<p class="p1"><span class="Apple-tab-span"> </span>margin: 0px 0px 0 0px;</p>
<p class="p1"><span class="Apple-tab-span"> </span>padding:<span class="Apple-converted-space"> </span>2px 10px 6px 10px;</p>
<p class="p1">}</p>
<p class="p2"><br></p>
<p class="p1">/*navigation*/</p>
<p class="p2"><br></p>
<p class="p1">a{</p>
<p class="p1"><span class="Apple-tab-span"> </span>text-decoration: none;</p>
<p class="p1">}</p>
<p class="p2"><br></p>
<p class="p1">.primarynav ul{</p>
<p class="p1"><span class="Apple-tab-span"> </span>width: ;</p>
<p class="p1"><span class="Apple-tab-span"> </span>padding: 0 0 0 25px;</p>
<p class="p1"><span class="Apple-tab-span"> </span>list-style: none;</p>
<p class="p1"><span class="Apple-tab-span"> </span>float: left;</p>
<p class="p1">}</p>
<p class="p2"><br></p>
<p class="p1">.primarynav ul li{</p>
<p class="p1"><span class="Apple-tab-span"> </span>float: left;</p>
<p class="p1"><span class="Apple-tab-span"> </span>margin-top: 7px;</p>
<p class="p1"><span class="Apple-tab-span"> </span>margin-right: 20px;</p>
<p class="p1"><span class="Apple-tab-span"> </span>padding: 0 0 0 0;</p>
<p class="p1">}</p>
<p class="p2"><br></p>
<p class="p1">.primarynav .light:hover{</p>
<p class="p1"><span class="Apple-tab-span"> </span>color: #CCC;</p>
<p class="p1">}</p>
<p class="p2"><br></p>
<p class="p1">.social ul{</p>
<p class="p1"><span class="Apple-tab-span"> </span>width: ;</p>
<p class="p1"><span class="Apple-tab-span"> </span>list-style: none;</p>
<p class="p1"><span class="Apple-tab-span"> </span>float: right;</p>
<p class="p1">}</p>
<p class="p2"><br></p>
<p class="p1">.social ul li{</p>
<p class="p1"><span class="Apple-tab-span"> </span>float: right;</p>
<p class="p1"><span class="Apple-tab-span"> </span>margin: 5px 0 0 10px;</p>
<p class="p1"><span class="Apple-tab-span"> </span>padding: 0 0 0 0;</p>
<p class="p1">}</p>
<p class="p2"><br></p>
<p class="p2"><br></p>
<p class="p2"><br></p>
<p class="p1">/*text-----------------*/</p>
<p class="p2"><br></p>
<p class="p1">.wmuSlider{</p>
<p class="p1"><span class="Apple-tab-span"> </span>display: inline;</p>
<p class="p1">}</p>
<p class="p2"><br></p>
<p class="p1">.description{</p>
<p class="p1"><span class="Apple-tab-span"> </span>text-align: center;</p>
<p class="p1"><span class="Apple-tab-span"> </span>padding: 0 0 0 0;</p>
<p class="p1"><span class="Apple-tab-span"> </span>margin: 0 0 20px 0;</p>
<p class="p1">}</p>
<p class="p2"><br></p>
<p class="p1">.light{</p>
<p class="p1"><span class="Apple-tab-span"> </span>color: #999;</p>
<p class="p1">}</p>
<p class="p2"><br></p>
<p class="p1">.light-des{</p>
<p class="p1"><span class="Apple-tab-span"> </span>font-size: 1em;</p>
<p class="p1"><span class="Apple-tab-span"> </span>margin: 0 0 0 0;<span class="Apple-converted-space"> </span></p>
<p class="p1"><span class="Apple-tab-span"> </span>color: #FFC;</p>
<p class="p1">}</p>
<p class="p2"><br></p>
<p class="p1">.bio{</p>
<p class="p1"><span class="Apple-tab-span"> </span>width: 50%;</p>
<p class="p1"><span class="Apple-tab-span"> </span>background-color: #FFC;</p>
<p class="p1"><span class="Apple-tab-span"> </span>border-radius: 5px;</p>
<p class="p1"><span class="Apple-tab-span"> </span>padding: 0 15px;</p>
<p class="p1">}</p>
<p class="p2"><br></p>
<p class="p1">h1{</p>
<p class="p1"><span class="Apple-tab-span"> </span>font-size: 1em;</p>
<p class="p1"><span class="Apple-tab-span"> </span>color: #666; /*grey*/</p>
<p class="p1"><span class="Apple-tab-span"> </span>width: 100%;</p>
<p class="p1"><span class="Apple-tab-span"> </span>margin: auto;</p>
<p class="p1">}</p>
<p class="p2"><br></p>
<p class="p2"><br></p>
<p class="p1">h4{</p>
<p class="p1"><span class="Apple-tab-span"> </span>color:<span class="Apple-converted-space"> </span>#1A0100; /*light yellow*/</p>
<p class="p1"><span class="Apple-tab-span"> </span>width: 100%;</p>
<p class="p1">}</p>
<p class="p2"><br></p>
<p class="p1">.twitter{</p>
<p class="p1"><span class="Apple-tab-span"> </span>margin: 0 0 0 0;</p>
<p class="p1">}</p>
<p class="p2"><br></p>
<p class="p1">.video-text{</p>
<p class="p1"><span class="Apple-tab-span"> </span>background: #FFF;</p>
<p class="p1"><span class="Apple-tab-span"> </span>border: #CCC solid 2px;</p>
<p class="p1">}</p>
<p class="p2"><br></p>
<p class="p1">.copyright{</p>
<p class="p1"><span class="Apple-tab-span"> </span>text-align: center;</p>
<p class="p1"><span class="Apple-tab-span"> </span>color: #000;</p>
<p class="p1"><span class="Apple-tab-span"> </span>border-top: 2px solid #666;</p>
<p class="p1">}</p>
</body>
</html>
Maybe you saved it out wrong.
The issue with codepen is it's ok for sharing snippets of code where the CSS, JS and HTML can be included from non-external sources. So uploading it to a site to a web host would help someone diagnose your problem.
Nick Allred
2,603 PointsAh i see, I believe it just uploaded it wrong.
Would it be better if i send you a link of the text files through dropbox?
thank you again Andrew.
Nick
Randy Hoyt
Treehouse Guest TeacherHey Nick,
Would you be able to publish this to a web address somewhere? Then you can post a link to it, we can see what's happening, and we can view the source in the browser to try to help.
Thanks, ~randy
Nick Allred
2,603 PointsRandy-
Im not sure, I haven't completed setting up a web host yet, so off hand i wouldn't know of where to host to as a temp site. Would you happen to know of another route?
I would like to make it available so you can see the wip site to find whats wrong though im not sure of a definite way of doing so.
Thank you Randy
Nick Allred
2,603 PointsI know its not ideal but i would screenshots be at all helpful? =/ n
I could possibly upload it to a friends site, as a sub site. though i wont be able to do that till later, probably tomorrow, because i don't have the pass codes to upload to the ftp.
would that be helpful?
thanks again n
Andrew Chalkley
Treehouse Guest TeacherSeeing the code how you're seeing it is the fastest way of fixing your problem. If there's things missing or things don't look right we may be diagnosing the wrong problem.
Nick Allred
2,603 PointsOk cool. i understand. =]
Thank you again
I'll send you the link for the dropbox text files so you can see the code. also I'll make some screen shots of what I'm seeing.
Though as far as the Page. Links there just aren't showing up. there isn't anything in the space where it should be.
I hope this helps. Please let me know if you would rather me go another route.
Thank you again Nick
Nick Allred
2,603 Pointshttps://www.dropbox.com/s/uc4nf6bk5pgsvey/css.html
https://www.dropbox.com/s/pv34kek127orjr7/HTML.html
Here are the links to the text files with the CSS and HTML for my site.
Please let me know if this is helpful. Thank you Nick
Jonathan Black
6,418 PointsAnyone ever solve this problem? Having the same issue right now
Solved it...for whatever reason, when copying/pasting the CSS...
.wmuSlider .wmuSliderWrapper { display: none; }
....so I deleted that, and it worked fine. Thanks
Carlo Petermann
4,531 PointsHi Jonathan,
Thank you, that is exactly the problem I was having as well.