I'm not sure what is wrong, I feel like it might be a very simple mistake but cant seem to understand what I put that made it this way. Now its just me testing everything, its for a mobile website template. I don't know if that helps to know.
Here is the link to a fiddle page which shows my code: Click here
<div id="parent">
<div id="child">
<!--TOP IMG-->
<div class="image">
<img name="bed" src="https://www.psychologies.co.uk/sites/default/files/styles/psy2_page_header/public/wp-content/uploads/2012/03/happy.jpg" style="padding:0px;" width="100%" align="top" alt="bed" />
<h2 id="phototext"><span>Have a great summer!<span class='spacer'></span><br />
<span class='spacer'></span>2017</span></h2>
<!--BODY TEXT-->
<!--What do we offer>-->
<!--SELECTIONS -->
<div></div>
<div>
<a class="stylea" id="diva" href="javascript:showonlyone('newboxes1');">
<input type="button" class="buttonheader" value="show this one only"> </input>
</a>
</div>
<div class="" id="newboxes1" style="display: block;">
<p>Discription</p>
</div>
<div>
<a id="divb" href="javascript:showonlyone('newboxes2');">
<p>show this one only</p>
</a>
</div>
<div class="newboxes" id="newboxes2" style="display: none;">
<p>Div #2</p>
</div>
<div>
<a id="divc" href="javascript:showonlyone('newboxes3');">
<p>show this one only</p>
</a>
</div>
<div class="newboxes" id="newboxes3" style="display: none;">
<p>Div #3</p>
</div>
<div>
<a id="divd" href="javascript:showonlyone('newboxes4');">
<p>show this one only</p>
</a>
</div>
<div class="newboxes" id="newboxes4" style="display: none;">
<p>Div #4</p>
</div>
<div>
<a id="dive" href="javascript:showonlyone('newboxes5');">
<p>show this one only</p>
</a>
</div>
<div class="newboxes" id="newboxes5" style="display: none;">
<p>Div #5</p>
</div>
<div>
<a id="divf" href="javascript:showonlyone('newboxes6');">
<p>show this one only</p>
</a>
</div>
<div class="newboxes" id="newboxes6" style="display: none;">
<p>Div #6</p>
</div>
<!--BODY DIV ENDING-->
</div>
<!--ENNDING TOP IMG-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" style=" padding-top:150%;">
<tr>
<th scope="row"> </th>
</tr>
</table>
</div>
</div>
<div style="width:100%;height:400px;">
<img src="https://promoworx.files.wordpress.com/2014/06/montreal-beach-summer-swimming-photo.jpg" alt="Norway" style="float:left;width:50%;height:100%;object-fit:cover;">
<img src="http://enewsbreak.com/wp-content/uploads/2015/06/summer-family-photography-05-2.jpg" alt="Paris" style="float:left;width:50%;height:100%;object-fit:cover;">
</div>
I have been testing for a bit and if there is code that isn't needed within this code I'm sorry.
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
} else {
$(this).hide(600);
}
});
}
< script src = "hideshow.js" > < /script> < script type = "text/javascript" >
function toggleDiv(divId) {
$("#" + divId).toggle();
}
/*THE SCRIPT BELOW IS FOR THE MENU*/
function openCity(cityName, elmnt, color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(cityName).style.display = "block";
elmnt.style.backgroundColor = color;
}
/* Get the element with id="defaultOpen" and click on it*/
document.getElementById("defaultOpen").click();
/*MENU SCRIPT ENDED*/
CSS
.childcabe {
width: 100%
}
body {
height: 1000px;
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
p {
text-indent: 30px;
text-align: justify;
color: #333333;
font-weight: normal;
font-family: 'Didact Gothic', sans-serif;
font-size: 14px;
margin: 15px;
word-wrap: break-word;
}
#parent {
width: 320px;
height: auto;
margin: 0;
}
#child {
width: inherit;
}
/*#header {
display: inline-block;
}*/
#diva {
display: inline-block;
margin: auto;
}
.image {
position: fixed;
width: 100%;
/* for IE 6 */
}
h2 {
position: absolute;
top: 118px;
left: 0px;
width: 235px;
}
#phototext {
color: #000000;
font: 15px/35px;
font-weight: normal;
font-family: 'Didact Gothic', sans-serif;
font-size: 14px;
letter-spacing: -1px;
background: rgb(255, 255, 255);
/* fallback color */
background: rgba(255, 255, 255, 0.5);
padding: 10px;
margin-left: 0px;
margin-right: auto;
}
/*
h2 span.spacer {
padding:0 5px;
}*/
img {
max-width: 100%;
align: top;
margin-top: 0px;
opacity: 0.9;
-webkit-filter: grayscale(50%);
/* Safari 6.0 - 9.0 */
filter: grayscale(40%) brightness(50%);
/*filter: alpha(opacity=50 saturate=-10 contrast=200% brightness=150%); */
/* For IE8 and earlier */
}
.buttonheader {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
/*margin: 4px 2px;*/
cursor: pointer;
margin-left: 0px;
margin-top: 0px;
}
Just to confirm i was firm with my questions. Because sometimes I'm not good at explaining my questions/issues. 1. When i go on my mobile to see the website, the page doesn't scroll down. 2. I put a img below the code with a div surround it and the div flouts above everything. Not sure why.
