Please refer to the following SCRIPT
<html>
<style>
#div_content {
height: 200px;
width: 200px;
background-color: yellow;
position: relative;
}
#btn_addContent{
position: absolute;
left: 0;
bottom: 0;
}
#btn_removeContent{
position: absolute;
right: 0;
bottom: 0;
}
</style>
<body>
<div id="div_content">
<p> Existing Content </p>
<button id="btn_addContent">Add Content </button>
<button id="btn_removeContent">Remove Content </button>
</div>
</body>
<script>
var divElement = document.getElementById("div_content");
function addContent(){
divElement.innerHTML = divElement.innerHTML + "<P> New Content </p>";
}
function removeContent(){
divElement.parentNode.removeChild(divElement);
}
var btnAddContent= document.getElementById("btn_addContent");
btnAddContent.onclick = addContent;
var btnRemoveContent = document.getElementById("btn_removeContent");
btnRemoveContent.onclick = removeContent;
</script>
</html>
While running this script, any of the function is running that too only once means Javascript is loading only once kindly do the needful.
i.e., if I want to addcontent I am able to add it single time
and at the same time means on the same page if at all I want to remove the div_content section I am not able to do so,
but, on fresh reload I'm able to remove the div_content section
that is for every reload I can only do add or remove not both and not even multiple adding.
innerHTML += will destroy all the child elements reference(Remove and add again in DOM tree).
Use .appendChild
From MDN, innerHTML removes all of element's children, parses the content string and assigns the resulting nodes as children of the element.
var divElement = document.getElementById("div_content");
function addContent() {
var elem = document.createElement('p');
elem.textContent = 'New Content';
divElement.appendChild(elem);
}
function removeContent() {
divElement.parentNode.removeChild(divElement);
}
var btnAddContent = document.getElementById("btn_addContent");
btnAddContent.onclick = addContent;
var btnRemoveContent = document.getElementById("btn_removeContent");
btnRemoveContent.onclick = removeContent;
#div_content {
height: 200px;
width: 200px;
background-color: yellow;
position: relative;
}
#btn_addContent {
position: absolute;
left: 0;
bottom: 0;
}
#btn_removeContent {
position: absolute;
right: 0;
bottom: 0;
}
<div id="div_content">
<p>Existing Content</p>
<button id="btn_addContent">Add Content</button>
<button id="btn_removeContent">Remove Content</button>
</div>
Related
I have an app that shows the active menu with javascript, it is an app made with Cordova.
The problem is that when I press the button to go back, it does not show me the active menu, the previous one is still here.
Is there a possibility to solve this? What I do is with javascript hide the non-active image and show the active image when pressed.
I have attached the code here:
<body>
<script>
var webAppWindow;
</script>
<iframe id="elframe" src="https://uoapp.es/cuenta/" name="iframe" style="position:fixed; width: 100%; height: 94%; "
onLoad="cambioiframe();"></iframe>
<div class="navbar">
<img src="img/logo-uo.png"
style="position: fixed;left: 50%; bottom: 0px; transform: translateX(-50%); width: 120px;" alt="logo"></a>
<a href="https://uoapp.es/blog" target="iframe"><img src="img/icons8-news-64-active.png"
style="position: fixed; left: 0%; bottom: 0px; width: 50px; display: none;" id="blog-activo"
alt="blog"></a>
<a href="https://uoapp.es/blog" target="iframe" onclick="mostraricono1();"><img src="img/icons8-news-64.png"
style="position: fixed;left: 0%; bottom: 0px; width: 50px;" id="blog-no-activo" alt="blog"></a>
<div class="contacto">
<a href="https://uoapp.es/contacto" target="iframe"><img src="img/icons8-group-message-64-active.png"
style="position: fixed;left: 15%; bottom: 0px; width: 50px; display: none;" id="contacto-activo"
alt="contacto"></a>
<a href="https://uoapp.es/contacto" target="iframe" onclick="mostraricono2();"><img
src="img/icons8-group-message-64.png" style="position: fixed;left: 15%; bottom: 0px; width: 50px;"
id="contacto-no-activo" alt="contacto"></a>
<a href="https://uoapp.es/directorio/" target="iframe"><img src="img/icons8-page-64-active.png"
id="directorio-activo" alt="directorio"
style="position: fixed;left: 72%; bottom: 0px; width: 50px; display: none;"></a>
<a href="https://uoapp.es/directorio/" target="iframe" onclick="mostraricono3();"><img
src="img/icons8-page-64.png" id="directorio-no-activo" alt="directorio"
style="position: fixed;left: 72%; bottom: 0px; width: 50px;"></a>
<a href="https://uoapp.es/cuenta/" target="iframe"><img src="img/icons8-user-male-64-active.png"
id="cuenta-activo" alt="cuenta"
style="position: fixed;left: 86%; bottom: 0px; width: 50px; display: none;"></a>
<a href="https://uoapp.es/cuenta/" target="iframe" onclick="mostraricono4();"><img
src="img/icons8-user-male-64.png" id="cuenta-no-activo" alt="cuenta"
style="position: fixed;left: 86%; bottom: 0px; width: 50px;"></a>
</div>
<script src="cordova.js"></script>
<script src="js/index.js"></script>
<script>
</script>
<p id="OneSignalUserId"></p>
<p style="word-break: break-all;" id="OneSignalPushToken"></p>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
Javascript code is:
function mostraricono1() {
const blog_noactivo = document.getElementById('blog-no-activo');
blog_noactivo.style.display = "none";
const blog_activo = document.getElementById('blog-activo')
blog_activo.style.display = "block";
const contacto_noactivo = document.getElementById('contacto-no-activo');
contacto_noactivo.style.display = "block";
const contacto_activo = document.getElementById('contacto-activo')
contacto_activo.style.display = "none";
const directorio_noactivo = document.getElementById('directorio-no-activo');
directorio_noactivo.style.display = "block";
const directorio_activo = document.getElementById('directorio-activo')
directorio_activo.style.display = "none";
const cuenta_noactivo = document.getElementById('cuenta-no-activo');
cuenta_noactivo.style.display = "block";
const cuenta_activo = document.getElementById('cuenta-activo')
cuenta_activo.style.display = "none";
}
That is the function show icons 1 then there are the other 3 functions that are identical for each image
I hope someone can help me. If someone can, thank you!
one of the solutions is to give them serial id or serial class name , put for the first one
id = 'id1' and the second element give it an id = 'id2' and so on
then we gonna handle it in the java script using a counter like
var i = 1 ;
so if you want an element of id1 ,it gonna be ('id'+i) and after clicking the next button ,the counter increase (i++) and when clicking the previous button the counter decrease (i--)
below is an example of what i mean
// get all the elemnts of the main div
var selectedDiv = document.querySelectorAll('.contacto div')
// the counter
var i = 1;
function btnRing(clicked_id) {
// this for hide all the elements inside the main div
//when clicking any button the all elements is gonna hide
selectedDiv.forEach(div => {
div.style.display = "none"
})
// this for next button
if (clicked_id === 'btn1') {
// this line to make the previous button active when clicking the next button
document.getElementById('btn2').style.pointerEvents = 'all'
//this to show the next element
document.getElementById('div' + (i + 1)).style.display = 'block'
// increase the counter when clicking next
i++
// this for deactivating the next button when is there is no more elements
if (i >= 4) {
document.getElementById(clicked_id).style.pointerEvents = 'none'
}
//this is the previous button
} else if (clicked_id === 'btn2') {
// this for activating the next button after i deactivate it above
document.getElementById('btn1').style.pointerEvents = 'all'
//decrease the counter
i--
// showing the previous elemnt
document.getElementById('div' + i).style.display = 'block'
//this for deactivating the previous button after is no more elements
if (i <= 1) {
document.getElementById(clicked_id).style.pointerEvents = 'none'
}
}
}
#div1,
#div2,
#div3,
#div4 {
height: 10rem;
width: 10rem;
background-color: brown;
color: aliceblue;
display: none;
}
#div1 {
display: block;
}
<div class="contacto">
<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>
<div id="div3">DIV 3</div>
<div id="div4">DIV 4</div>
</div>
<button id='btn1' onclick="btnRing(this.id)">next</button>
<button id='btn2' onclick="btnRing(this.id)">previous</button>
I am trying to make a transition with a div that should grow and overlap a text.
Here are my codes
const box = document.querySelector("#box");
const mybutt = document.querySelector("#mybutt");
mybutt.addEventListener("click", transitionfunction);
function transitionfunction() {
if(box.style.height != "100px"){
box.style.height = "100px";
box.style.transition = "2s";
}
else {
box.style.height = "50px";
box.style.transition = "2s";
}
}
#box {
background: red;
height: 50px;
width: 50px;
}
#para {
postion: fixed;
}
<div id="parentdiv">
<div id="box"></div>
<p id="para">Help</p>
</div>
<button id="mybutt">click</button>
At the moment, on the click of the button, both the button and the paragraph para move down, I want them to be fixed and I want the div, #box to cover the para but its not working. I tried putting it to fixed but doesnt work. And on the click on the button again, it should reveal the text again.
If you use position: fixed;, you should manually set the top property.
To make a div overlay some text, use z-index
const box = document.querySelector("#box");
const mybutt = document.querySelector("#mybutt");
mybutt.addEventListener("click", transitionfunction);
function transitionfunction() {
if (box.style.height != "100px"){
box.style.height = "100px";
box.style.transition = "2s";
} else {
box.style.height = "50px";
box.style.transition = "2s";
}
}
#mybutt {
position: fixed;
top: 120px;
}
#box {
background: red;
position: fixed;
height: 50px;
width: 50px;
z-index: 2;
}
#para {
position: fixed;
z-index: 1;
top: 60px;
}
<div id="parentdiv">
<div id="box"></div>
<p id="para">Help</p>
</div>
<button id="mybutt">click</button>
Firstly, you spelled "position" wrong for #para. Change it to:
#para {
position: absolute;
top: 10%;
}
This will keep the paragraph positioned in one spot; it won't move.
Fixed will work, although you might want to use 'absolute' instead if you want it to anchored to it's parent instead of the window itself.
Also, 'position' is misspelled; not sure if it is in your testing code.
The 'top' property has to be set for the element to know where to anchor itself, the 'position' property is what to anchor to.
HTML
<div id="parentdiv">
<div id="box"></div>
<p id="para">Help</p>
</div>
</div>
<button id="mybutt">click</button>
CSS
<style>
#box {
background: red;
height: 50px;
width: 50px;
}
#para {
position: absolute;
top:70;
}
</style>
*You also might want to move '#para' outside '#parentdiv', but it depends what you'll trying to ultimately do, it does work inside too.
Added:
To include an alert at 75px, you have to use a function that gives you more granular control(as far as I know at least). This is one solution:
<script>
const box = document.querySelector("#box");
const mybutt = document.querySelector("#mybutt");
mybutt.addEventListener("click", transitionfunction);
var intHeight = $("#box").css("height").split("p")[0];
function transitionfunction() {
if(intHeight < 100) {
intHeight++;
$("#box").css("height", intHeight + "px");
if (intHeight===76)
alert("75px!")
requestAnimationFrame(transitionfunction);
}
intHeight = $("#box").css("height").split("p")[0];
mybutt.addEventListener("click", revtransitionfunction);
mybutt.removeEventListener("click", transitionfunction);
}
function revtransitionfunction() {
if(intHeight >= 50) {
intHeight--;
$("#box").css("height", intHeight + "px");
if (intHeight===74)
alert("75px!")
requestAnimationFrame(revtransitionfunction);
}
intHeight = $("#box").css("height").split("p")[0];
mybutt.addEventListener("click", transitionfunction);
mybutt.removeEventListener("click", revtransitionfunction);
}
I'm trying to make a modal with JavaScript ES5.
When you click a button, an overlay will show, and a modal window. The modal window will have an 'X' (close modal), which will remove the overlay and the modal. If you click the modal, nothing happens; if you click the X or overlay it hides.
I'm not sure what I'm doing wrong. I tried many things, however whenever I try to put my modal with the overlay the code stops working.
And do you see any way to improve the current code as well? Staying very basic.
// Click button
// Show overlay
// Show Modal - text and close button
// Click overlay - close
// Click button - close overlay
// Click modal - no effect
//Variables
var btn = document.querySelector('.btn-overlay');
var overlay = document.createElement = ('<div class="overlay"></div>');
var body = document.querySelector('body');
var modal = document.querySelector('.modal');
var closeBtn = document.querySelector('.modal-close');
function showModal(e) {
e.preventDefault();
modal.classList.add('is-active');
document.body.appendChild(overlay);
}
function closeModal(e) {
modal.classList.remove('is-active');
document.body.removeChild(overlay);
}
btn.addEventListener('click', showModal);
closeBtn.addEventListener('click', closeModal);
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 8000;
background-color: rgba(0, 0, 0, 0.5);
}
.modal {
background-color: red;
display: none;
position: absolute;
top: 50%;
right: 50%;
bottom: 0;
left: 0;
z-index: 9000;
}
.modal.is-active {
display: block;
}
.modal-close {
position: relative;
cusror: pointer;
z-index: 9950;
}
<main>
<h1>Awesome content</h1>
<button class="btn-overlay"> Show Modal</button>
</main>
<section class="modal">
<span class="modal-close">X</span>
<h1>Modal</h1>
</section>
View on Codepen
You're not using document.createElement correctly. The method expects an argument—the type of element you wish to create.
// Create a div
var overlay = document.createElement('div');
// Assign a class name
overlay.className = 'overlay';
Though this next bit wasn't breaking your code, you should fix the typo in your CSS:
.modal-close {
…
cusror: pointer; /* <-- oops */
…
}
Finally, you asked about suggestions to improve the code. I would read about how to make your modal code accessible. Accessibility is too often ignored when we make stuff and making your pixels work for everyone is critical. Have a look at this for examples and deep explanations. Apart from accessibility, I would consider adding a transition to your overlay and making it a pseudo element on the body. The advantage is cleaner code and less JavaScript.
// Click button
// Show overlay
// Show Modal - text and close button
// Click overlay - close
// Click button - close overlay
// Click modal - no effect
//Variables
var btn = document.querySelector('.btn-overlay');
var overlay = document.createElement('div');
overlay.className = 'overlay';
var body = document.querySelector('body');
var modal = document.querySelector('.modal');
var closeBtn = document.querySelector('.modal-close');
function showModal(e) {
e.preventDefault();
modal.classList.add('is-active');
body.appendChild(overlay);
}
function closeModal(e) {
modal.classList.remove('is-active');
document.body.removeChild(overlay);
}
btn.addEventListener('click', showModal);
closeBtn.addEventListener('click', closeModal);
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 8000;
background-color: rgba(0, 0, 0, 0.5);
}
.modal {
background-color: red;
display: none;
position: absolute;
top: 50%;
right: 50%;
bottom: 0;
left: 0;
z-index: 9000;
}
.modal.is-active {
display: block;
}
.modal-close {
position: relative;
cursor: pointer;
z-index: 9950;
}
<body>
<main>
<h1>Awesome content</h1>
<button class="btn-overlay"> Show Modal</button>
</main>
<section class="modal">
<span class="modal-close">X</span>
<h1>Modal</h1>
</section>
</body>
https://jsfiddle.net/y0wfzuj8/
Hello All I am a beginner in html and js, and I am trying to create a webpage containing a rectangle collection in which when a new rectangle is created is placed beside the previous rectangle.
I have created a div element and trying to add newly created div (rectangle shape with background color different based on condition), but I am not able to get the desired result.
<html>
<head>
<title>parkIn</title>
<meta charset="utf-8" />
</head>
<style>
.ParkSlots {
border: solid 1px;
width: 60%;
height: 400px;
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
display: inline;
}
.row:before,
.row:after {
content: "";
display: table;
clear: both;
}
.col-1 {
width: 15%;
margin-left: 10px;
height: 350px;
padding: 2px;
}
</style>
<body onload="viewCreate()">
<div class="ParkSlots">
<div class="row" id="content">
</div>
</div>
</body>
<script language="javascript">
function viewCreate() {
for (int i = 0; i < 5; i++) {
if (i % 2 == 0) {
createGreenBox();
} else {
createRedBox();
}
}
}
function createRedBox() {
var = document.createElement('div');
div.className = 'col-1';
div.style.backgroundColor = 'red';
document.getElementById('content').appendChild(div);
}
function createGreenBox() {
var = document.createElement('div');
div.className = 'col-1';
div.style.backgroundColor = 'lightgreen';
document.getElementById('content').appendChild(div);
}
</script>
</html>
I want an output that looks something like this:
Just in glancing at your code, I see at least two typos:
for (int i = 0; i < 5; i++) { - in JS, int is not used in this way. Use var i = 0...
var = document.createElement('div'); - you're missing a variable name on this line in both create box functions. I assume, from the rest of the code you need var div = document.createElement('div');
The rest will be CSS. In your stylesheet you're applying the border to the outter most containing div, from you're example, you need to apply that to the .col-1 class. You'll also want to use display:inline-block on that class, and set widths and margins to play nicely with the border size. I took the liberty of creating a jsfiddle for you with my recommended changes.
Edit- here's the code
<html>
<head>
<script type="text/javascript">
var prodURL = "https://blah";
function postwith (to, params) {
var myForm = document.createElement("form");
myForm.method = "post";
myForm.target = "_self";
myForm.action = to;
for (var p in params) {
var myInput = document.createElement("input");
myInput.setAttribute("name", p);
myInput.setAttribute("value", params[p]);
myInput.setAttribute("type", "hidden");
myForm.appendChild(myInput);
}
document.body.appendChild(myForm);
myForm.submit();
}
</script>
<style type="text/css">
#overlayPageLoad {
background: none repeat scroll 0 0 white;
height: 100% !important;
left: 0;
position: absolute;
text-align: center;
top: 0;
width: 100% !important;
}
#overlayPageLoad .middle {
color: #888888;
font-size: 16px;
left: 0;
position: absolute;
top: 50%;
width: 100%;
}
</style>
</head>
<body onload= "postwith(prodURL, {SF_SESSION:'{!$Api.Session_ID}',SF_ENDPOINT:'{!$Api.Partner_Server_URL_120}'})"; >
<div id="overlayPageLoad">
<span class="middle">
<img src="https://prettypicture">
Connecting...
</span>
</div>
</body>
</html>
Modern browsers only allow opening new windows in direct response to specific user-generated actions, like click events. You can't open them at other times (such as window load or unload), because it used to be that browsers allowed that, and it promptly got abused. So now we have popup-blockers.
Update: Re your comment:
...business currently has the link open in the existing window, and now they want it in another..
That you can do. You do it in the page linking to the page you want in a new window, not the page being opened, like this:
text of link
See the target attribute of a elements.