javascript - Why do I get an undefined function error when importing into a cms? -

javascript - Why do I get an undefined function error when importing into a cms? -

i have page working fine normal, need embed cms. when renders fine within html editor, 1 time published not display things. inspecting published page uncaught type error: undefined not function. why not happening when load page singularly. function isn't working:

$(function() { //this line error $('#slider').slider({ disabled: true, range: 'min', value: 2013, min: 1960, max: 2013, animate: true, change: function(event, ui) { $('#header').text('year: ' + ui.value); xa = ui.value; //console.log(xa); slider2.setstate({'highvalue': ui.value}); slider2.draw(); setchartview(); } }); }); <div> <p style="text-align: center; margin-top: -50px;"> <p style="font-family: arial, sans-serif; font-style: italic; text-align: center; margin-top:-30px;">slide specify year or press play animate yearly changes</p> <div id="slider" style="width: 400px; margin-left: 28%"></div> </p> </div>

jsfiddle show how renders in normal browser. (note: have not bothered format correctly jsfiddle debugging, illustration of how should look. , ignore positioning, set fits correctly in cms. slider downwards bottom i'm having problem with.) edit: i'm using weebly.

slider problem getting uncaught typeerror: cannot read property 'nodename' of null when slider moved. html:

<div> <p style="text-align: center; margin-top: -50px;"> <img src="http://i.imgur.com/rsud8yd.png" id="startslider" width="40px" height="40px" style="cursor: pointer; text-align: center; position: relative; z-index: 2;"/> <p id ="header" style="text-align: center; font-family: arial, sans-serif;"><strong>year: 2013</strong></p> <p style="font-family: arial, sans-serif; font-style: italic; text-align: center; margin-top:-30px;">slide specify year or press play animate yearly changes</p> <div id="slider" style="width: 400px; margin-left: 28%"></div> </p> </div>

js:

$(function() { $('#slider').slider({ disabled: true, range: 'min', value: 2013, min: 1960, max: 2013, animate: true, change: function(event, ui) { $('#header').text('year: ' + ui.value); xa = ui.value; //console.log(xa); slider2.setstate({'highvalue': ui.value}); slider2.draw(); setchartview(); } }); }); var tmot; function scrollslider(){ var slidevalue; slidevalue = $("#slider").slider("value"); if (slidevalue >=0){ if (slidevalue == 2013){ slidevalue= -1; } $("#slider").slider("value", slidevalue + 1); //console.log($("#slider").slider("value")); tmot = settimeout(scrollslider, 500); } } $('#startslider').click(function (){ //onclick if ( $(this).hasclass('pause') ) { // button paused alter play $(this).attr('src', 'http://i.imgur.com/rsud8yd.png') cleartimeout(tmot); } else { // button play alter play $(this).attr('src', 'http://i.imgur.com/uel5r6t.png') scrollslider(); } $(this).toggleclass('pause') }) google.visualization.events.addlistener(genderpicker, 'statechange', setchartview); google.visualization.events.addonetimelistener(geochart, 'ready', function () { $('#slider').slider('enable'); setchartview(); });

this slider's value hooked default google charts slider's top value slider nicer @ , allows more customization.

again, working fine in normal browser window , when beingness embedded fumbling when published.

javascript jquery html5 content-management-system google-visualization