I have created my first web application and have .html, .dart, and .css files. I want to create a modal page that will a bit smaller than my page and be centered on it. I don't really want any visible borders. The function of this page is to allow the user to display, using clickable elements, 'Help' and 'About' pages and a page that allow the user to see a list of the data files that have been collected.
I've found a couple of examples of modal pages but they are old. One appears to be easy to understand but the Dart editor flags a couple of errors and has a line that I don't understand at the head of the .dart file.
#import('dart:html'); // OK just remove the '#"
#resource('modal.css'); // ???
This example is in a blog DartBlog that does not appear to be active and did not allow me to leave a comment.
I would appreciate an help understanding the example or pointing me to working examples.
This import statement is outdated Dart syntax.
use instead
import 'dart:html';
I never saw the #resource thing and I'm sure this is not available anymore as well.
You can either put a style tag to your HTML file like
<html>
<head>
<style>
.black_overlay{
display: block;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: block;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
</body>
</html>
or put the CSS content in a file like styles.css and import it to your HTML
<html>
<head>
<link rel='stylesheet' href='styles.css'>
</head>
<body>
</body>
</html>
I tried to update the code to current syntax (not tested though) and I added some comments
import 'dart:html';
void main() {
//setup the screen elements...
ButtonElement button = new ButtonElement();
button.text = "click me";
//add an event handler
button.onclick.listen((event) {
ModalDialog dialog = new ModalDialog("This is a <strong>message</strong>
with html formatting");
dialog.show();
});
//add the button to the screen
document.body.append(button);
//add the modal dialog stylesheet
document.head.append(getStylesheet());
}
/**
* Our modal dialog class
*/
class ModalDialog {
final DivElement _content;
final DivElement _blackOverlay;
final ButtonElement _button;
//Constructor
ModalDialog(String message) :
//constructor pre-init
_content = new DivElement(),
_blackOverlay = new DivElement(),
_button = new ButtonElement()
{
//constructor body
_content.id = "modalContent";
_content.classes.add("white_content"); //set the class for CSS
_blackOverlay.id = "modalOverlay";
_blackOverlay.classes.add("black_overlay"); //set the class for CSS
//Our message will go inside this span
SpanElement span = new SpanElement();
span.innerHTML = message;
_content.append(span);
//This is the button that will "clear" the dialog
_button.text = "Ok";
_button.onClick.listen((event) {
hide();
});
_content.append(_button);
}
//remove the modal dialog div's from the dom.
hide() {
//find the element and remove it.
//there is no list.remove(x) statement at present,
// so we have to do it manually. - UPDATE: now there is
_content.remove();
_blackOverlay.remove();
}
//add the modal dialog div's to the dom
show() {
document.body.append(_content);
document.body.append(_blackOverlay);
}
}
/**
* Utility method to get a stylesheet object
*/
getStylesheet() {
LinkElement styleSheet = new LinkElement(); // maybe
styleSheet.rel = "stylesheet";
styleSheet.type="text/css";
styleSheet.href="modal.css"; // UPDATE: you don't need to add your CSS to your HTML as shown above because it's done in this code
return styleSheet;
}
Related
I am building a Nuxt app, not sure why this is not working only in scoped style tag.
This is what I usually do for style.
index.vue
...some code..
<script>
some code here
</script>
<style scoped>
.text1 {
overflow: auto;
}
</style>
The code above had no issue.
What I am trying to do is to print stuff inside dialog.
In detail, I have a page with long text (about 3 pages if printed) and button to open a dialog.
Inside dialog, there's some image & text and print button.
When I click the button, I want to print stuff inside dialog, but nothing else.
This is what I did:
<template>
...some text that I don't want to print..
<v-dialog>
<v-container id="printable">
image and text to print
</v-container>
</v-dialog>
...
</template>
<script lang="ts">
export default Vue.extend({
methods: {
print() {
const modal = document.getElementById('printable');
const cloned = modal!.cloneNode(true);
let section = document.getElementById('print');
if (!section) {
section = document.createElement('div');
section.id = 'print';
document.body.appendChild(section);
}
section.innerHTML = '';
section.appendChild(cloned);
window.print();
},
},
})
</script>
<style scoped>
#media screen {
#print {
display: none;
}
}
#media print {
body * {
visibility: hidden;
}
#print,
#print * {
visibility: visible;
}
#print {
position: absolute;
left: 0;
top: 0;
}
}
.text1 {
overflow: auto;
}
</style>
When I clicked the print button,
I got 3 pages of text that's supposed to be invisible.
Also any image and text inside modal was gone.
Now, if I change
<script scoped> to <script>
everything works as expected.
but I can't understand why..
(and I want to use scoped if possible as it's recommended)
Also, even with <script>
I still get 3 pages (1st page with modal stuff then blank pages for 2nd and 3rd)
Does anyone know how to remove 2nd, and 3rd page?
For the first part, you probably need some deep selectors because I guess that you're targeting a nested component with v-dialog, you can see how to write it here: https://stackoverflow.com/a/55368933/8816585
So wrapping like
>>> .text1 {
overflow: auto;
}
As for the fact that it's printing but should not, it maybe comes down from the actual state this is in at the time you click on the button. Additional code may be useful here.
Not sure if it can help but packages like html2canvas may also help.
Here are some questions that I've once saw using this package, there are probably more.
They may be be more suited to print into a Vue environment.
In this project, I have 4 pictures at the top of the web page, they are my thumbnails. When I click on one of this picture I want it to appear in color, and this color stays on the picture until we click on an other picture. During this time the others pictures are in black and white.
I did this exercise with AngularJS, and I don't know where I can put this kind of property in my code, can you help me please?
The picture of want I want to obtain for the project :
The code of the project :
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link href="style.css" rel="stylesheet">
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="thumbnail">
<img ng-click="changeName1()" ng-src="{{firstname1}}" >
<img ng-click="changeName2()" ng-src="{{firstname2}}" >
<img ng-click="changeName3()"ng-src="{{firstname3}}" >
<img ng-click="changeName4()"ng-src="{{firstname4}}" >
<h1>{{title}}</h1>
</div>
<div class="backgroundpicture">
<img ng-src="{{src}}">
</div>
<div class="foregroundpicture">
<img ng-src="{{src2}}">
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname1 = "photoshop-logo.jpg";
$scope.firstname2 = "autocad-logo.png";
$scope.firstname3 = "counterstrike-logo.png";
$scope.firstname4 = "leagueoflegends-logo.jpg";
$scope.src = "photoshop-screenshot.png";
$scope.src2 = "photoshop-profile.PNG";
$scope.title = "Photoshop";
$scope.firstnamedisplay =$scope.firstname1;
$scope.changeName1 = function() {
$scope.firstnamedisplay =$scope.firstname1;
$scope.src = "photoshop-screenshot.png";
$scope.src2 = "photoshop-profile.PNG";
$scope.title = "Photoshop";
}
$scope.changeName2 = function() {
$scope.firstnamedisplay =$scope.firstname2;
$scope.src = "autocad-screenshot.png" ;
$scope.src2 = "autocad-profile.png";
$scope.title = "Autocad";
}
$scope.changeName3 = function() {
$scope.firstnamedisplay =$scope.firstname3;
$scope.src = "counterstrike-screenshot.jpg";
$scope.src2 = "counterstrike-profile.png";
$scope.title = "Counter-Strike";
}
$scope.changeName4 = function() {
$scope.firstnamedisplay =$scope.firstname4;
$scope.src = "leagueoflegends-screenshot.png";
$scope.src2 = "leagueoflegends-profile.png";
$scope.title = "League of legends";
}
});
</script>
</body>
</html>
body {
margin: 5%;
}
.thumbnail>img{
padding-left: 3%;
padding-right: 3%;
}
.backgroundpicture >img {
padding-top: 7%;
z-index:1;
width: 90%;
}
.foregroundpicture >img {
position:absolute;
z-index: 2;
width: 55%;
left:40%;
top:65%;
}
In my personal experience, you'll want to use the CSS property filter: grayscale(100%) to make your thumbnails appear without color. There's numerous ways to implement this with the same end result, but here is a link to a js fiddle that demonstrates the concept:
https://jsfiddle.net/s3pLef9c/47/
To Explain what is happening in the JS Fiddle:
Basically this demo is using the ng-click directive to add an .image-active class to an element with a base class of .image. Here is what those classes look like:
.image{
margin: 8px;
display: inline-block;
box-sizing: border-box;
width: 20%;
height: 100px;
border: 8px solid #2c2c2f;
background-color: #FEC10D; // change this to background-image or add an <img> tag inside the <div> tag and remove this line!
filter: grayscale(100%);
}
.image-active{
filter: grayscale(0%);
}
The base class of .image is using filter: grayscale(100%) to initially set the images to have no color. The .image-active class is added to the element when the click event happens, overriding the grayscale filter to filter: grayscale(0%) and adding color. Then existing.image-active` class is removed.
I wasn't sure based on your question if you wanted the first image to be active by default, or if you wanted them all gray to start, so I took a liberty there but I'm happy to update that for you.
Note: This example isn't using images, just <div> tags with background colors applied. But if you simply remove the color and add in your background images then it should work for you.
To Explain Further:
It's much easier and faster to add/remove a CSS property or class than it is to swap out an image source file based on application state. This gets even easier when using the ng-repeat and ng-class directives provided by angular, here is a link to the documentation:https://docs.angularjs.org/api/ng/directive/ngClass
Hope this helps!
I would like to create a button using that floats until footer and then stops
1) Button should be poisition: fixed; bottom: 0px when footer is not visible
2) When footer becomes visible, button should just sit on top of footer
The button should handle following cases.
when states change in angular, when we get data from server the footer is visible for a moment and then the page expands, what will happen then?
when the page has less content and footer is visible, button should sit on top of footer.
How can i do this?
Here is the plunker i started to play around with
http://plnkr.co/edit/SoCBjkUjFICiuTeTPxDB?p=preview
I came across this post when searching for a similar solution. Without a ready answer, this is what I ended up doing, based on this post https://ngmilk.rocks/2015/04/09/angularjs-sticky-navigation-directive/ .
Basicly you need a $scope.$watch to watch for scope change, and an event handler attached to the onscroll event.
angular.module('myApp')
.directive('stickyBottom', function($window) {
return {
restrict: 'A',
scope: {},
link: function (scope, elem, attrs) {
// the element box saved for later reference
var elemRect;
// element height
var height = elem[0].clientHeight;
// element top, will be changed as scope is updated
var top = 0;
// updates element's original position
scope.$watch(function(){
elemRect = elem[0].getBoundingClientRect();
return elemRect.top + $window.pageYOffset;
}, function(newVal, oldVal){
// this is the original element position, save it
if(!elem.hasClass('fixed-bottom')){
top = newVal;
}
// properly position the element even in `fixed` display
elem.css('width', elemRect.width);
elem.css('left', elemRect.left);
// check position
toggleClass();
});
// toggle `fixed-bottom` class based on element's position
var toggleClass = function() {
// the element is hidden
if (elem[0].getBoundingClientRect().top + height > $window.innerHeight) {
elem.addClass('fixed-bottom');
}
// the element is visible
else {
// the element is visible in its original position
if (top - $window.pageYOffset + height < $window.innerHeight && elem.hasClass('fixed-bottom')) {
elem.removeClass('fixed-bottom');
}
}
}
// bind to `onscroll` event
$window.onscroll = function() {
toggleClass();
};
}
};
})
;
And here's some css:
.fixed-bottom {
position: fixed;
top: auto;
bottom: 0;
}
You can accomplish this affect without using angular at all by modifying your style.css. The simplest solution in this case is just to set the bottom parameter of the #to-top element to be at minimum higher than the footer, for example:
#to-top {
position:fixed;
bottom: 60px;
right: 10px;
width: 100px;
padding: 5px;
border: 1px solid #ccc;
background: red;
color: white;
font-weight: bold;
text-align: center;
cursor: pointer;
}
I'm very new to programming and am trying to make a project for class using html, canvas, and a css file. The concept is that there should be a title screen that appears in the canvas element that once you click will disappear and reveal a room where there are elements that you can hover your mouse over and get information.
I have the html, canvas, and css up to how I want it but whenever I try to put something in the canvas element it doesn't show up. Like, for the title screen I want to draw a colored box and put some text in it and then have it click away to reveal an image underneath. I used a drawCanvas but it will only show up if I put a gameLoop at the end. But when I try to add text, it disappears. Again, I'm really new to this and I'm sorry for my wall of text but any advice or suggestions would be really helpful. Here's my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title Page</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<script src="js/modernizr.js"></script>
<script>
window.addEventListener("load",eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport() {
return Modernizr.canvas;
}
function canvasApp() {
if (!canvasSupport()) {
return;
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
var width=1000;
var height=450;
function drawCanvas(){
context.fillStyle="teal";
context.fillRect(0,0,width,height);
setColor();
drawLines();
}
function gameLoop(){
requestAnimationFrame(gameLoop);
drawCanvas();
}
gameLoop();
}
</script>
</head>
<body>
<audio loop="loop" autoplay="autoplay" controls="controls">
<source src="themesong.mp3" type="audio/mpeg">
Your browser does not support the audio content.
</audio>
<!-- Canvas -->
<div id="canvas-container">
<canvas id="canvasOne" width="1000" height="450">
Your browser does not support canvas.
</canvas>
</div>
<!-- ^ End Canvas -->
</body>
</html>
And here's my CSS:
#canvasOne {
background-color: #cccccc;
border: 10px solid rgba(136, 128, 172, 0.9);
margin-left: 210px;
margin-right: auto;
margin-top: 130px;
#body {
background-image: url("mansion.jpg");
background-repeat: no-repeat;
}
Honestly, if someone could just help me put an image in the canvas and make it so that certain areas where the mouse hovers over a text box would appear, would be awesome. The idea is that it's a game where you "look" around the room with your mouse for clues. And once again, I'm very new to this so sorry if this is formatted weird or my question is too ridiculously long.
I'm not sure what exactly you want but i fixed the problem where the image is not coming up on the canvas.
The problem is that on your CSS you are coloring the background then you are also putting the image on it causing it to overlap.
Here is the CSS code that I have changed:
#canvasOne {
background-image: url("mansion.jpg");
background-repeat: no-repeat;
border: 10px solid rgba(136, 128, 172, 0.9);
margin-left: 210px;
margin-right: auto;
margin-top: 130px;
}
I dont know how to do the hover part but you should look into this
This is your main problem:
window.addEventListener("load",eventWindowLoaded, false);
The reason I say that is because you are calling the evenWindowLoaded function once -- when the page initially loads. Since this is the case, whatever state the drawLines() and other functions are in when the page loads for the first time, that will be draw on the canvas.
Instead you should try to use this:
var timer = setInterval(function() { eventWindowLoaded(); }, 100);
and then clear the canvas and re-draw it.
(this is for the hover effect)
that way, you can do calculate if the mouse's cursor is above a particular space on the canvas and then do whatever functions if it is... this isn't 100% going to work, but its a general idea of what you could do:
var mousePos;
var timer = setInterval(function() { eventWindowLoaded(); }, 100);
function eventWindowLoaded() {
context.clearRect(0,0,width,height);
for (var i=0; i<images.count; ++i) {
var img = images[i];
if (Math.Abs(mousePos.x - img.Pos().x)) <= img.width) {
if (Math.Abs(mousePos.y - img.Pos().y)) <= img.height) {
do_hover_event();
}
}
}
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
canvas.addEventListener('mousemove', function(evt) {
mousePos = getMousePos(canvas, evt);
}
Thats one thing -- here's another:
You are leaving the scope of the variable definition for the canvas/context var's, try this method for the canvas/context -- using 3 diffeerent separate functions and defining the width, height, theCanvas, and context all in the global scope
var width=1000;
var height=450;
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
function canvasApp() {
if (!canvasSupport()) {
return;
}
gameLoop();
}
function drawCanvas(){
context.fillStyle="teal";
context.fillRect(0,0,width,height);
setColor();
drawLines();
}
function gameLoop(){
requestAnimationFrame(gameLoop);
drawCanvas();
}
I'm using a JavaScript function call a pop-up window to print out my label, and the function include the CSS link. The problem is it seems that the CSS doesn't affect the printing page when I preview it, I have no idea which portion when wrong. Anyone can please give me advice?
JavaScript code:
function ConfirmButton() {
if (true) {
var prtContent = document.getElementById("<%=printing.ClientID %>");
var WinPrint1 = window.open('', '', 'scrollbars=yes,letf=0,top=0,width=400,height=430');
WinPrint1.document.writeln('<body><link href="CSS/bootstrap.min.css"rel="stylesheet" /><link href="Printing.css"rel="stylesheet" media ="print"/>');
WinPrint1.document.write(prtContent.innerHTML);
WinPrint1.document.writeln('</body></HTML>');
WinPrint1.document.title = "Test Printing";
WinPrint1.document.close();
WinPrint1.focus();
WinPrint1.print();
return true;
}
else {
return false;
}
}
CSS page name "Printing.css":
body {
background-color: red;
}
Background colors aren't rendered when printing ... and that's a good thing. A printed page has its own medium with its own background colors, unlike a screen which is much more dynamic and multi-variate. Being able to paint the canvas on a screen makes much more sense than on a page.
If, for some reason, you really wanted to print a section in red, you could wrap the entirety of your content in a container, and do some CSS wizardry like so:
<section class="page-container">
<div>All my content...</div>
<div>All my content...</div>
<div>All my content...</div>
</section>
.page-container {
position: relative;
z-index: 1;
height: 100vh;
}
.page-container:after {
content: url(data:image/png;base64,...LONG BASE64 STRING...==);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.page-container > div {
position: relative;
z-index: 2;
}
Here's a fiddle illustrating the general concept, try printing it.