Im building an email subscription form into my asp.net site and I'm trying to show the modal window when the user adds their name to the subscribe list. I can't seem to get the div to hide on pageload. The modal loads on page load, but I want it to be hidden until the user submits the form.
Ideally this would all be done server side since i don't want the modal to pop up until the form is submitted and doing it client side could trigger a false positive.
I'm not sure what the best way to achieve this would be, through code behind or possibly jQuery, which I don't know much about.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
} );
</script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
.responsive {
width: 40%;
height: auto;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<style>
.simple-subscription-form {
background: #000000;
color: #94C60D;
padding: 2rem;
border-radius: 0;
align-content: center
}
</style>
<style>
.simple-subscription-form.button {
margin-bottom: 0;
border-radius: 0 0 0 0;
}
</style>
<style>
#dialog-message { display: none; padding: 5px; }
</style>
<style>
div.hidden {
display: none;
}
</style>
</head>
<body bgcolor="black">
<div class="simple-subscription-form" id="emailForm">
<form id="email" runat="server">
<script type="text/javascript">
function showDiv() {
div = document.getElementById('dialog-message');
div.style.display = "block";
}
</script>
<h4>Subscribe</h4>
<p>Receive updates and latest news direct from our team. Simply enter your email below :</p>
<div class="input-group"/>
<span class="input-group-label">
<i class="fa fa-envelope"></i>
</span>
<input class="input-group-field" runat="server" id="emailSignupField" type="email" placeholder="Email" required/>
<asp:button class="button" OnClientClick="javascript:showDiv(#dialog-message);" OnClick="emailSignupForm_click" runat="server" id="submitEmailForm" Text="Sign Up Now"></asp:button>
</form>
<div id="dialog-message" title="Subscribed!" class="hidden" >
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
You have been successfully added to our Mailing List
</p>
</div>
</div>
</body>
</html>
Insert the <script> before </head>, so it doesnt have glitch
<script>
$( function() {
$('#dialog-message').dialog('close')
} );
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
} );
</script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
.responsive {
width: 40%;
height: auto;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<style>
.simple-subscription-form {
background: #000000;
color: #94C60D;
padding: 2rem;
border-radius: 0;
align-content: center
}
</style>
<style>
.simple-subscription-form.button {
margin-bottom: 0;
border-radius: 0 0 0 0;
}
</style>
<style>
#dialog-message { display: none; padding: 5px; }
</style>
<style>
div.hidden {
display: none;
}
</style>
<script>
$( function() {
$('#dialog-message').dialog('close')
} );
</script>
</head>
<body bgcolor="black">
<div class="simple-subscription-form" id="emailForm">
<form id="email" runat="server">
<script type="text/javascript">
function showDiv() {
div = document.getElementById('dialog-message');
div.style.display = "block";
}
</script>
<h4>Subscribe</h4>
<p>Receive updates and latest news direct from our team. Simply enter your email below :</p>
<div class="input-group"/>
<span class="input-group-label">
<i class="fa fa-envelope"></i>
</span>
<input class="input-group-field" runat="server" id="emailSignupField" type="email" placeholder="Email" required/>
<asp:button class="button" OnClientClick="javascript:showDiv(#dialog-message);" OnClick="emailSignupForm_click" runat="server" id="submitEmailForm" Text="Sign Up Now"></asp:button>
</form>
<div id="dialog-message" title="Subscribed!" class="hidden" >
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
You have been successfully added to our Mailing List
</p>
</div>
</div>
</body>
</html>
Related
I have 3 games in this current code, I got the first 2 to work but the third has been elusive. I would like to have it all run simultaneously but it doesn't have to. The last 2 games are from the same compiler. These are interactive games like crosswords and word searches. Also, I'm new to js, I'm still learning. Here's my code.
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<META NAME="Generator" CONTENT="Crossword Compiler (www.crossword-compiler.com)">
<br></br>
<center><p style="font-size:20px">Word Match Game</p></center>
<br></br>
<link rel="stylesheet" href="/s/style.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="/s/mayavocabagjQtest.js"></script>
</head>
<body>
<div id="cardslots">
<div id="draggableBlocks"></div>
<div id="targetArea"></div>
<div id="message">Match!</div>
<div id="successMessage">Success!</div>
</div>
</body>
<br></br>
<br></br>
<center><p style="font-size:20px">Crossword Puzzle</p></center>
<br></br>
<TITLE>Crossword Puzzle</TITLE>
<br></br>
<style type="text/css">
<!--
BODY, .Clues, .GridClues { font-size: -3pt; font-family: Times New Roman,Times; }
-->
</style>
<STYLE TYPE="text/css">
<!--
div#CrosswordCompilerPuz {
position: fixed;
transform: scale(1.4);
left: 22%;
width: 700px; // Any width will be fine
height: 700px; // Any height will be fine
}
.PuzTitle {
font-size: 15pt; color: #800000; font-weight: bold;
}
.CopyTag {
font-size: 10pt; color: #000000
}
-->
</STYLE>
<TITLE>Crossword Puzzle</TITLE>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#ffffff">
<script src="/s/raphael.js"></script>
<script src="/s/crosswordCompiler.js"></script>
<script src="/s/mayaagcw.js"></script>
<script>
$(function(){
$("#CrosswordCompilerPuz").CrosswordCompiler(CrosswordPuzzleData,null, {SUBMITMETHOD:"POST",SUBMIT : "",PROGRESS : "" , ROOTIMAGES: "CrosswordCompilerApp/CrosswordImages/" } );});</script>
<div id="CrosswordCompilerPuz"></div>
<center><P><BLOCKQUOTE><A CLASS="PDFURL" HREF="testcwp.pdf">PDF</A></BLOCKQUOTE></center>
<HR>
<SPAN CLASS="CopyTag">Web page created by Crossword Compiler.</SPAN>
</BODY>
<BODY>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta NAME="Generator" CONTENT="Crossword Compiler (www.crossword-compiler.com)">
<style type="text/css">
<!--
BODY, .Clues, .GridClues { font-size: -3pt; font-family: Times New Roman,Times; }
-->
</style>
<STYLE TYPE="text/css">
<!--
div#CrosswordCompilerPuz1 {
position: fixed;
transform: scale(1.0);
left: 22%;
width: 700px; // Any width will be fine
height: 700px; // Any height will be fine
}
.PuzTitle {
font-size: 15pt; color: #800000; font-weight: bold;
}
.CopyTag {
font-size: 10pt; color: #000000
}
-->
</STYLE>
<TITLE>Wordsearch</TITLE>
</BODY>
<BODY TEXT="#000000" BGCOLOR="#ffffff">
<script src="/s/raphael.js"></script>
<script src="/s/crosswordCompiler.js"></script>
<script src="/s/1.js"></script>
<script>
$(function(){ $("#CrosswordCompilerPuz1").CrosswordCompiler(CrosswordPuzzleData,null, {SUBMITMETHOD:"POST",PROGRESS : "" , ROOTIMAGES: "CrosswordCompilerApp/CrosswordImages/" } );});</script>
<div id="CrosswordCompilerPuz1"></div>
<HR>
</BODY>
</HTML>
any input is appreciated
Can someone please look at this code and explain why this div is not resizable. I have stripped the code down to bare bones, looking for the error. There must be something obvious that I'm unaware of.
Desired Functionality:
The <div> needs to be resizable. It needs to be something a user can drag with a mouse to increase the width and height of the object.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
</head>
<body>
<style>
.Work{
position: relative;
width: 100%;
height: 10%;
top: calc(12.5% + 1vh);
}
.object{
position: absolute;
height: 3.7vh;
width: 12.75625vh;
border: 3px solid #4286f41a;
box-sizing: border-box;
margin-left: 1.5vh;
flex-shrink: 0;
}
</style>
<div class="Work">
<div class="object"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>>
<script>
$(document).ready(function(){
$(function(){
$(".object").resizable();
});
});
</script>
</body>
</html>
In order to make this work, you need to include jquery-ui.css as well. Also, there is no need to include two different versions of jQuery at the same time, so I will just include v3.5.1.
So your final code should be something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<style>
.Work {
position: relative;
width: 100%;
height: 10%;
top: calc(12.5% + 1vh);
}
.object {
position: absolute;
height: 3.7vh;
width: 12.75625vh;
border: 3px solid #4286f41a;
box-sizing: border-box;
margin-left: 1.5vh;
flex-shrink: 0;
}
</style>
<div class="Work">
<div class="object"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$(function() {
$(".object").resizable();
});
});
</script>
</body>
</html>
Consider the following code.
$(function() {
$(".object").resizable();
});
.Work {
position: relative;
width: 100%;
height: 10%;
top: calc(12.5% + 1vh);
}
.object {
position: absolute;
height: 3.7vh;
width: 12.75625vh;
border: 3px solid #4286f41a;
background-color: #ccc;
box-sizing: border-box;
margin-left: 1.5vh;
flex-shrink: 0;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="Work">
<div class="object"> </div>
</div>
You had a number of syntax errors and were missing the jQuery UI CSS. Once corrected, the code works as expected.
I am trying use Jquery-ui for the first time, and am trying to create a div with all the 3 features mentioned above in the title.
You can find the JSBin link here: https://jsbin.com/haleyucipu/1/edit?html,output
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Resizable - Visual feedback</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-selecting { background: #FECA40; }
.ui-selected { background: #F39814; color: white; }
.ui-resizable-ghost { border: 1px dotted gray; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#resizable" ).resizable({
ghost: true,
helper: "ui-resizable-helper",
animate: true
}).draggable().selectable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content"></div>
</body>
</html>
Only, resizeable and draggable work! Selectable doesnt!
Selectable needs a container, if you look at the examples, they use <ol>.
Consider the following code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Resizable - Visual feedback</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#resizable {
width: 150px;
height: 150px;
padding: 0.5em;
}
#resizable h3 {
text-align: center;
margin: 0;
}
.ui-selecting {
background: #FECA40;
opacity: .65;
}
.ui-selected {
background: #F39814;
color: white;
}
.ui-resizable-ghost {
border: 1px dotted gray;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#resizable").resizable({
ghost: true,
helper: "ui-resizable-helper",
animate: true
}).draggable().parent().selectable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content"></div>
</body>
</html>
This makes <body> the container and now all UI Interactions work.
Hope that helps.
Been trying to create a simple "squad builder", basically just creating a list as different buttons are clicked. I noticed Jquery was not working, although it has been linked to in the section. I can't even access basic animations. What is going on in here?:
<!DOCTYPE html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<head>
<title>Squad Builder</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
$("button").addClass("animated bounce");
});
</script>
<style type="text/css">
#player-box {
background-color: red;
height: 500px;
width: 130px;
}
#squad-box {
background-color: red;
height: 500px;
width: 500px;
margin-left: 10px;
}
</style>
<body>
<div class = "row container-fluid">
<div id = "player-box" class = "col-md-6">
<ul id = "player-list">
<li><button class = "player-btn btn">Player1</button></li>
</ul>
</div>
<div id = "squad-box" class = "col-md-6">
<ul id = "squad-list">
</ul>
</div>
</div>
</body>
Your code is ok, probably is only missing the animate.css assets:
animate.css
$(document).ready(function() {
$("button").addClass("animated bounce");
});
#player-box {
background-color: red;
height: 500px;
width: 130px;
}
#squad-box {
background-color: red;
height: 500px;
width: 500px;
margin-left: 10px;
}
<link href="https://daneden.github.io/animate.css/animate.min.css" rel="stylesheet" />
<!DOCTYPE html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="row container-fluid">
<div id="player-box" class="col-md-6">
<ul id="player-list">
<li><button class="player-btn btn">Player1</button></li>
</ul>
</div>
<div id="squad-box" class="col-md-6">
<ul id="squad-list">
</ul>
</div>
</div>
I'm trying to create a register/login overlay for users although when trying to use the JQuery .toggle() I have no luck. I can't see any obvious issues and any minor tweaks I've made have been unsuccessful.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
<meta charset="utf-8"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/style.css"/>
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css"/>
</head>
<body>
<div class="nav">
<div class="nav-container">
<b>Photography</b><beta>BETA</beta>
<div class="nav-options">
<i class="icon-user"></i>Register
<ul class="register">
Username
<input type="text"/>
Password
<input type="text"/>
<button class="btn btn-primary">Sign in</button><button class="btn btn-danger">Forgot?</button>
</ul>
User CP
Images
Home
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.register').hide();
$('#toggle-reg').click(function() {
$('.register').toggle(slow);
});
});
</script>
</body>
CSS:
.register {
background: #fff;
padding: 15px;
position: absolute;
width: 220px;
border: 2px solid #f1f1f1;
-moz-box-shadow: 0 0 5px #f1f1f1;
-webkit-box-shadow: 0 0 5px#f1f1f1;
box-shadow: 0 0 5px #f1f1f1;
top: 50px;
}
Check it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
<meta charset="utf-8"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/style.css"/>
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css"/>
<style>
.register {
background: #fff;
padding: 15px;
position: absolute;
width: 220px;
border: 2px solid #f1f1f1;
-moz-box-shadow: 0 0 5px #f1f1f1;
-webkit-box-shadow: 0 0 5px#f1f1f1;
box-shadow: 0 0 5px #f1f1f1;
top: 50px;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-container">
<b>Photography</b><beta>BETA</beta>
<div class="nav-options">
<i class="icon-user"></i>Register
<ul class="register">
Username
<input type="text"/>
Password
<input type="text"/>
<button class="btn btn-primary">Sign in</button><button class="btn btn-danger">Forgot?</button>
</ul>
User CP
Images
Home
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.register').hide();
$('#toggle-reg').click(function() {
$('.register').toggle('slow');
});
});
</script>
</body>
You are calling .toggle() with an undefined variable called slow:
$('.register').toggle(slow);
You need to pass the string "slow":
$('.register').toggle("slow");
And you may need to cancel the default click behaviour and/or change the link's href="" to href="#":
$('#toggle-reg').click(function(e) {
$('.register').toggle("slow");
e.preventDefault();
});
Demo: http://jsfiddle.net/PDaej/1