Jump to content

Using CSS display:none; and js


Skemcin

Recommended Posts

Ok, so this is another weird one for me:prefaceI'm working on a project were I have very limited control over the environment (which was designed for WYSIWYG users and not developers) I am developing in - think of it like a huge Content Management System that only allows me control of code that appears between the <body> tags - not including them. I can only use HTML, Javascript, CSS, XMl and XSL.historyThe CMS allows me to insert a predefined and preformatted login box for my users to use. The problem is it looks horrible and I have no control over its look and feel. The only fortunate thing is that it is statically classed, so I can overwrite the CMS CSS definition for it by assigning it display:none; - so that has been done. Now, I have created my own log in form that I display in my very restricted environment. Since I have to have the CMS login form on the page in order for this to work (.NET for ya) I wrote a javascript that will take the values from my form and populate them into the CMS form (which is hidden mind you) and when you press the return key (another js to capture that) or you click the "go arrow" (a script to capture that) the other script submits the form from the CMS button (and not form mine) because thats the only one the system will recognize - please do not bother asking why. That all works fine in IE and FF when the CMS login form is not hidden.When I envoke my CSS overwrite of the CMS login form, their form gets hidden so no onw vomits when they visit the site. But when I do that, FF is no longer able to use it for submitting the form. If it visible, everything works as it should - I enter information in my form, then it populates thier form and when I click return or my button, the system recognizes it. But as soon as I assign the class of the CMS form to display:none; all my form functionality is gone but only in Firefox, IE still allows the form to be posted.noteI am not posting code, this problem is more theoretical than syntactical - the code works.problemHas anyone encountered this before? In any case, why do you think the form objects would not be recognized in FF when the object they are wrapped in is rendered, but just not visible?last resortRather than display:none; I'll just relatively position the form 10,000 pixels to the left so its off the screen, but still (technically) rendered.

Link to comment
Share on other sites

Just to confirm you are hiding it with display:none?I don't know if the element.visible property that you can chaneg in JS is related to the ASP.Net Object.Visible property but in ASP.Net if Visible is set to false the element stops working to so I always have to set disply:none in order to hide elements and have them still work.I don't know if that helps. You could try making sure visible is set to true in js for the element

Link to comment
Share on other sites

last resortRather than display:none; I'll just relatively position the form 10,000 pixels to the left so its off the screen, but still (technically) rendered.

It sounds as though Firefox is acting correctly here and IE is breaking rules as usual.If you set an elements style to display:none that effectively removes the element from the page and you cannot use it.Instead set the elements style to visibility: hidden - This hides the element on the page but does not completely remove it. Kind of like an invisible man, he takes up space but you cant see him :)
Link to comment
Share on other sites

Just to confirm you are hiding it with display:none?I don't know if the element.visible property that you can chaneg in JS is related to the ASP.Net Object.Visible property but in ASP.Net if Visible is set to false the element stops working to so I always have to set disply:none in order to hide elements and have them still work.I don't know if that helps. You could try making sure visible is set to true in js for the element

yes, I am using display:none;
It sounds as though Firefox is acting correctly here and IE is breaking rules as usual.If you set an elements style to display:none that effectively removes the element from the page and you cannot use it.Instead set the elements style to visibility: hidden  - This hides the element on the page but does not completely remove it.  Kind of like an invisible man, he takes up space but you cant see him  :)

exactly what I was hoping/expecting to hear and confirm, thanks Scott. I'm quite happy with the placing the form off the page, but I'll try the invisible thing to see what that does. If the space that it consumes is still rendered but the form is just not visible, then there will be a problem - asthetically speaking. So, I could get around that by making it invisibile and absolutely position it somwhere. In that case, I'll just add the invisibilty to my last resort just for redundancy.Thanks again you too.The light at the end of the tunnel for this project is beginning to not look like a train. :)
Link to comment
Share on other sites

ok, its final. this is what I have to do:

	position:absolute;left:10000px;top:-10000px;visibility:hidden;

Visibility doesn't forfeit the real estate used to render the code - so I have a big block of space where their CMS form is rendered but not visible. So, I am doing that and keeping the absolute positioning to gain the space back.whew - 1 more issue down, 137 more on the list.:)time to revisit this issue now:http://w3schools.invisionzone.com/index.php?showtopic=5471

Link to comment
Share on other sites

I think this would do,

position:absolute;visibility:hidden;top:0;left:0;

I don't think you would need to hide it 10000 pixels of the screen anymore.The problem is fixed anyway so it's not a major thing,

Link to comment
Share on other sites

I think this would do,
position:absolute;visibility:hidden;top:0;left:0;

I don't think you would need to hide it 10000 pixels of the screen anymore.The problem is fixed anyway so it's not a major thing,

This would put it in the top left corner over top of what ever is rendered there making it not show up. Not a good idea :). Does't really how much it is moved as long as it is completely off the viewable screen.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...