I'm in traineeship in a company and I need to used the program of another trainee who programmed it in 2012. So I have done some update but I have a problem :
In the report of this trainee the web page was a column on the left with a "menu" for request, at the bottom a field for the result of request, and on all the remaining space a map with different information. For the moment the problem it's the map in region 'center' it's like in region 'top'.
Header :
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dijit/themes/soria/soria.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojox/grid/resources/tundraGrid.css">
<script src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: false" ></script>
<script>
require(["dojo/ready", "dojo/parser", "dojo/_base/xhr", "dojo/dom", "dojo/domReady!", "dijit/layout/BorderContainer", "dijit/layout/TabContainer", "dijit/layout/ContentPane", "dojox/grid/DataGrid", "dojo/store/Memory", "dojo/data/ObjectStore", "dijit/form/Select", "dijit/form/Button", "dijit/form/RadioButton", "dijit/ColorPalette", "dijit/form/TextBox", "dijit/form/SimpleTextarea", "dijit/form/MultiSelect", "dijit/TooltipDialog", "dijit/form/DropDownButton", "dojox/gfx", "dijit/TitlePane", "dijit/form/NumberSpinner", "dojo/store/Memory", "dojo/dom-style", "dojo/query", "dojo/NodeList-dom"]);
</script>
<script src="/static/javascript/queries.js" type="text/javascript"></script>
<script src="/static/javascript/map.js" type="text/javascript"></script>
<script src="/static/javascript/utils.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?v=3&key=KEY"></script>
<link rel="stylesheet" type="text/css" href="/static/css/home.css" />
<link rel="stylesheet" type="text/css" href="/static/css/map.css" />
Body :
<body class="soria" >
<div id="mainLayout"
data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design: 'sidebar'">
<div id="mapLayout" data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'center', splitter: true"
style="height:500px;">
<div id="map"></div>
</div>
<div id="leftLayout"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'left', splitter: true, minSize: 330"
style="min-width: 330px">
<p>
{% include "Home/forms/formQueries.html" %}
</p>
<p id="messageLimitNumberLines" style="display: none">Le nombre de paramètres est limité à cinq. Vous ne pouvez pas en ajouter d'autres.</p>
</div>
<div id="datagridLayout" data-dojo-type="dijit/layout/ContentPane" style="min-height: 300px" data-dojo-props="region: 'bottom', splitter: true, minSize: 300">
<div id="datagrid" data-dojo-type="dojox/rid/DataGrid">
</div>
</div>
</div>
</body>
That is what I want
That is what I have
I don't know if you need another code so tell me.
If you want a pane on the left, use 'leading' for the value of region
<div id="leftLayout"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'leading', splitter: true, minSize: 330"
style="min-width: 330px">
Then in the canter region you would place a separate border container there the map is in center region and datagrid layout in bottom region.
Regions
Each child element must have an attribute “region” which
indicates where it should be positioned (most names are self
explanatory):
top
bottom
right
left
center
leading: used have flexible layout in
left-to-right/right-to-left environments. In ltr, it will be
equivalent to left, in rtl equivalent to right.
trailing: opposite of
‘leading’: right in ltr, left in rtl There can be multiple widgets for
each region, in which case their order (i.e. closeness to the edge of
the LayoutContainer) is controlled by their relative layoutPriority
settings.
There must always be one region marked ‘center’.
Source: https://dojotoolkit.org/reference-guide/1.10/dijit/layout/LayoutContainer.html#dijit-layout-layoutcontainer
Related
<Link to={`/item/${p.id}`} style={{ textDecoration: 'none' }}>
<div className="itemContainer">
<div className="itemContainer__image" style={{ backgroundImage: `url(${p.pictureUrl})`}}></div>
<div className="itemContainer__info">
<span className="item__price">{formatMoney(p.price)}</span>
<h2 className="item__name">{p.title}</h2>
<ItemCount initial={1} stock={5} onAdd={onAdd} />
</div>
</div>
</Link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
I would like to be able to click on the buttons that I have inside the ItemCount component but keeping the Link on the card at the same time.
I'm trying to create edit the font and the size of my pie-chart so I can put it on a TV.
I tried to increase my chart's width and Height, but it doesn't affect the labels or values or the legend. I googled bootstrap documentation but I can't find anything about labels font-size.
<!-- Mainly scripts -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!-- Custom and plugin javascript -->
<script src="js/inspinia.js"></script>
<script src="js/plugins/pace/pace.min.js"></script>
<!-- d3 and c3 charts -->
<script src="js/plugins/d3/d3.min.js"></script>
<script src="js/plugins/c3/c3.min.js"></script>
<div class="col-lg-6">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Radar Chart Example</h5>
</div>
<div class="ibox-content">
<div>
<div id="pie" style="Height:2000px;"></div>
</div>
</div>
</div>
</div>
c3.generate({
bindto: '#pie',
data: {
columns: [
['data1', 30],
['data2', 120]
],
colors: {
data1: '#1ab394',
data2: '#BABABA'
},
type: 'pie'
}
});
I would like to see the numbers 30 and 120 and the labels data1 & data2 when I'm unzooming my browser to 40% (approximately the expected size to be visible on the TV)
You can inspect elements using your preferred browsers debug tools to find out how to directly target an element. This is useful for 3rd party libraries, but that's beyond this question.
c3 uses <svg> tags to generate their charts apparently. Therefore, most of the information on the chart is captured inside a <text> element, as far as I have noticed. You were simply changing the height of the div itself, not the content within.
The quick answer is to target all of those <text> selectors and change the font-size like the following:
c3.generate({
bindto: '#pie',
data: {
columns: [
['data1', 30],
['data2', 120]
],
colors: {
data1: '#1ab394',
data2: '#BABABA'
},
type: 'pie'
}
});
#pie {
height: 300px;
}
#pie text
{
font-size: 2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- d3 and c3 charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.min.js"></script>
<div class="col-lg-6">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Radar Chart Example</h5>
</div>
<div class="ibox-content">
<div>
<div id="pie"></div>
</div>
</div>
</div>
</div>
I want to select a tab on clicking a link. I tried using different online available solutions (including $('ul.tabs').tabs('select_tab', 'tab_id');) but none seems to be work with current materialize version. The official documentation for materialize states to do the initialization using var instance = M.Tabs.init(el, options); instance.select('tab_id'); but none of the methods seem to work correctly with current version or has been clearly specified w.r.t Materialize Tabs.
Any help is greatly appreciated. Below is the code snippet along with jsfiddle link,
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<!--
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
-->
<script>
$(document).ready(function() {
$('ul.tabs').tabs();
$("#btnContinue").click(function() {
$('ul.tabs').tabs('select_tab', 'test2');
});
});
/* var instance = new M.Tabs.init(el, options);
function check_active(){
var instance = M.Tabs.getInstance(elem);
instance.select('test2');
} */
</script>
</head>
<body>
<div class="col s12">
<ul class="tabs">
<li class="tab col s4">tab1
</li>
<li class="tab col s4">tab2
</li>
<li class="tab col s4">tab3
</li>
</ul>
</div>
<div id='test1' class="col s12">
<!--<a id="btnContinue" href='#test2' onclick="check_active();">continue</a>-->
<a id="btnContinue" href='#test2'>continue</a>
</div>
<div id='test2' class="col s12"></div>
</body>
</html>
JSFiddle Link for the same: https://jsfiddle.net/chirag_cyber/6evpqcfb/6/
You should change
$('ul.tabs').tabs('select_tab', 'test2');
to :
$('ul.tabs').tabs('select', 'test2');
select shows tab content that corresponds to the tab with the id. JSFiddle
I have a list of paper-card and I want to know how to use the fancybox library to preview the card content of my paper-card.
Here is an example of paper-card:
<paper-card heading="Emmental"
image="http://placehold.it/350x150/FFC107/000000" alt="Emmental">
<div class="card-content">
Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one
of the cheeses of Switzerland and is sometimes known as Swiss
cheese.
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
You can use fancybox with Polymer by passing the <paper-card> reference (via this.shadowRoot.querySelector() to jQuery:
firstUpdated() { // LitElement callback: element has rendered
const card = this.shadowRoot.querySelector('.card');
$(card).fancybox();
}
<html>
<head>
<meta charset="utf-8">
<!-- Polyfills only needed for Firefox and Edge. -->
<script src="https://unpkg.com/#webcomponents/webcomponentsjs#latest/webcomponents-loader.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.js"></script>
</head>
<body>
<!-- Works only on browsers that support Javascript modules like
Chrome, Safari, Firefox 60, Edge 17 -->
<script type="module">
import {LitElement, html} from 'https://unpkg.com/#polymer/lit-element/lit-element.js?module';
import 'https://unpkg.com/#polymer/paper-card/paper-card.js?module';
import 'https://unpkg.com/#polymer/paper-button/paper-button.js?module';
class MyElement extends LitElement {
render() {
return html`
<style>
.card {
width: 300px;
}
</style>
<paper-card class="card"
data-fancybox
data-animation-effect="false"
href="https://placehold.it/350x150/FFC107/000000"
heading="Emmental"
image="https://placehold.it/350x150/FFC107/000000" alt="Emmental">
<div class="card-content">
Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one
of the cheeses of Switzerland and is sometimes known as Swiss
cheese.
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>`;
}
firstUpdated() {
const card = this.shadowRoot.querySelector('.card');
$(card).fancybox();
}
}
customElements.define('my-element', MyElement);
</script>
<my-element></my-element>
</body>
</html>
I have created a sample web application using jQuery Mobile.
I have created two <div>s; one contains href and another contains the content. When I click on HREF It showing jquery-mobile script Error as like below:
Error Loading Page
Can anybody see what might be causing this error?
<html> <head runat="server"> <title>How to expand collapse div layer using jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-.0a3.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-.0a3.min.css" />
<script language="javascript">
$(document).ready(function () {
var $pages = $('#pages > *').hide();
$('#content a').click(function() {
$pages.hide();
$($(this).attr('href') ).show();
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" class='header_align'>Bristol-Myers Squibb</div>
<h2>
How to expand collapse div layer using jQuery</h2>
<div id="toggle">
<div id="heading">Heading</div>
<div id="content">
<ul>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</div>
</div>
<div id="pages">
<div id="page-1">Page 1 Content</div>
<div id="page-2">Page 2 Content</div>
<div id="page-3">Page 3 Content</div>
</div>
</div>
</body>
</html>
The jQuery mobile default behavior of a link with a named anchor is to jump to a page (data-role="page") with the respective id. But there is no such page for page-1, page-2 or page-3 so the error occurs.
Try this
$(document).ready(function () {
var $pages = $('#pages > *').hide();
$('#content a').click(function() {
$pages.hide();
$($(this).attr('href') ).show();
return false;
});
});