window.onchange = function() event - javascript

I have created a function that shows/hides different messages according to a combination of select dropdowns that works fine in chrome and FF using the window.onchange event. Can anyone tell me why this doesn't work in ie and if they have a solution please.
It had to be built in tables due to internal restriction.
;(function(){
document.onchange = function(){
// Initialise variables for drop down options
var homeMove = document.getElementById('homeMove'),
transferOrder = document.getElementById('transferOrder'),
orderComplete = document.getElementById('orderComplete'),
submitBtn = document.getElementById('submitBtn');
// Initialise variables for comments
var comment1 = document.getElementById('comment1'),
comment2 = document.getElementById('comment2'),
comment3 = document.getElementById('comment3');
if((homeMove.value == 'No') && (transferOrder.value == 'No')){
comment2.style.display = 'none';
comment3.style.display = 'none';
comment1.style.display = 'block';
submitBtn.disabled = true;
}
// if Home Move - No AND Transfer Order - Yes. Display nothing. Submit button abled
if((homeMove.value == 'No') && (transferOrder.value == 'Yes')){
comment1.style.display = 'none';
comment2.style.display = 'none';
comment3.style.display = 'none';
submitBtn.disabled = false;
}
// If Home Move - Yes AND Transfer Order - NO. Display comment1. Submit button disables
if((homeMove.value == 'Yes') && (transferOrder.value == 'No')){
comment1.style.display = 'block';
comment2.style.display = 'none';
comment3.style.display = 'none';
submitBtn.disabled = true;
}
// If Home Move - Yes AND Transfer Order - Yes AND Order Complete - Yes. Display comment2 Subhmit button abled
if((homeMove.value == 'Yes') && (transferOrder.value == 'Yes') && (orderComplete.value == 'Yes')){
comment1.style.display = 'none';
comment2.style.display = 'block';
comment3.style.display = 'none';
submitBtn.disabled = false;
}
// If Home Move - Yes AND Transfer Order - Yes and Order Complete - No. Display comment3. Submit button disabled
if((homeMove.value == 'Yes') && (transferOrder.value == 'Yes') && (orderComplete.value == 'No')){
comment1.style.display = 'none';
comment2.style.display = 'none';
comment3.style.display = 'block';
submitBtn.disabled = true;
}
}
})();
Any help with this would be great. Thanks

First, it would be better if instead of doing a document.change, add events to change of drop downs.
Sometimes onpropertychange is a more sure shot event to rely on for ie. but make sure for that event, you do a subsequent check that the event is for a change in value by adding the following filter:
yourselectboxelement.onpropertychange = function() {
if (window.event.propertyName == "value") {
// Do stuff here
}
};

IE only fires the onchange event when the element loses focus
Try to use onclick event.

Related

how do I toggle table properly

I'm trying to modify webpage such as
not show table at first
after finishing certain event show table
so I made a variable for toggling a table. However problem is that it becomes hidden when the page is reloaded.
// when page is ready
var toggle = false;
if (toggle == true) { show table }
else { hide table }
/// during finish action -> toggle = true;
code here
https://jsfiddle.net/r4jd0wo7/
// after this event, show table
$(document).on("click","#searchgroupsubmit",function() {
$('#checkgroup').val($('.list-group-item.group.active').find("input[name='groupdeletecheck']").val());
jQuery("#searchList").submit();
});
// I made a function for toogle table
function toggle_visibility() {
var e = document.getElementById("table1");
var f = document.getElementById("pagenation1");
if (e.style.display == 'block' || e.style.display == '')
e.style.display = 'none';
else
e.style.display = 'block';
if (f.style.display == 'block' || f.style.display == '')
f.style.display = 'none';
else
f.style.display = 'block';
}

Toggle Menus using buttons in JS - But it shows both menus

