We Keep Coding

Collapsing and displaying of divs is reverted all at once

I'm working with HTML, CSS, JavaScript and jQuery on a prototype for a web application which shall be used on iPad.
I have programmed a test page, which have two divs: one for input fields and the other for displaying a help file (in my case a PDF).
After the page was started, the first div is displayed and the second collapsed.
Above the div-tags i got a button.
When i start the page for the first time and click on that button, i want to collapse the div with the input fields and show the other div with the help file.
Next time i click on the button i want to show the div with the input fields again and collapse the div with the help file.
But when i click the button after starting my test page, the first div (with id "content") is collapsed and the help-div displayed for the fraction of a second and the the original state of the page is restored.
Can anybody help me please?
Here's the HTML i'm using:
<form style="position:relative; height:100%; width:100%; overflow-x:scroll; overflow-y:scroll;">
<table>
<tr>
<td>
<button id="load_help" style="font-weight:bold; margin:5px; float:right;">i</button>
</td>
</tr>
<tr>
<td>
<div id="content" style="height:300px; width:500px; background-color:yellow; display:block;">
<label style="position:absolute; top:10px; left:10px; font-family:Arial; font-style:normal; font-weight:bold; font-size:16px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Test page</label>
<label style="position:absolute; top:50px; left:20px; font-family:Arial; font-style:normal; font-weight:bold; font-size:12px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Label 1</label>
<label style="position:absolute; top:90px; left:20px; font-family:Arial; font-style:normal; font-weight:bold; font-size:12px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Label 2</label>
<label style="position:absolute; top:130px; left:20px; font-family:Arial; font-style:normal; font-weight:bold; font-size:12px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Label 3</label>
</div>
</td>
</tr>
<tr>
<td>
<div id="help" style="width:500px; height:200px; background-color:aqua; display:none;">
<object type="application/pdf" data="../HelpDocuments/MyPdf.pdf" style="width:500px; height:500px;"></object>
</div>
</td>
</tr>
</table>
<script src="../scripts/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#load_help").click(function () {
var contentElement = document.getElementById("content");
var helpElement = document.getElementById("help");
if (contentElement.style.display == "block") {
contentElement.style.display = "none";
helpElement.style.display = "block";
}
else {
contentElement.style.display = "block";
helpElement.style.display = "none";
}
});
});
</script>
</form>

