I'm trying to get a decent understanding of rickshaw so I've been trying to add functionality to one of the simpler examples, but the range slider just isn't working. I've been looking at the code for this example to try to get it to work, but even though my code looks the same it just isn't working. Part of my problem is that I'm not sure what all the minified files contain, so I'm not sure when I need to include individual .js files for which functionality. As I'm sure you've noticed the documentation doesn't cover this,
so if any of you have any insight for me it would be greatly appreciated.
A note about the below code, I'm using jinja2 templates, thus the url_for functions
vvv This is the rendered code for the pertinent section of html vvv
<div id="preview" class="ui-slider ui-slider-horizontal ui-widget ui-widget content ui-corner-all">
<div class="ui-slider-range ui-widget-header" style="left: 0%; width: 100%;"></div>
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a>
</div>
-------------------------------------------------
<!doctype>
<head>
<link type="text/css" rel="stylesheet" source="http://jqueryui.com/slider/">
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='src/css/graph.css')}}">
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='src/css/detail.css')}}">
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='src/css/legend.css')}}">
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='src/css/lines.css')}}">
<script src="{{ url_for('static', filename='vendor/d3.min.js')}}"></script>
<script src="{{ url_for('static', filename='vendor/d3.layout.min.js')}}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
<script src="{{ url_for('static', filename='rickshaw.js')}}"></script>
<script src="{{ url_for('static', filename='extensions.js')}}"></script>
<script src="{{ url_for('static', filename='src/js/Rickshaw.Graph.RangeSlider.js')}}"></script>
<script src="{{ url_for('static', filename='src/js/Rickshaw.Graph.RangeSlider.Preview.js')}}"></script>
</head>
<body>
<div id="chart_container">
<div id="chart"></div>
<div id="legend_container">
<div id="smoother" title="Smoothing"></div>
<div id="legend"></div>
</div>
<div id="slider"></div>
</div>
<script>
// set up our data series with 50 random data points
var seriesData = [ [], [], [] ];
var random = new Rickshaw.Fixtures.RandomData(150);
for (var i = 0; i < 150; i++) {
random.addData(seriesData);
}
// instantiate our graph!
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
width: 960,
height: 500,
renderer: 'line',
stroke:true,
preserve:true,
series: [
{
color: "#c05020",
data: seriesData[0],
name: 'New York'
}, {
color: "#30c020",
data: seriesData[1],
name: 'London'
}, {
color: "#6060c0",
data: seriesData[2],
name: 'Tokyo'
}
]
} );
graph.render();
var slider = new Rickshaw.Graph.RangeSlider({
graph: graph,
element: document.getElementById('slider'),
});
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
graph: graph
} );
var legend = new Rickshaw.Graph.Legend( {
graph: graph,
element: document.getElementById('legend')
} );
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
graph: graph,
legend: legend
} );
var order = new Rickshaw.Graph.Behavior.Series.Order( {
graph: graph,
legend: legend
} );
var highlight = new Rickshaw.Graph.Behavior.Series.Highlight( {
graph: graph,
legend: legend
} );
</script>
Using the demo here: http://code.shutterstock.com/rickshaw/ and the standalone example: http://code.shutterstock.com/rickshaw/examples/extensions.html it only needs the id of the div to initialize.
I would advise removing the following from your head:
<link type="text/css" rel="stylesheet" source="http://jqueryui.com/slider/">
And using:
<link type="text/css" rel="stylesheet" source="http://code.jquery.com/ui/1.8.0/themes/smoothness/jquery-ui.csss">
I don't think this will cause an issue but it also does not improve anything.
I also see they use:
<script>
jQuery.noConflict();
</script>
They execute this before the jQuery UI is included. I see no issue with:
var slider = new Rickshaw.Graph.RangeSlider({
graph: graph,
element: document.getElementById('slider'),
});
If it were me, I would suggests:
// set up our data series with 50 random data points
var seriesData = [
[],
[],
[]
];
var random = new Rickshaw.Fixtures.RandomData(150);
var graph, slider, hoverDetail, legend, shelving, order, highlight;
for (var i = 0; i < 150; i++) {
random.addData(seriesData);
}
// instantiate our graph!
graph = new Rickshaw.Graph({
element: document.getElementById("chart"),
width: 960,
height: 500,
renderer: 'line',
stroke: true,
preserve: true,
series: [{
color: "#c05020",
data: seriesData[0],
name: 'New York'
}, {
color: "#30c020",
data: seriesData[1],
name: 'London'
}, {
color: "#6060c0",
data: seriesData[2],
name: 'Tokyo'
}]
});
graph.render();
slider = new Rickshaw.Graph.RangeSlider({
graph: graph,
element: $("#slider")[0]
});
hoverDetail = new Rickshaw.Graph.HoverDetail({
graph: graph
});
legend = new Rickshaw.Graph.Legend({
graph: graph,
element: $("#legend")[0]
});
shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
graph: graph,
legend: legend
});
order = new Rickshaw.Graph.Behavior.Series.Order({
graph: graph,
legend: legend
});
highlight = new Rickshaw.Graph.Behavior.Series.Highlight({
graph: graph,
legend: legend
});
Example: https://jsfiddle.net/Twisty/qoofL8kb/4/
After fiddling with it I realized the problem was the way I was trying to link to the jQuery-ui css file. Instead I downloaded the files I needed and added them to the project, linking them that way.
Related
Why does my javascript just show the first row from the table on Highcharts and not the other rows?
Everything works fine except highcharts only shows data of the first row on the graph and not all rows.What am I missing?
http://live.datatables.net/febayaxa/10/edit
Please see the code below. Thanks in advance.
$(document).ready(function() {
var tableData = [];
var tableCategories = [];
var table = $("#example1").DataTable({
initComplete: function(settings, json) {
let api = new $.fn.dataTable.Api(settings);
// get the seris data as an array of numbers from the table row data:
api.rows().data().toArray()[0].forEach(function(element, index) {
if (index > 0) {
tableData.push(parseFloat(element.replace(/,/g, '')));
}
});
// get the x-axis caregories from the table headings:
api.columns().header().toArray().forEach(function(element, index) {
if (index > 0) {
tableCategories.push($(element).html());
}
});
}
});
var myChart = Highcharts.chart("container", {
chart: {
type: "column"
},
title: {
text: "Test Data"
},
xAxis: {
categories: tableCategories
},
series: [{
data: tableData
}]
});
});
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<meta charset=utf-8 />
</head>
<body>
<div id="container" style=" width: 100%; height: 400px;"></div>
<div class="container">
<table id="example1" class="display nowrap" width="100%"><thead>
<tr><th>Year</th><th>2012</th><th>2013</th><th>2014</th><th>2015</th><th>2016</th><th>2017</th><th>2018</th><th>2019</th><th>2020</th><th>2021</th></tr></thead>
<tr ><td> Data</td><td>3,823</td><td>3,823</td><td>3,954</td><td>3,959</td><td>3,955</td><td>3,956</td><td>3,843</td><td>3,699</td><td>3,472</td><td>3,551</td></tr></tbody>
<tr ><td> Data</td><td>8,000</td><td>3,823</td><td>3,954</td><td>3,959</td><td>3,955</td><td>3,956</td><td>3,843</td><td>3,699</td><td>3,472</td><td>3,551</td></tr></tbody>
</tbody></table>
I try to place the value of my sensor in a HTML script (see interface).
I found a example on internet. I would like to have only the blocks with the name Temp en Hum (in running mode are the values visible in the block). But when I delete the graphs, I lost the actual value also.
How can I delete the graphs and hold the actual values in the blocks (temp and Hum)?
Interface
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Flask App </title>
<!-- Bootstraps Java Scipts Links -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- JQuery links -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--High CHART LIVE -->
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<!--Gauge -->
<script type="text/javascript" src="http://pubnub.github.io/eon/lib/eon.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-5 jumbotron p-2 mx-1">
<h1 class="sensor1"> Sensor : </h1>
</div>
<br>
<div class="col-5 jumbotron p-2 mx-1">
<h1 class="sensor2">Sensor :</h1>
</div>
<br>
</div>
</div>
<style>
<!--
.jumbotron{
widows: 150px;
height: 220px;
justify-content: center;
}
.row{
justify-content: center;
}
-->
</style>
<div class="container-fluid">
<!-- Example row of columns -->
<div class="row">
<div class="container-fluid" id="data-temperature">
</div>
</div>
</div>
<br>
<br>
<br>
<div class="container-fluid">
<!-- Example row of columns -->
<div class="row">
<div class="container-fluid" id="data-humidity">
</div>
</div>
</div>
<script>
var chartTemperatue;
var chartHumidity;
function requestData()
{
// Ajax call to get the Data from Flask
var requests = $.get('/data');
var tm = requests.done(function (result)
{
// Temperature
var seriesTemperature = chartTemperatue.series[0],
shiftTemperature = seriesTemperature.data.length > 20;
// Humidity
var seriesHumidity = chartHumidity.series[0],
shiftHumidity = seriesTemperature.data.length > 20;
// Add the Point
// Time Temperature\
var data1 = [];
data1.push(result[0]);
data1.push(result[1]);
// Add the Point
// Time Humidity
var data2 = [];
data2.push(result[0]);
data2.push(result[2]);
chartTemperatue.series[0].addPoint(data1, true, shiftTemperature);
chartHumidity.series[0].addPoint(data2, true, shiftHumidity);
$(".sensor1").text("");
$(".sensor1").text("Temperature : " + Math.round(data1[1]) );
$(".sensor2").text("");
$(".sensor2").text("Humidity : " + Math.round(data2[1]) );
// call it again after one second
setTimeout(requestData, 2000);
});
}
$(document).ready(function()
{
// --------------Chart 1 ----------------------------
chartTemperatue = new Highcharts.Chart({
chart:
{
renderTo: 'data-temperature',
defaultSeriesType: 'area',
events: {
load: requestData
}
},
title:
{
text: 'Temperature'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
color : '#c23d23',
lineColor: '#303030',
name: 'Temperature',
data: []
}]
});
// --------------Chart 1 Ends - -----------------
chartHumidity = new Highcharts.Chart({
chart:
{
renderTo: 'data-humidity',
defaultSeriesType: 'area',
events: {
load: requestData
}
},
title:
{
text: 'Humidity'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
lineColor: '#1d82b8',
name: 'Humidity',
data: []
}]
});
});
</script>
</body>
</html>
Python code
from flask import Flask,render_template,url_for,request,redirect, make_response
import random
import json
from time import time
from random import random
from flask import Flask, render_template, make_response
app = Flask(__name__)
#app.route('/', methods=["GET", "POST"])
def main():
return render_template('index.html')
#app.route('/data', methods=["GET", "POST"])
def data():
# Data Format
# [TIME, Temperature, Humidity]
Temperature = random() * 100
Humidity = random() * 55
data = [time() * 1000, Temperature, Humidity]
response = make_response(json.dumps(data))
response.content_type = 'application/json'
return response
if __name__ == "__main__":
app.run(debug=True)
I implemented this https://fancyproductdesigner.com/jquery/ which works fine. My query is when I the uploaded images on demo site it fix on the product's shape. For example, When I upload a logo on a cap the logo flexibly fixes on the shape of the cap. But in my integration, this is not working.
my code is:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fancy Product Designer</title>
<!-- Style sheets -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- The CSS for the plugin itself - required -->
<link rel="stylesheet" type="text/css" href="css/FancyProductDesigner-all.min.css" />
<!-- Include required jQuery files -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<!-- HTML5 canvas library - required -->
<script src="js/fabric.min.js" type="text/javascript"></script>
<!-- The plugin itself - required -->
<script src="js/FancyProductDesigner-all.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
var $yourDesigner = $('#clothing-designer'),
pluginOpts = {
productsJSON: 'json/products.json', //see JSON folder for products sorted in categories
designsJSON: 'json/designs.json', //see JSON folder for designs sorted in categories
stageWidth: 1200,
editorMode: false,
smartGuides: true,
fonts: [{
name: 'Helvetica'
}, {
name: 'Times New Roman'
}, {
name: 'Pacifico',
url: 'Enter_URL_To_Pacifico_TTF'
}, {
name: 'Arial'
}, {
name: 'Lobster',
url: 'google'
}],
customTextParameters: {
colors: false,
removable: true,
resizable: true,
draggable: true,
rotatable: true,
autoCenter: true,
boundingBox: "Base"
},
customImageParameters: {
draggable: true,
removable: true,
resizable: true,
rotatable: true,
colors: '#000',
autoCenter: true,
boundingBox: "Base"
},
actions: {
'top': ['download', 'print', 'snap', 'preview-lightbox'],
'right': ['magnify-glass', 'zoom', 'reset-product', 'qr-code', 'ruler'],
'bottom': ['undo', 'redo'],
'left': ['manage-layers', 'info', 'save', 'load']
}
},
yourDesigner = new FancyProductDesigner($yourDesigner, pluginOpts);
});
</script>
</head>
<body>
<div id="main-container">
<h3 id="clothing">Clothing Designer</h3>
<div id="clothing-designer" class="fpd-container fpd-shadow-2 fpd-topbar fpd-tabs fpd-tabs-side fpd-top-actions-centered fpd-bottom-actions-centered fpd-views-inside-left"> </div>
<br />
</div>
</body>
</html>
I have a simple paper-input that I'm trying to get the value from but for some reason I'm not having any luck. Here's a simplified version of the HTML where I set up the button and the onclick event:
<paper-action-dialog id="addAnnotation" transition="paper-dialog-transition-center">
<core-header-panel flex id="annotation-box">
<core-toolbar class="graph-sets-header">
<span flex>TEST</span>
</core-toolbar>
<br>
<paper-input-decorator label="Add your annotation">
<paper-autogrow-textarea>
<textarea id="annotationSource"></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<paper-button dismissive hover >Cancel</paper-button>
<paper-button affirmative hover onclick="getAnnotation()">Submit</paper-button>
</core-header-panel>
</paper-action-dialog>
and here's my JS function:
function getAnnotation(){
var toolText = document.getElementById('annotationSource').value;
console.log(toolText);
}
Here's a plunker with most of it running (except I can't get the value of the paper-input to show in the console: http://plnkr.co/edit/1PAi13ISgP7mNXDMNStF?p=preview
I'm sure could make this a polymer template, but I need to pass the value to a bunch of other functions in the main HTML and I keep having problems with moving data in and out of a template so I'd like to avoid that if I can.
Adding some more flow to make it clearer*
To bring up the annotation box you need to click on any of the points on the graph in the plunker - doing so brings up the paper-input box, which I want to use to create an annotation... eventually adding the annotation text to a tooltip that will appear by doing a mouse over on the dot that I generate
With a template using 'auto-binding' it's easier to access the annotationSource element
var chart = c3.generate({
bindto: '#graph',
padding: {
top: 30
},
data: {
xs: {
'data1': 'x1',
'data2': 'x2',
},
columns: [
['x1', 1, 3, 4, 5, 7, 10],
['x2', 3, 5, 7, 10, 12],
['data1', 2, 3, 6, 7.5, 8, 9.5],
['data2', 2, 4, 4.5, 10, 11]
],
onclick: function(d, i) {
console.log("onclick", d, i);
console.log(i.getAttribute('cx'));
var setCX = Number(i.getAttribute('cx'));
document.getElementById("someTemplate").$.addAnnotation.toggle()
var svg = d3.select("svg");
var circle = svg.append("circle")
.attr("cy", 10)
.attr("cx", (setCX + 40))
.attr("r", 5);
}
}
});
function getAnnotation() {
var annotationSource = document.getElementById("someTemplate").$.annotationSource;
var toolText = annotationSource.value;
console.log(toolText);
}
<script src="https://www.polymer-project.org/webcomponents.min.js?20141211"></script>
<link href="https://www.polymer-project.org/components/paper-dialog/paper-dialog.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-dialog/paper-action-dialog.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-input/paper-input.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-button/paper-button.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-fab/paper-fab.html" rel="import">
<link rel="import" href="https://www.polymer-project.org/components/paper-input/paper-autogrow-textarea.html">
<link href="http://c3js.org/css/c3-b03125fa.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://c3js.org/js/d3.min-3bff8220.js" type="text/javascript"></script>
<script src="http://c3js.org/js/c3.min-78d63552.js" type="text/javascript"></script>
<template id="someTemplate" is="auto-binding">
<paper-action-dialog id="addAnnotation" transition="paper-dialog-transition-center">
<core-header-panel flex id="annotation-box">
<core-toolbar class="graph-sets-header">
<span flex>TEST</span>
</core-toolbar>
<br>
<paper-input-decorator label="Add your annotation">
<paper-autogrow-textarea>
<textarea id="annotationSource"></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<paper-button dismissive hover>Cancel</paper-button>
<paper-button affirmative hover onclick="getAnnotation()">Submit</paper-button>
</core-header-panel>
</paper-action-dialog>
</template>
<div id="graph">
</div>
ok without using a template I've used the window.event to obtain the paper button element that is being clicked, then from there grabbed the annotation-box element then used querySelector to get the annotationSource element. There maybe a better way but it works
var chart = c3.generate({
bindto: '#graph',
padding: {
top: 30
},
data: {
xs: {
'data1': 'x1',
'data2': 'x2',
},
columns: [
['x1', 1, 3, 4, 5, 7, 10],
['x2', 3, 5, 7, 10, 12],
['data1', 2, 3, 6, 7.5, 8, 9.5],
['data2', 2, 4, 4.5, 10, 11]
],
onclick: function(d, i) {
console.log("onclick", d, i);
console.log(i.getAttribute('cx'));
var setCX = Number(i.getAttribute('cx'));
document.querySelector('#addAnnotation').toggle()
var svg = d3.select("svg");
var circle = svg.append("circle")
.attr("cy", 10)
.attr("cx", (setCX + 40))
.attr("r", 5);
}
}
});
function getAnnotation() {
var paperBtnElement = window.event.toElement || window.event.relatedTarget || window.event.target;
var toolText = paperBtnElement.parentElement.querySelector("#annotationSource").value;
console.log(toolText);
}
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 12px;
padding: 8px;
font: 10px sans-serif;
background: #ddd;
border: solid 1px #aaa;
border-radius: 8px;
pointer-events: none;
}
<script src="https://www.polymer-project.org/webcomponents.min.js?20141211"></script>
<link href="https://www.polymer-project.org/components/paper-dialog/paper-dialog.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-dialog/paper-action-dialog.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-input/paper-input.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-button/paper-button.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-fab/paper-fab.html" rel="import">
<link rel="import" href="https://www.polymer-project.org/components/paper-input/paper-autogrow-textarea.html">
<link href="http://c3js.org/css/c3-b03125fa.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://c3js.org/js/d3.min-3bff8220.js" type="text/javascript"></script>
<script src="http://c3js.org/js/c3.min-78d63552.js" type="text/javascript"></script>
<paper-action-dialog id="addAnnotation" transition="paper-dialog-transition-center">
<core-header-panel flex id="annotation-box">
<core-toolbar class="graph-sets-header">
<span flex>TEST</span>
</core-toolbar>
<br>
<paper-input-decorator label="Add your annotation">
<paper-autogrow-textarea>
<textarea id="annotationSource"></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<paper-button dismissive hover>Cancel</paper-button>
<paper-button affirmative hover onclick="getAnnotation()">Submit</paper-button>
</core-header-panel>
</paper-action-dialog>
<div id="graph">
</div>
I am currently using the REDMOND theme in my application and need to use the THEMEROLLER theme for qtip2 tooltips ONLY. Since I have defined the tooltip as a widget, it should use the themeroller them. What I cannot decide is how & where to add the themeroller css file in my javascript file.
Please help.
The css files in the head section are :
<link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui-1.8.19.custom.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.qtip.min.css" />
<link rel="stylesheet" type="text/css" href="css/wms11.css" />
The javascript files at the end of my js file are :
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.qtip.min.js" type="text/javascript"></script>
<script src="js/wms11.js" type="text/javascript"></script>
My qtip2 statements are :
$(this).qtip({
content: {
text: function(api) {
return(return_array[POPUP_HTML_STR]);
},
title: {
text: function(api) {
return(qtip_title);
}
}
},
position: {
viewport: $(window)
},
style: {
classes: 'ui-widget ui-tooltip-rounded ui-tooltip-shadow ui-tooltip-dark',
widget: true,
tip: 'top center',
width: 220,
height: 200,
padding: 5,
background: 'black',
textAlign: 'left',
border: {
width: 7,
radius: 5,
color: '#A2D959'
},
tip: 'top center',
},
show: {
ready: true
}
});
As stated by P6345uk you should set the style.def = false to remove any custom styling of qTip2. Worked for me.
$('.selector').qtip({
content: 'I won\'t be styled by the pages Themeroller styles',
style: {
widget: true, // Use the jQuery UI widget classes
def: false // Remove the default styling (usually a good idea, see below)
}
})