I'm developing a solution using Lombardi Teamworks BPM Tool .. The tool itself generates the client-side source code, but I can put in code using JavaScript, such as adding onChange code for combo boxes ..
Anyways, I have a button whose visibility I'm trying to toggle using JavaScript. I am able to hide a button using hidden, but I cannot unhide a hidden button using visible.
Here's the full code:
var eleBtnVisibilityTest = document.getElementById("btnVisibilityTest");
if (eleBtnVisibilityTest== null) {
eleBtnVisibilityTest = document.getElementsByName("btnVisibilityTest");
}
alert("-->"+eleBtnVisibilityTest.style.visibility+"<--");
eleBtnVisibilityTest.style.visibility = "visible";
alert("-->"+eleBtnVisibilityTest.style.visibility+"<--");
In the second last line, I'm setting the button to visible, but it's doesn't work ... However, if the button was previously visible, and I had written hidden here, it would've worked.
For both cases, in the alert before setting the visibility, the pop-up I get says --><-- .. In the popup after setting visibility, its either -->visible<-- or -->hidden<-- ..
Any ideas ?
Try using the CSS display property:
display: block;
display:none;
document.getElementsByName returns a NodeList, you must select an item from that list:
var eleBtnVisibilityTest = document.getElementById("btnVisibilityTest");
if (eleBtnVisibilityTest== null) {
eleBtnVisibilityTest = document.getElementsByName("btnVisibilityTest")[0];
}
But however, when setting the visibility to hidden works, this actually is not the problem here.
You should provide more details, because your code works when used with getElementById
http://jsfiddle.net/doktormolle/4mhBk/
Not sure what you mean by "but it's doesn't work" - do you mean that the button stays invisible?
It could be that the button is hidden by other means than the CSS visibility property. Maybe it also has display: none? In that case, setting the visibility property would not make the button become visible. Use a tool such as Chrome's inspector to check if that is the case.
Post a code snippet at JSFiddle, so we can see the code in action.
Related
I am trying to apply a class on click to li of my div.
This is the js I have.
$(document).ready(function() {
$('#toggleme').click(function() {
$(this1).addClass('active_class');
});
});
Now when I click at the cart, I want to change that cart image.
I am trying to do that via the css by applying the class background-image:url(""); property. But for some reason I am not able to get it working.
Here's the fiddle
Please help.
Change your JS code to this:
$(document).ready(function () {
var img=0;
$('#toggleme').click(function () {
$(this).toggleClass('active_class');
if(img==0){
$(this).find("img").attr("src", 'http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/simple-red-glossy-icons-business/086707-simple-red-glossy-icon-business-cart5.png');
img=1;
}else{
$(this).find("img").attr("src", 'http://www.daru-koi.com/images/winkelwagen.png');
img=0;
}
});
});
Here is the JSFiddle
Also note that the icon in your code is due to the img tag source and not the CSS. Therefore overwriting using CSS will not help.
The above code switches the source everytime you click.
See the cascade.
count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector
You have two background image rules applying to the element:
.active_class {
background-image : url("http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/simple-red-glossy-icons-business/086707-simple-red-glossy-icon-business-cart5.png");
}
and
style="background-image:none"
The style attribute one is more specific and "wins".
Avoid style attributes. Define the default styling in the stylesheet. (Or just remove it entirely since none is the default in the browser stylesheet).
Your jQuery is working correctly in that it is toggling the active_class when clicked. You can use developer tools (in Chrome or IE, press F12) to verify.
The problem is your jQuery targets the <li> element, but you have an <img /> element within it that is not affected by jQuery in any way.
You need to have the default cart image displayed as a background in CSS and use the jQuery to toggle between it and a different image.
Im sure the answer to my question is here somewhere but I cannot find it. I apologise if I have duplicated.
I have a DIV that I set its visiblity on page load depending on the data I pull back.
So in the code behind:
this.divMyDiv.Visible = false
If the user then changes a drop down value I try to show the DIV
var div = document.getElementById('divMyDiv');
div.style.display = 'block';
If the div is set to visible by the code behind on the initial page load all is fine. The DIV will show and hide when I change the drop down value. However when the DIV is hidden on page load the var div in the JavaScript is always null. I have tried var div = document.getElementById('<%=divMyDiv.ClientID%>'); but I get the same results. I have also tried moving the JS to the bottom of the page. Same results.
this.divMyDiv.Visible = false
...will prevent the div from being rendered at all and Javascript can't find it. If you still want to render it and use display:none to hide it, you'll want to do;
this.divMyDiv.Style["display"] = "none";
Setting an aspx control to Visible = false on the server side means that the control won't be rendered at all in the Html Response, and thus it isn't available at all client-side for javascript to use. You'll need to render it (Visible=true) but then Hide the control using css, e.g. style='display:none' or similar. See also Question regarding Visible=false and display:none;
If this property is false, the server control is not rendered. You should take this into account when organizing the layout of your page.
If you want the control to be rendered but not visible, you should leave Visble = true and hide the control using script or css.
div.style.display = 'none';
See http://msdn.microsoft.com/en-us/library/system.web.ui.control.visible.aspx
in code behind use
instead of
this.divMyDiv.Visible = false
use this
divMyDivAttributes.Add("display", "none");
It will then be rendered by javascript and your other java script function will run properly too
I came across an interesting quirk, and was wondering if anyone could help me understand it. A simple JavaScript-driven toggle button, as below, works beautifully if the display:none of the toggled element is contained in-line. However, when I move the CSS statement to the <style> tag in the header, or to a separate CSS file, it starts to toggle only on the second click, and from then on, it works fine, on a single-click-per-toggle basis. Here's the JS function:
<script>
function openSec(ordinal) {
var tab_name = "sec" + ordinal;
if (document.getElementById(tab_name).style.display == "none") {
document.getElementById(tab_name).style.display = "table";
} else {
document.getElementById(tab_name).style.display = "none";
}
}
</script>
When the CSS statement is in the style tag, it no longer exists as an attribute of the DOM element that is getting clicked. The browser is still applying the style, but the DOM element no longer has that value as a style attribute. So the first click, there is no display:none, so it adds it, then on the second click it replace it with table.
Use your browser's dev tools (or something like Firebug) to examine the initial HTML, then examine it again after the first click and I think you will see a difference.
I have tried things like the following, but to no avail. (I am a novice programmer, so be nice.)
document.getElementById('Button1').clicked = false;
document.getElementById('Button1').value = false;
document.getElementById('Button1').value = document.getElementById('Button1').defaultValue;
Use CSS to do this, you could use CSS visited property to show if the link is clicked
Normal buttons do not behave this way. Links do, but not buttons. I'm thinking anything that has an ID of 'Button1' in Your page is actually a link Some Text, that has a CSS style (or none at all) making it appear differently once You clicked it at least once, am i right?
If so, You don't need javascript for now. You should create (or edit an existing) CSS sheet, and style your "Button1" in it. How to do it? Read here
i have a php page that contains a table which i want to display only after clicking a link.
my problem is as follows:
i have a div that is set to display="none"
<div name="details" style="display:none;">
using a javascript, i change it to inline-table, or just block, doesn't matter for the case.
function showDetails(){
var elems = document.getElementsByName("details");
document.getElementById("dis").innerHTML = elems.length;
for (var i=0; i<elems.length; i++)
elems[i].style.display = "inline-table";
}
when i click the link that triggers this script, the div content is shown for a fraction of a second and disappears again..
here is a video of what it looks like:
http://dl.dropbox.com/u/17289984/SRFile2012_9_9_22_43_58_463.avi
i've checked some 5-6 pages of google links about changing display property, and of course checked stackoverflow, but found no relevant answers...
does anyone have a clue?
thanks in advance!
P.S. here is my full code:
http://codeviewer.org/view/code:299e
Remember that you are clicking an <a> tag, which is usually used for a link and they can send you to another page (that's exactly what's happening). Your href attribute is empty, so it's refreshing the page when you click it.
Try this:
show details
Notice return false;.
This will cancel the default action.
The name property is not supposed to be used like that (actually, it's deprecated and should never be used except for form fields). Change your code to:
<table class="details">
And use this to find them:
var elems = document.getElementByClassName("details");
Also, when setting the display property you should use "none" to hide an element and just an empty string to restore it to the browser default value (which can change from one browser to another):
elem.style.display = ""; // remove "none" value to make it visible.
The getElementByClassName feature doesn't exist in old browsers. A quick google search will find sample code to get it working in all browsers.
Also, #Lian is correct you should be returning false in the onclick.
your code in the link you provided says something different from what you posted here on SO. it says in the other code that you change visibility to visible only. Visibility is LOWER PRIORITY than display. If visibility is visible but display is still none, it means that the thing will still be invisible because display is still on none. You must totally forget about visibility and change ONLY the display none to a display block.