We Keep Coding

two dimensional array random generator jQuery

All rows always have same numbers, why? They should take random number to populate it. Also, how can I repair it? Once I saw answer here but now I cannot find it.
var mapSizex = 5;
var mapSizey = 6;
var mapArray = [];
$(function() {
console.log("ready!");
$('#map-draw').html(drawMap());
});
function mapGenerator() {
for (i = 0; i < mapSizex; i++) {
for (x = 0; x < mapSizey; x++) {
mapArray[i, x] = getRandom(1, 5);
}
}
}
function drawMap() {
mapGenerator();
var map = '';
tileID = 0;
for (i = 0; i < mapSizex; i++) {
map = map + '<br style="clear: both;">';
for (x = 0; x < mapSizey; x++) {
map = map + '<div class="tile tileID' + tileID + '">' + mapArray[i, x] + '</div>';
tileID++;
}
}
return map;
}
function getRandom(min, max) {
var x = Math.floor((Math.random() * max) + min);
return x;
}
.tile {
float: left;
height: 20px;
width: 20px;
border: 1px solid black;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="map-container">
<div id="map-draw"></div>
</div>
</div>
To post it I need to add some more content but all included information's should be enough to find what I mean.

here is a link to JSFIDDLE woking code
It should be mapArray[i][x] and I added mapArray[i]=[]; in the outer loop.
here is your fixed code:
var mapSizex=5;
var mapSizey=6;
var mapArray=[];
$(function() {
console.log( "ready!" );
$('#map-draw').html(drawMap());
});
function mapGenerator(){
for(i=0;i<mapSizex;i++){
mapArray[i]=[];
for(x=0;x<mapSizey;x++){
mapArray[i][x]= getRandom(1,5);
console.log(i,x,getRandom(1,5))
}
}
}
function drawMap(){
mapGenerator();
console.log(mapArray)
var map='';
tileID=0;
for(i=0;i<mapSizex;i++){
map=map+'<br style="clear: both;">';
for(x=0;x<mapSizey;x++){
map=map+'<div class="tile tileID'+tileID+'">'+mapArray[i][x]+'</div>';
tileID++;
}
}return map;
}
function getRandom(min,max) {
var x = Math.floor((Math.random() * max) + min);
return x;
}

Javascript how to set interval time to stop scrolling

This is the demo in jsfiddle, demo
What I want is let the scrolled items('one ', 'two', 'three', '4', '5', '6', '7') automatically scroll up like the demo showed, and stop 2 sec when it's in the middle position. But in my demo, it will shack for a while after stopping in the middle position.
Here is the place in my demo code for setting position.
if ((x == 0) || (x % 35== 0)) {
setTimeout(function () {
i.top = x + 'px';
}, 1000);
} else {
i.top = x + 'px';
}
Any one can help me? Thanks!
UPDATE:
The reason why I set 35 is because I found that the scrolled items are approximately in the middle position when it equals to 0, -35,-70,-105,.... But when I console all x, I found that the value of x is between (31, -251). Do you know how to find the exact position when each items are in the middle of position? Thanks!

i modified your code a bit,
i set a variable "k" that the interval is assigned to and i clear the interval on stop and start it again after the timeout
looks good for me -> http://jsfiddle.net/ato0mf7u/3/
no funny shakin anymore ;-D
window.onload = addScrollers;
var i = 1;
var arr = ['one ', 'two', 'three', '4', '5', '6', '7'];
var mid;
var k;
function addScrollers() {
var txt = arr[0];
while (i < arr.length) {
txt += '<p>' + arr[i] + '</p>';
i++;
}
startScroll('myscroller', txt);
}
var speed = 10; // scroll speed (bigger = faster)
var dR = false; // reverse direction
var step = 1;
function objWidth(obj) {
if (obj.offsetWidth) return obj.offsetWidth;
if (obj.clip) return obj.clip.width;
return 0;
}
function objHeight(obj) {
if (obj.offsetHeight) return obj.offsetHeight;
if (obj.clip) return obj.clip.height;
return 0;
}
function scrF(i, sH, eH) {
var x = parseInt(i.top) + (dR ? step : -step);
if (dR && x > sH) {
x = -eH;
} else if (x < 1 - eH) {
x = sH;
}
//when x is the times of 35, the positio is in middle
if ((x == 0) || (x % 35== 0)) {
clearInterval(k);
setTimeout(function () {
i.top = x + 'px';
k = setInterval(function () {
scrF(i, sH, eH);
}, 1000 / speed);
}, 1000);
}
else {
i.top = x + 'px';
}
return x;
}
function startScroll(sN, txt) {
var scr = document.getElementById(sN);
var sW = objWidth(scr);
var sH = objHeight(scr);
scr.innerHTML = '<div id="' + sN + 'in" style="position:absolute; left:3px; width:' + sW + ';">' + txt + '<\/div>';
var sTxt = document.getElementById(sN + 'in');
var eH = objHeight(sTxt);
mid = (eH - sH) / 2;
sTxt.style.top = (dR ? -eH : sH) + 'px';
sTxt.style.clip = 'rect(0,' + sW + 'px,' + eH + 'px,0)';
k = setInterval(function () {
scrF(sTxt.style, sH, eH);
}, 1000 / speed);
}

DIV animation and property change

I'm trying to simulate TCP packet transmission and sliding window, and fortunately I've made much progress. But now I want to fix a minor issue with the sliding window, which is a sliding DIV:
Hopefully if you are familiar with TCP's slow start, the window size double up to a number, and then increments by one. This is working. Now what I want to fix is sliding to right. So I want to automatically slide one step right when each ack is received at the original machine. Currently it does not move when the ack is received; so each time I press the button, it retransmits many of the previous packets! My work is here: http://web.engr.illinois.edu/~shossen2/CS438/Project/
$(document).ready(function () {
var count = 0;
var items = 0;
var packetNumber = 0;
var speed = 0;
var ssth= $("#ssth").val();
var window_left=0;
for (var i = 1; i <= 32; i++) {
$('#table').append("<div class='inline' id='"+i+"'>"+i+"</div>");
}
document.getElementById(1).style.width = 22;
$("button").click(function() {
if (items < ssth) {
if (items == 0)
items = 1;
else
items = items * 2;
count++;
} else {
items = items + 1;
}
window_left += 20;
window_width=items * 20;
document.getElementById("window_size").innerHTML = items;
document.getElementById("window").style.left= window_left + "px";
document.getElementById("window").style.width=window_width + "px";
speed = +$("#speed").val();
createDivs(items);
animateDivs();
});
function createDivs(divs) {
packetNumber = 1;
var left = 60;
for (var i = 0; i < divs; i++) {
var div = $("<div class='t'></div>");
div.appendTo(".packets");
$("<font class='span'>" + (parseInt(packetNumber) + parseInt(window_left/20) -1) + "</font>").appendTo(div);
packetNumber++;
div.css({
left: left
/* opacity: 0*/
}).fadeOut(0);
//div.hide();
//left += 20;
}
}
function animateDivs() {
$(".t").each(function (index) { // added the index parameter
var packet = $(this);
packet
.delay(index * 200)
.fadeIn(200, function() {
$('#table #' + (index + window_left/20)).css({background:'yellow'});
})
.animate({left: '+=230px'}, speed)
.animate({left: '+=230px'}, speed)
.fadeOut(200, function () {
packet
.css({
top: '+=20px',
backgroundColor: "#f09090"
})
.text('a' + packet.text());
})
.delay(500)
.fadeIn(200)
.animate({left:'-=230px'}, speed)
.animate({left:'-=230px'}, speed)
.fadeOut(200, function () {
packet
.css({
top: '-=20px',
backgroundColor: "#90f090"
});
$('#table #' + (index + window_left/20)).css({background:'lightgreen'});
});
}).promise().done(function(){
$(".packets").empty();
});
}
});

How can I change the number of columns in Gridster?

I have a a gridster based layout that will start with a set number of columns and a fixed number of tiles. Is there a way to change the number of columns once it has been set up? -- for example starting with 3 columns :
(tile1 | tile2 | tile3
tile4 | tile5 | tile6)
and changing it to a two column layout:
(tile1 | tile2
tile3 | tile4
tile5 | tile6)
The change will be driven by user interaction.
I have tried to use something like:
gridster = $("#gridster-container").gridster({
widget_margins: [30, 30],
widget_base_dimensions : [ 200, 170 ],
max_cols:numberOfColumns,
avoid_overlapped_widgets: true
}).data('gridster');
// user interaction
gridster.options.max_rows = 2;
gridster.init();
but that does not seem to work...
I have tried manually changing the data-row and data-col values to the new positions, and called init() (and not called init).
I have even tried changing the gridster code adding
// HACK
if (max_cols && max_cols < this.cols) {
this.cols = max_cols;
}
to the method fn.generate_grid_and_stylesheet (just after the line:
if (max_cols && max_cols >= min_cols && max_cols < this.cols) {
this.cols = max_cols;
}
).
I can get the tiles to move the the correct position using any of these options, but subsequent dragging behaviour is... odd.
I have set up a jsfiddle (http://jsfiddle.net/qT6qr/) to explain what I mean (please excuse the gridster.min.js in line at the top of the fidddle, I couldn't find a cdn that I could use for it...).
Thanks in advance

I just spent a couple of hours and ran across this piece of code. I just put it in a .js file and did:
var gr = $(elem).gridster(options).data('gridster');
// update options and then call this at a later point:
gr.resize_widget_dimensions(options);
And then it just worked.
Here's the code:
(function($) {
$.Gridster.generate_stylesheet = function(opts) {
var styles = '';
var max_size_x = this.options.max_size_x;
var max_rows = 0;
var max_cols = 0;
var i;
var rules;
opts || (opts = {});
opts.cols || (opts.cols = this.cols);
opts.rows || (opts.rows = this.rows);
opts.namespace || (opts.namespace = this.options.namespace);
opts.widget_base_dimensions || (opts.widget_base_dimensions = this.options.widget_base_dimensions);
opts.widget_margins || (opts.widget_margins = this.options.widget_margins);
opts.min_widget_width = (opts.widget_margins[0] * 2) +
opts.widget_base_dimensions[0];
opts.min_widget_height = (opts.widget_margins[1] * 2) +
opts.widget_base_dimensions[1];
/* generate CSS styles for cols */
for (i = opts.cols; i >= 0; i--) {
styles += (opts.namespace + ' [data-col="'+ (i + 1) + '"] { left:' +
((i * opts.widget_base_dimensions[0]) +
(i * opts.widget_margins[0]) +
((i + 1) * opts.widget_margins[0])) + 'px;} ');
}
/* generate CSS styles for rows */
for (i = opts.rows; i >= 0; i--) {
styles += (opts.namespace + ' [data-row="' + (i + 1) + '"] { top:' +
((i * opts.widget_base_dimensions[1]) +
(i * opts.widget_margins[1]) +
((i + 1) * opts.widget_margins[1]) ) + 'px;} ');
}
for (var y = 1; y <= opts.rows; y++) {
styles += (opts.namespace + ' [data-sizey="' + y + '"] { height:' +
(y * opts.widget_base_dimensions[1] +
(y - 1) * (opts.widget_margins[1] * 2)) + 'px;}');
}
for (var x = 1; x <= max_size_x; x++) {
styles += (opts.namespace + ' [data-sizex="' + x + '"] { width:' +
(x * opts.widget_base_dimensions[0] +
(x - 1) * (opts.widget_margins[0] * 2)) + 'px;}');
}
return this.add_style_tag(styles);
};
$.Gridster.add_style_tag = function(css) {
var d = document;
var tag = d.createElement('style');
tag.setAttribute('generated-from', 'gridster');
d.getElementsByTagName('head')[0].appendChild(tag);
tag.setAttribute('type', 'text/css');
if (tag.styleSheet) {
tag.styleSheet.cssText = css;
} else {
tag.appendChild(document.createTextNode(css));
}
return this;
};
$.Gridster.resize_widget_dimensions = function(options) {
if (options.widget_margins) {
this.options.widget_margins = options.widget_margins;
}
if (options.widget_base_dimensions) {
this.options.widget_base_dimensions = options.widget_base_dimensions;
}
this.min_widget_width = (this.options.widget_margins[0] * 2) + this.options.widget_base_dimensions[0];
this.min_widget_height = (this.options.widget_margins[1] * 2) + this.options.widget_base_dimensions[1];
var serializedGrid = this.serialize();
this.$widgets.each($.proxy(function(i, widget) {
var $widget = $(widget);
this.resize_widget($widget);
}, this));
this.generate_grid_and_stylesheet();
this.get_widgets_from_DOM();
this.set_dom_grid_height();
return false;
};
})(jQuery);

I had a similar problem and was able to get it working through this approach:
var gridster = $(".gridster ul").gridster().data('gridster');
gridster.options.min_cols = 5; // Not necessarily required because of the following size changes, but I did it for clarity
gridster.options.widget_base_dimensions = [240, 400];
gridster.options.min_widget_width = 240;
// This section was for existing widgets. Apparently the code for drawing the droppable zones is based on the data stored in the widgets at creation time
for (var i = 0; i < gridster.$widgets.length; i++) {
gridster.resize_widget($(gridster.$widgets[i]), 1, 1);
}
gridster.generate_grid_and_stylesheet();

Having issues with live calculations, calculating each key stroke

I have a table that calculates a total depending on the input the user types. My problem is that the jquery code is calculating each key stroke and not "grabbing" the entire number once you stop typing. Code is below, any help woud be greatly appreciated.
$(document).ready(function() {
$('input.refreshButton').bind('click', EstimateTotal);
$('input.seatNumber').bind('keypress', EstimateTotal);
$('input.seatNumber').bind('change', EstimateTotal);
});
//$('input[type=submit]').live('click', function() {
function EstimateTotal(event) {
var tierSelected = $(this).attr('data-year');
var numberSeats = Math.floor($('#numberSeats_' + tierSelected).val());
$('.alertbox_error_' + tierSelected).hide();
if (isNaN(numberSeats) || numberSeats == 0) {
$('.alertbox_error_' + tierSelected).show();
} else {
$('.alertbox_error_' + tierSelected).hide();
var seatHigh = 0;
var seatLow = 0;
var seatBase = 0;
var yearTotal = 0;
var totalsArray = [];
var currentYear = 0;
$('.tier_' + tierSelected).each(function() {
seatLow = $(this).attr('data-seat_low');
firstSeatLow = $(this).attr('data-first_seat_low');
seatHigh = $(this).attr('data-seat_high');
seatBase = $(this).attr('data-base_cost');
costPerSeat = $(this).attr('data-cost_per_seat');
years = $(this).attr('data-year');
seats = 0;
if (years != currentYear) {
if (currentYear > 0) {
totalsArray[currentYear] = yearTotal;
}
currentYear = years;
yearTotal = 0;
}
if (numberSeats >= seatHigh) {
seats = Math.floor(seatHigh - seatLow + 1);
} else if (numberSeats >= seatLow) {
seats = Math.floor(numberSeats - seatLow + 1);
}
if (seats < 0) {
seats = 0;
}
yearTotal += Math.floor(costPerSeat) * Math.floor(seats) * Math.floor(years) + Math.floor(seatBase);
});
totalsArray[currentYear] = yearTotal;
totalsArray.forEach(function(item, key) {
if (item > 1000000) {
$('.totalCost_' + tierSelected + '[data-year="' + key + '"]').append('Contact Us');
} else {
$('.totalCost_' + tierSelected + '[data-year="' + key + '"]').append('$' + item);
}
});
}
}

You'll need a setTimeout, and a way to kill/reset it on the keypress.
I'd personally do something like this:
var calc_delay;
$(document).ready(function() {
$('input.refreshButton').bind('click', runEstimateTotal);
$('input.seatNumber').bind('keypress', runEstimateTotal);
$('input.seatNumber').bind('change', runEstimateTotal);
});
function runEstimateTotal(){
clearTimeout(calc_delay);
calc_delay = setTimeout(function(){ EstimateTotal(); }, 100);
}
function EstimateTotal() {
....
What this does is prompt the system to calculate 100ms after every keypress - unless another event is detected (i.e. runEstimateTotal is called), in which case the delay countdown resets.