I have a radio button inside a content editable div. But when I click on the radio button nothing happens in Firefox and IE. But it works fine in Chrome.
What can I do to make this work in Firefox and IE?
The code is available at http://jsbin.com/uqexoy/2/edit and is simply:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div contentEditable="true"><input type="radio" />ere er er er re </div>
</body>
</html>
This was tested to work in IE8, IE9, Chrome and Firefox. It does work, albeit rather strangely so, also in Opera, where the input field (in our case a radio button) does change it's status to checked (tested with JavaScript alert(this.checked);), however it doesn't change it's appearance to reflect that. See for a possible workaround below.
The solution for the majority of the problematic browsers is to wrap non-editable contents in a span, like so:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div contentEditable="true">
<span contentEditable="false">
<input type="radio" />
</span>ere er er er re
</div>
</body>
</html>
As for the Opera part, the fact that it doesn't reflect changes to the radio button's selected state 'should' be possible to override by styling its two different states with CSS selectors input[type="radio"] and input[type="radio"]:checked and applying these two CSS rules only to Opera browsers. Opera seems to accept background-color property changes for such radio buttons, which doesn't make any difference in all other browsers I've tested in. This might be your way to apply Opera specific CSS rule to reflect changes to the checked state. Here's an example:
input[type="radio"]:checked {background-color:gray;}
Other browsers will simply ignore this CSS rule. Another acceptable Opera specific rule that can be applied is border, but I find that of limited to no value in our case.
You use the contentEditable property of the DOMElement, like so
<div onClick="this.contentEditable='true';"><input type="radio" />
This is test
</div>
Related
I am trying to build a simple webpage that replaces the contents of the <div id="body"> with something new based on the user clicking on a "link"
The following code does exactly what I expect in Chrome and Firefox, but does nothing (except turn the link to the visited color) in IE 10 or 11:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#activities").click(function(){
$("#body").load("test02.html");
});
});
</script>
</head>
<body>
<div id="header">
Activities
<!-- this stays the same -->
</div>
<div id="body">
<p>this is the content that arrives without needing prompting</p>
<!-- All content will be loaded here dynamically -->
</div>
<div id="footer">
<!-- this stays the same -->
</div>
</body>
</html>
This is the content of "test02.html":
<p>---</p>
<p>Hello world!</p>
<p>---</p>
I've checked the javascript security settings in IE and everything is set to "enable." I've also tried adding type="text/javascript" to the script tags.
Some amount of Googling has turned up the possible need to reinstall IE, which I have tried.
Anyone have an idea about how to get this working in IE?
The problem is that IE breaks itself in "compatibility" mode. The way in which it breaks itself in this case is failing to correctly look up your div id="body" element. I think that was observation error on my part, I think the real problem is addEventListener (because jQuery 2.x doesn't fall back to attachEvent anymore, since it doesn't support IE8 and earlier [or the "compatibility" modes that act like them]):
I can replicate the problem. The problem goes away if I tell IE not to break itself (e.g., not to use compatibility mode) by adding this to the top of the head element:
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
IE's default for intranet sites is to display them in "compatibility" mode.
At one point I wasn't at all sure that when in "compatibility" mode it didn't get confused about that element with the id "body". IE has a history of getting confused by things like that. So you might also consider the-body or similar, but I tested and didn't seem to need it.
Side note: You probably also want to add a return false or e.preventDefault() to your click handler, so it doesn't follow the # link (which will scroll back to the top of the page and add # to the address bar).
add meta tag below to your page
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
Do you mean <body> tag or <div id="body"> and do you ever try preventing default behavior of the link by using this below code :
$(document).ready(function(){
$("#activities").click(function( e ){
e.preventDefault(); //<---- add here
$("#body").load("test02.html");
});
});
I'am developing a web-application that allows to select parts of an html document and put some kind of annotation on it.
To get hold of the selected text I use window.getSelection() which works pretty fine in IE9, FF, and Safari.
However I run into trouble when using the same page on my IPad 2:
If I just select a word by tapping it for a sec, window.getSelection() returns the proper selection.
If I create a text range ( as discribed here http://blog.laptopmag.com/how-to-select-copy-and-paste-text-on-the-ipad ) always return "null".
I've already examined the window, document and related event objects - but without success...
Any help would be really appreciated!
Edit: Just a small example. Select a text and press the button. On Safari (PC) the function prints the selected value...
<html>
<body>
<script>
function a()
{
alert(window.getSelection());
}
</script>
Hello World! <input type="button" onclick="a();"
</body>
</html>
Okay finally I've solved the problem: As Tim assumed the click events causes to selection to collapse. I consider this as rather strange behavior as on regular Safari this does not happen.
However, the solution is not to use the click event. Instead of I'm using "vlick" provided by the jquery mobile.
Full working example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
Hello World! <input type="button" id="button1" />
<script>
function a()
{
alert(window.getSelection());
}
$("#button1").bind("vclick",a);
</script>
</body>
</html>
Is it possible to remove the annoying black border that IE 9 puts around submit buttons?
This only occurs when the form is in focus.
IE 9:
IE 9 http://olokoo.com/sandbox/ie.jpg
FireFox
Firefox http://olokoo.com/sandbox/firefox.jpg
You can use jQuery if you want, but adding the following to your CSS should fix it
input[type=submit] { border:none !important; }
//edit per your comment
Depending on if you want to use HTML5 or not, you need to make sure you've set up the DOCTYPE and meta tags correctly:
HTML5 setup:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
For HTML4 setup examples see: W3School
If you want to remove the border from the buttons with jQuery, something like this should work:
$(":button").css({border-width:"0px"});
I have a bug in IE8, but works in firefox, chrome and safari. Here's my HTML code
<!DOCTYPE html>
<html dir="ltr">
<head>
<style>
header {display:block; background-color:#333; color:#fff;height:30px;}
</style>
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="bug">
<header><h2>h2</h2></header>
</div>
<button type="button" onclick="$('#bug').html(' <header><h2>h2</h2></header>');">press</button>
<script type="text/javascript" language="javascript" src="jquery.tools.min.js"></script>
</body>
</html>
You can see the code in action here - http://evermight.com/jquerybug/index.html
In IE8, how come when I press the "press" button, the h2 with black background turns to white background instead of remaining as black background? When I remove the white space in between html(' and <header> of the button's onclick event handler, then the black bakground persists as expected.
Why does an empty space affect the CSS appearance of the header tag in IE8?
This isn't a jQuery bug -- its an IE combined with HTML5shiv bug. Or you could just call it an IE bug in general.
If you try your code, replacing
<header> .... </header>
with
<div class='header'> .... </div>
you'll find it works correctly, even with the leading space.
If you read the issues page on the html5shiv site this is a known bug (dynamically created HTML5 elements not styling).
You can also read this stackoverflow post for more information on what's going on and some workaround suggestions.
You need the innershiv.
Situation:-
I have created a RadioButton group. When a User selects a radio button depending upon his choice the content gets displayed and the other content is removed.
Problem:-
The page is working fine in all browsers except IE7. I need a solution that runs in IE7 also.
Code:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE7 Bug display:none</title>
<style>
#entireContent, #div1, #div2{
display:block;
}
</style>
<script type="text/javascript">
function displayDiv1(){
document.getElementById('div1').setAttribute('style','display:"');
document.getElementById('div2').setAttribute('style','display:none');
}
function displayDiv2(){
document.getElementById('div1').setAttribute('style','display:none');
document.getElementById('div2').setAttribute('style','display:"');
}
</script>
</head>
<body>
<div id="entireContent">
<input type="radio" name="group" value="t1" onclick="displayDiv1()">TEST 1<br>
<input type="radio" name="group" value="t2" onclick="displayDiv2()">TEST 2<br>
<div id="div1">TEST 1</div>
<div id="div2">TEST 2</div>
</div>
</body>
</html>
Resources Referred:-
http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm
I tried the approach provided in the resource, it didn't work.
Please help me to resolve this issue.
Thanks in Advance.
You can try this instead:
To Display:
document.getElementById('element_id').style.display = 'block';
To Hide:
document.getElementById('element_id').style.display = 'none';
That should work.
Though I agree you should access the property using .style.display I'd like to make a note of the proper way of altering attributes on elements.
document.getElementById('div2').setAttribute('style','display:"');
This will not emulate .style.display='' as it's not proper syntax for the attribute (css) and even if that part was okay, there is only one quote, so in that mindset you'd set the display attribute equal to the rest of the entire document.
The right way to unset an attribute is using the removeAttribute function, like this:
document.getElementById('div1').setAttribute('style','display:none');
document.getElementById('div2').removeAttribute('style');
try using
document.GetElementById('div1').style.display = "block";
document.GetElemebtById('div2').style.display = "none";
I tried this
getElementById("id").style.display = none
it will work fine in chrome but facing issue in IE 11 browser
I modified as below then it worked for both browser
getElementById("id").style.display = "";