Is there a way to display a tooltip or bubble as per the image below to show the highest value in the line graph? It should be visible at all time not just when roll over with the mouse.
Does jQplot support this? If not, is there any other graphing librabry that does this?
Many thanks.
With jqplot, this is possible using the pointLabels plugin:
JS:
$(document).ready(function(){
var line1 = [[0,14,null],[1,32,null], [2,41,null], [3,44,'Hello World!'], [4,40,null], [5,47,null], [6,53,null], [7,67,null]]; // Only the 'Hello World' will have a label
var plot1 = $.jqplot('chart1', [line1], {
title: 'Chart with Point Labels',
seriesDefaults: {
showMarker:false,
pointLabels: { show:true }
}
});
});
CSS for bubble (from here):
#chart1 .jqplot-point-label {
width: 100px;
height: 25px;
padding: 0px;
background: #CC857E;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-align: center;
padding-top: 10px;
margin-bottom: 8px;
}
.jqplot-point-label:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 10px 0;
border-color: #CC857E transparent;
display: block;
width: 0;
z-index: 1;
bottom: -10px;
left: 40px;
}
Produces this (fiddle here):
In the highstock you can use flags like this
Other options is using renderer to add custom shapes: http://api.highcharts.com/highstock#Renderer
Related
This question already has an answer here:
How to cut a circular part from an image?
(1 answer)
Closed 1 year ago.
I am trying to create image icons that have a status dot which emulates Slack member-icons (left).
How can I use CSS to add a transparent ring around the dot?
.memberIconRow {
display: flex;
.memberIconArea {
position: relative;
img {
width: 30px;
margin: 0 6px 0 0;
border-radius: 5px;
}
.statusDot {
background: #f00;
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
z-index: 2;
top: 21px;
left: 23px;
}
}
}
Some dirty trick what I think of is add border to your dot with the same background as your photo, in this case - a light yellow.
Like this -
.statusDot {
...
border:4px solid yellow; /* same color as you profile photo background */
}
In multiple background colours case, use css var() like;
:root {
--blue: #1e90ff;
}
.member-bg {
background-color: var(--blue);
}
. statusDot {
border: 4px solid var(--blue);
}
I'm using Contact Form 7 on a website of a client, and I styled the dropdown menu to this:
.wpcf7-form select {
-webkit-appearance: textfield;
color: #72858a;
font-size: 0.7777777778rem;
background-color: #e9edf0;
border-color: #e9edf0;
padding-top: 5px;
padding-bottom: 5px;
}
Unfortunately the arrows are missing now. Is there anyway to add an down arrow at the right side of the dropdown menu in the same color as the text? I tried different css classes found on this website, but nothing seems to work.
Image of how it displays now:
And how it should be:
The arrow could also be another arrow.
Any help would be appreciated much!
Regards,
Vasco
Here's an option for you... now... I used the span.wpcf7-form-control-wrap that was specifically around the select I was styling. You could also (instead) wrap the selects in a custom div.
This produced this result for me
I also made the triangle using clip-path, so you can change the colors or anything else.
/* Using the menu-813 which for me was the span around the select.*/
span.wpcf7-form-control-wrap.menu-813 {
position: relative;
height: 60px;
background: #e9edf0;
display: inline-block;
}
span.wpcf7-form-control-wrap.menu-813:after {
content: '';
position:absolute;
width: 15px;
height: 15px;
background: #000;
right:8px;
top: 20px;
z-index: 0;
clip-path: polygon(100% 0, 0 0, 50% 100%);
}
.wpcf7-form select {
-webkit-appearance: none;
appearance: none;
color: #72858a;
font-size: 0.7777777778rem;
background-color: transparent;
border-color: #e9edf0;
padding-top: 5px;
padding-bottom: 5px;
width: 300px;
z-index: 1;
position: relative;
padding-left: 2ch;
}
I have a header row in a google chart with text wrapping (which i know is the issue with the new api removing it) that is losing the background color when the user scrolls down.
When i have text wrap off, the header row background persists, but the view becomes unpleasant to look at because the table is now so wide and requires a horizontal scroll bar.
this is a good example of the problem. you will see what happens when you scroll down the records in the resulting table
http://jsfiddle.net/asgallant/VTK3g/5/
is there some way to define the css to keep that header row with the background color? Or any other way outside of this construct?
.google-visualization-table-tr-head-nonstrict {
font-weight: bold !important;
text-align: left !important;
font-size: 12px !important;
width: 600px !important;
background-image: white !important;
}
.tableRowGoogle {
border: 1px solid #EEE;
padding-right: 3px;
padding-left: 3px;
padding-top: 2px;
padding-bottom: 2px;
border-width: 1px 0px;
}
.headercellgoogle {
padding: 6px;
width: 150px;
}
.rowcellgoogle {
border: 1px solid #EEE;
padding-right: 3px;
padding-left: 3px;
padding-top: 2px;
padding-bottom: 2px;
border-width: 1px 0px;
width: 100%;
}
.rowNumberCell {
border: 1px solid #EEE;
padding-right: 3px;
padding-left: 3px;
padding-top: 2px;
padding-bottom: 2px;
border-width: 1px 0px;
text-align: right;
width: 15px;
}
and before drawing:
var options=null;
if(data.getNumberOfRows()>7){
options = {
width : 600,
height:235,
sort : 'enable',
sortColumn : 1,
sortAscending : false,
scrollLeftStartPosition : 50,
showRowNumber : true,
chartArea : chartArea,
cssClassNames : cssClassNames
};
}else{
options = {
width : 600,
sort : 'enable',
sortColumn : 1,
sortAscending : false,
scrollLeftStartPosition : 50,
showRowNumber : true,
chartArea : chartArea,
cssClassNames : cssClassNames
};
}
I just stumbled across the answer.
adding background-color to
.headercellgoogle {
padding: 6px;
width: 150px;
background-color: blue !important;
}
within the css has fixed this issue
I have done a calendar with plugin full-calendar. I want to change the style of today date.
.fc-unthemed .fc-today {
color: #fff !important;
background-color: red;
}
But the background color of the cell, have to be like the next image.
How could do it? Thanks
You can apply CSS to create border like a triangle and show it at the top-right corner.
.fc-day.fc-today {
position: relative;
}
.fc-day.fc-today::before,
.fc-day.fc-today::after {
content: '';
position: absolute;
top: 0;
right: 0;
border-color: transparent;
border-style: solid;
}
.fc-day.fc-today::before {
border-width: 1.5em;
}
.fc-day.fc-today::after {
border-radius: 0;
border-width: 1.5em;
border-right-color: red;
border-top-color: red;
}
The output will be shown like below.
Sometimes ago I found a Site, URL is http://www.fun71.com i saw that when i bring mouse to the image than image cation is hide. can someone tells he how can i do this with my site ?
is is done by CSS or by Javascript ? If it is CSS than please code for me. my Friend Gives e CSS which is
.wp-caption .wp-caption-text {
font-size: 0.8em;
line-height: 17px;
margin: 0px;
width: 100%;
padding: 0px 0px 5px;
background-color: #FFF;
position: absolute;
bottom: 0px;
left: 0px;
opacity: 0.7;
}
but it is not working for me. plz help me
What worked for me:
Removing the image title visible on hover by adding this to the theme functions.php
// Title Removal from WordPress image
add_filter( 'wp_get_attachment_image_attributes', 'remove_image_text');
function remove_image_text( $attr ) {
unset($attr['title']);
return $attr;
}
Source
if all your image captions have the wp-caption-text class then simply hide the text on hover as below.
.wp-caption .wp-caption-text {
font-size: 0.8em;
line-height: 17px;
margin: 0px;
width: 100%;
padding: 0px 0px 5px;
background-color: #FFF;
position: absolute;
bottom: 0px;
left: 0px;
opacity: 0.7;
display:block;
}
.wp-caption .wp-caption-text:hover{
display:none !important;
}