I have a simple AngularJS (v1.3.0-rc.1) page (see below) from the book, Learning AngularJS for .NET Developers (Packt Publishing) page 13, that works in Chrome, but fails to pickup the <span title="{{color}}" style="background-color:{{color}};"> </span> correctly in IE11. The F12 option in IE shows the style is not being picked up, <span title="magenta"> </span>. What can the problem be in IE11?
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<title>Chapter 1 Example - AngularJS</title>
<script src="Scripts/angular.js"></script>
</head>
<body>
<h1>Introduction</h1>
<label>My name:</label>
<input type="text" placeholder="Please enter name" ng-model="name" />
<br />
<label>My favorite color:</label>
<select ng-model="color">
<option>Please select</option>
<option>red</option>
<option>yellow</option>
<option>magenta</option>
</select>
<h3 ng-show="name">Hello! My name is {{name}}.</h3>
<h3 ng-show="color">My favorite color is <span title="{{color}}" style="background-color:{{color}};"> </span></h3>
</body>
</html>
This is probably failing because the browser is attempting to apply styles before AngularJS has gotten ahold of the string and replaced {{color}} with whatever value is being set.
Angular offers some angular-specific attributes to handle this discrepancy (ng-style, ng-href, etc).
Try replacing that span with:
<span title="{{color}}" ng-style="{'background-color':color}"> </span>
I had to use ng-attr-style.
<div ng-attr-style="width: {{value}}%"></div>
Here is a github discussion about this issue.
Here is a stackoverflow question which has more solutions.
Related
I'm trying to use the jquery css stylesheet, but I can't seem to get it to format anything at all. I'm using the live preview extension in VSCode, and the css is from the jquery website.
<!DOCTYPE html>
<html>
<head>
<title>Physics Simulator App</title>
<link rel="stylesheet" href="css\jquery.mobile-1.4.5.min.css">
<script src="scripts\jquery-3.5.1.min.js"> </script>
<script src="scripts\jquery.mobile-1.4.5.min.js"> </script>
<script type='text/javascript' src='scripts\Week 2 homework.js'> </script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div data-role="page">
<div data-role="navbar">
<ul>
<li> Information </li>
<li> Interface </li>
</ul>
</div>
<div data-role="header">Binary Operators Demo</div>
<div data-role="content">
<label for="input">A</label>
<input type="checkbox" name="inputA" id="inputA">
<br />
<label for="input">B</label>
<input type="checkbox" name="inputB" id="inputB">
<br />
<button onclick="AND();">AND</button>
<button onclick="OR();">OR</button>
<button onclick="NOT();">NOT</button>
<button onclick="XOR();">XOR</button>
</div>
<table id="data">
<tr>
<td>Result: </td>
<td id="resultA"></td>
</tr>
</table>
<div data-role="footer">
<small>binary operations demo app</small>
</div>
</div>
</body>
</html>
I don't think I'm missing anything in terms of brackets, and the file paths work for my own css files. I've tried adding 'data-theme="a"' to my page bracket, but nada. I just get this.
result
Is it a version issue or?
Friend, I may have misunderstood you for not mastering English very well. But as I understand it, your problem is with jquery.mobile.css?
Try using the CDN. I copied your code and replaced the with the CDN (I didn't find this Week 2 homework.js).
Replace the with the CDN and do this test:
Insert this code block:
<div class = "ui-grid-d">
<div class = "ui-block-a">
button <br>
<span> any info </span>
</div>
</div>
It uses the style of jquery.mobile.css, if it works the problem could be in your import of the files.
Two tips, avoid spaces in the file names, (Week 2, it could be Week_2_homework), and in the <label for = ""> do not point "input", point the name you gave to the input or the id.
If I was wrong about your problem, answer that I try to help you.
Reggards
hello i have a web app that works fine on chrome but on firefox it does not display my checkbox, inputs, text area etc...
Even if I have a page that only have this:
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="MSTHEMECOMPATIBLE" content="no">
<title>Checkbox Test</title> </head> <body>
<input type="checkbox">
<input type="radio">
<input type="text">
<input type="submit">
<input type="button">
<input type="file"> </body> </html>
does not show! BUT with the same browser i went to a website hosted elsewhere and this very same code works, when i run it locally it works... please help me!
Again with the same code, When using chrome it works.
im hosted on Azure .... does it makes a difference?
why would my hosted page don't work!!!
Checkboxes and radio buttons are not displayed on Firefox when
<meta http-equiv="MSTHEMECOMPATIBLE" content="no"> is specified.
I know this question has been answered a million times over, over 2 decades or so however, I have legacy code (by that I mean old code that has been around for decades written in classic asp) and it uses a vbscript onload function and it works fine. However when I try to replicate (cut down version) myself it does not work can somebody direct me to the official answer. My code is in the same folder as the legacy code. I have also modified the legacy code and it still works so it cannot be caching.
I tried and all give me an error:
startup
startup;
startup()
startup();
vbscript:startup()
vbscript:startup();
I tried also, but no error but no result
vbscript::startup()
vbscript::startup();
My code:
<html>
<head>
<title>TEST</title>
<script language="vbscript">
Sub startup()
f1.browser.disabled = True
End Sub
</script>
</head>
<body onLoad="vbscript::startup()">
<form name="f1">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and earlier).</p>
</body>
</html>
If I change it to JavaScript it does work as everyone else seems to suggest however WHY DOES MY LEGACY CODE WORK!!!
Without submitting the hole page can someone suggest something.
Recently I have solved very similar problem and found on this reliable web site:
Specifying legacy document modes
following solution: using x-ua-compatible header.
<html>
<head>
<!-- Use Internet Explorer 9 Standards mode -->
<meta http-equiv="x-ua-compatible" content="IE=9">
<title>My webpage</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html>
I try put meta in myhtml code
for example I want do it for my search engine with offical google code:
<div itemscope itemtype="http://schema.org/WebSite">
<meta itemprop="url" content="https://www.example.com/"/>
<form itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
<meta itemprop="target" content="https://query.example.com/search?q={search_term_string}"/>
<input itemprop="query-input" type="text" name="search_term_string" required/>
<input type="submit"/>
</form>
</div>
THis is my problem.
The local search engine in my website use root url...
for example http://example.com/obama
but the code done it something like this when I submit it:
http://example.com/?search_term_string=obama
how can remove '?search_term_string=' without bad effect on the code?
In a web application, we don't want to use JSP files, we want to use only HTML files. Each view is a template.
I'm looking for a way to setup spring, spring security to use directly login.html file and if the user authentificates correctly the generic layout (top level, left level, right level and center level and south level) will be displayed.
What you are looking for is a natural templating solution where the templates are built directly in HTML and CSS with just some special atributes in the tags, but without the need for a set of XML tag libraries.
One solution that allows this is the Thymeleaf templating technology - Comparison of a Thymeleaf template with a JSP in a Spring application
this is how a template looks like:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Spring MVC view layer: Thymeleaf vs. JSP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all"
href="../../css/thvsjsp.css" th:href="#{/css/thvsjsp.css}"/>
</head>
<body>
<h2>This is a Thymeleaf template</h2>
<form action="#" th:object="${subscription}" th:action="#{/subscribeth}">
<fieldset>
<div>
<label for="email" th:text="#{subscription.email}">Email: </label>
<input type="text" th:field="*{email}" />
</div>
<div>
<label th:text="#{subscription.type}">Type: </label>
<ul>
<li th:each="type : ${allTypes}">
<input type="radio" th:field="*{subscriptionType}" th:value="${type}" />
<label th:for="${#ids.prev('subscriptionType')}"
th:text="#{'subscriptionType.'+${type}}">First type</label>
</li>
<li th:remove="all"><input type="radio" /> <label>Second Type</label></li>
</ul>
</div>
<div class="submit">
<button type="submit" name="save" th:text="#{subscription.submit}">Subscribe me!</button>
</div>
</fieldset>
</form>
</body>
</html>