I want to show a popper based on caret position like this
I have tried with tippy js with popper js configuration but this did not work.i need to show a dynamic popper based on caret position which position will be changed while typing.
<div contenteditable="true">
<p></p>
</div>
tippy('div', {
content: 'tooltip!',
followCursor: true,
trigger: 'keypress',
placement: 'left',
});
this doesn't move the tooltip while typing. Also tried to change offset but did not work and the tooltip position stays at end every time.
Related
I wanted all of my reveal.js slides to start at the top, so I modified the center option in the config to false. However, I'd like a particular slide to have that configuration re-enabled. Is there something I can add to the <section> brackets to modify this? Something like this (which doesn't work):
<section id="questions" data-markdown data-center="true">
<script type="text/template">
#Questions?
</script>
</section>
Similar to the question of Hide slide number on title page
You can do this with data-state:
<section data-state="centerText" data-markdown>
# Questions?
</section>
Then at the end of the <script> (after Reveal.initialize()) add the following:
Reveal.addEventListener( 'centerText', function() {
Reveal.configure({center: true});
}, false );
This will center the text only in those slides with data-state="centerText".
I notice in the jsfiddle here - http://jsfiddle.net/stevea/T4sGh/1/ - that when you drag and drop the red box onto the beige box, it looks like the red box goes inside the beige box, but in the HTML it actually becomes a sibling of the beige box and is just given offsets to place it over the beige box:
<body style="cursor: auto;">
<div id="box" class="ui-droppable"></div>
<div id="redBox" class="ui-draggable" style="position: relative; left: 89px; top: -213px;"></div>
</body>
This was unexpected. I don't recall any jQuery-UI documentation that talks about this.Does anyone have a feel what what is going on here and perhaps be able to point me to some documentation?
Thanks
The draggable and droppable do not change the DOM by default. If you want to do that you can utilize the events that they expose. Here's your fiddle updated. I am using the drop event in order to reposition the draggable inside your droppable container on drop:
var cell_dropOps = {
drop : box_drop,
accept : '#redBox',
drop: function (event, ui) {
$(this).append(ui.draggable);
ui.draggable.css({ top: 0, left: 0});
}
};
If you look at the example on this jQuery UI page, you'll notice that this is the default behavior.
If you wish to make dragable object a child of dropable object, you will have to append it manually in your drop function like:
$(this).append($(ui.helper[0]));
The whole purpose of mentioning accept : '#redBox' is that when you drop #redBox on your dropable div, the drop event gets fired.
I'm trying to use the popover like in twitter bootstrap example, so when you click a button it appears, and when you click it it disappear.
I have in application.js
//= require bootstrap-tooltip.js
//= require bootstrap-popover.js
$(function () {
$('.popover-test').popover();
});
And in my view _fof.html.erb
<button class="popover-test" id="button1" data-content="Popover Content">
<%= 'ciao' %>
</button>
But popover comes only on mouse over, and when I move on it disappear.
Have I to implement the function on_click in js?
By default popovers are triggered by mouseover, not by clicks. If you scroll down on the Bootstrap documentation web page that you linked to, you'll see a list of options, including how to set the trigger.
Name: trigger
Type: string
Default: 'click'
Description: how popover is triggered - click | hover | focus | manual
So calling it would be like this:
$('.popover-test').popover({target: "click"});
Here is code:
<script type="text/javascript">
$(function(){
var dialogOptions = {
title: "Header",
autoOpen: false,
modal: true,
width: 400,
height: 1000
};
$(".wnd").dialog(dialogOptions);
$("#btn").click(function(){ $(".wnd").dialog("open"); });
});
</script>
<style>
.wnd {background:yellow;height:900px;width:300px;}
</style>
<div class="wnd"></div>
<button id="btn">click me</button>
When dialog is opened and it higher than main window there is a side slider and it doesn't slide down if you try to drag it with the help of mouse cursor (it seemes like locked).
But it slides fine when to put down button (arrow) on keyboard or scroll down with mouse wheel.
Here is demo on jsfiddle.
How to activate that side slider?
Thanks!
A clean solution would be like this one:
http://jsfiddle.net/4fc33/6/
What I'm doing is wraping the jQuery UI overlay create method to turn off the event that prevents scrolling to work correctly.
An alternative approach to not being able to use the window's sliders is to enable sliders on the dialog window, itself. These will show up automatically if you place a cap on the maximum height of the dialog but can be a little tricky with some versions of jQueryUI.
At least on the version of jQueryUI that I am on (1.9) I needed to specify the maximum height on my own because the maxHeight property that should be able to be used according to the documentation didn't work*.
Here's what worked:
$("#dialog").dialog({
modal: true,
width: "auto",
height: "auto"
/* maxHeight: whatever won't work, */
}).css("maxHeight", window.innerHeight-120);
I subtracted 120 pixels off of the window's height to accommodate for the Dialog window's header -- and footer section with its "ok" button.
* The max-height actually would take affect if the dialog was attempted to be resized -- but not upon display.
If you open a dialog when a dialog is already displayed then, by default, the second dialog will not expand past the width of the first dialog. This is true even though the second dialog is not actually enclosed within the first dialog (I get the second dialog by clicking a link in the first dialog).
I can set an explicit width on the second dialog, but this isn't ideal. I really want it to auto-size to its contents (the quasipartikel multiselect), which are wider than the first/background dialog. With an explicit width on the second dialog I generally get two sets of scroll bars: one on the dialog itself, and on on the inner multiselect.
Note that I've only tried sizing the second dialog using an explicit width in the JS .dialog() call, and not via css (which I know almost nothing about).
Does anyone have any idea how to auto-size the second dialog? Thanks.
EDIT
Some code added as suggested:
<div id="dialog-top" title="Tab data">
<form>
...lots of stuff, including id 'addCodeButton', which
...pops up the second dialog
</form>
</div> <!-- dialog-top -->
<div id="dialog-add-code" title="Code selector">
<select id = "codes" ...etc... >
...
</select>
</div>
$(function(){
$('#addCodeButton').click(function(){
// problem: this 'open' will not set the width of the new dialog
// wider than 'dialog-top' unless an explicit width is given
// (see '460' below)
$('#dialog-add-code').dialog('open');
return false;
});
});
var $dialog = $("#dialog-top").dialog({
autoOpen: false,
modal: true,
buttons: {
...
}
});
$('#dialog-add-code').dialog({
autoOpen: false,
width: 460,
modal: false,
buttons: {
...
}
});
I'm not sure what's causing your problem. Here's fiddle demonstrating that what you want does work.
http://jsfiddle.net/brettzink/NASyR/
you tried .dialog({width:"auto"}); ?