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/
Related
function bookingchanneldisable(stopSale){
if (stopSale == "N") {
document.getElementById("applicableBookingChannel").readOnly = false;
document.getElementById("applicableBookingChannelReservation").readOnly = false;
}else{
document.getElementById("applicableBookingChannel").checked = true ;
document.getElementById("applicableBookingChannelReservation").checked = false ;
document.getElementById("applicableBookingChannel").readOnly = true;
document.getElementById("applicableBookingChannelReservation").readOnly = true;
}
}
this function working fine in firefox (ubuntu) , but it is not working in firefox (windows). please can you help me
readonly prevents users from changing the field value. So it works with inputs in which you can change the value (like text boxes), but it doesn't work on inputs in which you do not change the value but the field state (like checkboxes).
To solve the problem, you should use disabled with checkboxes instead. Like this:
function bookingchanneldisable(stopSale){
if (stopSale == "N") {
document.getElementById("applicableBookingChannel").disabled = false;
document.getElementById("applicableBookingChannelReservation").disabled = false;
}else{
document.getElementById("applicableBookingChannel").checked = true ;
document.getElementById("applicableBookingChannelReservation").checked = false ;
document.getElementById("applicableBookingChannel").disabled = true;
document.getElementById("applicableBookingChannelReservation").disabled = true;
}
}
See it working on this JSFiddle: http://jsfiddle.net/fg1xLr1h/
I have a hidden text area (which is defined as hidden with bootstrap)
I have a dropdown which has 2 options.
If I select 1st option, textarea should be shown.
If I select 2nd option, textarea should disappear.
Here are my codes and I don't know where I go wrong :
function OnSelectedIndexChange(){
var getDropDown = document.getElementById("myDropDownID");
var getDropDownSelectedItemValue = getDropDown.options[getDropDown.selectedIndex].text;
if(getDropDownSelectedItemValue == 'Yes'){
document.getElementById("myTextAreaID").style.display = 'block';
}
else{
document.getElementById("myTextAreaID").style.display = 'none';
}
}
UPDATE:
Added jsfiddle link : jsfiddle.net/wy562fk8/1 but i am using blade templating, so you can't be able to see any output.
use onchange function.
document.getElementById("myDropDownID").onchange = function {
if(document.getElementById("myDropDownID").value == 'Yes'){
document.getElementById("myTextAreaID").style.display = 'block';
}
else{
document.getElementById("myTextAreaID").style.display = 'none';
}
}
Might be the reason you are doing
var getDropDownSelectedItemValue = getDropDown.options[getDropDown.selectedIndex].text;
instead of
var getDropDownSelectedItemValue = getDropDown.options[getDropDown.selectedIndex].value;
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 just came into this project, the code was already written but we noticed a problem. When you click anywhere in the menu it turns the whole thing gold, you can't see any of the links within that section of the menu. You can click on it again and it will return back to the normal state. This only happens in Internet Explorer 9 and Chrome, no problems in Firefox. The link at the bottom provides an image so you can see the problem.
We have an onclick on the LI for the mobile and IE8 version of the site so they get a nice drop-down menu as well.
When I remove the onclick it takes care of the problem but also prevents the drop-down for the mobile and IE8 users.
Here is the code that I think pertains to this problem:
HTML:
<li id="prospective" class="rightborder" onclick="javascript:showElement('prospective-links')">Future Students
<ul id="prospective-links">
<li>Undergraduate Admissions</li><li>More Links</li></ul>
JS
function showHide() {
var s=document.getElementById("buttonbar").style;
if ($(window).width() > 949) {
s.display = "block";
document.getElementById("prospective-links").style.display = "block";
document.getElementById("current-links").style.display = "block";
document.getElementById("academic-links").style.display = "block";
document.getElementById("facstaff-links").style.display = "block";
document.getElementById("parent-links").style.display = "block";
document.getElementById("alumni-links").style.display = "block";
document.getElementById("visitor-links").style.display = "block";
$("#accordion").accordion('destroy');
$("#buttonbar").unbind('mouseenter');
$("#buttonbar").unbind('mouseleave');
$.fn.pause=function(a){$(this).stop().animate({dummy:1},a);return this};
function mouseleft(){$("#buttonbar").triggerHandler("mouseleave")}
$(document).ready(function()
{$("#buttonbar").mouseenter(function() {$(this).stop().pause(160).animate({height:"12.7em"},400,"easeOutQuart")}).mouseleave(function(){$(this).stop().pause(160).animate({height:"2.2em"},400,"easeOutQuart")});});$(function(){$("#accordion").accordion({fillSpace:!0,icons:{header:"accordion-header",headerSelected:"accordion-headerselected"}})});
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$("#buttonbar li").bind('touchstart', function(){
console.log("touch started");
});
$("#buttonbar li").bind('touchend', function(){
console.log("touch ended");
});
}
}
else {
/*$("#accordion").accordion({active:false});*/
$("#accordion").accordion('destroy');
$("#buttonbar").unbind('mouseenter');
$("#buttonbar").unbind('mouseleave');
$("#buttonbar li").unbind('touchstart');
$("#buttonbar li").unbind('touchend');
s.display = "none";
document.getElementById("prospective-links").style.display = "none";
document.getElementById("current-links").style.display = "none";
document.getElementById("academic-links").style.display = "none";
document.getElementById("facstaff-links").style.display = "none";
document.getElementById("parent-links").style.display = "none";
document.getElementById("alumni-links").style.display = "none";
document.getElementById("visitor-links").style.display = "none";
/*$("#buttonbar").accordion('destroy');*/
}
}
else { function showElement(d){ var s=document.getElementById(d).style;
if (s.display != "block" ) { s.display = "block"; } else { s.display = "none"; } };
And the CSS:
#prospective-links li,
#current-links li,
#academic-links li,
#facstaff-links li,
#parent-links li,
#alumni-links li,
#visitor-links li {
width: 80%;}
prospective-links,
current-links,
academic-links,
facstaff-links,
parent-links,
alumni-links,
visitor-links {
display: none;
}
Menu problem
I'm going to give this a shot with the limited info you have provided.
So the section below the "Future Students" in the image is what you are talking about. You clicked on it and it "turned it gold" like the image.
In actuality what happened was that you clicked on it and it disappeared. Which according to the function you are calling is the correct behavior. It was being displayed so now it hides it. By the way, showElement is a horrible name for this function since that is not what it is doing but you inherited it so you may not have control over that. Something like toggleElement would be better.
function showElement(d){
var s=document.getElementById(d).style;
if (s.display != "block" ) {
s.display = "block";
} else {
s.display = "none";
}
}
My guess is that in mobile and ie8 these sub-menus start out as hidden so this function does what it is supposed to, i.e. shows the sub-menu on first click and then hides it when clicked again. Although the function you show here says that should be happening for any window with a width less than 949px $(window).width() > 949
That is the best I can do with what we have so far.
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...