I am developing an application which requires that user must be notified about some background events i.e. invitation from other user, reminder time out etc.
Whenever the event occurs the controller will be notified, and a small window should be displayed to the user.
How should I proceed to achieve this. Which technology / tool will help me. I am using jQuery, JSF 2.0 and Spring 3.0.
this will give a notification similar to the stackoverflow
jQuery
$("#notification").fadeIn("slow").append('your message');
$(".dismiss").click(function(){
$("#notification").fadeOut("slow");
});
HTML
<div id="notification" style="display: none;">
<span class="dismiss"><a title="dismiss this notification">x</a></span>
</div>
CSS
#notification {
position:fixed;
top:0px;
width:100%;
z-index:105;
text-align:center;
font-weight:normal;
font-size:14px;
font-weight:bold;
color:white;
background-color:#FF7800;
padding:5px;
}
#notification span.dismiss {
border:2px solid #FFF;
padding:0 5px;
cursor:pointer;
float:right;
margin-right:10px;
}
#notification a {
color:white;
text-decoration:none;
font-weight:bold
}
Also take a look at mplungjan's answer on how to listen to server updates and message load
HTML:
<input type="button" id="pop" value="Submit"/>
<div id="popup">
<div id="topbar"> TITLE..</div>
<div id="content">Here is you content...</div>
<input type="button" id="ok" value="OK"/>
</div>
CSS:
#popup { background:#ccc; -moz-border-radius: 10px; width:300px; height: 200px; padding: 5px; position: absolute; left: 50%; margin-left: -150px; z-index: 500; display:none }
#topbar { background:#ddd; -moz-border-radius: 10px; padding:5px; height:20px; line-height:20px }
#content { padding:5px; -moz-border-radius: 10px; text-align:center }
#ok { position: absolute; left: 140px; top: 180px }
JQUERY:
$(function(){
$('#pop').click(function(){
$('#popup').fadeIn().css('top',$(document).height()/2);
});
$('#ok').click(function(){
$('#popup').fadeOut();
});
});
Using code from #Anu's suggestion - my fiddle, you can simply add a poll
$(document).ready(function() {
$(".dismiss").click(function(){$("#notification").fadeOut("slow");});
setInterval(function() {
$.get("ping.jsp?userid=<%= userID %>",function(message) {
if (message) $("#notification").fadeIn("slow").html(message);
});
,10000);
})
the message could include a timestamp to see if you had notified earlier instead of sending an empty message if no notificati9on is needed
Alternatives: Long poll or Comet
Jquery ui dialog is what you are looking for. It will come in handy for you. Although there are lots of other plugin available. This is the simplest..
Related
I would like to show an animated gif after a form button is clicked.
UPDATE: I found a solution here: http://www.corelangs.com/css/box/fulloverlay.html
I combined that with an animated gif (instead of the login form) to get the effect I wanted.
I used the .show() method in my script like this:
$(document).ready(function () {
$("#my_submit").click(function(e) {
console.log("please wait...");
$( "#processing_gif" ).show();
$( "#cover" ).show();
In my form I used these divs:
<div id="processing_gif"></div>
<div id="cover"></div>
And I used this CSS:
#processing_gif {
position:fixed;
top:0;
left:0;
z-index:999;
width:100%;
height:100%;
opacity:0.8;
background: url('/files/animation_processing.gif') center center no-repeat;
display:none;
}
#cover{
position:fixed;
top:0; left:0;
background:rgba(256,256,256,0.9);
z-index:1;
width:100%;
height:100%;
display:none;
}
Here is the full original tutorial:
<!DOCTYPE html> <html > <head> <style type="text/css"> .button { width: 150px; padding: 10px; background-color: #FF8C00; box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2); font-weight:bold; text-decoration:none; } #cover{ position:fixed; top:0; left:0; background:rgba(0,0,0,0.6); z-index:5; width:100%; height:100%; display:none; } #loginScreen { height:380px; width:340px; margin:0 auto; position:relative; z-index:10; display:none; background: url(login.png) no-repeat; border:5px solid #cccccc; border-radius:10px; } #loginScreen:target, #loginScreen:target + #cover{ display:block; opacity:2; } .cancel { display:block; position:absolute; top:3px; right:2px; background:rgb(245,245,245); color:black; height:30px; width:35px; font-size:30px; text-decoration:none; text-align:center; font-weight:bold; } </style> </head> <body> <div align="center"> <br><br><br><br> Click here to Log In </div> <div id="loginScreen"> × </div> <div id="cover" > </div> </body> </html>
You can just add $("my_image_selector").show() before $.ajax(params) and hide it when "success" or "error" occurs by adding there $("my_image_selector").hide()
Or you can use .ajaxStart and .ajaxStop. see jquery docs
ah jquery - sigh.
You're going to have to tweak this to get the styling/presentation you want, but I'm going to point you in the general direction using plain old JavaScript.
Add an image tag with the gif you want to use on the page where you want it
< img src='loading.gif'/>
Add an id and "display:none" to the image style to hide it
<img id='loadingImg' style='display:none;' src='loading.gif'/>
get rid of the onclick handler in your submit button tag and instead put code like this below your form
<script>
//listen for click on your button
document.getElementById('add-all-to-cart').addEventListener('click',
function(event){
//this is the code that runs when the button is clicked
//get the button we clicked on
var target=event.target||event.srcTarget;
//set that button to disabled
target.disabled=true;
//display the loading image
document.getElementById('loadingImg').style.display='block';
}
</script>
I customized my input type="file" just like Facebook upload instead of textbox and a button(default input type="file") I make my input file a button only without the textbox where you can see the path of the file. I'am planning to add a span or a p tag next to my customized input file to show the path of the file.
How can I print the file path to my span tag when I choose a file?
html code
<!doctype>
<html>
<head>
</head>
<body>
<div class="browse-wrap">
<div class="title">Choose a file to upload</div>
<input type="file" name="upload" class="upload" title="Choose a file to upload">
</div>
<span class="upload-path"></span>
</body>
</html>
css code
div.browse-wrap {
top:0;
left:0;
margin:20px;
cursor:pointer;
overflow:hidden;
padding:20px 60px;
text-align:center;
position:relative;
background-color:#f6f7f8;
border:solid 1px #d2d2d7;}
div.title {
color:#3b5998;
font-size:14px;
font-weight:bold;
font-family:tahoma, arial, sans-serif;}
input.upload {
right:0;
margin:0;
bottom:0;
padding:0;
opacity:0;
height:300px;
outline:none;
cursor:inherit;
position:absolute;
font-size:1000px !important;}
span.upload-path {
margin:20px;
display:block;}
Thanks!
DEMO
$('input[type="file"]').change(function(){
$(this).closest('.browse-wrap').next('.upload-path').text(this.value);
});
Demo: get rid of C:\fakepath\ in Chrome
Or using the HTML5 file API
DEMO
$('input[type="file"]').change(function(){
var f = this.files[0];
var name = f.name;
$(this).closest('.browse-wrap').next('.upload-path').text(name);
});
It is currently impossible to get the full path name in an user's computer in updated browsers. Quoting this answer:
[...] That the full file path is being sent in MSIE and other ancient webbrowsers is due to a security bug. The W3 and RFC2388 specifications have never mentioned to include the full file path. Only the file name. Firefox is doing its job correctly.
Think about privacy for a moment: would you like sites collecting (part of) your file system structure as a side-effect for every file you upload?
The filename is, most often, enough to indicate to the user which files s/he has selected, henceforth it should suffice for your use case.
Accessing a file input's value property in the current stable Chrome release gives C:\fakepath\realfilename.ext while Firefox gives realfilename.ext. You can normalize it to only the file name this way:
$('input[type="file"]').change(function(){
var filename = this.value.match(/[^\\\/]+$/, '')[0];
alert(filename);
});
Demo
I think OP is referring to the filename which is normally found next to the default file button. As per stated by #fabricio-matte it is not possible to access file path from browsers due to security restrictions. Nonetheless, back to my first assumption, I think the solution is simply combining a little bit of JavaScript just to detect changes in the input and set the corresponding span with the default text used by the default browser's button, so let's put all pieces together:
OP HTML
<div class="browse-wrap">
<div class="title">Choose a file to upload</div>
<input type="file" name="upload" class="upload" title="Choose a file to upload">
</div>
<span class="upload-path"></span>
OP CSS with some improvements
div.browse-wrap {
top:0;
left:0;
margin:20px;
cursor:pointer;
overflow:hidden;
padding:20px 60px;
text-align:center;
position:relative;
background-color:#f6f7f8;
border:solid 1px #d2d2d7;}
div.title {
color:#3b5998;
font-size:14px;
font-weight:bold;
font-family:tahoma, arial, sans-serif;}
input.upload {
right:0;
margin:0;
bottom:0;
padding:0;
opacity:0;
height:300px;
outline:none;
cursor:inherit;
position:absolute;
font-size:1000px !important;}
span.upload-path {
text-align: center;
margin:20px;
display:block;
font-size: 80%;
color:#3b5998;
font-weight:bold;
font-family:tahoma, arial, sans-serif;
}
JavaScript to Detect Input Changes
// Span
var span = document.getElementsByClassName('upload-path');
// Button
var uploader = document.getElementsByName('upload');
// On change
for( item in uploader ) {
// Detect changes
uploader[item].onchange = function() {
// Echo filename in span
span[0].innerHTML = this.files[0].name;
}
}
CodePen Demo: http://codepen.io/anon/pen/isJqx
That way, you make sure the span gets updated every time the user has changed the file, no security restrictions broken, no need for paths, because anyway there were never paths shown in the first place.
.custom{
position: relative;
z-index: 1;
border: 1px solid #ccc;
cursor:pointer;
width: 30%;
height: 30px;
}
.custom::after{
content: "Upload";
position: absolute;
right: 0px;
background-color: rgba(51, 122, 183, 1);
height: 65%;
padding: 5px 10px;
color: #fff;
display: block;
font-size: 18px;
width: 50px;
text-align: center;
top: 0;
}
.custom .file-text{
display: block;
position: absolute;
padding: 2px 20px;
color: #f00;
font-weight: bold;
font-size: 20px;
}
.custom .file{
display: inline;
width: 100%;
height: 100%;
z-index: 9999;
opacity: 0;
cursor: pointer;
padding: 0;
position: relative;
}
You must call a library jquery before code
$(function () {
$('.custom input[type="file"]').on("change", function() {
$('.custom .file-text').text($(this).val());
});
});
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="custom">
<span class="file-text">chosse file</span>
<input type="file" class="file"></input>
</div>
</body>
</html>
Is it possible to switch the display:block part of #about{ with display:none part of #downloads with a OnClick?
#about {
position:relative;
-moz-border-radius: 5px;
border-radius: 5px;
width:800px;
height:450px;
margin-left:50px;
margin-right:50px;
border:solid 2px #000000;
background-color:#448efc;
margin-bottom:5px;
display:block
}
#downloads {
position:relative;
-moz-border-radius: 5px;
border-radius: 5px;
width:800px;
height:450px;
margin-left:50px;
margin-right:50px;
border:solid 2px #000000;
background-color:#448efc;
margin-bottom:5px;
display:none
}
heres my OnClick Code<a href="#downloads" onclick="somthing?"> im not sure if its possible do any of you know how?
You can change the css using jquery.
<a href="#downloads" onclick="$('#about').css("display", "none");">
I would suggest something like this:
#about, #downloads {
/* all of the CSS rules EXCEPT display here */
}
.hidden {display:none}
Then your HTML should be:
<div id="about">...</div>
<div id="downlaods" class="hidden">...</div>
Now your link can be:
<a href="#downloads" onClick="document.getElementById('about').className = 'hidden';
document.getElementById('downloads').className = '';">Downloads</a>
It seems you are actually looking for jQuery toggle(). because it makes no sense keeping onclick event on the element which has already display: none.
<div id="about" onclick="$('#downloads').toggle()"></div>
<div id="downloads" onclick="$('#about').toggle()"></div>
Working Fiddle
Seems like you want to hide #about:
$('#downloads').click(function() {
$('#about').hide();
});
With this, there's no need to add onclick attributes.
I had to change my quotesmarks, code below fully works for me....
<form action="uploadprofileaccept.php"
class="dropzone" onclick="$('#imageform').css('display', 'none');">
</form>
Is there any way I can know that a user clicked on the Rate & Review button in the charms/settings bar?
Note: This button is automatically added to Apps in the Windows Store. I don't have any control over the button.
I thought that it would be ideal to show a message explaining to them that they shouldn't use the rate and review button for support requests since we cannot respond to that.
I'm not sure if it's what you're looking for, but you could use something similar to SO that notifies the user to log in or sign up when an unregistered user wants to vote a post up or down.
<div id='message' style="display: none;">
<span>Hey, This is my Message.</span>
X
</div>
#message {
font-family:Arial,Helvetica,sans-serif;
position:fixed;
top:0px;
left:0px;
width:100%;
z-index:105;
text-align:center;
font-weight:bold;
font-size:100%;
color:white;
padding:10px 0px 10px 0px;
background-color:#8E1609;
}
#message span {
text-align: center;
width: 95%;
float:left;
}
.close-notify {
white-space: nowrap;
float:right;
margin-right:10px;
color:#fff;
text-decoration:none;
border:2px #fff solid;
padding-left:3px;
padding-right:3px
}
.close-notify a {
color: #fff;
}
// And this is javascript (using jQuery):
$(document).ready(function() {
$("#message").fadeIn("slow");
$("#message a.close-notify").click(function() {
$("#message").fadeOut("slow");
return false;
});
});
It seems when I use "window.location" as a means to redirect to the API when my longer running transaction is does not ensure the animation for the spinner gif I have works. Any ideas how to fix this? ie. I see the gif ok but it not being animated. Is there another way in Javascript to force the redirect once the gif animation starts?
<div id="loading">
</div>
<script type="text/javascript" charset="utf-8">
function show_spinner() {
$("form").hide()
$("loading").show()
window.location = "/weekends/display"
}
window.onload=show_spinner;
</script>
CSS:
#loading {
width:100px;
height: 100px;
position: fixed;
top: 50%;
left: 50%;
background:url(/images/ajax-loader.gif) no-repeat center #fff;
text-align:center;
padding:10px;
font:normal 16px Tahoma, Geneva, sans-serif;
# border:1px solid #666;
margin-left: -50px;
margin-top: -50px;
z-index:2;
overflow: auto;
}
Unless someone can show me otherwise I'm proposing it is not possible....
I have solved my problem a different way however per this post