i want to toggle two menus offered by two buttons.the issue is when i click on button one, it shows the menu bound with button one but when i click the other, it shows both instead of hiding the first one and vice versa, on my login page. The menus are identified by the ids of; 'reqpwd' and 'signup' in html / JS. What is worng? also suggest improvement in code if possible. My JS code:
<script>
window.onload = function() {
document.getElementById('reqpwd').style.display = 'none';
document.getElementById('signup').style.display = 'none';
};
function chk(elm) {
var signup_ = signup.id;
var reqpwd_ = reqpwd.id;
elm_ = elm.id;
if (elm_ == reqpwd_){
hide(signup_);
show(reqpwd_);
}
if (elm_== signup_){
hide(reqpwd_);
show(signup_);
}
};
function show(abc) {
var menuBox = document.getElementById(abc);
if(menuBox.style.display == "none") { // if is menuBox displayed, hide it
menuBox.style.display = "block";
} };
function hide(abc){ // if is menuBox hidden, display it
var menuBox = document.getElementById(abc);
if(menuBox.style.display == "block"){
menuBox.style.display == "none";
}
};
</script>
Instead of menuBox.style.display == "none"; try using menuBox.style.visibility== "hidden";
Edit:
I have changed a few things in your code. Didn't make a whole lot of sense to me the way you're setting the styles on load (missing HTML), so I had to use IDs that made sense to me.
Edit:
Ok, my bad. I updated the code. I think the problem is on hide you're using double equals instead of single equals on menuBox.style.display == "none";. Thus the menu is never hiding.
https://codepen.io/juanferrer/pen/qmOmWa
Finally i have landed into something like this using the flag variable as a state indicator.. now the only requirement is to check toggle as well as disappear the relevant menu by the same button..i.e. if signup menu is already open, the signup or reset button should close it and vice versa.
window.onload = function() {
document.getElementById('regd').style.visibility = 'hidden'; //regisration msg
document.getElementById('rset').style.visibility = 'hidden'; //reset msg
document.getElementById('reqpwd').style.display = 'none';
document.getElementById('signup').style.display = 'none';
};
var flag = 0;
function chk(elm) {
var signup_ = signup.id;
var reqpwd_ = reqpwd.id;
elm_ = elm.id;
if (elm_ == reqpwd_ && flag === 0 || elm_ == reqpwd_ && flag == 2) {
flag = 1;
hide(signup_);
show(reqpwd_);
}
if (elm_ == signup_ && flag === 0 || elm_ == signup_ && flag == 1) {
flag = 2;
show(signup_);
hide(reqpwd_);
}
if (elm_ == reqpwd_ && flag == 1 || elm_ == signup_ && flag == 2) {
hide(elm_);
flag = 0;
}
};
function show(abc) {
var menuBox = document.getElementById(abc);
if (menuBox.style.display === "none") { // if is menuBox hidden, display it
menuBox.style.display = "block";
}
};
function hide(abc) { // if is menuBox
var menuBox = document.getElementById(abc);
if (menuBox.style.display === "block") { //if displayed, hide it
menuBox.style.display = "none";
}
};

How to stop my touch event from firing when users swipe iPhone screen

