I have already tried but could not find any answer to my question.
I want to use a semantic modal,the first, this!
my imports are:
<link rel="stylesheet" type="text/css" href="moduli/semantic/dist/semantic.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="moduli/semantic/dist/components/modal.css">
<link rel="stylesheet" type="text/css" href="moduli/semantic/dist/components/modal.min.css">
<script type="text/javascript" src="moduli/semantic/dist/semantic.min.js"> </script>
<script type="text/javascript" src="moduli/semantic/dist/main.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/jquery.min.js"> </script>
<script type="text/javascript" src="js/function.js"></script>
<script type="text/javascript" src="moduli/jquery-ui/jquery-ui.js"></script>
<script src="moduli/semantic/dist/components/modal.min.js"></script>
Error on console :
modal.min.js:11 Uncaught TypeError: O.transition is not a function
modal.min.js:11 Uncaught TypeError: q.dimmer is not a function
when I click on a button, I call the follow js function:
$('.ui.modal')
.modal({onShow: function(){}})
.modal('show');
I think that your error simply comes from the order of your <script> imports, since semantic.min.js depends on jQuery you must include jQuery before semantic.min.js
So use:
...
<script type="text/javascript" src="moduli/semantic/dist/jquery.min.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/semantic.min.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/main.js"></script>
...
Instead of:
...
<script type="text/javascript" src="moduli/semantic/dist/semantic.min.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/main.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/jquery.min.js"></script>
...
You can see the working sample there:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<input type="button" value="showModal" onClick="$('.ui.modal').modal('show');"></input>
<div class="ui modal">
<div class="header">Header</div>
<div class="content">
<p>some Content</p>
<p></p>
<p></p>
</div>
</div>
Hope it helps,
Related
I am trying to use Cluster Group plug-in for Leaflet, but I keep getting the "Uncaught TypeError: L.markerClusterGroup is not a function"
here is my simplified HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Brewser</title>
<link rel="stylesheet" type="text/css" href="brewser.css">
<link rel="stylesheet" type="text/css" href="leaflet.css"/>
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900,900i" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="dist/MarkerCluster.css"/>
<link rel="stylesheet" type="text/css" href="dist/MarkerCluster.Default.css"/>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>
<script src="leaflet.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="brewser.js" type="text/javascript"></script>
<script src="dist/leaflet.markercluster-src.js"></script>
</body>
</html>
Here is my JS:
var myMap = L.map('map').setView([49.197060, 16.611837], 13);
var markers = L.markerClusterGroup();
Any idea what could be wrong?
plug-in files I am using are those in dist directory:
leaflet.markercluster-src.js
leaflet.markercluster.js
leaflet.markercluster-src.js.map
leaflet.markercluster.js.map
MarkerCluster.css
MarkerCluster.Default.css
Your imports are out of order:
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>
<script src="leaflet.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="brewser.js" type="text/javascript"></script>
<script src="dist/leaflet.markercluster-src.js"></script>
should be:
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>
<script src="leaflet.js" type="text/javascript"></script>
<!-- Notice where markercluster import is above app.js -->
<script src="dist/leaflet.markercluster-src.js"></script>
<script src="app.js" type="text/javascript"></script>
<script src="brewser.js" type="text/javascript"></script>
I have this template as my sinatra layout.erb
<!DOCTYPE html>
<html>
<head>
<title>Invoicer</title>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/static/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-default">
...
</nav>
<div class="container">
<%= yield %>
</div>
<%#<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>%>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="/static/js/bootstrap.min.js"/>
<script src="/static/js/jobs/new.js" />
</body>
</html>
and this small javascript call
console.log("running")
$('#datepicker').datepicker()
the server gets a 200 call to the js file but nothing will print to the console or execute.
Always use <script></script>.
<script src="..." /> is not a valid tag. When the HTML is parsed, it thinks that <script src="/static/js/jobs/new.js" /> is in the body of the <script src="/static/js/bootstrap.min.js"/> tag like this:
...
<script src="/static/js/bootstrap.min.js">
<script src="/static/js/jobs/new.js">
...
From MDN <script> documentation:
Tag omission
None, both the starting and ending tag are mandatory.
I'm fairly new to Angular.js (or to web programming in general). I got a pretty basic problem - I'd like to include a date picker in my application. For this purpose, I try to set up the bootstrap datepicker:
https://bootstrap-datepicker.readthedocs.org/en/latest/#
I have the jQuery and Bootstrap dependencies included:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/blog.css">
<script src="angular-datepicker.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/blogController.js"></script>
I don't really understand, how am I supposed to use it from now on? I can include some input field in my HTML template, but how exactly do I call the script that calls the date picker widget?
Add an id or a class to your input field and use that as a selector once you call the datepicker.
In your HTML:
<input type="text" class="datepicker">
In your JS:
$('.datepicker').datepicker();
full code just test
<!DOCTYPE HTML>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<div class="well">
<div id="datetimepicker4" class="input-append">
<input data-format="yyyy-MM-dd" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i>
</span>
</div>
</div>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({pickTime: false});
});
</script>
</body>
</html>
<script src="#routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/facebox.js")" type="text/javascript"></script>
<link href="#routes.Assets.at("stylesheets/facebox.css")" media="screen" rel="stylesheet" type="text/css"/>
<script>
</script>
<body>
text
<div id="info" style="display:none;">
hello world
</div>
</body>
Facebox and div tag are not showing.I am beginner of ajax so please help me .
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
I downloaded the timepicker from here. After cutting a lot of code I came to this simple example:
<html>
<head>
<title>jQuery.timepickr.js</title>
<link rel="Stylesheet" media="screen" href="reset.css" />
<link rel="Stylesheet" media="screen" href="styles.css" />
<link rel="Stylesheet" media="screen" href="../dist/themes/default/ui.core.css" />
<link rel="Stylesheet" media="screen" href="../src/css/ui.timepickr.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js"></script>
<script type="text/javascript" src="jquery.utils.js"></script>
<script type="text/javascript" src="jquery.strings.js"></script>
<script type="text/javascript" src="jquery.anchorHandler.js"></script>
<script type="text/javascript" src="jquery.ui.all.js"></script>
<script type="text/javascript" src="../src/ui.timepickr.js"></script>
<script type="text/javascript">
$(function(){
$('#timepicker').timepickr().focus();
$('#timepicker').next().find('ol').show().find('li:eq(2)').mouseover();
});
</script>
</head>
<body id="themeroller">
<div id="splash">
<div id="demo">
<div id="d-demo-wrapper-1" class="demo-wrapper">
<input id="timepicker" type="text" value="02:30" class="demo">
</div>
</div>
</div>
</body>
</html>
I noticed that when I try to manually set the time from the keyboard the numbers are changed automatically then the mouse is out of the input field. I noticed that even into the original example I cannot set the numbers manually. How I can solve this problem?
You can set the default value, by using val attribute in timepickr
$("#timepickr").timepickr({
convention: 12,
format12: "{h:02.d}:{m:02.d} {z:s}",
rangeMin: $.range(0, 60),
val: "02:00 am" //set your default time here
});