We Keep Coding

How to remove previously bind event in jquery

On a checkbox change event, one of a javascript bind the toggle action.
Later on(in a different script) I want to change toggle action based on a condition.
Ex.
script 1:
$(document).ready(function () {
var shipFields = $('.address1 input');
$("input[name = 'same_as_bill']").on("change", function (evt) {
toggleFields(shipFields, !$(this).is(":checked"));
});
function toggleFields(fields, show) {
var inputFields = $("li", fields).not(".sameas, .triggerWrap");
inputFields.toggle(show);
}
}
Script 2:
$(document).ready(function () {
$('li.sameas input').click(function (sender) {
var target = $(sender.target);
var selectedCountryValue = $('li.country select', target.closest('fieldset')).val();
// determine data method based on country selected
if (selectedCountryValue === "xxx") {
ShowAddress(true, target);
} else {
ShowAddress(false, target);
}
});
function kleberShowAddress(show, target) {
if (show) {
$('li.address).hide();
} else {
$('li.address).show();
}
}
});
Issue I have here is, my site load the script 1 first and then the script 2. So by the time script 2 performs the action, toggle action is queued and will trigger that after the changes from script 2, that will revert the changes which I want.
Is there a way to remove the action in the queue? or stop happening first request. I do not want to use .unbind() which will stop triggering script 1 function. I just want to stop the action when ever it meets the condition in script 2.
Please note: above functions are trimmed to show less codes.

add var isActive = true; and use it to check in first script.
In script 2, you can call isActive = false any time you want to disable the first script's function or isActive = true for re-enable them.
Your code will look like:
//script1
var isActive = true;
$(document).ready(function() {
var shipFields = $('.address1 input');
$("input[name = 'same_as_bill']").on("change", function(evt) {
if (isActive) {
toggleFields(shipFields, !$(this).is(":checked"));
}
});
function toggleFields(fields, show) {
if (isActive) {
var inputFields = $("li", fields).not(".sameas, .triggerWrap");
inputFields.toggle(show);
}
}
});
//script2
$(document).ready(function() {
isActive = false;
$('li.sameas input').click(function(sender) {
var target = $(sender.target);
var selectedCountryValue = $('li.country select', target.closest('fieldset')).val();
// determine data method based on country selected
if (selectedCountryValue === "xxx") {
ShowAddress(true, target);
} else {
ShowAddress(false, target);
}
});
function kleberShowAddress(show, target) {
if (show) {
$('li.address').hide();
} else {
$('li.address').show();
}
}
});

Call script from another script

In HTML5 I have a dropdown menu . When choosing different options I hide or show different parts of my page. Here is that script:
document
.getElementById('target')
.addEventListener('change', function () {
'use strict';
var vis = document.querySelector('.vis'),
target = document.getElementById(this.value);
if (vis !== null) {
vis.className = 'inv';
}
if (target !== null ) {
target.className = 'vis';
}
});
However what I want to do now, in another script is to preload an option from the dropdown. I can do it easily with this script:
setSelectedIndex(document.getElementById('target'),'content_1');
function setSelectedIndex(s, valsearch)
{
// Loop through all the items in drop down list
for (i = 0; i< s.options.length; i++)
{
if (s.options[i].value == valsearch)
{
// Item is found. Set its property and exit
s.options[i].selected = true;
break;
}
}
return;
}
This is where my problem comes up, my dropdow will get the value I want, but the part that I want to be shown when choosing that option won't come up.

That is because change events need to happen from the browser.
When the user commits the change explicitly (e.g. by selecting a value
from a 's dropdown with a mouse click, by selecting a date
from a date picker for , by selecting a file in the
file picker for , etc.);
If your using Jquery you can:
$("#id").val("value").trigger('change');
or you can use javascript if your not worried about building the event object:
if ("createEvent" in document) {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
element.dispatchEvent(evt);
}
else
element.fireEvent("onchange");

I would recommend moving your anonymous onchange function into a named function that you can call once onload, and again onchange.
Here is the function I wrote:
function setContent(id) {
//get the current visible content
var vis = document.querySelector('.vis');
//get the target element by id
var target = document.getElementById(id);
//make current vis element inv
if (vis) vis.className = "inv";
//make target element vis
if (target) target.className = 'vis';
}
and a fiddle
edited: got rid of querySelectorAll to stick closer to OP original code and updated fiddle. clarified and commented code.

The problem you have is changing a vale or the selected value of an input with JavaScript does not trigger any change event. So you would need to manually trigger the event.
function setSelectedIndex(s, valsearch)
{
// Loop through all the items in drop down list
for (i = 0; i< s.options.length; i++)
{
if (s.options[i].value == valsearch)
{
// Item is found. Set its property and exit
s.options[i].selected = true;
break;
}
}
//Setting the selected value with JavaScript does not trigger the change event so you need to manually trigger the change event
if ("createEvent" in document) {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
s.dispatchEvent(evt);
} else {
s.fireEvent("onchange");
}
return;
}

Change element display none back to default style value JS

I have a function in JS that hides the element parsed:
function hide(id){
document.getElementById(id).style.display = "none";
}
How can I create a function that brings back the element to the default style value. For instance a div display property is "block" as for an image is "inline-block", other elements are "inline" or lists are "list-item" How can I bring them back their default state?
function show(id){
document.getElementById(id).style.display = "?????";
}
I know how to do it in Jquery but it is not an option.
In CSS there might be styles for the elements including style:none, which need to be overwritten to the default value.
Since there is CSS in my example making style.display = '' eliminates the style added with JS but gets back to whatever style is added in CSS, I want to bring it back to its default value even before assigning styles with CSS.
I tried this as it was suggested in a link in one of the comments:
elem = document.getElementById(id);
var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("display");
but in this case 'theCSSprop' returns "none" for a div, when I expect "block"
Any ideas?
Thanks.

You need just assign it to empty value:
document.getElementById(id).style.display = "";
Or using removeProperty method:
document.getElementById(id).style.removeProperty( 'display' );
But note that removeProperty will not work on IE<9.
If you want to get original CSS value you will need probably to get it from empty <iframe> element. I created example on jsFiddle how to get current value using getComputedStyle and iframe value on jsFiddle.
Please note that getComputedStyle not support old versions of IE. It support IE9+.
For IE8 you should use Element.currentStyle

Note:
If you define display:none; for a class or tag (either in a separate css file or in the head section), the above methods won't work.
Then you will have to determine which type of tag + class it is and manually assign the value specific to it.
These are examples of what may not work:
// In many cases this won't work:
function ShowHide_WillRarelyWork(id, bDisplay) {
// Note: This will fail if parent is of other tag than element.
var o = document.getElementById(id);
if (o == null) return;
//
if (bDisplay) {
o.style.display = 'inherit';
o.style.visibility = true;
}
else {
o.style.display = 'none';
}
} // ShowHide_WillRarelyWork(...)
// This will work in most, but not all, cases:
function ShowHide_MayWork(id, bDisplay) {
// Note: This will fail if element is declared as 'none' in css.
var o = document.getElementById(id);
if (o == null) return;
//
if (bDisplay) {
o.style.display = null;
o.style.visibility = true;
}
else {
o.style.display = 'none';
}
} // ShowHide_MayWork(...)
This is long but will most probably work:
function getDefaultDisplayByTag(sTag) {
// This is not fully implemented, as that would be very long...
// See http://www.w3.org/TR/CSS21/sample.html for full list.
switch (sTag) {
case 'div':
case 'ul':
case 'h1':
case 'h2':
case 'h3':
case 'h4':
case 'h5':
case 'h6': return 'block';
//
case 'li': return 'list-item';
//
case 'table': return 'table';
//
case 'td':
case 'th': return 'table-cell';
}
// Fallback:
return 'block';
} // getDefaultDisplayByTag(...)
//
function computeDisplay(o) {
var oFunction = window.getComputedStyle;
if (oFunction) {
var oStyle = window.getComputedStyle(o)
if ((oStyle) && (oStyle.getPropertyValue)) {
return oStyle.getPropertyValue('display');
}
}
if (window.currentStyle) {
return window.currentStyle.display;
}
return null; // <-- This is going to be a bad day...
} // computeStyle(...)
//
// This will most probably work:
function ShowHideObject_WillProbablyWork(o, bDisplay, bMaybeRecursive) {
if ((o == null) || (o == undefined) || (o == document) || (o.tagName == undefined)) return;
//
if (bDisplay == null) bDisplay = true
if (!bDisplay) {
o.style.display = 'none';
}
else {
// First remove any directly set display:none;
if ((o.style.display == 'none') || (o.style.display == '')) {
o.style.display = null;
}
//
var sDisplay = null;
var sDisplayCurrent = computeDisplay(o);
var oParent = o.parentNode;
// Was this element hidden via css?
if ((sDisplayCurrent == null) || (sDisplayCurrent == 'none')) {
// We must determing a sensible display value:
var sTag = o.tagName;
sDisplay = getDefaultDisplayByTag(sTag);
} // else: if ((sDisplayCurrent != null) && (sDisplayCurrent != 'none'))
//
// Make sure visibility is also on:
if (sDisplay != null) o.style.display = sDisplay;
o.style.visibility = true;
//
if (bMaybeRecursive) {
// We should travel up the tree and make sure parent are also displayed:
ShowHideObject_WillProbablyWork(oParent, true, true);
}
} // else: if (!bDisplay) ...
//
} // ShowHideObject_WillProbablyWork(...)
//
// ... and finally:
function ShowHideId_WillProbablyWork(id, bDisplay, bMaybeRecursive)
var o = document.getElementById(id);
ShowHideObject_WillProbablyWork(o, bDisplay, bMaybeRecursive)
} // ShowHideId_WillProbablyWork(...)
Of course this could be shortened a bit; but that's how it looks in my source.

Here is one more solution for retrieving any property default value of any element. Idea is following:
Get nodeName of specific element
Append a fake element of the same node name to body
Get any property value of the fake element.
Remove fake element.
function getDefaultValue(element, property) {
var elDefault = document.createElement(element.nodeName);
document.body.appendChild(elDefault);
propertyValue = window.getComputedStyle(elDefault,null).getPropertyValue(property);
document.body.removeChild(elDefault);
return propertyValue;
}
function resetPropertyValue (element,propertyName) {
var propertyDefaultValue = getDefaultValue(element, propertyName);
if (element.style.setProperty) {
element.style.setProperty (propertyName, propertyDefaultValue, null);
}
else {
element.style.setAttribute (propertyName, propertyDefaultValue);
}
}
#d {
background: teal;
display: inline;
}
<button onclick="resetPropertyValue(document.getElementById('d'), 'display')">Try it</button>
<div id="d">test</div>

You can use custom attributes
function hide(id){
var elem = document.getElementById(id);
//Store prev value
elem.setAttribute('custom-attr', elem.style.display);
elem.style.display = "none";
}
function show(id){
var elem = document.getElementById(id);
//Set prev value
elem.style.display = elem.getAttribute('custom-attr');
}

Filling in an empty value removes the inline override, so the original value is active again.
function show(id){
document.getElementById(id).style.display = "";
}

Since what you want is the default value for the element and not what's in the style sheet, you simply want to set the value to auto.
document.getElementById(id).style.display="auto"
This tells the browser to calculate what the normal display for this type of element is and to use that.

JavaScript Button Style change on click

I have put together this piece of JavaScript, but I am struggling with the code as I'm a newbie. What I want to do is when a button is clicked it will change the background color opacity. The code below does this, but now I want the button to be reverted to the normal state when I click it again.
How can I do this? Thanks..
Normal state: background="rgba(255,0,0,0.8)"; Pressed state:
background="rgba(255,0,0,0.6)";
function highlight(id) {
document.getElementById(id).style.background="rgba(255,0,0,0.6)";
}

I would use a CSS class:
.opacityClicked{
background:rgba(255,0,0,0.8);
}
.opacityDefault{
background:rgba(255,0,0,0.6);
}
And change your function to:
function highlight(id) {
var element = document.getElementById(id);
element.class = (element.class == "opacityClicked") ? "opacityDefault" : "opacityClicked";
}
Or if you want to use only JavaScript
var isClicked = false;
function highlight(id) {
isClicked = !isClicked;
var element = document.getElementById(id);
element.style.background = (isClicked == true) ? "rgba(255,0,0,0.6)" : "rgba(255,0,0,0.8)";
}
Update(See comments: if you use 2 buttons):
var buttonClicked = null;
function highlight(id) {
if(buttonClicked != null)
{
buttonClicked.style.background = "rgba(255,0,0,0.8)";
}
buttonClicked = document.getElementById(id);
buttonClicked.style.background = "rgba(255,0,0,0.6)";
}

You could do something really quick like this:
First, add a hidden input element to your page like so:
<input type="button" id="foobar" value="FooBar!" onclick="highlight('foobar')" style="background-color:rgba(255,0,0,0.8);" />
<input type="hidden" id="one_neg_one" value="1" /> <= hidden element
Next, put this in your highlight function:
function highlight(id) {
var a = 7;
var o = document.getElementById("one_neg_one");
var newa = (a + (parseInt(o.value) * -1)) * 0.1;
document.getElementById(id).style.background="rgba(255,0,0," + newa + ")";
o.value = o.value * -1;
}
That should work, although I agree with a previous answer that you should use a css class for this.

#Ruben-J answer works fine. There is a syntax error though - you should instead use element.className rather than element.class.
https://developer.mozilla.org/en-US/docs/Web/API/Element/className
Below is an updated answer using the correct syntax:
function highlight(id) {
var element = document.getElementById(id);
element.className = (element.className == "opacityClicked") ? "opacityDefault" : "opacityClicked";
}
Also noticed that this answer doesn't show the HTML. Make sure to pass through the id element, not the name of the id.

How to show multiple text fields on button click one by one

I need to add 2-3 text fields on button click one by one, where 'L' is the ID of the textfield. I am trying this code, but instead of using jQuery I want to use simple javascript because I am implementing this code in a Joomla environment.
function WrapperScript () {
JQuery('#wrapper1 button').click(function(){
for (var i=1;i<=4;i++)
{
var id='#L'+i;
var setting = JQuery(id).css('display');
if (setting=='none')
{
JQuery(id).css('display', 'block');
break;
}
}
});
}

if you need to make the same script without using jQuery here is a sample
function WrapperScript () {
//use an appropriate getter for the button
var button = document.getElementblahblah
button.onclick = function(){
for (var i=1;i<=4;i++)
{
var id='#L'+i;
var element = document.getElementById(id);
var setting = element.style.display;
if ( setting=='none' )
{
element.style.display = 'block';
break;
}
}
}
}