We Keep Coding

Grid Stack Widgets sorting Issue with Vue JS

We are using GridStack Widgets plugin in Vue JS for creating dynamic widgets and it's working fine.
However, on new widgets creation we are setting 'Y' values as widgets.length + 120.
New widget added at the bottom of page with incremented in 'Y' value etc: (121, 122, 123) which is the correct case.
but on page load GridStack sort widgets on the basis of 'Y' value with descended order and all widgets get sorted like: 123, 122, 121 ... and high value of 'Y' came up on top.
I want to revers this sorting option, so last created widgets set on bottom of page as it was on creation time and widgets will be like 121, 122, 123
GridStack.init({
column: 120,
cellHeight: 15,
margin: 5,
});
using above options while in mounted phase.
I've added this key value oneColumnModeSort:'column-reverse' in option but it's not working.
GridStack.init({
column: 120,
cellHeight: 15,
margin: 5,
oneColumnModeSort:'column-reverse',
});
Is there any way, i can change default sorting option in Grid Stack VueJS.

How to tell bxslider to change the minimum number of images?

I have a hypothetical question , suppose i am using the plugin bxslider and at smaller widths i want to change the minimum no. of images, how do i do it? let me explain, see the below code:
$('.bxslider').bxSlider({
minSlides: 3,
maxSlides: 4,
slideWidth: 170,
slideMargin: 10
});
Taken from HERE , now suppose at a smaller width , i would like the minimum number of images to be say 2 , how to i do this ? , so say in jQuery i have a resize handler , something like:
$(window).resize(function(){
if($(window).width() < 768) {
// here is where i would like to change the min number of images
}
});
So once again to repeat my question , how do i change the minimum no. of images in bxslider ?
EDIT:: one way i realise as i was typing this question was to call the destroy() function on bxslider, like so:
slider = $('.bxslider').bxSlider();
slider.destroySlider();
And then maybe recall the plugin on the element, But i really want to know what other interesting solutions exit for this sort of a scenario. (I'am going to go try my solution and see if it works in the mean time ).

Please check below link hope this may help
http://bxslider.com/examples/reload-slider-settings

Loading spinner and message displaying when back button clicked

When links on my page are clicked, a spinner and a message appear on the page. It works, and they disappear appropriately when the new page is loaded in.
I utilized spin.js found here to implement the loading spinner.
I found a bug though. When a user clicks the back button on their browser, it goes back to the previous page, but in the state of displaying the spinner and error message. I want to of course go back to the state where the message is hidden and the spinner is not showing.
According to this post, it sounds like the issue might have to do with cacheing.
I am using the jquery-turbolinks gem
Below is my code:
#app/assets/javascripts/foo.js
$(document).ready(function(){ #for turbolinks compatability
(function default_hide_waiting_message(){
$("#waiting_message").hide();
}());
(function display_loading_spinner_and_message(){
$(".show_loading_spinner_on_click").on('click', function(){
var opts = {
lines: 12 // The number of lines to draw
, length: 7 // The length of each line
, width: 5 // The line thickness
, radius: 10 // The radius of the inner circle
, scale: 1.0 // Scales overall size of the spinner
, corners: 1 // Roundness (0..1)
, color: '#000' // #rgb or #rrggbb
, opacity: 1/4 // Opacity of the lines
, rotate: 0 // Rotation offset
, direction: 1 // 1: clockwise, -1: counterclockwise
, speed: 1 // Rounds per second
, trail: 100 // Afterglow percentage
, fps: 20 // Frames per second when using setTimeout()
, zIndex: 2e9 // Use a high z-index by default
, className: 'spinner' // CSS class to assign to the element
, top: '50%' // center vertically
, left: '50%' // center horizontally
, shadow: false // Whether to render a shadow
, hwaccel: false // Whether to use hardware acceleration (might be buggy)
, position: 'absolute' // Element positioning
}
var target = document.getElementById('spinner')
var spinner = new Spinner(opts).spin(target)
$("#waiting_message").fadeIn('slow');
});
}());
});

The issue is happening because the $(document).ready function isn't getting called when you hit back. You'll need to update your javascript to accommodate Turbolinks.
Instead of using $(document).ready try using the appropriate page event, such as page:load. The available options are listed in the Turbolinks docs
Your final javascript would have something similar to $(document).on("page:fetch", default_hide_waiting_message)

$(window).bind("pageshow", function(event) {
$("#waiting_message").hide();});

jQuery Slider - Getting faster

I know how to use the jQuery slider but wondered how I might go about this.
I'd like it so the further right you slide the handle the quicker a divs width increases.
For example. If I slide to step 1 of the slider, the width of the div continuously increases by 5px. If I slide to step 2 of the slider, the width of the div continuously increases by 10px.
Thanks in advance
Edit:
so far I have this, but this obviously isn't right. I'm not quite sure where to go from here:
$( ".sliderh" ).slider({
value:1,
min: 1,
max: 200,
slide: function( event, ui ) {
horizontalVal = ui.value
$('.square').css('width', horizontalVal)
}
});

If you want the value of the slider to increase exponentially, you just have to decide on some exponential format for it. Something like horizontalVal = Math.pow(horizontalVal, 2). If that increases the div too slowly or too quickly, just adjust. You could do horizontalVal = Math.pow(horizontalVal/2, 2) for instance.
edit:
What about something like this:
var increase;
var interval;
$( ".sliderh" ).slider({
value:1,
min: 1,
max: 200,
slide: function( event, ui ) {
increase = ui.value;
}
});
$(".sliderh").mousedown(function(e){
interval = setInterval(function(){
$('.square').css('width', $('.square').width() + increase);
}, 200);
});
$(".sliderh").mouseup(function(e){
clearInterval(interval);
});
You can tweak the interval length, currently set to 200ms, and the increase size, currently just set to the value of the slider, to change the effect. Right now, it will increase while you hold down the mouse every 200ms by the value of the slider, the further you slide right, the more it increases each interval.

jQuery plugin, shake ..

i have this code: http://jsfiddle.net/Ym4NP/2/ why the 'content' div does not move to up , move only to down ? and how i send $this ( selector ) to callback function ?

I would just use jQuery UI to do this effect.
See this fiddle:
http://jsfiddle.net/kEKtw/2/
With this code
$(document).ready(function() {
$('#main').effect("shake", {direction:'up', times:10}, 0);
});
Notes:
I changed the css to make the numbers add up or the UI code would have issues.
If you look at how jQUI implements shake you will see the "effects" stack is implemented as an array as I suggest below.
The reason positions should be an array:
What you really want to do is set up a sequence like this:
move up random amount
wait set time
move back to center
wait set time
move down random amount
However using positions as an object does not give ordering nor does it allow you to repeat commands (since ever command is an object property name which must be unique.)
If it was an array you could set up something like this to pass into the plugin:
positions: [
'U': -300,
'W' : 1000,
'C' : 0,
'W' : 1000,
'D': 300
],
Old answer
The code is complex, but your problem is simple.
At each "move" in the shake you change the relative location of the top or bottom to a new number from 1 to 300. This means the item will move between 1 and 300+object size. I believe what you want to do is move it between -300 and +300. To do this you will need to change the U command to set a value of -300 to 0 not 0 to 300
There is another error in the logic -- it does not reset the box to the center.