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.
Related
I! buttons from my toolbar have to create panel.
And I have some problems, and questions.
1) when created panel is set druggable: true, panel didn't rents after click. And Chrome console throwns it: o such config "translationMethod" for class Ext.util.translatable.CssPosition. How to make it works (draggable)?
2)which the best way to create panel on the Main? like I do or another method? I use extjs 6.2 modern.
3)when centered is false, panel created anomalously (without header and title). how to fix it?
Toolbar is one from items of Main. 'mycuts' button is one from toolbar's items.
I hope somebody can help me
There is code:
{
text:'mycuts',
cls: 'grbuttons',
ui:'action',
height: 35,
width: 205,
margin:2,
handler: function() {
Ext.create('Ext.panel.Panel',{
height: 300,
id:'mycutareagrid',
header:{
title:'cuts',
draggable: true,
},
//draggable:true,
header: {
cls : 'hdr2'
},
width: 850,
renderTo:'bighBox',
centered:true,
margin: '98 0 0 215',
autoDestroy: true,
items:[{
xtype:'contlistII'
}],
collapsible:true,
clossable: true,
scope: this,
tools: [{
type:'help'
},{
type:'search'
},{
type:'close',
handler: function(e) {
e.hide()
}
}],
listeners:{
afterrender: function(e){
var d = e.getHeaderContainer();
e.setHeight(10);
}
}
})
}
}
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 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.
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 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