I am able to show/hide jQuery qTip on mouse click but
I want to show/hide the qTip on click of Enter key along with mouse clicks.
Can some one please help me on this.
$('.LoginUserProfile').qtip({
content: {
text: '<span class = "login_jobTitle" title = ' + UserJobTitle + '>' + UserJobTitle + '</span><br/>',
title: 'My Profile',
//button: 'Close'
},
show: {
solo: true,
click: true,
},
show: 'click',
hide: {
event: 'click unfocus'
},
position: {
my: 'top right', // Position my top left...
at: 'bottom left', // at the bottom right of...
viewport: $(window)
},
style: {
classes: 'qtip-tipsy profile-dropdown',
tip: false
},
Below is the answer.
var showUserProfile = true;
$('.LoginUserProfile').keyup(function (e) {
if (e.keyCode === 13) {
if (showUserProfile) {
$('.LoginUserProfile').qtip("show");
showUserProfile = false;
}
else {
$('.LoginUserProfile').qtip("hide");
showUserProfile = true;
}
}
});
Related
I need to manually resize the event in fullcalendar without the code editable=true, because I have added a dropdown inside the event and
to work its click I suppose prevent the editable property(editable=false). Now the dropdown is working but the resize property been disappeared. Even I tried the property resizable(resizable=true). How can I bring both the codes?
sample code
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,agendaFourDay'
},
views: {
agendaFourDay: {
type: 'agenda',
duration: { days: 4 },
buttonText: '4 day'
},
},
defaultView: viewDefault,
//minTime: '07:00:00',
//maxTime: '21:00:00',
allDaySlot: false,
eventClick: updateEvent,
selectable: true,
selectHelper: true,
select: selectDate,
editable: false,
resizable: true,
events: "JsonResponse.ashx?eids=" + eIds + "&searchText=" + searchText,
//events: {
// url: 'JsonResponse.ashx',
// type: 'POST',
// data: {
// eIds: $('#hdnCustomerIds').val()
// },
// error: function () {
// alert('there was an error while fetching events!');
// }
//},
defaultDate: dateDefault,
eventDrop: eventDropped,
eventResize: eventResized,
eventRender: function (event, element, view) {
debugger;
// event.stopPropagation();
$(element).find('.fc-title').prepend('' + event.customerid + ',');
$(element).find('.fc-title').html('<select class="dropdown" style="color:black";" onchange="OnchangeEventStatus(this,'+event.id+')"><option >Volvo</option><option value="saab">Saab</option><option value="opel">Opel</option><option value="audi">Audi</option></select>');
$(element).find('.dropdown').click(function (e) {
e.stopImmediatePropagation(); //stop click event, add deleted click for anchor link
});
$(element).find('.delete-event-link').click(function (e) {
e.stopImmediatePropagation(); //stop click event, add deleted click for anchor link
window.top.location.href = "/Sr_App/Customer_Profile.aspx?CustomerId=" + event.customerid;
});
//$(element).find('.fc-title').prepend('' + event.customerid + ',');
element.qtip({
content: {
text: qTipText(event.start, event.end, event.description),
title: '<strong>' + event.title + '</strong>'
},
position: {
my: 'bottom left',
at: 'top right'
},
style: { classes: 'qtip-shadow qtip-rounded' }
});
}
});
i got the solution, just add the property editable: false for fullCalendar
$('#calendar').fullCalendar({
selectable: true,
editable: false,
events: "JsonResponse.ashx?eids=" + eIds + "&searchText=" + searchText,
......
....
});
I'm trying to make tooltip with image content always show on page load but there is if condition that make the tooltip will appear with different image.
The setup is as follows:
<script type="text/javascript">
$(document).ready(function() {
var warna = "";
if(warna=="1")
{
{$('area').qtip({
content: {
text: '<img src="dist/img/Green-Circle-Button-90786.gif" height="20" width="20"/>'
},
position: {
my: 'bottom center',
at: 'top center'
},
style: {
classes: 'qtip-tipsy'
},
show: {
solo: false,
ready: true, // Show when ready (page load)
}
},
hide: {
event: false
}
});
}
else
{
$('area').qtip({
content: {
text: '<img src="dist/img/Red-Circle-Button-90782.gif" height="20" width="20"/>'
},
position: {
my: 'bottom center',
at: 'top center'
},
style: {
classes: 'qtip-tipsy'
},
show: {
solo: false,
ready: true // Show when ready (page load)
},
hide: {
event: false
}
});
}
});
The problem is, tooltip always appear in else condition even value of warna == 1. Is there any solution?
I am trying to initialize a qTip on the click event and display it at the mouse position at the same time (with the same click). I've got so far as to requiring 2 clicks in order to display it, but I would like to make it possible with only 1: http://jsfiddle.net/vpysbc5y/4/
Any brilliant ideas? Thanks.
<div id="block" style="height: 200px; width: 200px; background: black;"></div>
<script>
$(document).ready(function () {
$('#block').on('click', function() {
$(this).qtip({
content: {
text: 'Hello, world!'
},
show: {
event: 'click',
},
hide: {
event: 'unfocus',
fixed: true
},
position: {
at: 'top center',
my: 'bottom center',
target: 'mouse',
adjust: {
mouse: false
}
},
});
});
});
</script>
The problem is that target: 'mouse' (probably) tries to infer the current mouse position. However, outside a click event, this is not possible. Since your qtip will be shown on ready rather than on click then it can't infer the mouse position on its own so you will need to forward it.
Your code should read:
$(document).ready(function () {
$('#block').on('click', function(e) {
$(this).qtip({
content: {
text: 'Hello, world!'
},
show: {
ready : true
},
hide: {
event: 'unfocus',
fixed: true
},
position: {
at: 'top center',
my: 'bottom center',
target: [ e.clientX, e.clientY ],
adjust: {
mouse: false
}
},
});
});
});
Example fiddle
I found sample almost like mines, and i need that if i click anywhere on the screen that popover would hide. Is it possible? If yes, how?
$.fn.popover.defaults.container = 'body';
$('#mycalendar').fullCalendar(
{
defaultView: "agendaWeek",
slotMinutes:60,
allDaySlot:false,
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
eventRender: function (event, element) {
element.popover({
title: "My Title",
placement: event.start.getHours()>12?'top':'bottom',
html:true,
content: event.msg
});
},
editable: false,
events: [
{
title : 'Click me 3',
msg: 'I am clipped to the right which is annoying',
start : '2011-05-07 12:00:00',
end : '2011-05-07 13:00:00',
editable: false,
allDay : false
}
]
});
$('#mycalendar').fullCalendar( 'gotoDate', 2011,04,7 );
the jsfiddle can be found HERE.
Any help I will appreciate
Try the following change inside the eventrender function:
eventRender: function (event, element) {
element.popover({
title: "My Title",
placement: event.start.getHours()>12?'top':'bottom',
html:true,
content: event.msg,
trigger: 'focus' // trigger popover on element focus
});
element.attr('tabindex', -1); // make the element (div) focusable
},
I've also updated the jsfiddle here.
Just add this J Query code in script:
$(document).on('click', function (e) {
$('[data-toggle="popover"],[data-original-title]').each(function () {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
(($(this).popover('hide').data('bs.popover') || {}).inState || {}).click = false // fix for BS 3.3.6
}
});
});
Note: it will close previous popover.
I'm using Qtip2 to create modal window with the code below:
$('a#my-link-id').qtip({
content: {
text: $('#my-modal-content'),
title: "My Modal Window Title",
button: true
},
position: {
my: 'center',
at: 'center',
target: $(window)
},
show: {
event: 'click',
solo: true,
modal: {
on: true
}
},
hide: {
event: false
},
style: 'qtip-modal qtip-shadow'
});
This modal will be activated when I click on the link with id my-link-id.
However, I want to activate this modal using the OnClick feature in a link. So say I have the following link:
<a id="my-link-id" href="#" onClick="javascript:getModalWindow('my-link-id');return false;">Fire Modal</a>
And I have the following function:
window.getModalWindow = function(link_id)
{
var elem_link = $('a#'+link_id);
elem_link.qtip({
content: {
text: 'my content',
title: 'My Modal Window Title',
button: true
},
position: {
my: 'center',
at: 'center',
target: $(window)
},
show: {
event: 'click',
solo: true,
modal: {
on: true
}
},
hide: {
event: false
},
style: 'qtip-modal qtip-shadow'
}).on('click', function(e){
e.preventDefault();
return false;
});
elem_link.trigger('click');
return false;
}
The above code does not work as I expect it to. What happens is the click gets triggered continously (not once) until my browser (Chrome) halts it with an 'Aw, Snap!' error. And also the modal does not get activated.
What do I need to do to get this to work?!
I solved this doing what you have below:
window._getModalWindow = function(link_id)
{
var elem_link = $('a#'+link_id);
var modal_init_bool = elem_link.data('modal_init');
switch(true)
{
case (modal_init_bool !== true):
elem_link.qtip({
content: {
text: 'Modal Window Content',
title: 'Modal Window Title',
button: true
},
position: {
my: 'center',
at: 'center',
target: $(window)
},
show: {
event: 'modal',
solo: true,
modal: {
on: true
}
},
hide: {
event: false
},
style: 'qtip-modal qtip-shadow'
});
elem_link.data('modal_init', true);
break;
}
elem_link.trigger('modal');
return false;
}
I tried using 'click' instead of 'modal' but it just kept firing multiple times when I did that and I don't really understand why.