I'm trying to use the AngularJS ngDialog add-on to make a simple pop-up dialog. It basically works, but when the dialog appears, it starts out white but then quickly fades into the dark background. I assume there's some CSS conflict, but I can reproduce the problem with a very simple bit of HTML, below. Thanks in advance for any suggestions.
<html>
<head>
<title>Dialog Test</title>
<link href='/assets/ngDialog/css/ngDialog.css' rel='stylesheet'>
<script src='/assets/angularjs/angular.js'></script>
<script src='/assets/ngDialog/js/ngDialog.js'></script>
<script>
angular.module('dialogTest', ['ngDialog']);
</script>
</head>
<body ng-app='dialogTest'>
<button ng-dialog='MY_DIALOG.html'>
Dialog...
</button>
</body>
</html>
I figured it out (my original problem, not plunker): I also need to include ngDialog's ngDialog-theme-default.css. Thanks for looking at this.
Related
I am creating an alert box using bootstrap
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="alert alert-info alert-dismissible fade show">
Alert Read this message<button class="close" data-dismiss="alert"> Close </button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>
This code works in same way if I remove alert-dissmissible class for the div. If there is no change even after removing alert-dissmissible class declaration then What is the use of alert-dissmissible class? The alert box is dissmissible even if the alert box does'nt has alert-dissmissible class.Why?
The following is from the Bootstrap website
Using the alert JavaScript plugin, it’s possible to dismiss any alert
inline. Here’s how:
Be sure you’ve loaded the alert plugin, or the compiled Bootstrap
JavaScript. If you’re building our JavaScript from source, it requires
util.js. The compiled version includes this.
Add a dismiss button and
the .alert-dismissible class, which adds extra padding to the right of
the alert and positions the .close button.
On the dismiss button, add
the data-dismiss="alert" attribute, which triggers the JavaScript
functionality. Be sure to use the element with it for proper
behavior across all devices.
To animate alerts when dismissing them,
be sure to add the .fade and .show classes.
I am using the official google material icons: https://material.io/icons/
I want add some icons created by me, in svg.
how can I do it?
You will need to create your own web font.
If you've already got SVGs then you can possibly use something like https://icomoon.io/app/ to create one. I've not used it so can't help any further with that.
If not, you'll need to find a font authoring tool that exports to woff or woff2 or whatever web font format you need. (I think the material one is woff2)
About more it enter link description here
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<title></title>
</head>
<body>
<i class="material-icons md-light md-inactive">face</i>
</body>
</html>
currently Im using bootstrap-table for my mini-project.
Im trying to use the data-show-toggle together with data-show-columns and data-search to provide more usability.
But the data-show-toggle button is displayed slightly smaller than the other button. Is there any setting i overlooked?
Heres my table setting, js and css import. appreciate for any help given. :)
<!--Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--Bootstrap-Table-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.0/bootstrap-table.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.0/bootstrap-table.min.js"></script>
<table
id="table"
data-toggle="table"
data-show-columns="true"
data-search="true"
data-show-toggle="true">
....
</table>
screenshot here
I could not find a regular way to change toggle button size and fix this issue, neither the reason. That's why I decided to change the javascript file directly(also I needed to translate some texts). I would not recommend this way because it is not proper use.
I believe i have everything coded right ,as Dreamweaver shows no Syntax errors, however the fullcalendar UI is not displaying either in Dreamweavers' preview pane, it does however display the div, or in Mozilla Firefox.
<!doctype html>
<html>
<head><link rel="stylesheet" href="fullcalendar/fullcalendar.css"/>
<script src="fullcalendar/fullcalendar.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/moment.min.js"></script>
<script> $(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});</script>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
all files are local
Dreamweaver CC 2014 1.1 and Firefox 36.0.4
You are missing one css file fullcalendar.print.css please include it. you can use the cdn path //cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.print.css
Check console there might be error of jquery not defined. Include the file in that case.
cdn path https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js
For full download fullcalendar Click here..
Include your files in this sequence.
Moment js
jQuery js
Fullcalendar js
P.s: And make sure each of the file is included properly.
I have created a jsfiddle link on the left menu click on external sources. Click here for jsfiddle
I've used colorbox in my project to show some details in a jQuery popup window. But the target page does not appear.
This is the code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/colorbox.css" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".iframe").colorbox({iframe:true, width:"70%", height:"70%"});
});
</script>
</head>
<body>
Click here
</body>
</html>
You can see at Here.
What's the problem ?
You are trying to display google.com in an iframe which is not as easy as with other sides.
It should work the way you did it with almost any other side.
Read this for more information: How to show google.com in an iframe?
I'm not sure with your purpose but if you want to embed google search on your website with iframe, you can try http://www.google.com/custom.
You can see demo here http://jsfiddle.net/devchill/LVunZ/
Click here
$(".iframe").colorbox({iframe:true, width:"70%", height:"70%"});