Replacing one div with another according to a value - javascript

So I have 2 different card designs and I want them to change if a value is higher or lower than 20.
I tried using document.getElementById("div2").innerHTML = "whatever"; but it only changes text.
<body>
<div id="div1">This is div 1</div>
<div id="div2">this is div2</div>
</body>
<script>
if(data[i].value > 20)
//*replace div1 with div2*
else if(data[i].value < 20)
*replace div1 with div2*
</script>

To show/hide divs:
function showHideDiv(value) {
let div1 = document.getElementById('div1');
let div2 = document.getElementById('div2');
if (value > 20) {
div1.style.display="none";
div2.style.display="block";
} else if (value < 20) {
div1.style.display="block";
div2.style.display="none";
}
}
showHideDiv(30)
setTimeout(function() {
showHideDiv(10)
}, 2000)
<div id="div1">This is div 1</div>
<div id="div2">this is div2</div>
To reposition divs:
Here's a reusable function to help illustrate how it's done. If you look at the snippet, it will show both results - the second coming 2 seconds after the first.
Essentially, you need to use this syntax:
theParentContainer.insertBefore(firstDiv, secondDiv);
where theParentContainer is the parent of both divs, firstDiv is the div you want to go first, and secondDiv is the element to go after the first.
function moveDiv(value) {
let div1 = document.getElementById('div1');
let div2 = document.getElementById('div2');
if (value > 20) {
div2.parentNode.insertBefore(div2, div1);
} else if (value < 20) {
div2.parentNode.insertBefore(div1, div2);
}
}
moveDiv(30)
setTimeout(function() {
moveDiv(10)
}, 2000)
<div id="div1">This is div 1</div>
<div id="div2">this is div2</div>

Try using the hidden attribute. For example:
<body>
<div id="div1" [hidden]="data[i].value > 20">This is div 1</div>
<div id="div2" [hidden]="data[i].value < 20">this is div2</div>
</body>

Related

Javascript 3 x 3 flexbox with button increasing number

I have a box 2 x 2 using flex property with number 0 inside each box, and a button to click
function click() {
var id = "item-";;
for(var i = 1; i <= 6; i++) {
id = id + i;
var element = document.getElementById(id);
var value = element.innerHTML;
value++;
document.getElementById(id).innerHTML = value;
}
}
<div class="flex-container">
<div class="container-1">
<div id="item-1">0</div>
<div id="item-2">0</div>
<div id="item-3">0</div>
</div>
<div class="container-2">
<div id="item-4">0</div>
<div id="item-5">0</div>
<div id="item-6">0</div>
</div>
</div>
<button class="btn" onclick="click()">Click</button>
I want to create a function click() that if I click a button then the number inside the box will increase, but not all numbers in all boxes. I want the number increasing box by box.
But my function only increases the value in the first box. Can someone let me know what should I do, please?
Currently, first iteration of the for () will work because id will become item-1, but the second iteration you will create the new id, but you just append i, so it becomes item-12 instead of item-2
Just only remember the id and prefix it with item- when you use it. Then after each press, update the innerHTML and increase the counter, or reset to 1 if we've just updated the last <div>
var currentIndex = 1;
function incrementButton() {
let element = document.getElementById('item-' + currentIndex);
element.innerHTML = ++element.innerHTML;
currentIndex = (currentIndex === 6) ? 1 : ++currentIndex;
}
<div class="flex-container">
<div class="container-1">
<div id="item-1">0</div>
<div id="item-2">0</div>
<div id="item-3">0</div>
</div>
<div class="container-2">
<div id="item-4">0</div>
<div id="item-5">0</div>
<div id="item-6">0</div>
</div>
</div>
<button class="btn" onclick="incrementButton()">Click</button>

Hide parent div when it contains <textarea>?

