<progress> Object not Displaying in HTA (with IE11 Install) - html

Pretty basic question, can someone tell me why the example code for the progress bar element would work fine in all three browsers (most importantly IE), but just doesn't appear in an HTA? Am I going to need to find a different way to inject a progress bar?
<html>
<head><title>Generic Title</title>
<HTA:APPLICATION
ID="planner"
APPLICATIONNAME="Progress Bar Test"
SCROLL="no"
SINGLEINSTANCE="yes"
WINDOWSTATE="auto"
CAPTION="yes"
BORDER="thin"
BORDERSTYLE="raised"
>
</head>
<body>
<progress value="22" max="100"></progress>
</body>
</html>

Well it wasn't an IE8 compatibility, but you did help me answer it since I didn't realize IE9's HTML5 support is pretty terrible as well. I updated to IE=11 instead and it seems to work fine now.
Thanks!

Related

Stripe Checkout Button Too Small on Mobile

I feel like I must be missing something incredibly simple. Whenever I attempt to implement Stripe's Checkout feature on a mobile site, the payment button appears very, very small.
I stripped everything away that might be causing styling issues and then just started using their basic embedded form just to see and I still get this problem where it just doesn't appear optimized for a mobile format.
What am I missing here?
<html>
<form id="buy" action="backend/create_subscription.php" method="post">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_SOMEKEYHERE"
data-amount="2000"
data-name="Widget"
data-description="Some widget"
data-image="/img/marketplace.png"
data-locale="auto"
data-shipping-address="true"
data-label="Option 1"
data-panel-label="Subscribe"
data-bitcoin="false">
</script>
</form>
</html>
Image of the tiny button on mobile
This isn't a button issue, it's a scaling issue. You might want to try this in your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
That should (probably?) help with scaling. You could also do a Custom integration and that will allow you to use whatever button you want to trigger it.

Why does Chrome Developer Tool add elements not in the file?

When I have a simple HTML markup like this:
<!DOCTYPE html>
<html>
<head>
<title>lawl</title>
</head>
<body>
</body>
</html>
When viewing the elements of the document, in the Chrome Deceloper Tool(F12) it looks likes this:
<!DOCTYPE html>
<html>
<head>
<title>lawl</title>
<style type="text/css"></style> <-- what the?
</head>
<body>
</body>
</html>
So, my question goes: Where does the style tag come from? What added it, and why?
Hope you guys can clear this up for us, it's been quite the subject the last 10 minutes in class ;-). Also worth mentioning; a class got added to a empty div in another document when the teacher tried it.
Edited title.
Chrome plugins can get access to your DOM, and so does the development tools. In this particular case, I think the development tools is the one to blame.
The empty style tag is probably a placeholder for injected CSS.
If you open the source code (view-source:www.example.com), you will see that your DOM is perfectly fine.
99:1 that the <style> element is a stylesheet injected by your AdBlock (or similar) extension.

HTML Comment after </html>

Is this safe for most modern browsers or will it turn into a huge abomination?
eg:
<html>
<head>
<title>Please work</title>
</head>
<body>
My Awesome Body
</body>
</html>
<!-- Generated in 1.337 seconds -->
My guess is that, as long as you keep the DOCTYPE declaration at the very top of the page, you shouldn't have any issue with placing comments anywhere you want.
Although, it is best to always try for different browsers.
Try to check it with a HTML validator
Either check it with a validator or run your code personally through all the available web browsers, always the best way to go about that!
However, you should be fine as long as you avoid putting code above the "<!DOCTYPE>" line
it will work but Im not sure it is valid html.
You can run an html code without the <html> tag at all, the browsers will still accept it.
But its not good practice. try keep your html code valid

HTML5 date input width

So i am having an issue trying to force a size on a date input. Has anyone else had this issue or know how to get around it?
<input style="width:50px;" type="date" value="">
It is pretty simple, the width only changes the textarea, the actual control does not change, it is fixed at about 125 px width or so.
I have also tried width="" and max-width in the css, neither work.
With chrome 45, I just set the font-size. It proportionately changed the text and the control handles. Not sure that was the effect you were looking for(?).
<input style="font-size: 3rem" type="date" id="Date">
An <input type=date> element is supposed to be implemented in a browser-dependent manner that is suitable for the environment where the browser is running. So it is supposed to be under the browser’s control, not an author’s. This is one reason why many people are skeptical about the idea.
Setting a width for the control is really a shot in the dark. On my Chrome (25beta on Win 7), your CSS code “works” in the sense of truncating the widget to the given width. It still works, but it looks very odd: in the widget, the letter “v” and part of some other letter is visible. They are really the notation “vvvv-kk-pp” (localized notation for “yyyy-mm-dd”), which I can see in the widget in the absence of any width setting.
The conclusion is: by using <input type=date>, you accept whatever browser-dependent widgets browsers might use, and an attempt to control e.g. in its size may very well mess things up,
<input type="date" name="tanggal" style="width:231px">
Hope this works!
It doesn't change anything except the width.
Since most browsers aren't up to speed with html5 yet. I would just use the date picker with jquery.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
I've used it plenty and it works a treat. Makes more sense to present the calendar on click as well imo.
Here's the link as well: http://jqueryui.com/datepicker/

weird issue with html: markup is correct but dev tools show <title> moving to <body>

I've got this weird issue going on. I'm using Codeigniter 3.0-dev and Smarty 3.1.4 in the backend, but I don't think it's relevant.
I have this really simple html:
<!DOCTYPE HTML>
<html>
<head>
<title>some page</title>
</head>
<body>
asd
</body>
</html>
now. when I view the source of this page, on any browser (tried Opera 10.52, Firefox 7.0.1, Chrome 14 and 15, IE9) the markup is exactly like above. now, when I use firebug or chrome's dev tools it moves the title tag in the <body>, and if I have meta or anything else in the <head>, it moves those items in the <body> aswell. firefox's firebug shows me this:
<html>
<head></head>
<body>
<title>test</title>
asd
</body>
</html>
why does this happen? any ideas, at all?
Elements that appear to be in head in the mark-up, can end up inside body in the DOM, if the parser sees something before the moved elements that is only permissible in the body of HTML. For example, a double BOM (byte-order-mark) at the start of the file may not show up in View Source, but will cause the parser to think that it has entered the html body section, and all the head elements in the mark-up will end up in the body in the DOM.
What Alohci said, plus both Firebug and the Chrome debugger often move things around to suit themselves. The source then looks wrong when viewed in those debuggers.