I am currently using this:
function logData(lid){
var dataWindow = window.open("analyze.php?id="+id,"Log Analysis",
"top=300,scrollbars=yes, left=300, width=800 ,height=500");
}
But this is opening a new browser, and in a mobile covers the original site
(an unwanted behaviour).
I want to know if there is a way to create a small window without
starting a new browser using JavaScript and jquery?
The most ridiculously basic one:
window.onload=function(){
document.body.onclick = function(e){
if(e.target && e.target.tagName === 'A')
{
var skip = {
'_blank':1,
'_top':1,
'_self':1,
'_parent':1,
'':1
},
elem = e.target;
if(!skip[elem.target])
{
var possible_iframes = document.getElementsByName(elem.target);
for(var i = 0, l = possible_iframes.length; i<l; i++)
{
if(possible_iframes[i].tagName === 'IFRAME')
{
e.preventDefault();
possible_iframes[i].parentNode.style.display = 'block';
possible_iframes[i].src = elem.href;
var possible_close = possible_iframes[i].parentNode.getElementsByTagName('a');
for(var j = 0, k = possible_close.length; j<k; j++)
{
if( possible_close[j].tagName === 'A' && possible_close[j].className.search(/\s*close\s*/) > -1 )
{
possible_close[j].onclick = function(){
this.parentNode.style.display = 'none';
};
break;
}
}
return true;
}
}
}
}
}
};
html,body{width:100%;height:100%;margin:0;padding:0;}
.popup {
display:none;
background:rgba(0,0,0,0.5);
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
}
.popup iframe{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
width:70%;
height:75%;
}
.popup a.close {
position: absolute;
top: 12.5%;
left: 85%;
z-index: 4;
border: 2px solid #FFF;
border-radius: 50%;
display: block;
width: 19px;
height: 19px;
background: black;
color: white;
text-align: center;
font-weight: bold;
text-decoration: none;
font-size: 16px;
}
<div class="popup"><a class="close" href="#">×</a><iframe id="popup" name="popup"></iframe></div>
test
This is not the perfect solution, since the href for each element must be set before the click.
But, if you generate the links on server-side, this will help a lot.
You may user iframe for this.
<iframe id="frame" src="" style="display:none" ></iframe>
javascript:
function logData(lid){
var frame = $("frame");
frame.src= "analyze.php?id="+id;
frame.style.display = "block"
}
Using necessary css styles make it appear like a popup.
Related
I'm a beginner in javascript and we where given a task at uni to create a hangman game using input fields inside an html form . I want to use an event listener to display a submit button when all the input fields are filled and whenever I want to delete a letter the button must obviously go away .
I have written code below that displays input fields in a form container depending on the letter size of the give word (ex. word = "hi" => 2 input fields to fill for "hi" ).My problem is that I have no clue how to create this eventListener function and I would appreciate your help with this .
My code :
function hangman(){
var island = "Rhodes"; //the given word that is supposed to be found
var t = document.createTextNode(shuffleWord(island))
document.getElementById("hidden-word").appendChild(t);
createSpaces(island);
}
function shuffleWord (word){
var shuffledWord = '';
word = word.split('');
while (word.length > 0) {
shuffledWord += word.splice(word.length * Math.random() << 0, 1);
}
return shuffledWord;
}
function createSpaces(text){
for(var i=0;i<text.length;i++){
var space = document.createElement("input");
space.setAttribute("class" , "dash");
document.getElementById("hangman-container").appendChild(space);
}
}
body, html {
background-size: cover;
}
body{
margin: 0;
}
.transparent-box{
border:none;
position:absolute;
top:10%;
left:15%;
background-color:black;
height:500px;
width:70%;
opacity: 0.6;
}
.transparent-box p{
color:white;
text-align:center;
}
.transparent-box h1{
color:white;
position: relative;
text-align:center;
font-size:20px;
top:30px;
}
#hangman-container{
display: block;
position: relative;
width:auto;
top:30%;
left:0%;
background-color: transparent;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.dash{
margin:0;
align-items: flex-start;
width:5%;
border:none;
border-radius: 5%;
background-color: turquoise;
color:red;
font-size:30px;
}
.dash:focus{
opacity:0.8;
}
#submitbtn{
display:none;
position: absolute;
top:200%;
left:80%;
float:right;
}
<body onload=hangman()>
<div class = "transparent-box" id = "t-box">
<p>Play here </p>
<h1 id = "hidden-word">The word is : </h1>
<form id = "hangman-container" method="POST">
<button type = "submit" id="submitbtn">Submit</button>
</form>
</div>
</body>
The word is given as a random string and you have to guess the correct word in the above code .
Thank you in advance .
You likely want this
addEventListener on the window.load
addEventListener on the letters
toggle the class
Note I added a hide class to the button to turn it off
function hangman() {
var island = "Rhodes"; //the given word that is supposed to be found
var t = document.createTextNode(shuffleWord(island))
document.getElementById("hidden-word").appendChild(t);
createSpaces(island);
}
function shuffleWord(word) {
var shuffledWord = '';
word = word.split('');
while (word.length > 0) {
shuffledWord += word.splice(word.length * Math.random() << 0, 1);
}
return shuffledWord;
}
function createSpaces(text) {
for (var i = 0; i < text.length; i++) {
var space = document.createElement("input");
space.setAttribute("class", "dash");
document.getElementById("hangman-container").appendChild(space);
}
}
window.addEventListener("load",function() { // on page load
document.getElementById("t-box").addEventListener("input",function(e) { // any input in the t-box
const tgt = e.target; // the actual input
if (tgt.classList.contains("dash")) { // is it a "dash"?
const letters = [...document.querySelectorAll(".dash")]; // get all dash
length = letters.filter(inp => inp.value.trim() !=="").length; // filter on filled in
document.getElementById("submitbtn").classList.toggle("hide",length<letters.length); // toggle hide class if filled
}
})
hangman()
});
body,
html {
background-size: cover;
}
body {
margin: 0;
}
.transparent-box {
border: none;
position: absolute;
top: 10%;
left: 15%;
background-color: black;
height: 500px;
width: 70%;
opacity: 0.6;
}
.transparent-box p {
color: white;
text-align: center;
}
.transparent-box h1 {
color: white;
position: relative;
text-align: center;
font-size: 20px;
top: 30px;
}
#hangman-container {
display: block;
position: relative;
width: auto;
top: 30%;
left: 0%;
background-color: transparent;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.dash {
margin: 0;
align-items: flex-start;
width: 5%;
border: none;
border-radius: 5%;
background-color: turquoise;
color: red;
font-size: 30px;
}
.dash:focus {
opacity: 0.8;
}
#submitbtn {
position: absolute;
top: 200%;
left: 80%;
float: right;
}
.hide { display:none}
<div class="transparent-box" id="t-box">
<p>Play here </p>
<h1 id="hidden-word">The word is : </h1>
<form id="hangman-container" method="POST">
<button type="submit" class="hide" id="submitbtn">Submit</button>
</form>
</div>
I have added this fiddle, where I am going through all input fields and adding a listener, then inside that go through each field and based upon it's content I show or hide the submit button.
Fiddle
const inputLists = document.querySelectorAll("input");
let showButton = true;
document.querySelectorAll("input").forEach((el) => {
el.addEventListener('input', (evt => {
inputLists.forEach((ip) => {
console.log(ip.value);
if (ip.value === '') {
showButton = false;
} else {
showButton = true;
}
})
if (showButton) {
document.querySelector('button').style.display = 'block'
} else {
document.querySelector('button').style.display = 'none'
}
}))
})
button {
display: none;
}
<form>
<input type="text">
<input type="text">
<button type="submit">
Submit
</button>
</form>
This one contains another feature. When one field is filled, it gets to the next one automaticly. Good luck.
var island;
function hangman(){
island = "Rhodes"; //the given word that is supposed to be found
var t = document.createTextNode(shuffleWord(island))
document.getElementById("hidden-word").appendChild(t);
createSpaces(island);
}
function shuffleWord (word){
var shuffledWord = '';
word = word.split('');
while (word.length > 0) {
shuffledWord += word.splice(word.length * Math.random() << 0, 1);
}
return shuffledWord;
}
function createSpaces(text){
var spaces = new Array(island.length);
for(var i=0;i<text.length;i++){
let n=i;
spaces[i] = document.createElement("input");
spaces[i].setAttribute("class" , "dash");
spaces[i].maxLength = 1;
spaces[i].oninput = function () {
if (this.length == 0) return;
if (n == island.length-1) document.getElementById("submitbtn").classList.add("show");
if (n < island.length-1) spaces[n+1].focus();
}
document.getElementById("hangman-container").appendChild(spaces[i]);
}
}
body, html {
background-size: cover;
}
body{
margin: 0;
}
.transparent-box{
border:none;
position:absolute;
top:10%;
left:15%;
background-color:black;
height:500px;
width:70%;
opacity: 0.6;
}
.transparent-box p{
color:white;
text-align:center;
}
.transparent-box h1{
color:white;
position: relative;
text-align:center;
font-size:20px;
top:30px;
}
#hangman-container{
display: block;
position: relative;
width:auto;
top:30%;
left:0%;
background-color: transparent;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.dash{
margin:0;
align-items: flex-start;
width:5%;
border:none;
border-radius: 5%;
background-color: turquoise;
color:red;
font-size:30px;
}
.dash:focus{
opacity:0.8;
}
#submitbtn{
display:none;
position: absolute;
top:200%;
left:80%;
float:right;
}
#submitbtn.show {
display: inline-block;
}
<body onload=hangman()>
<div class = "transparent-box" id = "t-box">
<p>Play here </p>
<h1 id = "hidden-word">The word is : </h1>
<form id = "hangman-container" method="POST">
<button type = "submit" id="submitbtn">Submit</button>
</form>
</div>
</body>
I'm trying to put go-to-top button in the bottom right angle of the screen. It should appear on scroll function, a disappear when I go back to top.
The button exists, but when I scroll down, it stays with "home page", so as I scroll more, it is not visible anymore. How to fix the problem? You can see my codes down here. Thanks a lot in advance!
window.onscroll = function(){goTop()};
let goTop = function() {
var rocket = document.querySelector(".go-to-top");
var scrollExt = document.body.scrollTop;
if(document.body.scrollTop > 500 || document.documentElement.scrollTop > 500){
rocket.style.display = "block";
} else{
rocket.style.position = "none";
}
};
let rocketClick = function() {
document.documentElement.scrollTop = 0;
}
.go-to-top{
display: none;
z-index: 10;
position: fixed;
bottom: 40px;
right: 40px;
width: 40px;
height: 40px;
transform: rotate(-45deg);
color: black;
padding: 10px;
text-decoration: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.go-to-top i{
font-size: 50px;
}
.go-to-top:hover{
cursor: pointer;
text-decoration: none;
}
<!--the rest of markup-->
<div class="rocket">
<a href="#" class="go-to-top">
<i class="fas fa-rocket"></i>
</a>
</div>
<script src="script.js"></script>
<!--closing markup-->
rocket.style.position:none would give your element the css style of position:none. none is not a valid value for the position property.
You can see the position values here -> CSS position
By the look of your code you would need to use display instead of position.
Also, you make a variable scrollExt and you do not use it. Plus, you make a rocketClick function but you do not call it on your element.
window.onscroll = function() {
goTop();
};
const goTop = function() {
const rocket = document.querySelector('.go-to-top');
const scrollExt = document.body.scrollTop;
if (scrollExt > 500 || document.documentElement.scrollTop > 500) {
rocket.style.display = 'block';
} else {
rocket.style.display = 'none';
}
};
const rocketClick = function() {
document.documentElement.scrollTop = 0;
};
main {
height:1500px;
background:red;
}
.go-to-top{
display: none;
z-index: 10;
position: fixed;
bottom: 40px;
right: 40px;
width: 40px;
height: 40px;
transform: rotate(-45deg);
color: black;
padding: 10px;
text-decoration: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.go-to-top i{
font-size: 50px;
}
.go-to-top:hover{
cursor: pointer;
text-decoration: none;
}
<main></main>
<div class="rocket" onclick=rocketClick()>
<a href="#" class="go-to-top">
rocket icon
</a>
</div>
Suggestions :
Keep using let and const. Do not use var. Also, use const for your functions. You do not change the content of the functions anywhere so you can use const instead of let.
Add an animation(transition) to the scrollTop.
I want to add <div> tags inside input type="input" for a number-only input field. I know it can't be done, but I was wondering if there was some way to add the + and - buttons inside an input field that isn't input type="number". For reasons that I will not get into (it took me a good two days to solve an issue), I am unable to use input type="number".
How can I make custom spin buttons for an input that doesn't come with spin buttons? Most of the other questions on SO are asking about styling/hiding the spin buttons in a number input.
I suggest you to make a big div containing on a side the input number and, on the other side, make another div which contains the two buttons one on the top of the other.
Since you can't use the type="number" for some reason, here's a small custom stepper.
var numberSteppers = document.querySelectorAll('.numberStepper input');
for(var i = 0; i < numberSteppers.length; i++){
numberSteppers[i].oninput = function(){
this.value = !isNaN(this.value) ? parseInt(this.value) : 0;
}
}
var stepperButtons = document.querySelectorAll('.numberStepper button');
for(var j = 0; j < stepperButtons.length; j++){
stepperButtons[j].onclick = function(e){
e.preventDefault();
var input = this.parentNode.previousElementSibling;
input.value = input.value !== '' ? parseInt(input.value) + parseInt(this.value) : parseInt(this.value);
}
}
.numberStepper, .numberStepper *{
box-sizing:border-box;
}
.numberStepper{
max-width:200px;
position:relative;
}
.numberStepper input{
display:block;
width:80%;
font-size:2em;
min-height:3ex;
padding:1ch;
text-align:right;
}
.numberStepper .steppers{
position:absolute;
right:0;
top:0;
height:100%;
width:20%;
}
.numberStepper button{
margin:0;
padding:0;
border:1px solid;
width:100%;
cursor:pointer;
height:50%;
}
<div class="numberStepper">
<input type="text"/>
<div class="steppers">
<button value="1">+</button>
<button value="-1">-</button>
</div>
</div>
If for some reason you don't want to add divs or change input type to number, you can use this solution.
jQuery('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter('.quantity input');
jQuery('.quantity').each(function() {
var spinner = jQuery(this),
input = spinner.find('input[type="text"]'),
btnUp = spinner.find('.quantity-up'),
btnDown = spinner.find('.quantity-down'),
min = input.attr('min'),
max = input.attr('max');
btnUp.click(function() {
var oldValue = parseFloat(input.val());
if (oldValue >= max) {
var newVal = oldValue;
} else {
var newVal = oldValue + 1;
}
spinner.find("input").val(newVal);
spinner.find("input").trigger("change");
});
btnDown.click(function() {
var oldValue = parseFloat(input.val());
if (oldValue <= min) {
var newVal = oldValue;
} else {
var newVal = oldValue - 1;
}
spinner.find("input").val(newVal);
spinner.find("input").trigger("change");
});
});
.quantity {
position: relative;
}
input[type=text]::-webkit-inner-spin-button,
input[type=text]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=text] {
-moz-appearance: textfield;
}
.quantity input {
width: 45px;
height: 42px;
line-height: 1.65;
float: left;
display: block;
padding: 0;
margin: 0;
padding-left: 20px;
border: 1px solid #eee;
}
.quantity input:focus {
outline: 0;
}
.quantity-nav {
float: left;
position: relative;
height: 42px;
}
.quantity-button {
position: relative;
cursor: pointer;
border-left: 1px solid #eee;
width: 20px;
text-align: center;
color: #333;
font-size: 13px;
font-family: "Trebuchet MS", Helvetica, sans-serif !important;
line-height: 1.7;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.quantity-button.quantity-up {
position: absolute;
height: 50%;
top: 0;
border-bottom: 1px solid #eee;
}
.quantity-button.quantity-down {
position: absolute;
bottom: -1px;
height: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quantity">
<input type="text" value="1">
</div>
This solution seems to work on Chrome and Edge. (Not tested on other browsers).
Credits to this.
I'm trying to create and make a new div tag appear in response to a setInterval called function call. The div tag does appear - it exists when I check chrome developer tools, but it doesn't appear on top of the other elements that are in place.
I've set the z-index of the newly generated div to 2000, no other z-index is larger. After the code runs, I can see the newly created div tags using Chrome Dev Tools, but they are behind the other divs. They should appear in front of everything else.
CSS
#main_wrapper{
position: relative;
width:850px;
border:solid 4px #ccc;
overflow: visible;
display: table;
}
#my_img{
position: relative;
width:650px;
display: inline-block;
vertical-align: top;
}
#hgh_lghtr{
position: absolute;
top:5px;
left:1px;
z-index:1000;
border:solid 4px green;
width: 20px;
height: 20px;
}
#cntnt_bx{
position: relative;
top:0px;
z-index:22;
border:solid 4px red;
width: 150px;
height: 100%;
display: inline-block;
margin-left: 14px;
padding: 0px;
}
#mini_nav_hd{
position:relative;
top:0px;
z-index:33;
width:92%;
margin:0 auto;
min-height:20px;
border: solid 2px green;
}
#tmp_bx{
position: absolute;
top:50px;
left:50px;
z-index:2000;
border:solid 4px green;
min-width: 100px;
min-height: 100px;
}
JavaScript
<script>
var slides = [
{ "name":"slide1",
"x":5,
"y":1,
"width": 20,
"height": 20,
"color":"#D80000",
"title":"Navigation Toggle",
"desc":"Shows hides the nagivation menu."
}
];
//***********************************************************
//Changes location of pre-existing div and attempts to create
//new div and append it
//***********************************************************
function changHlghtrPos(){
var slide = slides[slideCntr];
document.getElementById("hgh_lghtr").style.borderColor = "red";
document.getElementById("hgh_lghtr").style.top = slide.y + "px";
document.getElementById("hgh_lghtr").style.left = slide.x + "px";
document.getElementById("hgh_lghtr").style.width = slide.width + "px";
document.getElementById("hgh_lghtr").style.height = slide.height + "px";
var tmp_bx = document.createElement("div");
tmp_bx.id = "tmp_bx";
document.getElementById("main_wrapper").appendChild(tmp_bx);
}
slideCntr = 0;
//******************************************
//Determines if it is ok to move the pre-existing div
//to the next location or clearInterval
//******************************************
function nextSpot(){
if(slideCntr < 5){
slideCntr += 1;
changHlghtrPos();
}else{
clearInterval(nTime);
}
}
jQuery(document).ready(function() {
$("#main_wrapper").empty();
var main_hldr = document.getElementById("main_wrapper");
var my_img = document.createElement("img");
my_img.id = "my_img";
my_img.src = "https://some_image.png";
my_img.alt = "MyProject";
var cntnt_bx = document.createElement("div");
cntnt_bx.id = "cntnt_bx";
var hgh_lghtr = document.createElement("div");
hgh_lghtr.id = "hgh_lghtr";
main_hldr.appendChild(my_img);
main_hldr.appendChild(hgh_lghtr);
main_hldr.appendChild(cntnt_bx);
var mini_nav_hd = document.createElement("div");
mini_nav_hd.id = "mini_nav_hd";
mini_nav_hd.textContent = "Navigation";
var cntntBx = document.getElementById("cntnt_bx");
cntntBx.appendChild(mini_nav_hd);
nTime = setInterval(nextSpot,2000);
});
</script>
Sample HTML
<html>
<head></head>
<body>
<div id="main_wrapper">
<!--three elements are generated when page loads-->
<!--one element is generated in response to setInterval-->
</div>
</body>
</html>
Is this you want? If it works,
function nextSpot(){
if(slideCntr < 5){
slideCntr += 1;
changHlghtrPos();
}else{
clearInterval(nTime);
}
}
Maybe you need to switch the place of slideCntr += 1; with the place of changHlghtrPos();, because index of array starts with 0.
I have some simple transition animation, I want to make text ( A href ) invisible, so I used "display: none" and I want to make it visible with "display: block" after image coming through it using "onclick" thing from javascript on that image. Here is my jsfiddle : http://jsfiddle.net/ofy4t5a8/
#facebook_text a {
position: absolute;
font-size: 15px;
color: #000;
text-decoration: none;
margin-left: 50px;
margin-top: -10px;
z-index: 1;
display: none;
}
#facebook_image.fly {
position: absolute;
margin-left: 125px;
margin-top: 0px;
transition: all 5s ease-out;
}
#facebook_image img {
position: absolute;
z-index: 10;
height: 35px;
width: 35px;
margin-top: -15px;
}
<div id="facebook_text">
Facebook
</div>
<div id="facebook_image">
<img class="image_animation" src="facebook.jpg"></img>
</div>
<script>
document.querySelector('.image_animation').onmouseover=function() {
var d = document.getElementById("facebook_image");
d.className = d.className + " fly";
}
</script>
facebook_imageYou should catch event when it ends, you can do it like this:
transitionEnd = (function transitionEndEventName() {
var i,
el = document.createElement('div'),
transitions = {
'transition':'transitionend',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
};
for (i in transitions) {
if (transitions.hasOwnProperty(i) && el.style[i] != undefined) {
return transitions[i];
}
}
})();
var a = document.querySelector('a');
var b = document.querySelector('.facebook_image');
b.addEventListener(transitionEnd, function(){
a.style.display = "block";
}