Jquery FullCalendar event timeslot hover method - time

I have FullCalendar up and running and it is very nice. My question here is how best to go about implementing timeslot hover functionality. It would be very nice if the user could have a visual cue for any given timeslot they are hovering over.
I found the following link http://code.google.com/p/fullcalendar/issues/detail?id=269 that gives a solution that adds a new structure in agenda cell row in order to provide access to individual cells. However, it is indicated that this solution will cause FullCalendar to become sluggish.
Before I start looking into the FullCalendar code, I thought I would ask if anyone else has any ideas or a solution.
My thoughts about approaching this are as follows:
Add placeholder events to each timeslot. The user would not see these events but these invisible events could be used to allow "hover" marking. My concern here is that adding the extra events would cause FullCalander to become sluggish. Also, the drag and drop functionality could be impacted.
FullCalender can determine what timeslot the user clicked in. Would it be possible to use the code that gets the timeslot clicked on in order to provide a reference for hover highlighting?
Other?
I am considering option 2 as a place to start. However, if anyone has another idea for a workable solution, I would be glad to hear it.
If I come up with a solution, I will post it here.
Thanks,
Jim
Here is a link to the FullCalendar site: http://fullcalendar.io/
I have found it very nice to work with.

The following code did the trick for me.
$('.ui-widget-content').hover(function(){
if(!$(this).html()){
for(i=0;i<7;i++){
$(this).append('<td class="temp_cell" style="border: 0px; width:'+(Number($('.fc-day').width())+2)+'px"></td>');
}
$(this).children('td').each(function(){
$(this).hover(function(){
$(this).css({'background-color': '#ffef8f', 'cursor': 'pointer'});
},function(){
$(this).prop('style').removeProperty( 'background-color' );
});
});
}
},function(){
$(this).children('.temp_cell').remove();
});
Make sure to add it after the code that instantiates the calendar and, it should work AS IS if the defaultView property of the JQuery calendar is 'AgendaWeekly'.
Cheers,
M

I had the same problem since it's sometimes hard to see which timeslot you're actually clicking on. To fix this I wrote a line to alter fullcalendar.js. Not the ideal solution, but it's a quick fix.
This is the line:
"<input type='hidden' class='timeslot-value' value='" + formatDate(d, opt('axisFormat')) +"'>" +
And placed it inside (around code line 3080):
"<th class='fc-agenda-axis " + headerClass + "'>" +
((!slotNormal || !minutes) ? formatDate(d, opt('axisFormat')) : ' ') +
"</th>" +
"<td class='" + contentClass + "'>" +
"<input type='hidden' class='timeslot-value' value='" + formatDate(d, opt('axisFormat')) +"'>" +
"<div style='position:relative'> </div>" +
"</td>" +
Now you can just place a tooltip hover on all fc-slots that have the .ui-widget-content class (the <td> you see above in the code). And get the hidden input value to display in that tooltip.
If jQuery, you can use the live event and get the corresponding first child and grab its value.
If extJS
Ext.onReady(function(){
Ext.QuickTips.init();
var tip = Ext.create('Ext.tip.ToolTip', {
target: 'your-calendar-id',
width: 140,
minHeight: 30,
delegate: '.ui-widget-content',
autoHide: false,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tip) {
tip.update('<dl><dt style="font-weight: 600;"><?php echo $this->translate('Start time')?>: </dt><dd>' + Ext.get(this.triggerElement).first().getValue() + '</dd></dl>');
}
}
});
});

I realize this isn't actually an answer but a comment on a previous answer but I've yet to reach the reputation to comment on answers.
W.R.T to the answer by #user4243287 one extra step I had to take was to put this logic in the 'viewRender' option when initializing my calendar in order to make sure that this continued to work when moving between weeks.

Related

