We Keep Coding

Show/hide text area box + swap between image onclick

I am creating form page where I wanted to hide text area box when clicked on image as well as to swap the image and vice-versa. Right now I am able to hide/show div but image is not displayed when text area box is hidden and also does not return to first image. There are 2 scripts one for div show/hide and another to swap image.
1. image: output before click
2. image: after hitting on an image
<script>
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}
var onImg= "testim.png, valm.png";
var offImg= "testip.png, valp.png";
</script>
<div style="margin-top: 10px; text-align: center;">
<ul id="text_type_tab" name="text_type_tab">
<li id="PR_TEXT_TAB" class="tab_active"> <img src="testim.png" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></li>
</ul>
</div>
<table id="hidden_content" width="80%" align="center" style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px">
<tr>
<td colspan="2">
<textarea id="textInputField1" name="textInputField1" style="resize:vertical; width: 900px;" rows="15" cols="105" wrap="pre" onblur="onTextSubmitFunction('Apply')"></textarea>
</td>
</tr>
</table>
Please help.
Thanks a lot, in advance!
[1]: http://i.stack.imgur.com/7PwdK.png
[2]: http://i.stack.imgur.com/5j6FE.png

Pointer 1
Change the below variable to the absolute link of your image
var onImg= "testim.png, valm.png"; //this should be one link
var offImg= "testip.png, valp.png"; //this should be one link
(Just to be on the safe side for testing test)
example
var onImg= "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSHrNNGyEGlgXtd5u4fq1eQ18z8TMXHCZqf_4zI9yz6uo7N8KeXuFVRr-tR";
var offImg= "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8x25Dihzxt-pilDC6-SAVJ8JEVB4VItyjJhRFFuAGNFPx5YBbR5rQST01";
Pointer 2
change
<li id="PR_TEXT_TAB" class="tab_active"> <img src="testim.png" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></li>
</ul>
to this
<li id="PR_TEXT_TAB" class="tab_active"> <img src="testim.png" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></li>
</ul>
that is it should be </a></li> instead of </li></a>
Pointer 3
Change this
<a href="javascript:showhide('textInputField1');">
to this
<a href="#" onclick="javascript:showhide('textInputField1')">
Attach it directly to the onclick event since href attribute simply points to a location.
here is a snippet
- <script>
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
obj.style.display == "none"?obj.style.display = "":obj.style.display = "none";
// if (obj.style.display == "none"){
// obj.style.display = "":;
// }
//else {
// obj.style.display = "none";
//}
}
}
var onImg= "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSHrNNGyEGlgXtd5u4fq1eQ18z8TMXHCZqf_4zI9yz6uo7N8KeXuFVRr-tR";
var offImg= "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8x25Dihzxt-pilDC6-SAVJ8JEVB4VItyjJhRFFuAGNFPx5YBbR5rQST01";
</script>
<div style="margin-top: 10px; text-align: center;">
<ul id="text_type_tab" name="text_type_tab">
<li id="PR_TEXT_TAB" class="tab_active"> <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8x25Dihzxt-pilDC6-SAVJ8JEVB4VItyjJhRFFuAGNFPx5YBbR5rQST01" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></li>
</ul>
</div>
<table id="hidden_content" width="80%" align="center" style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px">
<tr>
<td colspan="2">
<textarea id="textInputField1" name="textInputField1" style="resize:vertical; width: 900px;" rows="15" cols="105" wrap="pre" onblur="onTextSubmitFunction('Apply')"></textarea>
</td>
</tr>
</table>

Trying to get a button to unhide pictures [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I'm trying to get a button within my HTML to display images that are hidden when it is clicked. I'm super new to working with jquery/js so any help that anyone would have is most appreciated.
Html for the input field and the button that should fire off the script:
<div class="col-md-3">
<div>Select City</div>
<input type="text" id="citySelector">
</div>
<button type="button" class="btn btn-primary" id="findHotel" data-dismiss="modal">Find Hotel</button>
Html for the images that would be displayed
<div class="container-fluid col-md-8 col-md-offset-3" id="chicagoResults">
<table>
<tr>
<td><img src="images/hotels/chicago/chicago1.png" id="chicagoHotels"></td>
</tr>
<tr>
<td><img src="images/hotels/chicago/chicago2.png" id="chicagoHotels"></td>
</tr>
</table>
</div>
CSS:
#chicagoResults {
color: #f6f1ed;
margin-top: 110px;
margin-left: 180px;
display: none;
}
JS:
var citySelector = $("#citySelector").val().trim();
$("#findHotel").click(citySearch);
function citySearch () {
if (citySelector === "New York"){
document.('nyResults').style.display = "block";
}
else if (citySelector === "Chicago"){
document.('chicagoResults').style.display = "block";
}
});

