Element with hidden css not changing with javascript .show() - javascript

I have a dropdown list that I am hiding on initialization since it's not needed unless the client actually selections a specific radiobuttonlist object. I'm presently setting it to false through
dlInterval.Attributes.CssStyle[HtmlTextWriterStyle.Visibility] = "hidden";
However, attempting to change this through javascript on selection, is failing, at present, I have my code set up to execute as such.
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#<%=rblVectorChoices.ClientID%>").click(function() {
var intVectorSelectedIndex = $('#<%=rblVectorChoices.ClientID %> input[type=radio]:checked').val();
$("#<%=dlInterval.ClientID %>").style.visibility="visible";
if (intVectorSelectedIndex == 1) {
$("#<%=dlInterval.ClientID%>").show();
} else {
$("#<%=dlInterval.ClientID%>").hide();
}
});
});
</script>
As you can see I'm currently attempting to change the visibility from hidden, back to visible, yet I am receiving an error in the browser console 'TypeError: Cannot set property 'visibility' of undefined'
This doesn't make much sense to me, as the field should be hidden, and not just null. What is causing this to happen, and what is a good solution for such a thing?

The HTML attribute is not called visibility.
In CSS the corresponding attribute for .show() / .hide() is display.

the code you were looking for is :
dlInterval.Attributes.CssStyle["display"] = "none";
or you can just change the javascript to look like, I personally would think that you should hide the element in javascript if your going to show it in javascript . Instead of setting the display:none; in .Net code that is going to disappear when the page is rendered
just re-write your code like this:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
// hide element initially
$("#<%=dlInterval.ClientID%>").hide();
$("#<%=rblVectorChoices.ClientID%>").click(function() {
// much easier way to check if check box is checked
if ( $("#<%=rblVectorChoices.ClientID input[type=radio]:checked%>").is(":checked)) {
$("#<%=dlInterval.ClientID%>").show();
} else {
$("#<%=dlInterval.ClientID%>").hide();
}
});
});
</script>
also , I strongly , strongly reccomend using classes to select your html elements with javascript or jquery , .Net mangles the id's and you have to write out this weird syntax to get the proper id, uses classes prevents all that
NOTE: if you're going to use this second example then you never need to mess with
dlInterval.Attributes.CssStyle["display"] = "none";

