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 = "";
Related
I am programming a web app where clicking on a bit of text should toggle the line-through css style. This works on Firefox, but the click event seems not to fire in Chrome once the style has been applied.
HTML:
<script>
$(document).ready({
$(".liner").click(toggleStrikethrough);
});
<div class="liner">
Hello World
</div>
JS (note that I've used jQuery because that's what I'm using in the app, but a vanilla solution would be acceptable as well):
function toggleStrikethrough()
{
if($(this).css("text-decoration") != "line-through")
$(this).css("text-decoration","line-through");
else
$(this).css("text-decoration","");
}
JS Fiddle
In CSS3, text-decoration has multiple parts. In your particular case, the read $(this).css("text-decoration") returns line-through solid rgb(0, 0, 0).
Instead, try changing the if condition to $(this).css("text-decoration-line") to get only the line style part of the text decoration.
I tried to solve your problem using different way. I think it was succeeded. you can use below mention code to get same output that you want.
$('div').bind('click',function(){
$(this).toggleClass('liner');
});
.liner{
text-decoration:line-through;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Exzmple</title>
<style>
</style>
</head>
<body>
<div class="liner">Hello World</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
I used bind , toggleClass methods for this. As a result js code was simple and it could run efficiently.
Here is my Jquery code.Please have a look through it and do help me?
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$("#rec").click(function() {
$("#tab1").toggle();
});
</script>
<input type="button" class="button" id="rec" value="Sample"/>
<div id="tab1">
Hello this is a sample jquery toggling function.
</div>
Just wrap your Jquery code inside $(document).ready(function(){}) as shown below :-
<script type="text/javascript">
$(document).ready(function(){
$("#rec").click(function(event) {
event.preventDefault();
$("#tab1").toggle();
});
});
</script>
Read More on $(document).ready() here.
Working Demo
It seems that there is an error while loading JQuery try this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Use $(document).ready(function(){}, to execute the js code when then document will be loaded or put your scripts just before the </body> tag.
I ll take a guess here. (I'm feeling lucky!) (update:seems i wasn't lucky but read this anyway it's usefull)
Your code does not work because you say "do something when the html element with id="rec" is clicked" and "do something to the html element with id="tab1""
My guess is, you have more than one html element with id="rec" and/or more than one html element with id="tab1" in your code.
id value of html elements must be unique across a webpage! If there are more than one html elements with the same id then the jquery selector doesn't know when to fire, and also browsers behavior can be unexpected. This may be the cause of internet explorer nagging.
You need to add compatibility meta just after <head> tag:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
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>
Consider the code given at the end, which makes use of jQuery Mobile to enhance buttons.
The first button (original button) appears when page loads:
The second button (inserted button) is inserted by clicking the yellow box:
The problem here is, the inserted button cannot catch up the CSS styles. This scenario is very common (and not specific to jQuery Mobile) when we work with AJAX, but I have never able to find a solution or workaround for this problem.
What can I do to enhance the inserted button with CSS styles?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript">
function insert(){
$("#result").html('<input type="button" value="Inserted button"/>');
}
</script>
</head>
<body>
<form>
<p class="ui-body-e ui-corner-all" style="padding:5px" onclick="insert()">Click here to insert the button</p>
<input type="button" value="Original button" />
<div id="result">
Button not inserted yet
</div>
</form>
</body>
</html>
After you insert the button's html:
$("#result").html('<input type="button" value="Inserted button"/>');
You can call .trigger('create') on its container to invoke the jQuery-mobile renderer on its contents, so your line would look like this:
$("#result").html('<input type="button" value="Inserted button"/>').trigger('create');
jQuery mobile adds extra elements/classes to your objects. This happens onpage load.
When you insert extra buttons or other objects (list,...) the style needs to be applied again.
in this case you use after you inserted the button $(_selector_for_new_button_).button();
jQuery mobile applies the nice button style for you.
I am trying to attach a click event to a check box using JavaScript. Shown below is the HTML and JS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="hidden" name="caution_c" value="0">
<input type="checkbox" id="caution_c" name="caution_c" value="1" tabindex="120">
<script type="text/javascript">
var cb = document.getElementById('caution_c');
cb.onclick = function() {
alert(1);
}
</script>
</body>
</html>
The problem is that in IE, the click event does not fire. I have narrowed down the problem location. The issue is that there is a hidden input just before the check box and both these elements have the same name. I'm not sure why this is causing a problem(after all, I'm using getElementById and the hidden element does not even have an id).
Is there a valid reason for this type of behavior (IE only. Works fine in Firefox...as always :( )? Also, is there a good workaround (I could just do document.getElementsByName('caution_c')[1] but I don't want to...)
Internet Explorer gets confused over name and id - it is highly recommended to treat these two attributes as if they were the same.
You can fix it either by 1) ensure that there are no id/name conflicts in your document, or 2) override IE's native getElementById-method.
Read more about it here.
Try using a different event such as onchange or onfocus to see if that solves it. Also I don't think onclick will be fired if a user tabs onto the checkbox, which may or not be how you intend it to work.
I agree, IE is poor in understanding things at html level.
I would rather add the link to button rather than using anchor elements, as IE is having trouble at anchor level with document.getElementById(). Try same at button and will work for other users.