I have a function that allows me to select a random radio button and click on it. But on different pages I have different .find(type). Example:
Page1.html: controlTypeToIterateOn='label'
Page2.html: controlTypeToIterateOn=':radio'
//Radio button
function randomNumberGenerator(max, min) {
var randomNumber = Math.floor(Math.random() * (max - min + 1) + min);
return randomNumber;
}
function SelectRandonRadioButton(radioButtonContainer, controlTypeToIterateOn) { //Genereal function
var radios = $(radioButtonContainer).find(controlTypeToIterateOn);
if (controlTypeToIterateOn == ':radio')
controlTypeToIterateOn = 1;
else if (controlTypeToIterateOn == 'label')
controlTypeToIterateOn = 0;
var randomnumber = randomNumberGenerator(radios.length - 1, 0);
//randomizing number
$(radios[randomnumber]).click();
return $(radios[randomnumber]);
}
function SelectLiveRandomRadioButton(radioButtonContainer, controlTypeToIterateOn) {
var elem = SelectRandonRadioButton(radioButtonContainer, controlTypeToIterateOn);
$(elem).mousedown();
}
function call() {
$(".YesNoRadio").each(function() {
SelectLiveRandomRadioButton($(this), 1);
});
}
call();
My if condition that checks the input type does not seem to work. I want to assign a numeric value that I can pass in my SelectLiveRandomRadioButton() function that's inside the call function. For example if I pass '0',my controlTypeToIterateOn = 'label', if I pass 1, my controlTypeToIterateOn = ':radio'. Anyone who can help me with this? Thanks.
I am not sure what you are trying to do, but from looking at your code, I guess you might want to do something like this:
function SelectRandonRadioButton(radioButtonContainer, controlTypeToIterateOn) {
var toFind;
if (controlTypeToIterateOn === 1) {
toFind = ':radio';
} else if (controlTypeToIterateOn === 0) {
toFind = 'label';
}
var hits = $(radioButtonContainer).find(toFind);
var randomnumber = randomNumberGenerator(hits.length - 1, 0);
$(hits[randomnumber]).click();
return $(hits[randomnumber]);
}
function call() {
$(".YesNoRadio").each(function() {
// where 1 would find radio, and 0 label
SelectLiveRandomRadioButton($(this), 1);
});
}
call();
I have 3 Sliders in one JQuery Dialog, i want them to have a maximum value, but the maximum is not only for one slider it is for the sum of all of them. My script runs fine in google chrome debuger the only problem is that the value of the slider is not updated in $(this).slider("value", (sliderMax - sum));
$(".slider").each(function() {
var id = $(this).attr("id");
id = id.replace("Slider", "Value");
var sliderMax = 27;
$(this).slider({
range : "min",
min : 0,
max : sliderMax,
value : $("#" + id).attr("value"),
slide : function(event, ui) {
var sum = 0;
$(".sliderValue").each(function() {
if ($(this).attr("id") != id) {
sum += parseInt($(this).attr("value"));
}
});
if ((sum + $(this).slider("value")) > sliderMax){
$(this).slider("value", (sliderMax - sum));
}
$("#" + id).val(ui.value);
}
});
});
pls help me.
Ok finaly i found the solution:
if ((sum + ui.value) > sliderMax){
return false;
}
It is because of params of parseInt and value:... parseInt returns fake value when the string provided as parameter doesn't contain a number! please define the value variable outside the options as follows
$(".slider").each(function() {
var id = $(this).attr("id");
id = id.replace("Slider", "Value");
var sliderMax = 27;
var _value=$("#" + id).attr("value");
$(this).slider({
range : "min",
min : 0,
max : sliderMax,
value :value,
slide : function(event, ui) {
var sum = 0;
$(".sliderValue").each(function() {
if ($(this).attr("id") != id) {
var valueString=$(this).attr("value");
sum += parseInt(valueString);
}
});
if ((sum + $(this).slider("value")) > sliderMax){
$(this).slider("value", (sliderMax - sum));
}
$("#" + id).val(ui.value);
}
});
});
EDITS:
copied your solution to help readers
if ((sum + ui.value) > sliderMax){
return false;
}
I want to randomize a 179-video loop that is randomized anew each time the site is visited, but cannot get more than one video to play at a time.
{
function getRandom(min, max) {
if (min > max) {
return -1;
}
if (min == max) {
return min;
}
var r;
do {
r = Math.random();
}
while (r == 1.0);
return min + parseInt(r * (max - min + 1));
}
function randomSrc(videoId) {
console.log("randomSrc, " + videoId);
var vid = $("#" + videoId);
//var rndm = videoArray[getRandom(0, videoArray.length - 1)];
var rndm = "001.webm";
$(vid).attr("src", rndm).get(0).play();
$(vid).get(0).addEventListener('ended', function () {
randomSrc("v" + getRandom(1, 3));
}, false);
}
var videoArray = ["001.webm", "002.webm", "003.webm", "004.webm", "005.webm", "006.webm", "007.webm", "008.webm", "009.webm", "010.webm", "011.webm", "012.webm", "013.webm", "014.webm", "015.webm", "016.webm", "017.webm", "018.webm", "019.webm", "020.webm", "021.webm", "022.webm", "023.webm", "024.webm", "025.webm", "026.webm", "027.webm", "028.webm", "029.webm", "030.webm", "031.webm", "032.webm", "033.webm", "034.webm", "035.webm", "036.webm", "037.webm", "038.webm", "039.webm", "040.webm", "041.webm", "042.webm", "043.webm", "044.webm", "045.webm", "046.webm", "047.webm", "048.webm", "049.webm", "050.webm", "051.webm", "052.webm", "053.webm", "054.webm", "055.webm", "056.webm", "057.webm", "058.webm", "059.webm", "060.webm", "061.webm", "062.webm", "063.webm", "064.webm", "065.webm", "066.webm", "067.webm", "068.webm", "069.webm", "070.webm", "071.webm", "072.webm", "073.webm", "074.webm", "075.webm", "076.webm", "077.webm", "078.webm", "079.webm", "080.webm", "081.webm", "082.webm", "083.webm", "084.webm", "085.webm", "086.webm", "087.webm", "088.webm", "089.webm", "090.webm", "091.webm", "092.webm", "093.webm", "094.webm", "095.webm", "096.webm", "097.webm", "098.webm", "099.webm", "100.webm", "101.webm", "102.webm", "103.webm", "104.webm", "105.webm", "106.webm", "107.webm", "108.webm", "109.webm", "110.webm", "111.webm", "112.webm", "113.webm", "114.webm", "115.webm", "116.webm", "117.webm", "118.webm", "119.webm", "120.webm", "121.webm", "122.webm", "123.webm", "124.webm", "125.webm", "126.webm", "127.webm", "128.webm", "129.webm", "130.webm", "131.webm", "132.webm", "133.webm", "134.webm", "135.webm", "136.webm", "137.webm", "138.webm", "139.webm", "140.webm", "141.webm", "142.webm", "143.webm", "144.webm", "145.webm", "146.webm", "147.webm", "148.webm", "149.webm", "150.webm", "151.webm", "152.webm", "153.webm", "154.webm", "155.webm", "156.webm", "157.webm", "158.webm", "159.webm", "160.webm", "161.webm", "162.webm", "163.webm", "164.webm", "165.webm", "166.webm", "167.webm", "168.webm", "169.webm", "170.webm", "171.webm", "172.webm", "173.webm", "174.webm", "175.webm", "176.webm", "177.webm", "178.webm", "179.webm"];
//var rndm = videoArray[getRandom(0, videoArray.length - 1)];
var rndm = "004.webm";
$("#v1").attr("src", rndm);
randomSrc("v1" + getRandom(1, 3));
this.removeEventListener("load", arguments.callee, false);
})
</script>
Ahem? first you set the source of #v1 to "004.webm", then hard-code the source for element with id #v11, #v12, or #v13 to "001.webm", there is absolutely no way this is ever going to work like this.
Instead try something like this
var videoArray = [ ... ];
function getRandom(...) { ... };
function randomize(videoId) {
var vid = $('#' + videoId);
function setRandom() {
var index = getRandom(0, videoArray.length - 1)
vid.attr("src", videoArray[index]).get(0).play();
};
setRandom();
vid.bind("ended", function() {
setRandom();
});
};
randomize('v1');
I have made this code that makes some visual "tiles" that fades in and out.
But at the moment I'm having a little performance problem.
Though most browers are running the code okay (especially firefox), some like safari have problems after a while (a while = like 15 seconds).
I think its due to my recursive function (the function named changeopacity that calls itself forever on a delay)? or is it?
But anyways the problem is that this code is really heavy for most browsers. Is there, or more how can I make this code perform any better? any thoughts? (code examples would be nice) thanks :-)
The actual code:
$(document).ready(function () {
var aniduration = 2000;
var tilesize = 40;
createtable(tilesize);
$(".tile").each(function (index, domEle) {
var randomdelay = Math.floor(Math.random() * 3000);
setTimeout(function () {
changeopacity(aniduration, domEle);
}, randomdelay);
});
$("td").click(function () {
clickanimation(this, 9);
});
$("td").mouseenter(function () {
var element = $(this).find("div");
$(element).clearQueue().stop();
$(element).animate({opacity: "0.6"}, 800);
});
$("td").css("width", tilesize + "px").css("height", tilesize + "px");
});
function createtable(tilesize) {
var winwidth = $(window).width();
var winheight = $(window).height();
var horztiles = winwidth / tilesize;
var verttiles = winheight / tilesize;
for (var y = 0; y < verttiles; y++)
{
var id = "y" + y;
$("#tbl").append("<tr id='" + id + "'></tr>");
for (var x = 0; x < horztiles; x++)
{
$("#" + id).append("<td><div class='tile' style='opacity: 0; width: " + tilesize + "px; height: " + tilesize + "px;'></div></td>");
}
}
}
function changeopacity(duration, element){
var randomnum = Math.floor(Math.random() * 13);
var randomopacity = Math.floor(Math.random() * 7);
var randomdelay = Math.floor(Math.random() * 1000);
if ($(element).css("opacity") < 0.3)
{
if (randomnum != 4)
{
if ($(element).css("opacity") != 0)
animation(element, 0, duration, randomdelay);
}
else
{
animation(element, randomopacity, duration, randomdelay);
}
}
else
{
animation(element, randomopacity, duration, randomdelay);
}
setTimeout(function () {
return changeopacity(duration, element);
}, duration + randomdelay);
}
function animation(element, randomopacity, duration, randomdelay){
$(element).clearQueue().stop().delay(randomdelay).animate({opacity: "0." + randomopacity}, duration);
}
function clickanimation(column, opacitylevel) {
var element = $(column).find("div");
$(element).clearQueue().stop();
$(element).animate({"background-color": "white"}, 200);
$(element).animate({opacity: "0." + opacitylevel}, 200);
$(element).delay(200).animate({opacity: "0.0"}, 500);
//$(element).delay(600).animate({"background-color": "black"}, 500);
}
The number one issue is that you are creating one setTimeout for every single cell on your page. The only browser capable of handling that is Internet Explorer, and then it fails due to the many CSS changes causing slow redraws.
I would strongly suggest programming your own event scheduler. Something like this, which I used in a university project:
var timer = {
length: 0,
stack: {},
timer: null,
id: 0,
add: function(f,d) {
timer.id++;
timer.stack[timer.id] = {f: f, d: d, r: 0};
timer.length++;
if( timer.timer == null) timer.timer = setInterval(timer.run,50);
return timer.id;
},
addInterval: function(f,d) {
timer.id++;
timer.stack[timer.id] = {f: f, d: d, r: d};
timer.length++;
if( timer.timer == null) timer.timer = setInterval(timer.run,50);
return timer.id;
},
remove: function(id) {
if( id && timer.stack[id]) {
delete timer.stack[id];
timer.length--;
if( timer.length == 0) {
clearInterval(timer.timer);
timer.timer = null;
}
}
},
run: function() {
var x;
for( x in timer.stack) {
if( !timer.stack.hasOwnProperty(x)) continue;
timer.stack[x].d -= 50;
if( timer.stack[x].d <= 0) {
timer.stack[x].f();
if( timer.stack[x]) {
if( timer.stack[x].r == 0)
timer.remove(x);
else
timer.stack[x].d = timer.stack[x].r;
}
}
}
}
};
Then, instead of using setTimeout, call timer.add with the same arguments. Similarly, instead of setInterval you can call timer.addInterval.
This will allow you to have as many timers as you like, and they will all run off a single setInterval, causing much less issues for the browser.
Nice animation :-) However, I found some bugs and possible improvements:
Your table is not rebuilt on window resizes. Not sure if bug or feature :-)
Use delegated events. You have a lot of elements, and every event handler is costly. Sadly, this won't work for the non-bubbling mouseenter event.
It would be nice if you would not use inline styles for with and height - those don't change. For the divs, they are superflouos anyway.
I can't see a reason for all those elements to have ids. The html-string building might be more concise.
Cache the elements!!! You are using the jQuery constructor on nearly every variable, building a new instance. Just reuse them!
Your changeopacity function looks a bit odd. If the opacity is lower than 0.3, there is 1-in-13-chance to animate to zero? That might be expressed more stringent. You also might cache the opacity to a variable instead of reading it from the dom each time.
There is no reason to pass the duration and other constants as arguments, they do never change and can be used from the global scope.
Instead of using the timeout, you should use the complete callback of the animate method. Timeouts are never accurate, they may even interfere here causing (minor) problems.
var duration = 2000,
tilesize = 40,
clickopacity = 0.9;
$(document).ready(function () {
filltable($("#tbl"), tilesize)
.on("click", "td", clickanimation);
$(".tile").each(function() {
changeopacity($(this));
});
$("#tbl div").mouseenter(function () {
$(this).clearQueue()
.stop()
.animate({opacity: "0.6"}, 800);
});
});
function filltable(tbl, tilesize) {
var win = $(window).width();
var horztiles = win.width() / tilesize;
var verttiles = win.height() / tilesize;
for (var y = 0; y < verttiles; y++) {
var tr = "<tr>";
for (var x = 0; x < horztiles; x++)
tr += "<td style='width:"+tilesize+"px;height:"+tilesize+"px;'><div class='tile' style='opacity:0;'></div></td>");
tbl.append(tr+"</tr>");
}
return tbl;
}
function changeopacity(element) {
var random = Math.floor(Math.random() * 13);
var opacity = Math.floor(Math.random() * 7);
var delay = Math.floor(Math.random() * 1000);
if (element.css("opacity") < 0.3 && random != 4)
opacity = 0;
element.clearQueue().stop().delay(delay).animate({
opacity: "0." + opacity
}, duration, function() {
changeopacity(element);
});
}
function clickanimation() {
$(this.firstChild)
.clearQueue()
.stop()
.animate({"background-color": "white"}, 200)
.animate({opacity: "0." + clickopacity}, 200)
.delay(200).animate({opacity: "0.0"}, 500);
//.delay(600)
//.animate({"background-color": "black"}, 500);
}
I have written a javascript for changing the "timezone" of a field on my website using a dropdown select menu.
You can see the script here: http://jsfiddle.net/dTb76/14/
However, I have reached the limits of what I know how to do - I need the script to modify several "time" fields, however, at the moment it can only work with one field.
I've been trying to figure out what changes to make for days, however I have not been having much luck. Best I can tell, I need some kind of "foreach" statement, telling it to store the original time for each field and then modify it by whatever is selected in the select, however I am not sure how to implement that in jQuery/javascript.
Would appreciate help.
You just need to use $.each JQuery function:
$('#modTime').change(function() {
var times = $('.time');
$.each(times, function(index, value) {
var curTime = $(value).text();
curTimeHH = parseInt(curTime.split(':')[0],10);
$(value).attr('originalTime', curTime);
var modifyBy = parseInt($('#modTime').val(),10);
curTimeHH = parseInt(curTime,10) + modifyBy;
if (curTimeHH === 0) {
$(value).text('24:00');
} else if (curTimeHH > 24) {
curTimeHH = curTimeHH - 24;
$(value).text('0'+curTimeHH + ':00');
} else if (curTimeHH < 0) {
curTimeHH = curTimeHH + 24;
$(value).text(curTimeHH + ':00');
} else {
$(value).text(curTimeHH + ':00');
}
});
});
Edit:
To retrieve the 'original time' of every field, you could do something like:
var times = $('.time');
$.each(times, function(index, value) {
var originalTime = $(value).attr('originalTime');
...
});
You'll want to use jQuery's each() method to iterate through each of your .time elements. This will allow you to grab the current time for each specific element and do your calculations on a per-element basis; otherwise, $('.time').text() and things like that will always return the value of the first element selected, which is what you're seeing.
This should get you started:
$('#modTime').change(
function(){
var modifyBy = parseInt($(this).val(),10); // Here, this refers to your select element, the element whose change event handler we're now in
$('.time').each(function(){ // each() iterates through each .time element found in the DOM individually; that's what you'd like to do
var $this = $(this), // Refers to the current .time element
curTime = $this.text(),
curTimeHH = parseInt(curTime.split(':')[0],10),
curTimeHH = parseInt(curTime,10) + modifyBy;
$this.attr('originalTime',curTime);
if (curTimeHH == 0) {
$this.text('24:00');
} else if (curTimeHH > 24) {
curTimeHH = curTimeHH - 24;
$this.text('0'+curTimeHH + ':00');
} else if (curTimeHH < 0) {
curTimeHH = curTimeHH + 24;
$this.text(curTimeHH + ':00');
} else {
$this.text(curTimeHH + ':00');
}
});
});