I have a button that when clicked creates a slider.
HTML:
<a id="slider"class = "button small">Create Slider</a>
JS:
$('#slider').click(function(eventClick, posX, posY){
var htmlData='<div id="sldr'+$.count+'" class="draggable"' + 'data-page="' + $.page + '" ';
htmlData += 'style="height:25px; width:360px"><input id="movingslider'+$.count+'" class="sldr" type="text" data-slider="true" data-slider-range="10,1000"><span class="output"></span></div>';
var temp = $.count
$('.demo').append(htmlData);
$('#movingslider'+temp).simpleSlider();
$('#movingslider'+temp).bind("slider:ready slider:changed", function (event, data) {
$(this).nextAll(".output:first").html((data.value.toFixed(3)));
});
$('#sldr'+temp).draggable({
containment: "#workspace",
scroll: false,
cancel: false,
}
})
$('a.delete').on('click',function(e){
e.preventDefault();
btnID = $(this).closest('.draggable')[0].id;
//alert('Now deleting "'+objID+'"');
$('#'+btnID+'').remove();
});
$.count++;
});
I'm having some problem with the values of the newly created slider. I've indicated that the ranges should be from 10-1000 but when I started scrolling the slider, it shows the default range, 0-1. How could I change the range printed?
Within the configuration of the slider you can specify the range and steps:
data-slider-range:
The range representing the start and end of the slider. Eg. data-slider-range="10,1000"
data-slider-step:
The interval to move when dragging the slider. Eg. data-slider-step="100"
then you can access the value of the slider as:
$("#movingslider").bind("slider:changed", function (event, data) {
// The currently selected value of the slider
alert(data.value);
// The value as a ratio of the slider (between 0 and 1)
alert(data.ratio);
});
Related
Hi I'm working on a project where I have a multi-image slider.
Each image needs to have a legend.
I'm getting the alt tag from the image and storing it in a p tag with a legend of legend--text.
I've then created a function that plays when I change slides. This is where I'm having a problem.
I'm setting a variable that gets the active slide, and another one that gets the legend from the active slide - this works fine.
I then tried to use the appendTo() function to copy the content from the legend variable to a div tag with a class of .project__information.
I understand that this is not working because it's not a DOM element, but I've looked for solutions and can't really find any.
Here's my code:
// For each active slide get the alt attribute and store it in <p>
$('.is--legend').each(function() {
var $this = $(this);
$this.append('<p class="legend--text">' + $this.parent().find('img').attr('alt') + '</p>');
});
// Set splide slider
var elms = document.getElementsByClassName('splide');
for (var i = 0, len = elms.length; i < len; i++) {
var splide = new Splide(elms[i], {
type: 'loop',
drag: 'free',
focus: 'center',
perPage: 3,
autoWidth: 'true',
breakpoints: {
767: {
perPage: 1,
}
}
}).mount();
}
function slideChange() {
// Gets active slide
var activeSlide = $(".splide__slide.is-active:not(.splide__slide--clone)");
console.log('Passing through the', activeSlide);
// Gets the legend
var myLegend = activeSlide.find('.legend--text').text();
console.log('Getting the new', myLegend);
myLegend.appendTo('.project__information');
}
splide.on("move", function() {
slideChange();
});
slideChange();
If anyone has an idea as to how I could achieve this, some related documentation about how to proceed, please let me know
I need to create a Trello-like frame with 4 lists and cards on which I want to drag and drop cards between those lists, however, I would like to know how can I update the database in Mysql when I drag and drop the elements?
I'm not able to identify how to update ajax and php.
script.js
var itemContainers = [].slice.call(document.querySelectorAll('.board-column-content'));
var columnGrids = [];
var boardGrid;
// Define the column grids so we can drag those
// items around.
itemContainers.forEach(function (container) {
// Instantiate column grid.
var grid = new Muuri(container, {
items: '.board-item',
layoutDuration: 400,
layoutEasing: 'ease',
dragEnabled: true,
dragSort: function () {
return columnGrids;
},
dragSortInterval: 0,
dragContainer: document.body,
dragReleaseDuration: 400,
dragReleaseEasing: 'ease'
})
.on('dragStart', function (item) {
// Let's set fixed widht/height to the dragged item
// so that it does not stretch unwillingly when
// it's appended to the document body for the
// duration of the drag.
item.getElement().style.width = item.getWidth() + 'px';
item.getElement().style.height = item.getHeight() + 'px';
})
.on('dragReleaseEnd', function (item) {
// Let's remove the fixed width/height from the
// dragged item now that it is back in a grid
// column and can freely adjust to it's
// surroundings.
item.getElement().style.width = '';
item.getElement().style.height = '';
// Just in case, let's refresh the dimensions of all items
// in case dragging the item caused some other items to
// be different size.
columnGrids.forEach(function (grid) {
grid.refreshItems();
});
})
.on('layoutStart', function () {
// Let's keep the board grid up to date with the
// dimensions changes of column grids.
boardGrid.refreshItems().layout();
});
// Add the column grid reference to the column grids
// array, so we can access it later on.
columnGrids.push(grid);
});
// Instantiate the board grid so we can drag those
// columns around.
boardGrid = new Muuri('.board', {
layoutDuration: 400,
layoutEasing: 'ease',
dragEnabled: true,
dragSortInterval: 0,
dragStartPredicate: {
handle: '.board-column-header'
},
dragReleaseDuration: 400,
dragReleaseEasing: 'ease'
});
I would like to suggest you to use this jKanban boards
In this you can find all events very easily and let me know if you face any issue in this
https://www.riccardotartaglia.it/jkanban/
I'm trying to use Ion.RangeSlider to make a slider where the color starts from the center and goes in the direction of the slider control until it hits the slider control. Right now, this is what I have:
Instead, I would like the color to go from the center of the slider to the slider control.
How can I make the RangeSlider work like that so that the color starts from the middle (as shown above)?
EDIT:
I looked at this question, but it deals with sliders with two controls instead one.
EDIT 1:
setup.js:
jQuery(document).ready(function($){
$(".slider").each(function() {
console.log($(this).attr("id"));
$(this).ionRangeSlider({
type: $(this).attr("data-slider_type"),
grid: $(this).attr("data-slider_grid"),
min: $(this).attr("data-slider_min"),
max: $(this).attr("data-slider_max"),
prefix: $(this).attr("data-slider_prefix")+" ",
postfix: " " + $(this).attr("data-slider_suffix"),
step: $(this).attr("data-slider_stepper"),
from: $(this).attr("data-slider_from")
});
$(this).on("change", function () {
var $this = $(this),
value = $this.prop("value").split(";");
});
});
});
Use: https://github.com/jordansoltman/ion.rangeSlider with has the additional boolean option: fixMiddle. For example:
$(".slider").ionRangeSlider({
fixMiddle: true,
...
});
Note: use ion.rangeSlider.js as ion.rangeSlider.min.js has not been updated.
I'm using 3 noUISliders. I want to combine the outputs of the 3 sliders to create an html output. Specifically, I want to use the combination to select an image file (ie. img135.jpg) where 1 is the output from the first slider, 3 is from the second and 5 is from the third. I have 27 images - I want to be able to select one based on the combined output of the 3 sliders ( 111.jpg, 211.jpg, 311.jpg, etc. through 555.jpg).
I have three sliders providing output:
var slider1 = document.getElementById('slider1');
noUiSlider.create(slider1, {
start: 1,
connect: 'lower',
orientation: 'horizontal',
range: {
'min': 1,
'max': 5
},
snap: true,
format: wNumb({
decimals: 0
})
});
var sliderOutput1 = document.getElementById('value-slider1');
slider1.noUiSlider.on('update', function(values, handle) {
sliderOutput1.innerHTML = values[handle];
});
var sliderOutput2 = document.getElementById('value-slider2');
slider2.noUiSlider.on('update', function(values, handle) {
sliderOutput2.innerHTML = values[handle];
});
var sliderOutput3 = document.getElementById('value-slider3');
slider3.noUiSlider.on('update', function(values, handle) {
sliderOutput3.innerHTML = values[handle];
});
var image_path = 'img' + sliderOutput1.val() + sliderOutput2.val() + sliderOutput3.val() + '.jpg';
("#img").html(image_path);
<div id="slider1"></div>
<div id="slider2"></div>
<div id="slider3"></div>
<span id="value-slider1"> </span>
<span id="value-slider2"> </span>
<span id="value-slider3"> </span>
<div id="img"></div>
The sliders are all in and outputting values. I need advice on how to take the next step.
I'm pretty new at jscript, so any help or advice that you could provide would be great appreciated.
Ken
You can make it a lot fancier, but a simple pattern like the following should be fine:
function updatePicture() {
var image_path = 'img' + sliderOutput1.val() + sliderOutput2.val() + sliderOutput3.val() + '.jpg';
// I assume the missing $ was a typo
$("#img").html(image_path);
}
slider1.noUiSlider.on('update', function(values, handle) {
sliderOutput1.innerHTML = values[handle];
updatePicture();
});
var sliderOutput2 = document.getElementById('value-slider2');
slider2.noUiSlider.on('update', function(values, handle) {
sliderOutput2.innerHTML = values[handle];
updatePicture();
});
var sliderOutput3 = document.getElementById('value-slider3');
slider3.noUiSlider.on('update', function(values, handle) {
sliderOutput3.innerHTML = values[handle];
updatePicture();
});
Basically you get an event when any of the sliders change, you then proceed to update its output text (which you've done yourself), and the last step is to trigger the image refresh function which combines the three outputs into a usable path.
Interesting slider library by the way, I've never seen it before!
I'm having problems, trying to display the mouse position x/y when they click on an image, im using one of the click on and image example that phaser provides.
here is the code
var game = new Phaser.Game(800, 500, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });
var text;
var counter = 0;
function preload () {
// You can fill the preloader with as many assets as your game requires
// Here we are loading an image. The first parameter is the unique
// string by which we'll identify the image later in our code.
// The second parameter is the URL of the image (relative)
game.load.image('Happy-face', 'happy.png');
}
function create() {
// This creates a simple sprite that is using our loaded image and
// displays it on-screen and assign it to a variable
var image = game.add.sprite(game.world.centerX, game.world.centerY, 'Happy-face');
// Moves the image anchor to the middle, so it centers inside the game properly
image.anchor.set(0.5);
// Enables all kind of input actions on this image (click, etc)
image.inputEnabled = true;
this.position = new Phaser.Point();
text = game.add.text(250, 16, '', { fill: '#ffffff' });
image.events.onInputDown.add(listener, this);
}
function listener () {
counter++;
text.text = "Position x/y " + counter + "!";
}
if you want x and y position o f input
game.input.x;
game.input.y;
if you want for mouse specifically
game.input.mousePointer.x;
game.input.mousePointer.y;
the listener function will be like
function listener () {
counter++;
text.text = game.input.mousePointer.x +"/"+game.input.mousePointer.y + counter + "!";
}
Just to add that the listener function will be sent 2 parameters: sprite and pointer. So you can do:
function listener (sprite, pointer) {
var x = pointer.x;
var y = pointer.y;
...
}
This will be the most accurate method to use as it accounts for multi-touch devices, where-as accessing input.x/y directly doesn't, it only contains the most recent touch event coordinates (which in a mouse only environment is fine, but not anywhere else).