I was trying to give an object an Image but I doesn`t give it back . What did I wrong ? ^^
var bank = {
money:"$",
currency:"Dollar",
sum:50,
src: "Logo.png"
};
document.getElementById("test").innerHTML= " Your amount is" + bank.sum + " "+ bank.money + "("+ bank.currency+")" + bank.src;
You are not using an image anywhere as far as I can tell. You can't just give an "image" to javascript. You can store the URL to an image in javascript, and then you can assign this to an HTML <img>tag.
In html the tag would look like <img id="testimage" src="Logo.png/>. Then you could use javascript to change the image source. You could do it like
var image = document.getElemenyById("testimage");
image.src = bank.src;
Or, if you want to add an image to the body completely in Javascript, you could do that as well.
as you have commented on your answer, I guess this is the way you actually want to do it
var img = document.createElement("img"); // creates <img>
img.src = bank.src; // sets the source to the source of the 'bank'
document.getElementsByTagName("body")[0].appendChild(img); // adds it to the body
You could of course add it to your (div?) which you are using the your question.
document.getElementById("test").appendChild(img);
Try adding the image in an <img> element like this:
document.getElementById("test").innerHTML= " Your amount is" + bank.sum + " "+ bank.money + "("+ bank.currency+")" + " `<img src= '"+bank.src+"' />` ";
Is it possible to box an object like this ?
var screenX1 = {
image:"image001.png",
links: {
link {
area:[45, 143, 106, 158];
reference to screenx2
}
link {
area:[45, 143, 106, 158];
reference to screenx3
}
},
};
var screenx2 = {
......
Add img tag for show image like below.
document.getElementById("test").innerHTML="Your amount is " + bank.sum + " "+ bank.money + " ("+ bank.currency+")" + "<img src='"+bank.src+"' />";
Related
My webpage is receiving through AJAX GET requests Arrays with strings, and a Boolean.
The objects within the array are displayed subsequently to shape a chat app, the received array represents messages to display in a chatbox. However, some of the messages have media in them.
Therefore, to recognize such message with image source in them, I added a Boolean Value (media=True : There is an image source).
With my current code, all arrays are testing their source in an empty <img src""> which creates a real mess on the chat box with unknown images. I need to be able to generate with JS an HTML image when an Object has a media = True with a source of 'mediasrc'.
AJAX Array in details
HTML:
<div id="display"></div>
JS:
<script>
$(document).ready(function() {
setInterval(function() {
$.ajax({
type: 'GET',
url: "/checkview",
success: function go(response) {
console.log(response);
$("#display").empty();
for (var model of response.models_to_return) {
var temp = "<div class='container darker'><b>" +
model.user_id + "</b><p>" +
model.room + "</p><span class='time-left'>" +
model.datetime + "</span><img src=../static/" +
model.mediasrc + ".png></div>";
$("#display").append(temp);
}
},
error: function(response) {
//alert('An error occured')
}
});
}, 1000);
})
</script>
By the way, this code works fine, but it's literally brute forcing all messages trying to fill an img:
while this is something that front-end frameworks handle particularly well, a common convention would be to split your template HTML. For example:
for (var model of response.models_to_return) {
var temp = "<div class='container darker'>"
+ "<b>" + model.user_id + "</b>"
+ "<p>" + model.room + "</p>"
+ "<span class='time-left'>" + model.datetime + "</span>";
if (model.media) {
//add img to template, could also check model.mediasrc != null
temp += "<img src=../static/" + model.mediasrc + ".png>"
}
temp += "</div>";
$("#display").append(temp);
}
If you want to write code up to the latest conventions, replace double quotes with back ticks, and reference variables with ${var_name}.
For example:
+ "<b>" + model.user_id + "</b>"
becomes:
+ `<b>${model.user_id}</b>`
Not 100% sure I understand the question, but you could create a utility function that takes the model and returns either the <img> markup or an empty string depending on whether model.mediasrc is present (or whatever condition is appropriate for your needs).
This probably isn't the exact implementation you need, but it demonstrates the pattern:
function imgMarkup (model) {
if (model.mediasrc) {
return `<img src="${model.mediasrc}" />`
}
return '';
}
for (var model of response.models_to_return) {
const temp=`
<div class='container darker'>
<b>${model.user_id}</b>
<p>${model.room}</p>
<span class='time-left'>${model.datetime}</span>
${imgMarkup(model)}
</div>`;
$("#display").append(temp);
}
So I have this code that I am trying to alter –
Original:
jQuery(document).ready(function() {
var name = '';
var firstLastName = '[[T6:[[E48:[[S334:fr-id]]-[[S334:px]]:cons.first_name]]]] [[T6:[[E48:[[S334:fr-id]]-[[S334:px]]:cons.last_name]]]]';
var screenname = '[[T6:[[S48:0:screenname]]]]';
if (screenname) {
name = screenname;
} else {
name = firstLastName;
}
var splitName = name.split('');
var nameCheck = splitName[splitName.length-1];
jQuery('#personal_page_header h2').html("Support " + name + "'s Fundraiser" );
});
someone wrote this up and are no longer here, and what I'm trying to do now is figure out how to instead of replace the existing text, add to it.
So right now what this code does is it replaces the h2 content with the constituents registered name, or screenname.
What I'm trying to do now is append to that so that it will say something like
<h2>
Welcome to my fundraiser
<br/>
"Support" + name + "'s Fundraiser"
</h2>
but unfortunately what I tried breaks the code and stops it from working.
what I tried to do is this:
jQuery('#personal_page_header h2').append('<span><br />"Support " + name + "'s Fundraiser"</span>' );
I've tried to do a variety of other things that gave the same unsuccessful result.
Any help would be really appreciated!
Thanks
This should work for you:
jQuery('#personal_page_header h2').append("<span><br/>Support " + name + "'s Fundraiser</span>");
You've just got your quotations a little out of place.
You need to concatenate your code correctly, so if you'd like to keep the " use ' to concatenate. Further you need to escape the ' inside the string with \:
jQuery('#personal_page_header h2')
.append('<span><br />"Support ' + name + '\'s Fundraiser"</span>');
I have a foreach loop in Razor which takes images from the Multiple Media Picker in Umbraco. The Response.Write just allows me to see that the images are displaying fine (which they are) so you can ignore this bit.
My question is, how do I populate the image tag with the image URL using the Javascript function? (see below which currently doesn't work).
Razor View/CSHTML
var imagesList = portfolioItem.GetPropertyValue<string>("Images").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
var imagesCollection = Umbraco.TypedMedia(imagesList);
foreach (var imageItem in imagesCollection)
{
Response.Write("<img src='"+ #imageItem.Url +"' />");
}
Javascript
openInfoWindow = function (name, imagesCollection, location, mw, url, marker) {
var infoText = "<img src='" + imagesCollection + "' alt='" + imagesCollection + "'title='" + imagesCollection + "' />";
}
try using jquery, if u use razor to set the url as an invisible input value. Then use jquery to pull that value out and add it to the img tag itself by using the following:
var inputVal = $("input").val();
$("#my_image").attr("src",inputVal );
if you put the invisble input value as a variable you can set the img atr ursing jquery like I've shown above.
I have a problem when converting store html code to javascript variable, I know we can convert using converter tools, but I can't use this converter in my situation.
I am trying the following code
var t_cls="font-effect-anaglyph rotator";
var randompostsurl="www.allinworld99.blogspot.com";
var randompoststitle="Open Inspect Element And see the Code";
var default_script = "<script> document.write('<div><a class="+t_cls+" href=\"' + randompostsurl + '\" rel=\"nofollow\">' + randompoststitle + '<\/a><\/div>'); <\/script>\n";
$("#apnd").append(default_script);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="apnd"></div>
The above one will produce the following output
<a class="font-effect-anaglyph" rotator="" href="www.allinworld99.blogspot.com" rel="nofollow">Open Inspect Element And see the Code</a>
Why the rotator class will created as new attribute?
Because there are no quotes around the class attribute in the result. You need to add them, since you have a space in the attribute's value:
default_script = "<script> document.write('<div><a class=\""+t_cls+"\" href=\"' + randompostsurl + '\" rel=\"nofollow\">' + randompoststitle + '<\/a><\/div>');<\/script>\n";
// Here --------------------------------------------------------^^---------^^
Replace your default_script code
default_script = "<script> document.write('<div><a class='"+t_cls+"' href=\"' + randompostsurl + '\" rel=\"nofollow\">' + randompoststitle + '<\/a><\/div>');<\/script>\n";
As there are no quotes in class, it produce rotator as a new attribute. But you can achieve rotator as a class by the following way. i.e replacing single quotes with escape sequence.
<script>$(document).ready(function(){
var t_cls="font-effect-anaglyph rotator", randompostsurl="www.allinworld99.blogspot.com",
randompoststitle="Open Inspect Element And see the Code",
default_script = "document.write(\"<div><a class=\""+t_cls+"\" href=\"" + randompostsurl + "\" rel=\"nofollow\">\" + randompoststitle + \"<\/a><\/div>\");<\/script>\n";
$("#apnd").append(default_script);
});
</script>
Please click on my JSFiddle link to see the code in action for what I am trying do. As you will notice, I have the tile, image, and link stored as JSON objects, but when you run my code, it does not display my title and image as a link as specified in my HTML file, along with the specified in attributes. I've been working on this for a while now, and I can't figure it out, when it seems like something that should be rather obvious. Does anyone have any ideas, suggestions, or a solution for me? I tried setting the output in JavaScript to be "" but that did not work.
HTML:
<a id="food" class="thumbnail" target="_blank">
<img width="200" class="img-shadow">
<hr>
<h3></h3>
</a>
JavaScript:
var data={"food":[
{
"title":"Pumpkin Spice Bread Recipe",
"image":"img/bread.jpg",
"link":"http://willowbirdbaking.com/2011/09/18/pumpkin-spice-pull-apart-
bread-with-butter-rum-glaze/"
}
]}
var output="<ul>";
// Create a variable to temporarily store the data
for (var i in data.food) {
output+="<li>" + data.food[i].title + data.food[i].image + data.food[i].link + "</li>";
}
output+="</ul>";
// Once we go through all of the elements in the array,
// we use the output variable to populate the placeholder div.
document.getElementById("food").innerHTML=output;
JSFiddle
Thanks in advance, much appreciated for any bit of help.
You have to use <img /> tag to output image. Your mistake is you just outputted image link.
Use image link tag: var bob = "some text <img src='"+data.food[i].image+"' />";
Try this:
var data={"food":[
{
"title":"Pumpkin Spice Bread Recipe",
"image":"img/bread.jpg",
"link":"http://willowbirdbaking.com/2011/09/18/pumpkin-spice-pull-apart-
bread-with-butter-rum-glaze/"
}
]}
var output="<ul>";
// Create a variable to temporarily store the data
for (var i in data.food) {
output+="<li>" + data.food[i].title + "<img src='"+data.food[i].image+"' /> " + data.food[i].link + "</li>";
}
output+="</ul>";
// Once we go through all of the elements in the array,
// we use the output variable to populate the placeholder div.
document.getElementById("food").innerHTML=output;
If you want your image be the link you have to put your image into <a></a> tag like this:
for (var i in data.food) {
output+="<li><a title='" + data.food[i].title + "' href='"+data.food[i].link+"'><img title='" + data.food[i].title + "' src='"+data.food[i].image+"' /></li>";
}
So final code:
var data={"food":[
{
"title":"Pumpkin Spice Bread Recipe",
"image":"img/bread.jpg",
"link":"http://willowbirdbaking.com/2011/09/18/pumpkin-spice-pull-apart-
bread-with-butter-rum-glaze/"
}
]}
var output="<ul>";
// Create a variable to temporarily store the data
for (var i in data.food) {
output+="<li><a title='" + data.food[i].title + "' href='"+data.food[i].link+"'>" + data.food[i].title + "<img title='" + data.food[i].title + "' src='"+data.food[i].image+"' /></li>";
}
output+="</ul>";
// Once we go through all of the elements in the array,
// we use the output variable to populate the placeholder div.
document.getElementById("food").innerHTML=output;
And jsfiddle.
It is inside the <a> tag. You just need a href attribute on it for it to look like a real link.