I'm loading a CSS file dynamically using a little bit of randomization:
var cookie = $.cookie('necgroupcolour', { path: '/' });
if (cookie == null) {
var rnd = Math.floor(Math.random() * 3);
$.cookie('necgroupcolour', rnd, { path: '/' });
}
switch ($.cookie('necgroupcolour', { path: '/' })) {
case "0":
$('head').append('<link rel="stylesheet" type="text/css" href="/css/purple/HomeMaster.css" />');
break;
case "1":
$('head').append('<link rel="stylesheet" type="text/css" href="/css/blue/HomeMaster.css" />');
break;
case "2":
$('head').append('<link rel="stylesheet" type="text/css" href="/css/green/HomeMaster.css" />');
break;
default:
$('head').append('<link rel="stylesheet" type="text/css" href="/css/purple/HomeMaster.css" />');
}
This works fine in Firefox, Safari, Chrome, but not in IE8 or lower.
When running this through Fiddler and checking the source you can see that no CSS file is getting loaded.
Any ideas how I could solve this?
Maybe try put this code in head and use document.write. ugly, but will work....
I know this may be too late, but it may help someone else.
Instead of using
$('head').append('<link rel="stylesheet" type="text/css" href="PATH_TO_CSS_FILE>');
use the following code:
var fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", PATH_TO_CSS_FILE);
document.getElementsByTagName("head")[0].appendChild(fileref);
Related
I can't change the filename of window.print()
Here's my code:
function printDiv() {
var divContents = document.getElementById("report_div").innerHTML;
var a = window.open(' ', ' ', 'height=700, width=900');
a.document.write('<html><head>');
a.document.title= "Case Report";
a.document.write('<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css">');
a.document.write('<link rel="stylesheet" href="../../css/style.css" />');
a.document.write('<style>#page{size:landscape} .statustxt{color:black !important;}</style>');
a.document.write('</head><body>');
a.document.write(divContents);
a.document.write('</body></html>');
a.document.close();
setTimeout(function () {
a.window.print();
}, 500);
}
And here's the window
And when i try to save as pdf
i want to make the default file name from download.pdf to casereport.pdf
I have an html file that is supposed to display every picture in the uploads directory, however it does not recognize an uploads directory. I am using a nodejs server. Here is my html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>gummy bear</title>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
var dir = "/uploads/";
var fileextension = ".jpg";
$.ajax({
url: dir,
success: function (data) {
$(data).find("a:contains(" + fileextension + ")").each(function () {
var filename = this.href.replace(window.location.host, "").replace("http://", "");
$("body").append("<img src='" + dir + filename + "'>");
});
}
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
and here is what my directory layout looks like:
app.js css index.html javascripts LICENSE node_modules package.json README.md upload.html uploads
and inside of uploads is:
➜ uploads ls
1.jpg
Thanks in advance!
Looking through the sample code it seems like the HTML file expects some HTML to be returned from http://localhost:3000/uploads.
The questions is why does the /uploads endpoint not return anything but instead returns a 404 response?
The answer to this would lie in the main executable Javascript file in the node.js application. Likely a file called server.js or index.js.
Here is an example of how you would go about creating the correct node.js application for you HTML file to work:
server.js
app.all('/uploads', function (req, res) {
var folder = './public/uploads',
html = '<html><body>##files##</body></html>';
fs.readdir(folder, (err, files) => {
var fileHrefs = '';
files.forEach(function (file) {
fileHrefs += '' + file + '';
});
html = html.replace('##files##', fileHrefs);
res.send(err || html);
})
});
This snippet of code iterates over all files in the uploads directory and wraps them in an a tag which is then returned by the server.
index.html
To make your index HTML file work a couple small changes need to be made:
change $(data).find() to $(data).filter()
remove the directory from the image source. change <img src='" + dir + filename + "'> to <img src='" + filename + "'>
Complete working sample
You can also find the whole working sample here: https://github.com/kohlikohl/list-images-in-dir
I have tried this script but the style is not read properly while printing can anyone help me figure out the problem?
<script type="text/javascript">
$(function () {
$("#btnPrint").click(function () {
var contents = $("#dvContents").html();
var frame1 = $('<iframe />');
frame1[0].name = "frame1";
frame1.css({ "position": "absolute", "top": "-1000000px" });
$("body").append(frame1);
var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
frameDoc.document.open();
//Create a new HTML document.
frameDoc.document.write('<html><head><title>DIV Contents</title>');
frameDoc.document.write('</head><body>');
//Append the external CSS file.
frameDoc.document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
//frameDoc.document.write('<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />');
//Append the DIV contents.
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
frame1.remove();
}, 500);
});
});
</script>
Issue may be with css file path.
Write it according to root path like this.....
<link rel="stylesheet" href="../css/style.css" />
I have a website that loads content via jQuery. When loading all my javascript and css files needed for facebox. It I put a link on the initial page, it works fine. However, when changing the 'innerHTML' of one element, the same links do not function.
And I even tried putting the javascript & css files in the innerHTML and it still doesn't work! It loads up as a new page.
Please help!
Thanks
Edit 1:
index.php
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://justtwobros.com/actions.js"></script>
<link href="src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="src/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : 'src/loading.gif',
closeImage : 'src/closelabel.png'
})
})
</script>
text (this link is the one that works)
<script>
showAllWorkOnLoad();
</script>
actions.js
function showAllWorkOnLoad() {
var thePostData = "filter=allwork";
$.ajax({
type: "POST",
url: "http://justtwobros.com/get_work.php",
data: thePostData,
success: function(theRetrievedData) {
document.getElementById('content').innerHTML = theRetrievedData;
$("#content").fadeIn(20);
focusButtonAllWork();
var count = 0;
$("#content").find('.work_thumbnail_wrapper').each(function() {
count++;
var timeWait = (count * 100) + 500;
var theId = $(this).attr('id');
var theIdDone = "#" + theId;
setTimeout(function(){$(theIdDone).fadeIn(300);},timeWait);
});
}
});
}
get_work.php
text (this link that doesn't work)
It doesn't work because that link does not have a listener attached to it. You can confirm this is your problem by adding this code after your ajax call (on success, after you have inserted the link into the document).
$('a[rel*=facebox]').facebox({
loadingImage : 'src/loading.gif',
closeImage : 'src/closelabel.png'
})
I'm trying to append a css file to an iframe that is created on a page from a global script. I can access part of it, but for some reason I can't append to the head. It's not throwing errors either, which is frustrating.
<script type="text/javascript">
$(document).ready(function() {
$('#outline_text_ifr')
.contents()
.find('head')
.append('<link type="text/css" rel="stylesheet" href="/include/outline.css" media="all" />');
});
</script>
var $head = $("#IFrame").contents().find("head");
var url = "Styles/styles.css";
$head.append($("<link/>", { rel: "stylesheet", href: url, type: "text/css" } ));
or
$('#IFrame').contents().find('#div1').css({
color: 'purple'
});