JSSOR Carousel - How to disable bounce when it gets dragged - Consider there is a single image in carousel.
Set $DragOrientation option value to 0 will disable drag.
<script>
jQuery(document).ready(function ($) {
var options = {
...,
$DragOrientation: 0
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
});
</script>
Reference: http://www.jssor.com/development/reference-options.html
Related
EDIT: My codesandbox is working, but it's not perfect. In my actual project I've better utilized ts and am just making an if check for the charttype so the font doesn't paste on all the charts you have.
I still need to work on making the fontsize responsive and prettier, but I will try and update the codesandbox as much as I can!
If anyone would like to add to it please do! Also, post your link in the comments so anyone else having these issues can see them too!
I am attempting to make a doughnut chart that looks like this:
I've been trying to figure out how to get the code in this example using VueChartJS (VueChart3 is a TS safe rewrite of VueChartJS and works the same, just in composition API), but cannot figure out how to get the plugins to work properly.
vue-chartjs - Doughnut chart with text in the middle
Working Example from post
The example in the post above uses a textCenter() function and constantly access the context ctx variable. The first error I get however reads Property 'pluginService' does not exist on type 'typeof Chart' and also a Cannot read properties of undefined (reading 'register'). I think this has to do with the way VueChart3 and it's Chart.register(...registerables) line.
I've commented out all of the code that breaks the chart currently while I try and fix this issue.
I am really stumped on where to go with this now and could really use a bit guidance.
Cheers!
CodeSandbox Link
Chart2.vue
<template>
<div style="display: flex; justify-content: center; margin: 5rem">
<DoughnutChart :options="options" v-bind="doughnutChartProps" />
</div>
</template>
<script lang='ts'>
import { computed, ref, onMounted } from "vue";
import { DoughnutChart, useDoughnutChart } from "vue-chart-3";
import { Chart, ChartData, ChartOptions, registerables } from "chart.js";
Chart.register(...registerables, plugin);
var plugin = function (chart) {
var width = chart.chart.width;
var height = chart.chart.height;
var ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 114).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = 800;
var textX = Math.round((width - ctx.measureText(text).width) / 2);
var textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
};
export default {
name: "Home",
components: { DoughnutChart },
setup(props) {
const isResponsive = ref(true);
const getData = computed<ChartData<"doughnut">>(() => ({
labels: ["Success"],
datasets: [
{
data: [10, 90],
backgroundColor: ["#56cd92", "#f0f7ff"],
},
],
}));
onMounted(() => {
addPlugin({
id: "my-plugin",
beforeDraw: plugin,
});
// renderChart(chartdata, options);
// textCenter(1000);
});
const options = computed<ChartOptions<"doughnut">>(() => ({
plugins: {
legend: {
position: "bottom",
},
},
}));
const { doughnutChartProps } = useDoughnutChart({
options,
chartData: getData,
});
return {
isResponsive,
getData,
options,
doughnutChartProps,
};
},
};
</script>
This is because pluginService is V2 syntax, to register plugins globally in V3 you can do it the same way you did with the registerables like so:
Chart.register(plugin)
You can even do it in the same register call like so:
Chart.register(...registerables, plugin)
Edit:
Plugins also have to be objects so chart.js knows which hook to use as you did in the mounted so your plugin variable has to look like this (still V2 syntax, you will need to change this yourself) to work:
var plugin = {
id: 'idOfPlugin',
beforeDraw: function (chart) {
var width = chart.chart.width;
var height = chart.chart.height;
var ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 114).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = 800;
var textX = Math.round((width - ctx.measureText(text).width) / 2);
var textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
};
}
I've been trying to make this work for a while but haven't made any progress. Not sure if I'm missing something or if it just won't work within this setup.
In short: client has a shopify site, and wants to load in images from tumblr in an infinite scroll.
I'm using the standards from DeSandro: Infinite Scroll, Masonry, ImagesLoaded, and basing the combination on this pen.
I have the tumblr feed loading in fine via tumblr API, and displayed in a masonry grid, but can't get the infinite scroll to work.
Will InfiniteScroll not work because the content is loaded in via ajax, and isn't actually on the page yet when InfiniteScroll tries to load it in? Any insight would be appreciated!
$(document).ready(function() {
// Main content container
var $container = $('#tblr_container');
$.ajax({
url: 'https://api.tumblr.com/v2/blog/xxxxxxx.tumblr.com/posts?api_key=xxxxxxx&limit={{ pagesize }}&offset={{ offset }}&callback=?',
dataType:'json',
success: function(data) {
$.each(data.response.posts, function(index,item) {
if (this['type'] === 'photo') {
var src = item.photos[0].alt_sizes[0].url;
$("#tblr_container").append('<div class="item masonry__item ' + index + '"><li><img src = "'+src+'"></li></div>');
}
});
// init Masonry
var $grid = $('#tblr_container').masonry({
itemSelector: 'none', // select none at first
columnWidth: '.grid-sizer',
gutter: 5,
percentPosition: true,
stagger: 30,
// nicer reveal transition
visibleStyle: { transform: 'translateY(0)', opacity: 1 },
hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },
});
// get Masonry instance
var msnry = $grid.data('masonry');
// initial items reveal
$grid.imagesLoaded( function() {
$grid.removeClass('are-images-unloaded');
$grid.masonry( 'option', { itemSelector: '.item' });
var $items = $grid.find('.item');
$grid.masonry( 'appended', $items );
});
// init Infinte Scroll
$grid.infiniteScroll({
path: '.pagination__next',
append: '.item',
outlayer: msnry,
hideNav: '#pagination',
status: '.page-load-status',
});
}
});
Here's the link: https://negativeunderwear.com/pages/for-women
And, the link to page 2: https://negativeunderwear.com/pages/for-women?page=2&cache=false - this is .pagination__next
(FYI before clicking, it's a women's underwear site.)
Thanks!
I am using Google Maps API with multiple markers & mouse over & infowindows. It works perfectly. Now I want to add an individual URL for each marker on CLICK. But for some reason, all markers always open the last URL. - What is possibly the problem?
// Define your locations: HTML content for mouseover, the info window content, latitude, longitude, url
var locations = [
['<h8>Brugg</h8>', '<h7>auseinander.</h7>', 47.4867355, 8.2109103, 'http://www.stadtereignisse.ch/dokumentiert/'],
['<h8>Aarau»</h8>', '<h7>Aarau</h7>', 47.391224, 8.038669, 'http://www.stadtereignisse.ch/erlebt/'],
['<h8>Bern</h8>', '<h7>Bern</h7>', 46.947974, 7.447447, 'http://www.stadtereignisse.ch/erwuenscht/']
];
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
/* title: locations[i][0], */
url: "http://www.stadtereignisse.ch/dokumentiert/",
map: map,
visible: true,
icon: icons[iconCounter]
});
markers.push(marker);
// CLICK (Allow each marker to have an info window)
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
// MOUSEOVER
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
iconCounter++;
// We only have a limited number of possible icon colors, so we may have to restart the counter
if(iconCounter >= iconsLength) {
iconCounter = 0;
}
}
Look at the difference between your click handler and your mouseover handler. One of these creates a closure; the other does not. You need to create a closure for click as well.
However, instead of the complicated technique of a function-that-returns-a-function, there is a cleaner way to do it. Simply move the entire loop body into one function that you call from the loop. Then you won't need the extra complication on the mouseover (or click either).
Also, as #ValLeNain pointed out, you're setting marker.url to a hard coded value instead of a different value for each marker, so I changed that to what looks like the value you want.
Finally, a bit of user experience advice: I do not recommend opening an infowindow on a mouseover. As you have probably noticed, if you open an infowindow for a marker near the top of the visible map, the entire map shifts to bring the infowindow into view. It is confusing and surprising when a mouseover triggers that movement. Infowindows should be opened on a click, not a mouseover. Then if you want to put a link inside the infowindow text you can do that.
I didn't address this issue in the code below, but will leave it for you to sort out.
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
addMarker( locations[i] );
}
function addMarker( location ) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(location[2], location[3]),
title: location[0],
url: location[4],
map: map,
visible: true,
icon: icons[iconCounter]
});
markers.push(marker);
// CLICK (Allow each marker to have an info window)
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
// MOUSEOVER
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent(location[0]);
infowindow.open(map, marker);
});
iconCounter++;
// We only have a limited number of possible icon colors, so we may have to restart the counter
if(iconCounter >= iconsLength) {
iconCounter = 0;
}
}
How can I add jssor transition into my slider?
I used the Jssor code like this:
<script src="js/jssor.slider.mini.js"></script>
<sc...>
jQuery(document).ready(function ($) {
var options = { $AutoPlay: true };
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
<sc...>
Reference: http://www.jssor.com/development/
This above code is working well, but now I'm gonna use this following Transition Code:
{$Duration:1500,x:0.2,y:-0.1,$Delay:20,$Cols:8,$Rows:4,$Clip:15,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$SlideOut:true,$Formation:$JssorSlideshowFormations$.$FormationZigZag,$Assembly:260,$Easing:{$Left:$JssorEasing$.$EaseInWave,$Top:$JssorEasing$.$EaseInWave,$Clip:$JssorEasing$.$EaseOutQuad},$Outside:true,$Round:{$Left:0.8,$Top:2.5}}
Reference: http://www.jssor.com/development/tool-slideshow-transition-viewer.html
Where in this following code can I add this transition?
<sc...>
jQuery(document).ready(function ($) {
var options = { $AutoPlay: true };
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
</sc...>
Finally I could find it. Here is the answer:
jssor_slider1_starter = function (containerId) {
//Define an array of slideshow transition code
var _SlideshowTransitions = [
{$Duration:1500,x:0.2,y:-0.1,$Delay:20,$Cols:8,$Rows:4,$Clip:15,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$SlideOut:true,$Formation:$JssorSlideshowFormations$.$FormationZigZag,$Assembly:260,$Easing:{$Left:$JssorEasing$.$EaseInWave,$Top:$JssorEasing$.$EaseInWave,$Clip:$JssorEasing$.$EaseOutQuad},$Outside:true,$Round:{$Left:0.8,$Top:2.5}}
];
// And you can add more transitions to the array.
var options = {
$AutoPlay: true,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 1,
$ShowLink: true
}
};
var jssor_slider1 = new $JssorSlider$(containerId, options);
};
Reference: http://www.jssor.com/development/tool-slideshow-transition-viewer.html
I'm just following on from a previous post about a pollslider - see this fiddle:
http://jsfiddle.net/XNnHC/3/
I'm trying to get the pollSlider div to be hidden initially, when you click the pollSlider-button the pollSlider div is made visible, then animated into position. Then when the button is clicked again for the pollSlider div to animate and then hidden.
$(document).ready(function()
{
$('#pollSlider-button').click(function() {
if($(this).css("margin-right") == "200px")
{
$('.pollSlider').animate({"margin-right": '-=200'});
$('#pollSlider-button').animate({"margin-right": '-=200'});
}
else
{
$('.pollSlider').animate({"margin-right": '+=200'});
$('#pollSlider-button').animate({"margin-right": '+=200'});
}
});
});
Animate your poll width and not margin-right. Something like this:
MY FIDDLE
$(document).ready(function()
{
$('#pollSlider-button').click(function() {
if($(this).css("margin-right") == "200px")
{
$('.pollSlider').animate({"width": '-=200'});
$('#pollSlider-button').animate({"margin-right": '-=200'});
}
else
{
$('.pollSlider').animate({"width": '+=200'});
$('#pollSlider-button').animate({"margin-right": '+=200'});
}
});
});