We Keep Coding

Highchart always download PNG images?

I combined two charts together to export both charts.
<script defer="true"><![CDATA[
(function(){
var exportChart = function() {
Highcharts.getSVG = function(charts) {
var svgArr = [], top = 0, width = 0;
jq.each(charts, function(i, chart) {
var svg = chart.getSVG();
svg = svg.replace('<svg', '<g transform="translate(0,' + top
+ ')" ');
svg = svg.replace('</svg>', '</g>');
top += chart.chartHeight;
width = Math.max(width, chart.chartWidth);
svgArr.push(svg);
});
return '<svg height="' + top + '" width="' + width
+ '" version="1.1" xmlns="http://www.w3.org/2000/svg">'
+ svgArr.join('') + '</svg>';
};
Highcharts.exportCharts = function() {
var charts = [];
jq(".test-timeline-chart .highcharts-container")
.each(
function(i, e) {
charts
.push(Highcharts.charts[jq(e).parent()
.data().highchartsChart]);
});
var form;
svg = Highcharts.getSVG(charts);
// merge the options
var options = Highcharts.merge(Highcharts.getOptions().exporting, {});
// create the form
form = Highcharts.createElement('form', {
method : 'post',
action : options.url
}, {
display : 'none'
}, document.body);
// add the values
Highcharts.each([ 'filename', 'type', 'width', 'svg' ], function(name) {
Highcharts.createElement('input', {
type : 'hidden',
name : name,
value : {
filename : options.filename || 'chart',
type : options.type,
width : options.width,
svg : svg
}[name]
}, null, form);
});
// submit
form.submit();
// clean up
form.parentNode.removeChild(form);
};
// printing all the charts in single page.
function printAll() {
var origDisplay = [], origParent = [], body = document.body, childNodes = body.childNodes;
// hide all body content
Highcharts.each(childNodes, function(node, i) {
if (node.nodeType === 1) {
origDisplay[i] = node.style.display;
node.style.display = "none";
}
});
var charts = [];
jq(".test-timeline-chart .highcharts-container")
.each(
function(i, e) {
charts
.push(Highcharts.charts[jq(e).parent()
.data().highchartsChart]);
});
// put the charts back in
jq.each(charts, function(i, chart) {
origParent[i] = chart.container.parentNode;
body.appendChild(chart.container);
});
// print
window.print();
// allow the browser to prepare before reverting
setTimeout(function() {
// put the chart back in
jq.each(charts, function(i, chart) {
origParent[i].appendChild(chart.container);
});
// restore all body content
Highcharts.each(childNodes, function(node, i) {
if (node.nodeType === 1) {
node.style.display = origDisplay[i];
}
});
}, 500);
}
if(jq(".test-timeline-chart").length > 0) {
var index = jq(".test-timeline-chart .highcharts-container:first").parent().data().highchartsChart;
var instanceChart = Highcharts.charts[index+1];
instanceChart.exportChart = Highcharts.exportCharts;
instanceChart.options.exporting.buttons.contextButton.menuItems[0].onclick = function() {
printAll();
};
};
};
exportChart();
})();
]]>
</script>
The var options = Highcharts.merge(Highcharts.getOptions().exporting, {}); always returing the PNG image and the export chart option always download PNG images. How I can fix this?
I found a way to listen to the onclick event of high chart context menu items. Is there a way to get selected items?

Reload this javascript file after an ajax page load (YITH Infinite Scroll)