In Bootstrap 3's table-responsive when below breakpoint dropdown menus can't be used, any assistance for my workaround is most appreciated [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
Output: http://jsbin.com/APuCOwa/3
Edit: http://jsbin.com/APuCOwa/3/edit
When you have a responsive table in Bootstrap 3, when you are below the 767px break point, the dropdown-menus are not accessible because they add content and the content at that size has an overflow:auto or something, so depending on the location of the menu -- if the table itself doesn't have enough height -- the menu shows up and people won't see it. Plus scrollbars are not visible until you scroll on touch.
As a work around, which I need help with, I fudged together another toggle that doesn't close when clicked off and adds a class to the parent (to add height) when the menu is toggled (you must size the output http://jsbin.com/APuCOwa/3 down below 767px) to see this. The problem is that when the user clicks another toggle while one is open the class added to the parent is removed, tried toggleClass and this thing (which is the same) and it's the same result.
Essentially, when you click a toggle, it opens, adds height to the parent "table-responsive" div wrapper, and when you toggle off it undoes that, so far that's good, but if you click another menu while one is open, that is where I can't figure it out. Since they are all isolated menus, this is confusing to me.
I am not so hot with jQuery.
Output: http://jsbin.com/APuCOwa/3
Edit: http://jsbin.com/APuCOwa/3/edit
BTW: Firefox, at least mine, has issues with jsbin, Chrome does not.
Close all on click and only (re)open it when it wasn't open only:
$(document).ready(function() {
$('.table-responsive .dropdown-toggle').click(function(event){
var open = $(this).hasClass('open');
$('.table-responsive .dropdown-menu').hide('fast');
$(".table-responsive").removeClass("res-drop");
$('.table-responsive .dropdown-toggle').removeClass('open');
if(!open)
{
$(this).siblings('.dropdown-menu').slideToggle('fast');
$(this).parents(".table-responsive").addClass("res-drop");
$(this).addClass('open');
}
});
});
In my case I had dynamic heights so Bass Jobsen solution didn't work properly.
I decided to rely on data attributes to store the current height of parent div e then restore on dropdown close.
Here is my code:
var isOpen = !($(this).parent().hasClass("open"));
var menuHeight = $(this).siblings(".dropdown-menu").height();
var increaseHeightBy = menuHeight * 1.3;
var originalHeight = $(this).closest(".table-responsive").attr('data-original-height');
if (isOpen && !originalHeight) {
originalHeight = $(this).closest(".table-responsive").height();
$(this).closest(".table-responsive").attr('data-original-height', originalHeight);
$(this).closest(".table-responsive").height(originalHeight + increaseHeightBy);
}
if (!isOpen && originalHeight) {
$(this).closest(".table-responsive").height(originalHeight);
$(this).closest(".table-responsive").removeAttr('data-original-height');
}
You can set the dropdown menu to fixed position and close it when the window's resized. Not a perfect solution but it works.
// Responsive tables with dropdown buttons
$('.table-responsive .dropdown-toggle').on('click', function() {
var button = $(this),
menu = button.next('.dropdown-menu');
menu.css({
position: 'fixed',
top: button.offset().top + button.outerHeight() - $(window).scrollTop(),
right: $(window).width() - (button.offset().left + button.outerWidth())
});
$(window).on('scroll', function() {
menu.css({
top: button.offset().top + button.outerHeight() - $(window).scrollTop()
});
});
$(window).on('resize', function() {
$('.dropdown-backdrop').trigger('click');
button.blur();
$(window).off('resize scroll');
});
});

jquery load order affects list

I have the following jQuery to load status to a profile page using a ul with li status items.
The each() takes items from a JSON callback and the load() is supposed to ensure that the image is available before the li is created:
(showpic() gives me a well-formed url to use.)
function showStatus(data){
var jsondata = $.parseJSON(data);
var testText = "";
$('#doNews').empty();
$('#doNews').append($('<ul/>', {"class": "newsList", id: "theNews"}));
$.each(jsondata, function(i, item){
$('<img src="' + showpic(item[3]) + '" class="newsImage">')
.load(function(){
$(this)
.appendTo($('#theNews'))
.wrap($('<li>', {"class": "newsItem"}))
.closest('li')
.append(item[5])
});
});
$("#statustext").val('');
}
the problem is that the status feed now seems to be written to the page in the order the images load. i.e., instead of being written according to the JSON item order, the li s are written in the order of loaded images (this has the effect of grouping status by user, not writing it out by date, as in the JSON).
So...
how would I both write items in the JSON order and still wait for the img to load?
By the way, I looked at this qn:
jQuery each() and load() ordering
and it seems to be on the right track, but when I tried using hide() and then show()inside the load() function, it never seemed to be called, and the img remained hidden. Please give me a simple example if this is the solution you suggest.
Thanks!
Either:
1) Maintain a counter & timeout, count the # of images to load at start, create the items as "hidden", countdown the number of unloaded as they load, then (when counter hits 0 or timer times out) display everything;
or:
2) Create the items as hidden, and show them in the 'load' event. Items will appear in arbitrary order, but will end up being correctly ordered.
Here's a possible example: your code isn't very clear as to what structure is being built & where appended, so this is just a rough (but clearly coded) outline.
Try using intermediate variables more, rather than vast fabulous jQuery constructions, in your own. It will help you debug it.
console.log('loading news items');
$.each( jsondata, function(i, item){
console.log(' item', showpic(item[3]), item[5]);
var img = $('<img src="' + showpic(item[3]) + '" class="newsImage" >');
var element = img.wrap($('<li>', {"class": "newsItem", "style": "display:none;"}))
.closest('li')
.append(item[5]);
element.appendTo( $('#theNews'));
// when the IMG loads, find it's surrounding LI.. and show it.
img.load( function(){
console.log(' loaded', $(this).attr('src'));
$(this).closest('li').show();
});
// put a timer & show it anyway after 8s, if img still hasn't loaded.
element.delay( 8000).show(0);
});
You will also notice logging in the code. Logging is good software practice. Console.log is not available on IE, so you should eventually shim it or use a small library function of your own.
Fundamentally, you have to get away from adding to the DOM inside the 'load' event. That's what's causing the mis-ordering. Add to the DOM in the jsondata each() function, or in a separate well-structured bit of code that guarantees correct ordering.

