I'm desperately trying to create something very simple for you!
Here's my problem:
I'd like to create a small quiz in which when someone writes anything in a field (), and then click the button "ok" (not sure if I should use a or a ), then 3 possibilities arise (for each case a box appearing under the field input):
The answer is exact and correctly written: then the text will be "Great job!"
The answer is almost correct, meaning that the word is not correctly written (we can define if necessary "almost answers"): the text will be "Almost there..."
The answer is completely wrong, the text will be "Try again!"
Right now I have that:
<body>
<div>
<table>
<tbody>
<tr>
<td>To whom it belongs?</td>
</tr>
<tr>
<td>
<img src="#" alt="Tim's coat" width="100%"/>
</td>
</tr>
<tr>
<td class="answer-box">
<input type="text" class="field-answer" placeholder="Write it there!">
<button id="showresult" class="button-answer" value="Ok">OK</button>
</td>
</tr>
<tr>
<td>
<div class="res" id="switch">Great job!</div>
<div class="res" id="switch2">Almost there...</div>
<div class="res" id="switch3">Try again!</div>
</td>
</tr>
</tbody>
</table>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
var artist = ["abba"];
var almostartist = ["abaa", "aaba", "aabaa"];
$(document).ready(function(){
$('.field-answer').bind('keyup', function(){
if("#showresult").click(function() {
if($.inArray($(this).val().toLowerCase().trim().replace(/[^\w\s\-\_!##\$%\^\&*\\")\(+=._-]/g, ''), artist) >= 0){
$('#switch').show('good');
}
else if($.inArray($(this).val().toLowerCase().trim().replace(/[^\w\s\-\_!##\$%\^\&*\\")\(+=._-]/g, ''), almostartist) >= 0){
$('#switch2').addClass('soso');
if{
$('#switch3').addClass('non');
}
else {
$('#switch3').removeClass('non');
}
});
});
}
</script>
But of course this is not working...
In case, my CSS is here:
.res {
display: none;
color: white;
font-weight: bold;
text-align: center;
background-color: #490058;
height: 75px;
max-width: 100%;
line-height: 70px;
font-size: 140%;
}
.res.good {
display: block;
}
.res.soso {
display: block;
}
.res.non {
display: block;
}
.answer-box {
text-align: center;
}
.button-answer {
border: none;
background-color: #490058;
color: white;
font-size: 120%;
font-weight: bold;
padding: 8px;
left: 260px;
}
.field-answer {
text-align: center;
border: none;
border-bottom: 2px solid black;
background-color: transparent;
max-width: 230px;
height: 40px;
font-size: 20px;
text-transform: uppercase;
outline: 0;
}
Someone could help me to figure that out, please?
I'm quite sure I'm not far, but cannot solve it...
If you need more precisions on stuffs, please don't hesitate! ;)
Thanks guys!
Baptiste
A slightly different approach - no better than any other suggestion - FIDDLE.
JS
var artist = ["abba"];
var almostartist = ["abaa", "aaba", "aabaa"];
$('.field-answer').focus(function(){
$('.res').css('display', 'none');
$(':input').val('');
});
$('#showresult').on('click', function(){
useranswer = $('.field-answer').val();
useranswer = useranswer.toLowerCase().trim().replace(/[^\w\s\-\_!##\$%\^\&*\\")\(+=._-]/g);
if( $.inArray( useranswer, artist ) === 0 )
{
$('#switch1').css('display', 'block');
}
else if ( $.inArray( useranswer, almostartist ) >= 0 )
{
$('#switch2').css('display', 'block');
}
else //if ( $.inArray( useranswer, almostartist ) < 0 )
{
$('#switch3').css('display', 'block');
}
});
your whole function is bound in to 'keyup' event.
keyup event only occurs once when key is released from pressed.
try deleting bind('keyup', function)
I've found a solution to your problems.
Check this Fiddle
In this script every time you click on the button the field text is compared with the values of the array
Depending on the value of the the corrisponding div is showed.
code
<script type="text/javascript">
$(document).ready(function(){
var artist = ["abba"];
var almostartist = ["abaa", "aaba", "aabaa"];
$("#showresult").click(function() {
var text=$('.field-answer').val();
if(artist.indexOf(text) > -1){
$('#switch').show();
}
else if(almostartist.indexOf(text) > -1){
$('#switch2').show();
}
else{$('#switch3').show();}
});
});
</script>
if you want the message appears on keyup you have to use this code
<script type="text/javascript">
$(document).ready(function(){
var artist = ["abba"];
var almostartist = ["abaa", "aaba", "aabaa"];
$(".field-answer").on('keyup',function() {
$('.res').hide()
var text=$('.field-answer').val().toLowerCase();
if(artist.indexOf(text) > -1){
$('#switch').show();
}
else if(almostartist.indexOf(text) > -1){
$('#switch2').show();
}
else{$('#switch3').show();}
});
});
</script>
If you like one of these solutions remember to falg in green my answer ;) thanks.
Related
I am using mvc .net core for a project and I have a view page. I need some id values from this page for using them inside partial view. Because I am using those id values for foreign key in another table to post. From main page these values posts in database correctly. I always post 5 values and always 5 id there in database I saw when I checked. But when I click the accordion this id always turns first id from these 5 values. if I posted as 6,7,8,9,10 it just turns me 6 and it doesn't matter if I clicked the last one in the page or first one. But context and title always correct when I check it from database and from page.
I tried a few jquery code but they didn't work correctly. I need the correct id values when I click other accordions.
I would be glad for any kind of help. Thanks a lot.
Here is my code:
#model IEnumerable<match>
#{
ViewData["Title"] = "Home Page";
}
<head>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
</style>
</head>
<body>
<h4>Title List:</h4>
<table class="table table-hover">
#foreach (var item in Model)
{
<tr class="yzt">
<td class="xyz" id="item_title" >
<button class="accordion" id="title" >#Html.DisplayFor(modelItem => item.title)</button>
<div class="panel">
<p id="modelId" hidden>#Html.DisplayFor(modelItem=>item.Id)</p>
<p>#Html.DisplayFor(modelItem => item.context)</p>
#await Html.PartialAsync("Create", item.Exams#*, Exams*#)
</div>
</td>
</tr>
}
</table>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
//document.querySelectorAll('.accordion').forEach(link => this.addEventListener('click', myFunction))
//function myFunction() {
// document.getElementById("matchId").value = document.getElementById("modelId").innerHTML;
// console.log("value is" + document.getElementById("matchId").value);
//}
document.querySelectorAll('.panel').forEach(link => this.addEventListener('click', myFunction))
function myFunction() {
document.getElementById("matchId").value = document.getElementById("modelId").innerHTML;
console.log("value is" + document.getElementById("matchId").value);
}
//document.querySelectorAll(".accordion")
//document.getElementById("match_title").value = document.getElementById("title").innerHTML;
</script>
</body>
I recommend you to write like this:
<div class="panel" id=#item.Id onclick="test(#item.Id)">
function test(val){
alert(val);
}
Your code will create multiple having id "title" and multiple having id "modelId", and this is also the reason why you always get the id from the first item, what you write document.getElementById("modelId").innerHTML will always get the first dom element which id = "modelId"
I created a script that inserts emojis inside a textarea. The problem is that I use innerHTML to insert the emoji and that way it only inserts at the beginning or end of the content of the textarea. I would like to be able to insert this in any location indicated by the user so that if you have already written what you want you can return to a certain part of the text and simply insert your emoji. Does anyone know how to help me?
Sorry it's not really pretty but I feel like this example has everthing to explain it, you can save the snippet in an html page, load it and examine the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Insertion test</title>
<style>
.classic-button {
width: 140px;
height: 60px;
font-weight: bold;
font-size: 20px;
border: 4px solid black;
background-color: lightgray;
}
table {
border-collapse: collapse;
}
td {
border: 4px solid black;
}
.fs-24-b {
font-size: 24px;
font-weight: bold;
}
.fs-32-b {
font-size: 32px;
font-weight: bold;
}
.tBoxFill {
width: 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
font-size: 32px;
}
.td-button {
padding: 20px;
}
</style>
<script>
let insertIn = (str1, str2, at) => {
return str1.slice(0,at) + str2 + str1.slice(at);
}
function doGetCaretPosition (oField) {
var iCaretPos = 0;
// IE Support
if (document.selection) {
// Set focus on the element
oField.focus();
// To get cursor position, get empty selection range
var oSel = document.selection.createRange();
// Move selection start to 0 position
oSel.moveStart('character', -oField.value.length);
// The caret position is selection length
iCaretPos = oSel.text.length;
}
// Firefox support
else if (oField.selectionStart || oField.selectionStart == '0')
iCaretPos = oField.selectionDirection=='backward' ? oField.selectionStart : oField.selectionEnd;
// Return results
return iCaretPos;
}
function getprintLastPost() {
document.getElementById('printLastPost')
.innerText = 'Last position : '
+ doGetCaretPosition(document.getElementById('TBtoFill'));
}
function insertInTBox(tBoxDOM, text) {
let insStr = text;
let oldCaretPos = doGetCaretPosition(tBoxDOM);
let newCaretPos = oldCaretPos + insStr.length;
tBoxDOM.value = insertIn(tBoxDOM.value, insStr, oldCaretPos);
tBoxDOM.selectionEnd = newCaretPos;
}
function insertStuff() {
let toBox = document.getElementById("TBtoFill");
let inBox = document.getElementById("TBtoInsert");
insertInTBox(toBox, inBox.value);
}
</script>
</head>
<body>
<center>
<table>
<tr>
<td colspan="5">
<textarea class="fs-24-b" id="TBtoFill" cols="70" rows="10">
</textarea>
</td>
</tr>
<tr>
<td colspan="5" class="td-button">
<button class="classic-button" onclick="getprintLastPost()">
Get last pos
</button>
<span class="fs-32-b"> :
</span>
<span id="printLastPost" class="fs-32-b">Last position : ?</span>
</td>
</tr>
<tr>
<td colspan="1" class="td-button">
<button class="classic-button" onclick="insertStuff()">
Insert
</button>
<span class="fs-32-b"> : </span>
</td>
<td style="width: 80%">
<textarea class="tBoxFill fs-32-b" id="TBtoInsert"></textarea>
</td>
</tr>
</table>
</center>
</body>
</html>
Basically, you just take the utf8 or unicode value of the emoji and then you keep the function doGetCaretPosition() to use insertInTBox(). You slice the textbox string in two based on the last position of the caret which the function will tell you, then concatenate left-part->emoji->right part.
I have several draggable objects and several places where it is possible to drop an object. But I don't want anything to be dropped anywhere. Let's say object A should only be dropped in place 1 and object B should only be dropped in place 2.
I discovered that fiddling with "function drop(event)" was not a good idea. If Firefox couldn't drop, it tried to redirect instead and to go to a site name-of-my-object.com.
Setting .ondragover to "return false;", even under specific conditions (ie. wrong object for this place) made the place undroppable for all objects.
Using
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
to get the place to accept objects again was indiscriminate : every place accepted any object.
I've been fighting this for more than a day and, try as I might, I couldn't find a functioning example anywhere online.
The function to interfere with was the "function allowDrop(event)".
Complete functioning example :
var draggedObject = "";
var sentence = "";
var rectangle = "";
var canDrop = true;
function dragStart(event) {
event.dataTransfer.setData("text", event.target.id);
draggedObject = event.dataTransfer.getData("text");
document.getElementById("textHere").innerHTML = draggedObject + " is moving<br>";
}
function allowDrop(event) {
event.preventDefault();
if (event.dataTransfer.getData("text") == "drag1") {
sentence = "<br>" + draggedObject + " is OVER ";
}
if (event.dataTransfer.getData("text") == "drag2") {
sentence = "<br>" + draggedObject + " is OVER ";
}
rectangle = event.target.id;
if (rectangle == 'droptarget2') {
document.getElementById("textHere").innerHTML = sentence + "droptarget2";
} else {
document.getElementById("textHere").innerHTML = sentence + "droptarget1";
}
if ((rectangle == 'droptarget2') && (draggedObject == 'drag1')) canDrop = false;
if ((rectangle == 'droptarget1') && (draggedObject == 'drag2')) canDrop = false;
if ((rectangle == 'droptarget1') && (draggedObject == 'drag1')) canDrop = true;
if ((rectangle == 'droptarget2') && (draggedObject == 'drag2')) canDrop = true;
}
function drop(event) {
event.preventDefault();
if (canDrop == false) return;
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo").innerHTML = draggedObject + " was dropped.";
}
.droptarget1 {
float: left;
width: 200px;
height: 35px;
margin: 15px;
margin-top: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
background: lightgreen;
}
.droptarget2 {
float: left;
width: 200px;
height: 35px;
margin: 15px;
margin-top: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
background: pink;
}
.drag1 {
color: green;
}
.drag2 {
color: red;
}
<table>
<tr>
<td colspan="2">
<h3>
Drag and drop possibilities : </h3>
<p>The green "Drag1" text can only be dropped into the green rectangle. The red "Drag2" text can only be dropped into the pink rectangle.
</p>
</td>
</tr>
<tr>
<td>
<div ondragstart="dragStart(event)" draggable="true" id="drag1" name="drag1" class="drag1">Drag1</div>
</td>
<td>
<div ondragstart="dragStart(event)" draggable="true" id="drag2" name="drag2" class="drag2">Drag2</div>
</td>
</tr>
<tr>
<td>
<div id="droptarget1" class="droptarget1" name="droptarget1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</td>
<td>
<div id="droptarget2" class="droptarget2" name="droptarget2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</td>
</tr>
<tr>
<td>
<div id="textHere"></div>
</td>
</tr>
</table>
<p id="demo"></p>
I am trying to get a modal popup to show "Please Wait" while an Ajax call is being made. The pop up occurs only after the call completes.
When I click my web link, everything is working, except the modal popup that is supposed to say "Please Wait" flashes for a split second AFTER the delay that the user is supposed to be asked to wait thru. That is, the modal pops up AFTER the Ajax call is completed instead of before.
When the page loads, it calls AjaxInitialUpdate. This works fine.
The issue is when you click the button that calls AjaxChangePassword.
The function is supposed to pull up a modal, then contact the web server, before finally removing the model and calling the AjaxInitialUpdate function to refresh the whole screen.
The issue is that the AjaxChangePassword modal doesn't pop up until the web query completes (by which time, there is no point in telling the user -- Please Wait).
Now, I am totally self-taught here, so I may be calling things by the wrong name or terms. I welcome any ideas to make it run better, but please be detailed, I'm still very novice in Java.
Also, the last time I did any kind of HTML programming was before Style sheets were the way to go, so I'm kind of having to learn them as well (and refresh on all the rest, so please explain any answer in detail).
Lastly, the server side of this is written in Powershell and is single threaded so I am trying to put as much in the HTML file as possible instead of calling secondary files, like style sheets and images.
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
/* Believe these are not needed.
Imported from web site that I copied the code from.
padding: 8px 8px;
outline: none;
border: none;
border-radius: 115px;
box-shadow: 0 3px #999; */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 70%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
#IndividualSystem {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
border: 1;
}
#IndividualSystem td, #IndividualSystem th {
text-align: left;
padding: 8px;
color: black
border: 1px solid black;
}
#IndividualSystem tr {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #eeeeee;
}
.tab { margin-left: 40px; }
.button {
display: inline-block;
padding: 8px 8px;
font-size: 12px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 3px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 1 5px #666;
transform: translateY(4px);
}
.button2 {
display: inline-block;
padding: 8px 8px;
font-size: 12px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #000080;
border: none;
border-radius: 15px;
box-shadow: 0 3px #999;
}
.button2:hover {background-color: #df330e}
.button2:active {
background-color: #FD2E02;
box-shadow: 1 5px #666;
transform: translateY(4px);
}
#IndividualSystem {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
border: 1;
}
</style>
<Title>Cyber Track</title>
</head>
<body>
<table>
<tr>
<td>blah</td>
<td><h1>Systems and Passwords</H1>
<h3>Information within this page is considered confidential.</h3>
</td></tr>
</table>
<hr>
<input type="hidden" id="Leftlink" name="Leftlink" value="0">
<input type="hidden" id="Rightlink" name="Rightlink" value="0">
<input type="hidden" id="serverID" name="serverID" value="server8\admin-server8">
<input type="hidden" id="count" name="count" value="10"> <!--- Number of servers per page on server list //-->
<!-- The Modals #1 -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<h4><label id="ModalTextLine1">Loading content from server</label></h4>
</div>
</div>
<!-- The Modals #2 -->
<div id="myModal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close2">×</span>
How long do you need the password?
<form action='#'>
<select name="days">
<option value='1' >1 day or less</option>
<option value='7'>between 1 and 2 days</option>
<option value='7'>between 2 and 7 days</option>
<option value='30'>between 7 and 30 days</option>
<option value='365' selected>for up to a year.</option>
</select>
<br>
<input type="submit" value="Process Request">
</form>
</div>
</div>
<script>
// Get the modal
var modal2 = document.getElementById('myModal2');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close2")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal2.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it (or actually, just hide it)
window.onclick = function(event) {
if (modal2.style.display != "none")
{
if (event.target == modal2) {
modal2.style.display = "none";
}
}
}
</script>
<!-- End Loaded from function -->
<table id="IndividualSystem"> <!-- IndividualSystem - to define needed style sheet //-->
<tr>
<td style="width: 215px;">Server</td>
<td style="width: 259px;"><label ID="DynServerName">Loading</label></td>
</tr>
<tr>
<td style="width: 215px;">User ID</td>
<td style="width: 259px;"><label ID="DynAdminID">Loading</label></td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td style="width: 215px;">Checked out status:</td>
<td style="width: 259px;"><label ID="DynLastCheckedout">Loading</label></td>
</tr>
<tr>
<td style="width: 215px;" valign='top' >Last checked out by:</td>
<td style="width: 259px;" valign='top' ><label ID="DynLastCheckedBy">Loading...</label>
<button class="button" onclick="javascript:AjaxCheckOutPassword()" id="PassStatus">Loading</button> <!-- AjaxCheckOutPassword -->
</td>
</tr>
<tr>
<td valign='top' style="width: 215px;">Expected Check In Date:</td>
<td valign='top' style="width: 259px;"><label ID="DynExpectedBack">Loading</label></td>
</tr>
<tr>
<td style="width: 215px;">Date of last password change:</td>
<td style="width: 259px;"><label id="DynLastReset">Loading</label> <button class="button2" onclick="AjaxChangePassword()">Force Change Now!</button>
</td>
</tr>
<tr>
<th colspan="2">Notify:<br>
<table border="1" padding = "0" width=100%>
<tr>
<td width=200>On Use:</td><td><label id="DynEmailCheckOut">Loading</label></td>
</tr>
<tr>
<td width=200>On Checkin:</td><td><label id="DynEmailCheckIn">Loading</label></td>
</tr>
</table>
</th>
</tr>
<tr><td colspan="2">
<label ID="DynAccountPurpose"></label>
</td></tr>
</tbody>
</table>
<!-- Page Footer (if any) //-->
<!-- Page links left/up/right //-->
<table>
<tr><td width = 50>
<label id="Show-Left">
<a class='w3-left w3-btn' href='#' onclick="AjaxNavigate(-1)" text='Prior Server'>
<img src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAEAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAgABoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9+Wwp/wDrVzHxS+Kmk/B3wfda3rdz9lsbPZ5kvlvJ951QfKis3V1HA7074ofE/SPhD4RvNc1m5+x6fZ7PNl8t5Nu50ReFBJyzgcDv6Dj853k8Zf8ABW/4sgY/sv4d6T0X9zPjzIfX9xNzPae/X+6Ob9naPtJ7GXM5Plgfod8H/jHoXxw8FW3iDw7c/btPvt4WTy5I87JHj6SKp+8jfwj8etddvHp+hrm/hb8L9H+EnhO30PQ7f7JZWe7am93xvdnPLsx6sT1P8q6QcDjbjt8prGPdm0rHjv7Yf7JOj/tW/DuTS9Q/0e6jx5M+Hfyv3sTt8qyIDkRAc9O1fH/7GP7T+t/sN+P4/hD8TB5OnQ5+yXX7t/s+Y5rt/kt45C2WmiHMnGeOMgfpEWJb73H0614v+2N+x1oP7WfgiTT9SBt7+HBtrr94/lZkhZvkWRAciEDn8OldCqc0fZzMJU+WXNA9hsb9NQtVlhfdG2drYIzg4PWp8r/drzb9lv4I3fwH+EWn+HNQ1X+2JrPzM3H2YW+7dNLJ90MwGBIB949Pwr0kx8/d/SsIO2jOjRn/2Q==' alt='go to prior server' height='26' width='32'>
</a>
</label>
</td>
<td>
<a class='w3-left w3-btn' href='#' onclick="AjaxNavigate(0)" text='Next server'>Return to main list</a>
</td>
<td width = "50">
<label id="Show-Right">
<a class='w3-left w3-btn' href='#' onclick="AjaxNavigate(1)" text='Next server'>
<img src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAgABoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD97dc1U6Zp000cfnPHt+Tdt3ZIHX8a+Z/2Sv8AgpDpfx98c3/hjWNP/wCEf16Dy/Kt/Pe78zMcsp+ZYVQYSMHk/wAXqK+oihPT8DXx7/wUM/4J8r8Wo4/GXg5fsfi7T85XPmfat/2eH/lrMsabYkf+E5z64NEHGM+WezFUTcbw3PsMgtjj6nNO8pfSvjn/AIJv/wDBRD/hoLTj4b8UDyPFFr99s7vtG43Eg4jhWNdsca9+frmvsPa3/PX/AMdrSdKUHZkQqxmtCPULyK1tXef5YVxuPJ7+3PWvzt/a4/a28S/tm/Ek/Cz4V/vrOX/j7u/3S+ZiKK6T5LmOMjBhlHD+57A/ofqenQ6hbPFP80BxuXkdwRyOetef/Aj9lXwh+zpHer4a077AL7y/NP2iaXds34/1kj4/1jdPWsYqLneey/E0nJqP7vcwv2Ov2OdD/ZM+H/8AZunjzr64/wCPy7zIv2jbJMyfI0jhdolI4PPU+3su5fX9KAdwyRgntmn7hWs6spvmkZwpRjsf/9k=' alt='go to prior server' height='26' width='32'>
</a>
</label>
</td>
</tr></table>
<!-- End Page links left/up/right //-->
<!-- Dynamic JAVA Script Section //-->
<script>
// disable our NAV pointers till later where we may re-enable them.
document.getElementById('Show-Right').style.display = 'none';
document.getElementById('Show-Left').style.display = 'none';
//
// This is the specific function that I need help with.
// Why does this modal pop up only after the actual query is done?
//
function AjaxChangePassword(){
document.getElementById('myModal1').style.display = "block";
document.getElementById('myModal2').style.display = "none"; // Make sure its not poped up..
// we need to set item on the modal to explain what we are doing...
document.getElementById("ModalTextLine1").innerHTML="Processing password change request. Please Wait"
var xhr = "";
var xhr = new XMLHttpRequest();
// server will check if values are valid..
var Server = document.getElementById("DynServerName").innerHTML;
var AdminID = document.getElementById("DynAdminID").innerHTML;
xhr.open('GET', 'http://PSShellSrv.mydomain.local:80/CyberPass3/?command=update&sub=change&server=' + Server + '/' + AdminID+'&NoCache=' + ((new Date()).getTime()), true);
xhr.responseType = 'text';
xhr.onload = function () {
console.log('Initail Comment Response onpassword change.');
if (xhr.readyState === xhr.DONE) {
if (xhr.status === 200) {
console.log(xhr.response);
console.log("Report password changed.");
AjaxInitialUpdate() // password changed, lets refresh.
};
};
};
xhr.send(null);
document.getElementById('myModal1').style.display = "none";
};
// Navigate left and right..
function AjaxNavigate(link)
{
xx = document.getElementById('Leftlink').value
xx = document.getElementById('Rightlink').value
if (link == 0)
{
// Back to the main page. Get the values that make who we are -- servername and count.
var count = document.getElementById('count').value;
var CurrentSystem = document.getElementById('serverID').value;
var x = '/CyberPass3/?command=homepage&server=' + CurrentSystem + '&count='+ count + '&NoCache=' + ((new Date()).getTime());
location.replace('/CyberPass3/?command=homepage&server=' + CurrentSystem + '&count='+ count + '&NoCache=' + ((new Date()).getTime()));
}
else
{
if (link == 1)
{
document.getElementById('serverID').value = document.getElementById('Rightlink').value
} else {
document.getElementById('serverID').value = document.getElementById('Leftlink').value
}
// we've moved left or right. Lets update.
AjaxInitialUpdate()
}
}
function AjaxCheckOutPassword() {
console.log("Checkout Code not yet written");
};
function AjaxInitialUpdate() {
var xhr = ""
var xhr = new XMLHttpRequest();
var count = document.getElementById('count').value;
var link = document.getElementById('serverID').value
document.getElementById('myModal1').style.display = "block"; // show we are updating everything..
document.getElementById('myModal2').style.display = "none"; // should already be hidden, but lets make sure..
xhr.open('GET', 'http://PSShellSrv.mydomain.local:80/CyberPass3/?command=update&sub=refresh&server=' + link + '&count=' + count + '&NoCache=' + ((new Date()).getTime()), true);
xhr.responseType = 'text';
xhr.onload = function () {
console.log('Initail Response.');
if (xhr.readyState === xhr.DONE) {
if (xhr.status === 200) {
WebFields = xhr.responseText.split("|");
document.getElementById("DynServerName").innerHTML = WebFields[0];
document.getElementById("DynAdminID").innerHTML = WebFields[1];
document.getElementById("DynLastCheckedout").innerHTML = WebFields[2];
document.getElementById("DynLastCheckedBy").innerHTML = WebFields[3];
document.getElementById("DynExpectedBack").innerHTML = WebFields[4];
document.getElementById("DynLastReset").innerHTML = WebFields[5];
document.getElementById("PassStatus").innerHTML = WebFields[6];
document.getElementById("DynEmailCheckIn").innerHTML = WebFields[7];
document.getElementById("DynEmailCheckOut").innerHTML = WebFields[8];
// if no comment, don't even dispay the table cells.
if (WebFields[9].slice(0,1) == "{" && WebFields[9].slice(-1) == "}" && WebFields[9] != "{}" )
{
var res = WebFields[9].split("{");
var res = res[1].split("}")[0];
document.getElementById("DynAccountPurpose").innerHTML = "<tr><td style='width: 474px;' colspan='2'><p><b>Account Comments:</b></p><p class='tab'>" + res + "</p></td></tr>";
}
else
{
document.getElementById("DynAccountPurpose").innerHTML = "";
console.log("No Comment");
};
// lets populate the nav buttons..
if (WebFields[10] == '\\')
{
// hide go left
document.getElementById('Show-Left').style.display = 'none';
document.getElementById("Leftlink").value = "0/0"
}
else
{
//Enable go left
document.getElementById('Show-Left').style.display = 'block';
document.getElementById('Leftlink').value = WebFields[10];
};
// lets populate the nav buttons..
if (WebFields[11] == "\\")
{
// hide go right
document.getElementById('Show-Right').style.display = 'none';
document.getElementById("Rightlink").value = "0/0";
}
else
{
// Enable go right
document.getElementById('Show-Right').style.display = 'block';
document.getElementById("Rightlink").value = WebFields[11];
};
document.getElementById('myModal1').style.display = "none";
}
if (xhr.status === 403) {
console.log(xhr.response);
document.getElementById("PassStatus").innerHTML = 'Access Denied';
}
if (xhr.status === 404) {
console.log(xhr.response);
document.getElementById("PassStatus").innerHTML = 'Unable to load';
};
}
else
{
document.getElementById("PassStatus").innerHTML = "Failed";
};
};
xhr.send(null);
};
// Now, load the initial value..
window.onload = AjaxInitialUpdate();
</script>
When I call AjaxChangePassword(), I expected the modal to open BEFORE the query.
As it is now, if I stop the server after the page loads, but before this function is started, the modal never pops up, then once I start the server side back up, and I see the query come in and get answers, only then does it pop up, and then only for a split second.
What am I doing wrong in the way I am calling it?
As I reviewed your code and found that in the function AjaxChangePassword firstly you opened modal and then called ajax then closed modal the problem is that basically javascript executes synchronously but if there is ajax call then it executes asynchronously, so according to that your modal opens and then call ajax untill ajax is busy in getting response before that next line will be executed that line is for modal close and this happens in the fraction of ms so you don't see anything, And you said that after ajax call modal is showing because in AjaxChangePassword the call back method is AjaxInitialUpdate and also in this method you opened modal then closed but remember in this method you closed modal in the call back method so it appears for some time and you can see so according to me just remove
document.getElementById('myModal1').style.display = "none";
this line from AjaxChangePassword method below is corrected AjaxChangePassword function
function AjaxChangePassword(){
document.getElementById('myModal1').style.display = "block";
document.getElementById('myModal2').style.display = "none"; // Make sure its not poped up..
// we need to set item on the modal to explain what we are doing...
document.getElementById("ModalTextLine1").innerHTML="Processing password change request. Please Wait"
var xhr = "";
var xhr = new XMLHttpRequest();
// server will check if values are valid..
var Server = document.getElementById("DynServerName").innerHTML;
var AdminID = document.getElementById("DynAdminID").innerHTML;
xhr.open('GET', 'http://PSShellSrv.mydomain.local:80/CyberPass3/?command=update&sub=change&server=' + Server + '/' + AdminID+'&NoCache=' + ((new Date()).getTime()), true);
xhr.responseType = 'text';
xhr.onload = function () {
console.log('Initail Comment Response onpassword change.');
if (xhr.readyState === xhr.DONE) {
if (xhr.status === 200) {
document.getElementById('myModal1').style.display = "none";
console.log(xhr.response);
console.log("Report password changed.");
AjaxInitialUpdate() // password changed, lets refresh.
};
};
};
xhr.send(null);
};
and check. I may be wrong but check it.
Firefox is exhibiting this behavior (bug?) that occurs after exiting a full screened <img> where the user ends up at the element that sits above the <img> the user had just viewed in fullscreen. In short my question is:
How can I prevent Firefox from scrolling up after exiting fullscreen mode?
The MCVE posted as a Snippet doesn't function due to SO's strict security measures so I have provided a plunker. All the details are commented in the Snippet and Plunker. In addition I have added a simple interface to not only reproduce the issue but to change the layout to test different combinations as well. Thank you for your valuable time.
SNIPPET (doesn't function--review this plunker instead)
/* Several attempts to use the .focus() method
|| and focus events did not work for me, neither
|| has tabindex and anchors. If it appears that
|| my implementation is wrong (a strong possibility)
|| please inform me.
*/
$('a').click(function(e) {
var tgt = $(this).prev();
fs(tgt[0]);
$(this).focus();
});
/* This function is for the MCVE
|| It enables the ~select~ to remove and re-insert
|| the test elements. By doing so, we can see
|| how the test elements behave in different
|| combinations. What I found out about FF is
|| that when exiting a full screened ~img~ that's
|| positioned last is that it will lose focus
|| and the viewport is scrolled up to the element
|| above it.
*/
$('#sel1').on('change', function(e) {
var V = $(this).val();
var first = $('#' + V).find(':first').attr('id');
if ($('#' + V).hasClass('media')) {
$('#' + V).fadeOut('#' + first);
} else {
$('#' + V).fadeIn('#' + first);
}
$('#' + V).toggleClass('media');
});
/* These 2 functions are responsible for
|| full screen. Please inform me if there's a
|| better way, or if anything is outdated. I
|| have researched the Fullscreen API and I
|| haven't found any updates of any use. I've
|| used these functions for the last 3 years
|| so maybe I might've missed something
|| critical.
*/ // There's no ms prefixes because I'm not concerned about IE.
var isFullScreen = function() {
return !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement);
}
function fs(target) {
if (!isFullScreen()) {
if (target.requestFullscreen) {
target.requestFullscreen();
} else if (target.webkitRequestFullscreen) {
target.webkitRequestFullscreen();
} else if (target.mozRequestFullScreen) {
target.mozRequestFullScreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
}
}
/* These styles are here for the demo itself
|| and are not a cause of the problem at hand
*/
* {
margin: 0;
padding: 0
}
body {
font: 400 16px/1.3 Consolas;
height: 100%;
width: 100%;
background: #333;
color: #fed
}
a {
margin: 0 auto 50px;
display: block;
width: 48px;
height: 48px;
text-align: center;
cursor: pointer;
background-size: contain;
}
.vid,
.img,
.gif,
.svg {
display: block;
margin: 20px auto;
}
.expand {
background: url(http://imgh.us/expand_2.svg)no-repeat;
}
header {
padding: 15px 10px;
margin: 15px auto;
}
fieldset {
border: 10px solid tomato;
width: 20ch
}
legend {
font-size: 1.2em;
}
dt {
text-decoration: underline;
font: 1.1em;
}
dd {
margin-left: 20px
}
.note,
dt {
color: #ffcc33
}
.demo {
width: 450px;
padding: 10px;
counter-reset: step;
}
.demo li::before {
counter-increment: step;
content: "» " counter(step) ". ";
text-indent: -150px;
margin-left: 30px;
color: cyan;
}
.fs:-webkit-full-screen {
max-width: 100%;
height: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>Prevent Firefox from Moving After .exitFullscreen()</title>
<style>
</style>
</head>
<body>
<header>
<dl>
<dt>Objective</dt>
<dd>Prevent Firefox from Moving After .exitFullscreen()</dd>
<dt>Behavior</dt>
<dd><b class='note'>Expected: </b>When exiting fullscreen mode, we should be at the same position that we were at before</dd>
<dd><b class='note'>Experienced: </b>In FF, when exiting fullscreen mode, we are scrolled up as if the element above has a higher tab priority or more than likely is that tab index and focus are being ignored by FF.</dd>
<dt>Question</dt>
<dd><b><mark>How can I prevent Firefox from scrolling up after exiting fullscreen mode?</mark></b></dd>
</dl>
</header>
<section>
<ol class='demo'>
<li>To reproduce issue, use the <select> to remove items C, D, E, and F.</li>
<li>Next, fullscreen item B by clicking the icon below it.</li>
<li>Then exit full screen mode by hitting <kbd>ESC</kbd>.</li>
<li>Notice we have jumped up the page.</li>
</ol>
</section>
<!--This ~select~ is for the MCVE - details are
commented below in the ~script~ block-->
<section>
<fieldset>
<legend>Remove and Re-insert Elements</legend>
<select id='sel1'>
<option value="">----</option>
<option value='A'><video> src=MP4</option>
<option value='B'><img> src=PNG</option>
<option value='C'><video> poster=GIF</option>
<option value='D'><img> src=SVG</option>
<option value='E'><div> </option>
<option value='F'><iframe> srcdoc="<DIV><div>"</option>
</select>
</fieldset>
<!--I tried using the ~a~nchors, -id-, -name-, and -tabindex-
FF was ignoring my attempts to keep or get focus. Using named or
id ~a~nchors failed since the distance between desired spot
and the spot FF ends up at is short.-->
<div id='A' class='media'>
<video id="vid1" class="vid fs" src="http://html5demos.com/assets/dizzy.mp4" controls></video>
<a href='#/' class='expand' tab-index='1'></a>
</div>
<div id='B' class='media'>
<img id='img1' class='img fs' src='http://imgh.us/Lenna.png'>
<a href='#/' class='expand' tab-index='1'></a>
</div>
<div id='C' class='media'>
<video id='gif1' class='gif fs' poster='http://imgh.us/gir_zim.gif' width='300' height='300'></video>
<a href='#/' class='expand' tab-index='1'></a>
</div>
<div id='D' class='media'>
<img id='svg1' class='svg fs' src='http://www.clker.com/cliparts/j/g/8/S/V/O/test.svg' width='auto' height='500'>
<a href='#/' class='expand' tab-index='1'></a>
</div>
<!--Subjects E and F were added to see if a "dummy"
element were to be the last element so that FF
would exit fullscreen on the last ~img~ correctly.
I got mixed results.-->
<div id='E' class='media'>
<div id='div1' class='fs'> </div>
<a href='#/' class='expand' tab-index='1' height='1' width='1'></a>
</div>
<div id='F' class='media'>
<iframe id='ifm1' class='fs' srcdoc="<div style='color:lime'>iframe srcdoc</div><div style='color:cyan'>2 divs</div>" allowfullscreen></iframe>
<a href='#/' class='expand' tab-index='1' height='1' width='1'></a>
</div>
<footer class='bottom'> </footer>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
</script>
</body>
</html>
Define variables initially.
var sx,sy;
Save scrollbar position before entering Fullscreen
var d= document, r= d.documentElement, b= d.body;
sx= r.scrollLeft || b.scrollLeft || 0;
sy= r.scrollTop || b.scrollTop || 0;
When player exit full screen,
window.scrollTo(sx,sy);
Hope this helps!
This answer is fully credited to #Kaido and I'll readily replace this answer if and when Kaido posts an answer.
My attempts at using the scroll methods didn't work is because I was listening to click events when I should've been listening for the onmozfullscreenchange
Plunker
Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prevent Firefox from Moving After .exitFullscreen()</title>
<style>
button {
display: block;
padding: 0;
width: 32px;
height: 32px;
text-align: center;
cursor: pointer;
background-size: contain;
}
.expand {
background: url(http://imgh.us/expand_2.svg)no-repeat;
}
</style>
</head>
<body>
<div id='A' class='media'>A
<video id="vid1" class="vid fs" src="http://html5demos.com/assets/dizzy.mp4" controls></video>
</div>
<div id='B' class='media'>B
<img id='img1' class='img fs' src='http://imgh.us/Lenna.png'>
<button class='expand'></button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$('button').click(function(e) {
e.preventDefault();
var tgt = $(this).prev();
fs(tgt[0]);
});
/* This function is for the MCVE
|| It enables the ~select~ to remove and re-insert
|| the test elements. By doing so, we can see
|| how the test elements behave in different
|| combinations. What I found out about FF is
|| that when exiting a full screened ~img~ that's
|| positioned last is that it will lose focus
|| and the viewport is scrolled up to the element
|| above it.
*/
$('#sel1').on('change', function(e) {
var V = $(this).val();
var first = $('#' + V).find(':first').attr('id');
if ($('#' + V).hasClass('media')) {
$('#' + V).fadeOut('#' + first);
} else {
$('#' + V).fadeIn('#' + first);
}
$('#' + V).toggleClass('media');
});
/* These 2 functions are responsible for
|| full screen.
*/ // There's no ms prefixes because I'm not concerned about IE.
var isFullScreen = function() {
return !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement);
}
// SOLUTION XXXXXXXXXX]START[XXXXXXXXXXXXXXX
var yOffset;
document.onmozfullscreenchange = function() {
if (!isFullScreen()) {
window.scrollTo(0, yOffset);
}
};
// SOLUTION XXXXXXXXXXX]END[XXXXXXXXXXXXXXXX
function fs(target) {
if (!isFullScreen()) {
yOffset = pageYOffset;
if (target.requestFullscreen) {
target.requestFullscreen();
} else if (target.webkitRequestFullscreen) {
target.webkitRequestFullscreen();
} else if (target.mozRequestFullScreen) {
target.mozRequestFullScreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
}
}
</script>
</body>
</html>