I have a woocommerce shop that has an ajax page load navigation. So a user clicks next page and more products are loaded via ajax.
However, I have a javascript file that manipulates the colors on each product on a page load. But since I have introduced this ajax page load, the script no longer loads after a next page is requested.
I am using YITH Infinite Page scroll. They have a trigger yith_infs_added_elem that I can use to do some code after the ajax has been loaded.
So I currently have:
jQuery(document).on('yith_infs_added_elem', function() {
});
This is the YITH trigger I have to use to run my script after the ajax has loaded.
But I am stuck. I have read many other solutions for other people, but I cannot seem to figure out how to reload my javascript file - /js/javascript/colors/dominant-color-shop.js.
My javascript file that normally runs on page load is:
jQuery( document ).ready( function( $ ) {
var image = new Image;
var colorThief = new ColorThief();
var bg;
var vibrant_color;
var vibrantText;
$('.post-image-hidden-container').each(function() {
bg = $(this).text();
var rgbs_text = [];
image.onload = function() {
$('.shop-page-item-thumb').each(function() {
var thumb = $(this);
var rgbs = [];
thumb.find('img').each(function() {
var vibrant = new Vibrant(this);
var swatches = vibrant.swatches();
var dominantColor = colorThief.getColor(this);
var productColorPalette = colorThief.getPalette(this, 12);
var productLightestColor = productColorPalette.reduce(function(previousValue, currentValue) {
var currLightNess = (0.2126*currentValue[0] + 0.7152*currentValue[1] + 0.0722*currentValue[2]);
var prevLightNess = (0.2126*previousValue[0] + 0.7152*previousValue[1] + 0.0722*previousValue[2]);
return (prevLightNess < currLightNess) ? currentValue : previousValue;
});
/* Create Shades and Tints of Lightest Color */
var lightShadeRGB = productLightestColor.join();
lightShadeRGB = lightShadeRGB.split(',');
var r = lightShadeRGB[0],
g = lightShadeRGB[1],
b = lightShadeRGB[2];
var rpt = lightShadeRGB[0] - 35,
gpt = lightShadeRGB[1] - 35,
bpt = lightShadeRGB[2] - 35;
var tintDk = 'rgb('+rpt+', '+gpt+', '+bpt+')';
for (var swatch in swatches) {
if (swatches.hasOwnProperty(swatch) && swatches[swatch]) {
rgbs.push(swatches[swatch].getHex());
rgbs_text.push(swatches[swatch].getTitleTextColor());
}
}
vibrant_color = rgbs[0];
vibrant_color_2 = rgbs[1];
darkVibrant = rgbs[2];
darkMuted = rgbs[3];
lightVibrant = rgbs[4];
vibrantText = rgbs_text[0];
vibrantText_2 = rgbs_text[1];
darkVibrantText = rgbs_text[2];
darkMutedText = rgbs_text[3];
lightVibrantText = rgbs_text[4];
thumb.parent().find('.product-bottom-info-container').css({
borderTop: '4px solid ' + vibrant_color
});
thumb.parent().find('.hot-badge').css({
backgroundColor: darkMuted,
color: darkMutedText
});
thumb.parent().find('.mp3-badge').css({
backgroundColor: vibrant_color,
color: vibrantText
});
thumb.parent().find('.mp3-badge-link').css({
color: vibrantText
});
thumb.parent().find('.wav-badge').css({
backgroundColor: vibrant_color_2,
color: vibrantText_2
});
thumb.parent().find('.wav-badge-link').css({
color: vibrantText_2
});
thumb.parent().find('.hot-post-bookmark').css({
color: vibrant_color
});
thumb.parent().find('.the-rating-stars-icons').css({
color: vibrant_color
});
thumb.parent().find('.progress-bar').css({
backgroundColor: vibrant_color
});
});
});
}
image.src = bg;
});
$('#player-toggler-id').css({
backgroundColor: '#181f24'
});
});
It works fine until I request the next page. The javscript no longer works. How exactly can I call this script all over again, once the yith ajax has loaded with this trigger - yith_infs_added_elem.
I have read up on .on() .live() (which is deprecated), etc. Can anyone help?

