My canvasjs chart floats right then on inspection gets back to its original position. What might be the issue?
I have 2 dynamic canvasjs charts in my site inside to tab-body. The 1st chart is displaying fine but when I click on the 2nd tab the chart inside it floats left and then after inspection gets to its original position. All of the data is fine just want to know the js or css issue.
i did the php like this data are all fine and are working good.
<div class="charcon_n" id="chartContainer_n<?php echo $i; ?>" style="height: 350px; width: 100%;" data-point='<?php echo json_encode($data_n, JSON_NUMERIC_CHECK); ?>'></div>
Whenever a tab is switched, the render method of each of the chart in the activated tab should be called so that chart can take the actual dimensions of its container.
$("#tabs").tabs({
create: function (event, ui) {
//Render Charts after tabs have been created.
$("#chartContainer1").CanvasJSChart(options1);
$("#chartContainer2").CanvasJSChart(options2);
},
activate: function (event, ui) {
//Updates the chart to its container size if it has changed.
ui.newPanel.children().first().CanvasJSChart().render();
}
});
Please take a look at jQuery gallery example.
Related
I have a website where I use an Eventbrite Widget to checkout a page on my website.
It turns out that when running the script, the iframe, especially on cell phones, does not show the entire checkout. Scrollsbar appears to scroll and see some information.
It turns out that I would like to remove these scrollsbars, because some users don't bother to scroll them down 😱 and end up not filling in some data and not being able to proceed with the purchase.
The code I have is this:
I tried a height on the div, but it didn't work.
type her<div id="eventbrite-widget-container-489731288460" style="display: block; height: 100%;"></div>
<p>
<script src="https://www.eventbrite.com.br/static/widgets/eb_widgets.js"></script>
<script type="text/javascript">
var exampleCallback = function() {
console.log('Order complete!');
};
window.EBWidgets.createWidget({
// Required
widgetType: 'checkout',
eventId: '489731288460',
iframeContainerId: 'eventbrite-widget-container-489731288460',
// Optional
iframeContainerHeight: 900, // Widget height in pixels. Defaults to a minimum of 425px if not provided
onOrderComplete: exampleCallback // Method called when an order has successfully completed
});
</script>e
I also put the iframeContainerHeight: 900, but on the cell phone the scrollbar continues to appear
If anyone knows how to solve it, I'm grateful.
Remove eventbrite iframe scrollbar
I am using Shopisle theme. I have displayed product category drop-down filter widget on the left side of shop page. But on the smaller screens, it automatically shifts at the bottom of the page. How can it be displayed on the top in smaller screens?
It can be done with some javascript on the window resize event. The sidebar is really on the right side in the HTML markup (Or more specifically, it's below). It appears on the left because css has the main section floating right.
On resize, css removed the float at width 767px. So the side bar falls to the bottom.
With jQuery's insertBefore (http://api.jquery.com/insertbefore/) as well as insertAfter, the html markup can be switched.
NB: this example moves the entire sidebar. It can be modified a bit to move just a single widget if that's necessary. This indicates the general process.
**By the way, this script should be placed in a .js file for the child-theme. If a .js file is not already in place, then try adding it to the footer template file (preferably in child theme) within <script>...</script> tags.
var sidebar_at_top = false;
function formatdisplay(){
if(jQuery( window ).width() < 768){
if(!sidebar_at_top){
console.log('moving sidebar to before main area');
jQuery('.sidebar-shop').insertBefore(jQuery('.shop-with-sidebar'));
sidebar_at_top = true;
}
}else{
if(sidebar_at_top){
console.log('moving sidebar to after main area');
jQuery('.sidebar-shop').insertAfter(jQuery('.shop-with-sidebar'));
sidebar_at_top = false;
}
}
}
jQuery( window ).resize(function() {
formatdisplay();
});
jQuery( document ).ready(function() {
formatdisplay();
});
I've this AngularJS demo app using Highcharts:
http://jsfiddle.net/dennismadsen/dpw8b8vv/1/
<div ng-app="myapp">
<div ng-controller="myctrl">
<button ng-click="hideView()">1. Hide</button>
<button ng-click="showView()">2. Show</button>
<div id="container" ng-show="show">
<highchart id="chart1" config="highchartsNG"></highchart>
</div>
</div>
</div>
If you change the width of the result view in JSFiddle, the Highchart will automatically resize it's width to the size of the container (the div with black border).
I've noticed that if Highchart is hidden, and the window is resized, it is not resized automatically (like iPad changing Landscape/Portrait orientation). Try this out by first clicing the "1. hide" button, change size of the result view, and then press the "2. show" button. See this example:
How can I force the highchart to resize even if it's not visible?
As per the documentation, we need to trigger the reflow method in scenarios where resize event cannot be captured by the chart.
Triggering reflow method in $timeout will render the chart properly.
$scope.showView = function () {
$scope.show = true;
$timeout(function () {
$scope.highchartsNG.getHighcharts().reflow()
});
}
Working Fiddle
I think it's a correct behaviour.
But considering that the resize event event fix the graph size, you can trigger a resize after the graph is shown, like:
setTimeout(function () {
$(window).trigger('resize');
}, 1);
It's the jQuery way, I think there's an angular too, but I'm not familiar with it.
I'm trying to create a simple gallery utilizing the layout in this image (http://i.stack.imgur.com/8juB3.jpg). When a viewer navigates to the page, I'd like them to initially see text/image content in the main box and images in the smaller box. If the viewer clicks on one of the smaller boxes, I would like the content in the main box to change accordingly.
If someone could point me in the right direction that'd be great, thanks!
Thanks!
<img src="something.jpg" onclick="changeX1()" /> //That's an example of the img tag on HTML:
<div id="gallery">Initial text</div> //This is the place where the big image will be shown, initially with text.
Javascript:
var x=0
var y=document.getElementById("gallery");
}
function changeX_1(){
x=1
changePic();
}
function changePic(){
switch (x){
case 1:
y.style.innerHTML="";
y.style.backgroundImage="url(something)";
break;
}
}
What I've done is, made 2 variables: x and y. 'x' will be the picture number and 'y' will be the background. When you click on an image, the 'x' will change, the y's innerHTML will be deleted and the background image will be changed.
I only used 1 image in the example, a real gallery will be made of much more. for each photo you add you'll need a new "changeX" function and another case.
If you don't know javascript you should learn :)
EDIT:
var x=0
var y=document.getElementById("gallery");
}
function changeX1(){
x=1
changePic();
}
function changeX2(){
x=2
changePic();
}
function changePic(){
switch (x){
case 1:
y.style.innerHTML="";
y.style.backgroundImage="url(http://cdn.shopify.com/s/files/1/0176/5914/files/Flag-Lookbookcolor.jpg?7024)";
break;
case 2:
y.style.innerHTML="";
y.style.backgroundImage="url(http://cdn.shopify.com/s/files/1/0176/5914/files/Flag-Videocolor.jpg?7178)";
break;
}
}
I am using HighCharts in my ASP.Net MVC application using JQuery.
I have managed to show a tooltip with crosshair vertical bar on mouse move. However, I do not want to hide this toolop + bar even if user moves the mouse out of chart. Is there any option available in Highcharts to achieve this?
I searched forums but could not find any working example. One of those solutions is related to cloning tooltip on click event.
You can wrap the Highcharts.Tooltip.prototype.hide by an empty (no-op) function as follows
(function (H) {
H.wrap(H.Tooltip.prototype, 'hide', function (defaultCallback) {
/*
░░░░░▄▄▄▄▀▀▀▀▀▀▀▀▄▄▄▄▄▄░░░░░░░
░░░░░█░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░▀▀▄░░░░
░░░░█░░░▒▒▒▒▒▒░░░░░░░░▒▒▒░░█░░░
░░░█░░░░░░▄██▀▄▄░░░░░▄▄▄░░░░█░░
░▄▀▒▄▄▄▒░█▀▀▀▀▄▄█░░░██▄▄█░░░░█░
█░▒█▒▄░▀▄▄▄▀░░░░░░░░█░░░▒▒▒▒▒░█
█░▒█░█▀▄▄░░░░░█▀░░░░▀▄░░▄▀▀▀▄▒█
░█░▀▄░█▄░█▀▄▄░▀░▀▀░▄▄▀░░░░█░░█░
░░█░░░▀▄▀█▄▄░█▀▀▀▄▄▄▄▀▀█▀██░█░░
░░░█░░░░██░░▀█▄▄▄█▄▄█▄████░█░░░
░░░░█░░░░▀▀▄░█░░░█░█▀██████░█░░
░░░░░▀▄░░░░░▀▀▄▄▄█▄█▄█▄█▄▀░░█░░
░░░░░░░▀▄▄░▒▒▒▒░░░░░░░░░░▒░░░█░
░░░░░░░░░░▀▀▄▄░▒▒▒▒▒▒▒▒▒▒░░░░█░
░░░░░░░░░░░░░░▀▄▄▄▄▄░░░░░░░░█░░
*/
});
}(Highcharts));
Highcharts/Highstock tooltip always visible # JsFiddle
For the minimalists,
(function (H) {
H.wrap(H.Tooltip.prototype, 'hide', function () {});
}(Highcharts));
does the job too ;)
Read More # Customizing Highcharts - Tooltip Visibility