My Question is can we use materialIUI without React? if yes then is it CDN or any other way
<script src="https://unpkg.com/react-dom#16.4.2/umd/react-dom.production.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/#material-ui/core#3.0.1/umd/material-ui.production.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone#latest/babel.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
You probably could get Material UI working without React/JSX (to some minimal extent), but it's going to be a very challenging process. It would not be a matter of importing Material UI from a CDN and adding class names to your HTML elements.
If you need a Material Design themed framework, Materialize is an open source alternative written in Vanilla JS/CSS/HTML (no React needed).
Related
I used ag-grid a few times before and each time it works with no probs, but now for no reason the css is not working I use these links for css :
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-themealpine.css">
I didn't get any error on my page and the links are valid.
The css file was loaded on my page and I can see it using F12.
What should I check next ? how can I solve it ?
You are missing the - between theme and alpine in ag-themealpine.cssin the second link tag.
Replace that link tag with the following:
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css" />
See this implemented in the following plunkr.
Is there a ready-made maidenhead grid overlay for Leaflet? If not, how to create it?
There isn't one, so I created my own: Leaflet.Maidenhead.
So with a bit of HTML like
<link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.5.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.maidenhead#1.0.0/src/maidenhead.js"></script>
and then a bit of javascript like
L.maidenhead({precision: 6}).addTo(map)
you should be able to have something that looks like
The leaflet map binds to the two geojson files just fine locally, but it does not render when I upload the document to github. The leaflet base map loads fine.
I tried the solution listed here: Leaflet with GitHub Pages - not rendering
But it had no apparent effect.
Thanks!
I figured it out - the leaflet scripts were in HTTPS, but the jquery was not. I updated it and it works great!
Before:
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
After:
<link rel="stylesheet" href="https://npmcdn.com/leaflet#1.0.0-rc.2/dist/leaflet.css" />
<script src="https://npmcdn.com/leaflet#1.0.0-rc.2/dist/leaflet.js"></script>
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Ionic slide box images only rewinding by default.But I want Slider to be cyclical. How to solve it.
I tried to implement jquery slider instead of Ionic slide box . But its not worked properly.
I tried this files to add a header on my index page
<script src="lib/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').nivoSlider();
});
</script>
<link rel="stylesheet" href="css/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider" ng-repeat="club in slider">
<img ng-src="{{club.url}}" style='width:100% !important;' >
</div>
</div>
I had add this code on my controller it working fine for me.
$ionicSlideBoxDelegate.update();
$ionicSlideBoxDelegate.loop(true);
Few suggestions if you want to use jQuery with ionic/angularJS:
Load your jquery before ionic js and angular js libraries loads.
Call jQuery from your controllers for better control over application flow. eg. $('#slider').nivoSlider(); call it from your controller and put your html in view template of the controller.
It would be great if your can elaborate on the kind of slider you want in your app (I couldn't understand what you mean by cyclical).
I'm hoping to be able to load an ExtJS chart inside Ext.Net(coolite) pages.
I've copied the pie chart from the ExtJS samples and have put it in an test aspx document to see it work:
heres is my pie.aspx
<html>
<head>
<title>Pie Chart</title>
<script type="text/javascript" src="ExtJs4/ext-all.js" />
<script type="text/javascript">
Ext.Loader.setConfig({
enabled: true,
disableCaching: true,
paths: { 'Ext': "/app/" }
});
</script>
<link rel="stylesheet" type="text/css" href="ExtJs4/resources/CSS/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ExtJs4/examples/shared/example.css" />
<script type="text/javascript" src="ExtJs4/examples/example-data.js"></script>
<script type="text/javascript" src="app/pie.js"></script>
<script type="text/javascript" src="ExtJs4/bootstrap.js"></script>
</head>
<body id="docbody">
</body>
when I try and load it from an Ext.Window I dont see anything just an empty popup. if I go to the url directly i dotn see anything either
Here's the code I'm using to attempt to load the chart (i put it inside my existing coolite code):
<ext:Window
Title='!'
runat="server"
AutoDataBind="true"
Modal="true"
ID="ChartWindow"
Width="900"
Height="670"
Hidden="false">
<AutoLoad Url="pie.aspx" Mode="IFrame" />
</ext:Window>
Am I going about this the wrong way in trying to using the Ext.Net dll with the new ExtJS libraries? Is there another way I could go about accomplishing the same thing (ie: have a server-side window to load the ExtJS 4 charts)?
Thanks for any input.
solved!!
not sure what was the problem,my code is correct,maybe only the cache