{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Explosion°爆炸 的问题《Codes works jsfiddle not working on dreamweaver》','https://www.manongdao.com/q-750017.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
This seems to be a more common problem, but when I try to use code off of jsfiddle (html/css/javascript) it doesn't work. I'm trying to get a CSS animation to repeat onclick, and found some on links on other questions to jsfiddle that work. However, they do not work when I try to do them on DreamWeaver, and I get no error.
I have http://jsfiddle.net/vxcYJ/45/ , http://jsfiddle.net/AndyE/9LYAT/, and http://jsfiddle.net/6tZd3/, and none work. On dreamweaver, I believe the third jsfiddle would translate into something like this:<!DOCTYPE>
<head>
<style>
.animate {
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
}
.initial {
-webkit-transform: rotate(0deg);
}
.final {
-webkit-transform: rotate(360deg);
}
</style>
<script>
document.getElementById('button').addEventListener('click', function()
{
this.setAttribute('class', 'animate final');
});
document.getElementById('button').addEventListener('webkitTransitionEnd', function() {
this.setAttribute('class', 'initial');
});
</script>
</head>
<body>
<button type="button" id="button" class="animate initial">Click me!</button>
</body>
</html>
one more thing, at the end of the button, this->​ appears for some reason. If anyone could help me out, that would be greaty appreciated.
Your code is failing for two reasons. Firstly, there are two illegal characters at different places in your code. The one you can see which appears next to the button when you run the page, and the second, which is causing an error in the JavaScript, after the webkitTransitionEnd event listener. Secondly, when you try to add the event listeners to your button in the head of your document, it fails because the DOM has not registered with the browser yet.
The following code should work. You might also consider looking at the jQuery document ready function.
Are you trying to view the site in the dreamweaver browser? You are using
-webkitproperties. These will only work in webkit browsers such as chrome or safari. Similarly,-moztags will only work in firefox.I assume dreamweaver doesn't read the
-webkittags. Try using-otags for opera,-webkitfor safari and chrome,-mozfor firefox and-msfor IE. Chrome and safari will read -webkit css but ignore-mozand-osince they don't know how to read it.W3 schools has some good examples of supporting all browsers except IE: http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transition4 http://www.w3schools.com/css3/css3_transitions.asp
The
transformcss property (-webkit-transformin your code) will work in IE if you add-ms-transform: http://www.w3schools.com/css3/css3_2dtransforms.asp