I'm trying to get a modal to display upon my page loading. The problem is, the screen darkens, but the modal itself does not display.
As per the site's suggestion, here is an abbreviated version of my code. Here is the head:
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#ball {
position: absolute;
left: 208px;
top: 40px;
z-index: 1;
width: 20px;
height: 20px;
transition: top 1s;
}
#wheel {
}
#da_panel
{
position: relative;
z-index:1;
}
.row {
padding: 20px;
}
</style>
</head>
Here is where the modal loads
<body onload = "populate(); loadModal();">
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
And here is the function:
<script>
function loadModal(){
$('#myModal').modal('show');
}
Also, if you just want to look at the whole shabang, here it is:
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#ball {
position: absolute;
left: 208px;
top: 40px;
z-index: 1;
width: 20px;
height: 20px;
transition: top 1s;
}
#wheel {
}
#da_panel
{
position: relative;
z-index:1;
}
.row {
padding: 20px;
}
</style>
</head>
<body onload = "populate(); loadModal();">
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
<div class = "container">
<div class = "row">
<div class = "col-lg-5">
<img id = "ball" src = "ball.png" onclick="spin()"></img>
<img id = "wheel" src = "Rwheelbg.png" onclick="spin()"></img>
</div>
<div class = "col-lg-1">
<button id = "reset" onclick="reset()">Reset Wheel</button>
</div>
<div class = "col-lg-6">
<div class="well well-lg">
<span><center>Chips</center></span>
<br>
<div class = "text-center" style = "font-size: 180px;" id = "chipsInv">10</div>
<!-- Why won't this center!? -->
<br>
<span style = "float:left" id = "earnings">Your earnings:</span>
<span style = "float:right;" id ="purchase" onclick="purchase()"><a style = "color:green !important;" href = "#">$ Purchase More Chips?</a></span>
<!-- Must find way to override link color -->
</div>
</div>
<!-- Row ends here -->
<!-- FIND A WAY TO MAKE IMAGE TRANSPARENT!!! -->
</div>
<div class="panel panel-default" id = "da_panel">
<div class="panel-heading">Bet on:</div>
<div class="panel-body">
<form action="">
<input type="checkbox" name="21" value="310" id = "310"> 21<br>
<input type="checkbox" name="9" value="100" id = "100"> 9<br>
<input type="checkbox" name="14" value="120" id = "120"> 14<br>
<input type="checkbox" name="13" value="240" id = "240"> 13
</form>
</div>
</div>
<!-- <p>Bet on:</p>
<form action="">
<input type="checkbox" name="21" value="310" id = "310"> 21<br>
<input type="checkbox" name="9" value="100" id = "100"> 9<br>
<input type="checkbox" name="14" value="120" id = "120"> 14<br>
<input type="checkbox" name="13" value="240" id = "240"> 13
</form> -->
<p>Bet on up to four numbers. However, be warned, the more numbers you bet on, the lower your chip return will be.</p>
<!-- container ends here -->
</div>
<script>
function loadModal(){
$('#myModal').modal('show');
}
var chips = 5;
var earnings = chips * (-1);
function populate()
{
$("#chipsInv").text(chips);
$("#earnings").text("Your earnings: " + earnings)
}
function purchase()
{
chips = chips + 1;
$("#chipsInv").text(chips);
earnings = earnings - 1;
$("#earnings").text("Your earnings: " + earnings);
}
function gainChips(number)
{
chips = chips + number;
$("#chipsInv").text(chips);
earnings = earnings + number;
$("#earnings").text("Your earnings: " + earnings);
}
function loseChip()
{
chips--;
$("#chipsInv").text(chips);
if (chips == 0)
{
alert("You are out of chips. Purchase more chips to continue betting.")
}
}
// 21 = 310
// 23 = 190 degrees
// 9 = 100
// 14 = 120 degrees
// 13 = 240
var randomNum = Math.floor(Math.random() * 355) + 1;
var rw=document.getElementById('wheel');
var rb = document.getElementById('ball');
function rotate(degrees){
rw.setAttribute('style', 'transition: transform 1s; transform:rotate(' + 360 + degrees + 'deg)');
console.log(degrees);
}
function spin(){
for (i = 0; i < randomNum; i = i + 10) {
console.log("2");
rotate(i);
}
var winningDegrees = i - 10;
console.log(winningDegrees);
function winLoss()
{
//some kind of array to run through.
var possBets = [310, 100, 120, 240];
var checkedBets = [];
var divisor = 0;
var winner = false;
for (i = 0; i < possBets.length; i++) {
//check which boxes were checks, and pushes them to a
//checked array
if (document.getElementById(possBets[i]).checked == true)
{
checkedBets.push(possBets[i]);
}
}
divisor = checkedBets.length;
//now you have to ask do any of the checkBets == winningDegrees
//checks if any of the checked bets were winning bets
for (i = 0; i < checkedBets.length; i++) {
if (checkedBets[i] == winningDegrees)
{
winner = true;
}
}
if (winner == true)
{
var earnings = 36/divisor;
alert("Yay! U r teh winz! You earned " + earnings + " chips.");
gainChips(earnings);
}
else if (divisor > 0)
{
alert("You lost 1 chip.")
loseChip();
}
//function winLoss ends here
}
function ballDrop() {
setTimeout(function(){ rb.style.top = "90px";}, 1050);
if (chips > 0)
{
setTimeout(winLoss, 2000);
}
}
ballDrop();
//end of spin function()
}
function reset(){
rw.setAttribute('style', 'transform:rotate(0deg)');
rb.style.top = "50px";
randomNum = Math.floor(Math.random() * 355) + 1;
}
</script>
</body>
</html>
That is because of the hide class you gave to #myModal.
Here is what is seen in the code inspector:
.hide{
display: none!important;
}
So you can remove that class from this markup: <div class="modal hide fade" id="myModal">
Or use .removeClass() like this: $('#myModal').removeClass("hide").modal('show');
Related
I need to make it so that the previous result is displayed when the user presses a num after pressing equals... how do I do it? And just fyi I am just helping my friend make the code for his calculator clean - his was very messy - if you want I can show you his code as well.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class='container'>
<div class='answer'>
<p class='returnAnswer'>Answer Will Come Here</p>
</div>
<div class='buttonDiv'>
<div class='button'>0</div>
<div class='button'>1</div>
<div class='button'>2</div>
<div class='button'>3</div>
<div class='button'>4</div>
<div class='button'>5</div>
<div class='button'>6</div>
<div class='button'>7</div>
<div class='button'>8</div>
<div class='button'>9</div>
<div class='equals'>=</div>
<div class='button'>c</div>
<div class='button'>+</div>
<div class='button'>-</div>
<div class='button'>x</div>
<div class='button'>÷</div>
<div class='button'>.</div>
<div class='button'>%</div>
</div>
</div>
</body>
</html>
<script type="application/javascript" src="/share.js"></script>
<script>
var eq = "";
var ans = eval(eq);
$('.button').click(function() {
eq += $(this).text();
$('.returnAnswer').text(eq);
});
$('.equals').click(function() {
$('.returnAnswer').text(ans);
});
</script>
This was a fun thing to do.... Here is what I have done to your code
Added some styles to the button (not important, but makes it easier to click)
Added a class named num to each number button, that will be used to reset the display if any button is clicked following '=' button.
Removed 'equals' class from '=' button and added it as an ID
Added code to clear the display when 'C' is clicked
Changed buttons 'x' to ' * ' and '÷' to '/' as otherwise eval function will not work
Changed back to 'x' and '÷', and added 2 lines inside equals.clicked to replace these with correct operators
Check the Code snippet
var eq = "";
var ans = eval(eq);
var equalsCliked = false;
$('.button').not("#equals, #cbutton").click(function () {
if ($(this).hasClass('num') && equalsCliked)
eq = "";
eq += $(this).text();
$('.returnAnswer').text(eq);
equalsCliked = false;
});
$('#equals').click(function () {
equalsCliked = true;
eq = eq.split("÷").join("/");
eq = eq.split("x").join("*");
ans = eval(eq);
eq = ans;
$('.returnAnswer').text(ans);
});
$('#cbutton').click(function () {
equalsCliked = false;
eq = "";
ans = eval(eq);
//eq = ans;
$('.returnAnswer').text("");
});
.button {
border: 1px solid gray;
padding: 8px;
margin: 3px 3px;
float: left;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class='container'>
<div class='answer'>
<p class='returnAnswer' style="width:330px; padding: 10px; min-height:20px; border: 1px solid gray; border-radius: 2px;">Answer Will Come Here</p>
</div>
<div class='buttonDiv' style="background-color:yellow; float:left; width: 330px;">
<div class='button num'>0</div>
<div class='button num'>1</div>
<div class='button num'>2</div>
<div class='button num'>3</div>
<div class='button num'>4</div>
<div class='button num'>5</div>
<div class='button num'>6</div>
<div class='button num'>7</div>
<div class='button num'>8</div>
<div class='button num'>9</div>
<div id="equals" class='button'>=</div>
<div id="cbutton" class='button'>C</div>
<div class='button'>+</div>
<div class='button'>-</div>
<div class='button'>x</div>
<div class='button'>÷</div>
<div class='button'>.</div>
<div class='button'>%</div>
</div>
</div>
</body>
I have here a blade page on laravel 5.4 that allows users to input survey responses. The system should show a screensaver after being idle for a certain time ie. idle is 5mins. but the screensaver should disappear when somebody interact with the page. but the codes did not function. I've check the console but it has no error in google chrome. (newbie in javascript)
#php
use App\Bus;
use App\Bgcroute;
use App\Surveyquestion;
use App\User;
use Controller\UserController;
#endphp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BGC Bus Survey Page</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cookie">
<link rel="stylesheet" href="assets/css/user.css">
<link rel="stylesheet" href="assets/css/Pretty-Footer.css">
<link rel="stylesheet" href="assets/css/Pretty-Header.css">
<link rel="stylesheet" href="assets/css/Hero-Technology.css">
<link rel="stylesheet" href="js-screensaver/screensaver.css">
<script src="js-screensaver/screensaver.js"></script>
<script src="sweetalert2.all.js"></script>
<script src="sweetalert2.min.js"></script>
<link rel="stylesheet" href="sweetalert2.min.js">
<style type="text/css">
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color: #00FFFF;
color: #FFF;
padding: 1 0;
font-size: 1.2em;
border: 0;
}
.navbar-brand {
float: left;
min-height: 55px;
padding: 0 15px;
}
.img-logo{
width: 75px;
height: 60px;
}
.navbar-inverse .navbar-nav .active a, .navbar-inverse .navbar-nav .active a:focus, .navbar-inverse .navbar-nav .active a:hover {
color: #fff;
background-color: #53DFF0;
}
.navbar-inverse .nav-bar-nav li a {
color: #D5D5D5;
}
.avatar{
border-radius: 100%;
max-width: 100px;
clip: rect(10px,60px,50px,10px);
}
.startScreenSaver({
timeout: 5000,
width: 30,
height: 30,
exitTimeout: 1000,
});
</style>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class="img-logo" src="img/logo.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<form action="{{route('logout')}}" method="post">
{!!csrf_field()!!}
#if(!empty(Auth::user()->image))
<img src="{{ Auth::user()->image }}" class="avatar" alt="" width="60" height="60">
#else
<img src={{ url('uploads/avatar.png') }} class="avatar" alt="" width="60" height="60">
#endif
<b>Your Driver of the Day, {{ Auth::user()->name }}</b>
<button class="btn btn-danger">Log out</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Route/Bus Details
</button>
</form>
</ul>
</div>
</div>
</nav>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Select Your Desire Route</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="{{ route('surveysubmit') }}" >
<div class="form-group">
<h4>Select Bus</h4>
<select onchange="$('#busid').val(this.value);" class="form-control" >
#php
$display=''; $initbusid = '';
$buses = Bus::where(['archive'=>1])->orderBy('id')->get(['id','busplate']);
foreach($buses as $bus){
if(empty($initbusid)){$initbusid=$bus->id;}
$display .= '<option value='.$bus->id.'>'.$bus->busplate.'</option>';
}
echo $display;
#endphp
</select>
</div>
<div class="form-group">
<h4>Select Route</h4>
<select onchange="$('#routeid').val(this.value);" class="form-control" >
#php
$display2=''; $initrouteid = '';
$bgcroutes = Bgcroute::where(['routeloc'=>1,'archive'=>1])->orderBy('id')->get(['id','bgcbusroute']);
foreach($bgcroutes as $bgcroute){
if(empty($initrouteid)){$initrouteid=$bgcroute->id;}
$display2 .= '<option value='.$bgcroute->id.'>'.$bgcroute->bgcbusroute.'</option>';
}
echo $display2;
#endphp
</select>
</div>
<button type="button" class="btn btn-danger" data-dismiss="modal">Start Survey</button>
</form>
</div>
</div>
</div>
</div>
#php
$questions = Surveyquestion::where('status',1)->get(['squestions','id'])->first();
#endphp
<section class="testimonials"></section>
<div class="jumbotron visible-xs-block visible-sm-block visible-md-block visible-lg-block hero-technology">
<h2 class="bg-success hero-title">{{ $questions->squestions }}</h2>
<p class="visible-xs-block visible-sm-block visible-md-block visible-lg-block visible-xs-inline visible-sm-inline visible-md-inline visible-lg-inline visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block hidden-xs hidden-sm hidden-md hidden-lg hero-subtitle">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p class="text-primary bg-warning">Help Us Serve You Better</p>
<p></p>
<p class="text-center bg-primary">Rate us. Choose a smiley that Corresponds to your riding experience</p>
<div>
<input type="hidden" name="driverid" id="driverid" value="{{ Auth::user()->id }}"/>
<input type="hidden" name="busid" id="busid" value="{{ $initbusid }}"/>
<input type="hidden" name="routeid" id="routeid" value="{{ $initrouteid }}"/>
<input type="hidden" name="questionid" id="questionid" value="{{ $questions->id }}"/>
<input type="hidden" name="responseid" id="responseid"/>
<table class="table">
<thead>
<tr>
<th class="info visible-xs-block visible-sm-block visible-md-block visible-lg-block visible-xs-inline visible-sm-inline visible-md-inline visible-lg-inline visible-xs-inline-block">
<img class="img-rounded" src="assets/img/person-clipart-silhouette-blue-14518-blue-man-design.png" height="100">
<img src="assets/img/inlove.gif" height="70" id="loveid">
<img src="assets/img/like.gif" height="90" id="likeid">
<img src="assets/img/facepalm.gif" height="70" id="faceid">
<img src="assets/img/cry.gif" height="70" id="cryid">
</th>
<th
class="danger visible-xs-block visible-sm-block visible-md-block visible-lg-block visible-xs-inline visible-sm-inline visible-md-inline visible-lg-inline visible-xs-inline-block">
<img class="img-rounded" src="assets/img/pink-female-symbol-190136.png" width="40" height="100">
<img src="assets/img/inlove.gif" height="70" id="loveid2">
<img src="assets/img/like.gif" height="90" id="likeid2">
<img src="assets/img/facepalm.gif" height="70" id="faceid2">
<img src="assets/img/cry.gif" height="70" id="cryid2">
</th>
</tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
</tbody>
<caption> </caption>
</table>
</div>
<p>For Comments/Feedback Email us at bgc#bgc.com</p>
</div>
<div class="container">
<div class="table-responsive">
<table class="table">
<thead>
<tr></tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
</tbody>
</table>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
});
function surveyvote(){
driverid = $('#driverid').val();
busid = $('#busid').val();
routeid = $('#routeid').val();
questionid = $('#questionid').val();
responseid = $('#responseid').val();
$.ajax({
"type":"get",
"url": "{{ route('surveyvoting') }}",
"data": '&driverid='+driverid+'&busid='+busid+'&routeid='+routeid+'&questionid='+questionid+'&responseid='+responseid,
"success":function(result){
// Do something you want!
swal({
title: 'Thank You!',
//text: 'I will close in 3 seconds.',
timer: 1000,
onOpen: () => {
swal.showLoading()
}
}).then((result) => {
if (
// Read more about handling dismissals
result.dismiss === swal.DismissReason.timer
) {
console.log('I was closed by the timer')
}
})
}
});
}
</script>
<script type="text/javascript">
var screenSaver = {};
function startScreenSaver(options) {
//* attach event listeners to exit screensaver
attachScreenSaverEventListeners();
if(!screenSaver.initiated) {
//* set screensaver options
screenSaver.options = {
timeout: options.timeout || 5000, //* default timer to start screensaver is 10 minutes
width: options.width || 25, //* default width is 25rem
height: options.height || 25, //* default height is 25rem
exitTimeout: options.exitTimeout || null, //* default timer to exit screensaver is disabled
}
//* create elements
var overlay = document.createElement("div");
overlay.setAttribute('class', 'screensaver-overlay');
document.body.appendChild(overlay);
var createBadge = document.createElement("div");
createBadge.setAttribute('id', 'saver-badge');
document.body.appendChild(createBadge);
createBadge.style.width = screenSaver.options.width + 'rem';
createBadge.style.height = screenSaver.options.height + 'rem';
}
document.getElementsByTagName("body")[0].classList.remove('screensaver');
screenSaver.initiated = true;
screenSaver.setTimeoutValue = screenSaver.options.timeout;
screenSaver.setTimeoutExit = screenSaver.options.timeoutExit;
screenSaver.setTimeout = null; //* clear timeout
screenSaver.inProgress = false;
screenSaver.timerStarted = false;
clearTimeout(screenSaver.setTimeout);
screenSaver.setTimeout = setTimeout(function() {
document.getElementsByTagName("body")[0].classList.add('screensaver');
screenSaver.inProgress = true;
var saverBadge = document.getElementById("saver-badge");
clearInterval(screenSaver.setInterval); //* clear badge display interval
screenSaver.setInterval = null;
//* get dimensions in em
var windowHeight = window.outerHeight / parseFloat(window.getComputedStyle(document.getElementsByTagName("body")[0], null).getPropertyValue('font-size'));
var windowWidth = window.outerWidth / parseFloat(window.getComputedStyle(document.getElementsByTagName("body")[0], null).getPropertyValue('font-size'));
screenSaver.setInterval = setInterval(function() {
if (screenSaver.inProgress === true) {
saverBadge.classList.remove('visible');
setTimeout(function() {
saverBadge.offsetWidth = saverBadge.offsetWidth;
saverBadge.classList.add('visible');
},1);
var saverTopValue = Math.floor(Math.random() * windowHeight) - screenSaver.options.width;
var saverLeftValue = Math.floor(Math.random() * windowWidth) - screenSaver.options.height;
if (saverTopValue <= 0) { //* make sure the badge doesn't go off the screen
saverTopValue = saverTopValue + 15;
}
if (saverLeftValue <= 0) {
saverLeftValue = saverLeftValue + 15;
}
saverBadge.style.top = saverTopValue + 'rem';
saverBadge.style.left = saverLeftValue + 'rem';
if(screenSaver.timerStarted === false && screenSaver.options.exitTimeout != null) {
startScreenSaverTimer();
}
}
}, 6000);
}, screenSaver.setTimeoutValue);
}
function startScreenSaverTimer() {
screenSaver.timerStarted = true;
setTimeout(function() {
stopScreenSaver();
}, screenSaver.setTimeoutExit);
}
function stopScreenSaver() {
startScreenSaver();
clearInterval(screenSaver.setInterval);
document.getElementsByTagName("body")[0].classList.remove('screensaver');
screenSaver.timerStarted = false;
}
function attachScreenSaverEventListeners() {
var events = ['touchstart', 'mousedown', 'mousemove', 'touchmove', 'keypress', 'scroll'];
var resetScreenSaver = function(e) {
if (screenSaver.inProgress) {
e.stopPropagation();
e.preventDefault();
}
clearTimeout(screenSaver.setTimeout);
clearInterval(screenSaver.setInterval);
document.getElementsByTagName("body")[0].classList.remove('screensaver');
startScreenSaver();
}
var checkClick = function(e) {
if (screenSaver.inProgress) {
startScreenSaver();
}
}
var bindEvents = function(eventName) {
document.addEventListener(eventName, screenSaver.initialize);
//* bind click as fallback for touchstart and mousedown
document.addEventListener('click', checkClick);
}
var unbindEvents = function(eventName) {
document.removeEventListener(eventName, screenSaver.initialize);
}
}
</script>
</body>
</html>
Here is the related files that I think that is related on the script or the javascript
css file screensaver.css
body.screensaver #saver-badge {
opacity: 0;
display: block;
position: absolute;
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12,Color='#444')";
filter: url(#drop-shadow);
-webkit-filter: drop-shadow(12px 12px 20px rgba(0,0,0,0.5));
filter: drop-shadow(12px 12px 20px rgba(0,0,0,0.5));
background: url(../img/vwd.png) center;
background-size: contain;
z-index: 1001;
}
body.screensaver #saver-badge.visible {
-webkit-animation: fadeBadge 6s;
-moz-animation: fadeBadge 6s;
-o-animation: fadeBadge 6s;
animation: fadeBadge 6s;
opacity: 1;
}
body.screensaver .screensaver-overlay {
background: #000;
opacity: .5;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 1000;
}
#saver-badge {
display: none;
}
#-webkit-keyframes fadeBadge {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes fadeBadge {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes fadeBadge {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fadeBadge {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
js file
screensaver.js
var screenSaver = {};
function startScreenSaver(options) {
//* attach event listeners to exit screensaver
attachScreenSaverEventListeners();
if(!screenSaver.initiated) {
//* set screensaver options
screenSaver.options = {
timeout: options.timeout || 60000, //* default timer to start screensaver is 10 minutes
width: options.width || 25, //* default width is 25rem
height: options.height || 25, //* default height is 25rem
exitTimeout: options.exitTimeout || null, //* default timer to exit screensaver is disabled
}
//* create elements
var overlay = document.createElement("div");
overlay.setAttribute('class', 'screensaver-overlay');
document.body.appendChild(overlay);
var createBadge = document.createElement("div");
createBadge.setAttribute('id', 'saver-badge');
document.body.appendChild(createBadge);
createBadge.style.width = screenSaver.options.width + 'rem';
createBadge.style.height = screenSaver.options.height + 'rem';
}
document.getElementsByTagName("body")[0].classList.remove('screensaver');
screenSaver.initiated = true;
screenSaver.setTimeoutValue = screenSaver.options.timeout;
screenSaver.setTimeoutExit = screenSaver.options.timeoutExit;
screenSaver.setTimeout = null; //* clear timeout
screenSaver.inProgress = false;
screenSaver.timerStarted = false;
clearTimeout(screenSaver.setTimeout);
screenSaver.setTimeout = setTimeout(function() {
document.getElementsByTagName("body")[0].classList.add('screensaver');
screenSaver.inProgress = true;
var saverBadge = document.getElementById("saver-badge");
clearInterval(screenSaver.setInterval); //* clear badge display interval
screenSaver.setInterval = null;
//* get dimensions in em
var windowHeight = window.outerHeight / parseFloat(window.getComputedStyle(document.getElementsByTagName("body")[0], null).getPropertyValue('font-size'));
var windowWidth = window.outerWidth / parseFloat(window.getComputedStyle(document.getElementsByTagName("body")[0], null).getPropertyValue('font-size'));
screenSaver.setInterval = setInterval(function() {
if (screenSaver.inProgress === true) {
saverBadge.classList.remove('visible');
setTimeout(function() {
saverBadge.offsetWidth = saverBadge.offsetWidth;
saverBadge.classList.add('visible');
},1);
var saverTopValue = Math.floor(Math.random() * windowHeight) - screenSaver.options.width;
var saverLeftValue = Math.floor(Math.random() * windowWidth) - screenSaver.options.height;
if (saverTopValue <= 0) { //* make sure the badge doesn't go off the screen
saverTopValue = saverTopValue + 15;
}
if (saverLeftValue <= 0) {
saverLeftValue = saverLeftValue + 15;
}
saverBadge.style.top = saverTopValue + 'rem';
saverBadge.style.left = saverLeftValue + 'rem';
if(screenSaver.timerStarted === false && screenSaver.options.exitTimeout != null) {
startScreenSaverTimer();
}
}
}, 6000);
}, screenSaver.setTimeoutValue);
}
function startScreenSaverTimer() {
screenSaver.timerStarted = true;
setTimeout(function() {
stopScreenSaver();
}, screenSaver.setTimeoutExit);
}
function stopScreenSaver() {
startScreenSaver();
clearInterval(screenSaver.setInterval);
document.getElementsByTagName("body")[0].classList.remove('screensaver');
screenSaver.timerStarted = false;
}
function attachScreenSaverEventListeners() {
var events = ['touchstart', 'mousedown', 'mousemove', 'touchmove', 'keypress', 'scroll'];
var resetScreenSaver = function(e) {
if (screenSaver.inProgress) {
e.stopPropagation();
e.preventDefault();
}
clearTimeout(screenSaver.setTimeout);
clearInterval(screenSaver.setInterval);
document.getElementsByTagName("body")[0].classList.remove('screensaver');
startScreenSaver();
}
var checkClick = function(e) {
if (screenSaver.inProgress) {
startScreenSaver();
}
}
var bindEvents = function(eventName) {
document.addEventListener(eventName, screenSaver.initialize);
//* bind click as fallback for touchstart and mousedown
document.addEventListener('click', checkClick);
}
var unbindEvents = function(eventName) {
document.removeEventListener(eventName, screenSaver.initialize);
}
for (var i=0;i<events.length;i++) {
bindEvents(events[i]);
}
}
This is supposed to be a simple pure html, css and javascript order form with four fields for four different product. Users can adjust quantity and calculate totals for each product and for the final total. Everything is working except the final calculation and I have no idea why because it uses the same methods I used to calculate the individual totals.
<!DOCTYPE html>
<html>
<head>
<title>Order Form</title>
<style>
#productOnePrice, #productOneName, #productOneQuantity, #productOneTotal,
#productTwoPrice, #productTwoName, #productTwoQuantity, #productTwoTotal,
#productThreePrice, #productThreeName, #productThreeQuantity,
#productThreeTotal, #productFourPrice, #productFourName,
#productFourQuantity, #productFourTotal, #orderTotalButton, #orderTotal{
height:20px;
width:238px;
float:left;
margin: 5px 5px 5px 5px;
padding: 1px 1px 1px 1px;
outline: 2px solid black;
text-align: center;
}
.container {
height:auto;
width:1000px;
float:left;
padding: 5px 5px 5px 5px;
outline: 2px solid black;
text-align: center;
}
.quantityOne{
text-align: right;
}
</style>
</head>
<body>
<div class="container">
<!-- Product One -->
<div>
<p id="productOneName"></p>
</div>
<div>
<p id="productOnePrice"></p>
</div>
<div>
<p id="productOneQuantity">
<input id="quantityOne" type="number">
<button onclick="productOneTotal()">Add</button>
</p>
</div>
<div>
<p id="productOneTotal"></p>
</div>
<!-- Product Two -->
<div>
<p id="productTwoName"></p>
</div>
<div>
<p id="productTwoPrice"></p>
</div>
<div>
<p id="productTwoQuantity">
<input id="quantityTwo" type="number">
<button onclick="productTwoTotal()">Add</button>
</p>
</div>
<div>
<p id="productTwoTotal"></p>
</div>
<!-- Product Three -->
<div>
<p id="productThreeName"></p>
</div>
<div>
<p id="productThreePrice"></p>
</div>
<div>
<p id="productThreeQuantity">
<input id="quantityThree" type="number">
<button onclick="productThreeTotal()">Add</button>
</p>
</div>
<div>
<p id="productThreeTotal"></p>
</div>
<!-- Product Four -->
<div>
<p id="productFourName"></p>
</div>
<div>
<p id="productFourPrice"></p>
</div>
<div>
<p id="productFourQuantity">
<input id="quantityFour" type="number">
<button onclick="productFourTotal()">Add</button>
</p>
</div>
<div>
<p id="productFourTotal"></p>
</div>
<!-- Order Total -->
<div>
<p id="orderTotalButton">
<button onclick="orderTotal()">Add</button>
</p>
</div>
<div>
<p id="orderTotal"></p>
</div>
<script>
/* Product One Total Function */
document.getElementById("productOneName").innerText = "mp3";
document.getElementById("productOnePrice").innerHTML = 1;
function productOneTotal(price, quantity){
price = 1;
quantity = document.getElementById("quantityOne").value;
document.getElementById("productOneTotal").innerHTML =
parseInt(price) * parseInt(quantity);
}
/* Product Two Total Function */
document.getElementById("productTwoName").innerText = "Cassette";
document.getElementById("productTwoPrice").innerHTML = 1;
function productTwoTotal(price, quantity){
price = 1;
quantity = document.getElementById("quantityTwo").value;
document.getElementById("productTwoTotal").innerHTML =
parseInt(price) * parseInt(quantity);
}
/* Product Three Total Function */
document.getElementById("productThreeName").innerText = "Vinyl LP";
document.getElementById("productThreePrice").innerHTML = 1;
function productThreeTotal(price, quantity){
price = 1;
quantity = document.getElementById("quantityThree").value;
document.getElementById("productThreeTotal").innerHTML =
parseInt(price) * parseInt(quantity);
}
/* Product Four Total Function */
document.getElementById("productFourName").innerText = "T-Shirt";
document.getElementById("productFourPrice").innerHTML = 1;
function productFourTotal(price, quantity){
price = 1;
quantity = document.getElementById("quantityFour").value;
document.getElementById("productFourTotal").innerHTML =
parseInt(price) * parseInt(quantity);
}
/* Order Total Function */
function orderTotal(productOneTotal, productTwoTotal,
productThreeTotal, productFourTotal){
productOneTotal =
document.getElementById("productOneTotal").value;
productTwoTotal =
document.getElementById("productTwoTotal").value;
productThreeTotal =
document.getElementById("productThreeTotal").value;
productFourTotal =
document.getElementById("productFourTotal").value;
document.getElementById("orderTotal").innerHTML =
parseInt(productOneTotal) + parseInt(productTwoTotal) +
parseInt(productThreeTotal) + parseInt(productFourTotal);
}
</script>
</div>
</body>
</html>
You need to target your total elements with .innerHTML instead of value.
productOneTotal = document.getElementById("productOneTotal").innerHTML;
That'll remove the NaN error you were getting. The elements don't have a value so attempts to retrieve .value were returning undefined.
NOTE: Textbox, and other elements .value is used. and div elements gain value we have use .innerHTML
<!DOCTYPE html>
<html>
<head>
<title>Order Form</title>
<style>
#productOnePrice, #productOneName, #productOneQuantity, #productOneTotal,
#productTwoPrice, #productTwoName, #productTwoQuantity, #productTwoTotal,
#productThreePrice, #productThreeName, #productThreeQuantity,
#productThreeTotal, #productFourPrice, #productFourName,
#productFourQuantity, #productFourTotal, #orderTotalButton, #orderTotal{
height:20px;
width:238px;
float:left;
margin: 5px 5px 5px 5px;
padding: 1px 1px 1px 1px;
outline: 2px solid black;
text-align: center;
}
.container {
height:auto;
width:1000px;
float:left;
padding: 5px 5px 5px 5px;
outline: 2px solid black;
text-align: center;
}
.quantityOne{
text-align: right;
}
</style>
</head>
<body>
<div class="container">
<!-- Product One -->
<div>
<p id="productOneName"></p>
</div>
<div>
<p id="productOnePrice"></p>
</div>
<div>
<p id="productOneQuantity">
<input id="quantityOne" type="number">
<button onclick="productOneTotal()">Add</button>
</p>
</div>
<div>
<p id="productOneTotal"></p>
</div>
<!-- Product Two -->
<div>
<p id="productTwoName"></p>
</div>
<div>
<p id="productTwoPrice"></p>
</div>
<div>
<p id="productTwoQuantity">
<input id="quantityTwo" type="number">
<button onclick="productTwoTotal()">Add</button>
</p>
</div>
<div>
<p id="productTwoTotal"></p>
</div>
<!-- Product Three -->
<div>
<p id="productThreeName"></p>
</div>
<div>
<p id="productThreePrice"></p>
</div>
<div>
<p id="productThreeQuantity">
<input id="quantityThree" type="number">
<button onclick="productThreeTotal()">Add</button>
</p>
</div>
<div>
<p id="productThreeTotal"></p>
</div>
<!-- Product Four -->
<div>
<p id="productFourName"></p>
</div>
<div>
<p id="productFourPrice"></p>
</div>
<div>
<p id="productFourQuantity">
<input id="quantityFour" type="number">
<button onclick="productFourTotal()">Add</button>
</p>
</div>
<div>
<p id="productFourTotal"></p>
</div>
<!-- Order Total -->
<div>
<p id="orderTotalButton">
<button onclick="orderTotal()">Add</button>
</p>
</div>
<div>
<p id="orderTotal"></p>
</div>
<script>
/* Product One Total Function */
document.getElementById("productOneName").innerText = "mp3";
document.getElementById("productOnePrice").innerHTML = 1;
function productOneTotal(){
price = 1;
quantity = document.getElementById("quantityOne").value;
if(quantity=="") {
quantity = 0;
}
document.getElementById("productOneTotal").innerHTML =
parseInt(price) * parseInt(quantity);
}
/* Product Two Total Function */
document.getElementById("productTwoName").innerText = "Cassette";
document.getElementById("productTwoPrice").innerHTML = 1;
function productTwoTotal(){
price = 1;
quantity = document.getElementById("quantityTwo").value;
if(quantity=="") {
quantity = 0;
}
document.getElementById("productTwoTotal").innerHTML =
parseInt(price) * parseInt(quantity);
}
/* Product Three Total Function */
document.getElementById("productThreeName").innerText = "Vinyl LP";
document.getElementById("productThreePrice").innerHTML = 1;
function productThreeTotal(){
price = 1;
quantity = document.getElementById("quantityThree").value;
if(quantity=="") {
quantity = 0;
}
document.getElementById("productThreeTotal").innerHTML =
parseInt(price) * parseInt(quantity);
}
/* Product Four Total Function */
document.getElementById("productFourName").innerText = "T-Shirt";
document.getElementById("productFourPrice").innerHTML = 1;
function productFourTotal(){
price = 1;
quantity = document.getElementById("quantityFour").value;
if(quantity=="") {
quantity = 0;
}
document.getElementById("productFourTotal").innerHTML =
parseInt(price) * parseInt(quantity);
}
/* Order Total Function */
function orderTotal(productOneTotal, productTwoTotal,
productThreeTotal, productFourTotal){
productOneTotal =
document.getElementById("productOneTotal").innerHTML;
productTwoTotal =
document.getElementById("productTwoTotal").innerHTML;
productThreeTotal =
document.getElementById("productThreeTotal").innerHTML;
productFourTotal =
document.getElementById("productFourTotal").innerHTML;
if(productOneTotal=="") {
productOneTotal=0;
}
if(productTwoTotal=="") {
productTwoTotal=0;
}
if(productThreeTotal=="") {
productThreeTotal=0;
}
if(productFourTotal=="") {
productFourTotal=0;
}
document.getElementById("orderTotal").innerHTML =
parseInt(productOneTotal) + parseInt(productTwoTotal) +
parseInt(productThreeTotal) + parseInt(productFourTotal);
}
</script>
</div>
</body>
</html>
Hi I am showing a modal when person opens my site which works fine but when user closes it modal-open class is not removed from which doesn't allow them to scroll.
<div id="ageModal" class="modal fade" data-backdrop="static" data-keyboard="false" role="dialog" style="padding-right: 0px;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="background-color: #c9c9f8;" >
<div class="modal-header">
<button type="button" class="close hide" data-dismiss="modal">×</button>
</div>
<div class="modal-body text-center" style="padding-top:10%">
<h1>hi</h1>
<div>
<button type="button" class="btn btn-default" id="ageVerifyYes">Yes</button>
<button type="button" class="btn btn-default" id="ageVerifyNo">No</button>
</div>
<div>
<input type="checkbox" id="rememberMeAge"> Remember Me
</div>
<div id="ageVerifyError" class="hide">
<p class="error-msg">You should agree</p>
</div>
</div>
<div class="modal-footer hide">
<button type="button" class="btn btn-default" data-dismiss="modal">Yes</button>
<button type="button" class="btn btn-default">No</button>
</div>
</div>
</div>
</div>
<style type="text/css">
#ageModal .modal-dialog {
width: 100%;
height: 100%;
margin: 0;
padding: 0px!important;
}
#ageModal .modal-body{
height: 80%;
}
#ageModal .modal-content {
height: 98%;
min-height: 100%;
border-radius: 0;
}
#ageModal .error-msg{
color: #c00;
padding: 10px;
}
.in{
padding:0px!important;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var isshow = sessionStorage.getItem('isshow');
if (isshow == null || isshow == '') {
sessionStorage.setItem('isshow', 1);
// Show popup here
$('#ageModal').show();
}
else{
//hide popup if opened once
$('#ageModal').hide();
$('.fade').hide();
}
});
$('#ageVerifyNo').on('click', function(){
$('#ageVerifyError').removeClass('hide');
});
$('#ageVerifyYes').on('click', function(){
if($('#rememberMeAge').prop('checked') === true){
setCookie('ageVerified',1,1);
}
$('#ageModal').modal('hide');
$("body").removeClass("modal-open");
});
function setCookie(name,value,days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
document.cookie = name+'=; Max-Age=-99999999;';
}
I am basically storing in session if pop-up was opened or not. it works as expected but modal-open class stays with body tag even after modal is closed. I did try $("body").removeClass("modal-open"); but no luck I have also created another and tried to append there but again same issue. I can not edit bootstrap as I am using cdn
Try this as well
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
As an alternative quick solution just remove the fade class from the <div id="ageModal" class="modal fade"....
This issue can be caused by the modal('hide') being called before the fade animation has fully completed
Your .show() and .hide() should be .modal('show') and .modal('hide')
ngDoCheck(){
var x = $(document).find('.modal.show').length;
if(x>0) {
$('body').addClass('modal-open');
} else {
$('body').removeClass('modal-open');
}
}
I made this script for showing/hiding other div that comes to place of the one with event (ricon1) on mouse in and out:
HTML:
<div class="rule-container">
<div class="rule" id="rule1">
<div class="rule-icon" id="ricon1">
</div>
<div class="rule-decription" id="rdescription1">
</div>
</div>
<div class="rule" id="rule2">
<div class="rule-icon" id="ricon2">
</div>
<div class="rule-decription" id="rdescription2">
</div>
</div>
<div class="rule" id="rule3">
<div class="rule-icon" id="ricon3">
</div>
<div class="rule-decription" id="rdescription3">
</div>
</div>
<div class="rule" id="rule4">
<div class="rule-icon" id="ricon4">
</div>
<div class="rule-decription" id="rdescription4">
</div>
</div>
</div>
CSS:
div.rule {
display: inline-block;
width:20%;
margin-left:2%;
margin-right:2%;
background-color: cadetblue;
}
div.rule:first-child {
margin-left:3.5%;
background-color:yellow;
}
div.rule > div {
width:100%;
}
div.rule-icon {
height:240px;
background-color:lightpink;
display:block;
}
div.rule-decription {
height: 240px;
background-color: springgreen;
display:none;
}
JS:
document.getElementById("ricon1").addEventListener("mouseenter",function (){
document.getElementById('ricon1').style.display = 'none';
document.getElementById('rdescription1').style.display = 'block';
});
document.getElementById("ricon1").addEventListener("mouseout",function (){
document.getElementById('ricon1').style.display = 'block';
document.getElementById('rdescription1').style.display = 'none';
});
But the problem is that it flashes (continuously switching between on and off state, what am i doing wrong ?
How may i change script so i dont have to do it for all pairs of divs (ricon1, rdescription1; ricon2, rdescription2... etc) because there is like 6 pairs?
Is there a specific reason you don't want to use jQuery for that?
Anyway, here's an example without jQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class = "switch">
<div class = "icon">A</div>
<div style = "display:none" class = "desc">Desc1</div>
</div>
<div class = "switch">
<div class = "icon">B</div>
<div style = "display:none" class = "desc">Desc2</div>
</div>
<div class = "switch">
<div class = "icon">C</div>
<div style = "display:none" class = "desc">Desc3</div>
</div>
<script>
var icons = document.querySelectorAll('.switch');
for (var i = 0; i < icons.length; i++) {
icons[i].addEventListener("mouseenter", function() {
(this.querySelectorAll(".icon")[0]).style.display = 'none';
(this.querySelectorAll(".desc")[0]).style.display = 'block';
});
icons[i].addEventListener("mouseleave", function() {
(this.querySelectorAll(".icon")[0]).style.display = 'block';
(this.querySelectorAll(".desc")[0]).style.display = 'none';
});
}
</script>
</body>
</html>