I am using Rickshaw javascript framework. Where there is one hover class is there. There I can modify the hover class to return my own result in the existing code.. In the same way I want to disable the hover to make the particular data visible without hovering. Is there any way to do that using CSS or javascript?
var hoverDetail = new Rickshaw.Graph.HoverDetail({
graph : graph,
formatter : function(series, x, y) {
var date = "Last Updated :" + '<br>' + '<span class="date">' + new Date(x * 1000).toUTCString() + '</span>';
var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
var content = swatch + mName[0] + '<br>' + "Average Price:" + "$" + parseInt(y) + '<br>' + "34 Products Included" + '<br>' + date;
return content;
}
});
Have you tried tweaking the display property in the CSS controlling the graph? http://www.w3schools.com/cssref/pr_class_display.asp
Related
I've created a map in mapbox GL JS, but cannot hide the tooltip content when the value is null.
Example.
Here is the full code: https://github.com/Ninlin/irystory/blob/main/index.html
I tried the following, but the if-statement does not work and removes the tooltip completely. What should I modify?
popup
.setLngLat(e.lngLat)
.setHTML("<h3>" + name + "</h3>" +
"<h4 id ='fn'>" + full_name + '</h4>')
.addTo(map);
if (full_name != null) {
document.getElementById('fn').style.display = 'block';
} else {
document.getElementById('fn').style.display = 'none';
};
Funny thing, full_name is actually a string, so this seems to be working:
if (full_name != "null") {
popup
.setLngLat(e.lngLat)
.setHTML("<h3>" + name + "</h3>" +
'<hr>' +
"<h4>" + full_name + '</h4>' +
'<h4>' + birth + '-' + death + '</h4>' +
'<p>'+occupation+'</p>')
.addTo(map);
}
So my script creates a element and changes it's innerHTML.
My problem is inside my script you can see this:
CurrentLine.innerHTML = '<p>' + user + " ⦙ " + size + " ⦙ "+ line + '<span id="LogColor" style="">' + color + '</span> </p>';
I'm needing help with this part of the innerHTML:
'<span id="LogColor" style="">' + obj.lineColor + '</span> </p>'
As you can see in my full script below after the child gets append. You see where I tried to change the span's style using a variable. It doesn't seem to change it's color though.
Full Script:
nvtSource.onmessage = function(e) {
var obj = JSON.parse(e.data);
var line = JSON.stringify(obj.line)
var size = JSON.stringify(obj.lineWidth)
var color = JSON.stringify(obj.lineColor) // Not needed, but defined anyways.
if (line == null)
{
//Do nothing..
}
else
{
var CurrentLine = document.createElement('p');
CurrentLine.innerHTML = '<p>' + user + " ⦙ " + size + " ⦙ "+ line + '<span
id="LogColor" style="">' + color + '</span> </p>';
document.getElementById("LineConsole").appendChild(CurrentLine);
document.getElementById("LogColor").style.color = obj.lineColor;
}
The part I tried to change it's style.
document.getElementById("LogColor").style.color = obj.lineColor;
I even tried to do something like:
document.getElementById("LogColor").style = "color:" + color + ";"
I don't exactly know what you are trying to do here but if you want the line you are adding to have the textcolor you could try:
'<span style="color:' + obj.lineColor + '">' + obj.lineColor + '</span> </p>'
provided your lineColor is a valid css color string like "red", "#ffffff" or "rgb(255,255,255)"
you would no longer need the id.
Below I have code that loops through a list of items and I want to remove a class "hazardous" from div class item-left if element.hazardous == no. The way I have it set up right now is not working and I'm wondering if it might be because I need to find a way to target the specific non hazardous array element.
What "hazardous" does in my CSS is it adds a solid red border if the hazardous class is active. Otherwise hide the red border.
function showProducts(items) {
var itemsHTML = [];
items.forEach(function(element) {
var url = element.url ? element.url : 'http://placehold.it/100x100'
itemsHTML.push('<li><div class="item-left hazardous" data-product-id="' + element.id + '"><p><span class = "prod-name">' +
'Product: ' + element.product + '</p></span><span class="prod-loc">' +
'Location: ' + element.location + '</span><span class="qty">' +
'Quantity: ' + element.quantity + '</span></div>' +
'<div class="item-right"><img src="' + url + '"></div></li>')
if (element.hazardous == 'no') {
$('.item-left').removeClass('hazardous')
}
});
$('.results').html(itemsHTML)
}
Instead of hardcoding the hazardous class in the first place, apply it conditionally before the markup is rendered to DOM:
function showProducts(items) {
var itemsHTML = [];
items.forEach(function(element) {
var classes = ['item-left', element.hazardous === 'no' ? '' : 'hazardous'].join(' ').trim()
var url = element.url ? element.url : 'http://placehold.it/100x100'
itemsHTML.push('<li><div class="' + classes + '" data-product-id="' + element.id + '"><p><span class = "prod-name">' +
'Product: ' + element.product + '</p></span><span class="prod-loc">' +
'Location: ' + element.location + '</span><span class="qty">' +
'Quantity: ' + element.quantity + '</span></div>' +
'<div class="item-right"><img src="' + url +
'"></div></li>')
});
$('.results').html(itemsHTML)
One of the problems you were facing was that you were trying to remove a class from a DOM element that didn't yet exist - at that point it was still a string.
On the following JS Fiddle
I have created a chart with a step line.
step: true
I am trying to show the old data in tooltip when there is no data for the series. E.g. on mouse over on 1 July 2015, I have the data so the tooltip show the data. But if you move forwared the tooltip don't show any thing.
Is the HighChart support some thing like show latest old data if no data is present.
You should use the tooltip.formatter and then use loop to find points with the same x. If not exists then extract last point from step series. Simple demo: http://jsfiddle.net/vs6scfch.
tooltip: {
shared: false,
formatter: function() {
var x = this.x,
series = this.series.chart.series,
stepSeries = series[1],
lastPointStepSerie = stepSeries.points[stepSeries.points.length - 1],
each = Highcharts.each,
txt = '<span style="font-size: 10px">' + Highcharts.dateFormat('%A, %b %d, %Y', this.x) + '</span><br/>';
each(series, function(s,i) {
each(s.points, function(p, j) {
if(p.x === x) {
txt += '<span style="color:' + p.color + '">\u25CF</span> ' + s.name + ': <b>' + p.y + '</b><br/>'
}
});
});
if(x > lastPointStepSerie.x) {
txt += '<span style="color:' + lastPointStepSerie.color + '">\u25CF</span> ' + stepSeries.name + ': <b>' + lastPointStepSerie.y + '</b><br/>'
}
return txt;
}
},
I've created a universal header dynamically that contains the date and time. Currently it acts and looks perfectly fine, but as soon as I remove the document.write('.') it disappears. It seems that I need any sort of write there in order for the dateDiv to appear, the '.' is just a random character used to fill the space.
//write date/time to div
var dateDiv = document.createElement('div');
dateDiv.innerHTML = '<p>' + d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_date + ', ' + curr_year + ' | ' + '<strong>' + curr_hour + ':' + curr_min + ' ' + a_p + '</strong>' + '</p>';
dateDiv.id = 'dateTime';
//dateDiv disappears without a document.write() before being appended to the body. need to fix
document.write('.');
document.body.appendChild(dateDiv);
I haven't been able to find an answer to this yet, anyone see the problem?
As loganfsmyth is implying its likely that your code is executed, when the document is not fully loaded. Try:
window.onload = function(){
//write date/time to div
var dateDiv = document.createElement('div');
dateDiv.innerHTML = '<p>' + d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_date + ', ' + curr_year + ' | ' + '<strong>' + curr_hour + ':' + curr_min + ' ' + a_p + '</strong>' + '</p>';
dateDiv.id = 'dateTime';
document.body.appendChild(dateDiv);
};
Edit:
See for example http://javascript.about.com/library/blonload.htm