Can anyone please show a simple example of using BeautyTips? - javascript

Looking for a simple example of how beautytips can be used( HTML + CSS included)?
My requirement is this - I am displaying product names.On hovering of product name,I want to display products image in the tooltip.How can I do this?
thanks

Here is a website with some samples:
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html
Assuming that is that you are referring to this jquery plugin.

Here it is. You just have to make sure the js files are getting loaded. Note that i'm using hoverintent lib here to give a delay before anything pops up.
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery.bt.min.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.minified.r6.js">
<div id="mydiv">Mouse over here to see it poppin'</div>
<script>
$("mydiv").bt("Text to pop out",{
showTip: function(box){
$(box).fadeIn(300);
},
hideTip: function(box, callback){
$(box).animate({opacity: 0}, 100, callback);
},
hoverIntentOpts: {
interval: 1000,
timeout: 200
},
fill: '#E1EEF8',
cornerRadius: 10,
strokeWidth: 0,
shadow: true,
shadowOffsetX: 3,
shadowOffsetY: 3,
shadowBlur: 8,
shadowColor: 'rgba(0,0,0,.9)',
shadowOverlap: false,
noShadowOpts: {strokeStyle: '#999', strokeWidth: 2},
positions: ['top', 'bottom','right']
});
</script>

Related

Cytoscape - graph entire screen

i need to render graphs and i want to use cytoscape (plotly dash cytoscape).
Because with the plotly dash wrapper it is possible to write everything in python and i don't need to split my (small) application into a backend and a frontend part.
I want that the graph uses the entire screen and orders the nodes in a good and readable way.
Unfortunately i don't find a description of all possible parameters in the api documentation.
Instead of the rendering in picture i would like to have it in way.
Do you have any idea how to solve this?
The graph has the entire space available, i can move it with my mouse everwhere i want.
These are my current properties:
cyto.Cytoscape(
id='knowledge-graph',
layout={
'name': 'cose',
'idealEdgeLength': 1000,
'nodeOverlap': 500,
'refresh': 20,
'fit': True,
'padding': 30,
'randomize': False,
'componentSpacing': 1000,
'nodeRepulsion': 400000,
'nestingFactor': 5,
'gravity': 800,
'numIter': 1000,
'initialTemp': 200,
'coolingFactor': 0.95,
'minTemp': 1.0
},
style={
"width": "100%",
"height": "calc(100vh - 150px)",
},
stylesheet=[
{'selector': 'edge', 'style': {'label': 'data(label)', 'curve-style': 'haystack',
'haystack-radius': 0,
'width': 5,
'opacity': 0.5,
'line-color': '#a8eae5'}, 'text-wrap': 'wrap'},
{'selector': 'node', 'style': {'label': 'data(label)', 'background-color': '#30c9bc'}, 'text-wrap': 'wrap'},
]
)
Thank you!
You can try using cytoscape-spread layout which first applies a force-directed layout for initial positions and then uses voronoi-based method to spread the nodes in the remaining space. You can check its demos here and here.

JavaScript Graphics

I'm trying to create some graphics similar to this one in the MaterializeCSS website, but I cannot figure out where it is from, I look over the whole MaterializeCSS website and it is not part of the framework, and I cannot find in the code what they are using
I'm especially interested in those little boxes: (https://ibb.co/7vZVjZ8)
Small square graphics
Example website can be found here:
https://themes.materializecss.com/pages/admin-dashboard.html
I guess that you can use Chartist.js with some modifications do it, look at my code pen I create an example for you
https://codepen.io/icaronz/pen/qBbvmNR
Basically you need to set Chartist.js to not have any axis values:
var chart = new Chartist.Line('.ct-chart', {
labels: [1, 2, 3, 4],
series: [
[1, 4, 2, 5],
[2, 3, 1, 4]
]
}, {
showPoint: false,
showLine: false,
showArea: true,
fullWidth: true,
showLabel: false,
axisX: {
showGrid: false,
showLabel: false,
offset: 0
},
axisY: {
showGrid: false,
showLabel: false,
offset: 0
},
chartPadding: 0,
low: 0,
width: 400,
height: 200
});
Also, don't forget to import the necessary CSS and JS from they CDN
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
i think that's created with chartjs https://www.chartjs.org/

How to render a canvas gauge data from a Java Script file?

