I have the following javascript
function hide(id)
{
var ele = document.getElementById(id);
if ((ele.style.display == 'none') || (ele.style.display == '')) {
try{
ele.style.display = 'table-row';
}
catch (e)
{
ele.style.display='block';
}}
else {ele.style.display = 'none';}
}
which works in ie7, chrome, ff, but fails in ie8
I have to get it to work in ie8 even if it fails in chrome or ff.
I believe the issue is 'ele.style.display = 'table-row'
any ideas? thanks in advance
Not sure what you are experiencing as a failure in IE8, but you might change in your if this:
ele.style.display == ''
to this:
ele.style.display == undefined
Why don't you use:
function toggle(id) {
var el = document.getElementById(id);
el.style.display = (el.style.display == "none" || el.style.display == "") ? "block" : "none";
}
Related
I am working with a script that pops up an alert if the user is or isn't using IE.
Instead of this, I'd like to show or hide a div element in my page.
I have tried unsuccessfully here: http://fiddle.jshell.net/shhv1Lx3/2/
Working alert demo here: http://fiddle.jshell.net/shhv1Lx3/3/
function GetIEVersion() {
var sAgent = window.navigator.userAgent;
var Idx = sAgent.indexOf("MSIE");
// If IE, return version number.
if (Idx > 0)
return parseInt(sAgent.substring(Idx+ 5, sAgent.indexOf(".", Idx)));
// If IE 11 then look for Updated user agent string.
else if (!!navigator.userAgent.match(/Trident\/7\./))
return 11;
else
return 0; //It is not IE
}
var e = document.getElementById(ie);
var e2 = document.getElementById(chrome);
if (GetIEVersion() > 0)
alert("This is IE " + GetIEVersion());
e.style.display = 'block';
e2.style.display = 'none';
else
alert("This is not IE.");
e.style.display = 'none';
e2.style.display = 'block';
<div id="ie">
ie
</div>
<div id="chrome">
chrome
</div>
You could easily accomplish this (IE vs. not IE) without Javascript using conditional IE comments
<!--[if IE ]>
<style>
#chrome { display: none; }
</style>
<div id="ie">
ie
</div>
<![endif]-->
<div id="chrome">
chrome
</div>
Note This will only work for IE9 and below - if you are using standards or quirks mode in IE10 or above conditional comments will not work. Read more here
You should use {} when using if/else statements. The are optional when there is only one statement, but mandatory when there are multiple statements. I highly suggest using {} always, regardless of the number of statements.
You also need to pass a string to getElementById().
function GetIEVersion() {
var sAgent = window.navigator.userAgent;
var Idx = sAgent.indexOf("MSIE");
// If IE, return version number.
if (Idx > 0){
return parseInt(sAgent.substring(Idx+ 5, sAgent.indexOf(".", Idx)));
}
// If IE 11 then look for Updated user agent string.
else if (!!navigator.userAgent.match(/Trident\/7\./)){
return 11;
}
else{
return 0; //It is not IE
}
}
var e = document.getElementById('ie');
var e2 = document.getElementById('chrome');
if (GetIEVersion() > 0){
alert("This is IE " + GetIEVersion());
e.style.display = 'block';
e2.style.display = 'none';
}
else{
alert("This is not IE.");
e.style.display = 'none';
e2.style.display = 'block';
}
<div id="ie">
ie
</div>
<div id="chrome">
chrome
</div>
When you have multiple statements in an if or else, you need to wrap them in curly braces.
if (GetIEVersion() > 0) {
alert("This is IE " + GetIEVersion());
e.style.display = 'block';
e2.style.display = 'none';
} else {
alert("This is not IE.");
e.style.display = 'none';
e2.style.display = 'block';
}
Why is it considered a bad practice to omit curly braces?
Seems like syntax errors
if (GetIEVersion() > 0) {
alert("This is IE " + GetIEVersion());
e.style.display = 'block';
e2.style.display = 'none';
}
else {
alert("This is not IE.");
e.style.display = 'none';
e2.style.display = 'block';
}
I've had great success with the following code snippet from this Stack Overflow answer to detect Chrome:
I have tested and it works just fine for Internet Explorer.
It avoids the .indexOf() methodology which I prefer. You would simply replace the search parameter in the regex with MSIE
var detectID = (function() {
var ua = navigator.userAgent,
tem,
M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if (/trident/i.test(M[1])) {
tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
return 'IE ' + (tem[1] || '');
}
if (M[1] === 'Chrome') {
tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
if (tem != null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
}
M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
if ((tem = ua.match(/version\/(\d+)/i)) != null) M.splice(1, 1, tem[1]);
return M.join(' ');
})();
if (detectID.match("IE") || detectID.match("MSIE") ) {
console.log("IE Browser Detected: " + detectID);
} else {
console.log("Not IE: " + detectID);
}
I'm currently using two functions to show and hide elements on a project I'm working on.
One function is for when the element is currently .display = 'block' and the other is for when the element is currently .display = 'none'.
function hide1(id) {
ele = document.getElementById(id);
if (ele.style.display == 'block')
ele.style.display = 'none';
else
ele.style.display = 'block'; }
function hide2(id) {
ele = document.getElementById(id);
if (ele.style.display == 'none')
ele.style.display = 'block';
else
ele.style.display = 'none'; }
I'm all for optimization and am wondering if there is a way to combine both functions into one, or if its fine to keep them as they are.
Cheers,
function hide(id) {
ele = document.getElementById(id);
ele.style.display = (ele.style.display == 'block')?'none':'block';
}
function ChangeDisplay(id,prevDisplay,newDisplay) {
ele = document.getElementById(id);
if (ele.style.display == prevDisplay)
ele.style.display = newDisplay;
else
ele.style.display == prevDisplay;
}
That should do your work
I am trying to get a collapsible link list to work using JavaScript.
However, there is a continual error in the Java document and I don't know why:
var css Node = document.createElement('link');
cssNode.setAttribute('rel', 'stylesheet');
cssNode.setAttribute('type', 'text/css');
cssNode.setAttribute('href', 'javascript-overrides.css');
document.getElementsByTagName('head')[0].appendChild(cssnode);
function toggle(toggler) {
if (document.getElementById) {
targetElement = toggler.nextsibling;
if (targetElement.classname == undefined) {
targetElement = toggler.nextsiblig.nextsibling;
}
if {
targetElement.style.display == "block") {
targetElement.style.display = "none";
}
else {
targetElement.style.display = "block"
}
}
}
function swap(targetid) {
if (document.getElementById) {
target = document.getElementById(targetid);
if (target.style.display == "block") {
target.style.display = "none";
}
else {
target.style.display = "block";
}
}
}
The error in on line 15 where is states "if ( document.getElementById){" but it seems fine to me.
Any advice?
jsLint returns 3 errors (and assuming your first line is var cssNode)
Compare to undefined with === ( if (targetElement.classname === undefined) )
if { targetElement.style.display == "block")} must be if (
Missing semicolon (targetElement.style.display = "block")
Broken Fiddle here (Push the jsLint button to see the errors)
Fixed Fiddle here
I have a javascript function that is supposed to make visible objects hidden and hidden objects visible. since I lack of basic javascript knowlegde, I came here to ask help from you :/ Can someone help me out with my code so that I can learn a little?
function DisplayMenu(obj) {
if (obj.style.visibility == 'visible') {
obj = document.getElementById(obj);
obj.style.visibility = 'hidden';
}
else if (obj.style.visibility == 'hidden') {
obj = document.getElementById(obj);
obj.style.visibility = 'visible';
}
}
You need to define what obj is before the if:
function DisplayMenu(obj) {
var obj = document.getElementById(obj);
if (obj.style.visibility == 'visible') {
obj.style.visibility = 'hidden';
}
else {
obj.style.visibility = 'visible';
}
}
EDIT: You could simplify it, you don't need the else if just use else
And even shorter version which checks for existance of obj_id before assignment, so in the case there is no obj_id in DOM it doesn't trigger exception:
function DisplayMenu(obj_id) {
var obj = document.getElementById(obj_id);
obj && obj.style.visibility = (obj.style.visibility == 'visible') ? 'hidden' : 'visible';
}
I need to check onload if an anchor is within the URL to open a tab if required. The problem is that if a user opens a tab before the onload function gets fired, the tab gets closed and the user needs to open it again.
How to fix that?
HTML:
<body onload="checkurl()">
JS:
function checkurl(){
if (window.location.hash == '#about')
{
showhide('secabout');
}
else if (window.location.hash == '#contact')
{
showhide('seccontact');
}
}
JS function:
var divState = {};
function showhide(id) {
if (document.getElementById) {
var divid = document.getElementById(id);
divState[id] = (divState[id]) ? false : true;
for (var div in divState){
if (divState[div] && div != id){
document.getElementById(div).style.display = 'none';
divState[div] = false;
}
}
divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
}
}
Thanks.
Uli
I'm pretty sure that <script> tags inside of <head> execute right away before onload() so try that.
You can call the function with an extra parameter to make sure will show in your load function.
Then check on a global initialized variable to check if the function has already been executed by user when running from the checkurl function. This is required if the user clicks on a different tab than the one specified in the URL.
Also you need to check on divState[id] instead of divid.style.display == 'block' when updating divid.style.display at bottom.
function checkurl(){
if (window.location.hash == '#about')
{
showhide('secabout', true);
}
else if (window.location.hash == '#contact')
{
showhide('seccontact', true);
}
}
var divState = {};
var initialized = false;
function showhide(id, initialize) {
if(initialized && initialize) return;
initialized = true;
if (document.getElementById) {
var divid = document.getElementById(id);
divState[id] = (divState[id]) ? false : true;
for (var div in divState){
if (divState[div] && div != id){
document.getElementById(div).style.display = 'none';
divState[div] = false;
}
}
if(initialize){
divid.style.display = 'block';
} else {
divid.style.display = (divState[id] ? 'block' : 'none');
}
}
}