Your problem is that you are "submitting" the form when you click the button, you need to prevent that event like this:
e.preventDefault()
You can also type your button as a button to prevent submit like this:
<button type="button"></button>
$(document).ready(function() {
$("#load_help").click(function(e) {
var contentElement = document.getElementById("content");
var helpElement = document.getElementById("help");
if (contentElement.style.display == "block") {
contentElement.style.display = "none";
helpElement.style.display = "block";
} else {
contentElement.style.display = "block";
helpElement.style.display = "none";
}
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form style="position:relative; height:100%; width:100%; overflow-x:scroll; overflow-y:scroll;">
<table>
<tr>
<td>
<button id="load_help" style="font-weight:bold; margin:5px; float:right;">i</button>
</td>
</tr>
<tr>
<td>
<div id="content" style="height:300px; width:500px; background-color:yellow; display:block;">
<label style="position:absolute; top:10px; left:10px; font-family:Arial; font-style:normal; font-weight:bold; font-size:16px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Test page</label>
<label style="position:absolute; top:50px; left:20px; font-family:Arial; font-style:normal; font-weight:bold; font-size:12px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Label 1</label>
<label style="position:absolute; top:90px; left:20px; font-family:Arial; font-style:normal; font-weight:bold; font-size:12px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Label 2</label>
<label style="position:absolute; top:130px; left:20px; font-family:Arial; font-style:normal; font-weight:bold; font-size:12px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Label 3</label>
</div>
</td>
</tr>
<tr>
<td>
<div id="help" style="width:500px; height:200px; background-color:aqua; display:none;">
<object type="application/pdf" data="../HelpDocuments/MyPdf.pdf" width="500px" height="500px"></object>
</div>
</td>
</tr>
</table>
</form>

Fading out div to reveal a background image on hover

I am trying to make my jQuery so that the hover fades the span to reveal the bgSky div underneath but I can't get it to work. The CSS works but I want to animate it using JavaScript to make it look nicer. Here's the code:
HTML:
<div id="mainTbl">
<div id="bgSky">
<table id="menu">
<tr>
<td colspan="2"><span class="genAnchor"><img src="images/physicalArchives.png" class="genImages" style="width:55%;"/></span></td>
</tr>
<tr>
<td class="border"><span class="genAnchor"><img src="images/30s.png" class="genImages"/></span></td>
<td><span class="genAnchor"><img src="images/40s.png" class="genImages"/></span></td>
</tr>
<tr>
<td class="border"><span class="genAnchor"><img src="images/50s.png" class="genImages"/></span></td>
<td><span class="genAnchor"><img src="images/60s.png" class="genImages"/></span></td>
</tr>
<tr>
<td class="border"><span class="genAnchor"><img src="images/70s.png" class="genImages"/></span></td>
<td><span class="genAnchor"><img src="images/80s.png" class="genImages"/></span></td>
</tr>
<tr>
<td class="border"><span class="genAnchor"><img src="images/90s.png" class="genImages"/></span></td>
<td><span class="genAnchor"><img src="images/00s.png" class="genImages"/></span></td>
</tr>
<tr>
<td colspan="2"><span class="genAnchor"><img src="images/10s.png" class="genImages"/></span></td>
</tr>
</table>
</div>
</div>
CSS
html, body, div, span, table, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
padding: 0;
}
body{
background:#C71C2D;
text-align:center;
font-family:"Tw Cen MT",sans-serif;
}
h1{
color:white;
font-size:240%;
}
#logo{
height:30px;
width:298px;
position:absolute;
left:30px;
top:30px;
}
/*-- INDEX SETTINGS --*/
td{
padding-right:1;
padding-bottom:1;
}
tr{
border-top: 1px solid #9ea8a9;
border-bottom: 1px solid #9ea8a9;
}
#menu{
position:absolute;
top:0;
left:0;
border-collapse:collapse;
text-align:center;
margin:0 auto;
width:100%;
height:100%;
}
.border{
border-right:1px solid #9ea8a9;
}
a{
display:table;
position:relative;
width:100%;
height:100%;
}
.genAnchor{
display: table-cell;
border:1px solid white;
text-align:center;
vertical-align: middle;
background-color:rgba(255,255,255,1);
}
.genAnchor:hover{
background:rgba(0,0,0,0);
}
#mainTbl{
position:relative;
width:55%;
margin:10 auto;
padding:50px 0 50px;
height:75%;
background:white;
}
.genImages{
height:1in;
width:2.25in;
}
#bgSky{
position:relative;
background-image:url("images/sky.jpg");
background-size:cover;
width:70%;
height:100%;
margin:0 auto;
}
JS
$(function(){
$("td").hover(function(){
$(this).fadeOut(0.5, function(){
$(this).fadeIn();
});
});
});

Need to display a div on hover of other div

I have an element set to visibility:hidden and i need it to change to visible on hover, i tried this with javascript with no luck
HTML
<div class="options">
<div id="option-1" onmouseover="dis()"></div>
</div>
</div>
<div id="pic-1"></div>
CSS
#option-1{
width:100px;
height:20px;
background:#fff;
position:relative;
z-index:999;
top:0;left:0;
}
#pic-1{
width:100%;
height:100%;
position:absolute;
z-index:99;
background:#f0f;
visibility:hidden;
}
Javascript
function dis(){
document.getElementById("pic-1").style.visibility = "visible";
}

html:
<div class="options">
<div id="option-1" onmouseover="showx();" onmouseout="hidex();"></div>
</div>
</div>
<div id="pic-1"></div>
css:
#option-1{
width:100px;
height:100px;
background-color:red;
cursor: pointer;
}
#pic-1{
width:100%;
height:100%;
position:absolute;
z-index:99;
background:#f0f;
visibility:hidden;
}
js
function showx(){
document.getElementById("pic-1").style.visibility = "visible";
}
function hidex(){
document.getElementById("pic-1").style.visibility = "hidden";
}
codepen link: http://codepen.io/anon/pen/bNrdrN

Accordian menu (when clicked) affects position of an image in the next table cell