You have to correct those lines :
document.('nyResults').style.display = "block";
document.('chicagoResults').style.display = "block";
By adding getElementById after document. :
document.getElementById('nyResults').style.display = "block";
document.getElementById('chicagoResults').style.display = "block";
Also your function should end by } and not });, and you have to pass value of field to your function so add parameter to your function definition.
Hope this helps.
$("body").on('click', "#findHotel", function()
{
citySearch($("#citySelector").val().trim());
});
function citySearch (citySelector)
{
if (citySelector === "New York")
$('#nyResults').show();
else if (citySelector === "Chicago")
$('#chicagoResults').show();
}
#chicagoResults, #nyResults {
color: #f6f1ed;
margin-top: 110px;
margin-left: 180px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div>Select City</div>
<input type="text" id="citySelector">
<button type="button" id="findHotel">find Hotel</button>
</div>
<div class="container-fluid col-md-8 col-md-offset-3" id="chicagoResults">
<table>
<tr>
<td><img src="https://foto.hrsstatic.com/fotos/3/3/256/256/80/FFFFFF/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F0%2F0%2F0%2F2%2F000279%2F000279_a_3979595.jpg/Tw1WKUCVIFelYvywT6gzeQ%3D%3D/259,140/6/WYNDHAM_GRAND_CHICAGO_RIVERFRO-Chicago-Exterior_view-3-279.jpg" id="chicagoHotels"></td>
</tr>
</table>
</div>
<div class="container-fluid col-md-8 col-md-offset-3" id="nyResults">
<table>
<tr>
<td><img src="http://foto.hrsstatic.com/fotos/0/3/256/256/80/000000/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F5%2F4%2F7%2F5%2F547591%2F547591_z_4564886.jpg/jJ7hmPcA3%2F9wQG%2BKfy0p8g%3D%3D/560,373/6/RADISSON_BLU_AQUA_CHICAGO-Chicago-Room-21-547591.jpg" id="chicagoHotels"></td>
</tr>
</table>
</div>

try changing this:
document.('nyResults').style.display = "block";
document.('chicagoResults').style.display = "block";
to this:
$('#nyResults').show();
$('#chicagoResults').show();
Final Code:
$("#findHotel").click(function() {
var citySelector = $("#citySelector").val().trim();
if (citySelector === "New York"){
$('#nyResults').show();
} else if (citySelector === "Chicago"){
$('#chicagoResults').show();
}
});

I would recommend learning the basics of javascript itself before diving into a library.
That being said, (despite the syntax errors) there are a couple problems with your code:
Your click event defines a function, but never calls it.
You need to call a function for the code inside of it to be executed.
You're using a Table to hold your layout.
A <Table> tag used for presentation purposes is the scourge of good web design. Use divs and style them as tables if need be with display: table and display: table-cell but do not use the <Table> tag unless you're filling it with tabular data.
$(function(){
var findButton = $("#find-button");
var chicagoResults = $("#chicagoResults");
findButton.on("click", function(){
var input = $("#city-selector").val().trim().toLowerCase();
if(input === "chicago"){
chicagoResults.css({display: "block"});
}
else if(input === "new york"){
//show new york block
}
});
});
#chicagoResults {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div>Select City</div>
<input type="text" id="city-selector">
</div>
<button id="find-button">FindHotel</button>
<div class="container-fluid col-md-8 col-md-offset-3" id="chicagoResults">
<p>yay</p>
</div>

javascript css change overiding css