Your function only runs on page load...
To trigger it again later, you should make it a named function.
So the script stays exactly the same, but wrapped with function arrangeColors(){ (You can name it as you wish) and }.
Then, in the ajax success callback, call this function again.
jQuery( document ).ready( function( $ ) {
function arrangeColors(){ // Make the script a named function
var image = new Image;
var colorThief = new ColorThief();
var bg;
var vibrant_color;
var vibrantText;
$('.post-image-hidden-container').each(function() {
bg = $(this).text();
var rgbs_text = [];
image.onload = function() {
$('.shop-page-item-thumb').each(function() {
var thumb = $(this);
var rgbs = [];
thumb.find('img').each(function() {
var vibrant = new Vibrant(this);
var swatches = vibrant.swatches();
var dominantColor = colorThief.getColor(this);
var productColorPalette = colorThief.getPalette(this, 12);
var productLightestColor = productColorPalette.reduce(function(previousValue, currentValue) {
var currLightNess = (0.2126*currentValue[0] + 0.7152*currentValue[1] + 0.0722*currentValue[2]);
var prevLightNess = (0.2126*previousValue[0] + 0.7152*previousValue[1] + 0.0722*previousValue[2]);
return (prevLightNess < currLightNess) ? currentValue : previousValue;
});
/* Create Shades and Tints of Lightest Color */
var lightShadeRGB = productLightestColor.join();
lightShadeRGB = lightShadeRGB.split(',');
var r = lightShadeRGB[0],
g = lightShadeRGB[1],
b = lightShadeRGB[2];
var rpt = lightShadeRGB[0] - 35,
gpt = lightShadeRGB[1] - 35,
bpt = lightShadeRGB[2] - 35;
var tintDk = 'rgb('+rpt+', '+gpt+', '+bpt+')';
for (var swatch in swatches) {
if (swatches.hasOwnProperty(swatch) && swatches[swatch]) {
rgbs.push(swatches[swatch].getHex());
rgbs_text.push(swatches[swatch].getTitleTextColor());
}
}
vibrant_color = rgbs[0];
vibrant_color_2 = rgbs[1];
darkVibrant = rgbs[2];
darkMuted = rgbs[3];
lightVibrant = rgbs[4];
vibrantText = rgbs_text[0];
vibrantText_2 = rgbs_text[1];
darkVibrantText = rgbs_text[2];
darkMutedText = rgbs_text[3];
lightVibrantText = rgbs_text[4];
thumb.parent().find('.product-bottom-info-container').css({
borderTop: '4px solid ' + vibrant_color
});
thumb.parent().find('.hot-badge').css({
backgroundColor: darkMuted,
color: darkMutedText
});
thumb.parent().find('.mp3-badge').css({
backgroundColor: vibrant_color,
color: vibrantText
});
thumb.parent().find('.mp3-badge-link').css({
color: vibrantText
});
thumb.parent().find('.wav-badge').css({
backgroundColor: vibrant_color_2,
color: vibrantText_2
});
thumb.parent().find('.wav-badge-link').css({
color: vibrantText_2
});
thumb.parent().find('.hot-post-bookmark').css({
color: vibrant_color
});
thumb.parent().find('.the-rating-stars-icons').css({
color: vibrant_color
});
thumb.parent().find('.progress-bar').css({
backgroundColor: vibrant_color
});
});
});
}
image.src = bg;
});
$('#player-toggler-id').css({
backgroundColor: '#181f24'
});
} // Add this closing bracket
// Call the function on load
arrangeColors();
});

I make it work now like this:
<script type="text/javascript">
jQuery(document).ready(function ($) {
loadAnimation();
jQuery(document).on("yith_infs_added_elem", function () {
loadAnimation();
});
function loadAnimation() {
//here put your code for something to doin my case .add-to-cart trigger
}
//here other functions for example flyToElement
});
</script>

Why isn't addEventListener click working?

This is the code, I can't get the click event listener to fire
Javascript:
var cid = 1721;
var alt = "4x6_" + cid;
var thumb = "168c619a1d1743bd4f3aba9d69a8c3ce";
var mattes_selected_type = "182";
var i = 0;
function common_get_site_url()
{
return "https://jsfiddle.net/img/logo.png";
}
//
var thumb_img = new Image();
thumb_img.id = 'cid_' + cid;
thumb_img.alt = alt;
thumb_img.src = "";
thumb_img.addEventListener('load', function() {
alert("LOAD");
}, false);
thumb_img.addEventListener('click', function() {
alert("CLICK");
}, false);
thumb_img.src = common_get_site_url();
$('#matte_designs_strip_wrapper').append('<span class="matte_design_image_name"><img id="cid_' + cid + '" src="' + thumb_img.src +'" /></span>');
HTML:
<div id="matte_designs_strip_wrapper"></div>
https://jsfiddle.net/allisonc/yoq4Lotx/1/

