I have been working on a project in GWT for which i need to show a loading image as like "Please Wait...".
I was able to fix this till page loads. But during history token changes, i cant show the same. I created a division as shown below,
<div id="loader">
<div id="loaderPanel">
</div>
<div id="loaderImage">
<div id="loaderText">
<b>Please Wait...</b>
</div>
<img src="images/loader.gif"/>
</div>
</div>
Also, here is my CSS
#loaderPanel {
background-color: white;
display: block;
height: 100%;
left: 0;
opacity: 0.8;
position: fixed;
top: 0;
width: 100%;
z-index: 1001;
}
#loaderImage {
background-color: transparent;
left: 48%;
position: fixed;
top: 48%;
z-index: 1002;
}
#loaderImage img{
height:22px;
margin-left:4px;
margin-top:0px;
width:119px;
}
#loaderText{
font-family:'Verdana';
font-weight:bold;
font-size:0.9em;
float:left;
}
This is the piece of code i used to make the DIV visible & invisible.
DOM.getElementById("loader").getStyle().setDisplay(Display.NONE);
DOM.getElementById("loader").getStyle().setDisplay(Display.BLOCK);
Can anyone please suggest me a better way to show a loading GIF image for History Changes?
YOu should implement HistoryListener and show the gif when the onModuleLoad() method is called:
http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/com/google/gwt/user/client/History.html
I got the Answer,
It was not showing the Loading Image because the execution locally was much faster. But when it comes to production mode, i found that, it is showing a loading image for a while.
Since my client strictly needs to show the loader, he suggested me to add a small delay. So i added the delay inside a Timer Scheduled. By the time it shows the loader, i did the Pre-Fetching of the Images and other objects used in the page.
So i mark my question as Closed...
Related
I dunno how exactly I can explain my issue or if the title is specific enough.
But what I want to do is for example I have a game like Tic Tac Toe and if the game finish a message should pop up the entire screen which block any other interactions except there is a button only.
Like that:
I think something with display: ???
Ive made a simple example for you how it could be done:
<head>
<style>
.content {
color: red;
}
.overlay {
z-index: 1;
width:100vw;
height: 100vh;
position: absolute;
top: 0;
left:0;
background-color:black;
opacity: 0.8;
}
.msg {
background-color: white;
width: 70px;
padding: 50px;
font-weight: bold;
text-align:center;
position: absolute;
top:40%;
left: 45%;
}
</style>
</head>
<body>
<p class="content">some content</p>
<div class=overlay>
<p class="msg">TEST</p>
</div>
</body>
</html>
this shows a black overlay over the complete Screen with a "TEST"-Message, you can add more Items like Buttons to the "overlay"-div if you want to.
But keep in mind, to use the "position: absolute;" attribute.
You can show or hide it by setting the "display: none" (hide) css-attribute to the "overlay"-div or setting "display: revert;" to show it
You need to create a fullscreen overlay.
Link: https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp
Then you can add a Javascript event so that your quiz restarts when the user clicks the restart button. Hope this helps!
You might want to look at this post, How can I disable an entire HTML page on an event like in the case of JavaScript alert? I found it just by searching your question on Google. You'll probably need to use jquery for the solution.
I'm working on a project in which I'd have a Google Map on a page on which a user has to mark a specific location. On non-touch devices, draggable markers that return coordinates on drop, solves this problem.
However, the project I'm creating requires this functionality to also work optimally on mobile. Does anyone have an idea of a nice alternative to drag and drop to get coordinates on a map?
Please note that the locations that are selected will not be related to addresses, so I cannot reverse geocode addresses.
Any help is appreciated.
tl;dr; I need a touch-friendly way for users to mark a specific location on a Google map to get its coordinates.
As geocodezip pointed out, the standard drag events still work on mobile. However, I prefer a different approach. Using drag events on touch devices feels counter intuitive. The users thumb is on the pointer and they cannot see where they drop it. Users need to drag the map, and also drag the pointer, which is a hassle on a small screen.
I've found a solution with a centered image overlay, without using images.
The HTML of my map is as follows:
<div id="map">
<div id="map_canvas" style="width:100%; height:400px"></div>
<div id="cross"></div>
</div>
Then I place the cross div over the map like so:
#map {
position: relative;
}
#cross {
z-index: 9999 !important;
position: absolute;
top: 50%;
width: 100px;
height: 100px;
left: 50%;
margin-left: -50px;
margin-top: -50px;
display: block;
}
Then I create a crosshair with some CSS-magic:
#cross:before, #cross:after {
content: "";
position: absolute;
z-index: -1;
background: #d00;
opacity: .5;
}
#cross:before {
left: 50%;
width: 30%;
margin-left: -15%;
height: 100%;
opacity: .5;
}
#cross:after {
top: 50%;
height: 30%;
margin-top: -15%;
width: 100%;
opacity: .5;
}
By using ´pointer-events:none´ in CSS, any mouse or touch events should pass right through. Haven't tested in legacy browsers though.
#cross, #cross:before, #cross:after {
pointer-events: none;
}
Please find my complete solution here:
http://jsfiddle.net/4vrzgrx1/2/
My answer builds on this related question:
Google Maps transparent image overlay
Hope this can be useful for some people.
I'm trying add a simple text watermark that I want to appear for each page that it will get printed on and look reasonable on Firefox, IE and Chrome.
I've gone through all the related threads that I could find and have applied the suggested answers, but to no avail. Either it appears fine on every page, but doesn't show on the first page (Firefox). Or it only appears on the first page (Chrome). Or doesn't show at all.
I was wondering, is there a standard way to do css watermarks that works for all browsers that I may have missed somehow?
For those curious as to what my html/css looks like at the moment:
<div class="watermark">This is a watermark!</div>
#media print {
.watermark {
display: inline;
position: fixed !important;
opacity: 0.25;
font-size: 3em;
width: 100%;
text-align: center;
z-index: 1000;
top:700x;
right:5px;
}
}
Any help is much appreciated!
Edit: This isn't just for watermarking images, otherwise as suggested I should use an image editor. This is for watermarking pages of document content (sections of text of various sizes).
The real problem is that you need a .watermark at the bottom of each printed page, but CSS has no concept of these printed pages.
The best you could probably do is to use the page-break-after CSS attribute to force a page break at certain points, then you could position your watermark just before that.
Something like (untested):
#media all {
.watermark {
display: none;
background-image: url(...);
float: right;
}
.pagebreak {
display: none;
}
}
#media print {
.watermark {
display: block;
}
.pagebreak {
display: block;
page-break-after: always;
}
}
<body>
some content for page 1...
<div class="watermark"></div>
<div class="pagebreak"></div>
some content for page 2...
<div class="watermark"></div>
<div class="pagebreak"></div>
</body>
Really I think those 2 classes could just be the same element, but this seemed more understandable in code.
The down side here of course is that you need to manually specify where each page break happens, and realistically, if someone prints your webpage on a 4"x6" notecard, its going to be radically different than standard size paper. But still, it's a step in the right direction.
You can't do this in css, simply because it won't work.
Think of this, the user just removes your css, gets your image URLs and copies the images, without the watermark. Right click 'save image url' will also bypass css.
There are two good ways to add watermarks that are fail-safe.
Edit the actual images
If you have control over the images, such as if you are building a photography portfolio, just batch process them in your image editor and add the watermarks before you upload them to the web.
This is a good idea because then your images are ready watermarked regardless of where you use them, so they're social media / promo pack ready etc.
Do it on request
Set up an .htaccess rule that intercepts any image requests and redirects them via some server side code that uses an image processing library to add the watermark and return the binary image data. You can cache a watermarked image with a hash code and check for a watermarked version existing first that will allow you to bypass the processing.
This means that any image request, regardless of whether it comes from css, HTML, or a direct URL will serve a watermarked image. Do use some logic to skip any images used for the decoration of your site, otherwise you'll get watermarked in unexpected places!
The advantage here is that the original image is untouched, if you update your watermark, perhaps as part of a rebranding, you won't need to update all your images.
Another advantage of this approach is that you can apply it to any images, even if you don't create them - for example, if you have users uploading images to your site. Care should be taken with this however, before you watermark, make sure you have the right to watermark the image.
issue reason.
print not support background-image.
This is my solution.
1.Absoluted position for Main elements(need to print div).
2.add element
<style>
.mainContend{
position: absolute;
top: 0;
}
.watermark{
opacity: .8;
}
</style>
<script>
var addWatermark = function () {
var bodHeight = document.body.scrollHeight;
//imge size is 1000*400px
var imgNum = Math.floor(bodHeight/400) ;
var template = '<img src="../img/icon/watermark.png" class="watermark">';
var innerHTML;
//create image number
for(var i = 0;i < imgNum;i++){
innerHTML +=template;
}
// innerHTML.appendTo("#reportContent);
$("#reportContent").append(innerHTML);
}
window.onload = addWatermark;
</script>
<div id="reportContent">
<div class="mainContend" id="mainContend">
content reportContentreportContentreportContent
</div>
</div>
Here is how I successfully managed to use watermark on every page in print preview
HTML:
<!-- place this only once in page -->
<div style="opacity: .5; filter: alpha(opacity=50);" class="watermark"></div>
<!-- place this in your table thead -->
<div style="opacity: .5; filter: alpha(opacity=50);" class="watermark_print"></div>
CSS:
div.watermark_print{
display: none;
width: 100%;
height: 100%;
background: url("{{{watermark}}}") no-repeat;
background-position: center;
z-index: 99999999;
border: none !important;
background-size: 400px !important;
}
div.watermark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("{{{watermark}}}") no-repeat;
background-position: center;
z-index: 99999999;
border: none !important;
background-size: 400px !important;
}
table {
width: 100%;
table-layout: fixed;
border-spacing: 0;
}
#media print {
div.watermark {
display: none;
}
div.watermark_print {
display: block;
position: fixed;
inset: 0;
}
}
That should do the trick, we have two watermark, one in HTML page review and another hidden in normal view but in print preview, we show it and because we are repeating table header in every page so we have this watermark on every page.
I am making an application that uses a website as an interface.
The html look like the following:
setTimeout(function() {
$('#page-1').removeClass("show-me");
$('#page-2').addClass("show-me");
}, 1000);
setTimeout(function() {
$('#page-2').removeClass("show-me");
$('#page-3').addClass("show-me");
}, 2000);
div#main {
position: absolute;
min-width: 300px;
width: 100%;
height: 100%;
background-color: #ffa;
}
div#main > div {
position: absolute;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
transition-delay: 0s;
transition-duration: 200ms;
transition-property: "opacity,visibility";
transition-timing-function: ease;
}
#page-1 {
background-color: #00f;
}
#page-2 {
background-color: #0f0;
}
#page-3 {
background-color: #f00;
}
div#main > div.show-me {
opacity: 1;
visibility: visible;
}
<div id="main">
<div id="page-1" class="show-me">Page 1</div>
<div id="page-2">Page 2</div>
<div id="page-3">Page 3</div>
</div>
Each page contains data the same way as you would navigate to www.example.com/page-1, www.example.com/page-2 or www.example.com/page-3.
However I want to stay at www.example.com and navigate trough pages by fading them in and out.
I got them placed over one another with position: absolute;top:0;left:0; but this way main won't know the height of the page since it's content is absolute.
Therefore i'd like a way to make them fade in and out wiouth the use of position or negative margins (since the height of each page is dynamic due to content)
Or maybe you have another way of achieving this effect?
This is for an application, not a webpage that should be indexed by google or something else. So no SEO worries :)
EDIT:
Added a better example.
I would have to recomend jQuery Mobile library for this. It's pretty much what it was built for. I have been using it recently to make a custom app for our company and it's really quite good. Although a little bit tricky to pick up initially it's not as steep a learning curve as some other libraries I have used in the past.
(would have made this a comment, but I cant :-( )
Solved the problem by adding position: static; to the 'show-me' class.
This way the main knows the height of it's 'active' child!
When navigating first the active page class 'show-me' is removed, so it becomes position absolute again and starts to fade-out.
The next page gets the class 'show-me'.
Now becomes static so the main knows the new page's height and follows it.
And the new page fade's in as it should!
For a short moment (which you cannot see as far as I tested) the main div has no content and becomes small again. If it contains a background image you may see a little flicker but I think it's to fast for that so it shouldn't be noticeable.
I have a image where text/link is overlayed on top. My problem is that sometimes the text in the foreground will hide the link in the image in the background. I assume this is because the text box forms an invisible rectangle around the text, thus creating a region that appears it should belong to the image but is actually being covered by the text. I am wondering if it is possible that when I mouse over this region, I will be linking to my image link as oppose to my text link (see illustration).
http://jsfiddle.net/WHpMr/
Try this, i.e. put your tag inside : http://jsfiddle.net/WHpMr/3/
HTML:
<div class="ad">
<span class="link middle right">my text link abcdefg<br>meow<br>meow<br>meow</span>
<img src="http://www.placekitten.com/320/200">
</div>
CSS:
.ad {
position: relative;
height: 200px;
width: 320px;
}
.link {
position: absolute;
padding: 20px;
pointer-events: none;
}
.inline-link {
pointer-events: all;
}
.top { top:0%; }
.middle { top:33%; }
.bottom { top:66%; }
.left { text-align:left; left:0%; }
.center { text-align:center; margin:0 auto; width:100%; }
.right { text-align:right; right:0%; }
You are correct in thinking that. The element will create a block containing the content. You could use the Map Element if you are hell bent on doing that.
If you make each line its own link, that will minimize the problem. If you really want to go all out, you can make each word its own link. But you're getting into stuff that's easier to do with some JS automation instead of manually in the HTML.
EDIT: Here's an attempt at a vanilla JS solution that works for your simple example, at least:
http://jsfiddle.net/aLN2d/35/