Can you use prop and compare if it's true or false? Also, you cant call $("#<%=dlInterval.ClientID %>").style.visibility="visible"; you have to call it this way:
For those of you reminiscing on the missing .NET inline ID's here's my modified code:
$(document).ready(function () {
$("#<%=rblVectorChoices.ClientID%>").click(function () {
var intVectorSelectedIndex = $('#<%=rblVectorChoices.ClientID%>').prop('checked');
$("#<%=dlInterval.ClientID%>").css('visibility', 'visible');
if (intVectorSelectedIndex == true) {
$("#<%=dlInterval.ClientID%>").show();
} else {
$("#<%=dlInterval.ClientID%>").hide();
}
});

Related

How to hide form fields with Jquery in Shopify

I am trying to write a simple script which follows the logic below but I am having difficulties.
If "Name" field = blank
Then Hide "Comment" field
Else Show "Comment" field
$(document).ready(function() {
if ($('#ContactForm-name').value() == "") {
$('#ContactForm-body').hide();
} else {
$('#ContactForm-body').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Can someone please help me? I provided a screen shot of the form and its HTML.
The shopify store is https://permaink.myshopify.com/pages/contact with the store PW = "help".
Taking a look at the example link you provided w/ 'help' password, it doesn't look like jQuery is actually loaded on the site, after running the following in console: console.log(typeof window.jQuery) returns undefined.
You may need to use vanilla JS to achieve what you're trying to do (or side load jQuery, if you have permissions to do so and really need to use it).
Using JS without jQuery, you can try doing something like:
window.addEventListener('load', function() {
if (document.getElementById('ContactForm-name').value === '') {
document.getElementById('ContactForm-body').style.display = 'none';
} else {
document.getElementById('ContactForm-body').style.display = 'block';
}
});
Note, that just hiding the ContactForm-body textarea will still leave a border outline and the label Comment showing, so you may need to do more than just hiding the textarea (find the parent <div> in JS and hide whole block).

scriptaculous blindUp/blindDown issue

I wrote a little script that observes clicks and blinds up/down according to the 'display' property, and also added a queue-to-end parameter to the blindUp in order to avoid even more serious display issues. This is obviously not the way to implement this, as display bugs appear if click events are invoked in the middle of the effect.. This is the code:
<script type="text/javascript">
$$('#leftnav_container #modules h2').each(function(El){
El.observe('click',function(){
container = this.next('div');
display = container.getStyle('display');
if(display == 'none'){
container.blindDown({duration: 0.3});
}else{
container.blindUp({duration: 0.3, queue: 'end'});
}
})
});
</script>
Again, the problem is that I rely on 'display'. What is the proper way to this?
This should simplify it
$$('#leftnav_container #modules h2').invoke('observe','click',function(){
container = this.next('div');
Effect.toggle(container , 'blind', { duration: 0.3 });
});
Firstly if you are only running one method on all elements in the array returned from $$() then you can use the PrototypeJS method invoke().
http://api.prototypejs.org/language/Enumerable/prototype/invoke/
Then Effect.toggle() will check if the element is visible and do the appropriate up/down effect.
Try this out and let me know if it works for you.

.removeClass not functioning within .replaceWith

I'm trying to make a button that will hide a specific -- and then replace it with another hidden . However, when I test the code, everything fires correctly except for the .removeClass which contains the "display: none."
Here is the code:
<script type="text/javascript">
$(document).ready(function(){
var webform = document.getElementById('block-webform-client-block-18');
var unmarriedbutton = document.getElementById('unmarried');
var buyingblock = document.getElementById('block-block-10');
$(unmarriedbutton).click(function () {
$(buyingblock).fadeOut('slow', function() {
$(this).replaceWith(function () {
$(webform).removeClass('hiddenbox')
});
});
});
});
</script>
The CSS on 'hiddenbox' is nothing more than "display: none.'
There is a with the id of unmarried, which when clicked fades out a div and replaces it with a hidden div that removes the class to reveal it. However, the last part doesn't fire -- everything else does and functions properly. When I look at in the console too, it shows no errors.
Can someone please tell me where the error is? Thanks!
Edit: I may be using the wrong function to replace the div with, so here's the site: http://drjohncurtis.com/happily-un-married. If you click the "download the book" button, the the div disappears and is replaced correctly with the div#block-webform-client-block-18. However, it remains hidden.
The function you pass to replaceWith has to return the content you want to replace it with. You have to actually return the content.
I don't know exactly what you're trying to accomplish, but you could use this if the goal is to replace it with the webform object:
$(this).replaceWith(function () {
return($(webform).removeClass('hiddenbox'));
});
NB, use jquery !
var webform = $('#block-webform-client-block-18');
var unmarriedbutton = $('#unmarried');
var buyingblock =$('#block-block-10');
unmarriedbutton.click(function () {
buyingblock.fadeOut('slow', function() {
$(this).replaceWith( webform.removeClass('hiddenbox'));
});
});
Was too fast, i believe it's the way you select your object (getelementbyid) then you create a jquery object from it... -> use jquery API

Javascript working on Firefox but not in Chrome and IE6

I have javascript that working fine in Firefox 3.x.x, but it does not work in IE*, Chrome, Safari. Simple alert work before calling function. Here is the code
function showDiv(div){
//alert(div);
document.getElementById(div).style.visibility='visible';
document.getElementById(div).style.height='auto';
document.getElementById(div).style.display='block';}
function hideDiv(div){
//alert(div);
document.getElementById(div).style.visibility='hidden';
document.getElementById(div).style.height='0px';
document.getElementById(div).style.display='none';
}
here is the html page code
<td align="center"><a onclick="showDiv('<?=$val['keyname']?>')" style="cursor:pointer;">Edit</a></td>
if I put alert() before showDiv('<?=$val['keyname']?>') then alert box is displayed but the function is not called in other browsers other than fire fox
Please tell me the solution for this.
The syntax looks okay to me.
Make sure there are not multiple elements with the same ID in the document and that your element IDs are valid.
There is nothing inherently wrong in the code you have posted. I suggest you post a reproduceable non-working example: the problem will be elsewhere in the page. Maybe the div ID string isn't unique (this is invalid HTML and will make behaviour unreliable); maybe there's some other script interfering, maybe you have event code firing this that's not written in a cross-browser way
However your attempts to hide an element in three different ways seem like overkill to me. Just a single display change would do it fine.
Another way to do it is to set className='hidden' or '', and use a CSS rule to map that class to display: none. The advantage of this is that you don't have to know whether the element in question is a <div> (that should revert to display: block), a <span> (that should revert to display: inline) or something else. (The table-related elements have particular problems.)
Maybe you could try that:
function showDiv(div) {
var obj = document.getElementById(div);
if (obj) {
obj.style.display = "block";
obj.style.height = "auto";
} else {
alert("DIV with id " + div + " not found. Can't show it.");
}
}
function hideDiv(div) {
var obj = document.getElementById(div);
if (obj) {
obj.style.display = "none";
} else {
alert("DIV with id " + div + " not found. Can't hide it.");
}
}
Do not call document.getElementById several times in the same function, use a variable to store the div element.
The if (obj) test will only execute the code if it has been found by document.getElementById(...).

How to show / hide multiple elements at the same time with javascript

So, I have this between my head tags
<script type="text/javascript">
hidden_links = document.getElementsByName("javascript_needed");
for (i = 0; i < hidden_links.length; i++) {
hidden_links[i].style.display = "visible";
}
</script>
And my divs are all similar to
<div name="javascript_needed" style="display: none;">stuff</div>
the overall goal here, is to have these divs hide when javascript is disabled, and re-enable them when javascript is enabled.... but for whatever reason, my code doesn't work. I ever tried it in the webkit console, and nothing errored =\
The JavaScript is executed before the divs are in the DOM. The standard way to do something after the DOM is ready is to use jQuery's $(document).ready(function () { });, but there are other ways as well.
The oldschool way is to use <body onload="myfunction()">.
Here's a newer way (edit: put display:none into CSS):
HTML:
<p class='javascript_needed'>hello</p>​
CSS:
.javascript_needed {display:none;}
JavaScript:
​$(document).ready(function () {
$('.javascript_needed').show();
});
​
Your JS should be setting the div's display to "block" ("visible" isn't a valid value for display).
Also, from the looks of things your elements aren't in the DOM at the time the code is fired (your code doesn't see them yet). Do any of the following:
Place your code anywhere in the document body below the divs
or, use an unobtrusive strategy to fire your function on window load, a la:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
or, Use a JS framework's "ready" functionality, a la jQuery's:
$(function () {
nameOfSomeFunctionToRunOnPageLoad();
});
"visible" is not a valid value for "display". You're after "inline" or "block".
"visible" and "hidden" are valid values for the "visibility" CSS property.
Difference between display and visible:
An element that is visible still takes up space on the page. The adjacent content is not rearranged when the element is toggled between visible and hidden.
An element that is display=none will not take up any space on the page. Other display values will cause the element to take up space. For example, display=block not only displays the element, but adds line breaks before and after it.
The disadvantage of showing elements on ready is that they will only flicker in after the page has finished loading. This usually looks odd.
Here's what I usually do. In a script in the <head> of the document (which runs before the body begins to render), do this:
document.documentElement.className = "JS";
Then, any CSS selectors that descend from .JS will only match if JavaScript is enabled. Let's say you give your links a class of javascriptNeeded (a class is more appropriate than a name here). Add this to your CSS:
.javascriptNeeded{
display: none;
}
.JS .javascriptNeeded{
display: inline;
}
…and the elements will be there from the start, but only if JavaScript is enabled.

Categories