I using title attribute in jQuery.
createAlert: function () {
return '<img id="img" class="img pull-left" src="/Content/img/demo_16px.png" tabindex="0" style="outline: none;" title=' + demo.rawData + '></span>';
}
Here In this code, title contain dynamic data(demo.rawData Contain text = 'This is my code')
But when I hover in a browser for title it only displaying This(i.e only first word)
Can anyone tell what I am doing wrong.?
You need to surround the title in "" like so title="' + demo.rawData + '" rather than title=' + demo.rawData + ' otherwise the rendered HTML will be invalid
createAlert: function () {
return '<img id="img" class="img pull-left" src="/Content/img/demo_16px.png" tabindex="0" style="outline: none;" title="' + demo.rawData + '"></span>';
}
Here you go with one more solution using ES6 template literal
createAlert: function () {
return `<img id="img" class="img pull-left" src="/Content/img/demo_16px.png" tabindex="0" style="outline: none;" title="${demo.rawData}"></span>`;
}
Reference Document: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
Related
I'm trying to create a snippet of HTML, and iterate through each image within that snippet and apply a listener function and modify the image. However, using JQuery's .each() function is not allowing me to use functions such as .prop() to get/set image attributes. How can I apply functions such as .prop() to elements iterated over by the .each() function.
//formatImg simply returns a URL to the resource
var images = '<div class="flex-row">\
<div class="img">\
<img class="img-cover" data-src="' + formatImg(gallery.posts[0].image, 'medium') + '">\
</div>\
<div class="img">\
<img class="img-cover" data-src="' + formatImg(gallery.posts[1].image, 'medium') + '">\
</div>\
</div>';
var location = gallery.posts[0].location.address || 'No Location';
var elem = $('<div class="col-xs-6 col-md-3 tile story">\
<div class="tile-body">\
<div class="frame"></div>\
<div class="hover">\
<p class="md-type-body1">' + (gallery.caption || '') + '</p>\
<ul class="md-type-body2">\
<li>' + gallery.posts.length + (gallery.posts.length == 1 ? ' photo' : ' photos') +'</li>\
</ul>\
</div>\
' + images + '\
</div>\
<div class="tile-foot">\
<div class="hover">\
See all\
<!--<span class="mdi mdi-library-plus icon pull-right"></span>-->\
<!--<span class="mdi mdi-download icon toggle-edit toggler pull-right"></span>-->\
</div>\
<div>\
<div class="ellipses">\
<span class="md-type-body2">' + location + '</span>\
<span class="md-type-caption">' + getTimeAgo(new Date().getTime(), gallery.time_created) +'</span>\
</div>\
</div>\
</div>\
</div>'
);
elem.find('img.img-cover').each(function(){
_this = $(this);
console.log(_this.prop('data-src'));
attachOnImageLoadError(_this);
_this.prop('src',_this.prop('data-src'));
});
The console.log(_this.prop('data-src')) from within each, it returns undefined for every image.
Your problem has nothing to do with each(). Your problem is that you're trying to use prop() to handle HTML5 data attributes.
"data-src" is not an HTML property, therefore _this.prop('data-src') returns null. You would run into the same problem if you were using prop() to try to write to a data-src attribute.
Instead, to read a data attribute named data-src using jquery, use data(). So use _this.data('src').
See https://api.jquery.com/data/#data-html5 for more help.
I have created a simple script below that may help you to make it work:
var images = '<div class="flex-row">\
<div class="img">\
<img class="img-cover" data-src="img-1" />\
</div>\
<div class="img">\
<img class="img-cover" data-src="img-2">\
</div>\
</div>';
$(images).find('img.img-cover').each(function() {
alert($(this).data('src'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I am developing a web widget, so I need to protect some sources for image and audio tags. Also I am putting the html content through a jquery function. Is there any javascript/jquery methods to obfuscate an entire div dynamically ? Following is my code :
function getHTML(){
var html = '<div class="col-xs-8 col-xs-offset-4 col-md-10 col-md-offset-2">' +
'<div style="margin-right: 16px;">' +
'<audio id="audio_widget" src="mysource/data1.mp3"></audio>' +
'<audio class="alternate_audio" src="mysource/data2.mp3"></audio>' +
'</div>' +
'</div>'+
'<ul id="albumList" class="image-list">'+
'<li><img src="mysource/image1.jpg" alt="" width="100" height="100"></li>'+
'<li><img src="mysource/image2.jpg" alt="" width="100" height="100"></li>'+
'</ul>';
//Through this function I want to obfuscate entire 'html' content.
var encoded = someFunction(html);
return encoded;
}
I have a page I'm using to grab image alt text from a slider. Each image has a different alt text, and I'm trying to pull it into an array and then loop through it to display it.
However when I implement it, it only adds one object to the array as opposed to how ever many it may ACTUALLY have inside the div.
$(document).ready(function () {
var tn_array = $("#rightSlider img").map(function () {
return $(this).attr("alt");
});
for (var i = 0; i < tn_array.length; i++) {
alert(tn_array[i]);
$('#links').append('<a href="#" title="' + tn_array[i] + '" >' + tn_array[i] + '</a><br />');
}
});
Here is the main page that the code grabs the alt text from:
<div id="rightSlider">
<div>
<img src="images/adptvtch_s1_1.jpg" alt="Hearing Aid On A Female's Ear" width="330" height="215" />
</div>
<div>
<img src="images/adptvtch_s1_2.jpg" alt="Hands Reading Braille Book" width="330" height="215" />
</div>
<div>
<img src="images/adptvtch_s1_3.jpg" alt="Man In Wheelchair Reading" width="330" height="215" />
</div>
</div>
I've tried other things such as .each and I can't seem to pinpoint why it's only adding the first alt text and not the other ones. If you guys can help me figure it out, I'd be greatly appreciative.
You don't need additional iteration and an unnecessary array manipulation.
Try this,
var xEle = $('#links');
$("#rightSlider img").each(function() {
xEle.append('<a href="#" title="'+ $(this).attr("alt") +'" >'+ $(this).attr("alt") +'</a><br />');
});
DEMO
How I can put this code into one div class .element?
var side_bar_html = "<a href='javascript:google.maps.event.trigger(gmarkers[" + parseInt(gmarkers.length - 1) + "],\"click\");'>" + place.name + "</a><br>" + '<div class="raty" />' + "</br>";
$(side_bar_html).appendTo('#side_bar').filter('.raty').raty({
score : place.rating,
path : 'http://wbotelhos.com/raty/lib/img'
})
this code render HTML:
<a href='javascript:google.maps.event.trigger(gmarkers[0],"click");'>The Fort</a>
<br>
<div class="raty" style="cursor: pointer; width: 100px;"><img src="http://wbotelhos.com/raty/lib/img/star-on.png" alt="1" title="bad"> <img src="http://wbotelhos.com/raty/lib/img/star-on.png" alt="2" title="poor"> <img src="http://wbotelhos.com/raty/lib/img/star-on.png" alt="3" title="regular"> <img src="http://wbotelhos.com/raty/lib/img/star-on.png" alt="4" title="good"> <img src="http://wbotelhos.com/raty/lib/img/star-half.png" alt="5" title="gorgeous"><input type="hidden" name="score" value="4.5"></div>
I want to all this code put into DIV class .elemenat
How to do that?
do i need to write a function for that?
You can use like this to append element in div.
var div="<div class='element'></div>";
$('.element').append(side_bar_html );
I have this function that appends a div (Base-Shirt) to a div (Button)
<div class="Button"><div class="Base-Shirt"></div></div>
I then want the images to populate the (Base-Shirt) div. When I run the script the images are placed after the "Base-Shirt" div. Do you know how I would get them into the "Base-Shirt" and not after them?
This is what is happening:
<div class="Button">
<div class="Base-Shirt"></div>
<img class="2016" src="img/swatch/2016.jpg" title="Ruby_Red" alt="Main, Pique">
<img class="2017" src="img/swatch/2017.jpg" title="Khaki_Tan" alt="Main, Pique">
This is what I want to happen:
<div class="Button">
<div class="Base-Shirt">
<img class="2016" src="img/swatch/2016.jpg" title="Ruby_Red" alt="Main, Pique">
<img class="2017" src="img/swatch/2017.jpg" title="Khaki_Tan" alt="Main, Pique">
</div>
Function
function parse(document){
//Product
$(document).find("Item").each(function(){
$(".Button").append('<div class="' + $(this).attr('name') +'"></div>');
});
//Swatch
$(document).find("Swatch").each(function(){
$(".Button:nth-child(1)").append(
'<img class="' + $(this).attr('name') + '" alt="' + $(this).attr('alt') + '" title="' + $(this).attr('title') + '" src="img/swatch/' + $(this).attr('name') + '.jpg">'
);
});
}//function parse End
Thank you.
You could try $(".Button").children(":first") which will land you on the div-shirt element
use children and eq
$(".Button").children(":eq(0)"); //<-- this will get you the first children(start form 0)
$(".Button").children(":eq(1)"); //<-- this will get you the second children