I've made a pie chart using Chart.js, and I'd like to detect when a segment is hovered over. I've found plenty of documentation regarding manipulating the tooltips that appear when hovering over segments, but nothing regarding doing something else when a tooltip would appear. Is this possible?
I know this has already been given an accepted answer, and im not sure if this does satisfy your use case but Chart js released an update (maybe a month ago or so) that allowed for custom tooltips. This allows for a custom function to run when a tooltip would normally have been drawn. They have an example in the samples section of git hub
in short you define a custom function
Chart.defaults.global.customTooltips = function(tooltip){//do what you want}
here is the example they give in the samples with an extra bit of text added to an html tooltip. The only annoying thing I see is that don't provide the segment/point/bar that triggered this tooltip which would be really handy as then you could do some thing to the graph knowing this information but you are given the tooltip data which means you can do something with that instead.
Chart.defaults.global.customTooltips = function (tooltip) {
// Tooltip Element
var tooltipEl = $('#chartjs-tooltip');
// Hide if no tooltip
if (!tooltip) {
tooltipEl.css({
opacity: 0
});
return;
}
// Set caret Position
tooltipEl.removeClass('above below');
tooltipEl.addClass(tooltip.yAlign);
// Set Text
tooltipEl.html(tooltip.text+ " anythign custom you want");
// Find Y Location on page
var top;
if (tooltip.yAlign == 'above') {
top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
} else {
top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
}
// Display, position, and set styles for font
tooltipEl.css({
opacity: 1,
left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
top: tooltip.chart.canvas.offsetTop + top + 'px',
fontFamily: tooltip.fontFamily,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle,
});
};
var pieData = [{
value: 300,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Red"
}, {
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
}, {
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}, {
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
}, {
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}];
var ctx1 = document.getElementById("chart-area1").getContext("2d");
window.myPie = new Chart(ctx1).Pie(pieData);
var ctx2 = document.getElementById("chart-area2").getContext("2d");
window.myPie = new Chart(ctx2).Pie(pieData);
#canvas-holder {
width: 100%;
margin-top: 50px;
text-align: center;
}
#chartjs-tooltip {
opacity: 1;
position: absolute;
background: rgba(0, 0, 0, .7);
color: white;
padding: 3px;
border-radius: 3px;
-webkit-transition: all .1s ease;
transition: all .1s ease;
pointer-events: none;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#chartjs-tooltip.below {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#chartjs-tooltip.below:before {
border: solid;
border-color: #111 transparent;
border-color: rgba(0, 0, 0, .8) transparent;
border-width: 0 8px 8px 8px;
bottom: 1em;
content:"";
display: block;
left: 50%;
position: absolute;
z-index: 99;
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
}
#chartjs-tooltip.above {
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
}
#chartjs-tooltip.above:before {
border: solid;
border-color: #111 transparent;
border-color: rgba(0, 0, 0, .8) transparent;
border-width: 8px 8px 0 8px;
bottom: 1em;
content:"";
display: block;
left: 50%;
top: 100%;
position: absolute;
z-index: 99;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
<script src="https://raw.githack.com/chartjs/Chart.js/v1.1.1/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="canvas-holder">
<canvas id="chart-area1" width="50" height="50" />
</div>
<div id="canvas-holder">
<canvas id="chart-area2" width="300" height="300" />
</div>
<div id="chartjs-tooltip"></div>
The way I'm doing it is slightly more simple:
assuming you already have some code defining the canvas like
canvas = document.getElementById("chart"); and your pie chart is
window.myPie. You can use the onmousemove javascript event, or jQuery hover
canvas.onmousemove = function(evt) {
var el = window.myPie.getElementsAtEvent(evt);
//do something with the el object to display other information
//elsewhere on the page
}
In my case highlight a table row based on the value of el[0]._index
No...
There's nothing in the ChartJS API to override or extend the tooltip,
But, a workaround...
You can modify the draw method of the Chart.Tooltip class. This would allow you to "do something else" when the tooltip would normally be rendered by ChartJS.
The draw method you want to tie into starts at line 1351 of the source here:
https://github.com/nnnick/Chart.js/blob/master/src/Chart.Core.js
For v2.0 version:
Chart.defaults.global.hover.onHover = function(x) {
if(x[0]) {
var index = x[0]._index;
// Place here your code
}
};
UPDATE 2020 : For Chartjs 3.5
Here is a quick fix that I used with Chartjs 3.5 to trigger events on hover over Doughnut or Pie parts. It relies on using the existing onHover option :
onHover : (event, activeElements) => {
if (activeElements.length > 0) {
// get active chart element
let elt = activeElements[0];
// retrieve element label
let lbl = elt._model.label;
// Get element value
let elt_index = elt._chart.tooltip._data.labels.indexOf(lbl);
let val = elt._chart.tooltip._data.datasets[0].data[elt_index];
// trigger your event here :
// ex for vuejs : this.$emit('element-hovered', { label : lbl, value : val });
}
else {
// No active elements
}
}
Working fine so far :)
If found a small trick using customTooltip, too. I searched for a solution to get an Event if the user moves with the mouse over a Value and a Tooltip is shown. Mainly i liked to present in a different frame some detail informations besides the raw Plot values.
var options = {
customTooltips: function (tooltip)
{
if (!tooltip) return;
tooltip.custom = false;
tooltip.draw();
OnEntrySelected(tooltip.title);
tooltip.custom = this;
}
}
The custom tooltip is drawn using tooltip.draw(), but this calls the custom method. I set it to false to avoid a recursive loop, call the default behavior and take the data i need for my callback (OnEntrySelected) which is in this case the string of the x-Axis label. This event is triggered whenever the tooltip is shown.
Related
I'm Like to add two buttons, like [REMOVE FROM LAST] and [REMOVE ALL] to remove marks on the image.
I have added a function to clear array, but when I click the button, nothing happen.
Marks are not removed, maybe this approach is not a correct way to do this.
Can anyone help me to do this please? Thanks to all.
var App = App || {};
App.points = []; // Use array to store objects like [{x,y,r}, {x,y,r} ...]
jQuery(function($) {
const $radius = $(".radius");
$('#image_preview').on('click', function(ev) {
const $this = $(this),
r = parseInt($radius.val().trim(), 10), // Parse as Integer radix 10
o = $this.offset(),
y = ev.pageY - o.top,
x = ev.pageX - o.left;
$("<div />", {
"class": "circle",
css: {
top: y,
left: x,
width: r * 2,
height: r * 2,
},
appendTo: $this // append to #image_preview!
});
// Append data to App.points
App.points.push({x,y,r});
// Test
console.log( App.points )
});
});
function clearArray() {
return App.points = []
}
#image_preview {
position: relative; /* Add this since child are absolute! */
background: #eee;
margin: 15px;
cursor: crosshair;
}
#image_preview img {
display: inline-block;
vertical-align: top;
}
.circle {
position: absolute;
background: rgba(255, 0, 0, 0.2) url("https://i.imgur.com/qtpC8Rf.png") no-repeat 50% 50%;
border-radius: 50%;
transform: translate(-50%, -50%); /* use translate instead of JS calculations */
}
.radius {
position: absolute;
}
<button onclick="clearArray();">Clear Array</button>Radius: <input type="text" value="20" class="radius" name="radius">
<div id="image_preview">
<img src="https://i.imgur.com/B7VsSq3.png" alt="graph">
</div>
<script src="//code.jquery.com/jquery-3.1.0.js"></script>
I have a div that has a gradient border. So I want to give this div an animation and as soon as it is scrolled to this div, I want border-gradient turn around itself. I have no idea how to do it that's why I am asking it direcly.
<div class="border-gradient">
</div>
.border-gradient {
height: 230px;
width: 100%;
border: 5px solid transparent;
border-image: linear-gradient(190deg, rgba(205, 0, 98,0) 10%, rgba(205, 0, 98,0.5));
border-image-slice: 1;
}
I was unable to find a css solution for animating the border, it may be achievable using images.
Anyways, here is a javascript solution
var bored = document.getElementsByClassName("border-gradient")[0];
var anim = {'running':0,'deg':0,'time':0};
var animator;
var boredy = bored.getBoundingClientRect().top;//grab the y of the element relative to the top of the web page
checkscroll();//check if element onscreen initially
window.onscroll = checkscroll;//check if element is onscreen when the user scrolls
function checkscroll() {
if(!anim.running && window.scrollY + window.innerHeight >= boredy) {
anim.running = 1; anim.time = 0;//reset the animation, set running to 1 so the animation won't retrigger while already running
startanim();
}
}
function startanim() {
animator = setInterval(function() {
anim.deg += 1;
anim.time += 50;
bored.style = `border-image:linear-gradient(${anim.deg}deg, rgba(205, 0, 98,0) 10%, rgba(205, 0, 98,0.5)); border-image-slice: 1;`;
if(anim.time >= 10000){window.clearInterval(animator); anim.running = 0}
},50);//start a loop that continousouly updates the border
}
Css:
.border-gradient {
height: 230px;
width: 100%;
border: 5px solid transparent;
border-image: linear-gradient(0deg, rgba(205, 0, 98,0) 10%, rgba(205, 0, 98,0.5));
border-image-slice: 1;
margin-top:150vh;
}
Improvements can certainly be made. So play around with it and tweak it to your liking.
you can animate border as:
.border-gradient {
border: solid 5px #FC5185;
transition: border-width 0.6s linear;
}
.border-gradient:hover { border-width: 10px; }
I have a bootstrap popover that I cannot seem to get to show up inside the element I am calling it on, next to my mouse. I have searched far and wide through the popper.js documentation and have tried using the 'offset' modifier, as well as adjusting just about every other parameter I could think of, in different configurations, but it seems no matter what I do the popover stubbornly wants to be positioned towards one of its four string directions and won't show up inside the element I am calling it on, next to my current cursor position.
Here's an example to give you an idea of what I have tried. Again, I am trying to have the popover popup positioned next to where my mouse click occurs, within a large div.
$(".a_large_div").click(function(e) {
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
var height = $('.popover').height();
$(this).popover({
placement: 'top',
offset:'-'+(relX + 1000)+'px,-'+(relY)+'px',
title: 'My Popover',
html:true,
trigger: 'manual',
modifiers: {
flip: { enabled: false },
inner: { order: 700, enabled: true },
applyStyle: { order: 900, enabled: true, fn: (data, options) =>
{
data.styles.left = "1000px";
console.log(data, options);
return data;
}
},
offset: { order: 0, enabled: true, offset: '-'+(relX + 1000)+'px,-'+(relY)+'px' },
},
boundary: this,
content: function() {return $("#my_popover_content").html();},
delay: 100
}).on('show.bs.popover', function() {
// execute some code
}).on('shown.bs.popover', function() {
// execute some code
}).on('inserted.bs.popover', function() {
Object.assign($('.popover')[0].style,{left:""+relX+"px !important",top:""+relY+"px !important"});
}).on('hidden.bs.popover', function() {
// execute some code
}).on('hide.bs.popover', function() {
// execute some code
});
$(this).popover('toggle');
$('.popover').css('left', (relX) + 'px');
$('.popover').css('top', (relY) + 'px');
I have tried all these different positioning methods but to no avail, it seems the 'placement' modifier overrides all of them and Im not sure at what point during the popper.js update process I would be able to override it's positioning. Thanks in advance for all your help.
Looking back on this question, I can see that this was a classic case of ‘doing too much’, where I just have way too much going on such that isolating a specific functionality in order to build and test was challenging.
Figured I’d circle back and answer this since I have since figured out that this is a relatively straightforward problem.
Popover can be given position absolute and can be positioned on click by assigning 'left' and 'top' css values offered by the x and y coordinates of the click event object’s metadata.
var data=[
{"x":10,"y":10,"height":100},
{"x":120,"y":10,"height":120},
{"x":230,"y":10,"height":150},
{"x":340,"y":10,"height":180},
{"x":450,"y":10,"height":200}
];
var bar = d3.select("#barchart").append("svg")
.attr("width",1000)
.attr("height",250)
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x",function(d){return d.x })
.attr("y",function(d){return 250 - d.height})
.attr("width",90)
.attr("height",0)
.on('click', function() {
var left = d3.mouse(this)[0];
var top = d3.mouse(this)[1];
var theHeight = $('.popover').height();
$('.popover').show();
$('.popover').css('left',(left+10)+'px');
$('.popover').css('top', (top-(theHeight/2)-10)+'px');
})
.style("fill","blue")
.transition()
.duration(4000)
.attr("height",function(d){return(d.height)});
.popover {
position:absolute;
display:none;
background:#fff;
border: 1px solid #999;
padding:10px;
width:auto;
box-shadow:0 0 10px rgba(0, 0, 0, .5);
}
.popover:after, .popover:before {
right: 100%;
border: solid transparent;
content:" ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.popover:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #ffffff;
border-width: 10px;
top: 50%;
margin-top: -10px;
}
.popover:before {
border-color: rgba(201, 201, 201, 0);
border-right-color: #c9c9c9;
border-width: 11px;
top: 50%;
margin-top: -11px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<div id="barchart"></div>
<div class="popover">
<p>hello world</p>
</div>
https://codepen.io/modularmoon/pen/gOLooeb
I'm here to get answers to why my javascript isn't working for the follow button because I add all cdn and scripts but still not working. What am I doing wrong in my code?
$(document).ready(function(){
$("#follow-button").click(function(){
if ($("#follow-button").text() == "+ Follow"){
// *** State Change: To Following ***
// We want the button to squish (or shrink) by 10px as a reaction to the click and for it to last 100ms
$("#follow-button").animate({ width: '-=10px' }, 100, 'easeInCubic', function () {});
// then now we want the button to expand out to it's full state
// The left translation is to keep the button centred with it's longer width
$("#follow-button").animate({ width: '+=45px', left: '-=15px' }, 600, 'easeInOutBack', function () {
$("#follow-button").css("color", "#fff");
$("#follow-button").text("Following");
// Animate the background transition from white to green. Using JQuery Color
$("#follow-button").animate({
backgroundColor: "#2EB82E",
borderColor: "#2EB82E"
}, 1000 );
});
}else{
// *** State Change: Unfollow ***
// Change the button back to it's original state
$("#follow-button").animate({ width: '-=25px', left: '+=15px' }, 600, 'easeInOutBack', function () {
$("#follow-button").text("+ Follow");
$("#follow-button").css("color", "#3399FF");
$("#follow-button").css("background-color", "#ffffff");
$("#follow-button").css("border-color", "#3399FF");
});
}
});
});
#follow-button {
color: #3399FF;
font-family: "Helvetica";
font-size: 10pt;
background-color: #ffffff;
border: 1px solid;
border-color: #3399FF;
border-radius: 3px;
width: 85px;
height: 30px;
position: absolute;
top: 50px;
left: 50px;
cursor: hand;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="follow-button"> Follow</button>
Is there a solution to fix this type of error? I tried google but no answers. I thought you guys could help.
Thanks for all the help!
Some issues in your codes:
easeInOutBack is not defined, so uses built-in easing function=linear or swing instead
$("#follow-button").css("color", "#fff"); will cause text and background are same color, so uses #2EB82E instead.
You can check the details for JQuery animate().
After fix them, the codes will be like below:
$(document).ready(function(){
$("#follow-button").click(function(){
if ($("#follow-button").text() == "+ Follow"){
// *** State Change: To Following ***
// We want the button to squish (or shrink) by 10px as a reaction to the click and for it to last 100ms
$("#follow-button").animate({ width: '-=10px' }, 100, 'linear', function () {});
// then now we want the button to expand out to it's full state
// The left translation is to keep the button centred with it's longer width
$("#follow-button").animate({ width: '+=45px', left: '-=15px' }, 600, 'linear', function () {
$("#follow-button").css("color", "#2EB82E");
$("#follow-button").text("Following");
// Animate the background transition from white to green. Using JQuery Color
$("#follow-button").animate({
backgroundColor: "#2EB82E",
borderColor: "#2EB82E"
}, 1000 );
});
}else{
// *** State Change: Unfollow ***
// Change the button back to it's original state
$("#follow-button").animate({ width: '-=25px', left: '+=15px' }, 600, 'linear', function () {
$("#follow-button").text("+ Follow");
$("#follow-button").css("color", "#3399FF");
$("#follow-button").css("background-color", "#ffffff");
$("#follow-button").css("border-color", "#3399FF");
});
}
});
});
#follow-button {
color: #3399FF;
font-family: "Helvetica";
font-size: 10pt;
background-color: #ffffff;
border: 1px solid;
border-color: #3399FF;
border-radius: 3px;
width: 85px;
height: 30px;
position: absolute;
top: 50px;
left: 50px;
cursor: hand;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="follow-button"> Follow</button>
You need to use jQuery's html() function, as text() doesn't do what you think it should do - http://api.jquery.com/text/
$("#follow-button").html("Following");
if ($("#follow-button").text() == "+ Follow")
You're comparing the button text with "+ Follow" yet your button text is just "Follow" so your if block will never run.
Also see Adam's answer for the correct way to get/set the contents of your button.
The easings you are using are not defined, and that is why you are getting the error.
Please check jQuery Easings Main Page for more info.
I have fixed your error, but I guess your code still needs some improvements style and coloring wise.
$(document).ready(function(){
$("#follow-button").click(function(){
if ($("#follow-button").text() == "+ Follow"){
// *** State Change: To Following ***
// We want the button to squish (or shrink) by 10px as a reaction to the click and for it to last 100ms
$("#follow-button").animate({ width: '-=10px' }, 100, 'linear', function () {});
// then now we want the button to expand out to it's full state
// The left translation is to keep the button centred with it's longer width
$("#follow-button").animate({ width: '+=45px', left: '-=15px' }, 600, 'linear', function () {
$("#follow-button").css("color", "#fff");
$("#follow-button").text("Following");
// Animate the background transition from white to green. Using JQuery Color
$("#follow-button").animate({
backgroundColor: "#2EB82E",
borderColor: "#2EB82E"
}, 1000 );
});
}
else{
// *** State Change: Unfollow ***
// Change the button back to it's original state
$("#follow-button").animate({
width: '-=25px',
left: '+=15px'
}, 600, 'linear', function () {
$("#follow-button").text("+ Follow");
$("#follow-button").css("color", "#3399FF");
$("#follow-button").css("background-color", "#ffffff");
$("#follow-button").css("border-color", "#3399FF");
});
}
});
});
#follow-button {
color: #3399FF;
font-family: "Helvetica";
font-size: 10pt;
background-color: #ffffff;
border: 1px solid;
border-color: #3399FF;
border-radius: 3px;
width: 85px;
height: 30px;
position: absolute;
top: 50px;
left: 50px;
cursor: hand;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="follow-button"> Follow</button>
Ok I am using a piece of javascript called Captify. It adds a small pop up to images for you with text in. Works great in all browsers accept IE9. IE9 fades everything within the popup div. I have read its a child element issue but I can not fix it. As captify can not be found anywhere online any more I will include all the code for that along with the css below then the code on my page. If anyone could help me stop the fade I would be very grateful as it has coursed me major problems.
Java
jQuery.fn.extend({
captify: function(o){
var o = $.extend({
speedOver: 'fast', // speed of the mouseover effect
speedOut: 'normal', // speed of the mouseout effect
hideDelay: 500, // how long to delay the hiding of the caption after mouseout (ms)
animation: 'fade', // 'fade' or 'slide'
prefix: '', // text/html to be placed at the beginning of every caption
className: 'caption' // the name of the CSS class to apply to the caption box
}, o);
$(this).each(function(){
var img = this;
$(this).load(function(){
$this = img;
if (this.hasInit){
return false;
}
this.hasInit = true;
var over_caption = false;
var over_img = false;
//pull the label from another element if there if there is a
//valid element id inside the rel="..." attribute, otherwise,
//just use the text in the title="..." attribute.
var captionLabelSrc = $('#' + $(this).attr('rel'));
var captionLabelTitle = !captionLabelSrc.length ? $(this).attr('title') : captionLabelSrc.html();
var captionLabelHTML = !captionLabelTitle.length ? $(this).attr('alt') : captionLabelTitle;
captionLabelSrc.remove();
var toWrap = this.parent && this.parent.tagName == 'a' ? this.parent : $(this);
var wrapper = toWrap.wrap('<div></div>').parent();
wrapper.css({
overflow: 'hidden',
padding: 0,
fontSize: 0.1
})
wrapper.addClass('caption-wrapper');
wrapper.width($(this).width());
wrapper.height($(this).height());
//transfer the border properties from the image to the wrapper
$.map(['top','right','bottom','left'], function(i){
$.map(['style','width','color'], function(j){
var key = 'border-'+i+'-'+j;
wrapper.css(key, $(img).css(key));
});
});
$(img).css({border: '0 none'});
//transfer the margin properties
$.map(['top','right','bottom','left'], function(t){
var key = 'margin-'+t;
wrapper.css(key, $(img).css(key));
});
//create two consecutive divs, one for the semi-transparent background,
//and other other for the fully-opaque label
var caption = $('div:last', wrapper.append('<div></div>')).addClass(o.className);
var captionContent = $('div:last', wrapper.append('<div></div>')).addClass(o.className).append(o.prefix).append(captionLabelHTML);
//override hiding from CSS, and reset all margins (which could have been inherited)
$('*',wrapper).css({margin: 0}).show();
//ensure the background is on bottom
var captionPositioning = jQuery.browser.msie ? 'static' : 'relative';
caption.css({
zIndex: 1,
position: captionPositioning
});
//clear the backgrounds/borders from the label, and make it fully-opaque
captionContent.css({
position: captionPositioning,
zIndex: 2,
background: 'none',
border: '0 none',
opacity: 1.0
});
caption.width(captionContent.outerWidth());
caption.height(captionContent.outerHeight());
//pull the label up on top of the background
captionContent.css({ 'marginTop': -caption.outerHeight() });
//function to push the caption out of view
var cHide = function(){
if (!over_caption && !over_img)
caption.animate({ marginTop: 0 }, o.speedOut);
};
//when the mouse is over the image
$(this).hover(
function(){
over_img = true;
if (!over_caption) {
caption.animate({
marginTop: -caption.height()
}, o.speedOver);
}
},
function(){
over_img = false;
window.setTimeout(cHide, o.hideDelay);
}
);
//when the mouse is over the caption on top of the image (the caption is a sibling of the image)
$('div', wrapper).hover(
function(){ over_caption = true; },
function(){ over_caption = false; window.setTimeout(cHide, o.hideDelay); }
);
});
//if the image has already loaded (due to being cached), force the load function to be called
if (this.complete || this.naturalWidth > 0){
$(img).trigger('load');
}
});
}
});
Now the CSS for captify
/* caption styling */
.caption {
color: #ffffff;
padding: 0.6em;
font-size: 10px;
display: none;
cursor: default;
/* remove these 4 lines below if you want
the caption to span the whole width of the
image
width: 82%;
/*border-top: 1px solid #303030;
border-right: 1px solid #303030;*/
/* background / transparency */
background: #000000;
opacity: 0.7;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
margin-bottom: 5px;
}
.caption a {
border: 0 none;
text-decoration: none;
background: #000000;
padding: 0.3em;
color:#FFFF00;
}
.caption a:hover {
text-decoration:underline;
}
.caption-wrapper {
float: left;
}
br.c { clear: both; }
now my page
<link href="/js/captify/sample.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="/js/captify/captify.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('img.captify').captify({
// all of these options are... optional
// ---
// speed of the mouseover effect
speedOver: 150,
// speed of the mouseout effect
speedOut: 200,
// how long to delay the hiding of the caption after mouseout (ms)
hideDelay: 100,
// 'fade' or 'slide'
animation: 'fade',
// text/html to be placed at the beginning of every caption
prefix: '',
// the name of the CSS class to apply to the caption box
className: 'caption'
});
});
</script>
<div id="services">
<ul >
<li >
<img src="/images/sports.png" width="169" height="121" class="captify" rel="caption1" />
<div id="caption1"><h4>Watersports</h4>
<p>View all the sports we offer on the lakeside.</p></div>
</li></ul></div>
and the extra css i use
#services {
width: 570px;
margin-top: 370px;
height: 130px;
}
#services ul li {
float: left;
height: 128px;
width: 184px;
margin-right: 5px;
}
Since IE opacity handling sucks I suggest you ditch all together. For the background, you can use a transparent png(1x1 repeating) to get the same effect. Or if you are using IE only css, you can define the background to use the png for IE only. I think this will save you lots of time trying to get across this issue
Edit: of course do not forget to set opacity to one in the IE css
I know this question is old but someone might find this useful:
I did this in my page;
$('img.captify').captify({
animation: 'always-on',
opacity: '0.7'
});
$('div.caption-bottom').wrapInner('<span class="caption-text"></span>');
And in the style sheet I put this;
.caption-text{position:absolute;}
#Mark King,
thanks it works for me
but i changed absolute to relative instead.
.caption-text{
display:block;
position:relative;
}