Calling SVG Sprites with Ajax issue - javascript

I'm trying to call different external SVG sprites in a single HTML page. If I stick to one, everything works perfectly, as soon as I want to call different SVG sprites I end up with only one loading. So basically, it loads only one sprite and ignores the others. Am I missing something in the syntax here?
I'm using the following ajax code // I'm a newbie, so I'm sure I'm making a terrible mistake here :)
<script>
var ajax = new XMLHttpRequest();
ajax.open("GET", "sprite1", "sprite2", "sprite3", true);
ajax.send();
ajax.onload = function(e) {
var div = document.createElement("div");
div.innerHTML = ajax.responseText;
document.body.insertBefore(div, document.body.childNodes[0]);
}
</script>
Then in HTML
I'm using this
<svg class="sprite1">
<use xlink:href="#icon-name"></use>
</svg>

Sorry for using the answer for this but it is a bit longer code.
var ajax = new XMLHttpRequest();
ajax.open("GET", "sprite1", "sprite2", "sprite3", true);
ajax.send();
ajax.onload = function(e) {
e.ondata = (chunk) => {
console.log(chunk);
}
var div = document.createElement("div");
div.innerHTML = ajax.responseText;
document.body.insertBefore(div, document.body.childNodes[0]);
}
It is but a flying thought, but might work.

Related

Connect function to pictures displayed from a PC folder

