I am having problem embedding css styling into my Print Preview page.
This is how my index.html looks:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My App</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/styles.css">
</head>
<body>
<div id="app" style="position: absolute;
height: 100%;
width: 100%;
left: 0%;
top: 0%;">
</div>
<script type="text/javascript" src="/bundle.js"></script>
</body>
</html>
The styles works fine here on index.html but not here when I want to create a new Page for Printing:
alternativePrint(resultId: string){ // Assuming that resultId is unique.
var printWindow = window.open('', 'PRINT', 'height=800,width=1240');
printWindow.document.write('<html><head><title>' + document.title + '</title>');
printWindow.document.write('<link rel="stylesheet" href="/css/styles.css">');
printWindow.document.write('</head><body >');
printWindow.document.write(document.getElementById(resultId).innerHTML);
printWindow.document.write('</body></html>');
printWindow.document.close(); // necessary for IE >= 10
printWindow.focus(); // necessary for IE >= 10*/
printWindow.print();
printWindow.close();
return true;
}
call(tel:string){
window.open('tel:'+tel);
}
Print Preview showing blank unless I remove this part:
printWindow.document.write('<link rel="stylesheet" href="/css/styles.css">');
I also tried to give the href as href="http://localhost:3000/css/styles.css" which I can access the css code when i type in url.
update:
something like this also works fine:
printWindow.document.write('<style>h1{color:red}</style>');
I guess you should change the link to:
<link rel="stylesheet" type="text/css" href="./css/styles.css">
with the ".", or:
<link rel="stylesheet" type="text/css" href="css/styles.css">
without the "/".
Related
I have my SVG embetted in HTML
<object onclick='showStreet()' id="svg-object" data="svg/hamburg.svg" type="image/svg+xml" style="width: 300px"></object>
I tried with JS and ended up with jQuery .ready to be sure, I load svg before executing JS on it. Also, I put my script in the beginning of the page, so it "loads" before svg does. But nothing helps ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Zimmerangebote - 2live 2gether</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--FÜR SVG-->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js#3.0/dist/svg.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
/*GOOGLE FONT*/
#import url('https://fonts.googleapis.com/css2?family=Oswald:wght#200;300;400;500&display=swap');
</style>
<script type="text/javascript">
$('#svg-object').ready(function(){
var street = $('path').get();
console.log(street);
});
function showStreet() {
swal("Angebot-ID: 8426 PLZ: 20146 teilmöbliertes Zimmer, 23 m2 Frei ab: 01.01.2020 Nebenkosten: 40 Euro");
}
</script>
</head>
console returns the following, no matter what I select: path , class or id.
I recently discovered that my upload for an already existing php, Javascript, jQuery, bootstrap application stopped working. I have been trying to resolve this issue for over a week now. On the javascript console I am getting this error
: main.js:604 Uncaught TypeError: $(...).clipresize is not a function. Please any assistance will be of great assistance. I was thinking that the many references to various Jquery files could be causing this error or is it that all browsers have been recently upgraded not to support some snippets being referenced. I am confused.
The application codes are below:
add.php
<!DOCTYPE html>
<html lang="en" class="no-js">
<!--<![endif]--><!-- start: HEAD -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>upload</title>
<!-- start: META -->
<meta charset="utf-8">
<!--[if IE]><meta http-equiv='X-UA-Compatible'
content="IE=edge,IE=9,IE=8,chrome=1" /><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-
scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="" name="description">
<meta content="" name="author">
<!-- end: META -->
<!-- start: MAIN CSS -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<link rel="stylesheet" href="../css/fonts/style.css">
<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="../css/main-responsive.css">
<!--<link rel="stylesheet" href="../css/all.css">-->
<link rel="stylesheet" href="../css/bootstrap-colorpalette.css">
<link rel="stylesheet" href="../css/perfect-scrollbar.css">
<link rel="stylesheet" href="../css/theme_light.css" type="text/css"
id="skin_color">
<link rel="stylesheet" href="../css/print.css" type="text/css"
media="print">
<link href="../css/bootstrap-modal-bs3patch.css" rel="stylesheet"
type="text/css">
<link href="../css/bootstrap-modal.css" rel="stylesheet" type="text/css">
<link href="../css/validate.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../css/datepicker.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-
16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous">
</script>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-hover-dropdown.min.js"></script>
<script src="../js/jquery.blockUI.js"></script>
<script src="../js/jquery.icheck.min.js"></script>
<script src="../js/jquery.mousewheel.js"></script>
<script src="../js/perfect-scrollbar.js"></script>
<script src="../js/less-1.5.0.min.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script src="../js/bootstrap-colorpalette.js"></script>
<script src="../js/main.js"></script>
<script src="../js/index.js"></script>
<script src="../js/ajax.js"></script>
<script src="../js/bootstrap-modal.js"></script>
<script src="../js/bootstrap-modalmanager.js"></script>
<script src="../js/validations.js"></script>
<!-- end: MAIN JAVASCRIPTS -->
<!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script src="../js/jquery.inputlimiter.1.3.1.min.js"></script>
<script src="../js/jquery.autosize.min.js"></script>
<script src="../js/select2.min.js"></script>
<script src="../js/jquery.maskedinput.js"></script>
<script src="../js/jquery.maskMoney.js"></script>
<script src="../js/form-elements.js"></script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script>
jQuery(document).ready(function() {
Main.init();
FormElements.init();
});
</script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script>
jQuery(document).ready(function() {
Main.init();
UIModals.init();
});
</script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script>
jQuery(document).ready(function() {
Main.init();
Index.init();
});
</script>
.......
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="jquery.form.min.js" type="text/javascript"></script>
<script src="materialize.js" type="text/javascript"></script>
<link rel="stylesheet" href="materialize.css">
.................
<script type="text/javascript">
$(document).ready(function() {
$('#add_app').submit(function(e) {
var value = manage_form();
if(value==false)
{
return false;
}else{
e.preventDefault();
$('#loader-icon').show();
$(this).ajaxSubmit({
//target: '#targetLayer',
beforeSubmit: function() {
$("#progress-bar").width('0%');
},
uploadProgress: function (event, position, total,
percentComplete){
$("#progress-bar").width(percentComplete + '%');
$("#progress-bar").html('<div id="progress-status">' +
percentComplete +' %</div>')
},
success:function (data){
$('#modal1').openModal();
$('#loader-icon').hide();
$("#progress-bar").width('0%');
var res = data.split("~");
$('#mode7').html('<a href="add.php?flag=edit&id='+res[1]+'"
class="btn light-green modal-action modal-close waves-effect waves-
green btn-flat">Okay</a>');
document.getElementById('row_id').value = res[1];
document.getElementById('row1_id').value = res[1];
document.getElementById('package').value = res[0];
//document.getElementById('process_id').html = data;
//$('#mode7').html('<a href="add.php?
flag=edit&id='+res[1]+'" class="btn light-green modal-action modal-close
waves-effect waves-green btn-flat">Okay</a>');
},
resetForm: true
});
return false;
}
});
});
and the "main.js" script that throws the error is below:
//Window Resize Function
var runWIndowResize = function(func, threshold, execAsap) {
//wait until the user is done resizing the window, then execute
$(window).clipresize(function() {
runElementsPosition();
});
};
I finally was able to get my progress bar working and all the assets uploaded to the required folder by removing a mailing library called Php Mailer in my php submit script. The Php mailer library was failing in my application and I discovered that it was throwing up a blank or null output which was causing my application to break by not responding to the submit button. And broken libraries at times are the reason for which many formerly functioning web applications are said to stop functioning. The solution many times will be to update the required libraries or to remove them and find a way to tweak the application to work without those libraries. Thanks
I am trying to use jquery-confirm. Please see the code and the result following. The result doesn't same with we saw on website. anything wrong?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="../jquery-confirm-master/dist/jquery-confirm.min.css">
<script src="../jquery-confirm-master/dist/jquery-confirm.min.js"></script>
</head>
<body>
<script>
$.alert({
width :'auto',
title: 'Alert!',
content: 'Simple alert!'
});
</script>
</body>
</html>
It is working fine but not displaying as expected because you need disable bootstrap theme, see following code:
<script>
$.alert({
width :'auto',
title: 'Alert!',
content: 'Simple alert!',
useBootstrap: false // Key line
});
</script>
But if you want to use bootstrap theme you should include following CDN links in your document.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.0.3/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.0.3/jquery-confirm.min.js"></script>
I disabled bootstrap and used pixels for width
boxWidth: '30%',
useBootstrap: false,
Seems like you need to add the following, or just try to add bootstrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.0.3/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.0.3/jquery-confirm.min.js"></script>
I've gone through the other solutions to this question and none seem to work. I still think there is a problem with the scripts. Here is my :
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
<!-- JQuery -->
<script src="js/jquery-1.11.3.js"></script>
<!-- BS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!-- Fancybox -->
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src-"fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
<script>
$(document).ready(function() {
if(location.hash) {
$(location.hash).click();
}
$(".iframe").fancybox();
});
</script>
</head>
And body:
<a class="iframe" href="https://player.vimeo.com/video/151002965">
<img src="https://vimeo.com/151002965">
</a>
it have some type mistake
<script type="text/javascript" src-"fancybox/jquery.fancybox-1.3.4.pack.js"></script>
please correct it as,
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
try once again it may help you
Im trying to make a jQuery script that makes a nav bar appear after scrolling down the page 800px.
This is the file:
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('#fixedBar').fadeIn();
} else {
$('#fixedBar').fadeOut();
}
});
Here's the CSS:
#fixedBar {
display: none;
position: fixed;
background-color: rgba(255,255,255,.9);
top: 0;
left: 0;
width: 100%;
height: 80px;
}
Im not too sure why this jQuery isn't doing anything. All help is appreciated.
Here is the HTML in use:
<div id="fixedBar">
<h1>Company</h1>
</div>
Heres the head
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Links to JS/CSS/Fonts -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../css/style.css" media="screen"/>
<link rel="stylesheet" href="../css/jquery.maximage.css" type="text/css" media="screen" title="CSS" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/navView.css" />
<link rel="icon" type="image/ico" href="../img/favicon.ico"/>
<title>George | New Website</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../js/navBar.js" type="text/javascript"></script>
<script src="../js/jquery.cycle.all.js" type="text/javascript"></script>
<script src="../js/jquery.maximage.min.js" type="text/javascript"></script>
<script src="../js/modernizr.custom.25376.js"></script>
</head>
Just checked the js folder and it contains the file navBar.js which has the jQuery code.
It's working fine for me: http://jsfiddle.net/8kzdx9wz/
<div id="fixedBar">nav bar</div>
Is your HTML written correctly and do you have enough content to scroll down to 800px on the page?