Related
I want to retrieve item information when I hover the mouse over it. I tried the example of an earlier question but it doesn't work. It shows the title but not the content (Bootstrap popover over $(this) element)
[...]
demoSource.push({
name: RFInum,
desc: deadline,
values: [{
from: start,
to: end,
label: tit,
customClass: balk_kleur,
dataObj: stat
}],
var popoverContent;
$(".gantt").gantt({
source: demoSource,
navigate: "scroll",
scale: "days",
maxScale: "months",
minScale: "hours",
itemsPerPage: 20,
scrollToToday: false,
useCookie: true,
onItemClick: function(data) {
},
onItemMouseover: function(elm, data) {
popoverContent = data.detailContent;
alert(popoverContent);
},
onAddClick: function(dt, rowId) {
alert("Empty space clicked - add an item!");
},
onRender: function() {
if (window.console && typeof console.log === "function") {
console.log("chart rendered");
}
}
});
$(".gantt").popover({
selector: ".bar",
title: function _getItemText() {
return this.textContent;
},
container: '.gantt',
content: function () {
return popoverContent;
},
trigger: "hover",
placement: "auto right"
});
[...]
How do I preload the css in the following code? I have updated my code with Denis suggestions, but it did not work. Now the pages are not finding css at all. I might be missing something since I do not have much about js. Am i missing something? Thanks again Denis, for your suggestion.
This is a free template that i downloaded somewhere. Its quite lite and solves my pbn needs while keeping the site blazing fast. But I have never seen a html template calling css from a js before. I know how to preload files in html, but no clue what would be the proper attribute for it to be used in a js. This can get me the 100 page score i have been trying for long. Any of JS masters help will be much appreciated.
(function($) {
const item = {
reset: 'full',
breakpoints: {
global: { range: '*', rel: 'preload', href: 'css/style.css', containers: 1400, grid: { gutters: 50 } },
wide: { range: '-1680', rel: 'preload', href: 'css/style-wide.css', containers: 1200, grid: { gutters: 40 } },
normal: { range: '-1280', rel: 'preload', href: 'css/style-normal.css', containers: 960, lockViewport: true },
narrow: { range: '-980', rel: 'preload', href: 'css/style-narrow.css', containers: '95%', grid: { gutters: 30 } },
narrower: { range: '-840', rel: 'preload', href: 'css/style-narrower.css', grid: { gutters: 20, collapse: 1 } },
mobile: { range: '-640', rel: 'preload', href: 'css/style-mobile.css', grid: { gutters: 15, collapse: 2 } }
}
}
Object.keys(item.breakpoints).forEach(key=>{
var res = document.createElement("link");
res.rel = item.breakpoints[key].rel;
res.as = "style";
res.href = item.breakpoints[key].href;
document.head.appendChild(res)
})
}
}, {
layers: {
layers: {
navPanel: {
animation: 'pushX',
breakpoints: 'narrower',
clickToClose: true,
height: '100%',
hidden: true,
html: '<div data-action="navList" data-args="nav"></div>',
orientation: 'vertical',
position: 'top-left',
side: 'left',
width: 275
},
titleBar: {
breakpoints: 'narrower',
height: 44,
html: '<span class="toggle" data-action="toggleLayer" data-args="navPanel"></span><span class="title" data-action="copyHTML" data-args="logo"></span>',
position: 'top-left',
side: 'top',
width: '100%'
}
}
}
});
$(function() {
var $window = $(window);
// Forms (IE<10).
var $form = $('form');
if ($form.length > 0) {
$form.find('.form-button-submit')
.on('click', function() {
$(this).parents('form').submit();
return false;
});
if (skel.vars.IEVersion < 10) {
$.fn.n33_formerize=function(){var _fakes=new Array(),_form = $(this);_form.find('input[type=text],textarea').each(function() { var e = $(this); if (e.val() == '' || e.val() == e.attr('placeholder')) { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } }).blur(function() { var e = $(this); if (e.attr('name').match(/_fakeformerizefield$/)) return; if (e.val() == '') { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } }).focus(function() { var e = $(this); if (e.attr('name').match(/_fakeformerizefield$/)) return; if (e.val() == e.attr('placeholder')) { e.removeClass('formerize-placeholder'); e.val(''); } }); _form.find('input[type=password]').each(function() { var e = $(this); var x = $($('<div>').append(e.clone()).remove().html().replace(/type="password"/i, 'type="text"').replace(/type=password/i, 'type=text')); if (e.attr('id') != '') x.attr('id', e.attr('id') + '_fakeformerizefield'); if (e.attr('name') != '') x.attr('name', e.attr('name') + '_fakeformerizefield'); x.addClass('formerize-placeholder').val(x.attr('placeholder')).insertAfter(e); if (e.val() == '') e.hide(); else x.hide(); e.blur(function(event) { event.preventDefault(); var e = $(this); var x = e.parent().find('input[name=' + e.attr('name') + '_fakeformerizefield]'); if (e.val() == '') { e.hide(); x.show(); } }); x.focus(function(event) { event.preventDefault(); var x = $(this); var e = x.parent().find('input[name=' + x.attr('name').replace('_fakeformerizefield', '') + ']'); x.hide(); e.show().focus(); }); x.keypress(function(event) { event.preventDefault(); x.val(''); }); }); _form.submit(function() { $(this).find('input[type=text],input[type=password],textarea').each(function(event) { var e = $(this); if (e.attr('name').match(/_fakeformerizefield$/)) e.attr('name', ''); if (e.val() == e.attr('placeholder')) { e.removeClass('formerize-placeholder'); e.val(''); } }); }).bind("reset", function(event) { event.preventDefault(); $(this).find('select').val($('option:first').val()); $(this).find('input,textarea').each(function() { var e = $(this); var x; e.removeClass('formerize-placeholder'); switch (this.type) { case 'submit': case 'reset': break; case 'password': e.val(e.attr('defaultValue')); x = e.parent().find('input[name=' + e.attr('name') + '_fakeformerizefield]'); if (e.val() == '') { e.hide(); x.show(); } else { e.show(); x.hide(); } break; case 'checkbox': case 'radio': e.attr('checked', e.attr('defaultValue')); break; case 'text': case 'textarea': e.val(e.attr('defaultValue')); if (e.val() == '') { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } break; default: e.val(e.attr('defaultValue')); break; } }); window.setTimeout(function() { for (x in _fakes) _fakes[x].trigger('formerize_sync'); }, 10); }); return _form; };
$form.n33_formerize();
}
}
// Dropdowns.
$('#nav > ul').dropotron({
offsetY: -15,
hoverDelay: 0
});
});
})(jQuery);
You can use Object.keys for get array of breakpoints item, then you can appendChild to document.head
So, write code like this:
const item = {
reset: 'full',
breakpoints: {
global: { range: '*', rel: 'preload', href: 'css/style.css', containers: 1400, grid: { gutters: 50 } },
wide: { range: '-1680', rel: 'preload', href: 'css/style-wide.css', containers: 1200, grid: { gutters: 40 } },
normal: { range: '-1280', rel: 'preload', href: 'css/style-normal.css', containers: 960, lockViewport: true },
narrow: { range: '-980', rel: 'preload', href: 'css/style-narrow.css', containers: '95%', grid: { gutters: 30 } },
narrower: { range: '-840', rel: 'preload', href: 'css/style-narrower.css', grid: { gutters: 20, collapse: 1 } },
mobile: { range: '-640', rel: 'preload', href: 'css/style-mobile.css', grid: { gutters: 15, collapse: 2 } }
}
}
Object.keys(item.breakpoints).forEach(key=>{
var res = document.createElement("link");
res.rel = item.breakpoints[key].rel;
res.as = "style";
res.href = item.breakpoints[key].href;
document.head.appendChild(res)
})
See in playground: https://jsfiddle.net/denisstukalov/3euofv17/#&togetherjs=RqKywyBFh0
I am using fullcalendar v4. i want to remove event in eventDragStop method.
Everything is work perfectly, but i can't remove event. actually i want drop external event in fullcalendar and also want to drop fullcalendar event in external event area.
Example for old version. I want to build similar demo with latest version(v4)
Example:
eventDragStop: function( info ) {
if(isEventOverDiv(info.jsEvent.clientX, info.jsEvent.clientY)) {
info.event.remove();
var el = $( "<div class='fc-event'>" ).appendTo( '#external-events-listing' ).text( info.event.title );
el.draggable({
zIndex: 999,
revert: true,
revertDuration: 0
});
el.data('event', { title: info.event.title, id: info.event.id, stick: true });
}
},
Full code :
<pre>
document.addEventListener('DOMContentLoaded', function() {
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable;
var containerEl = document.getElementById('external-events');
var calendarEl = document.getElementById('calendar');
var checkbox = document.getElementById('drop-remove');
new Draggable(containerEl, {
itemSelector: '.fc-event',
eventData: function(eventEl) {
return {
title: eventEl.innerText
};
}
});
var calendar = new Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function(info) {
// is the "remove after drop" checkbox checked?
if (checkbox.checked) {
// if so, remove the element from the "Draggable Events" list
info.draggedEl.parentNode.removeChild(info.draggedEl);
}
},
eventDragStop: function( info ) {
if(isEventOverDiv(info.jsEvent.clientX, info.jsEvent.clientY)) {
info.event.remove();
var el = $( "<div class='fc-event'>" ).appendTo( '#external-events-listing' ).text( info.event.title );
el.draggable({
zIndex: 999,
revert: true,
revertDuration: 0
});
el.data('event', { title: info.event.title, id: info.event.id, stick: true });
}
},
});
calendar.render();
var isEventOverDiv = function(x, y) {
var external_events = $( '#external-events' );
var offset = external_events.offset();
offset.right = external_events.width() + offset.left;
offset.bottom = external_events.height() + offset.top;
// Compare
if (x >= offset.left
&& y >= offset.top
&& x <= offset.right
&& y <= offset .bottom) { return true; }
return false;
}
});
</pre>
I am using the below code -
afterListeners: function(thisEl, eOpts) {
sliderSprite = Ext.create('Ext.draw.sprite.Rect', {
width: spriteWidth, // half year width height : 20, x : 16, y : 0, draggable : true, floatable : true, 'stroke-width' : 2, fill : '#FCE5C5', stroke : '#C6B395' });
sliderSprite.show(true);
thisEl.getSurface().add(sliderSprite);
alert("before source");
new Ext.drag.Source({
element: sliderSprite,
constrain: {
// Drag only horizontal in 30px increments
horizontal: true, // snap: { // y: 30 // }
},
onDragMove: function() {
alert("inside source");
spriteHighlighter.remove();
me.onDragSprite(e, this, chartWidth, spriteWidth);
},
onDragEnd: function() {
me.refreshCharts(xPlots, bigChart, sliderSprite, firstYear, lastYear, chartWidth);
}
});
alert("outside source");
},
}
}
Now, the issue is, control doesn't go inside the Ext.drag.Source(). I get 2 alert messages ,before source and outside source. and because it doesn't go inside Ext.drag.Source().
The drag-able functionality of the element is not working. What should I do ?
First you need to be clear on which component you want to use. After that you need to put afterrender event on that component and inside of that event you can use Ext.drag.Source.
In this FIDDLE, I have created a demo using button and Ext.drag.Source.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
var buttons = [],
rendomColor = () => {
return "#" + ((1 << 24) * Math.random() | 0).toString(16);
};
for (var i = 0; i < 10; i++) {
buttons.push({
text: `Button ${i+1}`,
margin: 10,
style: `background:${rendomColor()}`
});
}
Ext.create({
xtype: 'panel',
height: window.innerHeight,
title: 'Ext.drag.Source Example',
defaults: {
xtype: 'button'
},
items: buttons,
renderTo: Ext.getBody(),
listeners: {
afterrender: function (panel) {
panel.items.items.forEach(item => {
new Ext.drag.Source({
element: item.el,
constrain: {
// Drag only vertically in 30px increments
//vertical: true,
snap: {
y: 1,
x: 1
}
}
})
})
}
}
});
}
});
I'm really new on Jquery and I have this code that I'm playing with. I can't find where is the script in this code that lets you close the popup anywhere. If none what and where should I put the code.
(function($) {
var ie6 = (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) < 7 && parseInt(jQuery.browser.version, 10) > 4);
if ($.proxy === undefined)
{
$.extend({
proxy: function( fn, thisObject ) {
if ( fn )
{
proxy = function() { return fn.apply( thisObject || this, arguments ); };
};
return proxy;
}
});
};
$.extend( jQuery.easing,
{
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
});
$.extend($.expr[':'], {
value: function(a) {
return $(a).val();
}
});
$.extend({
MsgBoxObject: {
defaults : {
name : 'jquery-msgbox',
zIndex : 10000,
width : 400,
height : 310,
background : '#FFFFFF',
modal : true,
overlay : {
'background-color' : '#000000',
'opacity' : 0.5
},
showDuration : 200,
closeDuration : 100,
moveDuration : 500,
shake : {
'distance' : 10,
'duration' : 100,
'transition' : 'easeOutBack',
'loops' : 2
},
emergefrom : 'top'
},
options : {},
esqueleto : {
msgbox : [],
wrapper : [],
form : [],
buttons : []
},
visible : false,
i : 0,
animation : false,
overlay : {
create: function(options) {
this.options = options;
this.element = $('<div id="'+new Date().getTime()+'"></div>');
this.element.css($.extend({}, {
'position' : 'fixed',
'top' : 0,
'left' : 0,
'opacity' : 0,
'display' : 'none',
'z-index' : this.options.zIndex
}, this.options.style));
this.element.click( $.proxy(function(event) {
if (this.options.hideOnClick)
{
if ($.isFunction(this.options.callback))
{
this.options.callback();
}
else
{
this.hide();
}
}
event.preventDefault();
}, this));
this.hidden = true;
this.inject();
return this;
},
inject: function() {
this.target = $(document.body);
this.target.append(this.element);
if(ie6)
{
this.element.css({'position': 'absolute'});
var zIndex = parseInt(this.element.css('zIndex'));
if (!zIndex)
{
zIndex = 1;
var pos = this.element.css('position');
if (pos == 'static' || !pos)
{
this.element.css({'position': 'relative'});
}
this.element.css({'zIndex': zIndex});
}
zIndex = (!!(this.options.zIndex || this.options.zIndex === 0) && zIndex > this.options.zIndex) ? this.options.zIndex : zIndex - 1;
if (zIndex < 0)
{
zIndex = 1;
}
this.shim = $('<iframe id="IF_'+new Date().getTime()+'" scrolling="no" frameborder=0 src=""></div>');
this.shim.css({
zIndex : zIndex,
position : 'absolute',
top : 0,
left : 0,
border : 'none',
width : 0,
height : 0,
opacity : 0
});
this.shim.insertAfter(this.element);
$('html, body').css({
'height' : '100%',
'width' : '100%',
'margin-left' : 0,
'margin-right': 0
});
}
},
resize: function(x, y) {
this.element.css({ 'height': 0, 'width': 0 });
if (this.shim) this.shim.css({ 'height': 0, 'width': 0 });
var win = { x: $(document).width(), y: $(document).height() };
this.element.css({
'width' : '100%',
'height' : y ? y : win.y
});
if (this.shim)
{
this.shim.css({ 'height': 0, 'width': 0 });
this.shim.css({
'position': 'absolute',
'left' : 0,
'top' : 0,
'width' : this.element.width(),
'height' : y ? y : win.y
});
}
return this;
},
show: function() {
if (!this.hidden) return this;
if (this.transition) this.transition.stop();
this.target.bind('resize', $.proxy(this.resize, this));
this.resize();
if (this.shim) this.shim.css({'display': 'block'});
this.hidden = false;
this.transition = this.element.fadeIn(this.options.showDuration, $.proxy(function(){
this.element.trigger('show');
}, this));
return this;
},
hide: function() {
if (this.hidden) return this;
if (this.transition) this.transition.stop();
this.target.unbind('resize');
if (this.shim) this.shim.css({'display': 'none'});
this.hidden = true;
this.transition = this.element.fadeOut(this.options.closeDuration, $.proxy(function(){
this.element.trigger('hide');
this.element.css({ 'height': 0, 'width': 0 });
}, this));
return this;
}
},
create: function() {
this.options = $.extend(true, this.defaults, this.options);
this.overlay.create({
style : this.options.overlay,
hideOnClick : !this.options.modal,
zIndex : this.options.zIndex-1,
showDuration : this.options.showDuration,
closeDuration : this.options.closeDuration
});
this.esqueleto.msgbox = $('<div class="'+this.options.name+'"></div>');
this.esqueleto.msgbox.css({
'display' : 'none',
'position' : 'absolute',
'top' : 0,
'left' : 0,
'width' : this.options.width,
'height' : this.options.height,
'z-index' : this.options.zIndex,
'word-wrap' : 'break-word',
'-moz-box-shadow' : '0 0 15px rgba(0, 0, 0, 0.5)',
'-webkit-box-shadow' : '0 0 15px rgba(0, 0, 0, 0.5)',
'box-shadow' : '0 0 15px rgba(0, 0, 0, 0.5)',
'-moz-border-radius' : '6px',
'-webkit-border-radius' : '6px',
'border-radius' : '6px',
'background-color' : this.options.background
});
this.esqueleto.wrapper = $('<div class="'+this.options.name+'-wrapper"></div>');
this.esqueleto.msgbox.append(this.esqueleto.wrapper);
this.esqueleto.form = $('<form action="'+this.options.formaction+'" method="post"></form>');
this.esqueleto.wrapper.append(this.esqueleto.form);
this.esqueleto.wrapper.css({
height : (ie6 ? 80 : 'auto'),
'min-height' : 80,
'zoom' : 1
});
$('body').append(this.esqueleto.msgbox);
this.addevents();
return this.esqueleto.msgbox;
},
addevents: function() {
$(window).bind('resize', $.proxy(function() {
if (this.visible)
{
this.overlay.resize();
this.moveBox();
}
}, this));
$(window).bind('scroll', $.proxy(function() {
if (this.visible)
{
this.moveBox();
}
}, this));
this.esqueleto.msgbox.bind('keydown', $.proxy(function(event) {
if (event.keyCode == 27)
{
this.close(false);
}
}, this));
// heredamos los eventos, desde el overlay (Events inherited from the overlay):
this.overlay.element.bind('show', $.proxy(function() { $(this).triggerHandler('show'); }, this));
this.overlay.element.bind('hide', $.proxy(function() { $(this).triggerHandler('close'); }, this));
},
show: function(txt, options, callback) {
var types = ['alert', 'info', 'error', 'prompt', 'confirm'];
this.esqueleto.msgbox.queue(this.options.name, $.proxy(function( next ) {
options = $.extend(true, {
type : 'alert',
form : {
'active' : false
}
}, options || {});
if (typeof options.buttons === "undefined")
{
if (options.type == 'confirm' || options.type == 'prompt')
{
var buttons = [
{type: 'cancel', value: 'Cancel'}
];
}
}
else
{
var buttons = options.buttons;
};
this.callback = $.isFunction(callback) ? callback : function(e) {};
this.esqueleto.buttons = $('<div class="'+this.options.name+'-buttons"></div>');
this.esqueleto.form.append(this.esqueleto.buttons);
if (options.type != 'prompt')
{
$.each(buttons, $.proxy(function(i, button) {
if (button.type == 'cancel')
{
this.esqueleto.buttons.append($('<button type="button">'+button.value+'</button>').bind('click', $.proxy(function(e) { this.close(false); e.preventDefault(); }, this)));
}
}, this));
}
this.esqueleto.form.prepend(txt);
$.each(types, $.proxy(function(i, e) {
this.esqueleto.wrapper.removeClass(this.options.name+'-'+e);
}, this));
this.esqueleto.wrapper.addClass(this.options.name+'-'+options.type);
this.moveBox(); // set initial position
this.visible = true;
this.overlay.show();
this.esqueleto.msgbox.css({
display : 'block',
left : ( ($(document).width() - this.options.width) / 2)
});
this.moveBox();
setTimeout($.proxy(function() { var b = $('input, button', this.esqueleto.msgbox); if (b.length) { b.get(0).focus();} }, this), this.options.moveDuration);
}, this));
this.i++;
if (this.i==1)
{
this.esqueleto.msgbox.dequeue(this.options.name);
}
},
moveBox: function() {
var size = { x: $(window).width(), y: $(window).height() };
var scroll = { x: $(window).scrollLeft(), y: $(window).scrollTop() };
var height = this.esqueleto.msgbox.outerHeight();
var y = 0;
var x = 0;
// vertically center
y = scroll.x + ((size.x - this.options.width) / 2);
if (this.options.emergefrom == "bottom")
{
x = (scroll.y + size.y + 80);
}
else // top
{
x = (scroll.y - height) - 80;
}
if (this.visible)
{
if (this.animation)
{
this.animation.stop;
}
this.animation = this.esqueleto.msgbox.animate({
left : y,
top : scroll.y + ((size.y - height) / 2)
}, {
duration : this.options.moveDuration,
queue : false,
easing : 'easeOutBack'
});
}
},
close: function(param) {
this.esqueleto.msgbox.css({
display : 'none',
top : 0
});
this.visible = false;
if ($.isFunction(this.callback))
{
this.callback.apply(this, $.makeArray(param));
}
setTimeout($.proxy(function() {
this.i--;
this.esqueleto.msgbox.dequeue(this.options.name);
}, this), this.options.closeDuration);
if (this.i==1)
{
this.overlay.hide();
}
this.moveBox();
this.esqueleto.form.empty();
},
},
msgbox: function(txt, options, callback) {
if (typeof txt == "object")
{
$.MsgBoxObject.config(txt);
}
else
{
return $.MsgBoxObject.show(txt, options, callback);
}
}
});
$(function() {
if (parseFloat($.fn.jquery) > 1.2) {
$.MsgBoxObject.create();
} else {
throw "The jQuery version that was loaded is too old. MsgBox requires jQuery 1.3+";
}
});
})(jQuery);
Every tips and help will be appreciated. Thank you in advance!
this is the method this plugin is using to hide.
hide: function() {
if (this.hidden) return this;
if (this.transition) this.transition.stop();
this.target.unbind('resize');
if (this.shim) this.shim.css({'display': 'none'});
this.hidden = true;
this.transition = this.element.fadeOut(this.options.closeDuration, $.proxy(function(){
this.element.trigger('hide');
this.element.css({ 'height': 0, 'width': 0 });
}, this));
return this;
}
And this is the place where using this function:
this.element.click( $.proxy(function(event) {
if (this.options.hideOnClick)
{
if ($.isFunction(this.options.callback))
{
this.options.callback();
}
else
{
this.hide();
}
}
event.preventDefault();
}, this));
this.hidden = true;
this.inject();
return this;
},
So according to this when you click on the overlay popup will hide using this.hide() method.