Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Build 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
STAFF
Andrew Chalkley
Treehouse Guest Teacher

Hi 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

ok 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

If 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
STAFF
Andrew Chalkley
Treehouse Guest Teacher

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

Ah 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
STAFF
Randy Hoyt
Treehouse Guest Teacher

Hey 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

Randy-

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

I 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
STAFF
Andrew Chalkley
Treehouse Guest Teacher

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

Ok 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

https://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
Jonathan Black
6,418 Points

Anyone 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
Carlo Petermann
4,531 Points

Hi Jonathan,

Thank you, that is exactly the problem I was having as well.