Ruby on Rails 3. I am trying to get a button to show or hide a div.
This is not returning any errors but nothing happens.
<input type=button value="Show Archived Postings" onclick="showHide('oldNews');">
<div id="oldNews">
<%= render 'archive_news' %>
</div>
<script language="javascript" type="text/javascript">
function showHide(elementId) {
if (document.getElementById) {
var element = document.getElementById(elementId);
if (element.style.visibility == 'visible') {
element.style.visibility = 'hidden';
} else if (element.style.visibility == 'hidden') {
element.style.visibility = 'visible';
}
}
}
</script>
It will always render my 'archive_news'. What am I doing wrong? Thank you
You can use this code for your requirement. You can use style property for hide and display element when you click on button.
//this would hide when body is loaded
var element = document.getElementById('oldNews');
if(element != null){
element.style.display = 'none';
}
//this would hide when you click on input button
function showHide(elementId) {
var element = document.getElementById(elementId);
if (element != null) {
if(element.style.display != 'none'){
element.style.display = 'none';
}else{
element.style.display = 'block';
}
}
}
Related
function nes(){
if (document.getElementById('nes').style.display == 'block'){
document.getElementById('nes').style.display = 'none';
}
else if (document.getElementById('snes').style.display == 'block') {
document.getElementById('snes').style.display = 'none';
}
else if (document.getElementById('gba').style.display == 'block') {
document.getElementById('gba').style.display = 'none';
}
else if (document.getElementById('sega').style.display == 'block') {
document.getElementById('sega').style.display = 'none';
}
else if (document.getElementById('flash').style.display == 'block') {
document.getElementById('flash').style.display = 'none';
}
else if (document.getElementById('n64').style.display == 'block') {
document.getElementById('n64').style.display = 'none';
}
else if (document.getElementById('all').style.display == 'block') {
document.getElementById('all').style.display = 'none';
}
document.getElementById('snes').style.display = 'block';
}
<input id=nesdot type="image" src="C:\Users\Me\Documents\Website\Assets\Home Page\selection dot.png", onclick='nes()'/>
<div id=nes>
<input type="image" src="C:\Users\Sam Scolari\Documents\Totally Not An Arcade\Assets\Home Page\Adjusted Logos\NES.png"/>
</div>
<div id=all>
<input type="image" src="C:\Users\Sam Scolari\Documents\Totally Not An Arcade\Assets\Home Page\Adjusted Logos\A2Z.png"/>
</div>
I am trying to replace a picture that is in a div tag with javascript. When I click the button it seems to skip over all of the if and else statements and goes right to the single command at the end of the function. Is there something wrong with the syntax of the statements? It outputs to my website by adding the next image directly under the one that was supposed to be replaced. Any ideas? Thanks.
You might try this code:
function nes(){
var elem = document.getElementById('nes');
var displayStyleNes = null;
if (elem.style.display) {
displayStyleNes = elem.style.display;
} else if (elem.currentStyle) {
displayStyleNes = elem.currentStyle.display;
} else if (window.getComputedStyle) {
displayStyleNes = window.getComputedStyle(elem, null).getPropertyValue("display");
if (displayStyleNes === 'block'){
document.getElementById('nes').style.display = 'none';
}
//.....
}
Your IDs in HTML need quotes to be effective. The inspector won't prompt you any errors but the IDs will not be affected.
<input id="snes"/>
I assume that your function is wrapped in a script normally? If not, that is another problem!
Hope this helps :)
Quick question. I have a button defined as:
<input type='button' id='button' value='Development View' >
A div tag that encloses the following information:
echo "<div id = 'content' style='display:none'>";
echo "<th>Development Status</th>";
echo "</div>";
Some JavaScript that runs whenever the button is clicked:
var button = document.getElementById('button'); // Assumes element with id='button'
button.onclick = function() {
var div = document.getElementById('content');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
My ultimate goal is to toggle the visibility of a column in a dynamic HTML table but I can't even get this simple header tag toggling. I do not get an error message but the button does nothing it seems. I am echoing out the HTML because this is a PHP script.
Wrap your javascript in a window.onload event
window.onload = function () {
var button = document.getElementById('button'); // Assumes element with id='button'
button.onclick = function() {
var div = document.getElementById('content');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
}
};
I have a javascript function which should close the div on click. However, it works on the second click. How can I avoid that ?
JavaScript
function showhide(id) {
var e = document.getElementById(id);
if(e.style.display == 'block') {
e.style.display = 'none';
} else {
e.style.display = 'block';
}
}
HTML
<div id="foota123">
Content
<div onclick="showhide('foota123')" class="iks">X</div>
</div>
e.style refers to the style attribute of the div (style="..."). First time through, there is no style attribute on the div. The condition is false and the code sets a style attribute of:
<div style="display: block">
The second time through, the if condition is true, and the style of the block is set to "none". So it disappears.
Your code does not handles the computed style on the element, hence on first click the element is still in display:block.
Try this with jQuery:
function showhide(id) {
$('#'+id).toggle();
}
$.toggle() will show the element if it is hidden else hide.
The style property is empty by default; for example:
var e = document.createElement('div');
e.style.display; // ""
Simply reversing the condition should fix that:
function showhide(id) {
var e = document.getElementById(id);
e.style.display = e.style.display == 'none' ? 'block' : 'none';
}
Try this, if you want straight javascript, the jQuery answer is better though :)
function showhide(id) {
var e = document.getElementById(id);
if( e.style.display!=='none' ) e.style.display = 'none';
else e.style.display = 'block';
}
<div id="foota123">
Content
<div onclick="showhide('foota123')" class="iks">click me</div>
</div>
It works for me.
Html code
<div id="foota123">
Content
</div>
<div onclick="showhide('foota123')" class="iks">X</div>
Script
<script type="text/javascript">
function showhide(id) {
var e = document.getElementById(id);
if(e.style.display == 'block'){
e.style.display = 'none';
}
else{
e.style.display = 'block';
}
}
</script>
OR style="block" is also a better option.
I'm trying to make several divs and switch between them when different buttons are clicked.
Each div will hold something different, for instance the main div is visible on load, the rest are hidden and depending on which button you click you open that div while at the same time hiding the current div. Basically switching between divs smoothly without delay and such.
Below is what I got to, I have 2 divs, the main div is visible from get go, while the other is hidden in my css and when I click on button it displays, but my first div is still visible and I have to click button to make it hidden.
My question is how do I go about making an efficient if statement to make one div appear/visible by clicking a button while the current disappears and joins dosens other that are hidden until I click on their button?
I don't understand JavaScript very well and I want to understand how to do it so no JQuery please :)
And I'm asking about how to do this with divs because I don't know if there is any other way to do it, if there is then please share :)
Thanks
// Div One
var mainDiv = document.getElementById('button');
mainDiv.onclick = function() {
var div = document.getElementById('newpost');
if (div.style.display !== 'none') {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
};
// Div Two
var upgradesDiv = document.getElementById('button2');
upgradesDiv.onclick = function() {
var div = document.getElementById('UpgradesDiv');
if (div.style.display !== 'block') {
div.style.display = 'block';
} else {
div.style.display = 'none';
}
};
I may not fully understand ultimately what you're trying to do. But given your example, you could wrap your div tags in a container and pass some indentifier to your function:
JS
function toggleDiv(target){
var div = document.getElementById('wrapper').getElementsByTagName("div");
if (target == 1) {
div[0].style.display = 'none';
div[1].style.display = 'block';
} else {
div[0].style.display = 'block';
div[1].style.display = 'none';
}
};
HTML
<div id="button" onclick="toggleDiv(0)">one</div>
<div id="button2" onclick="toggleDiv(1)">two</div>
<div id="wrapper">
<div id="newpost"></div>
<div id="UpgradesDiv"></div>
</div>
FIDDLE
Regular; plain-old-javascript way:
function onComplete() {
hide(getById('newPost'));
hide(getById('upgrades'));
clickAndToggle('button1', ['newPost']);
clickAndToggle('button2', ['upgrades']);
}
function clickAndToggle(buttonId, toggleTargetIds) {
var mainDiv = getById(buttonId);
mainDiv.onclick = function() {
toggleTargetIds.forEach(function(targetId) {
toggle(getById(targetId));
});
};
}
function getById(id) {
return document.getElementById(id);
}
function toggle(el) {
window[!isVisible(el) ? 'show' : 'hide'].call(undefined, el);
}
function hide(el) {
el.style.display = 'none';
}
function show(el) {
el.style.display = '';
}
function isVisible(el) {
return el.style.display !== 'none' && el.style.visibility !== 'hidden';
}
document.onreadystatechange = function() {
var state = document.readyState;
if (state == 'complete') {
onComplete();
}
};
<input type="button" id="button1" value="Button #1" />
<input type="button" id="button2" value="Button #2" />
<br />
<div id="newPost">New Post!</div>
<div id="upgrades">Upgrades!</div>
jQuery way
You can use $.hide() and $.show() to toggle visibility.
$(document).ready(function() {
$('#newPost').hide();
$('#upgrades').hide();
clickAndToggle('#button1', ['#newPost']);
clickAndToggle('#button2', ['#upgrades']);
function clickAndToggle(buttonId, toggleTargetIds) {
$(buttonId).click(function() {
$.each(toggleTargetIds, function(idx, targetId) {
//if(!($(targetId).is(":visible"))){$(targetId).show();}else{$(targetId).hide();}
$(targetId).toggle();
});
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button1" value="Button #1" />
<input type="button" id="button2" value="Button #2" />
<br />
<div id="newPost">New Post!</div>
<div id="upgrades">Upgrades!</div>
To me this seems the most straightforward way of doing this:
var first = 'newpost';
var currentDiv = document.getElementById(first);
function addDivToggle(buttonId, divId)
{
var button = document.getElementById(buttonId);
var newDiv = document.getElementById(divId);
button.addEventListener('click', function(){
currentDiv.style.display = 'none';
newDiv.style.display = '';
currentDiv = newDiv;
});
}
addDivToggle('button1', 'newpost');
addDivToggle('button2', 'UpgradesDiv');
Here i'm assuming that 'newpost' is already visible, and the other divs are hidden.
// The doClick() functions does what onClick() is supposed to do when clicked manually.
// Div One
var mainDiv = document.getElementById('button');
mainDiv.onclick = function() {
var div = document.getElementById('newpost');
if (div.style.display !== 'none') {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
// add this function call
upgradesDiv.doClick();
};
// Div Two
var upgradesDiv = document.getElementById('button2');
upgradesDiv.onclick = function() {
var div = document.getElementById('UpgradesDiv');
if (div.style.display !== 'block') {
div.style.display = 'block';
} else {
div.style.display = 'none';
}
// add this function call
mainDiv.doClick();
};
I have an arrow on my site that I'd like if onclick, it hides one element, and shows another. Hitting it again, will hide the element that was shown and show the element that was hidden.
For example, I have
<div id="arrow">▾</div>
<div id="ad"></div>
<div id="description">Hidden</div>
<div id="nav">Also Hidden</div>
So at first, the ad is showing, and then one you've clicked the arrow, I'd like the ad to hide, and then unhide the description and nav.
With jQuery, use .toggle():
$("#arrow").click(function () {
$("#ad, #description, #nav").toggle();
});
DEMO.
With plain JavaScript, you need to toggle the display property of each element manually:
document.getElementById("arrow").onclick = function () {
var description = document.getElementById("description");
var nav = document.getElementById("nav");
var ad = document.getElementById("ad");
if (ad.style.display == 'none') {
ad.style.display = '';
nav.style.display = 'none';
description.style.display = 'none';
} else {
ad.style.display = 'none';
nav.style.display = '';
description.style.display = '';
}
};
DEMO.
Try this (Since you asked for plain javascript)
window.onload=function(){
var arrow=document.getElementById('arrow').getElementsByTagName('a')[0];
arrow.onclick=function(){
var ad=document.getElementById('ad');
var description=document.getElementById('description');
var nav=document.getElementById('nav');
if(ad.style.display=='none')
{
ad.style.display='block';
description.style.display='none';
nav.style.display='none';
}
else
{
ad.style.display='none';
description.style.display='block';
nav.style.display='block';
}
return false;
};
};
DEMO.
DEMO
<input id="x" value="x" />
<input id="y" value="y" style="visibility:hidden" />
<input type="button" onclick="toggleBoth()" value="arrow" />
.
function toggle(id){
var elem = document.getElementById(id);
if(elem.style.visibility == 'hidden')
elem.style.visibility = 'visible';
else
elem.style.visibility = 'hidden';
}
function toggleBoth()
{
toggle('x');
toggle('y');
}