I'm pretty new to JS and programming altogether so I'm sorry in advance if the explanation is a little sloppy, but I'll try to make it as clear as possible.
So what I'm trying to do is have a JS code that reads and displays (in an HTML page) photos from a PC folder, makes them clickable and on the click it redirects you to a page with the same photo but in high resolution.
Now, I have this piece of code that displays the said pictures, but the thing is I don't seem to be able to figure out how to "connect" it to the pictures and make them clickable. What makes it more difficult is that I'm trying to make all of this code dynamic (as you can see I've done in the below code), so I would like not to have any hardcoded titles of pictures and so on.
var index = 1;
var tempImg = new Image();
tempImg.onload = function(){
appendImage();
}
var tryLoadImage = function(index){
tempImg.src = 'img/' + index + '.jpg';
}
var appendImage = function(){
var img = document.createElement('img');
img.src = tempImg.src;
document.body.appendChild(img)
tryLoadImage(index++);
}
tryLoadImage(index);
Any help is very much appreciated, thank you very much!
You can make your images clickable by adding an onclick function to them. Try something like this:
var appendImage = function(){
var img = document.createElement('img');
img.src = tempImg.src;
img.onclick = e => {
// do something you want to show the full picture like this maybe
var el = document.getElementById("fullpictureid");
if (el && e.target.src) {
el.src = e.target.src;
// so that it sets "src" in <img id="fullpictureid"> for example
}
};
document.body.appendChild(img)
tryLoadImage(index++);
}

"Not allowed to navigate top frame to data URL" when downloading canvas in javascript

In my website, I am trying to download tainted canvases that I have created. I get the "Not allowed to navigate top frame to data URL:" (followed with a string of data) when I try to do this.
I have looked at other posts about this and they are generally trying to show their canvas or something else instead of saving the canvas.
Here is my code:
//it looks complicated, but the only important lines are the ones before the else statement,
function download_img(el) {
//the if statement is used to see if this is using the canvas or not
if(document.getElementById("canvasImage").style.display != "none"){
alert('canvas')
var canvImg = document.getElementById("canvasImage").toDataURL("image/jpg");
el.href = canvImg;
}else{
//again, this code is for the image side of the project, which works fine
alert('image')
var xhr = new XMLHttpRequest();
xhr.open("GET", document.getElementById("theImg").src, true);
xhr.responseType = "blob";
xhr.onload = function(){
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(this.response);
var tag = document.createElement('a');
tag.href = imageUrl;
tag.download = "meme";
document.body.appendChild(tag);
tag.click();
document.body.removeChild(tag);
}
xhr.send();
}
}
My HTML:
<a style="float:left;display:inline;" href="" onclick="download_img(this)">Canvas Button</a>
What I want to happen is that the canvas is saved.
Add the download attribute to the <a> tag to force it to download instead of navigate.

Dynamically fetching a web page in a particular div of webpage

I have a webpage wherein I want that onclick of a link or buttonn; the content of a particular div of webpage get updated and replaced with the content which I have scripted in other html page. How to do that?
There are several ways to do that .
<script>
function loaddata()
{
var xhr = new XMLHttpRequest();
xhr.open("GET","page.html",true);
xhr.onload = function(){
if(this.readyState === 4)
{
var div = document.getElementById("divid"); // the div where you want to load the data
div.innerHTML = this.responseText;
}
}
xhr.send();
}
</script>
html code
<button onclick="loaddata()">click</button>
<div id="divid"></div>
there are other ways to do that . but i have shown only javascript one
hope this helps you what you are looking for

Read and replace text in HTML causes high CPU load

I have a problem with high CPU load on a website where I want to replace some text with links.
The script is loaded at the end of body.
This works normally when there are no videos on the page. But if there are videos embedded like this the CPU load goes above 50%. If I use this for multiple files Firefox crashes.
<p><video width="320" height="240" class="mediaelement" autoplay="autoplay" src="video.mp4" controls="controls">resources/video.mp4</video></p>
I figured out the problem is in this, especially the readout from csv. If I just replace the text with fixed data it works as well.
var rawFile = new XMLHttpRequest();
rawFile.open("GET", "data.csv", false);
rawFile.overrideMimeType('text/xml; charset=iso-8859-1');
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
allText = allText.split("\n");
var sizedata = Object.size(allText); //Number of entries
var sizedata = sizedata -1; //Excel +1
//alert("Debug: " + sizedata);
var i = 0;
while (i < sizedata)
{
var word = allText[i].split(";");
var wordToDefine = word[0];
var wordDefinition = word[1];
var wordToReplace = wordToDefine
var replaceItem = new RegExp(wordToReplace,"g");
document.body.innerHTML = document.body.innerHTML.replace(replaceItem, " <a href='data.html' target='_self'><span style='color:green' title='WORD'>WORD</span></a>");
i = i+1;
}
}
}
}
rawFile.send(null);
Any ideas what I can do about this?
Thank you in advance.
As #criz already mentioned, building DOM in a loop is a very bad practice. It's much better to create documentFragment and attach it to the DOM. Take a look at the https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment There is an example.

Javascript get image height works in all browsers but firefox...please help?

So I am fairly new to Javascript (a lot of experience in PHP), but I have this basic script that checks a link that redirects to a URL to see what the image height is. If it is a certain height then it adds one to a variable, otherwise nothing. I would easily do this in PHP but the images are on other servers and not my own so it doesn't work.
Anyways, ehre is the script. Let me know if you have any tips. Works well and tested in Chrome, Safari, Opera, and IE.
<script language='JavaScript'>
window.onload = function() {
var nstar = 0, urls = [];
urls[0] = "http://optout.imiclk.com/cgi/nai_status.cgi?nocache=";
urls[1] = "http://www.adbrite.com/mb/nai_optout_check.php?nocache=";
urls[2] = "http://events.adchemy.com/visitor/auuid/nai-status?nocache=";
function getImgSize(imgSrc){
var newImg = new Image();
newImg.src = imgSrc;
return{height:newImg.height, width:newImg.width}
}
for(i=0,length=urls.length;i<length;i++){
if(getImgSize(urls[i]).height==43){nstar++;}
}
document.getElementById('tracknum').innerHTML = "<b>" + nstar + "</b>";
}
</script>
Maybe the image isn't loaded yet?
Try :
image.onload=function() {
alert('W:'+image.width+', H:'+image.height)
}

Categories