hi Guys I need help with catching a img tab in side of the p tag
this is my html
<p>
<img style="max-width: 100%; margin-left: auto; margin-right:
auto; display: block;"
src="../content_platform_node/content_primitive/51e4c3e29306e2581000000a/blob"
alt="" data-lscp-resource-mimetype="image/jpeg"
data-lscp-resource-id="51e4c3e29306e2581000000a" />
</p>
what I need is to wrap the img tab with a tag instead of p tag , note this is not pre-generated its user input content therefore I need to do this with jquery or javascript
help needed
You can try something like
var parent = $('img').parent();
parent.wrap('<div />').contents().unwrap()
and the div can be any other tag
var image = $('img[data-lscp-resource-id="51e4c3e29306e2581000000a"]');
image.parent('p').replaceWith($('<a></a>').html(image));
Fiddle
EDIT: raw js:
var image = document.getElementsByTagName('img')[0];
var oldParent = image.parentNode;
var newParent = document.createElement('a');
newParent.appendChild(image);
oldParent.parentNode.appendChild(newParent);
oldParent.parentNode.removeChild(oldParent);
Fiddle
Related
I have a set of divs with background images. Im trying to get the image onclick then display it in a lightbox. When the lightbox pops, the image i get in undefined. I can get the image url to display correctly through console. I know lbImg.src = galImg.src; is incorrect but i am unsure how to fix it.
HTML
<div id="lightbox">
<span class="closeBTN">×</span>
<img class="lbContent" src="">
</div>
<div class="imgCon">
</div>
CSS
.imgCon
{
height: 500px;
width: 15%;
min-width: 200px;
background-image: url(../images/01.jpg);
background-position: center;
background-size: auto 500px;
margin-bottom: 66px;
}
JS
var lightbox = document.querySelector('#lightbox')
img = document.querySelector('.imgCon')
span = document.querySelector('.closeBTN')
lbImg = document.querySelector('.lbContent')
img.onclick = (function(){
lightbox.style.display = "block";
var galImg = window.getComputedStyle(this,
null).getPropertyValue("background-Image");
lbImg.src = galImg.src;
//console.log(galImg);
})
span.onclick = (function(){
lightbox.style.display = "none";
});
You get the background-image itself in galImg, so you need to set it directly (it is a string and does not have a .src property).
But, the value of galImg we obtain from getComputedStyle is a string like as: "url("file:.../Desktop/1.png")". We have to remove the url( part and also the quotation marks ("...") from it:
lbImg.src = galImg.slice(4, -1).replace(/"/g, "");
Can you please try lbImg.setAttribute('src', galImg.src).
I am getting a preload box for a img tag from the code below.
<script>
document.addEventListener('DOMContentLoaded', function(){
load()
}, false);
function grab(){
var urlsource = document.getElementById("image").value="";
return urlsource.length > 0;
}
function load(){
var imgurl = document.getElementById("image").value;
document.getElementById("replace").src=imgurl;
return imgurl.length > 0;
}
</script>
<style>
div.output {
height: 200px;
width: 200px; }
img#replace {
display: none;
}
img#replace[src]{
height: 150px;
width: 150px;
position: absolute;
display: inline-block;
}
</style>
</head>
<body>
<textarea id="image" onload="grab();" onkeyUp="load();" onkeyPress="load();"></textarea><br>
<a id="demo1" href="https://www.google.co.nz/">
<div class="output">
<img id="replace"/>
</div>
</a>
</body>
How the preload image can be removed while keeping the DOMContentloaded event? Thanks very much!
Every <img/> must have a src. If it does not, it's treated as broken.
Give it a src, even if that means creating a 1x1 transparent GIF pixel.
<img id="replace" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
EDIT: On closer inspection, it seems that your code is immediately running when the document has loaded, with the code effectively reading:
image.src = ""; // because the textarea is empty
Of course, this is not a valid image, but it is still an image, so it appears as a broken one. You may want to add an onerror event to the image to hide it if it fails to load.
<img id="replace" onerror="this.removeAttribute('src');" />
(This should work because of your CSS hiding source-less images)
I'm not so good in javascript.
I have a DOM structure like this:
<div data-embed-url="https://www.youtube.com/watch?v=5DkrwfY2jw4">
<div class="black">
<div>
<div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.2493%;">
<iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/5DkrwfY2jw4"></iframe>
</div>
</div>
</div>
How can I remove the node with the class "black" and the div without style and class keeping the others?
Assuming you are using ES5:
// Find the `.black`
var black = document.querySelector('.black');
// Replace `.black` with its first child
black.parentNode.replaceChild(black.firstChild, black);
You should use ID's on your div's to manipulate the DOM. ID's are meant to be unique. Using classes is discouraged as you can use class on mulitiple DOM nodes.
// Removing a specified element when knowing its parent node
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);
More information:
https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
An example using your code with div ID:
// Removing a specified element when knowing its parent node
var d = document.getElementById("blackId");
var d_nested = document.getElementById("blackChildId");
var div_i_want = d_nested.innerHTML;
alert('BEFORE: ' + d.innerHTML);
var throwawayNode = d.removeChild(d_nested);
d.innerHTML = div_i_want;
alert('AFTER: ' + d.innerHTML);
<div data-embed-url="https://www.youtube.com/watch?v=5DkrwfY2jw4">
<div class="black" id="blackId">
<div id="blackChildId">
<div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.2493%;">
<iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/5DkrwfY2jw4"></iframe>
</div>
</div>
</div>
If your intention is to remove the two div elements, while keeping the nested content (in order to simplify the nesting), then you could use .replaceChild() like this:
var black = document.querySelector('div.black');
var divToKeep = black.children[0].children[0];
black.parentNode.replaceChild(divToKeep, black);
i m just trying to add div in document body but not able to do image size default as div have
try to fit image in div without give height and width,its depend on div only..
so what can i do..
HTML
<div id="placehere" style="height: 250px; width: 300px;
overflow:hidden;position:absolute">
Javascript
window.onload=function(){
var elem = document.createElement("img");
elem.setAttribute("src", "images/slider-1.jpg");
elem.setAttribute("height", "");
elem.setAttribute("width", "");
elem.setAttribute("alt", "");
document.getElementById("placehere").appendChild(elem);
}
Why not just use CSS for that? There really is no need to use JS to transfer the sizes of the containing <div> to the <img>:
The following CSS definitions should achieve what you need:
#placehere img {
width: 100%;
height: 100%;
}
jsFiddle Demo
#BenM already provide good answer using css but if you want using jquery then you can try this:-
$(document).ready(function(){
var dv=$('#placehere');
var img=$('<img/>',{ width:dv.width()+'px',height:dv.height()+'px',src:"images/slider-1.jpg"});
dv.append(img);
});
Demo
I wanted to display variable value in alert box.
please see below code :
<script>
function check() {
var content = document.getElementById("one").value;
alert(content);
}
</script>
<body onload="check()">
<div style="position: absolute; z-index: 9; width: 450px; top: 38px; margin-left: 176px;">
<style>
div#layout {
margin:0px;
padding:px;
width:450px;
margin:0px auto;
overflow:hidden;
}
</style>
<div id="layout">
<span id="one" style="display:none" ph="layout1" class="ione">yes</span>
<span id="two" style="display:none" ph="layout1" class="ione">no</span>
</div>
</div>
</body>
When i am executing this code then it is showing value as undefined in alert box.
value in span id"one"is changing in different different situation.
i want to track every time...so i cant hardcode it.
can you please help in this?
spans not have the value in html
one is the id for span tag
in javascript use
document.getElementById('one').innerText;
in jQuery use
$('#one').text()
function check() {
var content = document.getElementById("one").innerText;
alert(content);
}
or
function check() {
var content = $('#one').text();
alert(content);
}
$(document).ready(function(){
// alert("test");
$("#name").click(function(){
var content = document.getElementById("ghufran").innerHTML ;
alert(content);
});
//var content = $('#one').text();
})
there u go buddy this code actually works
Try innerText property:
var content = document.getElementById("one").innerText;
alert(content);
See also this fiddle http://fiddle.jshell.net/4g8vb/
Clean way with no jQuery:
function check(some_id) {
var content = document.getElementById(some_id).childNodes[0].nodeValue;
alert(content);
}
This is assuming each span has only the value as a child and no embedded HTML.
document.getElementById('one').innerText;
alert(content);
It does not print the value;
But, if done this way
document.getElementById('one').value;
alert(content);