Try to change the last line to:
$('#matte_designs_strip_wrapper').append($('<span class="matte_design_image_name"/>').append(thumb_img));
Otherwise you're using addEventListener to an element that will never appear

You reference an Image object, not the actual HTML element you expect. Once you appended and added the HTML dynamically you want to run
$('#cid_' + cid).on('click', function(e) {
// Your code here
});
Then your event listener will target the proper HTML, not just any object :)

var cid = 1721;
var alt = "4x6_" + cid;
var thumb = "168c619a1d1743bd4f3aba9d69a8c3ce";
var mattes_selected_type = "182";
var i = 0;
function common_get_site_url()
{
return "https://jsfiddle.net/img/logo.png";
}
//
var thumb_img = new Image();
thumb_img.id = 'cid_' + cid;
thumb_img.alt = alt;
thumb_img.src = "";
thumb_img.addEventListener('load', function() {
alert("LOAD");
}, false);
thumb_img.addEventListener('click', function() {
alert("CLICK");
}, false);
thumb_img.src = common_get_site_url();
var span = $('<span class="matte_design_image_name"></span>')
span.append(thumb_img)
$('#matte_designs_strip_wrapper').append(span);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="matte_designs_strip_wrapper"></div>

Run jQuery code after AJAX jQuery load()

How can i run the below code only after the code 1 has load all its content from the external page ?
jQuery Script tried
//filters
$(window).bind("load", function() {
$(".filters li").on("click", function () {
id = ($(this).data("id")+'').split(',');
filter = $(this).data("filter");
$("#hotel-list .box").hide();
id[0] == "all" && $("#hotel-list .box").show() || id.forEach(function(v){
$('#hotel-list .box[data-'+filter+'*="'+v.trim()+'"]').show();
});
return false;
});
<!-- Count Star Rating -->
var two_stars = $("article[data-stars*='2']").length;
var three_stars = $("article[data-stars*='3']").length;
var four_stars = $("article[data-stars*='4']").length;
var five_stars = $("article[data-stars*='5']").length;
$('.total-three').text(three_stars);
$('.total-four').text(four_stars);
$('.total-five').text(five_stars);
var totals = three_stars + four_stars + five_stars + two_stars;
$('.totals').text(totals);
<!-- Count Board -->
var board_no = $("article[data-board*='No']").length
var board_ro = $("article[data-board*='Room']").length
var board_bb = $("article[data-board*='Breakfast']").length;
var board_fb = $("article[data-board*='Full Board']").length
var board_hb = $("article[data-board*='Half']").length
var board_ai = $("article[data-board*='All']").length
var board_sc = $("article[data-board*='Self']").length
$('.total-ro').text(board_ro);
$('.total-bb').text(board_bb);
$('.total-fb').text(board_fb);
$('.total-hb').text(board_hb);
$('.total-ai').text(board_ai);
$('.total-sc').text(board_sc);
var total = board_ro + board_bb + board_fb + board_hb + board_ai + board_sc + board_no;
$('.total').text(total);
//Fix broken images
fixBrokenImages = function( url ){
var img = document.getElementsByTagName('img');
var i=0, l=img.length;
for(;i<l;i++){
var t = img[i];
if(t.naturalWidth === 0){
//this image is broken
t.src = url;
}
}
}
window.onload = function() {
fixBrokenImages('images/noimg.png');
}
});
And the jQuery AJAX code is:
var datastring = location.search; // now you can update this var and use
$("#hotel-list").load("Rezults2.php"+ datastring + " #hotel-list> *");
So i need that the 1st codes to be executed only after the 2nd code has done its job ( from 3 to 9 secs )
ANy ideea on this ?

function runThisAfter() {
var two_stars = $("article[data-stars*='2']").length;
var three_stars = $("article[data-stars*='3']").length;
var four_stars = $("article[data-stars*='4']").length;
var five_stars = $("article[data-stars*='5']").length;
//etc...
}
$("#hotel-list").load("Rezults2.php", function(){ runThisAfter(); });
This will run "runThisAfter()" when load is complete.

