For test purposes, i have added the url http://google.com as the maintenance URL in heroku. When I turn the maintenance mode on and try to access my page, I get an ugly response instead of being redirected to google. Anyone else has that problem or do I not get something?
btw: the redirection to the error URL works just fine.
This is what I get as a response:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
html, body, iframe { margin: 0; padding: 0; height: 100%; }
iframe { display: block; width: 100%; border: none; }
</style>
<title>Offline for Maintenance</title></head>
</head>
<body>
<iframe src="http://google.com">
<p>Application Error</p>
</iframe>
</body>
</html>
This is the expected behavior, according to the Heroku support. They do not perform a redirect, but just include the page as an iframe into their own HTML file.
Too bad, that does not work so well if you host an API on Heroku that returns the responses in JSON or so.
Related
The svg rect works well in chrome, but not in firefox. What is the problem? Also, is there any special rules in using svg in firefox?
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style>
rect {
width: 300px;
height: 100px;
fill: green
}
</style>
</head>
<body>
<svg width="400px" height="110px">
<rect/>
</svg>
</body>
</html>
I have read this highly useful post which unfortunately did not resolve my question: How may I use code in the HTA to scale down (shrink) the entire contents of the window, text and boxes both, in an HTA file? I'm using IE11 (or, it uses me), and I need to Ctrl-Scroll to downsize the window content every time I open it.
Now, I added meta http-equiv="x-ua-compatible" content="ie=edge" as suggested in comments, but now that breaks the placement of the file at position 1920,0 . Is there a solution which will allow resizing AND allow me to place the window where I need it?
<html><title>A Form </title>
<meta http-equiv="x-ua-compatible" content="ie=edge" />.
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#365ebf', gradientType='0');">
<head>
<script language="JavaScript">window.resizeTo(320,1080);</script>
<style type="text/css">
body {
transform: scale(0.9);
height: 90%;
background-color: #EFEFDC;
font-family: Arial Narrow;
font-size: 12px;
color: #343421;
margin: 2px;
filter: none !important;
}
b {
font-size: 16px;
padding: 1en;
}
</style>
<SCRIPT Language="VBScript">
Sub Window_Onload
window.moveTo 1920, 0
End Sub
</SCRIPT>
I reread your question and your comments and I think I understand your requirements better. To programmatically increase the zoom level of all your controls use something similar to:
<script>
document.body.style.zoom = "200%"
</script>
Feel free to add this code anywhere, I tried it at the end of the script body and it worked for me:
<html>
<head>
<title>A Form</title>
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<style>
html {
height: 100%;
}
body {
-ms-zoom: 0.50;
background-image: linear-gradient(135deg, #C0CFE2, #365ebf);
}
</style>
</head>
<body>
What is your name?<p>
<input id="name" value="Luke"></input><p>
<input type="button" value="CLICK ME" onclick="alert('Obi-Wan says: Use the Force, ' + document.getElementById('name').value + '.')"><p>
</body>
<script>
window.moveTo(100, 300);
window.resizeTo(500, 300);
</script>
<script>
document.body.style.zoom = "200%"
</script>
</html>
Using wkhtmltopdf 0.11.0_rc1 (weirdly reporting itself as 0.10.0 rc2) on MacOSX.
This input HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<style type="text/css">
#page{
size: landscape;
margin: 10mm;
}
div.page {
height: 180mm;
width: 274mm;
overflow: hidden;
border: 1px solid #ddd;
page-break-inside: avoid;
page-break-after: always;
}
</style>
</head>
<body>
<div class="page">Page 1</div>
<div class="page">Page 2</div>
<div class="page">Page 3</div>
</body>
<html>
being processed like so:
wkhtmltopdf --orientation landscape input.html output.pdf
results in no page breaks:
What am I doing wrong?
This might just be a problem of this specific version of wkhtmltopdf.
The most current version wkhtmltopdf 0.12.1 (with patched qt) does respect the page breaks.
I'm not getting rounded corners in IE8 mode within IE11.
I've tried both relative and absolute paths, and neither work.
The PIE.htc file is in the same folder as the html file. I'm running on Jetty and don't have a .htaccess file. The PIE.htc file can be loaded without any problem using http://localhost:8383/various_forms2_less/PIE.htc
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
span.command_link_buttoned {
background-color: #96AFCF;
display: block;
width: 130px;
height:30px;
position:relative;
border-radius: 5px;
behavior: url(PIE.htc);
/*behavior: url(http://localhost:8383/various_forms2_less/PIE.htc);*/
}
</style>
</head>
<body>
<span class="command_link_buttoned">
Button
</span>
</body>
</html>
Hi I am using Dreamweaver and trying to get an image or button to change after it is clicked on. Essentially, I want an image to say follow before it is clicked on and say unfollow after it is clicked on like happens on Twitter, Quora etc.
Thanks in advance!
#Spencer: Are you using a JavaScript framework (e.g. jQuery or mootools)? You could add or replace a class for the button when it is clicked so that it'll have a different style to the button in its default state.
Update: Here's some sample code to get you started (see it in action here: http://jsfiddle.net/5HqFw/) --
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>questions/4527859</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#button').click(function() {
$(this).toggleClass("clicked");
});
});
</script>
<style type="text/css">
#button {
border: 1px solid green;
display: block;
padding: 5px;
text-align: center;
width: 100px;
}
.default {
background-color: white;
color: green;
}
.clicked {
background-color: green;
color: white;
}
</style>
</head>
<body>
<p>Button!</p>
</body>
</html>