I have this working in Brackets, but can't seem to get it working in jsfiddle. I believe it has something to do with the calling of the external JS file.. I've tried adding it in the HTML field in this format:
<script type='text/javascript' src="jquery.contenthover.js"></script>
and also in the 'External Resources' section, but no such luck. Here is the current non-functioning jsfiddle: http://jsfiddle.net/uvb1u8y1/1/
This is the working code from Brackets:
.contenthover {
padding: 20px 20px 10px 20px;
}
.contenthover, .contenthover h3, contenthover a {
color: #fff;
}
.contenthover h3, .contenthover p {
margin: 0 0 10px 0;
line-height: 1.4em;
padding: 0;
}
.contenthover a.mybutton {
display: block;
float: left;
padding: 5px 10px;
background: #0b94e5;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.contenthover a.mybutton:hover {
background: #005588;
}
.demo {
margin: 20px auto;
}
.mybackground {
background: url(transparent_bg.png);
}
h1 { margin-top:150px;}
<div class="demo">
<h2>Slide effect with different speed</h2>
<img id="d2" src="1.jpg" width="300" height="240" />
<div class="contenthover">
<h3>Lorem ipsum dolor</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat. </p>
<p><a href="#" class="mybutton">Lorem ipsum</a></p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.contenthover.js"></script>
<script>
$('#d2').contenthover({
effect:'slide',
slide_speed:300,
overlay_background:'#000',
overlay_opacity:0.8
});
</script>
Where is jquery.contenthover.js supposed to come from?
JSFiddle aren't hosting a copy of it for you in the same directory that they generate the HTML document you write.
You need to use an absolute URL to somewhere where it is hosted.