Sorry for the unclear question title...couldn't think how to put the question in a shirt summary.
I have css to change the background-color of a link when hovered over (with css transistion to fade the color in).
Due the nature of the requirement, I use JS to change the background color of the link which is in use (I have tabs, the selected one's background is selected using JS - getElementById('foo').style.backgroundColor = 'red';).
Even after a tab has been selected, I want the others to change color when hovering.
It works initially but once I have clicked on a tab (JS then changes that tab's color), the hover css style does not work - the other links no longer change color when hovering.
Has anyone else had the same problem?
HTML:
<div class="software_section_selects_wrapper">
<a id="a1" onclick="displayArrow('1')">OVERVIEW</a>
<a id="a2" onclick="displayArrow('2')">SPECS</a>
<a id="a3" onclick="displayArrow('3')">COMMENTS</a>
<div style="clear: both;"></div>
</div>
<div class="section_selects_arrow_wrapper">
<img id="red1"alt="" src="images/red_arrow.png" width="40px" height="20px"/>
<img id="red2"alt="" src="images/red_arrow.png" width="40px" height="20px"/>
<img id="red3"alt="" src="images/red_arrow.png" width="40px" height="20px"/>
</div>
<div id="overview" class="software_overview">
</div>
<div id="specs" class="software_overview">
</div>
<div id="comments" class="software_overview">
</div>
JS:
function displayArrow(arrow) {
var which_arrow = arrow;
if (which_arrow == '1') {
document.getElementById('a1').style.backgroundColor = 'red';
document.getElementById('a2').style.backgroundColor = 'black';
document.getElementById('a3').style.backgroundColor = 'black';
document.getElementById('red1').style.display = 'block';
document.getElementById('red2').style.display = 'none';
document.getElementById('red3').style.display = 'none';
document.getElementById('overview').style.display = 'block';
document.getElementById('specs').style.display = 'none';
document.getElementById('comments').style.display = 'none';
} else if (which_arrow == '2') {
document.getElementById('a2').style.backgroundColor = 'red';
document.getElementById('a1').style.backgroundColor = 'black';
document.getElementById('a3').style.backgroundColor = 'black';
document.getElementById('red2').style.display = 'block';
document.getElementById('red1').style.display = 'none';
document.getElementById('red3').style.display = 'none';
document.getElementById('specs').style.display = 'block';
document.getElementById('overview').style.display = 'none';
document.getElementById('comments').style.display = 'none';
} else {
document.getElementById('a3').style.backgroundColor = 'red';
document.getElementById('a2').style.backgroundColor = 'black';
document.getElementById('a1').style.backgroundColor = 'black';
document.getElementById('red3').style.display = 'block';
document.getElementById('red1').style.display = 'none';
document.getElementById('red2').style.display = 'none';
document.getElementById('comments').style.display = 'block';
document.getElementById('overview').style.display = 'none';
document.getElementById('specs').style.display = 'none';
}
}

This line of code:
document.getElementById('a2').style.backgroundColor = 'black';
adds an inline style which is stronger than :hover styling coming from the stylesheet.
Instead of adding the inline style, reset it to nothing:
document.getElementById('a2').style.backgroundColor = '';

I think his is what you are looking for
<div class="software_section_selects_wrapper">
<a id="a1" onclick="displayArrow('1')" onmouseover="MouseHoverMethod(this)" onmouseout="MouseOutMethod(this)">OVERVIEW</a>
<a id="a2" onclick="displayArrow('2')" onmouseover="MouseHoverMethod(this)" onmouseout="MouseOutMethod(this)">SPECS</a>
<a id="a3" onclick="displayArrow('3')" onmouseover="MouseHoverMethod(this)" onmouseout="MouseOutMethod(this)">COMMENTS</a>
<div style="clear: both;"></div>
</div>
Add following javascript functions and change the color as you need.
function MouseHoverMethod(x) {
x.style.backgroundColor = 'green';
}
function MouseOutMethod(x) {
x.style.backgroundColor = 'black';
}

Your code is far to complicated. You are breaking rule #1 of programming: DRY - Don't repeat yourself.
Also there is no need to set the color with JavaScript, instead set a class to to selected item and use that to style it.
Example: (without the red arrow stuff, because without the style sheet it's difficult to see what you are doing there, and it probably could be replaced with some pure CSS, too):
<div class="software_section_selects_wrapper">
<a onclick="displayTab(this, 'overview')">OVERVIEW</a>
<a onclick="displayTab(this, 'specs')">SPECS</a>
<a onclick="displayTab(this, 'comments')">COMMENTS</a>
<div style="clear: both;"></div>
</div>
<div class="tabs">
<div id="overview" class="software_overview">
</div>
<div id="specs" class="software_overview">
</div>
<div id="comments" class="software_overview">
</div>
</div>
JS:
<script>
function clearClass(elements) {
for (var i = 0; i < elements.length; i++) {
elements[i].className = '';
}
}
function displayTab(link, tabId) {
var links = link.parentNode.getElementsByTagName('a');
clearClass(links);
link.className = 'active';
var tab = document.getElementById(tabId);
var tabs = tab.parentNode.getElementsByTagName('div');
clearClass(tabs);
tab.className = 'active';
}
</script>
CSS:
.tabs > div {
display: none;
}
.tabs > div.active {
display: block;
}
.software_section_selects_wrapper > a {
color: white;
background-color: black;
}
.software_section_selects_wrapper > a.active {
color: white;
background-color: red;
}
Live: http://jsfiddle.net/d9ffnw46/1/
BTW, you should look into using a framework library such as jQuery. As a beginner it makes code such as this much simpler.
EDIT: Here's an example with jQuery: http://jsfiddle.net/d9ffnw46/2/

How can I align multiple lists in the same row?

What happens:
What I want to happen:
HTML:
<input type="button" onclick="showSpoiler1(this);" value="Front flip variaion (ramp)" />
<input type="button" onclick="showSpoiler2(this);" value="Front flip variaion (flat)" />
<input type="button" onclick="showSpoiler3(this);" value="Backflip variations" />
<input type="button" onclick="showSpoiler4(this);" value="Sideflip Variations (ramp)" />
<input type="button" onclick="showSpoiler5(this);" value="Twists and other tricks"/>
<div1 class="inner" style="display:none;">
<ul>
<li><a>Front full</a></a>
<li><a>Double Front</a>
<li><a>Aerial twist</a>
</ul>
</div1>
<div2 class="inner" style="display:none;">
<ul>
<li><a>front 180</a>
<li><a class="click" onclick="tr4(this); hide(this)">Webster</a>
<li><a class="click" onclick="tr4(this); hide(this)">Loser</a>
</ul>
</div2>
<div3 class="inner" style="display:none;">
<ul>
<li><a>Off-axis backtuck</a>
<li><a>Back Full</a>
</ul>
</div3>
CSS:
div1 {
color:blue;
}
div2 {
color:blue;
position:relative;
left:150px;
}
div3 {
color:blue;
position:relative;
left: 300px;
}
JS:
function showSpoiler1(obj)
{
var inner = obj.parentNode.getElementsByTagName("div1")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
function showSpoiler2(obj)
{
var inner = obj.parentNode.getElementsByTagName("div2")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
function showSpoiler3(obj)
{
var inner = obj.parentNode.getElementsByTagName("div3")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
I want all the lists to horizontally line up with each other. When i use absolute positioning the text in the next section of my file doesnt move down so my lists collide with it. How could I make them line up and keep them from intersecting with th heading under it?

Try to add table for each div. This should work as you want.
<table>
<tr>
<td>
<div1 class="inner" style="display:none;">
...
</div1>
</td>
<td>
<div2 class="inner" style="display:none;">
...
</div2>
</td>
</tr>
</table>

Try toggling to display: inline-block or float them to the left;

Hiding / Showing Divs - initial state

Just having a bit of difficulty with showing/hiding divs -
Basically what I'm trying to achieve is to have 3 different links, each corresponding to three different divs, only one of which shows at any one time. I've referred to this tutorial - http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/ (section headed 'Here is a new demo in response to a request where only one div is displayed at any one time')
It's all working correctly, in that when I click any of my links, the correct div shows. The only problem I'm having is the initial state - I only want the first div to show initially, but currently they all display simultaneously, until I click one of the links.
I've copied the java on the website -
<script> function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("class");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
}
else {
newboxes[x].style.display = 'none';
}
}
}
} </script>
My divs then have:
<div id="newboxes1" class="newboxes" style="width: 1124px;">
<div id="newboxes2" class="newboxes">
<div id="newboxes3" class="newboxes">
These 3 divs all contain a number of other divs, none of which have 'newboxes' in the class - but perhaps this interferes?
The links sit outside of these 3 divs:
Learn HTMLBox2Box3
As far as I can see I've copied the method shown on the tutorial exactly, but for that my initial state doesn't work correctly, whereas it does on the tutorial page.
Any ideas?
Thanks!

function showonlyone(element){
for (var i=0; i<document.getElementsByClassName("newboxes").length; i++){
var div = document.getElementById('newboxes'+i);
if(i == element){
div.style.display = 'block';
}else{
div.style.display = 'none';
}
}
}
to use:
showonlyone(1);
//This will show the div with ID="newboxes1"

is it not as simple as
<div id="newboxes1" class="newboxes" style="width: 1124px;">
<div id="newboxes2" class="newboxes" style="display:none;">
<div id="newboxes3" class="newboxes" style="display:none;">

Try this in your header
<script>
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for (var x = 0; x < newboxes.length; x++) {
name = newboxes[x].getAttribute("class");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
} else {
newboxes[x].style.display = 'none';
}
}
}
}
</script>
Followed by this for the div boxes and links
<a id="myHeader1" href="javascript:showonlyone('newboxes1');">Wall Tiles</a>
- <a id="myHeader2" href="javascript:showonlyone('newboxes2');">Floor Tiles</a>
- <a id="myHeader3" href="javascript:showonlyone('newboxes3');">Extras</a>
<div class="newboxes" id="newboxes1">
<iframe src="wall.php" width="600" height="620" frameborder="0"></iframe>
</div>
<div class="newboxes" id="newboxes2">
<iframe src="floor.php" width="600" height="620" frameborder="0"></iframe>
</div>
<div class="newboxes" id="newboxes3">
<iframe src="extras.php" width="600" height="620" frameborder="0"></iframe>
</div>