I have got a div structure that is dynamically generated by it's content. It is looking like this:
<div class="fpd-list-row fpd-add-layer" id="1609962837979"><div class="fpd-cell-0"><span></span></div><div class="fpd-cell-1">Dein Foto</div><div class="fpd-cell-2"><span class="fpd-icon-add"></span></div></div>
<div class="fpd-list-row" id="1609962838288"><div class="fpd-cell-0"><span class="fpd-current-color" style="background: #ffffff" data-colors=""></span></div><div class="fpd-cell-1"><textarea>Wanderlust</textarea></div><div class="fpd-cell-2"><span class="fpd-lock-element"><span class="fpd-icon-unlocked"></span></span></div></div>
I want to hide only the textareas and the parents element up to .fpd-list-row but keep the other div like .fpd-list-row .fpd-add-layer untouched. When I set the textarea to display none, the parent divs still exists. Is there a way hide the parent div up to ..fpd-list-row only when it contains <textarea>?
Loop through all divs, and use .find() to check for parent elements matching a certain selector.
$(document).ready(function(){
var divs = $("div");
for(var i = 0; i < divs.length; i++){
var current = divs[i];
if($(current).find("textarea").length != 0){
current.style.display='none';
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fpd-cell-1"><textarea>My Text</textarea></div>
<div class="fpd-cell-2"><span class="fpd-lock-element">fpd-lock-element<span class="fpd-icon-unlocked">fpd-icon-unlocked</span></span></div>
<div class="fpd-cell-3"><textarea>My Text</textarea></div>
For the most concise solution (one liner), use:
$(document).ready(function(){
jQuery('textarea').parent().hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fpd-cell-1"><textarea>My Text</textarea></div>
<div class="fpd-cell-2"><span class="fpd-lock-element">fpd-lock-element<span class="fpd-icon-unlocked">fpd-icon-unlocked</span></span></div>
<div class="fpd-cell-3"><textarea>My Text</textarea></div>
Check the children of the parent div:
divs = document.getElementsByTagName("DIV")
for (var i = 0; i < divs.length; i++) {
if (divs[i].childElementCount == 1 && divs[i].children[0].tagName.toLowerCase() == "textarea") {
divs[i].style.display = "none";
}
else { //for demonstration purposes
divs[i].style.backgroundColor="red"
}
}
<div class="fpd-cell-1"><textarea>My Text</textarea></div>
<div class="fpd-cell-2"><span class="fpd-lock-element">Outer Span<span class="fpd-icon-unlocked">Inner Span</span></span>
</div>
<div class="fpd-cell-3"><textarea>My Text</textarea></div>
Or, remove the parent of the textarea (idea credit of Spectric):
textareas = document.getElementsByTagName("TEXTAREA")
for (var i = 0; i < textareas.length; i++) {
textareas[i].parentNode.style.display = "none"
}
<div class="fpd-cell-1"><textarea>My Text</textarea></div>
<div class="fpd-cell-2"><span class="fpd-lock-element">Outer Span<span class="fpd-icon-unlocked">Inner Span</span></span>
</div>
<div class="fpd-cell-3"><textarea>My Text</textarea></div>
The first example hides the div only if there is one element in it, and it is the textarea, whereas the second method hides the parent of the textarea. Therefore, the first one can be used in situations where you need a textarea, and the second one just won't show any textareas regardless of the situation.
However, you could just make the dynamic content not generate the textarea and use a div:blank pseudo class in the css.
--------------- UPDATE ---------------
Update after code was updated in question.
textareas = document.getElementsByTagName("TEXTAREA")
for (var i = 0; i < textareas.length; i++) {
textareas[i].parentNode.parentNode.style.display = "none"
}
<div class="fpd-list-row fpd-add-layer" id="1609962837979">
<div class="fpd-cell-0"><span></span></div>
<div class="fpd-cell-1">Dein Foto</div>
<div class="fpd-cell-2"><span class="fpd-icon-add"></span></div>
</div>
<div class="fpd-list-row" id="1609962838288">
<div class="fpd-cell-0"><span class="fpd-current-color" style="background: white" data-colors=""></span></div>
<div class="fpd-cell-1"><textarea>Wanderlust</textarea></div>
<div class="fpd-cell-2"><span class="fpd-lock-element"><span class="fpd-icon-unlocked"></span></span>
</div>
</div>

Text scroll using jQuery

I've been trying to create a text scroller to display one div at a time using jQuery and I'm very new to this.
I used divs and have been trying to scroll through using two buttons-previous and next. I'm not able to figure out how to scroll through the texts whilst maintaining the position of the scroll.
Issue 1: It works fine if I hit next, however, At any given point during the scroll, when I hit previous, the output gets messed up and I'm really getting stuck here.
Issue 2: The first and the last captions are shown twice during the scroll. I've tried my best to fix this but in vain.
Any kind of help will be highly appreciated. Thank you so much in advance!
jQuery(document).ready(function($) {
var state = 0;
function loadOne(state) {}
function displayFirst(value) {
$('.caption' + value).show();
}
function hideall() {
$('.caption').hide();
}
function reset(value) {
state = -1;
}
function updateCounter() {
state = state + 1;
}
hideall();
//alert(state);
$(".next-update").click(function() {
state = state + 1;
if (state >= 1 && state <= 5) {
hideall();
$('.caption' + state).show();
} else {
reset(state);
}
});
$(".prev-update").click(function() {
state = state + 1;
if (state >= 5 && state <= 1) {
hideall();
$('.caption' + state).show();
} else {
reset(state);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="caption caption1">Hello 1</div>
<div class="caption caption2">Hello 2</div>
<div class="caption caption3">Hello 3</div>
<div class="caption caption4">Hello 4</div>
<div class="caption caption5">Hello 5</div>
<button class="prev-update">Prev</button>
<button class="next-update">Next</button>
Hope the following code will work for you.
$(window).ready(function(){
var state = 1;
$(".caption").hide();
$(".caption.caption" + state).show();
$(".prev-update").click(function(){
if(state > 1){
state--;
}
$(".caption").hide();
$(".caption.caption" + state).show();
})
$(".next-update").click(function(){
if(state < 5){
state++;
}
$(".caption").hide();
$(".caption.caption" + state).show();
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="caption caption1">Hello 1</div>
<div class="caption caption2">Hello 2</div>
<div class="caption caption3">Hello 3</div>
<div class="caption caption4">Hello 4</div>
<div class="caption caption5">Hello 5</div>
<button class="prev-update">Prev</button>
<button class="next-update">Next</button>

jQuery: show/hide are instantaneous

I've one div that contains to other one:
<div>
<div id="card-container">....</div>
<div id="wait-for-result-container" style="display: none;">...</div>
</div>
On some event, I want to change the displayed element, with a fadeIn/fadeOut effect.
$('#card-container').hide(5000);
$('#wait-for-result-container').show(5000);
(I put some big number to really see the effect)
But when I trigger my effect, it is instantaneous, there is no fade-in/fade-out.
I'm not sure it matters, but I'm using jquery-3.1.1 and bootstrap 4 alpha.
Any idea what is going wrong?
EDIT
As asked, here is some clarification.
The element that I'm trying to hide is hided immediatly and the one I show is appearing immediately.
EDIT
I tried to put a demo here with the code from above:
$('#myBt').click(function(){
$('#card-container').hide(5000);
$('#wait-for-result-container').show(5000);
});
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<div>
<div id="card-container">First one</div>
<div id="wait-for-result-container" style="display: none;">Second one</div>
</div>
<button id="myBt">Click me</button>
If you can use the full version of jQuery, give jQuery fadeOut and fadeIn a try :)
$('#myBt').click(function(){
var duration = 5000;
$('#card-container').fadeOut(duration);
$('#wait-for-result-container').delay(duration).fadeIn(duration);
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div>
<div id="card-container">First one</div>
<div id="wait-for-result-container" style="display: none;">Second one</div>
</div>
<button id="myBt">Example1</button>
If you have to stick with the slim version, you can use setInteval
$('#myBt').click(function(){
var duration = 5000;
var op = 0.9; // initial opacity
var timer1 = setInterval(function () {
if (op <= 0.1){
clearInterval(timer1);
op = 0;
$('#card-container')[0].style.display = 'none';
}
$('#card-container')[0].style.opacity = op;
op -= 100/duration;
}, 100);
var timer2 = setInterval(function () {
if (op <= 0){
$('#wait-for-result-container')[0].style.opacity = 0;
$('#wait-for-result-container').show();
}
if (op >= 1){
clearInterval(timer2);
}
if($('#wait-for-result-container').is(':visible')){
$('#wait-for-result-container')[0].style.opacity = op;
op += 100/duration;
}
}, 100);
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div>
<div id="card-container">First one</div>
<div id="wait-for-result-container" style="display: none;">Second one</div>
</div>
<button id="myBt">Example2</button>

get position of an element and display a div after it with javascript

I have 10 different buttons and i want to show a hidden div exactly down from the button the user pressed.the div is currenlty showing exactly at the block the code of div is istead of taking new cords top: left:
THE function call:
<img style="position:relative;float:right;padding-top:7px;" onclick="find_pos(this)" src="images/view_comments.png"></li></a>
function find_pos(ele) {
var x=0;
var y=0;
while(true){
x += ele.offsetLeft;
y += ele.offsetTop;
if(ele.offsetParent === null){
break;
}
ele = ele.offsetParent;
}
hidden_comment_form.style.display='block';
hidden_comment_form.style.top=y;
hidden_comment_form.style.left=x;
}
I give you 2 options :
option 1 :
<div class="main">
<button class="btn">a</button>
<div class="toggle"> a toggle this </div>
</div>
<div class="main">
<button class="btn">b</button>
<div class="toggle"> b toggle this </div>
</div>
<script>
$(document).ready(function() {
$('button.btn').on('click', function() {
var $div = $(this).siblings('.toggle');
$div.toggle();
})
})
</script>
option 2:
<button class="btn">a</button>
<div class="toggle"> a toggle this </div>
<button class="btn">b</button>
<div class="toggle"> b toggle this </div>
<script>
$(document).ready(function() {
$('button.btn').on('click', function() {
var $div = $(this).next();
$div.toggle();
})
})
</script>
i suggest option 1 is better

Categories

Resources