I have two bootstrap popovers and they should be able to open the side panel.
Also please find the related code in JSFiddle https://jsfiddle.net/bob_js/eLLaacju/
I wanted to achieve the below issue: the popover should open on data-trigger="hover" and stay as it has content in which if we can click the Text (Click Me) it should open a side panel. data-trigger="focus" doesn't help either.
Could you please help me, below is the related code to it.
HTML:
<div>
Title
</div>
<div class="container">
<i id="popover-a" class="circle-macro" tabindex="0" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-a" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me</p>
</div>
</div>
<br>
<i id="popover-b" class="circle-macro" tabindex="1" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-b" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me</p>
</div>
</div>
</div>
CSS:
.circle-macro {
border-radius: 50%;
background-color: rgb(68, 104, 125);
color: white;
padding: 0 8px;
font-family: 'Times New Roman';
font-style: italic;
z-index: 10;
cursor: pointer;
}
.hidden{
display: none;
}
jQuery:
$(function () {
$("#popover-a").popover({
html: true,
content: function(){
return $('#popover-content-a').html();
}
});
$("#popover-b").popover({
html: true,
content: function(){
return $('#popover-content-b').html();
}
});
})
Just adding the below to my jQuery helps the issue for now.
trigger: 'click hover', delay: {show: 50, hide: 4000},
$(function () {
$("#popover-a").popover({
html: true, trigger: 'click hover', delay: {show: 50, hide: 4000},
content: function(){
return $('#popover-content-a').html();
}
});
$("#popover-b").popover({
html: true, trigger: 'click hover', delay: {show: 50, hide: 4000},
content: function(){
return $('#popover-content-b').html();
}
});
})
Related
I'm working on a scheduling widget concept. The basic idea is to have a row of DIVs for each day of the week. Each row has a fixed number of time periods represented by DIVs. I want to be able to resize each DIV by dragging a handle on the left hand side. The leftmost DIV cannot be dragged, but it resizes depending on the resizing of the DIV to its right. This continues down the row, i.e., the DIV to the left is resized automatically when the DIV to the right is resized. I'm using the Resizable widget in jQuery UI for the basic resize function.
I have prepared an example fiddle at: https://jsfiddle.net/profnimrod/rpzyv0nd/4/
For some reason the draggable handle on the left hand side of each DIV (other than the first one) is not moving as I would expect.
The Fontawesome icon inside each DIV (other than the first one), which I'd like to use as the resize handle is also not displaying.
Any ideas on how to fix these two issues.
Note that the there is a canvas element behind the DIV containing the row. The intent here is that I will be adding graphical elements behind the rows at somepoint (the row DIVs will be transparent).
The code I'm starting with (available at the Fiddle) is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Schedule test</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-6jHF7Z3XI3fF4XZixAuSu0gGKrXwoX/w3uFPxC56OtjChio7wtTGJWRW53Nhx6Ev" crossorigin="anonymous">
<style>
#container { width: 600px; height: 300px; }
#resizable1 { width: 150px; height: 50px; display:inline; float:left;}
#resizable2 { width: 150px; height: 50px; display:inline; float:left;}
#resizable3 { width: 150px; height: 50px; display:inline; float:left;}
#resizable4 { width: 142px; height: 50px; display:inline; float:left;}
#resizable1, #resizable2, #resizable3, #resizable4, #container { padding: 0em; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#resizable2" ).resizable({
grid: 50,
handles: "w",
maxHeight: 50,
minHeight: 50,
containment: "#container",
resize: function(e, ui) {
//var change = ui.size.width - ui.originalSize.width;
if(ui.originalSize.width > ui.size.width)
{
$("#resizable1").width($("#resizable1").width() + 50);
}
else {
$("#resizable1").width($("#resizable1").width() - 50);
}
}
});
$( "#resizable3" ).resizable({
grid: 50,
handles: "w",
maxHeight: 50,
minHeight: 50,
containment: "#container",
resize: function(e, ui) {
//var change = ui.size.width - ui.originalSize.width;
if(ui.originalSize.width > ui.size.width)
{
$("#resizable2").width($("#resizable2").width() + 50);
}
else {
$("#resizable2").width($("#resizable2").width() - 50);
}
}
});
$( "#resizable4" ).resizable({
grid: 50,
handles: "w",
maxHeight: 50,
minHeight: 50,
containment: "#container",
resize: function(e, ui) {
//var change = ui.size.width - ui.originalSize.width;
if(ui.originalSize.width > ui.size.width)
{
$("#resizable3").width($("#resizable3").width() + 50);
}
else {
$("#resizable3").width($("#resizable3").width() - 50);
}
}
});
});
</script>
</head>
<body>
<div class="scheduleWrapper">
<div id="canvasOverlay" style="position:absolute; width:600px !important; display:block; z-index:9999">
<div id="container" class="ui-widget-content">
<div id="resizable1" class="ui-state-active">
</div>
<div id="resizable2" class="ui-state-active">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fa fa-cogs fa-fw"></span>
</div>
</div>
<div id="resizable3" class="ui-state-active">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fa fa-cogs fa-fw"></span>
</div>
</div>
<div id="resizable4" class="ui-state-active">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fa fa-cogs fa-fw"></span>
</div>
</div>
</div>
</div>
<canvas style="width: 600px; height: 300px;"></canvas>
</div>
</body>
</html>
Consider the following Fiddle: https://jsfiddle.net/Twisty/0r8v47yL/29/
JavaScript
$(function() {
$(".re-size").resizable({
grid: 50,
handles: "w",
maxHeight: 50,
minHeight: 50,
containment: "#container",
resize: function(e, ui) {
ui.position.top = 0;
ui.position.left = 0;
ui.size.height = 50;
}
});
});
I added classes to your DIV elements to make it easier to assign. First thing to know about resizing on w is that both left and width of the element will be adjusted. For example if you have:
<div id="resizable2" class="ui-state-active re-size item">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fas fa-cogs fa-fw"></span>
</div>
</div>
This being set in CSS to 150px width and 50px height, when we drag the handle over, the left will be updated to say 45px and width will be changed to 105px. From a UI perspective this is what the user is expecting the action to do, the left hand side is moved. For your project, this does not work well.
Another issue that this does not address is that widening the element becomes more difficult. You can look at the event and review mouse movement to see if the user is trying to move the mouse closer to the left edge.
More complete example: https://jsfiddle.net/Twisty/0r8v47yL/61/
HTML
<div class="scheduleWrapper">
<div id="canvasOverlay" style="position:absolute; width:600px !important; display:block; z-index:9999">
<div id="container" class="ui-widget-content">
<div id="resizable1" class="ui-state-active no-re-size item">
</div>
<div id="resizable2" class="ui-state-active re-size item">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fas fa-cogs fa-fw"></span>
</div>
</div>
<div id="resizable3" class="ui-state-active re-size item">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fas fa-cogs fa-fw"></span>
</div>
</div>
<div id="resizable4" class="ui-state-active re-size item">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fas fa-cogs fa-fw"></span>
</div>
</div>
</div>
</div>
<canvas style="width: 600px; height: 300px;"></canvas>
</div>
JavaScript
$(function() {
$(".re-size").resizable({
handles: "w",
containment: "#container",
resize: function(e, ui) {
//console.log(e);
var x = e.originalEvent.originalEvent.movementX;
ui.position.top = 0;
ui.position.left = 0;
ui.size.height = 50;
if (x < 0) {
console.log(ui.size.width + Math.abs(x));
ui.element.width(ui.size.width + 50);
} else {
ui.size.width = ui.size.width - 50;
}
}
});
});
Hope this helps.
I'm trying to run TinyMCE in Material Design Lite modal, but drop-downs for selecting Font family and font size not working:
JSFiddle example:
https://jsfiddle.net/m11q7dzj/
CSS:
.mdl-dialog{
width: 500px;
height: 500px;
}
.editable{
width: 500px;
height: 450px;
outline: 1px dotted #333;
}
HTML:
<dialog class="mdl-dialog">
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<div class="editable-parent"></div>
<div class="editable">Click to edit...</div>
</div>
</form>
</dialog>
<input id="show-dialog" type="submit" value="Open Editor" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent" />
JavaScript:
var dialog = document.querySelector('dialog');
var showDialogButton = document.querySelector('#show-dialog');
if (!dialog.showModal) {
dialogPolyfill.registerDialog(dialog);
}
showDialogButton.addEventListener('click', function () {
dialog.showModal();
tinymce.init({
selector: 'div.editable',
inline: true,
height: '480px',
max_height: 500,
fixed_toolbar_container: ".editable-parent",
fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
toolbar: 'fontselect | fontsizeselect',
menubar: false
});
});
I have added the following code and it is working:
setup: function (ed) {
ed.on('focus', function (args) {
$(dialog).on("click", ".mce-listbox", function() {
$("body > div[id^=mceu_]").appendTo(dialog);
});
});
}
https://jsfiddle.net/m11q7dzj/1/
I'm using shapeshift for drag & drop options, and one of the containers is hided inside bootstrap tab. Shapeshift is initialized there, but doesn't set items to positions till first drag of item.
JSfiddle with this bug: https://jsfiddle.net/owm6wo0r/
As you can see inside JSFiddle when you click "Tab 2" all items are on one on another. When you try to drag them they set positions.
Here is documentation of plugin: https://github.com/McPants/jquery.shapeshift/wiki/2.0-api-documentation
I tried with event "ss-rearrange" on clicking the tab, but it didn't work... Any idea how to fix it?
HTML:
<div class="dragdrop">
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>
<ul class="nav-tabs nav" role="tablist">
<li class="active">
Tab 1
</li>
<li>
Tab 2
</li>
</ul>
<div class="tab-content">
<div id="tab1" role="tabpanel" class="tab-pane active">
<p> Nothing there </p>
</div>
<div id="tab2" role="tabpanel" class="tab-pane">
<div class="dragshared">
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>
</div>
</div>
JS:
$('.nav-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
$('.dragdrop').shapeshift({
selector: "div",
enableResize: false,
align: "left",
paddingX: 0,
paddingY: 0,
gutterX: 35,
gutterY: 70,
colWidth: 190,
animated: false,
minColums: 4,
dragClone: false,
enableDrag: true,
enableCrossDrop: true
});
$('.dragshared').shapeshift({
selector: "div",
enableResize: false,
align: "left",
paddingX: 0,
paddingY: 0,
gutterX: 35,
gutterY: 70,
colWidth: 190,
animated: false,
minColums: 4,
deleteClone: true,
dragClone: true,
enableCrossDrop: false
});
My final solution is to set at the beggining bootstrap tabs on visibility: hidden/visible instead of display: block/none and only after shapeshift initialization switch again for display none/block since visibility didn't work as it should (desactivated tab was visible for a second).
I believe there is way to make it clever.
CSS
.tab-content>.tab-pane {
display: block;
visibility: hidden;
height: 0;
width: 100%;
.dragshared {
height: 0!important;
}
}
.tab-content>.active {
height: auto;
visibility: visible;
.dragshared {
height: auto;
}
}
.tab-content.initialized>.tab-pane {
display: none;
visibility: visible;
}
.tab-content.initialized>.tab-pane.active {
display: block;
}
JS
(shapeshift initialization)
$('.tab-content').addClass('initialized');
i am trying to figure out how to make draggable and scollable work simulatnoeusuly:
http://159.8.132.20/alldevice/
when u try to drag image on either side draggable action also starts, i want that area to be easily scrollable, means when i am scrolling draggble event should not be there
var $drop = $('#canvas-drop-area,#canvas-drop-area1'),
$gallery = $('#image-list li'),
$draggedImage = null,
$canvasp1old = null,
$canvasp2old = null;
$gallery.draggable({
//refreshPositions: true,
scroll: false,
start: function(e) {
$draggedImage = event.target;
$drop.css({
'display': 'block'
});
},
helper: function(e) {
return $('<img src="' + $(this).find('img').attr("src") + '" width="'+imgwidth+'">');
},
stop: function() {
$draggedImage = null;
},
revert: true
});
This might help you.
HTML
$("#draggable").draggable({
snap: true
});
$("#draggable2").draggable({
snap: ".ui-widget-header"
});
$("#draggable3").draggable({
snap: ".ui-widget-header",
snapMode: "outer"
});
$("#draggable4").draggable({
grid: [20, 20]
});
$("#draggable5").draggable({
grid: [80, 80]
});
.draggable {
width: 90px;
height: 80px;
padding: 5px;
float: left;
margin: 0 10px 10px 0;
font-size: .9em;
}
.ui-widget-header p,
.ui-widget-content p {
margin: 0;
}
#snaptarget {
height: 600px;
width: 200px;
}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<table>
<tr>
<td>
<div id="draggable" class="draggable ui-widget-content">
<p>Default (snap: true), snaps to all other draggable elements</p>
</div>
<div id="draggable2" class="draggable ui-widget-content">
<p>I only snap to the big box</p>
</div>
</td>
<td>
<div id="snaptarget" class="ui-widget-header">
<p>I'm a snap target</p>
</div>
</td>
<td>
<div id="draggable3" class="draggable ui-widget-content">
<p>I only snap to the outer edges of the big box</p>
</div>
<div id="draggable4" class="draggable ui-widget-content">
<p>I snap to a 20 x 20 grid</p>
</div>
<div id="draggable5" class="draggable ui-widget-content">
<p>I snap to a 80 x 80 grid</p>
</div>
</td>
</tr>
</table>
javascript
$(function() {
$("#draggable").draggable({
snap: true
});
$("#draggable2").draggable({
snap: ".ui-widget-header"
});
$("#draggable3").draggable({
snap: ".ui-widget-header",
snapMode: "outer"
});
$("#draggable4").draggable({
grid: [20, 20]
});
$("#draggable5").draggable({
grid: [80, 80]
});
});
For Mobile you can use jquery ui touch punch it will help you and best solution is here
as per my knowledge jquery and jquery-ui is working awesome on 159.8.132.20/alldevice/.
I am using this code to place a link for each label:
chart2.addAxis("y", {
vertical: true,
fixLower: "none",
fixUpper: "none",
natural: true,
majorTick: { length: 3 },
labels: [{value: 1, text: Link text }, ...]
});
Apparently this code didn't work. So, i am thinking:
I have this html in the rendered chart:
<div id="chart2" style="height: 100px;">
<div style="margin: 0px; padding: 0px; ...">
<div style="margin: 0px; padding: 0px; ... ">Link text</div> //label
</div>
...
And this change should result:
Link text
to something like:
Link text
How can i do this change with jquery or dojo ? Basically add before and after the text.