CODEWITHSUNDEEP
javascriptphphtmlcss
user3766182
user3766182

Reputation: 15

hide the extra spacing taken by visibility:hidden

hello i want to hide the extra spacing taken by visibility:hidden. In the code when i select sort by date then it is replaced by default content, but when select sort by topic it comes under sort by date output. But i don't want this. I want to replace o/p of sort of topic to sort by date. I think it comes because of using visibility:hidden. Can anyone suggest me how i remove that space. I used display:none too, but no use.

<html>
<head>
<script>
function onloadfun()
{
  document.getElementById("hideall").style.visibility="hidden";
}
function optionCheck()
{
    if( document.getElementById("sorting").value=="bydate")
    {
        document.getElementById("topic1").style.visibility ="visible";
        document.getElementById("topic").style.visibility ="hidden";
        document.getElementById("showByDefault").style.display ="none";
    }
    if( document.getElementById("sorting").value =="bytopic")
    {
        document.getElementById("topic1").style.visibility ="hidden";
        document.getElementById("topic").style.visibility ="visible";
        document.getElementById("showByDefault").style.display ="none";
    }
// validation of dropdownlist
    var x = document.getElementById("sorting");
    var option = x.options[x.selectedIndex].value;
    var strUser1 = x.options[x.selectedIndex].text;
    if(option=="s")
    {
        document.form.options.focus();
        return false;
    }
return true;    
}
</script>
</head>
<body onLoad="onloadfun()">
<form name="form">
<select id="sorting" style="width:140px" onChange="optionCheck()">
  <option id="s">---Sort By----</option>
  <option value="bydate">Sort By Date</option>
  <option value="bytopic">Sort By Topic</option>  
</select>
</form>
<br /><br /><hr /><br /><br />

<?php   include 'connection.php';  ?>
<div id="showByDefault">
<?php
  echo "default content";   
?>
</div>
<div id="hideall">
    <div id="topic1">
      <?php echo "hideing 1"; ?>
    </div>

    <div id="topic">
      <?php echo "hideing 2"; ?>
    </div>
</div>
</body>
</html>

Upvotes: 1

Views: 5626

Answers (3)

Xotic750
Xotic750

Reputation: 23472

Some reading:

visibility

The visibility CSS property has two purposes:

  1. The hidden value hides an element but leaves space where it would have been. The collapse value hides rows or columns of a table. It
  2. also collapses XUL elements

display

In addition to the many different display box types, the value none lets you turn off the display of an element; when you use none, all descendant elements also have their display turned off. The document is rendered as though the element doesn't exist in the document tre

An example based on your code but using display and setting it by a class using Element.classList.

var sorting = document.getElementById('sorting'),
    showByDefault = document.getElementById('showByDefault'),
    topic = document.getElementById('topic'),
    topic1 = document.getElementById('topic1');

sorting.addEventListener('change', function optionCheck(e) {
    var target = e.target;

    if (target.value === 's') {
        console.log('Do something here.');
    } else if (target.value === 'bydate') {
        topic1.classList.remove('hide');
        topic.classList.add('hide');
        showByDefault.classList.add('hide');
    } else if (target.value === 'bytopic') {
        topic1.classList.add('hide');
        topic.classList.remove('hide');
        showByDefault.classList.add('hide');
    }
}, false);
#sorting {
    width: 140px;
}
hr {
    margin-top: 2em;
    margin-bottom: 2em;
}
.hide {
    display: none;
}
<form name="form">
    <select id="sorting">
        <option value="s">---Sort By----</option>
        <option value="bydate">Sort By Date</option>
        <option value="bytopic">Sort By Topic</option>
    </select>
</form>
<hr>
<div id="showByDefault">"default content";</div>
<div id="topic1" class="hide">"hiding 1";</div>
<div id="topic" class="hide">"hiding 2";</div>

The example is using unobtrusive JavaScript and unobtrusive CSS.

The principles of unobtrusive JavaScript

Upvotes: 2

kamlesh.bar
kamlesh.bar

Reputation: 1804

Change your code as follows. I preferred to use display:block and display:none instead set visiblity and also recommend jquery $(selector).show() and $(selector).hide() method.

        <html>
<head>
    <script>
        function onloadfun() {
            document.getElementById("hideall").style.display = "none";
        }

        function optionCheck() {
            if (document.getElementById("sorting").value == "bydate") {
                document.getElementById("hideall").style.display = "block";
                document.getElementById("topic1").style.display = "block";

                document.getElementById("topic").style.display = "none";
                document.getElementById("showByDefault").style.display = "none";
            }
            if (document.getElementById("sorting").value == "bytopic") {

                document.getElementById("hideall").style.display = "block";
                document.getElementById("topic1").style.display = "none";
                document.getElementById("topic").style.display = "block";
                document.getElementById("showByDefault").style.display = "none";
            }
            // validation of dropdownlist
            var x = document.getElementById("sorting");
            var option = x.options[x.selectedIndex].value;
            var strUser1 = x.options[x.selectedIndex].text;
            if (option == "s") {
                document.form.options.focus();
                return false;
            }
            return true;
        }
    </script>
</head>
<body onLoad="onloadfun()">
    <form name="form">
        <select id="sorting" style="width:140px" onChange="optionCheck()">
            <option id="s">---Sort By----</option>
            <option value="bydate">Sort By Date</option>
            <option value="bytopic">Sort By Topic</option>
        </select>
    </form>
    <br />
    <br />
    <hr />
    <br />
    <br />

    <?php //include 'connection.php'; ?>
    <div id="showByDefault">
        <?php echo "default content"; ?>
    </div>
    <div id="hideall">
        <div id="topic1">
            <?php echo "hideing 1"; ?>
        </div>
        <div id="topic">
            <?php echo "hideing 2"; ?>
        </div>
    </div>
</body>

Try changing above three function in your code.

Upvotes: 1

Umair Sultan
Umair Sultan

Reputation: 656

Use display:none instead of visibility hidden.
See example: http://www.w3schools.com/css/css_display_visibility.asp

Upvotes: 0

Related Questions