wow.js is not working - javascript

I have just tried to implement wow.js to my site but it wont work.
I have linked everything but i don't know why it isn't working.
I even added the wow.js and linked it to the html but there still seems to be nothing that is working. I also added the animate.css and still there is no effect.
HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="animate.css">
<script language="javascript" type="text/javascript"src="javascript.js"></script>
<script language="javascript" type="text/javascript" src="wow.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<title> Vids </title>
<header> <img src="images/Logo.png" > </header>
</head>
<body>
<div class="vids-title">
<p>Vids</p>
</div>
<div class="video-1 wow slideInRight">
<h>Shia LaBeouf delivers the most intense motivational speech of all-time</h>
<iframe width="550" height="435"
src="https://www.youtube.com/embed/nuHfVn_cfHU">
</iframe>
</div>
<div class="video-2 wow slideInLeft">
<h>Truth or Drink (Exes)</h>
<iframe width="550" height="435"
src="https://www.youtube.com/embed/pxYpvNMbdXQ">
</iframe>
</div>
<div class="video-3 wow slideInRight">
<h>Walker broke his arm</h>
<iframe width="550" height="435"
src="https://www.youtube.com/embed/5-NXguyFFko">
</iframe>
</div>
javascript
$(function(){
new WOW().init();
});

There is nothing wrong with your code - its working fine
https://jsfiddle.net/k3qaoyxe/
I included the directories as external resources and then
$(function(){
new WOW().init();
});
worked fine.
Are you sure you have included all the libraries properly and they are loading correctly - check the network tab in your developer console.
Libraries included from cdn:
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.css
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js
https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js

For me, it worked well after calling WOW at the window load event in addition to document ready event:
//At the document ready event
$(function(){
new WOW().init();
});
//also at the window load event
$(window).on('load', function(){
new WOW().init();
});

<script language="javascript" type="text/javascript"src="javascript.js"></script>
<script language="javascript" type="text/javascript" src="wow.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
should probably be
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="wow.js"></script>
<script src="javascript.js"></script>
You can also get rid of language and type attributes, they're useless and not W3C compliant.

Related

Slick Slider is not loading in Browser

Hey guys I have this HTML code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
</head>
<body>
<div class="slider">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script src="main.js"></script>
</body>
</html>
and this JS code
$(document).ready(function () {
prompt("Prompt 1");
$('.slider').slick({
});
prompt("Prompt 2");
});
When I test this in browser (Chrome and Edge) the Slick plugin does not seem to be loading because the second prompt never shows up and the content inside .slider is one element below the other
However when I copy and paste both files in plunker every thing appears perfectly.
Any idea why this is happening?
I just figured it out. I was not including https: in my link tag and in one of the three script. Plunker was able to load the files but the browser could not do it without the https:
Solution:
instead of
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
add https:
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
same for the second script tag
I found that this is the right url
https://cdn.jsdelivr.net/npm/slick-carousel-latest#1.9.0/slick/slick.min.js

Lazy Loading not working, not displaying image?

I am trying to use a fade in lazy loading effect. Although I have followed all the instructions but still the image is not appearing! Can anybody help more? code:
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
</head>
<body>
<div class="collateral-body-image">
<img class="lazy" data-original="images/vivid-collateral.jpg" width="1920" height="594">
</div>
<script type="text/javascript">
$(function(){
$("img.lazy").lazyload({
effect: "fadeIn"
});
});
</script>
</body>
If you wanna get it running just load it using CDN urls.
Later you can download this scripts on your local and serve it using a local webserver on localhost.
Quick to-run code,
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
</head>
<body>
<div class="collateral-body-image">
<img class="lazy" data-original="http://montanasteele.com/wp-content/uploads/gallery/vivid-condos/vivid-collateral-02.jpg" width="800" height="800">
</div>
<script>
$(function(){
$("img.lazy").lazyload( {
effect: "fadeIn"
} );
} );
</script>

How to load stylesheets after loading and displaying page without any style

I was thinking instead of loading everything in parallel. I will allow to load and display the basic no-styled layout and then will load the css file after page has finished loading, but being a newbie in Javascript. I am not able to do this.
Till now I have tryed:
<head>
<script type='text/javascript'>
function addstyle()
{
document.getElementBytype('text/css').href='style.css';
}
</script>
<link rel="stylesheet" type="text/css" href="">
</head>
<body onload="addstyle()">
<h1>Good Morning</h1>
<p>Hello whats up</p>
<p>Hope you will have a great day ahead</p>
</body>
Here as you can see, I am trying to load style.css after the page is displayed in the browser, but it is not working.
Try this:
<head>
<script type='text/javascript'>
function addstyle()
{
document.getElementById('style').href='style.css';
}
</script>
<link rel="stylesheet" id="style" type="text/css" href="">
</head>
<body onload="addstyle()">
<h1>Good Morning</h1>
<p>Hello whats up</p>
<p>Hope you will have a great day ahead</p>
</body>
If you are using jQuery you can do something like this:
$(document).ready(function(){
var $style_element = $(document.createElement('style'));
$style_element.attr({href:'http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css', rel:'stylesheet', type:'text/css', id:'some_id'});
$('head').append($style_element);
});

Page loading differently, window.location vs href:

Hey still new to JS/CSS/HTML well basicly webdevelopment.
I have a page, for which I'm loading most of the stuff dynamicly. If i goto it by window.location="mapmode.jsp" Then it doesn't load properly but if I do an <a href> tag it loads fine.
Also if I do pagerefresh on the fine page, it loads in badly again.
Could be a jquerymobile thing maybe, but I'm just not sure..
The way I initialize the dynamic stuff might also be relevant so here it is:
$(document).on("pageinit", "#mapmode", function(event) {
initPageHeader();
});
Any help would be appreciated.
edit: mapmode.jsp:
<%--
Document : mapMode
Created on : Jul 12, 2012, 10:36:22 AM
Author : ame
--%>
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/jquery.mobile-1.1.0.css" />
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="mapmode" name="mapmode">
<div data-role="header" id="header" name="header">
<p>TEEEST</p>
</div><!-- /header -->
<div data-role="content" id="mapmodePageContent" name="mapmodePageContent">
<p>I'm the first page in mapMode!.</p>
</div><!-- /content -->
</div><!-- /page -->
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.0.js"></script>
<script type="text/javascript" src="js/cordova-1.9.0.js"></script>
<script type="text/javascript" src="js/LocalAction.js"></script>
<script type="text/javascript" src="js/firstPage.js"></script>
<script type="text/javascript" src="js/MenuLoader.js"></script>
<script type="text/javascript" src="js/PageHeader.js"></script>
<script type="text/javascript" src="js/Mapmode.js"></script>
</body>
</html>
jQuery Mobile sidesteps your browsers linking and history. It automatically wires this up for links (<a href>). But for JavaScript you need to use their changePage method.
For example:
$.mobile.changePage('pagename.jsp');
See the linked documentation for more information and options when using changePage.

jQuery mobile - DOM Exception 18

I am trying to experiment with jQuery mobile, but can't seem to get started.
I have the following HMTL file hosted on a local server:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
</body>
</html>
Which is causing
Javascript error: undefined SECUIRTY_ERR: DOM Exception 18
when accessed from my iPhone from http://192.168.1.1:8000/mobile.html
Did you link the CSS stylesheet file as well before the jquery script include tags?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
Also, in order for the page to show, you must contain content into containers like this:
<body>
<div data-role='page'>
<div data-role='header'>
Header goes here
</div>
<div data-role='content'>
Content goes here
</div>
</div>
</body>

Categories