I need to parse a string. The string is a callback from an adserver, and this is the format
<div style="background-color: yellow">
<div>
<div style="left: 10px; width: 100%; height: 0px; position: relative; padding-bottom: 80%;"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/5DkrwfY2jw4" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;"></iframe></div>
</div>
</div>
I need to remove the parent div only if he style has yellow as background color. Of course I cannot use jquery.
I try to transform the string in an HTML fragment using
var div = document.createElement('div');
div.innerHTML = a.response.html;
var elements = div.childNodes;
but I cannot find a way to check for the presence of the attribute and, if true, remove the parent node keeping the childs.
The div itself shouldn't be a problem, so you can just set the background to transparent if its original background color is yellow:
var s = `<div style="background-color: yellow">
<div>
<div style="left: 10px; width: 100%; height: 0px; position: relative; padding-bottom: 80%;"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/5DkrwfY2jw4" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;"></iframe></div>
</div>
</div>`
var div = document.createElement('div');
div.innerHTML = s; // replace with response...
if (div.childNodes[0].style.backgroundColor == 'yellow') div.childNodes[0].style.backgroundColor = 'transparent'
document.body.appendChild(div);
Here's a fiddle
you can iterate over the childNodes and check if the div has a specific style.
function checkandAppend(nodes) {
for(node in nodes){
if (nodes.hasOwnProperty(node))
if(nodes[node].getAttribute("style") == 'background-color: yellow')
{
if(nodes[node].childNodes[0].nodeType == 3) // some browser interpret line break as first child
document.querySelector("body").appendChild(nodes[node].childNodes[1]);
else
document.querySelector("body").appendChild(nodes[node].childNodes[0]);
}
else
{
document.querySelector("body").appendChild(nodes[node]);
}
}
}
var div = document.createElement('div');
div.innerHTML = '<div style="background-color: yellow"> <div> <div style="left: 10px; width: 100%; height: 0px; position: relative; padding-bottom: 80%;"> <iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/5DkrwfY2jw4" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;"></iframe> </div> </div> </div>'
checkandAppend(div.childNodes);
Since the style is set inline, you can simply read the style property of the div. Create a div, insert the HTML, then check the first div. I guess that you want to insert this in the document, so if the first div has been set to yellow, insert its first div child node (i.e. the second in the tree) in the document. Otherwise, insert the first div.
This method is not robust, but without further information on how to select the div, or what to do with it once selected, there's not much more you can do.
I've replaced the iFrame with some text, I don't think it's relevant to the answer.
var response = '<div style="background-color: yellow"><div><div style="left: 10px; width: 100%; height: 0px; position: relative; padding-bottom: 80%;">iframe</div></div></div>';
var div = document.createElement('div');
div.innerHTML = response;
var divs = div.getElementsByTagName('div');
if (divs[0].style.backgroundColor == 'yellow') {
document.body.appendChild(divs[1]);
} else {
document.body.appendChild(divs[0]);
}
You could replace the if..else with:
document.body.appendChild(divs[+(divs[0].style.backgroundColor == 'yellow')]);
but that might be a bit obfuscated.
Related
I am trying to add arrows to my simple lightbox. The arrows are simple symbols "<" and ">. I have created them with jquery and when I try to add them to the image, they show up in the developer tools but not in the website for whatever reason. Can you tell me what's the problem please?
Here is the screenshot of the issue, if you did not understand my poor english. As you can see, the arrows are created in developer tools, but they cannot be found on the website. https://prnt.sc/26lyfbc
//Gallery Lightbox made with Jquery
let gallery = $('#gallery'),
overlay = $('<div = id = "overlay"></div>').appendTo('body').hide();
//Opens the lightbox with chosen image
gallery.find('a').on("click", function(event){
event.preventDefault();
let href = $(this).attr('href'),
image = $('<img>', {src: href}),
larrow = $('<div = id = "larrow"> < </div>'); //LEFT ARROW
rarrow = $('<div = id = "rarrow"> > </div>'); //RIGHT ARROW
image.appendTo(overlay);
larrow.appendTo(image);
overlay.show();
//Closes the Lightbox with the image, by clicking on the overlay
$(document).on("click", "#overlay", function(){
overlay.hide();
image.remove();
})
})
.gallery {
display: none;
opacity: 0;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 1004px;
margin: 0 auto;
}
.gallery img {
position: relative;
top: 100px;
height: 200px;
width: 300px;
margin: 0 1em;
}
#overlay {
background: rgba(0, 0, 0, .7);
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-align: center;
z-index: 10;
}
#overlay img {
margin-top: 5%;
border: solid 5px white;
border-radius: 5px;
}
//Dont mind these, the silly values are just for testing purposes
#larrow {
font-size: 500px;
color: red;
z-index: 2000;
}
#rarrow {
font-size: 500px;
color: red;
z-index: 2000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery" id="gallery">
<img src="img\placeholder1.jpg" alt="">
<img src="img\placeholder2.jpg" alt="">
<img src="img\placeholder3.jpg" alt="">
<img src="img\placeholder4.jpg" alt="">
<img src="img\placeholder5.jpg" alt="">
<img src="img\placeholder6.jpg" alt="">
</div>
</body>
You have a few errors in your code. Instead of
larrow = $('<div = id = "larrow"> < </div>'); //LEFT ARROW
rarrow = $('<div = id = "rarrow"> > </div>'); //RIGHT ARROW
You should write it like this. There is no need for the '=' between div and id.
larrow = $('<div id = "larrow"> < </div>'); //LEFT ARROW
rarrow = $('<div id = "rarrow"> > </div>'); //RIGHT ARROW
The same goes for the following tags:
overlay = $('<div id = "overlay"></div>').appendTo('body').hide();
Putting the div tags in the image will also not work. Instead you should put the image and the arrows in a container together like this:
<div id="overlay">
<img src ... </img>
<div id = "larrow"> < </div>
<div id = "rarrow"> > </div>
</div>
Refer to Floating Div Over An Image to see the needed css.
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 get all text content of a parent class detected by addEventListener.
The code I am using is-
document.addEventListener('click',function (event) {
var text = document.getElementsByClassName(event.target.parentElement.parentElement.parentElement.className);
console.log(text[0].innerText);
}, false);
but the problem is, where I am trying to apply the code, has same class name with different id, for example-
<div class="sc-EHOje gMuVTh" size="24" role="group" aria-labelledby="extraTitle_70356820.0">
and
<div class="sc-EHOje gMuVTh" size="24" role="group" aria-labelledby="extraTitle_70356820.1">
has same ClassName (sc-EHOje gMuVTh) but different id (extraTitle_70356820.1 and extraTitle_70356820.0), so if I use only ClassName I always get text for id extraTitle_70356820.0, even if I click for extraTitle_70356820.1.
How can I get all text from the class of the id I clicked when there is duplicate class name? Is there a way to incorporate the ClassName and id at the same time to get the text from parent?
I changed my initial answer because I realised I think you want the uppermost parent text too as well as the text of the element you clicked on? Not sure if this answer is the correct for you but it's my take on things.
//var classname = document.getElementsByClassName("sc-EHOje gMuVTh");
//for (var i = 0; i < classname.length; i++) {
// classname[i].addEventListener('click', function() {
// console.log(this.parentElement.parentElement.parentElement.innerText);
// });
//}
// 24/09 edit
var target = "sc-EHOje gMuVTh";
document.addEventListener('click', function(event) {
if (event.target.className === target) {
var parentElemText = event.target.parentElement.parentElement.parentElement.innerText;
console.log(parentElemText);
}
});
.upperMostParent {
width: 200px;
height: 200px;
background: red;
margin: 1rem;
position: relative;
}
.secondUpper {
width: 100px;
height: 100px;
background: blue;
margin: 1rem;
padding: 1rem;
}
.thirdUpper {
width: 70px;
height: 50px;
background: green;
padding: 1rem;
}
.sc-EHOje.gMuVTh {
background: yellow;
width: 50px;
height: 50px;
}
<div class="upperMostParent">
Parent text content 1
<div class="secondUpper">
<div class="thirdUpper">
<div class="sc-EHOje gMuVTh" size="24" role="group" aria-labelledby="extraTitle_70356820.0">Some text content</div>
</div>
</div>
</div>
<div class="upperMostParent">
Parent text content 2
<div class="secondUpper">
<div class="thirdUpper">
<div class="sc-EHOje gMuVTh" size="24" role="group" aria-labelledby="extraTitle_70356820.1">Some more text</div>
</div>
</div>
</div>
My goal is insert <span> into <image>, but I don't know how. Similar effect is on page http://www.bulb.cz/cs/reference, but I don't want it on hover() but on click(). I want insert "data-title" into <span> and after that <span> show on <image>.
HTML:
<div class="Fotogalery">
<img src="images/Thumb/1.jpg" data-title="Zdar" />
<img src="images/Thumb/2.jpg" data-title="Ahoj" />
<img src="images/Thumb/3.jpg" data-title="Cau" />
<img src="images/Thumb/4.jpg" data-title="KUK" />
<img src="images/Thumb/5.jpg" data-title="ohh" />
</div>
CSS:
.Foto{width: 25%;height:auto;float:left;box-sizing: border-box;}
.Gallery{position:relative;}
.Gallery span{position:absolute;z-index:999;}
Javascript:
$(".Fotogalery img").addClass("Foto");
$(".Foto").wrap( "<div class='Gallery'></div>" );
$(".Foto").after("<span></span>");
$(".Foto").click(function() {
var a = $(this).data('title');
});
Try this — http://jsfiddle.net/sergdenisov/p72jnbLt/5/:
Javascript:
$('.Fotogalery img').addClass('Foto');
$('.Foto').wrap('<div class="Gallery"></div>');
$('.Foto').click(function () {
var a = $(this).data('title');
$(this).after('<span>' + a + '</span>');
});
CSS:
.Fotogalery {
font-size: 0;
}
.Foto {
display: inline-block;
width: 100%;
}
.Gallery {
position: relative;
display: inline-block;
width: 25%;
}
.Gallery span {
position: absolute;
z-index: 1;
left: 0;
top: 0;
font-size: 16px;
}
If i understand your question right, u can use next('span') to select span:
$(".Foto").click(function() {
var a = $(this).data('title');
$(this).next('span').html(a);
})
To have span floating over image, make span position:absolute, and container postion:relative
http://jsfiddle.net/gbg1vfLb/2/
i'm having the following piece of code:
<head>
<style>
#mainDiv {
background-color: grey;
position: absolute;
}
#one {
height: 150px;
width: 70px;
bottom: 300px;
right: 500px;
background-color: green;
position: absolute;
}
#two {
height: 200px;
width: 200px;
margin-top: 50px;
margin-bottom: 20px;
margin-left: 90px;
margin-right: 5px;
background-color: blue;
position: absolute;
}
</style>
</head>
<body>
<div id="mainDiv">
<div id="one"></div>
<div id="two"></div>
</div>
</body>
i want to resize #mainDiv so it will include its children and will consider all positioning and margin attributes (basically #mainDiv's grey area will surround children and visually show the positioning and margins spaces).
i know it can't be done dynamically using CSS. how can i implement such using pure JavaScript without the use of JQuery?
note: there's no restriction on children's position attribute it can be any of them but "fixed".
code need to support all major browsers + IE8 + mobile (android 2.3 + 4, iphone).
thanks!
Use position relative for second div so the mainDiv greay area will surround your children element
#mainDiv {
background-color: grey;
position: absolute;
}
#one {
height: 150px;
width: 100px;
bottom: 300px;
right: 500px;
background-color: yellow;
}
#two {
height: 200px;
width: 200px;
margin-top: 50px;
margin-bottom: 20px;
margin-left: 90px;
margin-right: 5px;
background-color: blue;
position: relative;
}
I did something maybe complicated that you can find here: http://jsfiddle.net/YMmHz/1/
Basically I get all possible values:
var widthOne, widthTwo, heightOne, heightTwo;
var leftOne, leftTwo, rightOne, rightTwo, topOne, topTwo, botOne, botTwo;
var marginLeftOne, marginLeftTwo, marginRightOne, marginRightTwo, marginTopOne, marginTopTwo, marginBotOne, marginBotTwo;
var paddingLeftOne, paddingLeftTwo, paddingRightOne, paddingRightTwo, paddingTopOne, paddingTopTwo, paddingBotOne, paddingBotTwo;
var maxWidthOne, maxWidthTwo, maxHeightOne, maxHeightTwo;
With different tests:
widthOne = $('#one').width();
widthTwo = $('#two').width();
(parseInt($('#one').css('left')))? leftOne = parseInt($('#one').css('left')):leftOne = 0;
(parseInt($('#two').css('left')))? leftTwo = parseInt($('#two').css('left')):leftTwo = 0;
And then define the size of the #mainDiv like this:
(maxWidthOne>=maxWidthTwo)? $('#main_div').width(maxWidthOne):$('#main_div').width(maxWidthTwo);
(maxHeightOne>=maxHeightTwo)? $('#main_div').height(maxHeightOne):$('#main_div').height(maxHeightTwo);
In your case it's not possible because of some logical reasons.
How is it possible to find a right position for id one when the
parent has no size and therefor no usable right position.
If you are using left instead of right for id one the situation
becomes better.
all the best
try this one
<script>
window.onload = function() {
var elems, max_top, max_right;
elems = mainDiv.getElementsByTagName( 'div' );
for( i = 0; i < elems.length; i++ ) {
elem = elems[ i ].offsetLeft + elems[ i ].offsetWidth + elems[ i ].style.marginLeft;
max_right = ( max_right > elem ) ? max_right : elem;
elem = elems[ i ].offsetTop + elems[ i ].offsetHeight + elems[ i ].style.marginBottom;
max_top = ( max_top > elem ) ? max_top : elem;
}
console.log( 't: ' + max_top + ', r: ' + max_right );
mainDiv.style.height = max_top;
mainDiv.style.width = max_right;
}
</script>
The code is having some problem with getting the margins.
I found a good page which solves the problem.
http://www.quirksmode.org/dom/getstyles.html