Hi
What I would like to know is how to add small animations jquery plugins to spice up my page like I do easily in plain html pages.
I cant find any complete guide on how to add custom javascript to a SPECIFIC page in a theme. Also adding the custom javascript in a no conflict like (jQuery.noConflict?) mode would be awesome - because all the WP themes has a lot of javascript that could be conflicting right? Or educate me here on how to solve conflicting scripts?
I would like to add this script to my “Salient” theme :
https://codepen.io/justincavery/pen/qHfrl:
This is what it contains :
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>RWD SVG Line Drawing</title>
<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/normalize.css">
</head>
<body>
<div id="RWDis-logo">
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/7635/jquery.lazylinepainter-1.4.1.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*
* Lazy Line Painter - Path Object
* Generated using 'SVG to Lazy Line Converter'
*
* http://lazylinepainter.info
* Copyright 2013, Cam O'Connell
*
*/
var pathObj = {
"RWDis-logo": {
"strokepath": [
{
"path": "M238.2,402.6c-2.3-170.7,2.9-362.7,2.9-362.7 l49.4-7.1l74.1-10.6l17.7,445.9",
"duration": 143
},
{
"path": "M 241.2,39. L 255.3,60.6 373.9,44.2 ",
"duration": 143
},
{
"path": "M 364.7,22. L 389.6,83.8 410.6,471.8 412.2,486.8 ",
"duration": 243
},
{
"path": "M305.6,235.5c0,0,43.4-4.9,53.4,44.2 c0,0,2.1,51.4-53.4,54.4c0,0-47.3,2.6-49.6-45.5C255.9,288.6,255.3,241.9,305.6,235.5z",
"duration": 143
},
{
"path": "M294.1,334.3c0.2,23.8,0.3,47.5,0.5,71.3",
"duration": 143
},
{
"path": "M 322.8 424.7 L 320.6 332.8",
"duration": 143
},
{
"path": "M 290.6 32.9 L 292.6 236.8",
"duration": 143
},
{
"path": "M 315.4 29.3 L 318.7 235.4",
"duration": 143
},
{
"path": "M 255.3 60.6 L 252.7 406.4",
"duration": 143
},
{
"path": "M 303 52.1 L 292.6 33.9",
"duration": 165
},
{
"path": "M 325 48.9 L 317 30.6",
"duration": 198
},
{
"path": "M 391.8,12 L 367,81.1 240.6,95.2 261.2,129.5 ",
"duration": 132
},
{
"path": "M 366.9,13 L 349.8,91.8 263,101.5 263,181.5 352.3,170.8 349.1,92.7 ",
"duration": 100
},
{
"path": "M 355.7,263. L 353.6,197.5 263.1,205.6 262.3,260.6 ",
"duration": 176
},
{
"path": "M 263 406 L 263 315",
"duration": 143
},
{
"path": "M 356.9 295.6 L 360.6 454.2",
"duration": 153
},
{
"path": "M 291.6 290.6 L 322.8 275.2",
"duration": 143
},
{
"path": "M 299.5 278.5 L 329.7 319.7",
"duration": 153
},
{
"path": "M 95.4,473. L 97.4,433.4 299.5,422.6 301.5,471.4 ",
"duration": 99
},
{
"path": "M 105.2,415. L 286.1,407.2 291.6,406.9 301.5,420.7 333.9,436.7 312.9,417.4 294.6,408.2 ",
"duration": 99
},
{
"path": "M97.2,436.7l-8.7-3.3c0.3-1,19-17.8,19-17.8",
"duration": 199
},
{
"path": "M 358.4 358.4 L 263.1 363.6",
"duration": 129
},
{
"path": "M 263.1 389.9 L 358.4 387.2",
"duration": 199
},
{
"path": "M 376 50.3 L 388.5 470.5",
"duration": 199
},
{
"path": "M 383.4 68.5 L 401.4 473.5",
"duration": 199
}
],
"dimensions": {
"width": 1500,
"height": 1500
}
}
};
var pathOl = {
"map": {
"strokepath": [
{
"path": "M238.2,402.6c-2.3-170.7,2.9-362.7,2.9-362.7 l49.4-7.1l74.1-10.6l17.7,445.9",
"duration": 143
},
{
"path": "M 241.2,39. L 255.3,60.6 373.9,44.2 ",
"duration": 143
},
{
"path": "M 364.7,22. L 389.6,83.8 410.6,471.8 412.2,486.8 ",
"duration": 243
},
{
"path": "M305.6,235.5c0,0,43.4-4.9,53.4,44.2 c0,0,2.1,51.4-53.4,54.4c0,0-47.3,2.6-49.6-45.5C255.9,288.6,255.3,241.9,305.6,235.5z",
"duration": 143
},
{
"path": "M294.1,334.3c0.2,23.8,0.3,47.5,0.5,71.3",
"duration": 143
},
{
"path": "M 322.8 424.7 L 320.6 332.8",
"duration": 143
},
{
"path": "M 290.6 32.9 L 292.6 236.8",
"duration": 143
},
{
"path": "M 315.4 29.3 L 318.7 235.4",
"duration": 143
},
{
"path": "M 255.3 60.6 L 252.7 406.4",
"duration": 143
},
{
"path": "M 303 52.1 L 292.6 33.9",
"duration": 165
},
{
"path": "M 325 48.9 L 317 30.6",
"duration": 198
},
{
"path": "M 391.8,12 L 367,81.1 240.6,95.2 261.2,129.5 ",
"duration": 132
},
{
"path": "M 366.9,13 L 349.8,91.8 263,101.5 263,181.5 352.3,170.8 349.1,92.7 ",
"duration": 100
},
{
"path": "M 355.7,263. L 353.6,197.5 263.1,205.6 262.3,260.6 ",
"duration": 176
},
{
"path": "M 263 406 L 263 315",
"duration": 143
},
{
"path": "M 356.9 295.6 L 360.6 454.2",
"duration": 153
},
{
"path": "M 291.6 290.6 L 322.8 275.2",
"duration": 143
},
{
"path": "M 299.5 278.5 L 329.7 319.7",
"duration": 153
},
{
"path": "M 95.4,473. L 97.4,433.4 299.5,422.6 301.5,471.4 ",
"duration": 99
},
{
"path": "M 105.2,415. L 286.1,407.2 291.6,406.9 301.5,420.7 333.9,436.7 312.9,417.4 294.6,408.2 ",
"duration": 99
},
{
"path": "M97.2,436.7l-8.7-3.3c0.3-1,19-17.8,19-17.8",
"duration": 199
},
{
"path": "M 358.4 358.4 L 263.1 363.6",
"duration": 129
},
{
"path": "M 263.1 389.9 L 358.4 387.2",
"duration": 199
},
{
"path": "M 376 50.3 L 388.5 470.5",
"duration": 199
},
{
"path": "M 383.4 68.5 L 401.4 473.5",
"duration": 199
}
],
"dimensions": {
"width": 1500,
"height": 1500
}
}
};
/*
* INDEX.JS Lazy Line Painter - Path Object
* Generated using 'SVG to Lazy Line Converter'
*
* http://lazylinepainter.info
* Copyright 2013, Cam O'Connell
*
*/
/*
Setup and Paint your lazyline!
*/
$(document).ready(function(){
$('#RWDis-logo').lazylinepainter(
{
"svgData": pathObj,
"drawSequential":true,
"delay":700,
"strokeWidth": 2,
"strokeColor": "#e09b99"
}).lazylinepainter('paint');
});/*
Setup and Paint your lazyline!
*/
$(document).ready(function(){
$('#map').lazylinepainter(
{
"delay":2000,
"svgData": pathOl,
"strokeWidth": 2,
"strokeColor": "#e09b99"
}).lazylinepainter('paint');
});/*
Setup and Paint your lazyline!
*/
$(document).ready(function(){
$('#undefined').lazylinepainter(
{
"svgData": pathObj,
"strokeWidth": 2,
"strokeColor": "#e09b99"
}).lazylinepainter('paint');
});/*
Setup and Paint your lazyline!
*/
$(document).ready(function(){
$('#undefined').lazylinepainter(
{
"svgData": pathObj,
"strokeWidth": 2,
"strokeColor": "#e09b99"
}).lazylinepainter('paint');
});
/*
Setup and Paint your lazyline!
*/
$(document).ready(function(){
$('#RWDis-logo').lazylinepainter(
{
"svgData": pathObj,
"strokeWidth": 2,
"strokeColor": "#e09b99"
}).lazylinepainter('paint');
});
I just cant make it work and not sure what best practice is. I have tried different wp-plugins like “Scrips n Styles”. I have tried Advanced Custom Post types (could not find a complete guide).
I found this similar question but not sure how this works : http://wordpress.stackexchange.com/questions/66921/adding-custom-javascript-to-skeleton-child-theme