Solution is:
$(document).ajaxComplete(function( event, xhr, settings ) {
// Your complete function here
});
Or in my Case full code:
$(document).ajaxComplete(function(event, xhr, settings) {
//Count STARS
var two_stars = $("article[data-stars*='2']").length;
var three_stars = $("article[data-stars*='3']").length;
var four_stars = $("article[data-stars*='4']").length;
var five_stars = $("article[data-stars*='5']").length;
$('.total-three').text(three_stars);
$('.total-four').text(four_stars);
$('.total-five').text(five_stars);
var totals = three_stars + four_stars + five_stars +
two_stars;
$('.totals').text(totals);
//COUNT BOARD
var board_no = $("article[data-board*='No']").length
var board_ro = $("article[data-board*='Room']").length
var board_bb = $("article[data-board*='Breakfast']").length;
var board_fb = $("article[data-board*='Full Board']").length
var board_hb = $("article[data-board*='Half']").length
var board_ai = $("article[data-board*='All']").length
var board_sc = $("article[data-board*='Self']").length
$('.total-ro').text(board_ro);
$('.total-bb').text(board_bb);
$('.total-fb').text(board_fb);
$('.total-hb').text(board_hb);
$('.total-ai').text(board_ai);
$('.total-sc').text(board_sc);
var total = board_ro + board_bb + board_fb + board_hb +
board_ai + board_sc + board_no;
$('.total').text(total);
//Fix broken images
fixBrokenImages = function(url) {
var img = document.getElementsByTagName('img');
var i = 0,
l = img.length;
for (; i < l; i++) {
var t = img[i];
if (t.naturalWidth === 0) {
//this image is broken
t.src = url;
}
}
}
window.onload = function() {
fixBrokenImages('images/noimg.png');
}
});
});

Create view as popup in Titanium

I'm trying to create a popup like this
A user presses a button and a selection of options appear, which I call a popup.
In the meantime the background goes black transparant.
I've spend the last few hours online trying to find a good example of how to achieve this, but without luck.
Oh yeah, I would like to use alloy to define the popup.
Thanks in advance for your help!

