What is I am trying to do ?
var app = angular.module('plunker', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.tags = [
{ "name": "Brazil", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Brazil.png" },
{ "name": "Italy", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Italy.png" },
{ "name": "Spain", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Spain.png" },
{ "name": "Germany", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Germany.png" },
];
});
.tag-template div:first-child {
float: left;
}
.tag-template div:first-child img {
width: 24px;
height: 24px;
vertical-align: middle;
}
.tag-template div:last-child {
float: left;
margin-left: 5px;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="displayProperty" ng-init="displayProperty='name'"/>
<tags-input ng-model="tags"
display-property="{{displayProperty}}"
placeholder="Add a country"
template="my-custom-template">
</tags-input>
{{displayProperty}}
<script type="text/ng-template" id="my-custom-template">
<div class="tag-template">
<div>
<img ng-src="{{data.flag}}" ng-if="data.flag"/>
</div>
<div>
<span>{{$getDisplayText()}}</span>
<a class="remove-button" ng-click="$removeTag()">✖</a>
</div>
</div>
</script>
</body>
</html>
I am trying to bind display-property of ng-tagsinput to displayProperty model. It is working only first time. If I change the displayProperty, I am not seeing updates. How can I bind display-property so that whenever it changes, ng-tags-input to consider the change.
Another question -
How to use "text" attribute in ngTagsInput ?
var app = angular.module('plunker', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.tags = [
{ "name": "Brazil", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Brazil.png" },
{ "name": "Italy", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Italy.png" },
{ "name": "Spain", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Spain.png" },
{ "name": "Germany", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Germany.png" },
];
});
.tag-template div:first-child {
float: left;
}
.tag-template div:first-child img {
width: 24px;
height: 24px;
vertical-align: middle;
}
.tag-template div:last-child {
float: left;
margin-left: 5px;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="displayProperty" ng-init="displayProperty='name'"/>
<tags-input ng-model="tags"
key-property="name"
display-property="flag"
placeholder="Add a country"
template="my-custom-template">
</tags-input>
{{displayProperty}}
<script type="text/ng-template" id="my-custom-template">
<div class="tag-template">
<div>
<img ng-src="{{data.flag}}" ng-if="data.flag"/>
</div>
<div>
<span>{{$getDisplayText()}}</span>
<a class="remove-button" ng-click="$removeTag()">✖</a>
</div>
</div>
</script>
</body>
</html>
Related
I have installed Mathjax.2.7.5 and arabic-Mathjax from https://github.com/OmarIthawi/arabic-mathjax
I use them locally without server, without Internet-connection
i have modified the example "sample-signals.html" to get some arabic equation:
Arabic-Mathjax1
my code is:
!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
| This example shows how to use MathJax's signal mechanism to find out
| about what MathJax is doing, and to hook into various events as they
| occur.
-->
<link href='Amiri' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="D:/4-11-2019/MathJax-2.7.5/arabic/dist/arabic.css">
<script type="text/x-mathjax-config">
// Configure MathJax
//
MathJax.Hub.Config({
jax: ["input/TeX", "output/HTML-CSS"],
extensions: ["tex2jax.js", "D:/4-11-2019/MathJax-2.7.5/arabic/dist/unpacked/arabic.js"],
TeX: {
extensions: ["AMSmath.js", "AMSsymbols.js", "autoload-all.js"]
},
'HTML-CSS': {
undefinedFamily: 'Amiri'
},
tex2jax: {
inlineMath: [
['$', '$'],
["\\(", "\\)"]
],
processEscapes: true
},
});
MathJax.Hub.Register.LoadHook("[MathJax]/extensions/TeX/noUndefined.js",
function () {MathJax.Hub.Startup.signal.Post("*** noUndefined Loaded ***")});
MathJax.Hub.Register.LoadHook("[MathJax]/extensions/TeX/AMSmath.js",
function () {MathJax.Hub.Startup.signal.Post("*** AMSmath Loaded ***")});
MathJax.Hub.Startup.signal.Post("*** In Startup Configuration code ***");
MathJax.Hub.Register.StartupHook("onLoad",function () {
Message("*** The onLoad handler has run, page is ready to process ***");
});
</script>
<!-- <script type="text/javascript" src="../MathJax.js"></script> -->
<script type="text/javascript" src="D:/4-11-2019/MathJax-2.7.5/MathJax.js"></script>
<style>
.output {
background-color: #F0F0F0;
border-top: 1px solid;
border-bottom: 1px solid;
padding: 3px 1em;
}
</style>
</head>
<body>
<p>
$$\alwaysar{x=1}$$
</p>
<p>
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>
<p>\[E = mc^2\]</p>
<p>$$\ar{x=1}$$</p>
<p>$\ar{x=1}$</p>
<p>
Messages about mathematics:
<pre id="MathMessages" class="output">
</pre>
</p>
<p>
All Messages:
<pre id="AllMessages" class="output">
</pre>
</p>
<script>
(function () {
var math = document.getElementById("MathMessages");
var all = document.getElementById("AllMessages");
window.Message = function (message) {
MathJax.HTML.addText(all,message);
MathJax.HTML.addElement(all,"br");
};
MathJax.Hub.Register.MessageHook("New Math",function (message) {
var script = MathJax.Hub.getJaxFor(message[1]).SourceElement();
MathJax.HTML.addText(math,message.join(" ")+": '"+script.text+"'");
MathJax.HTML.addElement(math,"br");
});
MathJax.Hub.Startup.signal.Interest(function (message) {Message("Startup: "+message)});
MathJax.Hub.signal.Interest(function (message) {Message("Hub: "+message)});
Message("##### events above this have already occurred #####");
})();
</script>
</body>
</html>
Can anyone help me????
I am using the org.doctales.reveal DITA Open Toolkit plugin. I understand how to use the outputclass attribute on an element in a DITA topic to transform that element to a fragment in the resulting reveal.js html file.
But what about other reveal.js attributes, such as data-autoslide? I want to apply that attribute to an element in the DITA topic so that I can control the timing of fragments displaying on the reveal.js slide. Is there a way to do this?
To be clear, I am not asking about the args.reveal.autoslide plugin parameter. I have that set to apply to all slides and fragments. Rather, I want to control the timing of individual fragments.
What I have done so far:
I have the following DITA XML topic:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE task PUBLIC "-//OASIS//DTD DITA Task//EN" "task.dtd">
<task id="t_Portal-Dashboard" xtrf="t_Portal-Dashboard">
<title>Viewing The Client Portal Dashboard</title>
<shortdesc>The dashboard provides a summary of activities.</shortdesc>
<taskbody>
<context id="context_fnf_xhv_5cb">The dashboard provides a summary of activities.</context>
<steps>
<step outputclass="fragment fade-in">
<cmd>If the dashboard is not displayed, click <uicontrol>Dashboard</uicontrol>.</cmd>
<stepresult>
<image placement="break" href="i_Portal-Dashboard-Tab-183.png" id="image_c52_1gf5_jwx" width="664px" height="190px" outputclass="fragment fade-in"/>
</stepresult>
</step>
<step outputclass="fragment fade-in">
<cmd>View the summary of information.</cmd>
<stepresult>
<image placement="break" href="i_Portal-Dashboard-Data-183.png" id="image_c52_1gs5_jwx" width="800px" height="520px" outputclass="fragment fade-in"/>
</stepresult>
</step>
</steps>
</taskbody>
</task>
The Doctales DITA-OT plugin transforms to the following HTML:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "about:legacy-compat">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="(C) Copyright 2019" />
<meta name="DC.rights.owner" content="(C) Copyright 2019" />
<meta name="DC.Type" content="concept" />
<meta name="DC.Title" content="Client Portal" />
<meta name="abstract" content="Information and configuration for activities is available from a web application portal." />
<meta name="description" content="Information and configuration for activities is available from a web application portal." />
<meta name="DC.Format" content="XHTML" />
<link rel="stylesheet" type="text/css" href="commonltr.css" />
<link rel="stylesheet" type="text/css" href="doctales.css" />
<title>Client Portal</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
<link rel="stylesheet" href="css/reveal.css" />
<link rel="stylesheet" href="css/theme/doctales.css" id="theme" />
<link href="lib/css/zenburn.css" rel="stylesheet" />
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1 class="title topictitle1" id="ariaid-title2">Viewing The Client Portal Dashboard</h1>
<div class="body taskbody">
<div class="section context" id="t_Portal-Dashboard__context_fnf_xhv_5cb">The dashboard provides a summary of activities.</div>
<ol class="ol steps">
<li class="li step stepexpand fragment fade-in">
<span class="ph cmd">If the dashboard is not displayed, click <span class="ph uicontrol">Dashboard</span>.</span>
<div class="itemgroup stepresult">
<br />
<img class="image fragment fade-in" id="t_Portal-Dashboard__image_c52_1gf5_jwx" src="i_Portal-Dashboard-Tab-183.png" width="664" height="190" />
<br />
</div>
</li>
<li class="li step stepexpand fragment fade-in">
<span class="ph cmd">View the summary of information.</span>
<div class="itemgroup stepresult">
<br />
<img class="image fragment fade-in" id="t_Portal-Dashboard__image_c52_1gs5_jwx" src="i_Portal-Dashboard-Data-183.png" width="800" height="520" />
<br />
</div>
</li>
</ol>
</div>
</section>
</div>
</div>
<script src="lib/js/head.min.js" type="text/javascript"></script>
<script src="js/reveal.js" type="text/javascript"></script>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
Reveal.initialize({
// parallaxBackgroundHorizontal: null,
// parallaxBackgroundImage: '',
// parallaxBackgroundSize: '',
// parallaxBackgroundVertical: null,
autoSlide: 3000,
autoSlideStoppable: false,
backgroundTransition: 'default',
center: true,
controls: false,
controlsLayout: 'edges',
embedded: false,
fragments: true,
height: 700,
hideAddressBar: true,
history: true,
keyboard: true,
loop: false,
margin: 0.1,
maxScale: 1.5,
minScale: 0.2,
mouseWheel: false,
overview: true,
previewLinks: false,
progress: true,
rtl: false,
slideNumber: false,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
touch: true,
transition: 'fade',
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
transitionSpeed: 'default',
viewDistance: 3,
width: 960,
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
Reveal.addEventListener( 'slidechanged', function( event ) {
zoomSection();
} );
$( document ).ready(function() {});
</script>
</body>
</html>
But I want to the plugin to read (data-autoslide) attributes I've added to the DITA topic and so transform to something like the following HTML:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "about:legacy-compat">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="(C) Copyright 2019" />
<meta name="DC.rights.owner" content="(C) Copyright 2019" />
<meta name="DC.Type" content="concept" />
<meta name="DC.Title" content="Client Portal" />
<meta name="abstract" content="Information and configuration for activities is available from a web application portal." />
<meta name="description" content="Information and configuration for activities is available from a web application portal." /> <meta name="DC.Format" content="XHTML" />
<meta name="DC.Identifier" content="concept_Client-Report-Portal" />
<link rel="stylesheet" type="text/css" href="commonltr.css" />
<link rel="stylesheet" type="text/css" href="doctales.css" />
<title>Client Portal</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
<link rel="stylesheet" href="css/reveal.css" />
<link rel="stylesheet" href="css/theme/doctales.css" id="theme" />
<link href="lib/css/zenburn.css" rel="stylesheet" />
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1 class="title topictitle1" id="ariaid-title2">Viewing The Client Portal Dashboard</h1>
<div class="body taskbody">
<div class="section context" id="t_Portal-Dashboard__context_fnf_xhv_5cb">The dashboard provides a summary of activities.</div>
<ol class="ol steps">
<li class="li step stepexpand fragment fade-in">
<span class="ph cmd">If the dashboard is not displayed, click <span class="ph uicontrol">Dashboard</span>.</span>
<div class="itemgroup stepresult">
<br />
<img class="image fragment fade-in" data-autoslide="8000" id="t_Portal-Dashboard__image_c52_1gf5_jwx" src="i_Portal-Dashboard-Tab-183.png" width="664" height="190" />
<br />
</div>
</li>
<li class="li step stepexpand fragment fade-in" data-autoslide="1000">
<span class="ph cmd">View the summary of information.</span>
<div class="itemgroup stepresult">
<br />
<img class="image fragment fade-in" id="t_Portal-Dashboard__image_c52_1gs5_jwx" src="i_Portal-Dashboard-Data-183.png" width="800" height="520" />
<br />
</div>
</li>
</ol>
</div>
</section>
</div>
</div>
<script src="lib/js/head.min.js" type="text/javascript"></script>
<script src="js/reveal.js" type="text/javascript"></script>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
Reveal.initialize({
// parallaxBackgroundHorizontal: null,
// parallaxBackgroundImage: '',
// parallaxBackgroundSize: '',
// parallaxBackgroundVertical: null,
autoSlide: 3000,
autoSlideStoppable: false,
backgroundTransition: 'default',
center: true,
controls: false,
controlsLayout: 'edges',
embedded: false,
fragments: true,
height: 700,
hideAddressBar: true,
history: true,
keyboard: true,
loop: false,
margin: 0.1,
maxScale: 1.5,
minScale: 0.2,
mouseWheel: false,
overview: true,
previewLinks: false,
progress: true,
rtl: false,
slideNumber: false,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
touch: true,
transition: 'fade',
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
transitionSpeed: 'default',
viewDistance: 3,
width: 960,
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
Reveal.addEventListener( 'slidechanged', function( event ) {
zoomSection();
} );
$( document ).ready(function() {});
</script>
</body>
</html>
welcome to Stackoverflow. You can find a list of all currently supported parameters in the documentation. If you want to request new parameters, that are supported by reveal.js but not directly through the plugin, please raise an issue on Github. The autoslide function is supported by setting the args.reveal.autoslide property as explained in the docs. You are welcome to join our Slack group for discussing anything the plugin and other things.
I have a major issue with apache cordova. This is an iOS-specific issue. I am using jQuery-mobile. The issue appears whenever one does a search on a listview control then my fixed position header, footer and search input moves down.
Here is the markup of my page.
<!DOCTYPE HTML>
<html>
<head>
<title>Contacts</title>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
<link href="css/jquery.mobile.icons.min.css" rel="stylesheet" />
<link href="css/jquery-ui.min.css" rel="stylesheet" />
</head>
<body>
<style>
#my-wrapper
{
padding-top: 81px;
background-color: rgb(250, 246, 246);
}
#my-wrapper form {
position: fixed;
left: 2%;
right :2%;
top: 35px;
width: 96%;
z-index: 2;
background-color: rgb(250, 246, 246);
border-color : rgb(120, 120, 120);
text-shadow:unset;
box-shadow:unset;
}
#ContactHeader
{
position: fixed;
top: 0px;
width: 100%;
z-index: 1;
}
</style>
<div id="employeeListPage" data-role="page" >
<div id="ContactHeader" data-role="header" style="height:32px ; ">
<a class="ui-btn-left" data-icon="arrow-l" href="#" onclick="window.location.replace('index.html');" style="vertical-align:text-top; height:8px"></a>
<h2>Contacts</h2>
</div>
<div id="my-wrapper" data-role="main">
<ul id="employeeList" data-role="listview" data-inset="true" data-filter="true" data-filter-theme="staticscroll" data-filter-placeholder="Search Contacts/Companies" ></ul>
</div>
<div data-role="footer" style="text-align:center; width: 100%;height: 25px;position:fixed;bottom: 0px;left: 0px;right: 0px;">My footer</div>
<div id="loadmoreajaxloader" style="display:none;"><center><img src="css/images/bw-loader.GIF" /></center></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/contactlist.js"></script>
</body>
</html>
I also have an event that fire when a user starts typing in the search bar
$(document).on("pagecreate", "#employeeListPage", function () {
$("#employeeList").on("filterablebeforefilter", function (e, data) {
var URL = window.localStorage.getItem("ContactsForSearch");
URL = URL + '/' + nextNo + '/' + value;
$.getJSON(URL, function (info) {
if (info.length === 0) {
nomoredata = true;
//alert('no more data to display');
$('#employeeList').append('<br>');
$('#employeeList').append('<center><h2>No Data <h2> </center>');
}
else {
$('#employeeList').append('<li style="border-top: 1px solid #0189D0;"><a data-transition="slide" href="employeedetails.html?id=' + id + '&comnum=' + comNum + '&contactNum=' + contactNumber + '"><h2>' + companyName + '</h2> <small>' + name + ' - ' + designation + '</small>' + '</a>' + '</li>');
}
});
});
});
Whenever you search from the top of the list:
If you are scrolling down and you start to type in the search bar , this happens...These screenshots were taken from xcode’s emulator , on the phone it has the same result except it has a keyboard popping up at the bottom:
This would solve the problem with scrolling headers:
if (window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
unfortunately it removes the "done" button too!!!
I am new using reveal.js.
I did not manage to reduce the space on top of my slides. Could somebody help me ?
Note : I a am using pandoc to create my slideshow from Markdown sources. This is the command line I use :
pandoc -s -f markdown+tex_math_single_backslash \
--bibliography=bibliography.bib --filter pandoc-citeproc \
--slide-level 2 --toc --mathjax -i -t revealjs -V theme:beige \
-H mysettings.css mfront.md -o mfront.html
This is generated code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="pandoc">
<meta name="author" content="Thomas Helfer" />
<meta name="dcterms.date" content="2014-01-01" />
<title>MFront User Meeting: TFEL 2.0 and beyond</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="reveal.js/css/reveal.min.css"/>
<style type="text/css">code{white-space: pre;}</style>
<style type="text/css">
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
margin: 0; padding: 0; vertical-align: baseline; border: none; }
table.sourceCode { width: 100%; line-height: 100%; }
td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
td.sourceCode { padding-left: 5px; }
code > span.kw { color: #007020; font-weight: bold; }
code > span.dt { color: #902000; }
code > span.dv { color: #40a070; }
code > span.bn { color: #40a070; }
code > span.fl { color: #40a070; }
code > span.ch { color: #4070a0; }
code > span.st { color: #4070a0; }
code > span.co { color: #60a0b0; font-style: italic; }
code > span.ot { color: #007020; }
code > span.al { color: #ff0000; font-weight: bold; }
code > span.fu { color: #06287e; }
code > span.er { color: #ff0000; font-weight: bold; }
</style>
<link rel="stylesheet" href="reveal.js/css/theme/simple.css" id="theme">
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'reveal.js/css/print/pdf.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script>
<!--[if lt IE 9]>
<script src="reveal.js/lib/js/html5shiv.js"></script>
<![endif]-->
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
<style type="text/css">
.reveal h1 { font-size: 2.5em; }
.reveal section img {
border: none;
box-shadow: none;
}
body {
background: url("images/background.svg") no-repeat fixed top left
}
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
</section><section id="logarithmic-strains---principle" class="slide level2">
<h1>Logarithmic strains - Principle</h1>
<ul>
<li class="fragment"><span class="math">\({\underline{T}}\)</span> is the dual of the logarithmic strain <span class="math">\({\underline{\epsilon}^{\mathrm{to}}}{}_{\text{log}}\)</span>
<ul>
<li class="fragment"><span class="math">\(P={\underline{T}}\,\colon\,{\underline{\epsilon}^{\mathrm{to}}}{}_{\text{log}}={\underline{S}}\,\colon\,{\underline{\epsilon}^{\mathrm{to}}}{}_{\text{GL}}\)</span></li>
</ul></li>
<li class="fragment">if the small strain behaviour is <strong>thermodynamically consistent</strong>, so does the corresponding finite strain behaviour.</li>
<li class="fragment">the behaviour is <strong>objective</strong> due to its lagrangian nature.</li>
<li class="fragment"><strong>no restriction</strong> on the small strain behaviour (initial and induced <strong>orthotropy</strong> can be handled appropriately: application to Zircaloy ?)
<ul>
<li class="fragment">much more appealing than the hypoelastic Cast3M formulation</li>
</ul></li>
<li class="fragment"><em>drawbacks:</em> the pre- and post-processing stage are non trivial and may have a significant computation costs.</li>
<li class="fragment"><span class="math">\({\underline{T}}\)</span> is the dual of the logarithmic strain <span class="math">\({\underline{\epsilon}^{\mathrm{to}}}{}_{\text{log}}\)</span>
<ul>
<li class="fragment"><span class="math">\(P={\underline{T}}\,\colon\,{\underline{\epsilon}^{\mathrm{to}}}{}_{\text{log}}={\underline{S}}\,\colon\,{\underline{\epsilon}^{\mathrm{to}}}{}_{\text{GL}}\)</span></li>
</ul></li>
<li class="fragment"><span class="math">\({\underline{T}}\)</span> is the dual of the logarithmic strain <span class="math">\({\underline{\epsilon}^{\mathrm{to}}}{}_{\text{log}}\)</span>
<ul>
<li class="fragment"><span class="math">\(P={\underline{T}}\,\colon\,{\underline{\epsilon}^{\mathrm{to}}}{}_{\text{log}}={\underline{S}}\,\colon\,{\underline{\epsilon}^{\mathrm{to}}}{}_{\text{GL}}\)</span></li>
</ul></li>
</ul>
</section></section></section>
</div>
</div>
<script src="reveal.js/lib/js/head.min.js"></script>
<script src="reveal.js/js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: 'beige', // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'reveal.js/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'reveal.js/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } },
// { src: 'reveal.js/plugin/search/search.js', async: true, condition: function() { return !!document.body.classList; }, }
// { src: 'reveal.js/plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
]});
</script>
</body>
</html>
This leads to a slide title under a significant margin and parts of the slide hidden.
reveal.js has a "height" option that can be set when you call Reveal.initialize.
With pandoc, provided you have a recent templates/default.revealjs, you can set the "height" variable:
---
author: me
title my title
height: 800
...
my presentation
I would like to open a JQuery UI dialog when a user clicks on a link. So far I have this
<script>
//to hide the dialog box on loading
$j(function() {
$j( "#dialog" ).hide();
});
$('.button').click(function(){
$('#dialog').dialog('open');
});
</script>
<div id="dialog" title="Basic dialog">
<p>Dialog box</p>
</div>
The button
But the dialog won't open by clicking the link... Everything is included well.
EDIT
<script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"></script>
<script>
var $j = jQuery.noConflict();
</script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.dialog.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.effects.core.js"></script>
Are you referencing jQuery and jQuery ui library? You can autohide when initializing:
$("#dialog").dialog({ autoOpen: false });
$('.button').click(function() {
$('#dialog').dialog('open');
});
Demo: http://jsfiddle.net/pxQ8j/
You can use this code for your purpose.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<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() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<form action="" method="post">
Name :- <input type="text" name="name" value="">
Email :-<input type="email" name="email" value="">
Submit:-<input id="dialog2" type="submit" onclick="myfuncation();" name="submit" value="save">
</form>
</div>
<button id="opener">Open Dialog</button>
<div id="dialog-message"></div>
</body>
</html>
<script type="text/javascript">
function myfuncation()
{
// Here is your ajax request to db related work.
var ajaxresponce = "Sucessfully Insert Form";
$('#dialog-message').html(ajaxresponce);
$( "#dialog-message" ).dialog();
}
</script>
Hope it helps you. Please let me know if you have any query.
Your problem is you are trying to access the dialogs open method even though you never created the dialog instance.
Just change your code to do:
$('#dialog').dialog()
If you read the docs: http://jqueryui.com/demos/dialog/, it spells that out for you, you will also see that it opens by default on the initial call.
Notification dialog function like alert().
function msgbox(text,buttontext) {
buttontext = buttontext || "OK"
$( "<div>" + text + "</div>" ).dialog({
dialogClass: "no-close",
buttons: [
{
text: buttontext,
click: function() {
$( this ).dialog( "close" );
$(this).remove();
}
}
]
});
}
call function
msgbox("test dialog");
or
msgbox("test dialog", "I agree");
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<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() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<form action="" method="post">
Name :- <input type="text" name="name" value="">
Email :-<input type="email" name="email" value="">
<div id="test" class="loader"></div>
Submit:-<input id="dialog2" type="submit" onclick="myfuncation();" name="submit" value="save">
</form>
</div>
<button id="opener">Open Dialog</button>
<div id="dialog-message"></div>
</body>
</html>
<script type="text/javascript">
$( "#test" ).hide();
function myfuncation()
{
alert("hai");
// Here is your ajax request to db related work.
$( "#test" ).show();
//var ajaxresponce = "Sucessfully Insert Form";
//$('#dialog-message').html(ajaxresponce);
// $( "#dialog-message" ).dialog();
}
</script>