I'm using an accordion menu I found on a CSS resource page.
The menu works fine - the only problem is:
I have an image that's right next to the menu (the image and the accordion menu are in their own separate table cell), and whenever the accordion menu is clicked, the image will shift downwards along with the accordion effect.
I basically need the image to stay where it is (valign middle) and not move around whenever the accordion menu is clicked.
I have very bare basic knowledge of HTML and this is issue is driving me nuts :(
Hope someone can help me out - thank you in advance!
This is the CSS:
.container {
width:360px;
font-family:'Varela Round', Arial, Helvetica, sans-serif;
margin:0 auto;
padding:0 0 20px;
}
.accordion {
font-size:13px;
border-radius:10px;
width:360px;
padding:10px;
background:none;
}
.accordion ul {
list-style:none;
margin:0;
padding:0;
}
.accordion li {
margin:0;
padding:0;
}
.accordion [type=radio], .accordion [type=checkbox] {
display:none;
}
.accordion label {
display:block;
font-size:13px;
line-height:16px;
background:#10967a;
color:#ffffff;
cursor:pointer;
text-transform:uppercase;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
}
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label {
background:#39bc86;
color:#FFF;
}
.accordion .content {
padding:0 10px;
overflow:hidden;
border:1px solid #fff; /* Make the border match the background so it fades in nicely */
background:#FFFFFF;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
}
.accordion p {
color:#333;
margin:0 0 10px;
}
.accordion h3 {
color:#542437;
padding:0;
margin:10px 0;
}
/* Vertical */
.vertical ul li {
overflow:hidden;
margin:0 0 1px;
}
.vertical ul li label {
padding:8px;
}
.vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label {
border-bottom:0;
}
.vertical ul li .content {
height:0px;
border-top:0;
}
.vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content {
height:250px;
}
This is the HTML:
<body>
<table width="1010" border="0" background="images/bg.jpg">
<tr>
<td height="380" align="left" valign="top"><table width="1010" border="0">
<tr>
<td width="56"> </td>
<td width="320"><table width="100%" border="1">
<tr>
<td><img src="../images/pdt_01.jpg" width="181" height="205" /></td>
</tr>
</table></td>
<td width="360" valign="top"><div class="container">
<div class="accordion vertical">
<ul>
<li>
<input type="checkbox" id="checkbox-1" name="checkbox-accordion" />
<label for="checkbox-1"><strong><span class="text">ADDRESSES</span></strong></label>
<div class="content">
<table width="100%" border="0" cellpadding="0" cellspacing="8">
<tr>
<td valign="top" class="list">6767 S Clinton St</td>
</tr>
<tr>
<td valign="top" class="list">16910 E Quincy Ave</td>
</tr>
<tr>
<td valign="top" class="list">5010 Founders Pkwy</td>
</tr>
<tr>
<td valign="top" class="list">9390 W Cross Dr</td>
</tr>
<tr>
<td valign="top" class="list">1985 Sheridan Blvd</td>
</tr>
<tr>
<td valign="top" class="list">1630 E Cheyenne Mountain Blvd</td>
</tr>
</table>
</div>
</li>
<li>
<input type="checkbox" id="checkbox-2" name="checkbox-" />
<label for="checkbox-2"><strong><span class="text">MORE</span></strong></label>
</li>
</ul>
</div>
</div></td>
<td width="350"> </td>
</tr>
</table></td>
</tr>
</table>
</body>
Are there any other info that you need?

As you are saying that image is valign="middle", so it's working fine B'coz whenever menu expands table height also increases with menu and image is adjusting itself in the middle.
but you can try valign="top" in "td" which is holding the image table . like below
<td width="320" valign="top">
<table width="100%" border="1">
<tr>
<td><img src="../images/pdt_01.jpg" width="181" height="205" /></td>
</tr>
</table>
</td>
if it is not necessary to make it valign="middle" you can use it...
http://jsfiddle.net/t8NDN/

Fading a background with jQuery [duplicate]

This question already has answers here:
Fade background image in and out with jQuery?
(5 answers)
Closed 9 years ago.
I am wondering, because I am not good with JavaScript or jQuery, how to I fade a background of this:
html {
background-image:url(image.png);
}
to a different background image without fading the whole document, but only the background every 2 seconds?
I have no idea how to do this. I have been researching and trying to do this myself, but no success for the past three days.
Any help is greatly appreciated.
If you need the code, here it is:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Buddies Server Home</title>
<link href="css/styles.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="body">
<div class="nav">
<div class="header">
<img src="images/Logo.png" />
</div>
<div class="right-side">
<img src="images/home.png" />
</div>
<div class="nav-buttons">
<img src="images/buttons/servers.png" />
<img src="images/buttons/about.png" />
<img src="images/buttons/forums.png" />
</div>
<div class="notif_container">
<div class="notif"><p id="notif">NOTIFICATION: Buddies Network is under maintenance. Thank you for your patience.</p></div>
</div>
</div>
</div>
<div class="content">
<div class="post">
<table id="post">
<tr>
<td id="title"><h2>Blog Entry 1</h2></td>
</tr>
<tr>
<td><h5 id="author">DirectX3DNerd, 7/23/13</b></td>
</tr>
<tr>
<td id="body"><p>Post Body</p></td>
</tr>
</table>
<table id="post">
<tr>
<td id="title"><h2>Blog Entry 2</h2></td>
</tr>
<tr>
<td><h5 id="author">DirectX3DNerd, 7/1337/13</b></td>
</tr>
<tr>
<td id="body"><p>Post Body - Jacob was Here</p></td>
</tr>
</table>
</div>
<div class="side_bar">
<table id="side_bar">
<tr>
<td><h2>Welcome!</h2></td>
</tr>
<tr>
<td><p>Welcome to Buddies Netowrk! Home of the Minecraft, Ace of Spades, and Team Fortress 2 server! If you want to play on one of the servers, click here</p></td>
</tr>
</table>
</div>
</div>
<div class="footer">
<b>© Buddies Network, 2012-2014.</b>
</div>
</body>
<script>
var image1 = 'images/bg.png';
var image2 = 'images/bg2.png';
function fade() {
$(html).css('background-image', image1);
$(html).css('background-image', image1);
}
</script>
</html>
styles.css
/* Document Properties */
html {
background: url('../images/bg.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Server List Properties */
.server_list {
width:500px;
height:400px;
margin: auto;
}
.server_list li {
width:60%;
margin:auto;
}
/* Font Properties */
b{
font-family:"Times New Roman", Times, serif;
}
h1{
font-family:"Times New Roman", Times, serif;
}
p{
font-family:"Times New Roman", Times, serif;
}
/* Page Template */
/* Navigation Bar*/
.header {
position:relative;
left:-1px;
}
.right-side {
position:absolute;
left:850px;
top:1px;
}
.notif {
background-color:#00FF15;
position:relative;
top:4px;
}
#notif {
color:#000000;
font-family:"Lucida Console", Monaco, monospace;
/*font-size:79%;*/
width:800px;
height:35px;
margin:auto;
position:relative;
top:10px;
overflow:auto;
word-wrap:break-word;
}
.nav {
background-color:#FFFFFF;
min-height:79px;
min-width:100%;
position:fixed;
top:0px;
left:0px;
right:0px;
}
/* Footer */
.footer {
background-color:#eee;
min-width:100%;
height:20px;
position:fixed;
left:0px;
bottom:0px;
}
/* Blog Post styles */
.post {
background-image:url('../images/trans_bg.png');
color:white;
position:absolute;
z-index:-1;
top:200px;
left:350px;
width:550px;
height:750px;
}
#post {
position:relative;
left:0px;
padding:0;
margin:0;
}
#title {
position:relative;
top:-10px;
left:0px;
}
#author {
position:relative;
top:-50px;
left:0px;
}
#body {
position:relative;
top:-80px;
left:0px;
}
/* Misc */
.side_bar {
background-image:url('../images/trans_bg.png');
color:white;
position:fixed;
top:190px;
left:5px;
width:250px;
word-wrap:break-word;
overflow:hidden;
}
/* link Properties */
a:link { color:white; }
a:visited { color:white; }
a:hover { color:white; }
a:active { color:white; }

add this
jQuery(document).ready(function() {
$("html").css({
'background-image': ''
});
$("html").animate({ background:'url(image.png)'},350);
});
That's only for the first image fade effect. If you want this effect for different images you might want to try this plug-in I'm sure you will get cool output from it.