I would like to know how to add several hundred images in divs but automatically. I have a folder with the images and I want to know if there is a technique to avoid copying and pasting the same code.
For example: <img src="img/01.png">
the idea is to inject this code into the divs and change the names of the images: 01.png, 02.png, 03.png...
Thanks for the help.
You can generate the html using javascript if you run this html page it'll display the tags for the first 99 images.
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<p id="my_output"></p>
<script>
let escapeHTML = function (aValue) {
return (
aValue.replace(/>/g, '>').
replace(/</g, '<').
replace(/"/g, '"')
)
}
let myOutput = document.querySelector('#my_output')
for (let i = 1; i < 100; ++i) {
let paddedIndex = ('0' + i).slice(-2)
myOutput.innerHTML += escapeHTML('<img src="img/' + paddedIndex + '.png">') + '<br>'
}
</script>
</body>
</html>
You can then copy paste the output into your code.
Related
I want to change the CSS style of another HTML file using a form. This is what I got so far however, the code isn't working as it won't change the style of the uploaded HTML file.
Here is my main code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Changing the style of another HTML File</title>
<script type="text/javascript">
function updateSize() {
var nBytes = 0,
oFiles = document.getElementById("uploadInput").files,
nFiles = oFiles.length;
for (var nFileId = 0; nFileId < nFiles; nFileId++) {
nBytes += oFiles[nFileId].size;
}
var sOutput = nBytes + " bytes";
// optional code for multiples approximation
for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
}
// end of optional code
document.getElementById("fileNum").innerHTML = nFiles;
document.getElementById("fileSize").innerHTML = sOutput;
}
function extract() {
var el = document.getElementById("test");
el.style.background = 'green';
el.style.color = 'red';
}
</script>
<body onload="updateSize();">
<form>
<p><input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p>
<p><input type="button" value="Submit" onclick="extract()"></p>
</form>
</body>
</html>
The file which is being uploaded:
<html>
<head>
<style>
#test {
background-color: blue;
color: yellow;
};
</style>
</head>
<body>
<div id="test">This is a div</div>
</body>
</html>
Where I'm I going wrong?
You misunderstand what document refers to, and how file uploads work. Your extract function is indeed called when the user presses the button. (Although it may be pressed when there are no files, what do you do then?)
But even inside the function, document still refers to the same document, the one with <title>Changing the style of another HTML File</title> and the file input form. It looks for an element with id #test, which it cannot find in this document, then fails, because it cannot set the style attribute of a non-existent / null element.
What you seem to want to do is to:
Let the user provide HTML files via the form input.
Parse the uploaded files as HTML.
Edit the CSS contained within (which involves first parsing the CSS, then editing it, then re-encoding it.)
Saving the files.
None of these are simple and they all have their subtleties. Parsing HTML is hard, but there are libraries that can manage this for you. Likewise for CSS. Saving is another problem – do you want to create another file that the user can then download? You cannot modify a user's file – consider if websites could simply modify the contents of your hard disk. It would be a security disaster.
Perhaps the most important question you should ask yourself is – why do you want to do this?
So I have an array in my script.js file. The array contains around 12 different things. I use the array to store divs IDs'. Because I want to load those divs dynamically. I've done that I loaded the divs dynamically but now I want to use that array for loading things inside the first div(a title a picture and so on).
let donorFeatureNames = [
'SpawnVehicle',
'RepairVehicle',
'RocketVoltic',
'MoreVehicle',
'ChatColors',
'Deagle',
'M4',
'Sniper',
'CopFeature',
'CrimFeature',
'Changeskin',
'Cash'
]
function loadFeatures () {
for (i = 0; i < 12; i++) {
$('#featureMenu').append('<div id=' + '"' + donorFeatureNames[i] + '"' + 'class="item notLoaded"></div>')
$("'#" + donorFeatureNames[i] + "'").append(span class="title">' + $(this).data('donorfeature') + '</span>)
}
I hope you understand what I'm asking. Cause I'm not that good at explaining things.
Instead of an array, just use jquery:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index1001</title>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//credit to https://stackoverflow.com/questions/941206/jquery-add-image-inside-of-div-tag
$(function () {
$("#test1").append("Text");
$('#test2').prepend("<img src='../../Images/w.JPG' />")
})
</script>
</head>
<body>
<div id="test1" class="anArray"></div>
<br/>
<div id="test2" class="anArray"></div>
</body>
</html>
You can even do this to make an array: $(".anArray").addClass("aColor");
Huangism answered my question.
$("'#" + donorFeatureNames[i] + "'") isn't correct, but this is: $("#" + donorFeatureNames[i])
That's basically what I asked.
Thanks a lot man!
I have a problem with the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>The Ultimate Quiz Challenge</title>
</head>
<body>
<div class="container">
<h1>The Ultimate Quiz Challenge</h1>
<script>
document.write("<h3> " + "Welcome to the ultimate quizz challenge" +"</h3>");
document.write("<p> "+"Hi I will ask you five questions and then rank you" + "</p>");
var question1 ="<p>What is the capital of England</p>";
var firstanswer ="London";
var question2 = "<p>How many sides are there to a square</p>";
var secondanswer = 4;
var noofquestions = 2;
var count = 1
/*var temp = eval('question' +1); */
/*document.write(temp);*/
/* main loop asking questions */
while (count <= 2) {
var temp = eval('question' + count);
document.write(temp);
var answer = prompt("Please type your answer ");
count++;
}
</script>
</div>
</body>
</html>
When I load the file into a browser such a chrome or safari it does not execute as hoped.
In short the document.write commands do not come out onto the screen until the prompt window as asked for two inputs. I thought the first thing to be seen would be the Ultimate Quiz Challenge followed by the commands in the open script tag down to the bottom ?
You should use the onload event on your body, so your script executes once the html page is rendered. It should work with :
<body onload="displayText()">
displayText() being a function you define in your script :
var displayText = function () {
while (count <= 2) {
var temp = eval('question' + count);
document.write(temp);
var answer = prompt("Please type your answer ");
count++;
}
};
or something similar.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
if (window.self === window.top) { $.getScript("Wing.js"); }
</script>
</head>
</html>
Is there a way in C# to modify the above HTML file and convert it into this format:
<html>
<head>
</head>
</html>
Basically my goal is to remove all the JavaScript from the HTML page. I don't know what is be the best way to modify the HTML files. I want to do it programmatically as there are hundreds of files which need to be modified.
It can be done using regex:
Regex rRemScript = new Regex(#"<script[^>]*>[\s\S]*?</script>");
output = rRemScript.Replace(input, "");
May be worth a look: HTML Agility Pack
Edit: specific working code
HtmlAgilityPack.HtmlDocument doc = new HtmlAgilityPack.HtmlDocument();
string sampleHtml =
"<html>" +
"<head>" +
"<script type=\"text/javascript\" src=\"jquery.js\"></script>" +
"<script type=\"text/javascript\">" +
"if (window.self === window.top) { $.getScript(\"Wing.js\"); }" +
"</script>" +
"</head>" +
"</html>";
MemoryStream ms = new MemoryStream(Encoding.ASCII.GetBytes(sampleHtml));
doc.Load(ms);
List<HtmlNode> nodes = new List<HtmlNode>(doc.DocumentNode.Descendants("head"));
int childNodeCount = nodes[0].ChildNodes.Count;
for (int i = 0; i < childNodeCount; i++)
nodes[0].ChildNodes.Remove(0);
Console.WriteLine(doc.DocumentNode.OuterHtml);
I think as others have said, HtmlAgility pack is the best route. I've used this to scrape and remove loads of hard to corner cases. However, if a simple regex is your goal, then maybe you could try <script(.+?)*</script>. This will remove nasty nested javascript as well as normal stuff, i.e the type referred to in the link (Regular Expression for Extracting Script Tags):
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
if (window.self === window.top) { $.getScript("Wing.js"); }
</script>
<script> // nested horror
var s = "<script></script>";
</script>
</head>
</html>
usage:
Regex regxScriptRemoval = new Regex(#"<script(.+?)*</script>");
var newHtml = regxScriptRemoval.Replace(oldHtml, "");
return newHtml; // etc etc
This may seem like a strange solution.
If you don't want to use any third party library to do it and don't need to actually remove the script code, just kind of disable it, you could do this:
html = Regex.Replace(html , #"<script[^>]*>", "<!--");
html = Regex.Replace(html , #"<\/script>", "-->");
This creates an HTML comment out of script tags.
using regex:
string result = Regex.Replace(
input,
#"</?(?i:script|embed|object|frameset|frame|iframe|meta|link|style)(.|\n|\s)*?>",
string.Empty,
RegexOptions.Singleline | RegexOptions.IgnoreCase
);
As an exercise, I'm trying to display a tarot card picture, the name of the card, and the meaning on a remote page using YQL/xpath/javascript. I've set up the script like the example on Yahoo but can't get it to display in the browser. Any suggestions as to how to improve it so it will display?
<html>
<head>
<title>Example</title>
<script type='text/javascript'>
function tarot(o){
var div = o.query.results.div;
var output = '';
var title = div[0].strong;
var content = div[0].p.content;
var src = div[1].img.src;
output = "<h3>" + title + "</h3></br><p>" + content + "</p><img src='" + src + "' alt="" />";
document.getElementById('results').innerHTML = output;
}
</script>
</head>
<body>
<div id='results'></div>
<script src="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fwww.tarot.com%2Fdaily%22%20and%20xpath%3D%22%2F%2Fdiv%5B%40id%3D'cardHolder'%5D%20%7C%20%2F%2Fdiv%5B%40id%3D'cardMeaning'%5D%22&format=json&diagnostics=true&callback=tarot"></script>
</body>
</html>
Any help is greatly appreciated!
~Larys
P.S. - I updated the callback=functionName part of the code to reflect the most current code. Unfortunately, this doesn't seem to fix the problem. Is there something else I seem to be missing?
You have callback=cbfunc but you haven't defined function cbfunc
The problem I see is that you're never calling your tarot() function.
I think you should change your url end to callback=tarot
Hope this helps. Cheers