$('#post-2233 > h2').text('Feeds / Downloads');
$('#post-2233 > h2').after(
'<div class="clo-column-before"> \
<p>Please login on the right to access the content below.</p> \
<p>Below is all the downloadable content on the website. Your account gives you access to all the items with a check mark next to it. </p> \
<p>You can purchase additional access from your member page. If you have any problems accessing any of the content below, please contact us.</p> \
</div>'
);
$('#post-2233 > .entrytext').after(
'<div class="clo-column-after"> \
<h2>Download instructions: PC / Mac, iPhone / iPad, Android</h2> \
<h3>PC / Mac:</h3> \
<p>Click directly on the links to open the content. You can then download it directly from the page that opens.</p> \
<p>Click on the iTunes logo to open the content into iTunes.</p> \
<p>Note that the PDFs are in a zip archive that will need to extracted after download.</p>
</div>'
);
});
This is the problematic line:
<div class="clo-column-after"> \
I don't see anything strange, though.
It's very possible that your browser is inserting end of line characters at each \ because of the way you are splitting that multi-line string, and maybe jQuery doesn't like those characters. Just researching your questions, almost every article I saw recommended against this type of line splitting. Instead, you could do a couple of things:
EDIT: You are missing a \ on the last <p> line. I would still consider one of the following changes, however.
Just use regular string concatenation:
$('#post-2233 > .entrytext').after(
'<div class="clo-column-after">' +
'<h2>Download instructions: PC / Mac, iPhone / iPad, Android</h2>' +
'<h3>PC / Mac:</h3>' +
'<p>Click directly on the links to open the content. You can then download it directly from the page that opens.</p>' +
'<p>Click on the iTunes logo to open the content into iTunes.</p>' +
'<p>Note that the PDFs are in a zip archive that will need to extracted after download.</p>' +
'</div>'
);
Use templates:
<script id="dl-instructions" type="text/template">
<div class="clo-column-after">
<h2>Download instructions: PC / Mac, iPhone / iPad, Android</h2>
<h3>PC / Mac:</h3>
<p>Click directly on the links to open the content. You can then download it directly from the page that opens.</p>
<p>Click on the iTunes logo to open the content into iTunes.</p>
<p>Note that the PDFs are in a zip archive that will need to extracted after download.</p>
</div>
</script>
Then your jQuery after() call becomes:
$('#post-2233 > .entrytext').after($('#dl-instructions').html());
Related
I need to parse HTML files and extract any characters found within the following flag:
${message}
The message may contain words, whitespace, and even special characters. I have the following regex that seems to partially work:
/\$\{(.+)\}/g
What's happening with this pattern is it appears to be working backwards from the line break and finding the first }. The desired result would be to work forward and find the first }.
Here is the regex in RegExr: https://regexr.com/3ng3d
I have the following test case:
<div>
<div class="panel-heading">
<h2 class="panel-title">${Current Status}<span> - {{data.serviceDisplay}}</span></h2>
</div>
${test}
<div class="panel-body">
<div>${We constantly monitor our services and their related components.} ${If there is ever a service interruption, a notification will be posted to this page.} ${If you are experiencing problems not listed on this page, you can submit a request for service.}</div>
<div>
<div>${No system is reporting an issue}</div>
</div>
<div>
<a>{{outage.typeDisplay}} - {{outage.ci}} (${started {{outage.begin}}})
<div></div>
</a>
</div>
<div><a href="?id=services_status" aria-label="${More information, open current status page}">${More information...}
</a></div>
</div>
</div>
The regex should extract the following:
Current Status
test
We constantly monitor our services and their related components.
If there is ever a service interruption, a notification will be posted to this page.
If you are experiencing problems not listed on this page, you can submit a request for service.
No system is reporting an issue
started {{outage.begin}}
More information, open current status page
More information...
But what I'm actually getting is...
${Current Status} - {{data.serviceDisplay}}
${test}
${We constantly monitor our services and their related components.} ${If 4. there is ever a service interruption, a notification will be posted to this page.} ${If you are experiencing problems not listed on this page, you can submit a request for service.}
${No system is reporting an issue}
${started {{outage.begin}}}
${More information, open current status page}">${More information...}
It appears my regex is working back from the \n and finding the first } which is what's giving me #1, #3, and #6.
How can I work from the start and find the first } as opposed to working backwards from the line break?
Use RegExp.exec() to iterate the text and extract the capture group.
The pattern is /\$\{(.+?)\}(?=[^}]+?(?:{|$))/g - lazy matching of characters until closing curly bracket that is followed by a sequence that ends with opening curly brackets or end of string.
RegExr demo
var pattern = /\$\{(.+?)\}(?=[^}]+?(?:{|$))/g;
var text = '<div>\
<div class="panel-heading">\
<h1>${Text {{variable}} more text}</h1>\
<h2 class="panel-title">${Current Status}<span> - {{data.serviceDisplay}}</span></h2>\
</div>\
${test}\
<div class="panel-body">\
<div>${We constantly monitor our services and their related components.} ${If there is ever a service interruption, a notification will be posted to this page.} ${If you are experiencing problems not listed on this page, you can submit a request for service.}</div>\
<div>\
<div>${No system is reporting an issue}</div>\
</div>\
<div>\
<a>{{outage.typeDisplay}} - {{outage.ci}} (${started {{outage.begin}}})\
<div></div>\
</a>\
</div>\
<div><a href="?id=services_status" aria-label="${More information, open current status page}">${More information...}\
</a></div>\
</div>\
</div>';
var result = [];
var temp;
while(temp = pattern.exec(text)) {
result.push(temp[1]);
}
console.log(result);
I'm building my first Chrome extension. So far my code takes elements of a webpage and creates HTML markup (loaded in a string in Javascript).
My extension leads in a button
$(".column1").prepend('<div class="actions" style="margin-bottom: 1rem;"><button id="edmMaker">Make an EDM!</a></div>')
$('#edmMaker').click(function(){
var html = "<body><section><h1>Here is some HTML text</h1></section><div><p>Here's some more</p></div></body>"
// create a .html file and download it to the user's desktop
});
In Node.JS I would just write a .html file to the local disk, but I can't quite figure out how this works in Chrome Extension world.
How can I do this?
Sub-question: Is there any way to tabify the HTML that is being output? The actual code I'm outputting is an HTML email template, and Javascript will only let me load in a string without line breaks and tabs.
Here's a method I wrote that leverages HTML5's download attribute to download a file:
var saveHTML = function(fileName, html){
// Escape HTML
var el = document.createElement("dummy");
el.innerText = html;
var escapedHTML = el.innerHTML;
// Use dummy <a /> tag to save
var link = document.createElement("a");
link.download = fileName;
link.href = "data:text/plain,"+escapedHTML;
link.click(); // trigger click/download
};
saveHTML("myHTML.html", "<html></html>");
Check it out in action here.
If you're not looking to save the file, you can just use storage.
EDIT:
As #Xan pointed out below, the chrome.downloads API exists as well which may be of some use, specifically chrome.downloads.download() method.
As for multiline strings with tabs/spaces/newlines, there's 3 ways:
1.) Manually, using newlines (\n) and tabs (\t)
"<body>\n\t<section>\n\t\t<h1>Here is some HTML text</h1>\n\t</section>\n\t<div>\n\t\t<p>Here's some more</p>\n\t</div>\n</body>"
Which comes out to:
<body>
<section>
<h1>Here is some HTML text</h1>
</section>
<div>
<p>Here's some more</p>
</div>
</body>
2.) Using JavaScript's multi-line string support, which requires that you insert a backslash at the end of a line:
var html = "<body>\
<section>\
<h1>Here is some HTML text</h1>\
</section>\
<div>\
<p>Here's some more</p>\
</div>\
</body>";
3.) Array.join:
var html = [
"<body>",
" <section>",
" <h1>Here is some HTML text</h1>",
" </section>",
" <div>",
" <p>Here's some more</p>",
" </div>",
"</body>"
].join("\n");
I am trying to select an image, and then replace that image with a div and an alternate image and div within that div, but to no avail.
$("img[src='/brand/logo.png']").replaceWith("
<div class=\"brander\">
<img src=\"https:\/\/cache.graphicslib.brand.com/new-logo.png\">
<div class=\"value-propositions\">Low price guarantee!</div>
</div>
");
Nothing appears to be happening, however, and I have tested to see if the selector is finding the image (with the code below), which it is. I am not sure if the selector is not selecting the entire image tag, or if I am making an error elsewhere.
if ($("img[src='/brand/logo.png']").length) {
alert ("The selector works!");
}
Any input is welcome. I'm fairly new to JS so, I happily welcome all criticism and advice.
It looks like your selector may not be working.
var derp = $('img[src$="brand/logo.png"]').replaceWith(" \
<div class=\"brander\"> \
<img src=\"https:\/\/cache.graphicslib.brand.com/new-logo.png\"> \
<div class=\"value-propositions\">Low price guarantee!</div> \
</div>");
img[src$= is src 'ends with' may be helpful. (note the \ and new line, that is how you can line break like that in javascript)
http://jsfiddle.net/Mutmatt/TcE5c/12/
I've got a page which loads a file tree with links to the actual pages and such, with subtrees and everything. But since large folders create huge files, a jQuery script to hide folders would be awesome. There is a problem tho, since the tree is loaded through ajax, and never looks the same, nether does the jQuery. I can generate the jQuery dynamically, but it doesn't load any javascript which is loaded through ajax. Specially not events. (jQuery, onclick)
<ul>
<li><b>www</b> - 5 files, 14 directories, 1877 KB total.
<ul>
<li><b>Admin</b> - 4 files, 3 directories, 44 KB total.
<ul>
<li><b>Editera</b> - 2 files, 16 KB total.
<ul>
<li>gastbok_edit.asp - View Source - 1100 bytes, last modified on 2011-01-17 12:06:43. <b> table names found:</b> Gastbok</li>
<li>Medlem_edit.asp - View Source - 15671 bytes, last modified on 2011-01-17 12:06:44. <b> table names found:</b> Inlogg</li>
</ul>
</li>
<li><b>Radera</b> - 2 files, 2 KB total.
<ul>
<li>gastbok_radera.asp - View Source - 813 bytes, last modified on 2011-01-17 12:06:45. <b> table names found:</b> Gastbok</li>
<li>medlem_radera.asp - View Source - 811 bytes, last modified on 2011-01-17 12:06:45. <b> table names found:</b> Inlogg</li>
</ul>
</li>
<li><b>Uppdatera</b> - 2 files, 2 KB total.
<ul>
sry for the big code, but there is an example of a rendered page and the items in it. I thought that the path variable could be used as a class, therefore giving all items in a path the same class. Thank you for reading my awesome textblock. example: "../../lh10fego/Admin/Radera". Will . and / cause problems? Probably.
Can anyone give me an jQuery code which works in such a way that it will hide/show every item with a class like "myClass" nomatter where they are on the page?
And also a way to activate that code after being added through an ajax-request.
The injected html, including the javascript ends up inside a div in the head of the document.
EDIT: I managed to get almost the needed functionality, but still not through ajax. I used this-keyword and hidden all with the specific class beneath. The problem now is that since the link is inside another link, both the one you clicked and the one at the very top will trigger, hiding everything aswell.
EDIT2:
set fs = CreateObject("Scripting.FileSystemObject")
set folder = fs.GetFolder(path)
currentfolder = path
fname = Replace(folder.path,"/","x")
fname = Replace(fname,".","2")
fname = Replace(fname,":","5") 'removing wierd chars and adding "asd" in middle
fname = Replace(fname,"\","3") 'to avoid multiple hits when searching
fname = Replace(fname,Right(fname,7),"asd" & Right(fname,7))
'Display the target folder and info.
Response.Write("<li onclick=""$(this).find('li." & fname & "').slideToggle();""><b>" & folder.Name & "</b> - " _
& folder.Files.Count & " files, ")
if folder.SubFolders.Count > 0 then
Response.Write(folder.SubFolders.Count & " directories, ")
end if
Response.Write(Round(folder.Size / 1024) & " KB total." _
& vbCrLf)
The problem right now is that since it's applied to nested li-tags whenever i click something, both the one i clicked and the highest li-tag will hide. Also, this test i'm working in right now is without ajax just to get my jQuery sorted.
for a better understanding: You use ajax for load HTML and Javascript code and injecting those into another HTML page. My question to you is: will also simple Javascript, e.g. alert("test");, not work after injection?
after ten days I think I've got a soloution:
<html><head>
<script src="./jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function jqueryAjax(url)
{
$.ajax({
url: ""+url,
cache: false,
dataType: "script",
success: function(html){
$("#content").append(html);
}
});
}
</script>
</head>
<body>
<div id="control" style="border: 1px solid green;">
<p>Ajax with Jquery (1.2.6)</p>
</div>
<div id="content" style="border: 1px solid red; width: 640px; height: 480px; top: 200px"></div>
</body></html>
The bad news is: an error message comes up in the error console and I cannot remove those. But it works...
If page has .pdf files linked then a message in <p> should be add just before end of the #mainontent div as a last paragraph <p>
for example this is default html?
<div id="maincontent">
<ul class="cheat_sheet_downloads">
<li>PDF, 316Kb</li>
<li>PNG, 77Kb</li>
</ul>
<div>
After detecting pdf
it should be like this
<div id="maincontent">
<ul class="cheat_sheet_downloads">
<li>PDF, 316Kb</li>
<li>PNG, 77Kb</li>
</ul>
<div>
<div id="ttip">
Most computers will open PDF documents automatically, but you may need to
download <a title="Link to Adobe website - opens in a new window"
href="http://www.adobe.com/products/acrobat/readstep2.html" target="_blank">
Adobe Reader</a>.
</div>
or as another div after #maincontent div. Is it possible with jquery?
Edit:
Page can have one or more PDF i want to add message at bottom. and i need IE 6 compatibility too
Edit 2 : I can't and don't want to use mouse over tooltip
var tip = "<p>Most computers will open PDF documents ";
tip += "automatically, but you may";
tip += "need to download <a title='Link to Adobe website-opens in a new window'";
tip +=" href='http://www.adobe.com/products/acrobat/readstep2.html'
target='_blank'>Adobe Reader</a>.</p>";
$(document).ready(function(){
//IF NUMBER OF PDF LINKS IS MORE THAN ZERO INSIDE DIV WITH ID maincontent
//THEN THIS WILL PUT TIP PARAGRAPH AS LAST CHILD OF DIV
if($("div#maincontent a[href*='/pdf']").length>0){
$("div#maincontent").children(":last-child").after(tip);
}
});
check it here
You can iterate through all the anchor tags and find the extension of this using jQuery.
But I don't think this will be enough for you. Some sites streams the files when a request is made to the server. You won't be able to determine what the server will download when such a request is made.
For example when I click on a button a request is made to the server and the server processes the request in the following manner.
Response.ContentType = "application/pdf";
Response.AppendHeader("Content-Disposition","attachment; filename=test.pdf");
Response.TransmitFile("yourfilepath);
Response.Flush();
This will force the browser to open a dialog box to either save or open the document.