Here is the code that works on my browser which I am trying to apply to my WordPress page:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Get jQuery -->
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="js/typed.js"></script>
<script>
$(function(){
$("#typed").typed({
// strings: ["We are creative.", "We are hard-working.", "We
are collaborative.", "Try it out!"],
stringsElement: $('#typed-strings'),
typeSpeed: 50,
backDelay: 600,
loop: true,
contentType: 'text', // or text
// defaults to false for infinite loop
loopCount: false,
callback: function(){ foo(); },
resetCallback: function() { newTyped(); }
});
$(".reset").click(function(){
$("#typed").typed('reset');
});
});
function newTyped(){ /* A new typed object */ }
function foo(){ console.log("Callback"); }
</script>
</head>
<body>
<div id="typed-strings">
<p>We are creative.</p>
<p>We are collaborative.</p>
<p>We are connected.</p>
<p>We are Clarke.</p>
</div>
<span id="typed">We are</span>
<style type="text/css">
body {
font-size: 80px;
color: blue;
}
</style>
</body>
</html>
When I break this code apart into js and html for wordpress (I put js into the Raw JS option in the visual composer, and html into Raw HTML), none of it works.
Can someone tell me why? Thanks
This is because WordPress uses jQuery in no conflict mode. Replace all the
$in your js code withjQuery. For example :should be
You should put your script after the element that your refer at the script. HTML elements must be done loading before script does.