I am trying to make a div, or a p element visible by a click of a button. Something like this in JavaScript:
document.getElementById("id").style.transition="visibility";
document.getElementById("id").style.visibility="visible";
Is this possible? Or am I just doing it wrong?
Assuming you want to use a transition to fade an element in, one approach is to use CSS (which can take advantage of hardware acceleration to offload the redraw to the GPU, if it's available).
To do this we can simply specify a CSS animation to run on all elements to be added, since I'm adding all elements to the same container element this can be achieved with the following:
#container * {
/* Webkit 35: */
-webkit-animation: fadeIn 1s linear;
/* Firefox 28, Opera 22, IE 11: */
animation: fadeIn 1s linear;
}
On loading the page, the specified animation will run; the animation being:
/* defining an animation '@keyframes', naming the animation 'fadeIn': */
@keyframes fadeIn {
/* the starting point: */
from {
/* the starting property and property-value: */
opacity: 0;
}
/* the finishing point: */
to {
/* the finishing property and property-value: */
opacity: 1;
}
}
(The -webkit-prefixed version is in the linked demo, and is exactly the same except for the first few characters, which contain the vendor-prefixed @-webkit-keyframes).
To add the elements we use the, almost entirely arbitrary, JavaScript:
function createElem () {
// gets the value of the first 'select' element contained within
// a 'label' element:
var elemType = document.querySelector('label select').value.toLowerCase(),
// creates a new element, and retains a reference to that
// created-element:
elem = document.createElement(elemType);
switch (elemType) {
// if we created an 'input' or a 'textarea'
case 'input':
case 'textarea':
// we set the value property of that element to the string:
elem.value = 'created a new ' + elemType + ' element.';
break;
// if we created an 'img' element:
case 'img':
// we set the 'alt' property:
elem.alt = 'created a new ' + elemType + ' element.';
break;
// otherwise we assume the default is true,
default:
// and we set the textContent of the element:
elem.textContent = 'created a new ' + elemType + ' element.';
break;
}
// in all cases we set the 'title' property:
elem.title = 'created a new ' + elemType + ' element.';
// and we add the created-element to the element with the 'id' of
// 'container'
document.getElementById('container').appendChild(elem);
}
// add a 'click' event-handling function to the (first) 'button' element:
document.querySelector('button').addEventListener('click', createElem);
References:
The below code illustrates two methods to show hidden elements (works just fine on DIVs or P tags). Main difference: an element with visibility: hidden still occupies space on the page, i.e. other elements wrap around it - an element with display: none does not influence the wrapping or position of other elements.
<html>
<head>
<style type="text/css">
#p1 { visibility: hidden; }
#p2 { display: none; }
</style>
<script type="text/javascript">
function btn1click() {
document.getElementById("p1").style.visibility = "visible";
}
function btn2click() {
document.getElementById("p2").style.display = "block";
}
</script>
</head>
<body>
<button id="btn1" onclick="btn1click()">button 1</button>
<button id="btn2" onclick="btn2click()">button 2</button>
<p id="p1" style="visibility: visible;">Paragraph one</p>
<p id="p2" style="display: block;">paragraph two</p>
</body>
</html>
Here is a JSfiddle so you can test it out http://jsfiddle.net/jrulle/3u5Z2/
Try pressing the 2nd button first to see how visibility and display behave differently.
