Here's the link for my site.http://vani.valse.com.my/schone_lightings/productdetail.php
The thumbnail when clicked must pop up but its not working.I've included all the files needed yet can't figure out what's missing.
I created a test page and just included the image.But it's working here.
http://vani.valse.com.my/schone_lightings/test.php
In header
<!--only for productdetail.php starts-->
<!-- Carousel -->
<script type="text/javascript" src="/lib/jcarousel/js/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="/lib/jcarousel/css/product/skin.css" />
<!-- ColorBox -->
<link rel="stylesheet" href="/lib/colorbox/colorbox.css" />
<script type="text/javascript" src="/lib/colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
$(".thumb_button").hover(function() {
var str = '<img src=\''+$(this).attr("image-cover")+'\' class=\'cover\' />';
$("#image_box").html(str);
});
$('.thumb_button').colorbox({rel:'photos'});
if ($('.stockquantity').attr("value") == ''){
$('.stockquantity').attr("value","0");
}
});
</script>
in body
<div id="image_box">
<img class="cover" src="/upload/productimage/ca05c9c1e01179087d3c9015a4097ce9-medium.jpg" />
</div>
<div class="thumbnail_box">
<ul id="mycarousel" class="jcarousel-skin-product">
<li><a class="thumb_button" href="/upload/productimage/ca05c9c1e01179087d3c9015a4097ce9.jpg" image="/upload/productimage/ca05c9c1e01179087d3c9015a4097ce9.jpg" image-cover="/upload/productimage/ca05c9c1e01179087d3c9015a4097ce9-medium.jpg"><img src="/upload/productimage/ca05c9c1e01179087d3c9015a4097ce9-thumb.jpg" width="66" height="66" alt="" border="0" /></a></li>
</ul>
</div>
<div class="thumbnail_tip center">(Click on thumbnails to enlarge image)</div>
</div>
<div class="small-12 medium-12 large-12 columns">
<div class="desc">
Lorem ipsum dolor sit amet
</div>
</div>
<!--only for productdetail.php ends-->
I managed to fix it. Just need to remove this from footer.
<script src="js/vendor/modernizr.js"></script>
Related
I am trying to make a Responsive Testimonial HTML File. It works on codepen (link is Here ) and is working nicely. When I transferred it on sublimetext, it doesn't seem to work. I believe it is due to the placement of my < script > codes. As we all know, the format of codepen is different from that of an actual code. Can someone tell me where I went wrong? I am confused on how to import or declare external JS links and the positioning. Thanks in advance
Here is what I made (UPDATE, I removed the main.js and saved it separately, and called it out. I believe the format is vendor first then the main.js)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Testimonials</title>
<link rel="stylesheet" href="css/styles.css" />
<link href="css/font-awesome.min.css" rel="stylesheet"/>
<link href="css/boostrap.min.css" rel="stylesheet"/>
<link href="css/owl.carousel.min.css" rel="stylesheet"/>
<link href="css/animate.min.css" rel="stylesheet"/>
</head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.thenahid.com/wp-content/themes/twentyseventeen/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<section>
<div class="customer-feedback">
<div class="container text-center">
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<div>
<h2 class="section-title">What Clients Say</h2>
</div>
</div><!-- /End col -->
</div><!-- /End row -->
<div class="row">
<div class="col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8">
<div class="feedback-slider">
<!-- slider item -->
<div class="feedback-slider-item">
<img src="//c2.staticflickr.com/8/7310/buddyicons/24846422#N06_r.jpg" class="center-block img-circle" alt="Customer Feedback">
<h3 class="customer-name">Lisa Redfern</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It is a long established fact that a reader will be distracted by the readable its layout.</p>
<span class="light-bg customer-rating" data-rating="5">
5
<i class="fa fa-star"></i>
</span>
</div>
<!-- /slider item -->
<!-- slider item -->
<div class="feedback-slider-item">
<img src="//c2.staticflickr.com/2/1558/buddyicons/37689138#N07_r.jpg" class="center-block img-circle" alt="Customer Feedback">
<h3 class="customer-name">Cassi</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It is a long established fact that a reader will be distracted by the readable its layout.</p>
<span class="light-bg customer-rating" data-rating="4">
4
<i class="fa fa-star"></i>
</span>
</div>
<!-- /slider item -->
<!-- slider item -->
<div class="feedback-slider-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/451270/profile/profile-80.jpg" class="center-block img-circle" alt="Customer Feedback">
<h3 class="customer-name">Md Nahidul</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It is a long established fact that a reader will be distracted by the readable its layout.</p>
<span class="light-bg customer-rating" data-rating="5">
5
<i class="fa fa-star"></i>
</span>
</div>
<!-- /slider item -->
</div><!-- /End feedback-slider -->
<!-- side thumbnail -->
<div class="feedback-slider-thumb hidden-xs">
<div class="thumb-prev">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/451270/profile/profile-80.jpg" alt="Customer Feedback">
</span>
<span class="light-bg customer-rating">
5
<i class="fa fa-star"></i>
</span>
</div>
<div class="thumb-next">
<span>
<img src="//c2.staticflickr.com/2/1558/buddyicons/37689138#N07_r.jpg" alt="Customer Feedback">
</span>
<span class="light-bg customer-rating">
4
<i class="fa fa-star"></i>
</span>
</div>
</div>
<!-- /side thumbnail -->
</div><!-- /End col -->
</div><!-- /End row -->
</div><!-- /End container -->
</div><!-- /End customer-feedback -->
</section>
</body>
</html>
JAVASCRIPT main.js
jQuery(document).ready(function($) {
var feedbackSlider = jQuery('.feedback-slider');
feedbackSlider.owlCarousel({
items: 1,
nav: true,
dots: true,
autoplay: true,
loop: true,
mouseDrag: true,
touchDrag: true,
navText: ["<i class='fa fa-long-arrow-left'></i>", "<i class='fa fa-long-arrow-right'></i>"],
responsive:{
// breakpoint from 767 up
767:{
nav: true,
dots: false
}
}
});
feedbackSlider.on("translate.owl.carousel", function(){
$(".feedback-slider-item h3").removeClass("animated fadeIn").css("opacity", "0");
$(".feedback-slider-item img, .feedback-slider-thumb img, .customer-rating").removeClass("animated zoomIn").css("opacity", "0");
});
feedbackSlider.on("translated.owl.carousel", function(){
$(".feedback-slider-item h3").addClass("animated fadeIn").css("opacity", "1");
$(".feedback-slider-item img, .feedback-slider-thumb img, .customer-rating").addClass("animated zoomIn").css("opacity", "1");
});
feedbackSlider.on('changed.owl.carousel', function(property) {
var current = property.item.index;
var prevThumb = $(property.target).find(".owl-item").eq(current).prev().find("img").attr('src');
var nextThumb = $(property.target).find(".owl-item").eq(current).next().find("img").attr('src');
var prevRating = $(property.target).find(".owl-item").eq(current).prev().find('span').attr('data-rating');
var nextRating = $(property.target).find(".owl-item").eq(current).next().find('span').attr('data-rating');
$('.thumb-prev').find('img').attr('src', prevThumb);
$('.thumb-next').find('img').attr('src', nextThumb);
$('.thumb-prev').find('span').next().html(prevRating + '<i class="fa fa-star"></i>');
$('.thumb-next').find('span').next().html(nextRating + '<i class="fa fa-star"></i>');
});
$('.thumb-next').on('click', function() {
feedbackSlider.trigger('next.owl.carousel', [300]);
return false;
});
$('.thumb-prev').on('click', function() {
feedbackSlider.trigger('prev.owl.carousel', [300]);
return false;
});
}); //end ready
Below is the OUTPUT that is showing our what I have right now. I believe it has something to do on how I declare the css and js external codes My Current Output
Edit the scr to src in this
<script type="text/javascript" scr="js/main.js"></script>
I have a semantic-UI lefside menu that I want to be persistent. I am trying to make 2 states - a wide one with type for each item, and a compact one with an image for each item.
Currently there are a few issues that I am totally stumped on!
1) Why does the menu completely go away on click?
2) How can I make the page NOT do dim?
3) Can the page collapse in width instead of getting pushed to the right?
4) is it possible to have two menu states, as described, and toggle between them on click?
Thank you very much!
My site is here: http://itp.evejweinberg.com/left/
And my html:
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="semantic/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,800" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<!-- my json of content -->
<script type="text/javascript" src="list.js"></script>
<!-- jQuery to build that content -->
<script type="text/javascript" src="buildScene.js"></script>
<script src="semantic/semantic.min.js"></script>
</head>
<!--//do I need this class? -->
<body class="pushable">
<!-- semantic says to put everything in pusher -->
<div class="pusher">
<div class="all">
<div id="main"></div>
<div class="title-holder">
<div class="animatedDiv"></div>
</div>
<div class='container'>
<div class='header'></div>
<div class="all-books"></div>
</div>
</div>
</div>
<!-- menu -->
<div class="ui vertical left labeled menu fixed small sidebar">
<div class="header link item" onclick="scrollTo(captology)">Intro</div>
<div class="item">
<div class="header link item">Emotions</div>
<div class="menu">
<a class="item link" onclick="scrollTo(hope)">Hope</a>
<a class="item link" onclick="scrollTo(anxiety)">Anxiety</a>
<a class="item link" onclick="scrollTo(fear)">Fear</a>
</div>
</div>
<div class="item">
<div class="header link item">Psychology</div>
<div class="menu">
<a class="item link" onclick="scrollTo(transparency)">Transparency</a>
<a class="item link" onclick="scrollTo(loss)">Loss Aversion</a>
<a class="item link" onclick="scrollTo(dark)">Dark Patterns</a>
<a class="item link" onclick="scrollTo(social)">Social Pressure</a>
</div>
</div>
<div class="item">
<div class="header link" onclick="scrollTo(fogg)">Fogg</div>
<div class="menu">
<a class="item link" onclick="scrollTo(motivation)">Motivation</a>
<a class="item link" onclick="scrollTo(ability)">Ability</a>
<a class="item link" onclick="scrollTo(trigger)">Trigger</a>
</div>
</div>
<div class="item">
<div class="header link" onclick="scrollTo(flow)">Flow</div>
<div class="menu">
<a class="item link" onclick="scrollTo(chunking)">Chunking</a>
<!-- <a class="item">FAQs</a> -->
</div>
</div>
<div class="item">
<div class="header">Ethics</div>
<div class="menu">
<div class="nav-rect" id="e"></div>
<div class="nav-rect" id="e"></div>
<div class="nav-rect" id="e"></div>
<div class="nav-rect" id="e"></div>
</div>
<div class="header link" onclick="scrollTo(sources)">Sources</div>
</div>
<div class="header">About</div>
<div class="ui category search item">
<div class="ui transparent icon input">
<input class="prompt" type="text" placeholder="Search...">
<i class="search link icon"></i>
</div>
<div class="results"></div>
</div>
</div>
</div>
<script type="text/javascript" src="content.js"></script>
<script type="text/javascript" src="sketch.js"></script>
<script type="text/javascript" src="js/intro.js"></script>
<script type="text/javascript" src="js/hope.js"></script>
<script type="text/javascript" src="js/lossAversion.js"></script>
<script type="text/javascript">
$('.sidebar').sidebar('show');
// $('.sidebar')
// .visibility({
// type : 'fixed',
// offset : 45 // give some space from top of screen
// });
// $('.menu').click(function(){
// $('.ui.labeled.icon.sidebar').sidebar('toggle');
//
// })
// $('.ui.sidebar').click(function(){
// sidebar('toggle');
// })
</script>
</body>
</html>
Mystery solved! Semantic-UI was dynamically adding to my html on build. I removed the class 'sidebar' and all pusher and dimmer css went away. That solves #1 and #2. For the rest, i'm just going to go back to jQuery animations to slide the left nav to the left and collapse it's width. Thx All!
I have written html/css code and then added another file to include the jquery library and my own js code (in the file scripts.js).
My code does not work if I keep it in the separate scripts.js file, but it does work if I apply it in the <scripts></script> element within index.html.
Why is this and how can I solve the problem?
My HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hartmeting</title>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css">
<script src="js/jquery-3.1.1.js" type='text/javascript'></script>
<script src="js/scripts.js" type='text/javascript'></script>
</head>
<body>
<div id="wrapper">
<header id="titel">
<h1>Welcome</h1>
</header>
<!-- Menu -->
<nav id="menu">
<ul>
<li> Introductie </li>
</ul>
</nav>
<!-- Manual -->
<div id="content">
<!-- Intro Slide -->
<article id="intro">
<h2>Introductie</h2>
<figure>
<img src="http://placehold.it/150x150" , alt="Intro Afbeelding"/>
</figure>
<p>Zonder moeite je hart meten? Dat kan...</p>
</article>
<!-- Slide 1 -->
<article id="probleem">
<h2>Het Probleem</h2>
<figure>
<img src="http://placehold.it/150x150" , alt="Eerste Afbeelding"/>
</figure>
<p>Het probleem uitleggen</p>
</article>
</div>
<footer>
To the top!
</footer>
</div>
</body>
</html>
Browser Console Log:
SyntaxError: Unexpected token ')'. Expected an opening '(' before a
function's parameter list.
But it does work, if I do it like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hartmeting</title>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css">
<script src="js/jquery-3.1.1.js" type='text/javascript'></script>
<script type='text/javascript'>
$( document ).ready(function() {
$('content').hide();
});
</script>
</head>
<body>
<div id="wrapper">
<header id="titel">
<h1>Welcome</h1>
</header>
<!-- Menu -->
<nav id="menu">
<ul>
<li> Introductie </li>
</ul>
</nav>
<!-- Manual -->
<div id="content">
<!-- Intro Slide -->
<article id="intro">
<h2>Introductie</h2>
<figure>
<img src="http://placehold.it/150x150" , alt="Intro Afbeelding"/>
</figure>
<p>Zonder moeite je hart meten? Dat kan...</p>
</article>
<!-- Slide 1 -->
<article id="probleem">
<h2>Het Probleem</h2>
<figure>
<img src="http://placehold.it/150x150" , alt="Eerste Afbeelding"/>
</figure>
<p>Het probleem uitleggen</p>
</article>
</div>
<footer>
To the top!
</footer>
</div>
</body>
</html>
you're missing the parenthesis after function
$(document).ready(function(){
$("#content").hide();
});
Your syntax seems to be right (well, yes, you already fixed that though). Yet your jQuery selector is wrong. In order to hide an html element through it's id you need the #prefix. That being said, your .hide() should look like this:
$('#content').hide();
And also, here's the whole snippet:
$(document).ready(function() {
$('#content').hide();
});
Demo
The correct syntax would be:
$(document).ready(function(){
$("#content").hide();
});
I'm not sure as to why my implementation is not working. I have followed the documentation on the foundation 4 site but can not figure out why it's not working. All that shows up are the cursor dots that change the position of the pictures in the Orbit. Also, I have the correct css/html/js folder paths.
Here's what my mark up looks like:
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title> Foundation 4</title>
<!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
<link rel="stylesheet" href="foundation-4/css/normalize.css" />
<link rel="stylesheet" href="foundation-4/css/foundation.css" />
<script src="foundation-4/js/vendor/custom.modernizr.js"></script>
</head>
<body>
<!-- body content here -->
<nav class="top-bar">
<ul class="left">
<li class="name"><font color="white">Va</font></li>
</ul>
<ul class="right">
<li class="name"><font color="white">Home</font></li>
</ul>
</nav>
<br>
<!-- ======================== ORBIT===================== -->
<div class="orbit-container">
<ul data-orbit="" class="orbit-slides-container">
<li>
<img src="3.jpg">
<div class="orbit-caption">IMAGE 3</div>
</li>
<li class="active">
<img src="1.jpg">
<div class="orbit-caption">IMAGE 1</div>
</li>
<li>
<img src="2.jpg">
<div class="orbit-caption">IMAGE 2</div>
</li>
<li>
<img src="3.jpg">
<div class="orbit-caption">IMAGE 3</div>
</li>
<li>
<img src="1.jpg">
<div class="orbit-caption">IMAGE 1</div>
</li>
</ul>
<!-- Prev/Next Arrows -->
Prev<span></span>
Next<span></span>
<!-- Slide Numbers -->
<div class="orbit-slide-number">
<span>1</span> of <span>3</span>
</div>
<!-- Timer and Play/Pause Button -->
<div class="orbit-timer">
<span></span>
<div class="orbit-progress" style="width: 100%; -webkit-transition: width 10s linear;"></div>
</div>
</div>
<!-- Orbit Bullet Slide Indicator -->
<ol class="orbit-bullets">
<li data-orbit-slide-number="1"></li>
<li data-orbit-slide-number="2" class="active"></li>
<li data-orbit-slide-number="3"></li>
</ol>
<!-- =======ORBIT END======= -->
<script>
document.write('<script src=foundation-4/js/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>
<script>
document.write('<script src=' +
('__proto__' in {} ? 'foundation-4/js/vendor/zepto' : 'foundation-4/js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
<script src="js/foundation/foundation.alerts.js"></script>
<script src="js/foundation/foundation.clearing.js"></script>
<script src="js/foundation/foundation.cookie.js"></script>
<script src="js/foundation/foundation.dropdown.js"></script>
<script src="js/foundation/foundation.forms.js"></script>
<script src="js/foundation/foundation.joyride.js"></script>
<script src="js/foundation/foundation.magellan.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
<script src="js/foundation/foundation.placeholder.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script src="js/foundation/foundation.section.js"></script>
<script src="js/foundation/foundation.tooltips.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script src="js/foundation/foundation.interchange.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Also, here is a screen shot of the errors I am getting in google chrome.
http://s1228.photobucket.com/user/Ebadly/media/random/ScreenShot2013-11-15at112428AM_zpsdfc35907.png.html
EDIT: THE FOUNDATION DOUMENTATION CONTAINS
<ul data-orbit="" class="orbit-slides-container">
REMOVE: ="" class="orbit-slides-container" It did the TRICK FOR ME: SO it becomes:
<ul data-orbit>
"Uncaught TypeError: Object # this is because jQuery has not loaded. Download jQuery from here http://jquery.com/download/
Link this jQuery file to your website
Even if the jQuery file is linked properly make sure it is loaded in the
<head></head> tags before loading the foundation javascript files
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title> Foundation 4</title>
<!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
<link rel="stylesheet" href="foundation-4/css/normalize.css" />
<link rel="stylesheet" href="foundation-4/css/foundation.css" />
<script src="LINKTO JQUERY JS FILE"></script>
<script src="foundation-4/js/vendor/custom.modernizr.js"></script>
</head>
EDIT:
<div class="row">
<div class="orbit-container">
<ul data-orbit="" class="orbit-slides-container">
<li>
<img src="3.jpg">
<div class="orbit-caption">IMAGE 3</div>
</li>
<li class="active">
<img src="1.jpg">
<div class="orbit-caption">IMAGE 1</div>
</li>
<li>
<img src="2.jpg">
<div class="orbit-caption">IMAGE 2</div>
</li>
<li>
<img src="3.jpg">
<div class="orbit-caption">IMAGE 3</div>
</li>
<li>
<img src="1.jpg">
<div class="orbit-caption">IMAGE 1</div>
</li>
</ul>
</div>
</div>
EDIT: TRY THIS
<div class="large-12 columns">
<div class="orbit-container">
<ul data-orbit>
<li data-orbit-slide="headline-1">
<h2>Headline 1</h2>
<h3>Subheadline</h3>
<p>Pellentesque habitant morbi tristique senectus.</p>
</li>
<li data-orbit-slide="headline-2">
<h2>Headline 2</h2>
<h3>Subheadline</h3>
<p>Pellentesque habitant morbi tristique senectus.</p>
</li>
</ul>
</div>
</div>
It's not going to work because there are AJAX calls being made to get the scripts. You're going to have to use something like USBWebServer if you're going to develop/test locally.
twitter bootstrap carousel not working. I tried changing the id ('#mycarousel') to .carousel or .mycarousel but nothing is working. when I click on the controls it does not advance. what is wrong with this piece of code?
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js></script>
<script type="text/javascript">
function(){
$('#mycarousel').carousel();
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12 well">
<div id="mycarousel" class="carousel slide span8">
<div class="carousel-inner">
<div class="item active"><img src="car1.jpg"></div>
<div class="item"><img src="car2.jpg"></div>
<div class="item"><img src="car3.jpg"></div>
<div class="item"><img src="car4.png"></div>
<div class="item"><img src="car5.jpg"></div>
</div>
<a class="carousel-control left" href="#mycarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#mycarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
<script src="js/carousel.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
The following code will never gets executed, since you never actually call it.
$('#mycarousel').carousel();
You should change the following:
function(){
$('#mycarousel').carousel();
}
to:
$(function(){
$('#mycarousel').carousel();
});
This will make it execute when the dom is ready.
You also do not close you link tag that loads the bootstrap css from being loaded.The following:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"
Should be:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
You load the JS files in an order which I am not sure if it is correct. I suppose they should be in the reverse order.