I am creating a new radial gauge and I am using canvas for this purpose. The data that I have entered inside the canvas tag needs to be placed in another file and then rendered on load of the page.
How can I do this? Please help me with it.
The following is my code.
I tried many methods but it is not working for me. I also need to pass data to this to make the pointer move. But I need this functionality to happen first. Please help me.
var gauge = new RadialGauge({
renderTo: 'canvas-id',
width: 400,
height: 400,
//units: "Km/h",
minValue: 0,
startAngle: 90,
ticksAngle: 180,
valueBox: false,
maxValue: 100,
majorTicks: [
"0",
"20",
"40",
"60",
"80",
"100"
],
minorTicks: 4,
strokeTicks: true,
borders: true,
needleType: "arrow",
needleWidth: 1,
needleCircleSize: 5,
needleCircleOuter: true,
needleCircleInner: true,
animationDuration: 1500,
animationRule: "circular"
}).draw();
<html>
<head>
<title>Gauges as Components</title>
<script src="gauge.min.js"></script>
</head>
<body>
<canvas
data-type="radial-gauge"
data-width="400"
data-height="400"
data-min-value="0"
data-start-angle="90"
data-ticks-angle="180"
data-value-box="false"
data-max-value="100"
data-major-ticks="0,20,40,60,80,100"
data-minor-ticks="4"
data-stroke-ticks="true"
data-border-shadow-width="0"
data-borders="false"
data-needle-type="arrow"
data-needle-width="1"
data-needle-circle-size="5"
data-needle-circle-outer="true"
data-needle-circle-inner="true"
data-animation-duration="1500"
data-animation-rule="circular"
></canvas>
</body>
</html>

How to center the text in the middle of donut hole pie chart?

I want to create a donut hole pie chart to represent my data.
I came across this site : http://rendro.github.io/easy-pie-chart/ .
I follow their instruction all the way toward the end. I am close to get it working, but I don't know how to center the text in the middle of my pie chart.
Can someone help me with that ?
This is what I have so far.
<div class="chart_1" data-percent="90" >
<span>6</span>
</div>
<script type="text/javascript">
$(function() {
$('.chart_1').easyPieChart({
//Configuration goes here
easing: 'easeOutElastic',
delay: 3000,
barColor: '62ae41',
scaleColor: false,
lineWidth: 10,
trackWidth: 10,
animate: false,
lineCap: 'square',
});
});
</script>
Here is my result...
I was able to get it centered just with a slight modification:
added a "#" to the barColor
removed a trailing comma
$(function() {
$('.chart_1').easyPieChart({
//Configuration goes here
easing: 'easeOutElastic',
delay: 3000,
barColor: '#62ae41',
scaleColor: false,
lineWidth: 10,
trackWidth: 10,
animate: false,
lineCap: 'square'
});
});
http://jsfiddle.net/imamathwiz/gu3aL84e/

jquery bookshelf Slider modifications

I am creating book shelf using jquery bookshelf Slider. Its Working good but i need some modifications in my book self.
Our Book self demo link
Book shelf demo
Our modifications are given below :
Default load time title and icons are hide.
if we need to click title or icons. show the title or icon.
Our Script is given below
<script type="text/javascript">
jQuery(document).ready(function() {
//define custom parameters
$.bookshelfSlider('#bookshelf_slider', {
'item_width': '100%', //responsive design > resize window to see working
'item_height': 320,
'products_box_margin_left': 30,
'product_title_textcolor': '#ffffff',
'product_title_bgcolor': '#c33b4e',
'product_margin': 20,
'product_show_title': true,
'show_title_in_popup': true,
'show_selected_title': true,
'show_icons': true,
'buttons_margin': 15,
'buttons_align': 'center', // left, center, right
'slide_duration': 800,
'slide_easing': 'easeOutQuart',
'arrow_duration': 800,
'arrow_easing': 'easeInOutQuart',
'video_width_height': [500,290],
'iframe_width_height': [500,330]
}
);
});//ready
</script>
We are already try to change the 'product_show_title': true, to
'product_show_title': false,
But its not working for me. so please advise..
Set the opacity of the title and icons properly after plugin initialization.
//define custom parameters
$.bookshelfSlider('#bookshelf_slider', {
'item_width': 605,
'item_height': 720,
'products_box_margin_left': 30,
'product_title_textcolor': '#ffffff',
'product_title_bgcolor': '#c33b4e',
'product_margin': 30,
'product_show_title': true,
'show_title_in_popup': true,
'show_selected_title': true,
'show_icons': true,
'buttons_margin': 15,
'buttons_align': 'center', // left, center, right
'slide_duration': 800,
'slide_easing': 'easeInOutExpo',
'arrow_duration': 800,
'arrow_easing': 'easeInOutExpo',
'video_width_height': [600,600],
'iframe_width_height': [600,600]
}
);
$(".show_hide_titles, .show_hide_icons").css('opacity','0.5');
$(".product_title, .icons_sprite").css('opacity','0');
DEMO

Categories