membd

Friday, August 28, 2015

page portion change in onclick without loading page using pure JavaScript (like bootstrap tabs and pills)

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li><a onclick="event.preventDefault(); profile_function()" href="#">profile</a></li>
<li><a onclick="event.preventDefault(); contact_function()" href="#">contact</a></li>
<li><a onclick="event.preventDefault(); portfolio_function()" href="#">portfolio</a></li>

</ul>
<div id="main">
<div id="profile">
<h1>This is the profile section</h1>
</div>
<div id="contact">
<h1>This is the contact section</h1>
</div>
<div id="portfolio">
<h1>This is the portfolio section</h1>
</div>
<script>
var main = document.getElementById('main');
var profile = document.getElementById('profile');
var contact = document.getElementById('contact');
var portfolio = document.getElementById('portfolio');
main.removeChild(profile);
main.removeChild(contact);
main.removeChild(portfolio);
main.appendChild(profile);
presentNode = "profile";
previousNode = "profile";

function adjust() {
switch (previousNode){
case "profile":
main.removeChild(profile);
break;
case "contact":
main.removeChild(contact);
break;
case "portfolio":
main.removeChild(portfolio);
break;
default :
break;
}
previousNode = presentNode;
switch (presentNode){
case "profile":
main.appendChild(profile);
break;
case "contact":
main.appendChild(contact);
break;
case "portfolio":
main.appendChild(portfolio);
break;
default :
break;
}
}

function profile_function() {
presentNode = "profile";
adjust();
}
function contact_function() {
presentNode = "contact";
adjust();
}
function portfolio_function() {
presentNode = "portfolio";
adjust();
}
</script>
</div>
</body>
</html>

Friday, August 28, 2015

page portion change in onclick without loading page using pure JavaScript (like bootstrap tabs and pills)

css snippet for blogger code highlighting