I need to solve a problem on an old system we still use. I am busy converting a new system to jquery but these nuggets from the old system sometimes pop up.
The code below works great in Firefox but doesn't work at all in Chrome or IE.
I have added a console.log("test") and this runs in Firefox but not in Chrome or IE.
Please let me know what's the best way to do this in vanilla javascript so it's cross browser friendly. Thanks
Code
function showlaptop(theTable)
{
if (document.getElementById(theTable).style.display == 'none')
{
document.getElementById(theTable).style.display = 'block';
console.log("test");
}
}
function hidelaptop(theTable)
{
if (document.getElementById(theTable).style.display == 'none')
{
document.getElementById(theTable).style.display = 'none';
}
else
{
document.getElementById(theTable).style.display = 'none';
}
}
This should work in all browsers...
function showlaptop(theTable)
{
if (document.getElementById(theTable).style.display == 'none')
{
document.getElementById(theTable).style.display = '';
console.log("test");
}
}
function hidelaptop(theTable)
{
if (document.getElementById(theTable).style.display == '')
{
document.getElementById(theTable).style.display = 'none';
}
else
{
document.getElementById(theTable).style.display = 'none';
}
}
that is, replace 'block' with ''
You do not need the second else BTW...
UPDATE:
As mentioned by Rob in the comments. The default display value for everything is not 'block', although, some browsers allow it, but those that follow the standards will not render the page accordingly...
Related
I tried this but obv it didnt work. Im very new to JS, how do I do this?
function test() {
if(document.getElementById('div1').style.display = 'block'){
document.getElementById('div1').style.display = 'none';
}
if(document.getElementById('div1').style.display = 'none'){
document.getElementById('div1').style.display = 'block';
}
}
The code you have (once corrected) will toggle visibility but won't make an element invisible on the 2nd time a user clicks on it.
I've set up a JSFiddle here that uses plain JavaScript in order to do what you're asking in the title of the question.
Let's assume that your HTML looks something like this, with a DIV that has a class name of "tester":
<div class="tester">This is a triumph.</div>
<p>I'm writing a note here; huge success</p>
One way of achieving this is to add a data element to the DIV to track the number of clicks and then, when the number of clicks hits two, we hide it. The code for that looks like this:
document.getElementsByClassName("tester")[0].onclick = function(targ) {
if(!targ.target.hasAttribute("data-click")) {
targ.target.setAttribute("data-click",0);
}
var currClicks = +targ.target.getAttribute("data-click");
if(currClicks==2){
targ.target.style.display = "none";
} else {
targ.target.setAttribute("data-click", currClicks+1);
}
};
Again, this will get you the functionality you asked about in your question but does not match your code sample as it doesn't really do what you want. If you need any more information on this feel free to ask, but I think this will get you what you're looking for.
It shouldn't be =, it should be == in JavaScript if condition and twice if condition always setting style.display = 'block', so either use else if or simply else.
<div id="div1" style="display:block"></div>
function test() {
if (document.getElementById('div1').style.display == 'block') {
document.getElementById('div1').style.display = 'none';
}
else if(document.getElementById('div1').style.display == 'none') {
document.getElementById('div1').style.display = 'block';
}
}
or
function test() {
if (document.getElementById('div1').style.display == 'block') {
document.getElementById('div1').style.display = 'none';
}
else{
document.getElementById('div1').style.display = 'block';
}
}
I try to validate Required fields in Java script. It will works fine on Chrome,Firefox.But it will not works for Textbox in IE at the same the scripts was works on DropDownlist validation on Submit button Click.
My Script For Validate Text Box:
function validateRecepitMaster() {
if ((!IsBlank(Pay_Amount))) {
ShowLabel(spPay_Amount);
spPay_Amount.innerHTML = "*";
Pay_Amount.focus();
return false;
}
}
function IsBlank(obj) {
if (obj) {
if ((obj.value.trim().length == 0) || (obj.value == null)) {
obj.focus();
return false;
}
return true;
}
}
The Working Script for DropDown
if (Cust_Id.value == "") {
ShowLabel(spCust_ID);
spCust_ID.innerHTML = "*";
Cust_Id.focus();
return false;
}
Above Both scripts woks fine on Chrome, Firefox, and not works at IE.
Thanks in advance
add below script before run yours:
String.prototype.trim=function()
{
return this.replace(/(^\s*)|(\s*$)/g, '');
};
Look in your console for the error that IE throws.
A possible candidate is:
obj.value.trim()
IE might not support trim (yet)
I am trying to make a button that would toggle (on/off) HTML5 fullscreen on a certain website.
After reading plenty of documentation, it appears there still are some inconsistencies among how browsers treat certain properties for it.
I went for kind of "cross-browser" approach which does work in Firefox and Safari/MacOS, partially works in Safari/Windows and totally fails to work in Chrome and Opera.
Some castrated code snippets:
// class init
initialize: function() {
this.elmButtonFullscreen = $('fullscreen');
this.elmButtonFullscreen.on('click', this.onClickFullscreen.bindAsEventListener(this));
},
// helper methods
_launchFullScreen: function(element) {
if(element.requestFullScreen) { element.requestFullScreen(); }
else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); }
else if(element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); }
},
_cancelFullScreen: function() {
if(document.cancelFullScreen) { document.cancelFullScreen(); }
else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); }
else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); }
},
_isFullScreen: function() {
fullScreen = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled ? true : false;
if(this.debug) console.log('Fullscreen enabled? ' + fullScreen);
return fullScreen;
},
// callbacks
onClickFullscreen: function(e) {
e.stop();
if(this._isFullScreen()) this._cancelFullScreen();
else this._launchFullScreen(document.documentElement);
}
function goFullScreen() {
const el = document.documentElement,
rfs = el.requestFullScreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
|| el.msRequestFullscreen
rfs.call(el)
}
document.querySelector('#full-screen-button')
.addEventListener('click', () => {
goFullScreen()
})
Keep in mind that requesting fullScreen needs to be done via a user-triggered event such as a click event - mousedown,mouseup etc..
Changing the 1st line of _isFullScreen function to
fullScreen = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled ? true : false;
Does the trick (at least for Firefox, Chrome and Safari on Mac and Windows)
Based on what I found on Mozilla's Developer Network the function for Webkit is actually spelt slightly different.
document.webkitRequestFullscreen with a lowercase "s" for screen.
And from W3 spec, it is meant to be with a lowercase "s".
On the MDN link they say:
Note: The specification uses the label, "Fullscreen" as in "requestFullscreen" or "fullscreenEnabled" - without a capital 's'. The implementation described here and other prefixed implementations may use a capital 'S'.
I have wrote to the code of displaying(hide/show) the fields when checkbox is checked. The javascript is below
if(document.getElementById("checkBox") != null){
if(!document.getElementById("checkBox").checked){
document.getElementById("displayField1").style.display = "none";
document.getElementById("displayField2").style.display = "none";
document.getElementById("displayField3").style.display = "none";
}else{
document.getElementById("displayField1").style.display = "";
document.getElementById("displayField2").style.display = "";
document.getElementById("displayField3").style.display = "";
}
}
In JQuery
$(document).ready(function(){
if ($('#checkBox').is(':checked')) {
$("#displayField1").show();
$("#displayField2").show();
$("#displayField3").show();
} else {
$("#displayField1").hide();
$("#displayField2").hide();
$("#displayField3").hide();
}
});
It is working fine in IE8 but not in IE7, after the page is refreshed. I have tried jquery as well but still facing this issue.
You could use a compatibility library to add IE7 support:
http://code.google.com/p/ie7-js/
From much research, I have found nothing that supports the idea that Safari even supports this feature. From how much API there is for Safari, I can't believe that they wouldn't allow this to be embedded with their browser.
If anyone has any ideas of how this can be achieved without using some horrible plugin that doesn't actually work, it would be greatly appreciated.
So far, I have taken care of the main browsers by using this:
$("#bookmark").click(function() {
var url = this.href;
var title = this.title;
if($.browser.mozilla) {
window.sidebar.addPanel(title, url,"");
} else if($.browser.msie || $.browser.webkit) {
window.external.AddFavorite(url, title);
if($.browser.safari) {
alert("Balls");
}
} else if($.browser.opera ) {
$(this).attr("href", url);
$(this).attr("title", title);
$(this).attr("rel", "sidebar");
$(this).click();
} else {
//alert("Please press CTRL+D and click the link to bookmark it in your browser.");
}
return false;
});
Unfortunately Safari does not allow you to add a bookmark through javascript (along with IE6/IE8) and possibly a few others. It's some sort of attempt at fighting off spam/unwanted websites adding bookmarks to your browser onload.
Try a script like this, it's pretty much all you can do...
$("a.bookmark").click(function(e) {
if ($.browser.opera == false) {
e.preventDefault();
var url = this.href;
var title = this.title;
if ($.browser.mozilla == true) {
window.sidebar.addPanel(title, url, '');
return false;
} else if($.browser.msie == true) {
window.external.AddFavorite( url, title);
return false;
} else {
alert('Please use CTRL + D to bookmark this website.');
}
}
});
Info from Apple forums (https://discussions.apple.com/thread/1364657?start=0&tstart=0)