Change <div> visibility dynamically

Question

0.00/5 (No votes)

See more:

Javascript

HTML

I am testing a piece of code to dynamically change a

block's visibility. The code below works to change the visibility from visible to hidden. However, if initially the

visibility='hidden', the variable: v in the JS is null, and thus the

block's style can't be altered. What's the proper solution to solve this problem? I want to dynamically turn the

block from 'hidden' to 'visible'. Thanks.

HTML

        <div id="test_div" class="app1" style="visibility:visible;">
            This is a test
        </div>
......
            function addRecord() {
                debugger;
                var v = document.getElementById('test_div');
                v.style.visibility='visible';
            }

Posted 7-Oct-15 6:39am

s yu

Updated 7-Oct-15 7:33am

v2

Add a Solution

Comments

F-ES Sitecore 7-Oct-15 13:16pm

You are getting a div with id test_div but your markup doesn't have that id on it. Is that a typo? BTW you might want to use display "none" and "block" rather than visibility.

s yu 7-Oct-15 13:36pm

Sorry for my mistake in posting, actually, there is the id (see updated code above). By the way, using a 'stupid' way, I can avoid this problem. The approach is described below:
1) Define the .css
.app1 {
/* background: url("../images/linen.jpg") repeat-x scroll left top transparent; */
height: 1000px;
width: 600px;
margin-left: 500px;
z-index: 999999 !important;
visibility: visible;
padding:50px; /* will leave the inner space*/
position: fixed; /*fixed irrespective of scroll bars*/
top: 100px; /* will display the 100px far from the top*/
left: 100%; /* will display 40% far from the left side */
}
where the left is 100%.
2) In the JS:
var v = document.getElementById('test_div');
v.style.left = '10%';
which bring the <block> to the desired place.
Thanks.

Richard Deeming 7-Oct-15 14:11pm

I can't reproduce the problem in Firefox with the steps you've given.

Can you reproduce the problem in a JSFiddle[^] and post the link here?

Also include the name and version of the browser you're using.

ZurdoDev 7-Oct-15 14:15pm

I don't think that is the problem. Do you mean you set Visible=false in either ASPX or C#?

s yu 8-Oct-15 9:04am

JS code , not ASP.Net code-behind.

ZurdoDev 8-Oct-15 9:07am

Well, as Richard said, I can't see being able to reproduce it. Try posting a js fiddle so we can see it.

Sergey Alexandrovich Kryukov 7-Oct-15 17:32pm

What's wrong with reading JavaScript/DOM/CSS documentation?
—SA

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2015-10-07T11:31:00

There are different ways to change visibility at anytime. Which one to use? it depends on the purpose, on how it should affect the layout. Note that invisible element may sometimes take place. So, here are some options:

JavaScript

function hide(object) { object.style.visibility = "hidden"; }
function show(object) { object.style.visibility = null; }

//by changing display style:
function hideDisplay(object) { object.style.display = 'none'; }
function showDisplay(object) {
    object.style.display = 'block'; /* or whatever you want to use */
}

// with complete removal of children:
function SomeControl() {

   // some elements:
   parent = //...
   oneChild = //...
   anotherChild = //...
 
   this.hideChildren = function() {
      [oneChild, anotherChild].forEach(function (element) {
          parent.removeChild(element);
      });
   }
   this.showChildren = function() {
      // provided they should be at the end
      [anotherChild, oneChild].forEach(function (element) {
          parent.appendChild(element);
      });
   )

} //SomeControl constructor
// I'll leave for your home exercises the case
// when the hidden/shown children are somewhere in the middle

I'm sure it's not all. You can find a lot of further detail, for example, in this documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS[^],
https://developer.mozilla.org/en-US/docs/Web/API/Document[^].
https://developer.mozilla.org/en-US/docs/Web/API/Node[^],
https://developer.mozilla.org/en-US/docs/Web/JavaScript[^].

(Please see my comment to the question.)

—SA

Sergey Alexandrovich Kryukov · Answer 2 · 2015-10-07T11:41:00

In addition to Solution 2:

jQuery provides all you need for such manipulations:
http://api.jquery.com/show[^],
http://api.jquery.com/hide[^],
https://api.jquery.com/category/manipulation[^],
and so on…

If you need to learn jQuery (highly recommended), please see:
http://en.wikipedia.org/wiki/JQuery,
http://jquery.com,
http://learn.jquery.com,
http://learn.jquery.com/using-jquery-core,
http://learn.jquery.com/about-jquery/how-jquery-works (start from here).

Remember that jQuery is designed with compatibility in mind.

—SA

Krunal Rohit · Answer 3 · 2015-10-07T18:41:00

Well, if you want to dynamically show/hide the div, you can use jQuery show()/hide() methods. It's very easy.

Let's say you want to show the div on button click, which would hidden initially (there are different ways to make it hide ;).)
But first, see this:

JavaScript

$(document).ready(function() {
    $("#test_div").hide();
    $("#myBtn").click(function() {
        $("#test_div").show();    // or .fadeIn() for transition
    });
});

Now, if you want to toggle the visibility of div on button click, so you'd make on css class like this,

CSS

.toogle{
    display: none;
}

And the jQuery:

JavaScript

$(document).ready(function() {
    $("#test_div").addClass("toggle");
    $("#myBtn").click(function() {
        $("#test_div").toggleClass("toggle");  
});

Please refer the documentation for more idea. And here's an excellent example of hide/show on W3C[^].

Cheers !

-KR

Change <div> visibility dynamically

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0