I am trying to open a simple modal dialog and I have been struggling to do this. Can
any one please help? This is the HTML code(please remove pre). This simply doesnot work.
Can any one please tell **strong text**me why? I have not been getting the kind of output that I really
need.
Any one help me.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/magnific-popup.css" rel="stylesheet" />
<script src="js/jquery.magnific-popup.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
</head>
<body>
<a class="popup-modal" href="#test-modal">Open modal</a>
<div id="test-modal" class="white-popup-block mfp-hide">
<h1>Modal dialog</h1>
<p>You won't be able to dismiss this by usual means (escape or
click button), but you can close it programatically based on
user choices or actions.</p>
<p><a class="popup-modal-dismiss" href="#">Dismiss</a></p>
</div>
<script>
$(function () {
$('.popup-modal').magnificPopup({
type: 'inline',
preloader: false,
focus: '#username',
modal: true
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
</script>
</body>
</html>
Load jquery before the magnific-popup plugin, it relies on jquery (I've never used it but I'm assuming so seeeing as it is pre-appended withfixed 'jquery')
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/magnific-popup.css" rel="stylesheet" />
<!-- Jquery loaded first here... -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<!-- Plugins after... -->
<script src="js/jquery.magnific-popup.js"></script>
</head>
<body>
Related
I am trying to get notification area in summer note to work but It doens't showup.
In the example below I expect the area to show at the bottom once the button is pressed.
What am I missing ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summernote</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
</head>
<body>
<button onclick="test()">hello</button>
<div id="summernote"><p>Hello Summernote</p></div>
<script>
$(document).ready(function() {
$('#summernote').summernote();
$('#summernote').summernote({
maxHeight: 300,
dialogsInBody: true,
dialogsFade: true // Add fade effect on dialogs
});
});
function test(){
$('.note-status-output').html('<div class="alert alert-danger">' +
'This is an error using a Bootstrap alert that has been restyled to fit here.' +
'</div>'
);
}
</script>
</body>
</html>
I am having trouble getting a reference to the dijit form widget when the form contains a DateTextBox. The code snippet below demonstrates the problem. When executed, the alert box says "undefined". However, if I get rid of <input ... id="dateTextBox"... />, I am able to get a reference to the form widget.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css" media="screen">
<!-- load dojo and provide config via data attribute -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad: true">
</script>
<script type="text/javascript">
require(["dijit/form/TextBox", "dijit/form/DateTextBox"]);
</script>
<script type="text/javascript">
require(["dojo/parser", "dijit/registry", "dijit/form/Form", "dojo/domReady!"],
function(parser, registry) {
parser.parse();
alert(registry.byId("frm_test"));
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/form/Form" id="frm_test" encType="multipart/form-data" action="" method="">
<input type="text" id="textBox" name="textBox" data-dojo-type="dijit/form/TextBox" />
<input type="text" id="dateTextBox" name="dateTextBox" data-dojo-type="dijit/form/DateTextBox" />
</div>
</body>
</html>
I'd recommend wrapping the registry.byId into a ready call.
Keep parse onLoad: true, remove
require(["dijit/form/TextBox", "dijit/form/DateTextBox"]);
as the parser will auto require (when dojo>= 1.8) and use the following:
<script type="text/javascript">
require(["dojo/ready", "dijit/registry", "dojo/domReady!"],
function(ready, registry) {
// by default the prioirty of this ready call will be after the
// ready call used to parse when parseOnLoad is true
ready(function() {
alert(registry.byId("frm_test"));
});
});
</script>
Note that waiting for dojo/domReady! to fire is often not sufficient
when working with widgets. Many widgets shouldn’t be initialized or
accessed until the following modules load and execute:
dojo/uacss
dijit/hccss
dojo/parser
Thus when working with widgets you should generally put your code
inside of a dojo/ready() callback
http://dojotoolkit.org/reference-guide/1.9/dojo/domReady.html
http://dojotoolkit.org/reference-guide/1.9/dojo/ready.html#dojo-ready
When I start my application, the dojo start loading but are not yet fully parsed and thus screen looks ugly!!!
Is there a way to hide this ugly screen until it is fully loaded a parsed?
Thanks
Dominique
EDIT ADD SNIPPET
I heard that WL Studio would hide automatically the body and thus no need to create an overlay.
Here my html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/Test.css">
<script>
window.$ = window.jQuery = WLJQ;
</script>
<script type="text/javascript"
data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false"
src="dojo/dojo.js"></script>
</head>
<body id="content" style="display: none;">
<div id="main" data-dojo-type="dojox.mobile.View"
data-dojo-props='selected:true'>
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props='fixed:"top"'>Main Screen</div>
<button id="refreshBte" data-dojo-type="dojox.mobile.Button"
style="width: 100%">Refresh</button>
<button id="settingsBte" data-dojo-type="dojox.mobile.Button"
style="width: 100%">Setting</button>
</div>
<!--application UI goes here-->
<script src="js/initOptions.js"></script>
<script src="js/Test.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
and my js
function wlCommonInit(){
require([ "dojo/core-web-layer", "dojo/mobile-ui-layer",
"dojo/mobile-compat-layer" ], dojoInit);
}
function dojoInit() {
require([ "dojo", "dojo/parser", "dojox/mobile", "dojox/mobile/compat",
"dojox/mobile/deviceTheme", "dojox/mobile/Heading", "dojox/mobile/Button" ],
function(dojo) {
dojo.ready(function() {
});
});
}
I tried also to add hidden="hidden" in the but it doesn't change anything.
Any idea?
Yes there is,
you need to build a loading overlay. Check out this tutorial:
http://dojotoolkit.org/documentation/tutorials/1.6/recipes/loading_overlay/
What I normally did with this is:
<div id="main" style="visibility: hidden;"></div>
After the parsing is complete:
set the main visibility to visible again.
Might not fully solve the problem (depends on how fast the browser able to resolve the layout), but you won't be getting plain html displayed until it is:converted into widget.
Further reference:
dojo/Ready = to detect when the page is parsed.
I've been trying to make a jQuery tab UI like in the following Better alternative to an iframe? but after hours of troubleshooting I just don't know what I'm doing wrong.
My test.html:
<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
</div>
</body>
So in my folder I have test.html (the above), one.html, two.html, and three.html. When I load test.html, any tab I select just says Loading... and the html pages never load.
For a more visual explanation, I'm trying to do what this demo is but with html pages:
http://www.coldfusionjedi.com/demos/jquerytabs/test.cfm
Please help haha I'm so lost as to what I'm doing wrong. Thanks in advance :)
It's very strange, I call dijit.byId() in dojo.addOnLoad(function{...}), it return undefined. In order to check if the id exist, i call dojo.byId() at the same time, it return some object. So I guess the component is not a dijit component? this is the whole code: Please help me, thanks in advice!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<!-- Dojo/Diji definations -->
<link href='../dojoroot/dijit/themes/tundra/tundra.css' type='text/css' rel='stylesheet'/>
<link href='../dojoroot/dojo/resources/dojo.css' type='text/css' rel='stylesheet'/>
<script type="text/javascript" src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<!-- Main scripts -->
<script type="text/javascript">
dojo.addOnLoad(function()
{
// Include library
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
// add the select child event to the tab panel
alert(dijit.byId("contentTabPanel")); // return no defined
alert(dojo.byId("contentTabPanel")); // return an object
});
</script>
</head>
<body class="tundra">
<div dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%;">
<!-- Content Tab Panel -->
<div id="contentTabPanel" dojoType="dijit.layout.TabContainer" region="center">
<!-- Tab UserGroup -->
<div dojoType="dijit.layout.ContentPane" title="UserGroup">
</div>
</div>
</div>
</body>
</html>
OMFG!!!!! I know the reason!!!!! I cost 5 Hours just for this STUPID error:
I MUST write the
// Include library
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
outside the dojo.addOnLoad(function() { !!!