I have a rather simple page currently, and for some reason the maincss.css isn't being applied, which simply sets the background to an image. I know that it works because it was working before I added another css file for jquery styling. What about this is wrong?
<html xmlns=\ "http://www.w3.org/1999/xhtml\" xml:lang=\"en\">
<head>
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<title>Welcome to Jetty-9</title>
<link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<link href="css/maincss.css" rel="stylesheet">
<script type='text/javascript' src='js/jquery.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$( "#dialog" ).dialog({
width: 400,
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
It seems you might face problem because:
In CSS file the image path you have not given properly. (you should be giving a relative path from your CSS file and not to html)
In your new CSS file the body{} tag was overwritten to nothing.
For resolution:
Try checking the CSS by configuring the background-color to some color and test it. So this way you can make sure the CSS is working fine and try other options as well.
Try this
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Script-Type" CONTENT="text/javascript">
<title>Welcome to Jetty-9</title>
<link type="text/css" href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<link type="text/css" href="css/maincss.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
width: 400,
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
Related
I am trying to style the text in the below popup. I would like to have the text show on 2 lines i.e. Message sent successfully. should be on one line and One of our consultants will contact you within the next 2 business days. should be on another line. Is there anyway I can possibly append HTML to it?
onGetAdvice() {
this.loader.start();
this.getAdvice().subscribe((resp) => {
this.loader.stop();
this.infoPopupService.openInfoPopup('Message sent successfully. One of our consultants will contact you within the next 2 business days.');
this.showConnectWindow = false;
}, error => {
this.loader.stop();
console.log(error.statusText);
});
}
why don't you try to use a HTML popup with something like this I've found on this link.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Default functionality</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();
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
I have a problem. When i load external data and i will use jquery events on that data - this is not working because the DOM does not know this. The event-delegation works perfect. I only want to know how to make the <div class="dialog"> original </div> loaded from source.txt known to the DOM or another solution to access the external data through the jquery Event. When I use the line div class="dialog"> original </div> in the Main document all works fine.
<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>
<style>
iframe{
overflow:hidden;
}
</style>
<script>
$( function() {
$( ".dialog" ).dialog({
autoOpen: false,
width:700,
height:700,
show: {
},
hide: {
}
});
$(document).on("click","#link",function(){
$("#include").load("http://www.damago.de/dev/source.txt");
});
$(document).on( "click","#opener", function() {
$( ".dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="include"></div>
<a id="link" href="#">Include the source.txt with the code</a>
</body>
</html>
source.txt
<div class="dialog"> original </div>
<button id="opener">This is the text of the dialog</button>
I know, this problem is postet here already in 236 variants. But even when I try to use those I understand, I don't get the correct behavior with my script. I have the following code (HTML and JS):
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal form</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
var dialog, form
dialog = $('div#infoDialog').dialog({
autoOpen: false,
height: 600,
width: 500,
modal: true
});
$('#showInfos').click(function(e) {
e.preventDefault();
dialog.dialog('open');
});
});
</script>
</head>
<body>
<div id="infoDialog" title="Eventinfos">
Testeintrag
</div>
<button id="showInfos"><img src="images/apoa.gif" /></button>
<img src="images/apoa.gif" />
</body>
</html>
The button works fine as intended, but the "a href..." doesn't work at all. I already tried all alternatives I could think of, like dont use img's or try a # instead of the javascript: void(0) or like not use a variable dialog but always name it directly, but none worked. In the examples nearly the same code should worked fine. What did I do wrong?
I believe the problem is that both "buttons" are using the same ID. Either change the ID of one of them or switch them both to use classes (or some other selector).
IDs must be unique.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal form</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
var dialog, form
dialog = $('div#infoDialog').dialog({
autoOpen: false,
height: 600,
width: 500,
modal: true
});
$('.showInfos').click(function(e){
e.preventDefault();
dialog.dialog('open');
});
});
</script>
</head>
<body>
<div id="infoDialog" title="Eventinfos">
Testeintrag
</div>
<button class="showInfos"><img src="images/apoa.gif" /></button>
<img src="images/apoa.gif" />
</body>
</html>
use class="showInfos" instead id="showInfos" and in js
$('.showInfos').click(function(e) {
e.preventDefault();
dialog.dialog('open');
});
find the jsbin here
In this fiddle a dialog is displayed :
http://jsfiddle.net/6M5g4/
Fiddle code :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
Is there a listener I can add which fires if the 'X' button is clicked or if the dialog is closed by a button on the dialog?
Sure, use the dialog's close event.
$(function () {
$("#dialog").dialog({
close: function (event, ui) {
alert('Closed!')
}
});
});
jsFiddle example
How can I change the alert box into a jquery dialog box?
Part of the script coding:
if(answeredAnsData.length==8){
for(var x=0;x<8;x++){
$('#text'+(x)).attr('disabled','disabled');
}
window.alert("test"); //alert box here
}
});
You should use the confirm command
window.confirm("are you sure");
if you want to use the dialog box from jquery you should look into the ui extension. Example taken from http://jqueryui.com/dialog/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<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>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
We can use confirm
result = confirm("To confirm click OK");
To see all options http://www.w3schools.com/js/js_popup.asp
To use jquery dialog
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<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>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>