I have a table which contains a reference to one person on each column. I want to display a popup showing each person's short bio when user clicks each link. The popup should be displayed right next to the where the user clicked.
I found some samples using jquery with qtip, the problem I have is that for each person popup I have to duplicate all the javascript code and I'm thinking there must be a way to reuse it since it's almost the same, the only thing that changes is the content, title and the div id:
This is the jsFiddle.
Here the html code:
<table border="1">
<tr>
<td>
<div id="johndoe" style="background-color: #f0f0f0; width: 50%; margin: 2em">John Doe</div>
</td>
<td>
<div id="janedee" style="background-color: #f0f0f0; width: 50%; margin: 2em">Jane Dee</div>
</td>
</tr>
</table>
And Javascript:
$(document).ready(function () {
$("#johndoe").qtip({
content: {
text: "Here goes John Doe's short bio blah blah",
title: {
text: "Title",
button: true
}
},
position: {
target: 'mouse',
viewport: $(window),
adjust: {
method: 'flip shift',
mouse: false
}
},
style: {
tip: false,
widget: false
},
show: {
event: 'click',
solo: true
},
hide: {
fixed: true,
event: 'unfocus'
}
});
});
$(document).ready(function () {
$("#janedee").qtip({
content: {
text: "Here goes Jane Dee's short bio blah blah",
title: {
text: "Title",
button: true
}
},
position: {
target: 'mouse',
viewport: $(window),
adjust: {
method: 'flip shift',
mouse: false
}
},
style: {
tip: false,
widget: false
},
show: {
event: 'click',
solo: true
},
hide: {
fixed: true,
event: 'unfocus'
}
});
});
I don't have a lot of experience with jquery, so I'm asking the experts, how would you approach this with the least amount of javascript code possible? Like reusing functions, just passing the content, title and div id for each person.
Thanks in advance!
Try the data API and multi-selectors:
<div id="johndoe" data-title="text">John Doe</div>
<div id="janedee" data-title="text">Jane Dee</div>
$("#johndoe, #janedee").qtip({
content: {
text: $(this).data('title'),
title: {
text: "Title",
button: true
}
},
...
});
That should do it.
Related
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'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.
How do I go about adding styles to jquery buttons on a dialog? I want to color some one color and others another color.
I've tried using the class: but i didnt seem to get too much effect. am i doing something wrong? do i need to use something else? do i need to place something somewhere else?
code:
function DisplayCommonDialog(url, title, height, width) {
HideDialogs();
var dialogButtons = [{
text: "Save",
click: function () {
...
}
}
},
width: '70px'
}, {
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}];
if (title.indexOf("Delete") >= 0) {
dialogButtons = [{
text: "OK",
click: function () {
...
},
width: '70px'
}, {
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}];
}
if (popUpDialog != null) {
$("#").dialog("option", {
width: width,
height: height,
title: title,
open: function () {
...
},
close: function () {
...
},
buttons: dialogButtons
});
...
}
else {
popUpDialog = $("#").dialog({
width: width,
height: height,
autoResize: true,
modal: true,
title: title,
open: function () {
...
},
close: function () {
...
},
overlay:
{
opacity: 0.5,
background: "black"
},
position: ['center', 'center'],
buttons: dialogButtons
});
}
}
to add css class in dialog buttons, just use the button button property "class" :
$("#").dialog({
buttons: [{
"text":'your button name',
"click": $.noop,
"class": 'your-css-class1 your-css-class2'
}]
})
the property "class" in each declared button will be inserted when creating dialog.
Hope this help.
similare question about button style in dialog available here
http://jqueryui.com/themeroller/
or
How to style different hover colors for jquery dialog buttons
or how to change jquery dialog buttons
findout the CSS class being applied to the button using firebug and then override it in your css
I'm trying to use qtip and create an embedded form that are being displayed in the qtip. When I'm trying to create a submit event to my form nothing happens. I'm using jquery 1.7 and the latest qtip version.
I have tried to use examples from http://craigsworks.com/projects/qtip2/demos/ but their demos won´t work for me. Please take a look at my code and tell me if I'm doing something wrong.
Thanks in advance!
$("#addNews").qtip({
position: {
corner: {
target: 'bottomMiddle',
tooltip: 'topMiddle'
},
adjust: { x: 0, y: 0 }
},
show: {
when: { event: 'click' },
solo: true
},
hide: {
fixed: true,
when: { event: 'unfocus' }
},
content: {
text: '<form id="frmAddNews"><div class="inputWrap left"><div class="label">Rubrik</div><input type="text" id="" name="" class="inputText" value="" /></div><div class="inputWrap left"><div class="labelTextarea">Meddelande</div><textarea id="" name="" class="inputTextarea" value=""></textarea></div><div class="submit_container"><input type="submit" value="Lägg till nyhet" /></div><div style="clear:both"></div></form>',
},
style: {
border: {
width: 5,
radius: 2,
color: '#e1e1e1'
},
width: 350,
background: '#FFF',
padding: 15,
tip: true, // Give it a speech bubble tip with automatic corner detection
name: 'cream' // Style it according to the preset 'cream' style
},
events: {
render: function(event, api) {
$('form', this).bind('submit', function(event) {
event.preventDefault();
console.log("hej");
});
}
},
});
I had a quick play and I got it to work if I set the tooltip to display modally.
i.e. have your show option object as:
show: {
event: 'click', // Show it on click...
modal: {
on: true,
// Don't let users exit the modal in any way
blur: false, escape: false
}
},
The jsFiddle I was using to play around with.
I am using the jquery qtip2 to create a mouseover qtip..here is the code:
$(document).ready(function() {
$("#optionalProdsImgPreview_1").qtip({
content: "<img src='http://mysite.com/myimg.jpg' width='100' height='150' />",
show: {
solo: true
},
hide: {
delay: 400,
fixed: true,
event: "mouseout"
},
style: {
tip: {
corner: "rightMiddle"
},
classes: "ui-widget-content"
},
position: {
adjust: {
x: -18,
y: 0
},
at: "left center",
my: "right center"
}
});
});
This basically opens an preview image when the mouse is over a the link such as this:
My great product here
Now what I want to do is open a different qtip when someone clicks on that link. Also the mouseover qtip should close as well. Do I just do that via jquery .click or should I do this via some other method or maybe qtip has some way of accomplishing this?
Thanks
Nevermind. I figured out the solution myself.
http://craigsworks.com/projects/qtip2/tutorials/advanced/#multi
Here is my full code:
$(document).ready(function() {
$("#optionalProdsImgPreview_1").qtip({
content: "<img src='http://mysite.com/myimg.jpg' width='100' height='150' />",
show: {
solo: true
},
hide: {
delay: 400,
fixed: true,
event: "mouseout"
},
style: {
tip: {
corner: "rightMiddle"
},
classes: "ui-widget-content"
},
position: {
adjust: {
x: -18,
y: 0
},
at: "left center",
my: "right center"
}
})
.removeData('qtip')
.qtip( $.extend({}, shared, {
content: "My New Content is HERE!"
}));
});
The solution may now have changed with the latest version of qTip2. In order to get multiple qTips to work on the same target I had to add the overwrite:false option to the second qtip.
http://qtip2.com/options#core.overwrite