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;
});
});
Related
Hi everyone~ I just learned javascript recently and want to practice doing a project!
My English is not good, I try to describe my problem completely.
I hope to click the button to open the menu. Click again on the button and the blank space outside the menu to close the menu, but I still don’t know how to judge to complete this project. I would like to ask everyone to help. Thank you.
let el = document.querySelector('.click').getAttribute('class');
let menu = document.querySelector('.menu');
// el.onclick = function(){
// el.getAttribute('class','showmenu')
// }
body{
min-height:100vh;
display: flex;
justify-content:center;
align-items:center;
}
.click{
padding:16px;
background-color: #ccc;
text-decoration:none;
border-radius:10px;
font-size: 18px;
color:#fff;
&:hover{
transition:0.3s;
background-color: #222;
}
}
.menu{
position:absolute;
top:380px;
left:480px;
background-color: #71ff05;
border-radius:4px;
display: none;
.menu__item{
padding:36px;
text-align:center;
border-bottom:1px solid #222;
&:hover{
background-color: #489b09;
}
}
}
.showmenu{
display:block;
}
<div class="demo">
button
<ul class="menu">
<li class="menu__item">test1</li>
<li class="menu__item">test2</li>
<li class="menu__item">test3</li>
</ul>
You need to add event listener to button to open the menu and add event listener on window to close the menu.
const el = document.querySelector('.click')
const menu = document.querySelector('.menu');
el.onclick = function(){
menu.classList.toggle("showmenu");
}
window.onclick = function(event) {
if (!event.target.matches('.click')) {
menu.classList.remove('showmenu')
}
}
See my codepen example
Edit
As you asked in the comment, if you want to prevent to menu from closing if the users click on menu, use need to add exception on the window.onClick
window.onclick = function(event) {
if (!event.target.matches('.click')&&!(event.target.matches('.menu')||event.target.matches('.menu__item'))) {
menu.classList.remove('showmenu')
}
}
I have update it in the same codepen example as well.
You should use toggle
let menu = document.getElementsByClassName("menu")[0]
document.getElementsByClassName("click")[0].onclick =function() {
menu.classList.toggle("showmenu");
};
body{
min-height:100vh;
display: flex;
justify-content:center;
align-items:center;
}
.click{
padding:16px;
background-color: #ccc;
text-decoration:none;
border-radius:10px;
font-size: 18px;
color:#fff;
&:hover{
transition:0.3s;
background-color: #222;
}
}
.menu{
position:absolute;
top:0px;
left:480px;
background-color: #71ff05;
border-radius:4px;
display: none;
.menu__item{
padding:36px;
text-align:center;
border-bottom:1px solid #222;
&:hover{
background-color: #489b09;
}
}
}
.showmenu{
display:block;
}
<div class="demo">
<button class="click">button</button>
<ul class="menu">
<li class="menu__item">test1</li>
<li class="menu__item">test2</li>
<li class="menu__item">test3</li>
</ul>
I created a warning message or div generally that shows when we checkout for domain purchase.
But when I create my own CSS
The lock icon does must show to the left of the text but shows inline.
Add float:left; to <i>
And Mention approx height to occupy space for <i>. I have given height: 100px; here.
.ftralert{
width:50%;
padding:15px;
margin-bottom:20px;
border:1px solid transparent;
border-radius:0px
font-family:sans-serif;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%
}
.ftralert-warning{
color:#8a6d3b;
background-color:#fcf8e3;
border-color:#faebcc;
font-family:sans-serif;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%
}
.ftralert-warning i {
float:left;
margin-right:30px;
height: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="ftralert ftralert-warning">
<i class="glyphicon glyphicon-lock" style="font-size:24px;"></i>
This ORDER FORM is provided in a secure environment and to help protect against fraud your current IP address (<strong>223.187.232.6</strong>) is being logged.
</div>
Hope this helps :)
You added your icon inline. Make it a separate div, as well as the text, and set the divs to inline block with a set width that adds up to 100% (for example, 20% & 80%, adjust to your needs).
https://www.w3schools.com/css/css_inline-block.asp
https://jsfiddle.net/kh2yn0xa/6/
.ftralert{
padding:15px;
margin-bottom:20px;
border:1px solid transparent;
border-radius:0px
font-family:sans-serif;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
/*remove inline gap*/
font-size: 0;
}
.ftralert-warning{
color:#8a6d3b;
background-color:#fcf8e3;
border-color:#faebcc;
font-family:sans-serif;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%
}
.ftralert > div {
display: inline-block;
vertical-align: top;
font-size: 12px;
}
/* adjust for your icon */
.ftralert > div:first-child {
width: 20%;
}
.ftralert > div:last-child {
width: 80%;
}
<div class="ftralert ftralert-warning">
<div>
<i class="glyphicon glyphicon-lock" style="font-size:24px;">Icon</i>
</div>
<div>
This ORDER FORM is provided in a secure environment and to help protect against fraud your current IP address (<strong>223.187.232.6</strong>) is being logged.
</div>
</div>
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>
So I've been playing around with web development and I've noticed that in Firefox, my elements are getting pushed to the right versus down, which is what it should be (which happens in Chrome).
I am by no means a Guru. Is there any way to prioritize wrapping versus pushing? I have tried inserting line breaks and setting both to display:block. That does not seem to be the problem.
This is the CSS for the bar:
.tiq-editor-bar
{
z-index:1;
overflow:hidden;
float:left;
width:100%;
border-top: solid 1px #AAA;
text-align:center;
display:none;
position:relative;
color:#AAA;
font-weight:normal;
font-size:14px;
}
This is the CSS for the gallery wrapper (the white out-lined thing)
#tiq-ui-gallery-wrapper
{
min-height: 500px;
background:url(../img/portfolio/empty.png) center no-repeat;
overflow:hidden;
}
And for the gallery itself:
.tiq-theme-gallery
{
width:600px;
height:400px;
resize:vertical;
border:solid 1px #eee;
overflow:auto;
}
Thanks!
EDIT: The gallery is positioned relatively, BTW. I am using Galleria and that gives the container:
.galleria-container {
position: relative;
overflow: hidden;
background: #000;
display:block;
}
EDIT EDIT:
Here is a JSFiddle:
http://jsfiddle.net/RyBz9/2/
Change
.tiq-editor-bar
{
float:left;
}
to
.tiq-editor-bar
{
float:none;
}
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..