I'm implementing a length counter on textareas for a website (twitter style). I'm using the code found here http://www.codefromjames.com/wordpress/?p=15 but seems not to work in IE7.
I've traced the issue to the check of the attribute "maxlength" in an element. It expects it to be null if the attribute is not found, but IE7 returns a number (which I guess is the maximum length allowed by the browser or by the HTML standard, I don't know).
Here's an example you can try:
<!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" xml:lang="es" lang="es">
<head>
</head>
<body>
<input id="test"></input>
</body>
<script type="text/javascript">
var element = document.getElementById("test");
alert(element.getAttribute("maxlength"));
</script>
</html>
Try executing this on IE7 and you'll find out it gives a number instead of null.
Exact version of IE7 is 7.0.5703.13
Should I consider this a IE7 bug or is it working as expected?
Cheers!
You can check element.attributes.maxLength.specified to find out whether maxLength is indeed user-specified.
var element = document.getElementById('test');
var maxLength, defaultLength = 100;
if (element.attributes.maxLength && element.attributes.maxLength.specified) {
maxLength = element.attributes.maxLength.nodeValue || defaultLength;
} else {
maxLength = defaultLength;
}
Related
On this site about javascript shorthands, by Sam Deering, a long-hand example is as follows (the site uses a before-and-after format):
var i=0;
while (i<9)
{
//do stuff
i++; //say
}
While I don't understand this, I do understand the short-hand version, which is:
var i=9;
while(i--)
{
//goes until i=0
}
I don't know about if i is the same in both loops, but assume that they both loop 9 times.
Because I would like to expand my limits and improve my programming skills, what does the while (i<9) mean, and how can I use it (with other numbers)?
In XML, e.g. XHTML, you must escape < properly as <.
In HTML it's not necessary to do so inside script elements because their contents are parsed in a special way, but XML does not do these nasty things.
For example, you can write index.xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Some document</title></head>
<body>
<script type="text/javascript">
var i=0;
while (i < 9) i++;
console.log(i); // 9
</script>
</body>
</html>
Most people don't want to XML-escape JavaScript operators in inline scripts, so they use CDATA sections:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Some document</title></head>
<body>
<script type="text/javascript">
<![CDATA[
var i=0;
while (i < 9) i++;
console.log(i); // 9
]]>
</script>
</body>
</html>
Your HTML file most probably has some encoding quirks. < corresponds to the less than symbol < in HTML entities. So really you can read that as while (i<9).
I'm looking for a workaround for a following problem:
When I try to use getBoundingClientRect() for a span with a border <span id="hello_id" style="border-bottom:dotted 1px">helo</span> when the document is in RTL mode I get invalid values.
The following code shows an example:
<!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" />
<script type="text/javascript">
function show_rectangle()
{
var el = document.getElementById('hello_id');
var rec = el.getBoundingClientRect();
alert('Left:' + rec.left + ' Right:' + rec.right);
}
setTimeout(show_rectangle,2000);
</script>
</head>
<body style="direction:rtl">
<p id='xxx' style="text-align:center"><span id="hello_id" style="border-bottom:dotted 1px">hello</span></p>
</body>
</html>
The alert is shown "Left:-621 Right:-593", in both IE6 and IE7
When I remove "direction:rtl" from Body's style or style attribute from the span I get reasonable positive values.
How can I workaround this issue: i.e. how can I create a span with border, in rtl document and have correct bounding rectange? Or maybe generate a border without this property?
The solution was to put one span inside other, give border style to internal one and measure an external:
<p id='xxx' style="text-align:center"><span id="hello_id" ><span style="border-bottom:dotted 1px">hello</span></span></p>
Than it works.
Initially I thought it was a CSS issue but I built a small sample to repro the issue.
The values: Value1, 2 and 3 are not displayed if you use IE8:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert("Thanks for visiting!");
var gridCommandBox = $('#GridCommands')[0];
if (gridCommandBox.options.length == 0) {
gridCommandBox.options.add(new Option("<Select Command>", ""));
var clipGroup = document.createElement("optgroup");
clipGroup.label = "Copy To Clipboard...";
clipGroup.appendChild(new Option("Value1", "Value1"));
clipGroup.appendChild(new Option("Value2", "Value2"));
clipGroup.appendChild(new Option("Value3", "Value3"));
gridCommandBox.appendChild(clipGroup);
}
});
</script>
</head>
<body>
<table>
<tr><td><select id="GridCommands"></select></td></tr>
</table>
</body>
</html>
Any ideas?
Thanks
Max
An Option object is the HTML DOM object that is associated with an tag in HTML. You are instantiating an Option object directly and trying to append this JavaScript object to another DOM element.
While this may work for some browsers, you should be using document.createElement('option') to create the options. If you use the new Option approach, you may also have to add history.go(0) afterwards to force the browser to refresh the select options.
I'am using the next line in a js script with FF and IE9. The BackgroundImage is set somewhere to
url("images/\\BalkLinks.png")
and later I like to change that image to one with shadow.
stbmkloon.childNodes[x].style.backgroundImage=stbmkloon.childNodes[x].style.backgroundImage.replace(".png","S.png");
In FF, IE8 this is going well but in IE9 the /\\ is changed into a slash forward, a strange character and "Bal" is dropped. Also ".png" is replaced by "S.png" what is correct.
Is there somebody who can tell me what i'm doing wrong ?
Gr
an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function PersoonOpVoorgrond (naam)
{
alert('before :'+document.getElementById(naam).style.backgroundImage);
document.getElementById(naam).style.backgroundImage=document.getElementById(naam).style.backgroundImage.replace(/.png/,"S.png");
alert('after :'+document.getElementById(naam).style.backgroundImage);
}
</SCRIPT>
</head>
<body>
<div id="Switch" onclick="PersoonOpVoorgrond('Switch');" style="background-image:url(images/\\BalkLinks.png); background-position:0% 0%; background-repeat: no-repeat; border:2px black solid; width:50px;">
Switch
</div>
</body>
</html>
You should use regular expressions in the replace function.
backgroundImage.replace(/.png/g,"S.png");
There is also one thing that is dangerous:
Not all browsers return the current value of a style property. For example chrome would return an empty string for "style.backgroundImage".
Chrome returns only values that are specified by JavaScript before.
All the other browsers operate just fine with this, but firefox says 'share is not a function'.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function share(){
var url = "http://www.facebook.com/sharer.php?u=http://google.com";
var win = window.open(url, "share", "status = 1, height = 500, width = 600, resizable = 0" );
var pollTimer = window.setInterval(function() {
if (win.closed) {
window.clearInterval(pollTimer);
window.location = "http://gmail.com";
}
}, 200);
}
</script>
</head>
<body>
<div id="sharebox">
<img id="share" src="img/share.png" onclick="share();" />
</div>
</body>
</html>
I found the problem. You are not allowed an object with the same id as a function name. I never knew that :s
Without more information this will be impossible to solve, but you may find that the javascript file this function is in had an error, so the parsing stops, then this function also wouldn't be parsed if it is after the part with an error.
Some browsers are more forgiving than others are on errors.
If you use JSLint (http://jslint.com/) to fix the errors that it reports, it may fix your problem.
Otherwise try to use the firebug extension to see where the error may be.