I love how http://www.squarespace.com/templates/?q=minsk does their signup process -- When you click on "start with this template", the entirety of the viewport is taken over, and the signup box shows up.
Does anyone know of a script that already does something similar to this?
You can do it very easily with simple javascript.
HTML:
<div id="trigger">Click to open</div>
<div id="overlay"></div>
<div id="login">
<h1>title</h1>
<form action="/login" method="POST">
<label>Username:
<input type="email" name="username" />
</label>
<label>Password:
<input type="password" name="pass" />
</label>
<button>Login</button>
</form>
</div>
CSS:
#overlay, #login {
display: none;
}
#overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: black;
opacity: 0.7;
filter:alpha(Opacity=70);
z-index: 999;
}
/* Change styles as you like beyond here, make sure the z-index of #login be always higher than #overlay */
#login {
position:fixed;
top: 5%;
left: 35%;
width: 30%;
height: 50%;
background: #555;
padding: 5px;
color:white;
z-index: 1000;
}
#login h1 {
margin: 0.5em 0;
}
#login form input {
width: 90%;
padding: 5px;
}
#trigger {
width: 100px;
padding: 5px;
background: #ccc;
}
Javascript (jQuery):
$(function(){
$('#trigger').click(function(){
$('#login').fadeIn(500);
$('#overlay').fadeIn(500);
});
$('#overlay').click(function(){
$('#login').fadeOut(500);
$('#overlay').fadeOut(500);
});
});
You can click the overlay to quit the window.
See the example!
This is called Modal Window. You can achieve it using jQuery or JavaScript. For a simple start, you can check out the tutorial given by Queness's Simple jQuery Modal Window Tutorial.
The code is very simple. First you have to build your HTML.
<!-- #dialog is the id of a DIV defined in the code below -->
Simple Modal Window
<div id="boxes">
<!-- #customize your modal window here -->
<div id="dialog" class="window">
<b>Testing of Modal Window</b> |
<!-- close button is defined as close class -->
Close it
</div>
<!-- Do not remove div#mask, because you'll need it to fill the whole screen -->
<div id="mask"></div>
</div>
Some CSS for the presentational look and feel.
/* Z-index of #mask must lower than #boxes .window */
#mask {
position:absolute;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:fixed;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
/* Customize your modal window here, you can add background image too */
#boxes #dialog {
width:375px;
height:203px;
}
And finally, JavaScript for the interactions.
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask, .window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
You can see a working demo of this project hosted at Simple jQuery Modal Window Examples from Queness WebBlog. Click on the Simple Window Modal link on that page.
Came across this while searching for a similar situation I have. I have a piece of custom javascript code that I'm using with my SS6 site. You'll have to forgive me, as I am a designer & not a developer.
Site in question:
http://tentenbtc.com
Currently, after a user clicks "Count Me In" a popup window appears that allows said user to signup. Everything works fine and all, but the popup is just a .png with some input fields & a submit button--not very elegant, and not responsive. I would like to replace the popup window with a modal that dims the background, and this thread looks like the right place to start solving my approach. Btw, the code is inline and formatted to fit into a SS codeblock.
Code for the javascript widget:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://www.parsecdn.com/js/parse-1.0.19.min.js"></script>
<style>
.bgimg {
background-image: url("/s/bluebk.jpg");
}
#overlay_form{
position:relative;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
border: 0px solid black;
width: 640px;
height: 340px;
background-image: url("https://static.squarespace.com/static/532ccd30e4b00d0eac2a448c/t/533acaffe4b0cd1c8b92271c/1396361983567/tenfortenpopup.png");
background-repeat:no-repeat;
background-size: 100% 100%;
overflow:Hidden;
margin:0px auto;
margin-top: -344px !important;
}
.slemail{
border:0px solid white;
font-size: 22px !important;
width: 310px;
height: 40px;
font-family: "Futura-pt";
color:#ababab;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
position: absolute;
left: 34px;
bottom: 20px;
-webkit-appearance : none;
padding-left:5px;
}
.countertext{
font-family: "futura-pt";
text-transform: uppercase;
letter-spacing: 4px;
color:white;
font-size: 52.55px;
font-weight: 700;
font-style: normal;
line-height: 1;
text-align: center;
margin: 0px, auto;
margin-top: 24px;
}
.counternumber {
font-family: "futura-pt";
text-transform: uppercase;
letter-spacing: 0px;
color:white;
font-size: 100.55px;
padding:3px;
display: inline-block;
line-height: 100%;
font-weight: 700;
font-style: normal;
background: none !important;
margin-left: auto;
margin-right: auto;
margin-top: -5px;
}
.hitme {
-webkit-border-radius: 45px;
-moz-border-radius: 45px;
border-radius: 4px;
border: solid 1px Black;
display:inline-block;
width: 70%;
line-height: 1.482;
text-align: center;
font-family: "futura-pt";
font-size: 38.28px;
font-weight: 400;
font-style: normal;
background-color:#343e3d;
color:white;
letter-spacing:2px;
text-transform: uppercase;
margin: 0px, auto;
margin-top: 13px;
}
.hitmesmall:active { right: 38px }
.hitmesmall {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
display:inline-block;
width: 200px;
padding:2px 10px;
font-family: "futura-pt";
font-size: 22px;
background-color:#666666;
color:white;
letter-spacing:1px;
height:41px;
position: absolute;
right: 40px;
bottom: 20px;
border: solid 0px #343e3d;
}
input:focus{
outline:none;
}
.exitpopup
{
position: absolute;
right: 5px;
top: 4px;
}
</style>
<script TYPE="text/javascript">
//mailchimp javascript block
////////////////////////////
//Ten for Ten
var arr = {
apikey: "3865eadb82f9d9951067ff814b6fe34a-us4",
id: "9f12ac9801",
double_optin:"false",
email:{
email: "replacewithemail"
}
}
var url = "https://us4.api.mailchimp.com/2.0/lists/subscribe.json";
function mailchimp_addemail($email)
{
arr.email.email = $email;
$.ajax({
type: "GET",
url: url,
contentType: "application/json",
async: false,
cache: false,
dataType: "jsonp",
data: arr,
complete: function(jqXHR, textStatus){
// alert("Mailchimp added");
}
})
return false;
}
// end mailchimp javascript block
</script>
<script TYPE="text/javascript">
//popup javascript block
////////////////////////
function validateEmail($email)
{
var re = /\S+#\S+\.\S+/;
return re.test($email);
}
function openpopup()
{
$("#overlay_form").fadeIn(10);
$('#subscriberemail').focus();
$('#subscriberemail').val("your#email.com");
just_count();
return false;
}
function closepopup()
{
$("#overlay_form").fadeOut(10);
return false;
}
function subscribe()
{
var $email = $('#subscriberemail').val();
var $checkme = $email.toLowerCase();
if ( validateEmail($checkme) == false)
{
$('#subscriberemail').val("your#email.com");
$('#subscriberemail').focus();
return false;
}
if ( $checkme == "your#email.com" )
{
$('#subscriberemail').val("your#email.com");
$('#subscriberemail').focus();
return false;
}
// kick off the parse.com stuff
// the mailchimp call gets made on success
parse_add($email);
return false;
}
//end popup javascript block
</script>
<script TYPE="text/javascript">
//generic javascript block
// parse.com Appid and jskey
////////////////////////
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
//Ten For Ten
var parseappid = "I8bjfDP5GK8UKA509BFUQAsTRmHHgocl1ppSAwDO";
var parsejskey = "JxvgeMDJQuHCwinZjq8TBEJmx1KUd3EwtcOmSr3e";
var subscriber;
var sequence;
$( document ).ready(function() {
Parse.initialize(parseappid, parsejskey);
subscriber = Parse.Object.extend("subscriber");
sequence = Parse.Object.extend("sequence");
// lets init the subscriber count
parse_initcount();
});
</script>
<script TYPE="text/javascript">
//parse.com javascript block
////////////////////////////
function parse_addemail($email)
{
var addsubscriber = new subscriber();
addsubscriber.set("email", $email);
addsubscriber.save(null, {
success: function(object) {
parse_incrementcount();
mailchimp_addemail($email);
},
error: function(error) {
alert("parse_addemail :" + error);
}
});
};
function just_count()
{
var query = new Parse.Query(sequence);
query.get("FJ2FWGWED6", {
success: function(object)
{
object.increment("counter");
object.save();
var s = object.get("counter");
var display = numberWithCommas(s);
$("#curcount").html(display);
},
error: function(error)
{
alert("parse_incrementcount :" + error);
}
});
};
function parse_incrementcount()
{
var query = new Parse.Query(sequence);
query.get("FJ2FWGWED6", {
success: function(object)
{
},
error: function(error)
{
alert("parse_incrementcount :" + error);
}
});
};
function parse_initcount()
{
var query = new Parse.Query(sequence);
query.get("FJ2FWGWED6", {
success: function(object)
{
var s = object.get("counter");
var display = numberWithCommas(s);
$("#curcount").html(display);
},
error: function(error)
{
alert("parse_initcount: " + error);
}
});
};
// this is called on from hitmesmall submit onclick
///////////////////////////////////////////////////
function parse_add($email)
{
var query = new Parse.Query(subscriber);
query.equalTo("email", $email);
query.find({
success: function(object) {
if ( object.length == 0 )
{
parse_addemail($email);
$('#subscriberemail').val("Congrats! Thanks for Pledging!");
} else {
$('#subscriberemail').val("Email already Subscribed !");
$('#subscriberemail').focus();
}
}, error: function(error) {
alert("parse_add: " + error);
}
});
};
//end parse.com javascript block
</script>
</head>
<body>
<div class="bgimg" align=center>
<br>
<span class="counternumber" id="curcount">0</span>
<br>
<span class="countertext" id="pledged">PEOPLE HAVE PLEDGED! </span>
<br>
<button class="hitme" id="subscribe" onclick="return openpopup() ">COUNT ME IN!</button>
<br>
<br>
<br>
</div>
<!-- popup form -->
<div id="overlay_form" style="display:none">
<input id="subscriberemail" class="slemail" type="text" value="your#email.com"/>
<button id="addemail" class="hitmesmall" onclick="return subscribe()" >SUBMIT</button>
<button id="exitpopup" class="exitpopup" onclick="return closepopup()">X</button>
</div>
</body>
</html>
Related
So I have a pop up that originally showed on every webpage. After some modification to include the use of cookies to stop the webpage loading every single session, the pop up no longer shows. I can't figure out why and after extensive testing, research and just straight up asking for help I've concluded I do not have enough of an understanding on the subject.
If anyone is able to help me understand why its not working and help with a solution.
<div id='popup' style="display:none">
<div class='cnt223'>
<h1>Important Notice</h1>
<p>
Test!
<br />
<br />
OK
KO
</p>
</div>
</div>
<script>
function setCookie(cname, cvalue) {
window.document.cookie = cname + "=" + cvalue;
}
function getCookie(cname) {
var ca = decodeURIComponent(document.cookie).split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim().split('=');
if (cname == c[0] && c.length > 1) {
return c[1];
}
}
return "";
}
function checkCookie() {
if (getCookie("ageverification") == "") {
$('#popup').show();
$('#popup a.close').click(function ( event ) {
event.preventDefault();
$('#popup').hide();
setCookie("ageverification", 'true');
});
$('#popup a.goBack').click(function ( event ) {
event.preventDefault();
goBack();
});
} else {
return null;
}
}
function goBack() {
window.history.go(-2);
}
checkCookie();
CSS "This is just on the same HTML page for now"
<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p{
clear: both;
color: #555555;
/* text-align: justify; */
font-size: 20px;
font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
</style>
Is the element with id "popup" nested within (a child of) the element with id "overlay" ? If it is, the element with id "overlay" has got display:none; , meaning the popup might be displaying, but it's parent is not. Try replacing:
$('#popup').show();
with:
$('#popup, #overlay').show();
Another problem could be that the Javascript is executed before the browser added the element with id "popup" to it's DOM. Try replacing:
checkCookie();
with:
$(function () { checkCookie(); });
This is my first time to ask a question here. I'm working on migration a dojo project from version 1.6.2 to version 1.13. The application is implement on PHP
with Dojo. I have a problem of using the current application profile. There is a
login page which is using a few of dijit widgets as TextBox, ComboBox, etc.
The profile has the layer for login which is generate an optimization javascript as "login.js". When the browser renders the PHP login page it has the following error message as below. it seems it failed to load all dependencies in the right
order if I'm thinking right. Could you please help me to point out what is the
issue? I think my profile is not up to date. I have tried to set different
options in the profile but it didn't work out.
I have posted my application profile and my PHP login page and the error message from the browser below
Thanks,
Loc
dojo/parser::parse() error Error: Unable to resolve constructor for: 'dijit.form.TextBox'
at Object.<anonymous> (login.js:formatted:87)
at Object.map (dojo.js:51)
at Object._instantiate (login.js:formatted:84)
at login.js:formatted:375
at f (dojo.js:116)
at a.extend.then.then.a.then (dojo.js:118)
at Object.parse (login.js:formatted:374)
at dojo.js:47
at l (dojo.js:52)
at n (dojo.js:52)
(anonymous) # login.js:formatted:379
11:39:39.343 dojo.js:28 TypeError: dijit.byId is not a function
at showDialog ((index):38)
at d (dojo.js:53)
at l (dojo.js:52)
at n (dojo.js:52)
at p (dojo.js:54)
at HTMLDocument.k (dojo.js:54)
The following is my application profile.
dependencies = {
optimize:"closure",
layerOptimize: 'closure',
layers: [
{
name: "login.js",
dependencies: [
"dojo/parser",
"dojo/query",
"dojo/_base.declare",
"dojo/_base.fx",
"dojo._base.lang",
"dijit/form.Button",
"dijit/form.TextBox",
"dijit/form._TextBoxMixin",
"dijit/form._FormValueWidget",
"dijit/form.ValidationTextBox",
"dijit/form.ComboBox"
]
},
prefixes: [
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ],
[ "dojo", "../../dojo"]
]
}
The following is my login PHP page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Application Console</title>
<link rel="stylesheet" type="text/css" href="../../Dojo/dijit/themes/claro/claro.css"/>
<script type="text/javascript">
var dojoConfig = {
has: {
"dojo-firebug": true
},
parseOnLoad: true,
isDebug: true,
locale: 'en-us'
};
</script>
<script type="text/javascript" src="../../Dojo/dojo/dojo.js"> </script>
<?php
$login_file='/var/www/xms/Dojo/dojo/login.js';
/* Customized dojo JaveScript for UI optimization */
if (file_exists($login_file)) {
echo '<script type="text/javascript" src="../../Dojo/dojo/login.js"> </script>';
} else {
/* For backward compatibility */
echo '<script>
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.ComboBox");
</script>';
}
?>
<script>
dojo.addOnLoad(showDialog);
function showDialog() {
LoginLanding();
dojo.connect( dijit.byId("passwordId"), "onKeyUp", checkForEnterKey );
}
function handleLoginVerifyReply(response, args)
{
document.location.href= "index.php/consoleController";
}
function handleLoginVerifyErrorReply(response, args )
{
var responseText = response.responseText;
var errObj = JSON.parse(responseText);
dojo.byId("msgId").innerHTML = "<b>" + errObj.reason + "</b>";
}
function LoginLanding()
{
dojo.xhrPost({
url: "/index.php/verifyLogin/LoginLanding",
handleAs: "json",
timeout: 6000,
content: {} ,
load : function(response, args) {
if (response.status == 200)
{
handleLoginVerifyReply(response, args);
}
return response;
},
error: function(response,args) {
return response;
}
}
);
}
function verifyLogin() {
var vUsername= dijit.byId("userId").get("value");
var vPassword= dijit.byId("passwordId").get("value");
dojo.xhrPost({
url: "/index.php/verifyLogin/login",
handleAs: "text",
timeout: 60000,
content: { "usernameId" : vUsername, "passwordId" : vPassword } ,
load : function(response, args) {
handleLoginVerifyReply(response, args);
return response;
},
error: function(response,args) {
gUserNameLoggedIn="Unknown";
handleLoginVerifyErrorReply(response, args);
return response;
}
}
);
}
function cancelLogin() {
console.log("calling cancelLogin");
}
function checkForEnterKey(ev)
{
if ( ev.keyCode == dojo.keys.ENTER ) {
verifyLogin();
}
}
</script>
<style type="text/css">
.loginPageIcon {
position: absolute;
left: 0px;
top: 0px;
height: 120px;
width: 100%;
background-color: #ffffff;
}
.loginPageTabContainer {
display:flex;
align-items:center;
justify-content:center;
position: absolute;
left: 0px;
top: 120px;
margin-right: auto ;
background-image: url('/images/slide-bg-3.jpg');
height: 100px;
width: 1920px;
font: normal 20px Open Sans !important;
font-weight: bold;
color: white;
text-align:center;
}
h1.loginH1 {
position: absolute;
margin-left: auto ;
margin-right: auto ;
margin-bottom: auto ;
top: 10px ;
color: black;
}
div.DivLogin {
height: 250px;
width: 400px;
margin-left: auto ;
margin-right: auto ;
margin-top: 150px ;
margin-bottom: auto ;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 2px 2px 0 #C2C2C2;
box-shadow: 0 2px 2px 0 #C2C2C2;
background-color:#679cc7
}
span.loginTitleTxt
{
display: inline-block;
width:100%;
height: 100%;
font: 500 15px Open Sans !important;
font-weight: bold;
text-align: center;
margin: 0 auto;
margin-top: 5px ;
}
hr.loginSeperator {
position: relative;
top: 10px;
border-bottom: 1px dotted #cccccc;
color: #ffffff;
background-color: #ffffff;
height: 1px;
width: 95%;
}
.loginForm {
position: relative;
display: inline-block;
left: 50%;
top: 20px;
margin-left: -180px;
font: normal 14px Open Sans !important;
width:50%;
}
.loginTable {
display: table;
}
.loginRow {
display: table-row;
}
.loginCellLeft {
display: table-cell;
height: 30px;
padding-right: 40px;
}
.loginCellRight {
display: table-cell;
height: 30px;
width:50px;
}
.loginCellEmpty {
display: table-cell;
height: 10px;
}
.loginMsgLabel {
position: relative;
left: 100%;
margin-left: -200px;
font: normal 14px Open Sans !important;
color: #772222;
width:100%;
}
div.section.header {
margin-left: -20px;
margin-right: -10px;
background-image:url("/images/slide-bg-3.jpg");
background-position-y:-200px;
padding:0!important;
height: 210px;
margin-top:6px
}
div.section.header .container {
display:flex;
align-items:center;
justify-content:center;
height:30%
}
div.section.header h1 {
margin-top:280px;
font: normal 40px Open Sans !important;
font-weight: bold;
color: white;
max-width:90%
}
</style>
</head>
<body id="loginBodyId" class="claro" bgcolor="white" style="font-size:medium;background-size:cover" >
<div class="section header">
<div class="container">
<h1> Login Page </h1>
</div>
</div>
<div class="DivLogin">
<div> <span class="loginTitleTxt"> Login </span> </div>
<hr class="loginSeperator"></hr>
<div class="loginForm">
<div class="loginTable">
<div class="loginRow">
<div class="loginCellLeft">
<label for="userId">Username:</label>
</div>
<div class="loginCellRight">
<input type="text" trim="true" dojoType="dijit.form.TextBox" value="" name="login" id="userId" />
</div>
</div>
<div class="loginRow">
<div class="loginCellLeft">
<label for="passwordId">Password:</label>
</div>
<div class="loginCellRight">
<input type="password" trim="true" dojoType="dijit.form.TextBox" value="" name="password" id="passwordId"/>
</div>
</div>
<div class="loginRow">
<div class="loginCellLeft">
<label for="domainId">Domain:</label>
</div>
<div class="loginCellRight">
<select id="domainId" autocomplete="true" dojoType="dijit.form.ComboBox" value="Default">
<option selected="selected">default</option>
</select>
</div>
</div>
<div class="loginRow">
<div class="loginCellLeft">
</div>
<div class="loginCellRight">
<button dojoType="dijit.form.Button" onClick="verifyLogin()">Login</button>
</div>
</div>
<div class="loginRow">
<div class="loginCellEmpty">
</div>
</div>
</div> <!-- End loginTable -->
<label class="loginMsgLabel" id="msgId"></label>
</div> <!-- End loginForm -->
</div>
</body>
</html>
Thanks
Loc
Generally, the error dojo/parser::parse() error Error: Unable to resolve constructor for: 'dijit.form.TextBox' means there is an issue with the dependency. Can you check your login.js to make sure that you are referring to the TexBox correctly and also try to move that import statement up the order and see what happens?
The javascript "login.js" is the optmized script which is generated by the
build script of Dojo when it compile along with the profile above. I have
tried to re-order the TextBox but there isno luck. I think this could be
related to the configuration of Dojo profile.
Thanks,
Loc
I found out the issue. With the new dojo syntax, it's using the foward-slash in
data-dojo-type to specify the module ("dijit/form/TextBox"). My code is still
using the old syntax ("'dijit.form.TextBox"). As looking in the optimized login script, the module TextBox is defined as below
'dijit/form/TextBox':function(){
That's why I got the error message "Unable to resolve constructor for: 'dijit.form.TextBox'"
Loc
Javascript
$(function(){
$('.select-another-button').each(function(){
$(this).bind('click', function(e) {
$(this).attr('disabled','true'); //disables the button
$('#overlay').show(); //after disabling show the overlay for hover
setTimeout(function(){
$(this).attr('disabled','false'); //enables after 5mins
$('#overlay').hide(); //hide the overlay
}, 300000);
e.preventDefault();
fileBrowser(this);
return false;
});
});
});
$("#overlay").hover(function(){
$('#message').show();
},function(){
$('#message').hide();
});
CSS
.title-actions {
float: right;
height: 50px;
margin-top: 13px; }
.title-actions a {
transition: background 0.3s ease; }
.title-actions a.btn {
padding: 2px 14px;
line-height: 26px;
max-height: 28px;
position: relative;
top: -1px;
margin-left: 8px; }
.title-actions a:hover {
background: #4382b5; }
.title-actions span {
color: #444;
background: #e6e6e6;
padding: 6px 10px;
border-radius: 3px;
float: none;
position: relative;
margin-left: 6px; }
.title-actions .btn {
padding: 2px 14px;
line-height: 26px;
max-height: 28px;
position: relative;
top: -1px;
margin-left: 8px; }
.title-actions .btn-icon {
background: transparent;
position: relative;il
color: #3e5366;
text-align: center;
display: inline-block;
padding: 0 !important;
transition: color 0.3s ease;
box-shadow: none !important;
margin-top: -16px;
margin-left: 6px; }
.title-actions .btn-icon i {
font-size: 35px;
line-height: 20px;
position: relative;
top: 12px; }
.title-actions .btn-icon:hover {
color: #4382b5;
background: transparent; }
.title-actions .badge .material-icons {
font-size: 1.2em;
line-height: 0;
position: relative;
top: 4px; }
.wrapper {
display: inline-block;
}
HTML
<div class="wrapper">
<div id="overlay"></div>
<a href="#"
title="{% trans "Send email - rejected file(s)" %}"
class="btn btn-icon select-another-button"
data-url="{% url "messaging:send" request_id=object.pk %}">
<i class="material-icons">assignment_late</i>
<div class='alert alert-success' id='send-message' style="display: none;">
<p>
The message was sent to the client. Please wait 5 minutes <br> before sending the message again.
</p>
</div>
</a>
</div>
Django
I have this in my urls.py file
app_name = 'messaging'
urlpatterns = [
...
url(r'^send/(?P<request_id>[0-9]+)/$',
send, name='send'),
]
The django's method is Send button with certain features
#staff_member_required
#csrf_exempt
def send(request, request_id=None):
req= Request.objects.get(pk=request_id)
request_folders = req.folder.all_files.all()
context = []
for doc in request_folders:
if doc.meta.state == u'rejected':
context.append(doc)
if context:
ctx = {'request': req}
EmailFromTemplate('document-refusal', extra_context=ctx)\
.send_to(req.customer.user)
return HttpResponse('')
I've created a button which send an email under certain conditions. I'd like once I send a message to deactivate the button for five minutes and then display a pop-up message which will display the remaining time before they have the possibility to send the email again. The message may be 'It remains 3 minutes and 20 secondes before you may send the message again.'. This message will be displayed if and only if the cursor is on the button and nothing will happen otherwise. So far when I clicked the button, it turned off, but nothing else happened. I mean django's function is never called, .... How could I fix it so that it'll do what I want? How could I display the remaining time in that message? With JsonResponse()?
Edit :
I have another issue with setTimeout. It is easy for the client to just reload the page to skip the 5 minutes wait. By what could I substitute setTimeout so that it will not do such thing?
For getting the time left you can use something like this:
$(function(){
var timeout;
$('.select-another-button').each(function(){
$(this).bind('click', function(e) {
$(this).attr('disabled','true'); //disables the button
$('#overlay').show(); //after disabling show the overlay for hover
timeout = setTimeout(function(){
$(this).attr('disabled','false'); //enables after 5mins
$('#overlay').hide(); //hide the overlay
}, 300000);
e.preventDefault();
fileBrowser(this);
return false;
});
});
});
$("#overlay").hover(function(){
var timeleft = Math.ceil((timeout._idleStart + timeout._idleTimeout - Date.now()) / 1000);
$('#send-message').html("Please wait" + timeleft).show();
},function(){
$('#send-message').hide();
});
If show() and hide() didn't work, try .css("display","block")
On click of button i need to see a custom conformation dialogue box. I am able to see it but once the dialogue box has opened then I don't want to perform any action in HTML page until user select any option in dialogue box. I mean just similar to alert box functionality, until we say "Ok" in alert box the control does not go to HTML page. I need the same , My code is as follows,
Css
<style>
#confirmBox {
z-index:9999;
display: none;
background-color: #eee;
border-radius: 5px;
border: 1px solid #aaa;
position: relative;
width: 300px;
left: 50%;
margin-left: -150px;
padding: 6px 8px 8px;
box-sizing: border-box;
text-align: center;
}
#confirmBox .button {
background-color: #ccc;
display: inline-block;
border-radius: 3px;
border: 1px solid #aaa;
padding: 2px;
text-align: center;
width: 80px;
cursor: pointer;
}
#confirmBox .button:hover {
background-color: #ddd;
}
#confirmBox .message {
text-align: left;
margin-bottom: 8px;
}
</style>
Script:
$( "#locationList" ).on( "click", "li", function( event ) {
var form = $(this).closest('form');
doConfirm("The Coordinates for Selected location are "+ coodinatesDetails, function yes() {
alert("mail");
}, function no() {
//alert("Ok"); -- Do Nothing
} , function sms()
{
alert("sms");
});
});
function doConfirm(msg, yesFn, noFn, smsFn) {
var confirmBox = $("#confirmBox");
confirmBox.find(".message").text(msg);
confirmBox.find(".yes,.no,.sms").unbind().click(function () {
confirmBox.hide();
});
confirmBox.find(".yes").click(yesFn);
confirmBox.find(".no").click(noFn);
confirmBox.find(".sms").click(smsFn);
confirmBox.show();
}
HTML:
<div id="confirmBox">
<div class="message"></div>
<span class="button yes">Mail</span>
<span class="button sms">SMS</span>
<span class="button no">Cancle</span>
</div>
You will only need an overlay to accomplish this. Try something like this: http://jsfiddle.net/7MJBR/1/
Html Changes:
<div id="confirmOverlay"></div>
<div id="confirmBox">
<div class="message"></div> <span class="button yes">Mail</span>
<span class="button sms">SMS</span>
<span class="button no">Cancle</span>
</div>
CSS Changes:
#confirmOverlay {
position:fixed;
background: rgba(0,0,0,.5);
z-index: 9998;
width:100%;
top:0px;
left:0px;
}
Javscript Change:
function doConfirm(msg, yesFn, noFn, smsFn) {
var confirmBox = $("#confirmBox");
$("#confirmOverlay").height( $(window).height() );
confirmBox.find(".message").text(msg);
confirmBox.find(".yes,.no,.sms").unbind().click(function () {
confirmBox.hide();
$("#confirmOverlay").hide();
});
confirmBox.find(".yes").click(yesFn);
confirmBox.find(".no").click(noFn);
confirmBox.find(".sms").click(smsFn);
confirmBox.show();
}
The Overlay having a Z-index of 1 below your popup, and the fact that it covers the screen will prevent people from accessing the content below. I provided filler content in my JSFIDDLE to show this.
Once the dialog and overlay are no longer needed; $('#confirmOverlay').hide() or $('#confirmOverlay').fadeOut(200) will make it go bye bye. :)
I hope this helps! Let me know if you have questions.
how to use same popup jquery for two div. i have a jquery for the popup and it is div popup and i want to use the same jquery for another div. please help. the code is given below
<head>
<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<style>
#backgroundPopup {
z-index:1;
position: fixed;
display:none;
height:100%;
width:100%;
background:#000000;
top:0px;
left:0px;
}
#toPopup {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #ccc;
border-radius: 3px 3px 3px 3px;
color: #333333;
display: none;
font-size: 14px;
left: 50%;
margin-left: -402px;
position: fixed;
top: 20%;
width: 800px;
z-index: 2;
}
div.loader {
background: url("../img/loading.gif") no-repeat scroll 0 0 transparent;
height: 32px;
width: 32px;
display: none;
z-index: 9999;
top: 40%;
left: 50%;
position: absolute;
margin-left: -10px;
}
div.close {
background: url("../img/closebox.png") no-repeat scroll 0 0 transparent;
cursor: pointer;
height: 30px;
position: absolute;
right: -27px;
top: -24px;
width: 30px;
}
span.ecs_tooltip {
background: none repeat scroll 0 0 #000000;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
display: none;
font-size: 11px;
height: 16px;
opacity: 0.7;
padding: 4px 3px 2px 5px;
position: absolute;
right: -62px;
text-align: center;
top: -51px;
width: 93px;
}
span.arrow {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 7px solid #000000;
display: block;
height: 1px;
left: 40px;
position: relative;
top: 3px;
width: 1px;
}
div#popup_content {
margin: 4px 7px;
/* remove this comment if you want scroll bar
overflow-y:scroll;
height:200px
*/
}</style>
</head>
<body>
<div id="ack" class="topopup">Location</div>
<div id="toPopup">
<div class="close"></div>
<span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
<div id="popup_content" width="400px" height="500px">
<input type="text" name="mm" id="id">
<button id="ok">ok</button>
</div> <!--your content end-->
</div> <!--toPopup end-->
<div class="loader"></div>
<div id="backgroundPopup"></div>
</body>
jquery for popup. i want use this jquery for another div. but i given the same name for another div but i when click that link it displays previous div
jQuery(function($) {
$("a.topopup").click(function() {
loading(); // loading
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup(); // function show popup
}, 500); // .5 second
return false;
});
/* event for close the popup */
$("div.close").hover(
function() {
$('span.ecs_tooltip').show();
},
function () {
$('span.ecs_tooltip').hide();
}
);
$("div.close").click(function() {
disablePopup(); // function close pop up
});
$(this).keyup(function(event) {
if (event.which == 27) { // 27 is 'Ecs' in the keyboard
disablePopup(); // function close pop up
}
});
$("div#backgroundPopup").click(function() {
disablePopup(); // function close pop up
});
$("button#ok").click(function() {
disablePopup();
});
$('a.livebox').click(function() {
alert('Hello World!');
return false;
});
/************** start: functions. **************/
function loading() {
$("div.loader").show();
}
function closeloading() {
$("div.loader").fadeOut('normal');
}
var popupStatus = 0; // set value
function loadPopup() {
if(popupStatus == 0) { // if value is 0, show popup
closeloading(); // fadeout loading
$("#toPopup").fadeIn(0500); // fadein popup div
$("#backgroundPopup").css("opacity", "0.7");
$("#backgroundPopup").fadeIn(0001);
popupStatus = 1; // and set value to 1
}
}
function disablePopup() {
if(popupStatus == 1) { // if value is 1, close popup
$("#toPopup").fadeOut("normal");
$("#backgroundPopup").fadeOut("normal");
popupStatus = 0; // and set value to 0
}
}
/************** end: functions. **************/
}); // jQuery End
i want use this jquery for another div. but i given the same name for another div but i when click that link it displays previous div
you never used a <a class="topopup1"></a>?
My suggestiong is that a target attribute can be added to <a> to imply which div will be poped up.
for example:
html code
<a class="popup-button" target="#p1"></a>
<a class="popup-button" target="#p2"></a>
<div class="toPopup" id="p1">...</div>
<div class="toPopup" id="p2">...</div>
js code
$(".popup-button").click(function{
loading($(this).attr("target")); // loading
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup($(this).attr("target")); // function show popup
}, 500); // .5 second
});
function loading(selector) {
$(selector).show();
}
function loadPopup(selector) {
if(popupStatus == 0) { // if value is 0, show popup
closeloading(); // fadeout loading
$(selector).fadeIn(0500); // fadein popup div
popupStatus = 1; // and set value to 1
}
}
Use class name with your anchor tags
<a class='topopup1'>Show Popup</a>