Difference between revisions of "Template:IISc Bangalore/sidebar.js"

(Created page with "<script> .closebtn { position: absolute; top: 0px; right: 0px; font-size: 36px !important; →‎margin-left: 50px;: } @media screen and (max-height: 450px)...")
 
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
<html>
 
<script>
 
<script>
  
−
.closebtn {
+
function closeTab() {
−
    position: absolute;
+
  document.getElementById("person1Tab").style.width = "0";
−
    top: 0px;
+
  document.getElementById("person2Tab").style.width = "0";
−
    right: 0px;
+
  document.getElementById("person3Tab").style.width = "0";
−
    font-size: 36px !important;
+
  document.getElementById("person4Tab").style.width = "0";
−
    /*margin-left: 50px;*/
+
  document.getElementById("person5Tab").style.width = "0";
 +
  document.getElementById("person6Tab").style.width = "0";
 +
  document.getElementById("person7Tab").style.width = "0";
 +
  document.getElementById("person8Tab").style.width = "0";
 +
  document.getElementById("person9Tab").style.width = "0";
 +
  document.getElementById("person10Tab").style.width = "0";
 +
  document.getElementById("person11Tab").style.width = "0";
 +
  document.getElementById("person12Tab").style.width = "0";
 +
  document.getElementById("person13Tab").style.width = "0";
 +
  document.getElementById("person14Tab").style.width = "0";
 
}
 
}
−
@media screen and (max-height: 450px) {
+
function openPerson1() {
−
     .sidebar {padding-top: 15px;}
+
     document.getElementById("person1Tab").style.width = "100%";
−
    .sidebar a {font-size: 18px;}
+
 
}
 
}
−
.person1Tab, .person2Tab, .person3Tab, .person4Tab {
+
function openPerson2() {
−
  height: 100%;
+
    document.getElementById("person2Tab").style.width = "100%";
−
  width: 0;
+
−
  position: fixed;
+
−
  z-index: 1;
+
−
  top: 0px;
+
−
  left: 0;
+
−
  overflow-x: hidden;
+
−
  overflow-y: hidden;
+
−
  /*padding-top: 80px;*/
+
−
  transition: 0.5s;
+
 
}
 
}
−
.person1Tabcontent > .closebtn, .person2Tabcontent > .closebtn, .person3Tabcontent > .closebtn, .person4Tabcontent > .closebtn {
+
function openPerson3() {
−
  position: absolute;
+
    document.getElementById("person3Tab").style.width = "100%";
−
  top: 0px;
+
−
  right: 20px;
+
−
  font-size: 36px !important;
+
−
 
+
 
}
 
}
−
.person1Tabcontent, .person2Tabcontent, .person3Tabcontent, .person4Tabcontent {
+
function openPerson4() {
−
  margin: auto;
+
    document.getElementById("person4Tab").style.width = "100%";
−
  padding: 40px;
+
−
  color: #fff;
+
−
  background-color:#32383C;;
+
−
  height: 90vh;
+
−
 
+
 
}
 
}
−
.trans {
+
function openPerson5() {
−
  background-color: hsla(0, 0%, 18%, 0);
+
    document.getElementById("person5Tab").style.width = "100%";
−
  height: 85px;
+
 
}
 
}
−
 
+
function openPerson6() {
−
 
+
    document.getElementById("person6Tab").style.width = "100%";
−
/*.person4Tab, .person5Tab, .person6Tab, .person7Tab, .person8Tab, .person9Tab {
+
−
  height: 100%;
+
−
  width: 0;
+
−
  position: fixed;
+
−
  z-index: 1;
+
−
  top: 0px;
+
−
  left: 0;
+
−
  overflow-x: hidden;
+
−
 
+
−
  /*padding-top: 80px;
+
−
  transition: 0.5s;
+
 
}
 
}
−
.person4Tabcontent > .closebtn, .person5Tabcontent > .closebtn, .person6Tabcontent > .closebtn, .person7Tabcontent > .closebtn, .person8Tabcontent > .closebtn, .person9Tabcontent > .closebtn, {
+
function openPerson7() {
−
  position: absolute;
+
    document.getElementById("person7Tab").style.width = "100%";
−
  top: 0px;
+
}
−
  right: 20px;
+
function openPerson8() {
−
  font-size: 36px !important;
+
    document.getElementById("person8Tab").style.width = "100%";
−
 
+
}
 +
function openPerson9() {
 +
    document.getElementById("person9Tab").style.width = "100%";
 +
}
 +
function openPerson10() {
 +
    document.getElementById("person10Tab").style.width = "100%";
 +
}
 +
function openPerson11() {
 +
    document.getElementById("person11Tab").style.width = "100%";
 +
}
 +
function openPerson12() {
 +
    document.getElementById("person12Tab").style.width = "100%";
 +
}
 +
function openPerson13() {
 +
    document.getElementById("person13Tab").style.width = "100%";
 +
}
 +
function openPerson14() {
 +
    document.getElementById("person14Tab").style.width = "100%";
 
}
 
}
−
.person4Tabcontent, .person5Tabcontent, .person6Tabcontent, .person7Tabcontent, .person8Tabcontent, .person9Tabcontent, {
 
−
  margin: auto;
 
−
  padding: 40px;
 
−
  color: #fff;
 
−
  background-color:#32383C;;
 
−
  height: 90vh;
 
−
}*/
 
−
 
  
 
</script>
 
</script>
 +
</html>

Latest revision as of 14:50, 18 October 2016