This is part of my iPhone weather widget.
My touch event seems to work fine, i.e when the user taps the touch area everything does what it should, the problem is when the user swipes the screen (to go to next springboard page) it swipes ok but the swipe also triggers my touch event.
How can I stop the native swipe from firing my touch event?
Thank you for any help.
BTW, "touch" is my defined touch area and "ChangeToClick" just makes it workable on the Mac/PC.
function init() {
if ((EnableTouch == true) && (AnimationsOnly == false)) {
StartTouch();
}
if (ChangeToClick == false) { var touchmode = "touchend"; } else { var touchmode = "click"; }
function StartTouch() {
document.getElementById("touch").addEventListener(touchmode, touchAnimation, false);
}
var forecastdisplay = true;
var hourlyForecastDisplay = false;
function touchAnimation() {
if (forecastdisplay == false) {
document.getElementById("forecastContainer").className = "scaleNormal";
document.getElementById("hourlyForecastContainer").className = "scaleZero";
document.getElementById('WeatherInfoContainer').className = "normal";
document.getElementById('clockContainer').className = "normal";
document.getElementById('goldClockGlass').className = "normal";
document.getElementById('goldClockRing').className = "normal";
document.getElementById('sunriseSunsetGlass').className = "normal";
document.getElementById('fullmoon').className = "normal";
forecastdisplay = true;
hourlyForecastDisplay = false;
}else{
document.getElementById("forecastContainer").className = "scaleZero";
document.getElementById("hourlyForecastContainer").className = "scaleNormal";
document.getElementById('WeatherInfoContainer').className = "moveUp";
document.getElementById('clockContainer').className = "moveUp";
document.getElementById('goldClockGlass').className = "moveUp";
document.getElementById('goldClockRing').className = "moveUp";
document.getElementById('sunriseSunsetGlass').className = "moveUp";
document.getElementById('fullmoon').className = "scaleZero";
forecastdisplay = false;
hourlyForecastDisplay = true;
}
}
window.onload = init;

Disabling onclick attribute with javascript

How do I disable the other onclick event once one of them has been activated. Both divs are set to display:none; in the CSS. This is probably really simple but I am new to programming.
HTML
<a id="leftbutton" href="#" onclick="showDiv(this.id); return false;">click me</a>
<a id="righttbutton" href="#"onclick="showDiv(this.id); return false;">click me</a>
Javascript
function showDiv(id)
{
if(id == "leftbutton"){
document.getElementById('orangediv').style.display = 'block';
}else{
document.getElementById('greendiv').style.display = 'block';
}}
this should do the trick:
function showDiv(id)
{
if(id == "leftbutton"){
document.getElementById('orangediv').style.display = 'block';
document.getElementById('righttbutton').onclick = null;
}else{
document.getElementById('greendiv').style.display = 'block';
document.getElementById('leftbutton').onclick = null;
}}
Like this for example:
function showDiv(id){
if (id == "leftbutton"){
document.getElementById('orangediv').style.display = 'block';
document.getElementById('rightbutton').onclick = "#";
}else{
document.getElementById('greendiv').style.display = 'block';
document.getElementById('leftbutton').onclick = "#";
}}
Something along these lines:
function showDiv(id){
var o = document.getElementById('orangediv');
var g = document.getElementById('greendiv');
if (id == "leftbutton"){
o.style.display = 'block';
}else{
g.style.display = 'block';
}
o.writeAttribute('onclick','');
g.writeAttribute('onclick','');
}
Just set the onclick property of the other element to null;
if (id == "leftbutton"){
document.getElementById('orangediv').style.display = 'block';
document.getElementById('righttbutton').onclick = null;
}
else{
document.getElementById('greendiv').style.display = 'block';
document.getElementById('leftbutton').onclick = null;
}
}
function showDiv(id) {
if ( showDiv.executed ) {
return false;
}
if ( id === "leftbutton" ) {
document.getElementById('orangediv').style.display = 'block';
} else {
document.getElementById('greendiv').style.display = 'block';
}
showDiv.executed = true;
}
showDiv.executed = false;
Doing it this way, you could always re-enable the showing by simply setting showDiv.executed to false.
You could test if the other element is displayed :
function showDiv(id)
{
if (id == "leftbutton" && (document.getElementById('greendiv').style.display == 'none'))
{
document.getElementById('orangediv').style.display = 'block';
}
else if(id == "rightbutton" && (document.getElementById('orangediv').style.display == 'none'))
{
document.getElementById('greendiv').style.display = 'block';
}
}
You can set the href attribute as id of div which should be visibled after you click.
showDiv function can get entire element as argument, then you have access to it attributes as well. Second argument can be a id of element you should hide,
<a id="leftbutton" href="orangediv" onclick="showDiv(this,'rightbutton');return false">click me</a>
<a id="righttbutton" href="greendiv"onclick="showDiv(this,'leftbutton');return false">click me</a>
And in js:
var showDiv =function(el, toHide){
document.getElementById( el.href ).style.display = 'block';
document.getElementById( toHide ).style.display = 'none';
el.onclick = null; //remove onclick declaration from this anchor.
}

Javascript - Display div

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');
}
}
}

Categories