Build an Interactive Website- Jquery Plugins- Responsive Slider Plugin / Javascript : problem loading Pagination Links

Question

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

Answer 1 · 2013-03-18T13:33:07Z

March 18, 2013 1:33pm

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

Answer 2 · 2013-03-18T14:17:59Z

March 18, 2013 2:17pm

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

Answer 3 · 2013-03-18T14:21:18Z

March 18, 2013 2:21pm

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

Answer 4 · 2013-03-18T18:11:47Z

March 18, 2013 6:11pm

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.

Answer 5 · 2013-03-18T18:14:45Z

March 18, 2013 6:14pm

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

Answer 6 · 2013-03-18T18:17:27Z

March 18, 2013 6:17pm

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

Answer 7 · 2013-03-18T18:25:45Z

March 18, 2013 6:25pm

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

Answer 8 · 2013-03-18T18:25:20Z

March 18, 2013 6:25pm

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

Answer 9 · 2013-03-18T18:34:14Z

March 18, 2013 6:34pm

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.

Answer 10 · 2013-03-18T18:35:58Z

March 18, 2013 6:35pm

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

Answer 11 · 2013-03-19T16:52:33Z

March 19, 2013 4:52pm

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

Answer 12 · 2013-04-16T20:46:06Z

April 16, 2013 8:46pm

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

Answer 13 · 2013-10-11T13:59:36Z

October 11, 2013 1:59pm

Hi Jonathan,

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

Welcome to the Treehouse Community

Looking to learn something new?

Nick Allred

Nick Allred

Build an Interactive Website- Jquery Plugins- Responsive Slider Plugin / Javascript : problem loading Pagination Links

13 Answers

Andrew Chalkley

Andrew Chalkley

Nick Allred

Nick Allred

Nick Allred

Nick Allred

Andrew Chalkley

Andrew Chalkley

Nick Allred

Nick Allred

Randy Hoyt

Randy Hoyt

Nick Allred

Nick Allred

Nick Allred

Nick Allred

Andrew Chalkley

Andrew Chalkley

Nick Allred

Nick Allred

Nick Allred

Nick Allred

Jonathan Black

Jonathan Black

Carlo Petermann

Carlo Petermann