hide the extra spacing taken by visibility:hidden
Question
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>
3 answers
solution1
1 ACCPTED 2015-02-07 05:16:27
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.
solution2
1 2015-02-07 06:19:27
Some reading:
The visibility CSS property has two purposes:
- 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
- also collapses XUL elements
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.
solution3
0 2015-02-07 05:11:11
Use display:none instead of visibility hidden .
See example: http://www.w3schools.com/css/css_display_visibility.asp
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.