How do you format text via JavaScript API within a CKEditor textbox?

Note: I am not looking to format an entire element a selection occurs in or to use the toolbar or working from within a plugin. The formatting commands will be sent via socket.io so I need a way to format selected text from outside of the CKEditor codebase (any ideas on how to make specific selections would be welcome as well, especially if there is some way to either select text without rendering that selection at the same time and/or formatting text based on start-end/length parameters such that the same result would be achieved - though this isn't an absolute requirement for me, I'd be happy being able to format just the selected text with things like font name, size, etc).
I managed to solve this with the following methods incase anyone is looking for a solution:
$('#' + Document.ID + '_contents iframe').contents()[0].execCommand('forecolor',false,'#00ff00');
$('#' + Document.ID + '_contents iframe').contents()[0].execCommand('JustifyCenter', false, null);
$('#' + Document.ID + '_contents iframe').contents()[0].execCommand('fontsize', false, 15);
$('#' + Document.ID + '_contents iframe').contents()[0].execCommand('fontname', false, names);

How to do I add an extra "next" button using jQuery Cycle?

I created a jquery cycle slideshow with next/prev buttons, but in addition to that, I want the slideshow to advance when the image is clicked. I don't know javascript well enough yet to code it myself. Is this possible? Here's what I have so far:
$('#illustration .slides').cycle({
speed: 1,
timeout: 0,
prev: '#illustration .prev',
next: '#illustration .next',
pager: '#illustration-thumbs',
pagerAnchorBuilder: function(idx, slide) {
return '#illustration-thumbs li:eq(' + (idx) + ') a';
}
});
$('#illustration img').cycle('next');
you can use your container for the images as a next button if you add swap your next code you have at the moment to this
next: '#illustration .next, #container_div_name',
Hopefully that should achieve what you are after

jqGrid cell editing need to position the error message dialog

I'm using jqGrid with cell editing. I have setup the colModel properties using the editrules option. Everything works fine in that if I edit a cell and try to save an invalid value the grid displays an error dialog, but I need to know how to position the error message dialog that comes up because in the case of my layout it ends up behind a video. I'm not quite sure how to hook into this and there don't seem to be any obvious options on how to do it.
In this case the dialog I would be trying to manipulate is the one with ID of info_dialog.
Also I'm using the clientArray option for cellsubmit.
I realize this is rather old but upon searching I didn't find any indication this might have been added since, so I figured now that I've figured it out I'd let everyone know how I solved the positioning of mine.
$(document).ready(function ()
{
$.jgrid.jqModal = $.extend($.jgrid.jqModal || {}, {
beforeOpen: centerInfoDialog
});
});
function centerInfoDialog()
{
var $infoDlg = $("#info_dialog");
var $parentDiv = $infoDlg.parent();
var dlgWidth = $infoDlg.width();
var parentWidth = $parentDiv.width();
$infoDlg[0].style.left = Math.round((parentWidth - dlgWidth) / 2) + "px";
}
From what I could find in the jqGrid source code, you can add a beforeOpen and an afterOpen. In my case I'd rather position the thing before it's displayed (duh!). Would be nice if there was a parameter to hook it up in the grid declaration, but this does the trick in the mean time.
I hope this helps someone! I spent most of my afternoon on this!
Default value of zIndex parameter of info_dialog is 1000. The function info_dialog from grid.common.js part of jqGrid will be called from grid.celledit.js without usage a 4-th parameter which can change the option.
So the best pragmatical way which I could recomend you is to decrease zIndex value of your div with the video so that it will be less then 1000.

Resources