Hi I have a question about the Metro UI (http://metroui.org.ua/dialog.html)
I'm using the dialog like this:
<div id="TestDialog" data-role="dialog" class="Dialog">
<h1>Simple dialog</h1>
<p>
Dialog :: Metro UI CSS - The front-end framework
for developing projects on the web in Windows Metro Style.
</p>
</div>
<script type="text/javascript">
var x_dialog = $("#" + dialogId).data("dialog");
x_dialog.options = {
width: width,
height: height,
closeButton: true
}
x_dialog.open();
</script>
But the Dialog isn't showing with a close button or my desired width / height.
Are there any useful examples for Metro UI dialogs? I haven't found any and the API from Metro UI seems nice, but if you're searching for JavaScript with Dialogs you wont find any...
first of all the metro 3.0 is till in beta so it will probably still be improved. It contrast to 2.0 it relies heavily on html5 data attributes and hence it can be specified on the html code but can still be modified in the javascript by using methods like the .attr('data-*','') . Here is a working code:
<script>
function showDialog(id){
var dialog = $("#"+id).data('dialog');
if (!dialog.element.data('opened')) {
dialog.open();
} else {
dialog.close();
}
}
</script>
</head>
<body onload="init()">
<div class="container page-content">
<div class="padding20 no-padding-right no-padding-left no-padding-top">
<button class="button" onclick="showDialog('dialog')">Show dialog</button>
</div>
<div data-role="dialog" id="dialog" class="padding20" data-close-button="true" data-width="200" data-height="200">
<h1>Simple dialog</h1>
<p>
test
</div>
</div>
</body>
</html>
Either specify them on the html or have it set dynamically on the click event in the js script. Something like this:
$('.button').click(function () {
$('#dialog').attr('data-width','200');
$('#dialog').attr('data-height','200');
showDialog('dialog');
});
Hope it helps.
There are options given there in http://metroui.org.ua/dialog.html
to help you customize the dialog to your taste. Now your Question, the answer would be
<div id="TestDialog" data-role="dialog" class="Dialog" data-close-button="true" data-width="300" data-height="300">
thats it. you can replace the width and height with an value of your choice
for the javascript that will help open and close the dialog
<script>
function showDialog(id){
var dialog = $(id).data('dialog');
dialog.open();
}
</script>
the button or whatever link that will open the dialog should have this showDialog('#TestDialog') the TestDalog is the id you gave the dialog div
<button onclick="showDialog('#TestDialog')">Show dialog</button>
Related
I thought something like this might work but it's not giving me exactly what i need.
Here's what I'm trying right now.
<style type="text/css">
#overlay
{
display:none;
}
</style>
<script>
$( document ).ready(function(){
$('#overlay').fadeIn('fast').delay(15000).fadeOut('fast');
});
</script>
<div id="overlay">
<script>
$(function () {
$('a').click(function(){
window.open('/getting-started/feg-top-performers','mywindow','width=400,height=200,toolbar=yes,
location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes,
resizable=yes')
});
});
</script>
</div>
Basically as soon as the page opens I want to populate an entire html page and than have that page (the popup) fade out after 5 seconds.
Any help would be greatly appreciated. Thank you.
Create a very simple Bootstrap modal, then set a timeout for when you would like it to hide. Bootstrap Modals look fantastic and are very customizable. They also have great fade in and out animations. View all the documentation along with the events, methods and options HERE.
jQuery:
$('#overlay').modal('show');
setTimeout(function() {
$('#overlay').modal('hide');
}, 5000);
HTML:
<div class="modal fade" id="overlay">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>Context here</p>
</div>
</div>
</div>
</div>
WORKING DEMO
PS. Don't forget to also include both bootstrap.js and bootstrap.css within your project if you would like to go down this path. You can use the remote CDN files HERE, or download them and include them within your project HERE.
Add this code to the and of :
setTimeout(function () { win.close();}, 5000);
There seem to be missing in your code
Your window pops out of the DIV. Applying CSS to the DIV containing the script tag which opened the window will not effect the popup because it is no longer contained in the DIV - it has "popped up" and out of that DIV's spot.
What you'll need to do is use Javascript to apply CSS to the window itself (which can only be done if both pages are on the same site, mwhich they are in this case). Something like this assuming JQuery was called (untested code, merely a starting point for you to work with).
$(function () {
$('a').click(function(){
NewWin=window.open('/getting-started/feg-top-performers','mywindow','width=400,height=200,toolbar=yes,
location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes,
resizable=yes')
});
var overlayopacity = 1;
var overlayinterval = window.setInterval("if(overlayopacity>0){overlayopacity-=0.1;}else{overlayinterval=window.clearInterval(overlayinterval);}NewWin.document.getElementsByTagName("body")[0].style.opacity=overlayopacity;", 500);
});
I have a link like this
COME HERE
I want to open the popup.html file as a jquery popup. And I cant have it inside the current page as a <div> with an id. I must have it out side the current file.
And I cant use dialog's as it reloads the current page. Any idea on how to do it?
Inside the popup.html I am using just a single header.
Or any methods through which I can avoid the page being reloaded when dialog is closed?
Use .load() to load popup.html into a placeholder (i.e <div id="PopupPH">). This placeholder can be placed either inside data-role="page or outside it, depending on jQuery Mobile version you are using.
Moreover, in popup.html, you need to change data-role=page" to data-role="popup in order to treat it as a popup not a page.
jQuery Mobile 1.4
Insert placeholder inside body tag or data-role="page" and load popup.html.
<body>
<div data-role="page">
</div>
<div id="PopupPH">
<!-- placeholder for popup -->
</div>
</body>
Or
<body>
<div data-role="page">
<div id="PopupPH">
<!-- placeholder for popup -->
</div>
</div>
</body>
Load popup.html into placeholder
$("#PopupPH").load("popup.html");
Inside popup.html popup div, add JS to create, open and remove popup once it's closed.
<div data-role="popup">
<!-- contents -->
<script>
$("[data-role=popup]").enhanceWithin().popup({
afterclose: function () {
$(this).remove();
}
}).popup("open");
</script>
</div>
jQuery Mobile 1.3 and below
Do the same as above, except for popup placeholder should be inside data-role="page", because jQM 1.3 doesn't support external popup. Also, replace .enhanceWithin() with .trigger("create").
Using the frames & popups in jQuery mobile, you can simply include an iframe inside, although dialogs are still probably your better bet. (Especially as a click outside the popup.. kills it)
<div class="hidden">
<div data-role="popup" id="externalpage">
<iframe src="http://www.bbc.com"
width="480"
height="320"
seamless>
</iframe>
</div>
</div>
<a href='#externalpage'
data-rel="popup"
data-role="button">COME HERE</a>
<script>
$(document).on("pageinit", function() {
$( "#externalpage" ).on({
popupbeforeposition: function( event, ui ) {
console.log( event.target );
}
});
});
</script>
Demo: http://jsfiddle.net/tcS8B/
jQuery Mobile Dialogs don't refresh the page I don't think, it simply masks it with a new background for focused attention.
Try
Test
I'm developing a phonegap project, I wanna popup a dialog of error information. I learn some from the demos of jQuery mobile, here is the link http://demos.jquerymobile.com/1.4.0/popup/#&ui-state=dialog I used the code of it and in my js file I use popup('open') to open it.
Here is part of my html code
<div data-role="popup" id="dialogZ" data-overlay-theme="b" data-theme="a" data-dismissible="false" data-transition="pop">
<div data-role="header" data-theme="b">
<h1 align="center">Sign in failed</h1>
</div>
<div role="main" class="ui-content">
<p id="SigninError"></p>
<span align="center">OK</span>
</div>
</div>
And here is part of my js code
else if (data == "Error2") {
var message = '<p align="center">Wrong username or password</p>';
SigninError.empty().append(message);
$('#dialogZ').popup('open');
}
I wanna have the effect like the demo but it didn't work.
Anyone knows why? It seems I can not have the css work properly, but I have included the jquery.mobile-1.4.0.css. Need helps!!
ya i got same issue before 4 months finally i got a solution. when you append content inside the popupview at the time u must call like this.....
JS
$('#dialogZ').popup();
$('#dialogZ').popup('open');
or
$('#dialogZ').popup();
setTimeout(function(){
$('#dialogZ').popup('open');
},100);
HTML
your data-role popup must inside the content of your calling page
Ideally data-transition should be on the link which triggers popup. since you are opening the popup in code, there is an additional attribute for $(dialog).open function, u need to pass the transition as part of open function., jquery doc
I've got a menu that uses the jQuery toggle function to open and close a sub-menu. This is working perfectly fine in all of my pages, BUT, when I try to add this same menu and sub-menu into a jQuery dialog box it will not open the sub-menu.
Here is my index.php code, including the javascript includes from the <head> of the page:
<script src="javascripts/jq/jquery-1.4.2.min.js"></script>
<script src="javascripts/jq/jquery-v1.8.3.js"></script>
<script src="javascripts/jq/jquery-v1.9.2.js"></script>
<p align="center" id="temp_menuOpener">[Click Here to Toggle Menu]</p>
<div id="temp_menu">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="ui-corner-bl ui-corner-br cus-dialog-content"><?php include("includes/menu.php");?></td>
</tr>
</table>
</div>
<script>
$( "#temp_menu" ).dialog({ autoOpen: false, width: 'inherit'});
$( "#temp_menuOpener" ).click(function() {
$( "#temp_menu" ).dialog( "open" );
});
</script>
Here is my menu.php code:
<script>
$(function()
{
$('.schedOpener').click(function()
{
$('div#submenu_sched').toggle();
});
});
</script>
<div id="menu">
<div class="menu schedOpener">
<img src="/roster/images/menu/schedule.png" border="0" title="Schedule" alt="Schedule">
</div>
<div id="submenu_sched">
<div class="menu">
<img src="/roster/images/menu/sched_month.png" border="0" title="Schedule Month View" alt="Schedule Month View">
</div>
</div>
</div>
The CSS for submenu_sched is set to display:none;.
So, like I said, this menu works perfectly until it's added to a dialog box and then it fails. Simply removing id="temp_menu" from the <div> will make it work, but that also removes it from the dialog box.
I tried adding this to a jsfiddle, but I couldn't get the dialog box to work at all, even when I chose the jQuery 1.8.3 library framework. So instead I set it up on my test server to make it so you can at least see what I mean. You will notice on my test server there is more to the menu, and the page itself, than what I've posted here. I am trying to keep the static to noise ratio at a good level :)
IWACTITE
Alright, after a while playing around on jsFiddle, I've figured all the problems out. First the JavaScript shouldn't be inside the dialog. Secondly, you have to use ($("#temp_menu").dialog("isOpen") == true) ? $("#temp_menu").dialog("close") : $("#temp_menu").dialog("open"); to compare whether to open or close the dialog.
Here's my working jsFiddle
and here's the fullscreen version jsFiddle.
I'm trying to make a twitter like system that scrolls through info slowly and then repeats.
I have it down(kinda) thanks to this tutorial. I have it working on its own and I added my own content but when I try adding it to my webpage it takes a c*** on me and throws all of my content all together at the top of the page. Any suggestions?
<div class="header">
<h2><span>Resteruant Consulting</span></h2>
<h1>Tasty Solutions</h1>
</div>
<div class="content">
<DIV align=center style="background:#fff">
<DIV id="tempholder"></DIV>
<SCRIPT language=JavaScript
src="dhtmllib.js"></SCRIPT>
<SCRIPT language=JavaScript
src="scroller.js"></SCRIPT>
<SCRIPT language=JavaScript
src="mydata.js"></SCRIPT>
<SCRIPT language=JavaScript>
//SET SCROLLER APPEARANCE AND MESSAGES
function runmikescroll() {
var layer;
var mikex, mikey;
// Locate placeholder layer so we can use it to position the scrollers.
layer = getLayer("placeholder");
mikex = getPageLeft(layer);
mikey = getPageTop(layer);
// Create the first scroller and position it.
myScroller1.create();
myScroller1.hide();
myScroller1.moveTo(mikex, mikey);
myScroller1.setzIndex(200);
myScroller1.show();
}
window.onload=runmikescroll
</SCRIPT>
<center><DIV id='placeholder'></DIV></div></DIV></center>
</div>
I have all the other javascript in the same directory. I have javascript enabled in my web browser, and it works on its on its just when I incorporate it into my index.html it gets screwy.
each headline has a "position:absolute", perhaps if you put those headlines in a div with
position:relative;
so the headlines at least will stay just in that div.
if I'm wrong pardon me, if I'm right let me know.