Develop Reference

wowjs animate css not working wowjs not adding animated class to html element

if you go here site here and check with developer tools you will see this line
<!--Single portfolio item one-->
<section class="single-items center-block parallax m-0" id="home" style="background: url(innovative/img/single-portfolio1.jpg)">
<div class="container">
<div class="row">
<div class="col-md-12 center-col">
<div class="area-heading text-center wow fadeInUp" data-wow-delay="0.8s">
<h3 class="area-title text-capitalize alt-font text-white mb-2 font-weight-100 ">
Nuestro <strong>loren ipsun</strong>loren ipsun</h3>
<p class="text-white font-weight-300"> loren ipsun</p>
loren ipsun
</div>
</div>
</div>
</div>
</section>
lacks the * animated * class, tried :
manually setting animated css, bootstrap css, and animated js, wow js , did not work....
stripped down all the css and js and just left basic html with animate css and js and wow js, nothing happened
what could be happening ? , this template have bootstrap and animate css in one bundle js css file
wasted between 2, 4 hours debugging console and found not the culprit of this error
What i am trying is:
to enable the wow animate js css effect like this site site here
if you check with developer tools this last site you will see that will be adding animated class to wow fadein class.. however that is not happening in the first one... and do not know why!
what could be causing this?

It seems to me that you forgot to initiate the wow.js as told in the documentation, so you just need to add the initiation code to it. And a quick fix would be to add:
<script type="text/javascript">
new WOW().init();
</script>
Below <!-- custom script --> line in your code (or anywhere before </body> tag).

How to create a Slick Slider JS slideshow in center mode

I want to implement a carousel using the excellent Slick Slider(https://kenwheeler.github.io/slick/) which I have used for images before with no problems. I'm trying to create a 'center mode' slideshow like the example except using several div;
I want to do something like this;
These are the div's I want to use on codepen here - https://codepen.io/grabthereef/pen/mdymmgM
<!-- Single Card -->
<div class="single_slide">
<div class="row">
<div class="col-lg-4">
<div class="top-text">
<h1>DG Aurum</h1>
</div>
<div class="view-button">
<button type="button" class="btn btn-outline-danger-opposite shadow btn-sm m-1">Live View</button>
</div>
</div>
<div class="col-lg-8 text-center">
<img src="https://i.imgur.com/jieUOmw.jpg" class="shadow website-image" alt="website image">
</div>
</div>
</div>
The problem is when I add the Slick Slider code it messes the layout of the page;
https://codepen.io/grabthereef/pen/gObWBVG
I've tried looking through the other questions on here but I can't find a solution that works for me, I'm fairly new to JS.

If you go ahead and load the slick slider css file, that should pretty much fix the problem for you //cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css. I found this out only after making a very barebones version of the slick slider on my own codepen https://codepen.io/dthenley/pen/PowJbgN and proceeding from there. My slider was doing pretty much the same thing yours was right until I added the css code. I also loaded it with a document ready function
$(document).ready(function(){
$('.your-class').slick();
});

amphtml show amp-img in bootstrap modal

I want to load <amp-img> on bootstrap modal here is my code:
<div id="modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
<div class="exclusive-box">
<div class="exclusive-inner">
×</div>
</div>
</span>
</button>
<div class="modal-body">
<div class="modal-logo"><a href="">
<amp-img src="http://dummyimage.com/600x400/000/fff" alt="" width="600" height="400" layout=responsive ></amp-img>
</a></div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<script>
$(window).load(function(){
$('#modal').modal('show');
});
</script>
But image is not displaying, same issue is persist when I try to implement it on bootstrap carousel or any other images which display on jQuery event

Can't have any user authored JavaScript code in AMP, only the JavaScript that is provided by the Google AMP team may exist on AMP pages as per AMP's specifications.

I think this is not supported in AMP.
"AMP is currently focused only on the websites of publications (e.g. newspapers, where the pages are relatively simple and not richly interactive), whereas Bootstrap is aimed at more general usage, including for sophisticated web apps."
Can't use any custom JS (so any of the Bootstrap components and JavaScript plugins are out); the only way around this would be to define anything that needs JS behavior as an extended component, loaded via syntax
You can only use a subset of HTML and specific tags like - as Bootstrap itself doesn't actually build the overall page/markup and it's left up to authors, there's not much Bootstrap would need to do here
You can only add custom styles as an inline - this is something that once again an author could/should be doing, not really something that Bootstrap should deal with
-from an "AMP'd HTML"

Disable section of HTML code when Javascript Disabled

I'm currently making a website for a university project where I'm using a piece of Javascript ( http://buildinternet.com/project/supersized/ ) in order to generate a background that is a gallery of several images.
I'm trying to set the site so that it will display a single image as the background in the event of Javascript being turned off, but the navigation elements of this slideshow are generated using HTML code outside of the script tags and inside the body tag.
Is there a way I can set this HTML code so that it will only be included when Javascript is active, leaving the screen clear of the navigation controls when it isn't?
At request the code I'm trying to isolate is the Div tags being called below.
<!--Thumbnail Navigation-->
<div id="prevthumb"></div>
<div id="nextthumb"></div>
<!--Arrow Navigation-->
<!-- <a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>
<div id="thumb-tray" class="load-item">
<div id="thumb-back"></div>
<div id="thumb-forward"></div>
</div>
<!--Time Bar-->
<!--<div id="progress-back" class="load-item">
<div id="progress-bar"></div>
</div>
<!--Control Bar-->
<div id="controls-wrapper" class="load-item">
<div id="controls">
<a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>
<!--Slide counter-->
<div id="slidecounter">
<span class="slidenumber"></span> / <span class="totalslides"></span>
</div>
<!--Slide captions displayed here-->
<div id="slidecaption"></div>
<!--Thumb Tray button-->
<a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>
<!--Navigation-->
<ul id="slide-list"></ul>
</div>
</div>

Like #jumpingcode mentioned, you would want to hide the controls in question with CSS, and show them with JavaScript.
Hide the div with CSS:
#controls-wrapper {
display:none;
}
Then show it in your page with jQuery:
$('#controls-wrapper').show();
Or use .css() to have more control over what type of display property to use:
$('#controls-wrapper').css('display', 'block');

Css javascript doesn't work inside Angularjs ng-view

I am building a website using Angularjs, also I am using an admin theme for bootstrap.
The theme works fine, but when I divide it in views (ng-view), the different javascript based parts stop working.
For example to open a modal window
<a href="javascript:;" class="primary-bg medium radius-all-2 display-block >btn basic-dialog">
<span class="button-content text-center float-none font-size-11 text->transform-upr">View Basic dialog example</span>
</a>
</div>
<div class="hide" id="basic-dialog" title="Basic dialog title">
<div class="pad10A">
Dialog content here
</div>
</div>
if I put this just in the index.html of the application it works fine, if I move it to an ng-view it doesn't work.