I have this code for limiting checkboxes in a form and I want to know if it's possible for me to utilize it with more than one ID, something like 10 options limit between those two forms(The IDs are iphorm_1_10 and iphorm_1_12)
Thanks!
<script>
jQuery(document).ready(function ($) {
var $checkboxes = $('.iphorm_1_10');
$checkboxes.click(function () {
var checked = 0;
$checkboxes.each(function () {
if ($(this).is(':checked')) {
checked++;
}
});
if (checked > 10) {
alert('You can only select 10 options')
$(this).prop('checked', false);
$.uniform.update();
return false;
}
});
});
I am confused. $('.iphorm_1_10'); refers to CLASS .iphorm_1_10 and not ID, am i wrong? If you use classes, just give your forms the same class. If you want to use ID's, repeat your .each for every ID you got.
Related
How can I reverse the events in the list views, so that the event with the most futuristic date appears at the beginning (top)?
#F.Mora your solution is almost perfect but in our case we add some custom classNames and have multiple items under each headline.
Here is our enhanced version :
eventAfterAllRender: function(view) {
var renderedEvents = $('.fc-list-table tr');
var reorderedEvents = [];
var blockEvents = null;
renderedEvents.map(function(key, event) {
if ($(event).hasClass('fc-list-heading')) {
if (blockEvents) {
reorderedEvents.unshift(blockEvents.children());
}
blockEvents = $('<tbody></tbody>');
}
blockEvents.append(event);
});
reorderedEvents.unshift(blockEvents.children());
$('.fc-list-table tbody').html(reorderedEvents);
}
#CarComp,
As ADyson commented in the comment to the OP, your best bet if you want do not want to deal with the dom after the html has been rendered is to download the source and make the modification there in the ListView renderSegList function.
Reverse the order of iteration through the list that it is being created and then you will have what you are looking for.
This will, of course, apply to all ListView implementations of the calendar. There would need to be an option added to toggle back and forth, which would be a bit more involved.
For anyone still looking for this, inverted event lists using jquery:
eventAfterAllRender: function(view) {
var eventosRendered = $('#timeline tr');
var eventosInversa = [];
var headingPendiente = null;
eventosRendered.map(function(key, evento) {
switch(evento.className) {
case 'fc-list-heading':
if (headingPendiente) {
eventosInversa.unshift(headingPendiente);
}
headingPendiente = evento;
break;
case 'fc-list-item':
eventosInversa.unshift(evento);
break;
}
});
eventosInversa.unshift(headingPendiente);
$('#timeline tbody').append(eventosInversa);
}
Here's the version I use (fullCalendar v4):
datesRender: function(info) {
var list = $(info.el).find('.fc-list-table tbody');
list.find('.fc-list-heading').each((i,heading) => {
var children = $(heading).nextUntil('.fc-list-heading')
list.prepend(children)
list.prepend(heading)
})
},
I used this for fullCalendar v5. It´s based on #Yo1 answer
eventsSet: function(dateInfo){
var renderedEvents = $('.fc-list-table tr');
var reorderedEvents = [];
var blockEvents = null;
renderedEvents.map(function(key, event) {
if ($(event).hasClass('fc-list-day')) {
if (blockEvents) {
reorderedEvents.unshift(blockEvents.children());
}
blockEvents = $('<tbody></tbody>');
}
blockEvents.append(event);
});
if (blockEvents){
reorderedEvents.unshift(blockEvents.children());
$('.fc-list-table tbody').html(reorderedEvents);
}
},
I initialize two calendars on same page as below:
html
<div id="calendar1"></div>
<div id="calendar2"></div>
javascript
$("#calendar1, #calendar2").fullCalendar({
.....
events: function(start, end, timezone, callback) {
var evt1=[{title:'A',start:'2015-02-01'}];
var evt2=[{title:'B',start:'2015-02-01'}];
calendarid = $(this); <== how to get the id?
if (calendarid = 'calendar1') { callback(evt1); }
if (calendarid = 'calendar2') { callback(evt2); }
}, // end of events
.....
}
Each calendar got its own set of events. How can I know the selector id inside the events function? Does fullCalendar expose $(this) property to let programmer code on it?
Thanks.
I would suggest you to do it this way:
Create an array with your selectors and set it as custom option to the calendar configuration:
var calendars = ['calendar1', 'calendar2'];
for (var i = 0; i < calendars.length; i++) {
fullCalConfig.id = calendars[i];
console.log(fullCalConfig);
$('#'+fullCalConfig.id).fullCalendar(fullCalConfig);
}
Now you can look up the selector from within the events function:
events: function(start, end, timezone, callback) {
var evt1=[{title:'A',start:'2015-02-01'}];
var evt2=[{title:'B',start:'2015-02-01'}];
calendarid = this.options.id;
if (calendarid == 'calendar1') { callback(evt1); }
if (calendarid == 'calendar2') { callback(evt2); }
},
I set up a jsFiddle for you:
http://jsfiddle.net/kqdzz5wq/1/
Have your tried getting $(this).attr('id');inside the fullCalendar function? That should work.
If youre having problems, try using
$("#calendar1, #calendar2").each().fullCalendar({etc..
to ensure every object is called seperatly and then $(this).attr('id');inside the fullCalendar function will work.
I'm new to Meteor and I want to create a slideshow with items from a collection, in this case simple words. The slideshow should be controlled by back and forward buttons and replace the current word.
In JavaScript/jQuery I would create an array of objects and a control index, with limits via if-statements, so the index never can drop below zero or overflow the length of the array.
See fiddle for working example:
http://jsfiddle.net/j0pqd26w/8/
$(document).ready(function() {
var wordArray = ["hello", "yes", "no", "maybe"];
var arrayIndex = 0;
$('#word').html(wordArray[arrayIndex]);
$("#previous").click(function(){
if (arrayIndex > 0) {
arrayIndex -= 1;
}
$('#word').html(wordArray[arrayIndex]);
});
$("#next").click(function(){
if (arrayIndex < wordArray.length) {
arrayIndex += 1;
}
$('#word').html(wordArray[arrayIndex]);
});
});
Meteor
I'm curious how to implement this in regards to best practice in meteor and abide to the reactive pattern as I'm still trying to wrap my head around this interesting framework. My first hurdle is to translate the
if (arrayIndex < wordArray.length)
// to
if (Session.get("wordIndex") < ( (((length of collection))) )
According to the docs I should do a find on the collection, but I have only manage to return an empty array later with fetch. Sorry if this got long, but any input would be appreciated to help me figure this out.
collection.find([selector], [options])
cursor.fetch()
This is the code I have so far:
Words = new Mongo.Collection("words");
if (Meteor.isClient) {
// word index starts at 0
Session.setDefault("wordIndex", 0);
Template.body.helpers({
words: function () {
return Words.find({});
},
wordIndex: function () {
return Session.get("wordIndex");
}
});
Template.body.events({
"submit .new-word": function (event) {
// This function is called when the word form is submitted
var text = event.target.text.value;
Words.insert({
text: text,
createdAt: new Date() //current time
});
// Clear form
event.target.text.value = "";
// Prevent default form submit
return false;
},
'click #previous': function () {
// decrement the word index when button is clicked
if (Session.get("wordIndex") > 0) {
Session.set("wordIndex", Session.get("wordIndex") - 1);
}
},
'click #next': function () {
// increment the word index when button is clicked
if (Session.get("wordIndex") < 10 ) {
Session.set("wordIndex", Session.get("wordIndex") + 1);
}
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
});
}
.count() will return the number of documents in a collection.
`db.collection.count()`
There is something called Collection helpers, which works similar to other helpers (eg., template, etc.,). More elaborate explanation is covered here: https://medium.com/space-camp/meteor-doesnt-need-an-orm-2ed0edc51bc5
i want to disable a button for a specific time. how can i do that?
Since this is likely to be a task you might like to repeat, I think the best way to do this would be to extend jQuery like so:
$.fn.timedDisable = function(time) {
if (time == null) { time = 5000; }
return $(this).each(function() {
$(this).attr('disabled', 'disabled');
var disabledElem = $(this);
setTimeout(function() {
disabledElem.removeAttr('disabled');
}, time);
});
};
This will allow you to call a function on a set of matched elements which will temporarily disable them. As it is written, you can simply call the function, and the selected elements will be disabled for 5 seconds. You would do that like so:
$('#some-button').timedDisable();
You can adjust the default time setting by changing the 5000 in the following line:
if (time == null) { time = 5000; }
You can optionally pass in a time value in milliseconds to control how long the elements will be disabled for. For example:
$('#some-button').timedDisable(1000);
Here's a working demo: http://jsfiddle.net/fG2ES/
Disable the button and then use setTimeout to run a function that enables the button after a few seconds.
$('#some-button').attr("disabled", "disabled");
setTimeout('enableButton()', 5000);
function enableButton(){
$('#some-button').removeAttr('disabled');
}
Try this.
(function(){
$('button').on('click',function(){
var $this=$(this);
$this
.attr('disabled','disabled');
setTimeout(function() {
$this.removeAttr('disabled');
}, 3000);
});
})();
You can find a working example here http://jsfiddle.net/informativejavascript/AMqb5/
Might not be the most elegant solution, but I thought I'd play with jQuery queues on this one...
$.fn.disableFor = function (time) {
var el = this, qname = 'disqueue';
el.queue(qname, function () {
el.attr('disabled', 'disabled');
setTimeout( function () {
el.dequeue(qname);
}, time || 3000);
})
.queue(qname, function () {
el.removeAttr('disabled');
})
.dequeue(qname);
};
$('#btn').click( function () {
$(this).disableFor(2000);
});
This is where I worked it out... http://jsfiddle.net/T9QJM/
And, for reference, How do I chain or queue custom functions using JQuery?
I have a div which is placed in any pages. When you click on this div, it will be closed by using jquery checking on its css class:
$('.content-box-header').click(function
() {
$(this).parent().children('.content-box-content').slideFadeToggle(200);
}
In several pages, I need to set that div with a specific ID in order to perform some tasks after that div closed. For example:
$('#divleft').live('click', function
(e) { runTask(); }
The above sample is trigger on that div with the specific ID = divleft.
The problem is that, I would like to check something ONLY after the div is really closed, but in my current situation, runTask() is performed before the div is closed.
SO my question is that how could the method runTask(); is delayed after the div is really closed?
Thanks in advance!!!!
I think what you are looking for is .queue(). See the documentation here: http://api.jquery.com/queue/
You can call this on a set of matched elements to get some information about the remaining effects to be run. So in your case you could do something like this:
$('#divleft').live('click', function (e) {
runTaskAfterAnimation()
});
function runTaskAfterAnimation() {
if ($('.content-box-content').queue('fx').length == 0) {
runTask();
} else {
setTimeout(runTaskAfterAnimation, 10);
}
}
View a demonstration here: http://jsfiddle.net/LeHHj/2/
This time it definitely works ;)
In your case, just use
$('.content-box-header').click(function () { $(this).parent().children('.content-box-content').slideFadeToggle(200, function() { runTask(); }); }
You can store the function on the div using jQuery's data() method.
This lets you set an 'afterClick' function on your element:
$('.content-box-header').click(function () {
var $this = $(this);
$this.parent().children('.content-box-content').slideUp(200, function () {
var after = $this.data('afterClick');
if (after) after();
});
});
$('#divleft').data('afterClick', function () { runTask(); });
You need to check if the item you are wanting to runTask() on is :animated and if so 'register' a callback (via .data()) for when it's done
.live('click', doRunTask);
doRuntask = function() {
if ($(this).is(':animated'))
$(this).data('afterAnimation', runTask);
else
runTask();
});
$('.content-box-header').click(function () {
$(this).parent().children('.content-box-content').slideFadeToggle(200, function() {
var cb = $(this).data('afterAnimation');
cb && cb();
});
}