Hi I'm looking for some help.
I'm using FlatLab to build a "draggable and sortable" dashboard. In the panels I'm adding in charts using Highcharts. I have this working well with the option to drag the portlets around the screen into the order I wish.
The Issue:
The charts uses a zoom function, so when the mouse is dragged across the chart it moves the panel instead of allowing the zoom function!
Here is the HTML code:
<div class="row-fluid" id="draggable_portlets">
<div class="sortable">
<div class="panel inline-block span-4">
<header class="panel-heading">Utilisation from October 1st
<span class="tools pull-right">
</span>
</header>
<div class="panel-body">
<div id="chart1" style="min-width: 180px; height: '100%'; margin: 0 auto"></div>
</div>
</div>
</div>
</div>
In the javascript I've added in the following along side another similar line of code:
$(".panel-body").disableSelection();
similar code in the same js file - $(".column").disableSelection();
It feels like I've don the right thing but its not disabling selection on panel-body
Any help is as always appreciated.
Thanks
Rob
I don't know if it will reactivate the zoom functionality, but I suspect it will. You should be able to copy and paste this into console to see if it works. It sets the cancel option of sortable on the chart.
$("#draggable_portlets").sortable("option", "cancel", "#chart1");
Related
I've built a standard layout with a sidebar using Bootstrap's grid system (EDIT: I'm using Bootstrap 4 but could still switch). It looks like this:
<div class="row">
<div class="col-md-3">
...
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>
</div>
</div>
On mobile, the red area would be above the green one. I need to be able to switch between them in a way that is more convenient than scrolling, for example a switch button:
Also note the different oder of elements in the green area.
Is there a smart way to do this? Or do I have to alter the dom with JavaScript? Thanks in advance :)
You can use jQuery to toggle one of the BS4 flexbox utility classes. For example, apply the flex-last on the first (col-md-3) column.
To switch the order on mobile using a button, toggle the flex-last class...
$('#btnToggle').click(function(){
$('.col-md-3').toggleClass('flex-last');
})
EDIT: To show only one at a time (switch the visibility of the 2 divs using a button) toggle the hidden-sm-down class instead...
$('#btnToggle').click(function(){
$('.col-md-3, .col-md-9').toggleClass('hidden-sm-down');
})
Demo
In Bootstrap 4, column order can be toggled using CSS only, but this switches the cols based on screen width, and therefore is not triggered by the button.
<div class="row">
<div class="col-md-3 flex-last flex-md-unordered">
...
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>
</div>
</div>
Update
As of Bootstrap 4 Beta 3, the ordering classes are named order-*, such as order-1, order-md-2, etc..
Bootstrap 4 uses Flexbox, which means you could utilise the order in which things are displayed.
As usual, you can specify how it's displayed on different viewports using classes like order-last and order-sm-unordered.
flexbox/order documentation
I'm working on creating a accordion that collapses/opens when the user hover's their mouse over the title of the accordion. The code I have so far works to some degree. The problem is that the accordion always opens when the mouse enters but is sometimes really inconsistent in closing (especially if the user moves their mouse very fast).
Here is a link to the website http://infotree.co.uk/ (the accordion is on the left) to visualize the problem - move mouse fast over the left accordion.
And here is my code for just one of the accordion tabs in the html doc:
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title accordionTitles1" id="headOne1"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1">Search</a></h4>
</div>
<div id="collapseOne1" class="panel-collapse collapse in">
<div class="panel-body">Search to find specific content to learn about.</div>
</div>
</div>
And the java script to go with it:
$(document).ready(function() {
$("#headOne1").hover(function() {
$('#collapseOne1').collapse('show');
}, function() {
$('#collapseOne1').collapse('hide');
}
);
});
Going through the previous accordion question you mentioned (Bootstrap Collapse accordion on hover) I found one person's answer relating to the problem I was having which made me realize the exact cause.
The problem is to do with the animation timing, so if you leave the collapse area BEFORE the collapse animation is finish jquery never runs the collapse function. The solution is to use queue and dequeue methods to make sure all the functions run properly and in the correct order.
Here is the HTML code for one tab:
<div class="panel panel-default">
Search
<div id="sidebarContent1" class="panel-collapse collapse">
<div class="panel-body">Search to find specific content to learn about.</div>
</div>
</div>
And the java script for the respective tab:
$(document).ready(function() {
var button1 = $("#sidebarButton1");
var content1 = $("#sidebarContent1");
button1.mouseenter(function() {
content1.queue('collapsequeue',function(){
content1.collapse('show');
});
if (!content1.hasClass("collapsing")) {
content1.dequeue("collapsequeue");
}
});
button1.mouseleave(function() {
content1.queue('collapsequeue',function(){
content1.collapse('hide');
});
if (!content1.hasClass("collapsing")) {
content1.dequeue("collapsequeue");
}
});
content1.on("shown.bs.collapse hidden.bs.collapse", function(){
content1.dequeue("collapsequeue");
});
});
The .queue() names a queue AS WELL as adds functions to a queue, .dequeue() simply RUNS the queue. The code isn't completely perfect as it goes against DRY coding (much like the response I found in Bootstrap Collapse accordion on hover) - this is because I am not able to use the href tag in a element since I need that so that I can link to different webpages rather than the div element containing the hidden content.
Any idea on making the code shorter/efficient? I have to repeat the JS for every tab and I feel like there is probably a better way to do this that what I have come up with.
This question has been answered before: Bootstrap Collapse accordion on hover
If you don't want/need the fancy animation, you could also use pure CSS:
https://jsfiddle.net/vvu5ozh1/4/
With CSS transitions you could even do the animation, but that would be a bit more complicated.
<div class="panel">
<div class="title">
Title1
</div>
<div class="content">
COntent1
</div>
</div>
<div class="panel">
<div class="title">
Title2
</div>
<div class="content">
COntent2
</div>
</div>
.panel:hover .content {
display:block;
}
.content {
display: none;
}
I am currently learning Bootstrap. I came across a piece of code where I was trying to create a bunch of rows to create a kind of table. But when I ran the code on the browser, the margins of the rows start of behind the screen. Look at the very simple piece of 'Hello World' code below in JS Fiddle.
<div class="row">Hello World!</div>
http://jsfiddle.net/x8y50sas/
Why is the text starting from behind the margins? An detailed explanation could help?
You need to include a cell inside the row:
<div class="container">
<div class="row">
<div class="col-xs-12">Hello World!</div>
</div>
</div>
The reason for the offset is that rows in bootstrap have a negative margin. They should always contain a cell which adds additional padding.
More info in the docs: http://getbootstrap.com/css/#grid
Because to be able to use the grid system you need to wrap your element inside class container. Read this article: http://getbootstrap.com/css/#overview-container
Example:
<div class="container">
<div class="row">Hello World!</div>
</div>
You must enclose the block "row" in the block "container" as:
<div class="container">
<div class="row">
<!-- Example: 3 Cell -->
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
</div>
</div>
So I have 2 wrappers one that has a highchart and the other one has a leaflet map. Im using buttons to toggle the divs in and out. The chart div works fine but the map one I have to click the the button twice to get it to render. I tried to put a setTimer() to see if would help with the transition but nothing. I have a fiddle that illustrates what Im trying to do but its having an issue with the map here. My question is why it wont render right away? and What can I do to make it render right away? Thanks
You are rendering the chart in container and the container has both the map and chart so after rendering the chart your map div removed from container so it creates problem.
Note: you have given container id to div twice
Replace your HTML like
<div id="maincontainer">
<div id="chart-wrapper" style="display:block; overflow: auto;">
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>
</div>
<div id="map-wrapper" style="overflow: auto; display: none;">
<div id="map-container" style="height: 400px; "></div>
</div>
</div>
<button id="toggle-btn">Map</button>
<button id="run-btn">run</button>
Fiddle http://jsfiddle.net/QBYPH/2/
I've got a page with a three column layout (main nav on the left, center console in the middle and specific page options/navigation on the right). Until now I've been using jQuery UI's Tabs widget in the center console area for one of my pages.
What I'd like to do is separate the tabs (putting them in the right hand column) whilst maintaining the contents position in the middle. Like this:
<div id="center_console">
<div class="tabs_container" id="pets"></div>
<div class="tabs_container" id="family"></div>
<div class="tabs_container" id="bio"></div>
</div>
<div id="right_options">
<div id="tabs">
<ul>
<li>Pets</li>
<li>Family</li>
<li>Bio</li>
</ul>
</div>
</div>
So far however I've been unable to find a way to use jQuery UI to do this (it seems to require that tabs and content be placed within the same container).
I think what you need to do is use the 'select' method
So you would bind your links to the tab you want to click
<div id="center_console">
<div class="tabs_container" id="pets"></div>
<div class="tabs_container" id="family"></div>
<div class="tabs_container" id="bio"></div>
</div>
<div id="right_options">
<div id="tabs">
<ul>
<li id="pets">Pets</li>
<li id="family">Family</li>
<li id="bio">Bio</li>
</ul>
</div>
</div>
$(function(){
//set-up your tabs as normal first
$('#bio').click(function(){
$('#center_console').tabs("select", '#bio');
});
});
You may need to have some links set-up as tabs in the center_console as well, but you could use CSS to hide these. I'm not 100% sure on how tabs() works under the hood. I managed to get this working by hacking around the jqueryui demo with firebug, but for some reason I couldn't get the tabs to work in jsfiddle. If you can set-up an example in that I'm happy to edit it to show you what I did
Thanks to a useful comment below, I realised that I'm not following best practice here. I've set-up a fiddle that should achive what you want ( all be it you will need to style it correctly). It can be found here http://jsfiddle.net/GKNC9/1/
thanks