I want to add a DOM dynamic ID into an image url. The current img src url has values, but I want to insert values through variables DOM objects.
Movie.Imdb is a variable that I want the img src to dynamically render.
<div id=imdb style="visibility: hidden;">{{movie.id}}</div>
<div src="http://img.omdbapi.com/?i=tt3896198&h=600" ></div>
I want the image src url to be rendered as:
http://img.omdbapi.com/?i=+"imdb"+&h=600
So that it can be dynamic.
Try to use of append() and attr() jQuery
Stack Snippet
var imageUrl = $("#imageUrl").attr("src");
$(".wrapper").append("<img src=" + imageUrl + ">")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="imageUrl" src="http://img.omdbapi.com/?i=tt3896198&h=600&apikey=6c3a2d45"></div>
</div>
<div src="http://img.omdbapi.com/?i="+movie.id+"&h=600" ></div>
This should work.
Related
I have this :
<div class="blog-page-nav-previous">
<<Previous
</div>
I'm trying to find all instances of the class blog-page-nav-previous and replace the text inside the <a> tag: <<Previous with an image of my own.
How do I do that?
Since you're asking for a jQuery solution:
// Select all the <a> tags inside .blog-page-nav-previous and change their innerHTML to an <img> tag:
$('.blog-page-nav-previous a').html('<img src="foo.jpg">');
<div class="blog-page-nav-previous">
<<Previous
</div>
You could try this
var a = document.getElementsByClassName("blog-page-nav-previous");
a.forEach(function(a){
a.outerHTML = '<img src="images/image.jpg" alt="image">'
});
If you are trying to only replace the contents of the element you could replace a.outerHTML with a.innerHTML
I think you want the image to work as a link, if yes then I have a solution for you
<div class="blog-page-nav-previous">
<img src="example.png">
</div>
This should work and sorry if this is not the answer you want
This should work:
var myClasses = document.getElementsByClassName("blog-page-nav-previous");
for (var i = 0; i < myClasses.length; i++) {
myClasses[i].innerHTML = "<img src='image.jpg'>";
}
<div class="blog-page-nav-previous">
Previous
</div>
If you want the image to have keep the same link as what "Previous" is set as, change the getElementByClassName to look for "my-link" instead of "blog-page-nav-previous"
Is there any way how to replace the path location using span or etc. that comes from the Jquery, or is there any shorcut in Django?, Currently as you can see I'm trying to override the path that comes from my jquery src="/media/<span id=image></span>". Is there any other way to pass the path image that comes from jquery into the img src?. It would be great if anybody could figure out where I am doing something wrong. thank you so much in advance
Jquery
$(document).on('click', 'a[data-role=show_scanned]', function(){
let csrf = $('input[name=csrfmiddlewaretoken]').val();
var path = $(this).attr('id'); #Image path example: image.jpg
var assign = $("#image").html(path);
$("#scanned_show").modal('show');
});
html retrieve
<img class="card-img img-fluid mb-1" src="/media/<span id=image></span>" alt="Card image cap" style="width: 900px;height: 600px;">
The line below can get the text of a span
$("#image").text()
You can then assign this to the src attribute of the img tag:
$("#imageDisplay").attr("src", $("#image").text() );
Demo:
// Add click event
$("#load").click(function() {
// Add text from span to src attribute of img
$("#imageDisplay").attr("src", $("#image").text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id=image>https://via.placeholder.com/150</span>
<button id="load">Load Image</button>
<img id="imageDisplay">
I am trying to concatenate a static path which will be static and a dynamic path which is the path of the image, into image URL I am getting syntax error whenever I add + between the paths i have tried this
<div *ngFor="let cat of Cat" class="cus-col" style="background-image: url( 'Static Image Url' '+ Dynamic Image Url' ) ">}
<div class="cus-text">
<h4>{{cat.name}}</h4>
</div>
</div>
Since you are using Ionic, you should use Angular NgStyle directive to set an elements style.
This example sets the background-image of a div with a dynamic url:
<div [ngStyle]="{'background-image': 'url(' + dynamicVariable + ')'}"></<div>
This example sets the background-image of a div with a static and dynamic url:
<div [ngStyle]="{'background-image': 'url(https://www.example.com/images/' + dynamicVariable + ')'}"></<div>
You can learn more about it here:
https://codecraft.tv/courses/angular/built-in-directives/ngstyle-and-ngclass/
While I wasn't that concerned about it in the beginning, I noticed that my page size is about 9 MB (+/- 200 images). I want to somehow decrease this by only loading the image when the user hovers over the specific <a>, so that only that image is loaded (which should decrease the page size drastically).
The code below is what I'm using right now
<style>
div.img {
display: none;
position: absolute;
}
a:hover + div.img {
display: block;
}
</style>
<div>
Some Name
<div class="img">
<img src="http://sub.domain.com/somename.jpg" alt="Some Name" style="some styles">
</div>
</div>
I think it's possible with jQuery, but I don't know where to start.
Thanks in advance.
Well if you have around 200 images in your directory, when a client requests the webpage it is going to have to download the images to have them ready if you are using a single page layout. I would look into lazy loading just as Adam stated. If you can also I would suggest to try to compress the photos if you can to lower the file size if possible. Good luck!
I fixed my problem by adapting an existing pen-code to adjust my needs (using jQuery). It now works again in IE/Firefox
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function($) {
$('.trigger').mouseover(function() {
// find our span
var elem = $(this).siblings('span');
// get our img url
var src = elem.attr('data-original');
// change span to img using the value from data-original
elem.replaceWith('<img src="' + src + '" style="display:block;position:absolute;"/>');
});
$('.trigger').mouseout(function() {
// find our span
var elem = $(this).siblings('img');
// get our img url
var src = elem.attr('src');
// change span to img using the value from data-original
elem.replaceWith('<span data-original="'+src+'"></span>');
});
});
</script>
Hover over me to fetch an image
<span data-original="https://lorempixel.com/g/150/200/"></span>
you can put the image with no src attribute and put the specific src in the href of div or the image!
then use jquery to get the href of a or data-src of image and then give it to the image the code will be something like this:
<a class="image" href="the-src-of-the-image">
<img src="(leave this blank)">
</a>
and this is the jquery
jQuery(document).ready(function($){
$('.image').on('hover',function(){
var img_src = $(this).attr('href');
$(this).children('img').attr('src',img_src);
});
});
Is searching possible in html tags on the behalf of ID? for example to find div tag having id="abc".
I can use document.getElementByID("abc"). But i need parent div + its inner HTML in return of searching. i.e if this div has childs
Try this :-
<script >
function showHTML(){
var vinner=document.getElementByID("abc").innerHTML;
var totalinner="<div >"+vinner+"</div>";
alert(totalinner);
}
</script>
HTML part:-
<body onload="showHTML();">
<div id="abc">
Hello inside abc
<div>
Inner div inside abc tag.
</div>
</div>
</body>
Its working fine. You can get Attributes here.
It's hard to understand what you want to achieve:
document.getElementById("abc").parentNode.innerHTML;
//will return <div id="abc"> and other items from parrent
document.getElementById("abc").getAttribute("name");
//will atribute of <div id="abc">
if (document.getElementById("abc").hasChildNodes()) {
// It has at least one
}
Using jQuery is much simplier, you could do that:
$("#abc").attr('id') //retunrs id
$("#abc").attr('class') //returns classes
//or other manipulations
One way to do this is to use outerHTML, which:
gets the serialized HTML fragment describing the element including its descendants.
Given the following HTML:
<div id="abc" data-attr="A custom data-* attribute">Some text in the div.</div>
The following JavaScript will log, in the console, the HTML of the element of id equal to abc:
var htmlString = document.getElementById('abc').outerHTML;
console.log(htmlString);
JS Fiddle demo.
References:
outerHTML.
outerHTML compatibility.