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;
}
Related
I have generated my Header from JavaScript Data.
To generate I'm iterating through an Object.
Generating the HTML looks like:
for (const topic in templateTopic) {
if (Object.prototype.hasOwnProperty.call(templateTopic, topic)) {
const element = templateTopic[topic]
// console.log(element);
template += '<div class="col col-topic-element" id="' + element + '" onClick="filterTopic(' + element + ')">'
template += '<p>' + element + '</p>'
template += '</div>'
}
}
parent.innerHTML = '';
parent.insertAdjacentHTML('afterbegin', template);
When I inspect the Element it contain following strange data (Chrome Inspector Output):
<div id="topics" class="row">
<div class="col col-topic-element" id="film" onclick="filterTopic(film)">
<p>film</p>
</div>
<div class="col col-topic-element" id="photography" onclick="filterTopic(photography)">
<p>photography</p>
</div>
<div class="col col-topic-element" id="visual design" onclick="filterTopic(visual design)" data-kwdiaostructure=""0":"input","1":"submit#visual design##col col-topic-element####KwDiaoTagDIV","2":"visual design""
data-kwdiaohashid="input#submit#visual design##col col-topic-element####KwDiaoTagDIV#visual design">
<p>visual design</p>
</div>
</div>
How can I get rid of the data, because when I click on the last Element ("visual design"), the console throws an error and I can't add further code.
Console output after clicking the 3 generated Items:
I integrated Bootstrap 4 CDN and fontawesome.
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
I'm new to JSP and ajax but trying both at the same time.
I'm making a dynamic tab that can be added or removed with these steps.
I wannna put parameter from controller in the newly added tab's content area.
1.When a 'Load Project' button from the list is clicked, add a new tab.
$('<li role="presentation">'
+'<a href="#'+tabId+'" aria-controls="'+tabId+'" role="tab" data-toggle="tab">'
+$projectName
+' <span class="closeTab glyphicon glyphicon-remove" aria-hidden="true"></span>'
+'<input class="hiddenProjectId" type="text" name="projectId" value="'+ pId +'" style="display: none;">'
+'</a></li>').insertBefore('#liProjectTabAdd');
$('<div role="tabpanel" class="tab-pane fade" id="'+ tabId + '">'
+ '<div class="projectContent">'
+ '<ul class="blockList list-unstyled draggableList"></ul>'
+ '<div class="table-hover addBlock">'
+ 'add block <span id="addBlockGlyp" class="glyphicon glyphicon-plus" aria-hidden="true"></span>'
+ '</div></div>'
+ '</div>').appendTo('.projectTab-content');
2.call the controller through ajax(post method)
$.post("loadProjectContent.do",
{
projectId: pId
}
);
3.The controller call DAO and get the project's content.
(The contents are correct. I checked it with printing)
Project project = new Project();
project.setProjectId(Integer.parseInt(request.getParameter("projectId")));
dao.doGetProjectContent(project);
request.setAttribute("projectContent", project.getProjectContent());
Then now, how to get this projectContent in JSP?
I've tried adding jsp tag when I append the tab, but it was a raw text.
(like ~~~${ projectContent }~~~)
$('<div role="tabpanel" class="tab-pane fade" id="'+ tabId + '">'
+ '<div class="projectContent">'
+ '<ul class="blockList list-unstyled draggableList">'
+ '${ projectContent }'
+ '</ul>'
+ '<div class="table-hover addBlock">'
+ 'add block <span id="addBlockGlyp" class="glyphicon glyphicon-plus" aria-hidden="true"></span>'
+ '</div></div>'
+ '</div>').appendTo('.projectTab-content');
Please save this newbie
Write the projectContent to the response instead of adding it as a request attribute.
On the client side, parse the response of your AJAX request and add it to the DOM.
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 working on a slide show where I need to return a portion of HTML with a <script> tag and a piece of javascript function in it.I want to add it as I can have multiple slide shows and each one with different properties like transitions,slide speed etc.This function consists the parameters of the slider properties.
return '<div id="slider" class="nivoSlider">'+
'<div class="">'+
'<img id="" class="image mover" style="position:absolute;left:0px;top:0px;" src="http://localhost/gobiggi_VS_2_2/images/slideShow/slide01.jpg" data-thumb="images/slideShow/thumb/slide01.jpg" alt="" />'+
'</div>'+
'<div class="">'+
'<img id="" class="image mover" style="position:absolute;left:0px;top:0px;" src="http://localhost/gobiggi_VS_2_2/images/slideShow/slide02.jpg" data-thumb="images/slideShow/thumb/slide02.jpg" alt="" />'+
'</div>'+
'<div class="">'+
'<img id="" class="image mover" style="position:absolute;left:0px;top:0px;" src="http://localhost/gobiggi_VS_2_2/images/slideShow/slide03.jpg" data-thumb="images/slideShow/thumb/slide03.jpg" alt="" />'+
'</div>'+
'<div class="">'+
'<img id="" class="image mover" style="position:absolute;left:0px;top:0px;" src="http://localhost/gobiggi_VS_2_2/images/slideShow/slide04.jpg" data-thumb="images/slideShow/thumb/slide04.jpg" alt="" />'+
'</div>'+
'</div>'+'<script>$("#slider").nivoSlider({effect: "sliceDown",animSpeed: 500,pauseTime: 3000,startSlide: 0,controlNavThumbs: true,controlNavThumbsFromRel:true, pauseOnHover: true,manualAdvance: false});</script>';
The function inside setTimeout is the one I need to store inside the HTML
I tried to achieve it by storing it in a variable and attaching it inside the setTimeout().I used .toString() and .append() .html .text but the script directly runs or executes instead of storing it in the html structure.How can I just store the function inside the script tag in the HTML structure?
If you want the contents of the script tag to be stored as a function, you need to give that function a name. Simply enclose it all in a function setSlideShowTimeout() { setTimeout(function … ); };
your setTimeout function is incorrect..
'<script>setTimeout(function slideShow(){$("#slider")......</script>';
//------^^^^^^^^---here you are creating a function `slideShow`
it should be
'<script>setTimeout(function(){$("#slider")......</script>';
OR
function slideShow(){
$("#slider").nivoSlider({
effect: "sliceDown",
animSpeed: 500,
pauseTime: 3000,
startSlide: 0,
controlNavThumbs: true,
controlNavThumbsFromRel:true,
pauseOnHover: true,
manualAdvance: false
})
}
setTimeout(slideShow,100);
and i don't think you need to add this in return.. add this in your main page.. and it should work