javascript - Using Visual Composer in Wordpress; raw js not being applied to my raw html

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=".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 poser, and html into Raw HTML), none of it works.

Can someone tell me why? Thanks

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./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 poser, and html into Raw HTML), none of it works.

Can someone tell me why? Thanks

Share Improve this question asked Jun 8, 2016 at 15:25 Arielle 111 silver badge4 bronze badges

Check your console log for any errors. Is the typed library being loaded? – Jonathan Eustace Commented Jun 8, 2016 at 16:23
How do I check in Wordpress for console log errors? Also see below for how I split up the code and put it into Raw JS and Raw HTML seperarely, I might have done something wrong there – Arielle Commented Jun 8, 2016 at 16:25

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

This is because Wordpress uses jQuery in no conflict mode. Replace all the $ in your js code with jQuery. For example :

 $(".reset").click(function(){
        $("#typed").typed('reset');
  });

should be

jQuery(".reset").click(function(){
    jQuery("#typed").typed('reset');
});

You should put your script after the element that your refer at the script. HTML elements must be done loading before script does.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Using Visual Composer in Wordpress; raw js not being applied to my raw html - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)