On eventRender of the fullcalendar, I want to identify the element belongs to which row of the calendar.
eventRender: function(event, element) {
//find calendar row of the element
}
What happens if the event is wrapped over two columns? (i.e. because it is 10 days long)
I'm looking at the source for FullCalendar, and I don't think you're going to find what you want - the element is an absolutely positioned div, and eventRender is called for each "segment" of the event, so if it wraps, you end up with two eventRender calls.
Anyways, if those "gotchas" don't dissuade you, here's a crack at figuring it out. I used the row widths/heights vs the element top to figure it out, I don't really see a more elegant way. Note you'll want to change the .fc-view-month bit to a selector that starts from your actual calendar ID.
eventAfterRender: function(event,element){
var level = undefined;
var elTop = $(element).position().top;
$('.fc-view-month tr[class^="fc-week"]').each(function(){
var rowTop = $(this).position().top;
var height = $(this).height();
if (elTop >= rowTop && elTop < rowTop + height){
level = $(this).attr('class').replace('fc-week','');
return false;
}
});
alert(level);
}
That will alert you with the "row" as defined by the calendar, i.e. the first row is actually "0"
EDIT: just realized that eventRender is called before the element is placed on the calendar, so my idea pretty much won't work. I've changed it to eventAfterRender. I think if it was important enough to you, the thing to do would be to modify FullCalendar so that whenever it sends you the "element" in the eventRender function, it also sends you the placement info (which it has in a structure called segs in the calling function).
Related
Have been trying to learn some basics of web designing involving some simple HTML, CSS, JS/Jquery and have been coming up to certain obstacles that I haven't been able to find a way to work around.
One of the things I'm trying to implement is rotating a small number of divs. At the lack of some proper manner for it, what I rigged up was to .toggle off one of them while toggling on another div that was hidden from page load.
Not the prettiest thing, but it kind of works though oddly enough it only works twice before for some reason the cycle stops working.
function moveSide(){
var intervalId;
var childCount = 2;
var preLast = childCount + 2;
var newLast = childCount + 3;
intervalId = setInterval(function () {
$(".column:nth-of-type(" + childCount + ")").toggle("slide", function(){
$(".column:nth-of-type(" + preLast + ")").removeClass("last").delay(1, function(){
$(".column:nth-of-type(" + newLast + ")").addClass("last").delay(1).toggle("slide", function(){
childCount++;
preLast = childCount + 2;
newLast = childCount + 3;
//alert(childCount);
});
});
});
},5000);
}
I'm not sure if using nth-of-type is the right choice, but it seemed to be allowing me to pick amongst the divs. childCount is to pick which div is to be the first to be toggled off, pre(vious)Last is to identify what was the last div of those displayed in order to remove a class used for some properties, newLast is to identify the div that will become visible and give it the class to add CSS properties.
The alert cycle runs twice entirely (increasing childCount), but doesn't process a third time.
Any ideas what I'm doing wrong?
i don't now, if it's my not cured cold or the fact, that i just got up a few hours ago, but i don't understand your code.
what i understand, is what you want to achieve - and i suggest another method:
$(".column:gt(0)").hide(); //first of all, hide all columns but the first one
setInterval(function() {
$('.column:first') //select the first column
.toggle("slide") //slide it out
.next().next() //select the 3rd column
.toggleClass("last") //remove class "last"
.next() //select first invisible column
.toggleClass("last") //add class last
.toggle("slide") //slide it in
.end().end().end() //end the chain, to reselect the first element
// since we used .next() three times, we have to end it three times
.appendTo('#column-content'); //move the first element inside the dom to the end
}, 5000);
your interval should be running infinite now - always sliding out the first element, sliding in the next element end appending the first element to the end. therefore, the current element is always the first one...
see the fiddle: http://jsfiddle.net/sv5j85df/2/
I'm having a simple (I hope it's simple) question. I'm using 10 divs (div1, div2...) and I want to calculate the distance between two of them. I've already clicked one, that takes the class (img.home). I have the function to calculate the distance between two objects showdistance(div1, div2), but How can I use it to calculate showdistance($('img.home').parent()[0], $(this) ) where (this) is the div, that my cursor is point at at the moment ( .mouseenter(function() {$(this).text(showdistance)}); )
Thanks in advance,
If needed, I can make a jsfiddle with the whole code, but as I believe it is a rather easy thing, that I don't know and the code is a large piece it's easier this way.
Best regards.
Store your last clicked element in a variable.
Then compare the position when you enter an element.
You can apply top, left, right or bottom, if you like.
var clicked = null;
$("someSelection").click(function() {
clicked = $(this);
});
$("someSelection").mouseenter(function() {
// if-statement to ensure that the event won't fire if you haven't clicked one
if(clicked !== null) {
console.log($(this).position().top - clicked.position().top);
console.log($(this).position().left - clicked.position().left);
}
});
I am using this nested sortable plugin mjsarfatti.com/sandbox/nestedSortable and the only issue I have so far is when I dynamically add an item to the "tree", I am not able to expand or collapse the item(s). I am just using the sample code so far, and adding to that.
How I am adding the items dynamically:
$('#new-button').on('click', function() {
var nextId = $('ol.sortable').nestedSortable('nextId');
var $li = $("<li id=\"list_" + nextId + "\"><div><span class=\"disclose\"><span></span>
</span>New Item</div>");
$li.addClass('mjs-nestedSortable-leaf');
$('ol.sortable').append($li);
})
When I add these new items to the tree, they work just fine - I can move them throughout the tree, make them children, etc.
However, when I try to collapse a new item that I have made a parent - there is no response.
I am sure I just haven't added the correct event handler somewhere, but I can't fin where that is happening. I have even triggered a destroy() and _create() of the tree after I add the new item(s), hoping that would "re-configure" all the items again. However, no luck there.
Can anyone tell me how I can properly hook up these new dynamically created items so they will be treated as other items in the tree?
Thanks!
Ok, after 2 days of looking at this, I was able to solve the issue. It is funny - the code I had been looking for was directly above the new code that I had entered. (Right under my nose.) Thanks to the kind people here for introducing me to: Visual Event - that greatly helped me to track down where the events were being created in the first place!
$('#new-button').on('click', function() {
var nextId = $('ol.sortable').nestedSortable('nextId');
//Begin creating dynamic list item
var $li = $("<li id=\"list_" + nextId + "\">");
var $lidiv = $("<div></div>");
var $disli = $("<span class=\"disclose\"><span></span></span>");
$li.addClass('mjs-nestedSortable-leaf');
//Assign event listener to newly created disclose span tag above
$disli.on('click', function() {
$(this).closest('li').toggleClass('mjs-nestedSortable-collapsed').toggleClass('mjs-nestedSortable-expanded');
});
//Now actually start to append to DOM
$lidiv.append($disli);
$lidiv.append("New List Item " + nextId);
$li.append($lidiv);
$('ol.sortable').append($li);
})
Hopefully, this will help someone.
Here is a working copy in case you want to see it in action.
I am trying to create a simple text accordion which calculates each panel's height and return this value as a variable. I can get values with if statements like if ( i === 0 ) { $(this).height(); } but can't get this variable to the outside.I can do this without using variable but it became useless in long term.
Brıefly: I want to calculate each element's height and use this variable inside click function.
Here is jsFiddle which includes the problem.
var panel = $('.holder div');
var trigger = $('a');
panel.each(function(i) {
//problem starts when i try to calculate each ele's height
var eachEleHeight = i.height();
trigger.click(function() {
$(this).prev('div').animate({'height':eachEleHeight+'px'},500);
//this works widthout var eachEleHeight but became useless
//$(this).prev('div').animate({'height':'300px'},500);
});
//this is for hiding text at doc.ready
panel.css('height','56px');
});
If I well understood, try this :
panel.each(function(i, el) {
// create a reference to te current panel
var $el = $(el);
// execute a function immediately, passing both the panel and its height
(function(p, h) {
// the trigger is targeted as the next link after the current panel
p.next('a').click(function() {
p.animate({ height : h + 'px'},500);
});
}($el, $el.height()));
// set each panel height
$el.css('height','56px');
});
Example fiddle : http://jsfiddle.net/Aw39W/55/
There is a problem with the code you posted. i is the index of the current element. Not the element itself.
Try var eachEleHeight = $(this).height();
Fiddle
The sequence of events you've used seems a bit weird. You're actually binding a click event to all a tags for each panel element. Try this: Fiddle
I just used the min-height and max-height css attributes to store the initial to/from height variables. This will automatically get you your starting heights.
If I understand the question, you want to have the elements height for the accordion animation function. This is a trick but it works. I frequently use Mootools so I'll write using it. You should be able to figure it out.
var orgHeight = i.offsetHeight;
i.setStyle('height','100%');
var eachEleHeight = i.offsetHeight;
i.setStyle('height',orgHeight);
Essentially you would be flipping the element to reveal it's height and flipping it back before the document has time to make it visible on screen.
Not sure this is exactly what you were looking for, but hope it helps.
I have have multiple divs' with similar code within it, but also has a unique id within the main div that calls a toggleClass & slideToggle function. I'm trying to create a loop so that I do not have to write similar code for each element.
--- working code --- (where numeric value after the id would change)
$('#er1').click(function() {
$('#er1').toggleClass('but-extra-on');
$('#cr1').toggleClass('but-closerow-on');
$('#er1').next('div').slideToggle('slow');
return false;
});
-- not working code -- (I want to have functions for the click of #er1, #er2, #er3 etc.)
var count = 1;
while (count < 10){
var curER = 'er'+count;
var curCR = 'cr'+count;
$('#'+curER).click(function() {
$('#'+curER).toggleClass('but-extra-on');
$('#'+curCR).toggleClass('but-closerow-on');
$('#'+curER).next('div').slideToggle('slow');
});
count++;
}
* for some reason, when I use the while code, whenever I click #er1, #er2, #er3 etc.. only the event for #er9 toggles.
You can solve this problem, by using the $(this) selector for the one that you are clicking, and attaching an html data attribute to the div, specifying the other div that you want to change when you click it and selecting the other one with that... make sense.. probably not? Check out Solution 1 below.
The second solution is to use jQuery Event Data to pass the count variable into the event listener.
Solution 1: http://jsfiddle.net/Es4QW/8/ (this bloats your html a bit)
Solution 2: http://jsfiddle.net/CoryDanielson/Es4QW/23/
I believe the second solution is slightly more efficient, because you have slightly less HTML code, and the $(this) object is slightly smaller. Creating the map and passing it as event data, I believe, is less intensive... but... realistically... there's no difference... the second solution has cleaner HTML code, so you should use that.
Solution 3 w/ .slideToggle(): http://jsfiddle.net/CoryDanielson/Es4QW/24/
Edit: Updated solutions by passing in the selected elements instead of the selectors. Now each click event will not do a DOM lookup as it did before.
I've run into this problem before. I fixed it by extracting the event listener code into its own function like so:
for (var i = 1; i < 10; i++) {
attachClickEvent('er'+i, 'cr'+i);
)
function attachClickEvent(cr, er)
{
$('#'+er).click(function() {
$(this).toggleClass('but-extra-on');
$('#'+cr).toggleClass('but-closerow-on');
$(this).next('div').slideToggle('slow');
});
}