hey #falcko this is an example of how to create popup window
hope this help
logout_view.addEventListener("click",function(){
var t = Titanium.UI.create2DMatrix();
t = t.scale(0);
var w = Titanium.UI.createWindow({
height:Ti.UI.FILL,
width:Ti.UI.FILL,
transform:t,
backgroundColor:"transparent",
// opacity:0.5
});
var v = Titanium.UI.createView({
backgroundColor:'white',
// height:"240dp",
//width:"293dp",
height:Ti.UI.FILL,
width:Ti.UI.FILL,
backgroundColor:"black",
opacity:0.7
});
var popup=Ti.UI.createView({
height:"240dp",
width:"293dp",
backgroundColor:"white",
});
var plz=Ti.UI.createLabel({
text:"Please specify the reason for reporting",
top:"21dp",
width:Ti.UI.FILL,
textAlign:"center",
font : {
fontFamily : customfont,
fontSize : "16dp"
},
color:"#454545",
});
var check1=Ti.UI.createView({
width:Ti.UI.SIZE,
height:Ti.UI.SIZE,
left:"16dp",
top:"55dp"
});
var checkbox1=Ti.UI.createView({
width:"8dp",
height:"8dp",
borderRadius:"4dp",
borderColor:"#CBCBCB",
borderWidth:"0.5dp",
left:"0dpdp",
selected:1
});
var serious=Ti.UI.createLabel({
left:"20dp",
text:"User wasn't serious",
font : {
fontFamily : customfont2,
fontSize : "15dp"
},
//top:"53dp",
color:"#666666"
});
check1.add(serious);
check1.add(checkbox1);
popup.add(check1);
var check2=Ti.UI.createView({
width:Ti.UI.SIZE,
height:Ti.UI.SIZE,
left:"16dp",
top:"79dp"
});
var checkbox2=Ti.UI.createView({
width:"8dp",
height:"8dp",
borderRadius:"4dp",
borderColor:"#CBCBCB",
borderWidth:"0.5dp",
left:"0dp",
selected:0
});
var rude=Ti.UI.createLabel({
left:"20dp",
text:"User was rude and abusive",
font : {
fontFamily : customfont2,
fontSize : "15dp"
},
//top:"76dp",
color:"#666666"
});
check2.add(rude);
check2.add(checkbox2);
popup.add(check2);
var checkbox3=Ti.UI.createView({
width:"8dp",
height:"8dp",
borderRadius:"4dp",
borderColor:"#CBCBCB",
borderWidth:"0.5dp",
left:"16dp",
top:"102dp",
selected:0
});
var foul=Ti.UI.createLabel({
left:"36dp",
text:"User used foul language",
font : {
fontFamily : customfont2,
fontSize : "15dp"
},
top:"100dp",
color:"#666666"
});
popup.add(foul);
popup.add(checkbox3);
var checkbox4=Ti.UI.createView({
width:"8dp",
height:"8dp",
borderRadius:"4dp",
borderColor:"#CBCBCB",
left:"16dp",
borderWidth:"0.5dp",
top:"126dp",
selected:0
});
var other=Ti.UI.createLabel({
left:"36dp",
text:"Other",
font : {
fontFamily : customfont2,
fontSize : "15dp"
},
top:"123dp",
color:"#666666"
});
popup.add(other);
popup.add(checkbox4);
checkbox1.addEventListener("click",function(){
if(checkbox1.selected==0){
checkbox1.setBackgroundColor(o_color);
checkbox1.selected=1;
checkbox2.setBackgroundColor("white");
checkbox2.selected=0;
checkbox3.setBackgroundColor("white");
checkbox3.selected=0;
checkbox4.setBackgroundColor("white");
checkbox4.selected=0;
}
});
checkbox2.addEventListener("click",function(){
if(checkbox2.selected==0){
checkbox1.setBackgroundColor("white");
checkbox1.selected=0;
checkbox2.setBackgroundColor(o_color);
checkbox2.selected=1;
checkbox3.setBackgroundColor("white");
checkbox3.selected=0;
checkbox4.setBackgroundColor("white");
checkbox4.selected=0;
}
});
checkbox3.addEventListener("click",function(){
if(checkbox3.selected==0){
checkbox1.setBackgroundColor("white");
checkbox1.selected=0;
checkbox3.setBackgroundColor(o_color);
checkbox3.selected=1;
checkbox2.setBackgroundColor("white");
checkbox2.selected=0;
checkbox4.setBackgroundColor("white");
checkbox4.selected=0;
}
});
checkbox4.addEventListener("click",function(){
if(checkbox4.selected==0){
checkbox1.setBackgroundColor("white");
checkbox1.selected=0;
checkbox4.setBackgroundColor(o_color);
checkbox4.selected=1;
checkbox2.setBackgroundColor("white");
checkbox2.selected=0;
checkbox3.setBackgroundColor("white");
checkbox3.selected=0;
}
});
popup.add(plz);
var other_view=Ti.UI.createView({
top:"154dp",
left:"15dp",
right:"15dp",
height:"30dp",
borderWidth:1,
borderColor:"#C9C9C9"
});
var send=Ti.UI.createButton({
title:"Send",
height:"33dp",
top:"197dp",
color:"white",
width:"102dp",
backgroundColor:o_color,
font : {
fontFamily : customfont,
fontSize : "13dp"
},
});
popup.add(send);
popup.add(other_view);
// create first transform to go beyond normal size
var t1 = Titanium.UI.create2DMatrix();
t1 = t1.scale(1.1);
var a = Titanium.UI.createAnimation();
a.transform = t1;
a.duration = 200;
// when this animation completes, scale to normal size
a.addEventListener('complete', function()
{
Titanium.API.info('here in complete');
var t2 = Titanium.UI.create2DMatrix();
t2 = t2.scale(1.0);
w.animate({transform:t2, duration:200});
});
v.addEventListener('click', function()
{
var t3 = Titanium.UI.create2DMatrix();
t3 = t3.scale(0);
w.close();
});
w.add(v);
w.add(popup);
w.open(a);
}
);