I am using Gridster widget for webpage.I have widgets which have images on them.JSON gives data about what image should be there on each grid(I get text from JSON and then get corresponding image from database).
I have textarea field on my widgets which extracts the value of "html" field from the JSON.This value is corresoponding to image present on the widget.
I have a button on each image which deletes the image.I want to delete the content of textarea when I remove the image dynamically.So that when I use Serialize. again there should be updated values in JSON
My JS:
var gridster;
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 100],
widget_margins: [5, 5],
helper: 'clone',
serialize_params: function($w, wgd) {return {images: $w.find('textarea').val().trim() , col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y}},
resize: {
enabled: true
}
}).data('gridster');
//Function for deleting images
$('.removediv').on('click', function () {
$(this).closest('div.imagewrap').remove();
//something that will update textarea by removing the deleted image
//address.
});
HTML:
<button class="js-seralize btn btn-success mr-2">Serialize</button>
<textarea id="log"></textarea>
Fiddle will explain it in a good way
Related
I have a request to change the old website which uses jQuery OwlCarousel v1.3.3 and the client wants that when the user reaches the last item in the list it should go to custom page or blog list page where it will show all the items of the blog
When Item reaches the last item '' disabled class is added to this <div class="owl-next disabled"> at this point it should go to the blog list page from the home page such as www.example.com/blog
Codepen Demo
How can I observe the owl-next item inside owl-demo so that when class **disabled** is added to owl-next so I can trigger a function that will take it to a different page?
You can just add a callback to the afterAction option of Owl Carousel and check the visibleItems if it contains the last element of the carousel.
So the code will look like this:
$(document).ready(function () {
var owl = $("#owl-demo");
owl.owlCarousel({
itemsCustom: [
[0, 2],
[450, 4],
[600, 7],
[700, 9],
[1000, 10],
[1200, 12],
[1400, 13],
[1600, 15]
],
navigation: true,
afterAction: afterAction
});
function afterAction() {
if (this.owl.visibleItems.includes(this.owl.owlItems.length - 1))
setTimeout(function () {
location.href = "https://codepen.io/dreambold"; //=> Add the desired URL here
}, 500);
}
});
For the documentation, you can have a look at https://github.com/sergey-ovdienko/owlcarousel-v1
Live demo here: https://codepen.io/dreambold/pen/PoBJvdJ?editors=1011
I need a country to be selected and highlighted on google Gecochart when a button or Div is clicked.
I was able to achieve that completely if someone clicks on the country on Geochart, but partially if someone clicks the button/div as the Geochart is not highlighting the country until the user moves the mouse pointer above the geochart.
I am trying to implement that using the code below
var chart='';
google.charts.load('current', {
'packages':['geochart'],
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {};
var container =document.getElementById('regions_div');
chart = new google.visualization.GeoChart(container);
observer = new MutationObserver(function (nodes) {
Array.prototype.forEach.call(nodes, function (node) {
// check for new nodes
if (node.addedNodes.length > 0) {
Array.prototype.forEach.call(node.addedNodes, function (addedNode) {
// the tooltip element will also be here, we only want the group elements
if (addedNode.tagName === 'g') {
// find children of the group element
Array.prototype.forEach.call(addedNode.childNodes, function (childNode) {
// check for path element, change stroke
if (childNode.tagName === 'path') {
childNode.setAttribute('stroke', '#FF0000');
//childNode.setAttribute('fill', '#BE965C');
}
});
}
});
}
});
});
// activate mutation observer
observer.observe(container, {
childList: true,
subtree: true
});
chart.draw(data, options);
}
function myclick() {
//google.visualization.events.trigger(chart, 'select',[{ row: 3, column: null }]);
chart.setSelection([{ row: 3, column: null }]);
console.log( chart.getSelection());
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
<div onclick="myclick()">
text
</div>
<button type="button" onclick="myclick()">Click Me!</button>
I also tried to call google.visualization.events.trigger(chart, 'select', chart.getSelection()); to trigger the selection and highlight directly but it didn't work.
Any idea how to to highlight the country when clicking on the button/div directly (without the need to move the mouse over the Gecochart)?
Thank you!
The code can also be found in this snippet https://jsfiddle.net/nmaybar/8p2zruso/
I have solved the issue by changing the version from 'current' to '49' by adjusting the following code:
google.charts.load('current', { 'packages':['geochart'],});
To:
google.charts.load('49', {'packages':['geochart'],});
I am not sure why it doesn't work with version 'current' or 'upcoming'. I think it is a bug.
I'm trying to convert a section of my HTML page into a PDF file. I don't want the whole page because it contains buttons, etc. that aren't necessary.
So I created a div that has a height 0 and adding the content I need to print into the underlying div then removed elements and printed. All my code is below. It works well but the pdf is WAY too zoomed in and I can't fix it. I've attached my code and resulting pdf output below. I've tried so many different settings. Does anyone have tips?
<div style="overflow: hidden; height: 0;">
<div id="mainClone"></div>
</div>
function printPDF()
{
html2canvas($('#mainClone'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
pageSize: {
width: 1000,
height: 'auto'
},
content: [{
image: data,
//width: width,
//height: height,
}],
pageSize: 'letter',
pageOrientation: 'landscape',
pageMargins: [ 5, 5, 5, 5 ],
};
pdfMake.createPdf(docDefinition).download("test.pdf");
}
});
}
$('#PrintPDF').click(function () {
$('#mainClone').html($('#main').html());
$('#mainClone').find(".calendar-prev").hide();
//remove more html elemnent we don't need
printPDF();
});
You can make it while still using jspdf, instead of creating an extra div, go with your default page and with any unnecessary element(which you do not want into your PDF) add this
data-html2canvas-ignore="true"
to each unnecessary element.
this will ignore that element and will not put into your generated PDF.
I am currently comparing our price slider http://www.showstyle.lu/homme/ to that on http://theme-lookz-responsive.webshopapp.com/en/designer/ and as you can see under filters if you drag the filter on our homepage (ShowStyle) the number value of the min & max do not update dynamically i.e. you have to guess where to let go of the slider and hope it lands on a price.
On the example website: if you drag the price filter the min & max values update dynamically making it easier to see what your settings are.
I tried comparing the code of both filter price boxes and saw this additional script they implemented but couldn't figure out if that is what caused it, I think it is but any idea how to re-enact that onto my template? Both are using the same CMS so utilising this code is permitted, it's just a comfort update. I managed to adjust the code but don't understand if I should replace the "ui" syntax with price-filter-range or min/max syntax.
Original Script
<script type="text/javascript">
$(function(){
$('#filter_form input, #filter_form select').change(function(){
$(this).closest('form').submit();
});
$("#collection-filter-price").slider({
range: true,
min: 0,
max: 20,
values: [0, 20],
step: 1,
slide: function( event, ui){
$('.sidebar-filter-range .min span').html(ui.values[0]);
$('.sidebar-filter-range .max span').html(ui.values[1]);
$('#filter_form_min').val(ui.values[0]);
$('#filter_form_max').val(ui.values[1]);
},
stop: function(event, ui){
$('#filter_form').submit();
}
});
});
The 0/20 values are depending on the page you were on so I suppose that also needs to be dynamic based on the highest price item on the current catalog page
Any help is greatly appreciated, thanks a lot!
Try this:
$("#collection-filter-price").slider({
range: true,
min: 0,
max: 750,
values: [$('#filter_form_min').val(), $('#filter_form_max').val()],
step: 1,
slide: function( event, ui){
$('.price-filter-range .min span').text(ui.values[0]);
$('.price-filter-range .max span').text(ui.values[1]);
},
stop: function(event, ui){
$('#filter_form_min').val(ui.values[0]);
$('#filter_form_max').val(ui.values[1]);
$('#filter_form').submit();
}
});
Please note this code (in my answer) been updated from the original due to a misunderstanding. I have also re-edited it to fix functionality that was broken by the inclusion of this code.
Edit: I just noticed that your site already includes the JS code
$(function(){
$('#filter_form input, #filter_form select').change(function(){
$(this).closest('form').submit();
});
$("#collection-filter-price").slider({
range: true,
min: 0,
max: 750,
values: [0, 520],
step: 1,
slide: function( event, ui){
$('.sidebar-filter-range .min span').html(ui.values[0]);
$('.sidebar-filter-range .max span').html(ui.values[1]);
$('#filter_form_min').val(ui.values[0]);
$('#filter_form_max').val(ui.values[1]);
},
stop: function(event, ui){
$('#filter_form').submit();
}
});
});
However this code is being dynamically generated by the server (notice how 520 is embedded into the script)... The only reason it's not working is because it's expecting the class name to be sidebar-filter-range instead of price-filter-range. If you could just make the correct modification so that it's pointing to the correct elements then it should work.
I am making an application in visual studio with javascript and google charts.
I want to record the graphic, the options I found do not work in IE.
Take an example and modify it, I can move the image to another container <img id = "chartImg" />, on the same page and in this way to save png format.
I also think a popup window to charge image recording.
I can not create the image directly in the popup window, without passing the container <img id = "chartImg" /> and then to the window.
I do not want the container.
As I can create pop-up, directly from SVG is created by plotting with Google Chart API, pressing on a button or click me.
The code place it in jsFiddle.
http://jsfiddle.net/rdmghzhm/3/
It is as follows:
HTML
<div id="visualization"></div>
Right-click this image to save it:<br />
click
<img id="chartImg" />
JAVASCRIPT
function drawVisualizationDaily() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Daily', 'Sales'],
['Mon', 4],
['Tue', 6],
['Wed', 6],
['Thu', 5],
['Fri', 3],
['Sat', 7],
['Sun', 7]
]);
// Create and draw the visualization.
var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
google.visualization.events.addListener(chart, 'ready', function () {
var imgUri = chart.getImageURI();
// do something with the image URI, like:
document.getElementById('chartImg').src = imgUri;
});
chart.draw(data, {
title:"Daily Sales",
width:500,
height:400,
hAxis: {title: "Daily"}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawVisualizationDaily});
function openWin() {
var divText = document.getElementById("chartImg").outerHTML;
var myWindow = window.open('', '', 'width=500,height=500');
var doc = myWindow.document;
doc.write('<img' + ' id="graficar" ' +' />');
doc.write(divText);
doc.write("<p>This is 'myWindow'</p>");
doc.close();
}
You can hide within a DIV, the image that you create on the main page, the code html would look like this.
<div id="visualization"></div>
Right-click this image to save it:<br />
click
<div style="display:none;">
<img id="chartImg" />
</div>
In jsFiddle serious:
http://jsfiddle.net/3Lx91o0e/
greetings
If there is a small mistake with Chrome, to create the pop-up window, it is still recording the image with right mouse button.
windows.open must call with complete parameter, this code works correctly in Chrome and elsewhere too, I could taste only in IE 11
var myWindow = window.open("about:blank", "Save graph", "location=0,resizable,status=0,menubar=0,titlebar=0,left=5,top=5");