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>© 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>
1 answers
solution1
0 ACCPTED 2015-07-04 12:26:55
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.