codecademy exercise: portfolio

Question

I am working on codecademy exercise portfolio and I cannot understand the asset pipeline bit: step 14 of the exercise where the instruction says:

Save your JavaScript code to app/assets/javascripts/, and then include it the page as shown here(the link).

What I have done is creating app.js file in that directory and put my javascript code in that file for image slide show and jquery in the application.html.erb. I can see the slide-show and everything is working just when I deploy the app using heroku I cannot see the slideshow instead of all the picture together. Here is the link what I have done so far:[Myapp][3]

I am new to Rails, so will appreciate if anyone can clarify what the instruction expect me to do and how I can see the slideshow in heroku.

$(function() {
    $('.banner').unslider();
});

// Place all the styles related to the Pages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

.header li {
display: inline-block;
position: relative;
padding: 20px;
font-size: 20px;
}

.header li a{
color: #333300;
}


.jumbotron {
background: url('https://dl.dropboxusercontent.com/s/5tug99ala22yzk2/19087585626_d16bace51e_k.jpg?dl=0') no-repeat center center fixed;
height: 700px;
}
.jumbotron h1{
font-size: 50px;

}

.jumbo{

background-color : #FFFFFF;
padding: 10px;

}

.btn-default {
 position: relative;
 display: inline-block;
 color: white;
 background-color: #333333;
 font-family: Raleway, sans-serif;
 font-size: 20px;
 padding: 20px;
 
}

.supporting h3 {
position: relative;
text-align: center;

}

.supporting p {
position: relative;
text-align: center;

}

   
.banner { position: relative; overflow: auto;}
    .banner li { list-style: none; }
        .banner ul li { float: left;}

<!DOCTYPE html>
<html>
<head>
  <title>Portfolio</title>
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  
  <script src="//unslider.com/unslider.min.js"></script>
  <%= csrf_meta_tags %>
</head>
<body>
  
  <div class ="header">
  <div class="nav nav-pills">
   <div class="container">
    <ul class ="pull-left">  
      <li><%= link_to "Welcome", root_path %></li>
    <li><%= link_to "Portfolio", portfolio_path %></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
     </ul>
   <ul class="pull-right">
     <li><a href="#">Mashuk</a></li>
     </ul>
   </div>
   </div>
</div>

<%= yield %>
  
  
<div class="footer">
  
      <div class="container">
        <div class="pull-right">
        <a href ="#"><img src ="https://dl.dropboxusercontent.com/s/14kntwgnr2bnegw/inspiration.svg?dl=0"></a>
        
          <div><p>&copy; 2015 Mashuk</p>
            
          <p>Icons made by <a href="http://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a>             is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC BY 3.0</a></p>
          
          </div>
       </div>

    </div>  
</div>
</body>
</html>

You should profile some code to your question. – Envil Jul 04 '15 at 10:33 — Envil, Jul 04 '15 at 10:33
I have added my code now. – arcticHeat Jul 04 '15 at 13:35 — arcticHeat, Jul 04 '15 at 13:35

score 0 · Accepted Answer · edited May 23 '17 at 12:06

0

GET https://unslider.com/unslider.min.js net::ERR_INSECURE_RESPONSE

Unslider.com does not support HTTPS.

Heroku apps run on HTTPS and since you are using a protocol relative link //unslider.com/unslider.min.js it also attemps to load the script via HTTPS.

Simplest solution is to download the script and place it in /vendor/assets/javascripts.

See How do you instruct Sprockets to include files from /vendors/assets/components on Heroku? if you want to use sprockets to include the file in your application.js.

edited May 23 '17 at 12:06

Community

1
1

answered Jul 04 '15 at 12:26

max

96,212
14
104
165

Thank you! It makes sense. I will try it and see if it fixes the issue. – arcticHeat Jul 04 '15 at 13:34

codecademy exercise: portfolio

1 Answers1