I have been struggling for the past few hours with a positioning problem. I have been following a basic tutorial on how to compose an image gallery from w3c: How to Create a Tabbed Image Gallery I am using bootstrap's grid system for layout, and I have been very careful not to use bootstraps class names where it might interfere with those provided in the tutorial. The reason is that I see myself using bootstrap for layout, but I want to be able to customize things, as well. Basically, there is a div tag with the class title "mycontainer" with display set to none, which is then set to display: block in the javascript section. That part works just fine.
The problem is that the tutorial includes this little X, using the html code × I will include the full code below. The × is supposed to be an X-out for the image, which is enlarged when a user selects one of several top images (here is a picture of it). I circled the xelement The problem is that no matter what I do, I cannot seem to control the positioning of that X. I have tried inline style, to no avail. I tried doing it exactly as the tutorial recommended, which was to use a css class to position, but with that I wasn't even able to control the coloring. At least with inline styles, I was able to color the element. But padding-left, margin-left, text-align:center. I tried separately and all at once. None of these work, and I just simply cannot figure this out. Here is the javascript, which is included in the section. Thanks a million times for your time.
<script type="text/javascript">
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
</script>
Here is the CSS:
<style>
body {
margin: 0;
font-family: Arial;
}
* {
box-sizing: border-box;
}
#column1 {
width:80%;
height:80%;
}
#column2 {
width:80%;
height:80%;
}
#column3 {
width:80%;
height:80%;
}
#column4 {
width:80%;
height:80%;
}
.col-lg-3{
float: left;
padding:10px;
}
<!--Style the images inside the grid-->
.col-lg-3 img {
opacity: 0.8;
cursor: pointer;
}
.col-lg-3 img:hover {
opacity: 1;
}
/*Clear floatsd after the columns */
.row:after {
content: "";
display:table;
clear:both;
}
<!--The expanding image container (positioning is needed to position the close button and the text -->
**.mycontainer {
position:relative;
display:none;
}
#imgtext {
position:absolute;
bottom:60px;
left:60px;
color:white;
font-size:20px;
}
#expandedImg {
display:block;
padding-left:50%;
}**
/* Closable button inside the image */
.closebtn {
position: absolute;
top: 250px;
right: 250px;
color: hotpink;
font-size: 35px;
cursor: pointer;
}
</style>
And here is the entire page with HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Dream of Bonsai</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
</script>
<style>
body {
margin: 0;
font-family: Arial;
}
* {
box-sizing: border-box;
}
#column1 {
width:80%;
height:80%;
}
#column2 {
width:80%;
height:80%;
}
#column3 {
width:80%;
height:80%;
}
#column4 {
width:80%;
height:80%;
}
.col-lg-3{
float: left;
padding:10px;
}
<!--Style the images inside the grid-->
.col-lg-3 img {
opacity: 0.8;
cursor: pointer;
}
.col-lg-3 img:hover {
opacity: 1;
}
/*Clear floatsd after the columns */
.row:after {
content: "";
display:table;
clear:both;
}
<!--The expanding image container (positioning is needed to position the close button and the text -->
.mycontainer {
position:relative;
display:none;
}
#imgtext {
position:absolute;
bottom:60px;
left:60px;
color:white;
font-size:20px;
}
#expandedImg {
display:block;
padding-left:50%;
}
/* Closable button inside the image */
.closebtn {
position: absolute;
top: 250px;
right: 250px;
color: hotpink;
font-size: 35px;
cursor: pointer;
}
</style>
</head>
<body>
<!--The grid of four equal columsn-->
<div class="container">
<h1 style="text-align:center">Image Gallery</h1>
<hr>
<br>
<div class="row">
<div class="col-lg-3">
<img src="images/cherrySquare.jpg" id="column1" alt="Chinese Characters" onClick="myFunction(this);" >
</div>
<div class="col-lg-3">
<img src="images/beachSquare.jpg" id="column4" alt="Chinese Characters" onClick="myFunction(this);" >
</div>
<div class="col-lg-3">
<img src="images/bonsai4.jpg" id="column3" alt="Chinese Characters" onClick="myFunction(this);" >
</div>
<div class="col-lg-3">
<img src="images/awesomebonsaiSquare.jpg" id="column2" alt="Chinese Characters" onClick="myFunction(this);" >
</div>
</div>
<!--End of the row-->
<div class="mycontainer">
<!--close the image-->
<span class="closebtn" onClick="this.parentElement.style.display='none'" style="color:hotpink;padding-left:50%;padding-top:35%;margin-top:25%;padding-bottom:45%;">×</span>
<!--Expanded image-->
<img id="expandedImg" style="width:55%;height:55%;margin-left:25%;" >
<!--Image text-->
<div id="imgtext"></div>
</div>
</div>
</body>
</html>
I took a look at your CSS. I copied your code and I noticed you wrote your CSS comments with HTML syntax and it's messing with your code change those and and it should work.
Related
Well there are two cards and an ellipsis within it , onclicking the ellipsis it should show the div i.e. div with id = report.But it is not working for me. i tried the following as mentioned below in the code but it didn't work for me. Please have a glance and hope experts will help me in this regard.
const ellipsis = document.querySelectorAll(".ellipsis");
ellipsis.forEach((el) =>
el.addEventListener("click", (event) => {
const report = event.currentTarget.querySelector("#report");
report.classList.toggle("show");
})
)
.main{
margin:0;
padding:0;
display:flex;
gap:20px;
}
.card{
width: 150px;
height:200px;
background: coral;
border:1px solid #000;
position:relative;
}
.card h4{
color:#fff;
top:35%;
left:40%;
position:absolute;
}
.card .flag {
top:0;
right:15px;
position:absolute;
}
.flag #report{
display:none;
float:left;
background: #fff;
padding:0;
margin-top: 27px;
margin-right: -5px;
}
.flag #report.show{
display:block;
}
.card .flag button{
border:0;
background:0;
outline:0;
font-size:25px;
color:#fff;
position:absolute;
}
#report p{
padding: 2px 5px;
top:-10px;
font-size:10px;
line-height:0.1rem;
cursor:pointer;
}
<div class="main">
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">⋮</button>
<div id="report" class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">⋮</button>
<div id="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
</div>
The currentTarget in the event handler will hold the .ellipsis button and the subsequent querySelector searches for the “report” div underneath the button (when it is actually a sibling).
MDN on Element.querySelector():
The querySelector() method of the Element interface returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.
Quick and dirty fix would be invoking parentElement.querySelector instead.
const ellipsis = document.querySelectorAll(".ellipsis");
ellipsis.forEach((el) =>
el.addEventListener("click", (event) => {
const report = event.currentTarget.parentElement.querySelector(".report");
report.classList.toggle("show");
})
)
.main{
margin:0;
padding:0;
display:flex;
gap:20px;
}
.card{
width: 150px;
height:200px;
background: coral;
border:1px solid #000;
position:relative;
}
.card h4{
color:#fff;
top:35%;
left:40%;
position:absolute;
}
.card .flag {
top:0;
right:15px;
position:absolute;
}
.flag .report{
display:none;
float:left;
background: #fff;
padding:0;
margin-top: 27px;
margin-right: -5px;
}
.flag .report.show{
display:block;
}
.card .flag button{
border:0;
background:0;
outline:0;
font-size:25px;
color:#fff;
position:absolute;
}
.report p{
padding: 2px 5px;
top:-10px;
font-size:10px;
line-height:0.1rem;
cursor:pointer;
}
<div class="main">
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">⋮</button>
<div class="report" class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">⋮</button>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
</div>
I also changed “report” from being an ID to being a class as already noted since there is more than one instance.
You have a few bugs.
<div id="report"> you can't use the same id more than one time.
Javascript should be fired after page is loaded.
Read about function https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling
Try this:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<style>
.main{
margin:0;
padding:0;
display:flex;
gap:20px;
}
.card{
width: 150px;
height:200px;
background: coral;
border:1px solid #000;
position:relative;
}
.card h4{
color:#fff;
top:35%;
left:40%;
position:absolute;
}
.card .flag {
top:0;
right:15px;
position:absolute;
}
.flag .report{
display:none;
float:left;
background: #fff;
padding:0;
margin-top: 27px;
margin-right: -5px;
}
.flag .report.show{
display:block;
}
.card .flag button{
border:0;
background:0;
outline:0;
font-size:25px;
color:#fff;
position:absolute;
}
.report p{
padding: 2px 5px;
top:-10px;
font-size:10px;
line-height:0.1rem;
cursor:pointer;
}
</style>
</head>
<body>
<script>
window.addEventListener ( 'DOMContentLoaded', ()=>{
const ellipsis = document.querySelectorAll(".ellipsis");
ellipsis.forEach((el) => {
console.log ( el );
el.addEventListener("click", (event) => {
const report = event.target.nextElementSibling;
report.classList.toggle("show");
console.log ( report );
});
});
} );
</script>
<div class="main">
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">⋮</button>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
<div class="card">
<h4>Card</h4>
<div class="flag">
<button class="ellipsis">⋮</button>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</div>
</div>
</div>
</body>
</html>
Your snippet leaves an opened .report visible until the user clicks .ellipsis again. It might be advantageous to use the MDN: The Details disclosure element as this element has a built-in 'open'/'close' mechanism, whithout the need for extra Javascript manipulation.
The pseudo code for your .card:
<card>
<details>
<summary></summary>
<report></report>
</details>
<content></content>
</card>
card { position : relative }
details { position : absolute; z-index: 1 }
summary { list-style: none } /* remove default marker */
summary::after { content : '\22ee' } /* custom ellipsis marker */
content { /* whatever fits the card*/ }
All you have to do is position the report (absolute) over the content (z-index: 1) when opened, while the browser handles the 'open/close' toggling. All <details> will retain their current [open] state until the user toggles it again by clicking the summary.
No specific Javascript required, however, should you decide that only one .report can be open at a time, you will need to implement Javascript to handle the closure of already opened .report. Below snippet shows how that could be implemented (with a checkbox to toggle the behavior on/off).
FYI, I removed the duplicate ID mentioned by others...
Here's how I would implement the above, using your example:
/*
When only one .report can be open at a time use
below Javascript, otherwise it can be safely removed.
*/
var currentDetail;
document.querySelectorAll('.card .flag summary').forEach(el => {
// this event triggers before <details> 'toggle' event
el.addEventListener("click", event => {
// if only one can be open, close the currently opened details
if (getComputedStyle(document.body).getPropertyValue('--only-one') == '1') {
const closest = event.currentTarget.closest('.card details');
if (closest.open) {
currentDetail = null; // all summaries closed
}
else { // not null and a different summary
if ((currentDetail) && (currentDetail != closest)) {
currentDetail.removeAttribute('open'); // close current open summary
};
currentDetail = closest; // save new opened summary
};
};
});
});
/* Just for checkbox operation: simply remove all 'open' attributes */
function collapseDetails() { document.querySelectorAll('.card details').forEach(el => { el.removeAttribute('open') }) };
body {
cursor: default; /* just the default arrow everywhere */
--only-one: 0; /* default false: all <details> can be [open] */
}
.main {
display: flex; flex-flow: row wrap; justify-content: center;
gap: 20px;
}
.card {
position: relative; /* new stacking context for '.report' */
/* For easy centering of content */
display: grid; place-items: center;
width: 150px; height: 200px;
background-color: coral; color: #fff;
border: 1px solid #000;
}
.flag { /* details */
position: absolute; z-index: 1; /* inside .card, on top of content */
inset: 0 10px auto 55px; /* shorthand for top/right/bottm/left */
/* .report 80px wide (given the .card width, margin, etc.) */
}
.flag[open] { /* details 'open' specific styling */ }
.ellipsis { /* summary */
list-style: none; /* remove HTML default triangle marker */
width: max-content; /* HTML default is equal to <details> width */
margin-left: auto; /* force to right side of .flag */
margin-right: -5px;
font-size: 25px;
text-align: right; /* only relevant when width is set to a value */
cursor: pointer;
}
.ellipsis::after { content: '\22ee' } /* the vertical 'ellipsis' */
/* hex unicode as dec shows an Asian character */
.report { /* disclosed details content */
background-color: #fff; color: #000;
padding: 5px 0;
}
.report p {
margin: 0; /* remove HTML default margin */
padding: 2px 5px;
font-size: 10px; line-height: 1.1;
cursor: pointer;
}
/* demo stuff */
label {
display: inline-block;
margin: 1rem;
cursor: pointer;
}
/* All these still get overridden by Firefox */
summary:where(::before, ::after, ::marker, :active, :focus, :focus-visible),
::-moz-focus-inner, ::-moz-focus-outer {
outline: none !important;
border : 0 !important;
outline-color: transparent !important
}
<label>only one 'report' open at a time <input type="checkbox"
oninput="document.body.style.setProperty('--only-one', (this.checked) ? '1' : '0');
collapseDetails();">
</label>
<div class="main">
<div class="card">
<details class="flag">
<summary class="ellipsis"></summary>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</details>
<h4>Card</h4>
</div>
<div class="card">
<details class="flag">
<summary class="ellipsis"></summary>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</details>
<h4>Card</h4>
</div>
<div class="card">
<details class="flag">
<summary class="ellipsis"></summary>
<div class="report">
<p>Report</p>
<p>Not-Interested</p>
</div>
</details>
<h4>Card</h4>
</div>
</div>
My code shows and hides divs depending on which button the user clicks, implemented by simple myElement.style.display = 'none'; statements.
Can transitions be used when these divs are shown/hidden? I.e. when button-1 is clicked, text relating to button-1 fades into view; when button-2 is clicked, text relating to button-2 fades into view as the previous button-1 text fades out?
As is, the divs snap in and out of view. I am looking for a smoother transition.
I have attempted it with the code which is shown commented out. It just doesn't work. Any tips are much appreciated, thank you.
JS
var visibleDivId = null;
function divVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
respoding_div = document.getElementById(divId);
if(visibleDivId == divId) {
respoding_div.style.display = 'block';
// respoding_div.style.transition = 'display 0.3s ease-in block'
}
else {
respoding_div.style.display = 'none';
// respoding_div.style.transition = 'display 0.3s ease-in none'
}
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container" style="text-align:center; margin:0 auto;">
<div class="card-container" style="margin:0 auto; width:50%; display: flex; align-items: center; justify-content: center; padding-bottom:10px;">
<div class='accordion' onclick="divVisibility('Core1');">
<img src='https://img.icons8.com/dotty/2x/external-link-squared.png' width="50px">Button-1
</div>
<div class='accordion' onclick="divVisibility('Core2');">
<img src='https://img.icons8.com/dotty/2x/globe-earth.png' width="50px">Button-2
</div>
<div class='accordion' onclick="divVisibility('Core3');">
<img src='https://img.icons8.com/dotty/2x/torrent.png' width="50px">Button-3
</div>
</div>
<div class="all_divs">
<div id="Core1" class="subdiv" style="display:none;">TEXT #1</div>
<div id="Core2" class="subdiv" style="display:none;">TEXT #2</div>
<div id="Core3" class="subdiv" style="display:none;">TEXT #3</div>
</div>
</div>
</div>
</body>
</html>
CSS
body{
font-family: "IBM Plex Sans", sans-serif;
}
.accordion {
cursor: pointer;
border: none;
text-align: center;
outline: none;
font-size: 15px;
padding-left:100px;
padding-right:100px;
padding-top: 20px;
width: 80px;
}
.accordion:hover {
opacity: 0.7;
}
.accordion img {
width: 50px;
margin: 0 auto;
}
.all_divs > div {
color: #232f3e;
width: 95%;
text-align: center;
background-color:#fafafa;
position: absolute;
padding:2%;
border-top: 2px solid #e6e7e8;
}
h1{
font-weight: lighter;
color: #232f3e;
}
td{
padding: 2%;
}
it will not work not because of the syntax or something wrong in JS but because of the display property can't be transitioned from state to another. u can use opacity for that.
ok, this is my first stab at javascript or coding in general so I hope this isn't too messy. My code is almost where I want it but I have run into one last problem -
I have a scrolling table of images and I'd like the viewer to be able to click each picture to enlarge it individually. I'm trying to do this through the showImage function as follows:
JS:
function showImage(largeimg01) {
document.getElementById("largeimg01").visibility = 'visible';
showLargeImagePanel();
unselectAll();
}
function showImage(largeimg02) {
document.getElementById("largeimg02").visibility = 'visible';
showLargeImagePanel();
unselectAll();
}
function showImage(largeimg03) {
document.getElementById("largeimg03").visibility = 'visible';
showLargeImagePanel();
unselectAll();
}
function showLargeImagePanel() {
document.getElementById('largeImgPanel').style.visibility = 'visible';
}
function unselectAll() {
if(document.selection) document.selection.empty();
if(window.getSelection) window.getSelection().removeAllRanges();
}
function hideMe(obj) {
obj.style.visibility = 'hidden';
}
HTML:
Leah Gotchel
<!-- javascript here -->
<link href="../wood-site-pagespopup.css" rel="stylesheet" type="text/css">
</head>
<body>
<a href="../index.html">
<p id="back"> LEAH GOTCHEL </p></a>
<!-- hidden popup images -->
<div id="largeImgPanel" onclick="hideMe(this);">
<img class="popup" id="largeimg01" src="../images/GUS_4735retweb.jpg" />
</div>
<div id="largeImgPanel" onclick="hideMe(this);">
<img class="popup" id="largeimg02" src="../images/GUS_5034retweb.jpg" />
</div>
<div id="largeImgPanel" onclick="hideMe(this);">
<img class="popup" id="largeimg03" src="../images/GUS_4735retweb.jpg" />
</div>
<div id="largeImgPanel" onclick="hideMe(this);">
<img class="popup" id="largeimg04" src="../images/GUS_4735retweb.jpg" />
</div>
<table>
<tr>
<td><img src="../images/GUS_4735retweb.jpg" id="img01" style="cursor:pointer"
onclick="showImage(largeimg01);"></td>
<td>
<img src="../images/GUS_5034retweb.jpg" id="img02" style="cursor:pointer"
onclick="showImage(largeimg02);">
</td>
<td><img src="../images/GUS_5060retweb.jpg" id="img03" style="cursor:pointer"
onclick="showImage(largeimg03);">
</td>
<td><img src='../images/GUS_5077retweb.jpg'" id="img04" style="cursor:pointer"
onclick="showImage(largeimg04);">
</td>
</tr>
</table>
<p id="caption">custom window bench: oak, poplar </p>
</body>
</html>
CSS:
html, body {
height:100%;
width:100%;
margin:0;}
html {
display:table;
}
body{
display:table-cell;
vertical-align:middle;
}
#back{
font-family: Corbert;
font-style: italic;
font-size: 2em;
color: ##006699;
position: relative;
padding: 30px;
margin-left: 20px;
}
img {
padding: 20px;
width: 500px;
}
a {
color: #006699;
margin: 0 auto;
text-decoration: none;
}
a:hover {
color: #8b98a7;
}
p {
position: fixed;
padding: 30px;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
clear: both;
margin-left: 20px;
}
table {
top: 50%
left: 50%
position: absolute;
border:none;
}
.popup {
position: relative;
height: 90%;
width: auto;
overflow: scroll;
}
.largeImgPanel {
text-align: center;
visibility: hidden;
position: fixed;
z-index: 100;
top: 0; left: 0; bottom: 0;
width:100%;
height:100%;
background-color: rgba(100,100,100, 0.5);
}
#largeImg {
height: auto;
max-width: 100%;
}
This code is close to what I found here: How to enlarge a clicked image with plain JavaScript on a mobile device
The popup is functioning - My problem is that, when I call on any one popup, all the popup images appear. The first popup (img01) is blocking the rest so they can't be seen. I think this is because they are all contained in divs with the same "largeImgPanel" id - but if they are not contained in the "largeImgPanel" div then they don't show up at all when I run the function. How can I change the script so that the function applies only to the specific popup image corresponding to the image that is being clicked?
This is my first post so I apologize if it's nonsensical! Any help is much appreciated. Please let me know if I can try to clarify.
All 4 images are named with the same id, largeImgPanel, so all 4 show when that function is called. Change the id to a class (put a dot instead of a # in your css) and give unique ids to your divs, keeping the class there
That should sort you out, but remember to call the relevant id!
EDIT:
Ok, so here's your WORKING (edited!) code
function showImage(imgname){
var mypic=document.getElementById(imgname);
mypic.style.visibility = 'visible';
mypic.style.zIndex = '20';
unselectAll();
}
function unselectAll() {
if(document.selection) document.selection.empty();
if(window.getSelection) window.getSelection().removeAllRanges();
}
function hideMe(obj) {
obj.style.visibility = 'hidden';
obj.style.zIndex = '-50';
}
html, body {
height:100%;
width:100%;
margin:0;}
html {
display:table;
}
body{
display:table-cell;
vertical-align:middle;
}
#back{
font-family: Corbert;
font-style: italic;
font-size: 2em;
color: ##006699;
position: relative;
padding: 30px;
margin-left: 20px;
}
td img {
padding: 20px;
width: 500px;
}
a {
color: #006699;
margin: 0 auto;
text-decoration: none;
}
a:hover {
color: #8b98a7;
}
p {
position: fixed;
padding: 30px;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
clear: both;
margin-left: 20px;
}
table {
top: 50%
left: 50%
position: absolute;
border:none;
}
.popup {
position: fixed;
text-align: center;
z-index: 0;
overflow-y: scroll;
top: 5px; left: 5px;
background-color: rgba(100,100,100, 0.5);
background-size:100% 100%;
}
#popup1, #popup2, #popup3, #popup4 {
visibility: hidden;
width:800px!important;
padding:25px;
height:auto;
margin:auto;
}
<!doctype html>
<html>
<body>
<a href="../index.html">
<p id="back"> LEAH GOTCHEL </p></a>
<!-- hidden popup images -->
<img class="popup" id="popup1" src="http://www.rachelgallen.com/images/daisies.jpg" alt="daisies" onclick="hideMe(this);" />
<img class="popup" id="popup2" src="http://www.rachelgallen.com/images/snowdrops.jpg" alt="snowdrops" onclick="hideMe(this);"/>
<img class="popup" id="popup3" src="http://www.rachelgallen.com/images/mountains.jpg" alt="mountains" onclick="hideMe(this);"/>
<img class="popup" id="popup4" src="http://www.rachelgallen.com/images/yellowflowers.jpg" alt="yellowflowers" onclick="hideMe(this);"/>
<table>
<tr>
<td><img src="http://www.rachelgallen.com/images/daisies.jpg" alt="daisies" id="img01" style="cursor:pointer"
onclick="showImage('popup1');"></td>
<td>
<img src="http://www.rachelgallen.com/images/snowdrops.jpg" alt="snowdrops" id="img02" style="cursor:pointer"
onclick="showImage('popup2');">
</td>
<td><img src="http://www.rachelgallen.com/images/mountains.jpg" alt="mountains" id="img03" style="cursor:pointer"
onclick="showImage('popup3');"></td>
<td><img src="http://www.rachelgallen.com/images/yellowflowers.jpg" alt="yellowflowers" id="img04" style="cursor:pointer"
onclick="showImage('popup4');">
</td>
</tr>
</table>
<p id="caption">custom window bench: oak, poplar </p>
</body>
</html>
You'll note that your javascript is neatly condensed into three functions, and that your ids are now unique. I got rid of the extra divs, why did you need them anyway, when you could just click on the image to hide it? Over-complicating things. Obviously the images have been replaced with dummy images from my website, but sure it works!
Basically, my code right now keeps a few of the divs I have on my website hidden and then when you click on a link, it makes the divs appear.
I need help so that it so that when I click one link and a div appears and I click on another link, the previous one disappears.
So let's say I click the link 'About', the div appears, good. Then I click on 'Help' and that div just appears OVER 'About' making things messy.
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}}
</script>
^That is my code, here is a sample of it in my website:
<div id="about" class="hidden">
<div class="content3">
<p>This is the about section.</p>
<p>It is currently still being worked on.</p>
</div>
</div>
The class 'content3' is just styling in my css file.
.content3 {
background-color:#FFFFFF;
width:750px;
height:600px;
padding:5px;
padding-left:40px;
margin-top:-650px;
margin-left:auto;
margin-right:auto;
}
UPDATE:
Sorry, I should elaborate more..
I need to be able to basically click a first link and have it show a box of text.
and then click a second link that will hide that box of text associated with the first link and show a new one that is associated with the second link.
This is my FULL code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}}
</script>
</head>
<body>
<div class="title">
<p class="text_header">Benjamin Midyette</p>
<p style="margin-top:-50px">Computer/Network Engineer, Web Developer</p>
</div>
<div class="content" align="left">
<p style="padding-top:20px">
This is a link<br><br>
About
</p>
</div>
<div id="Resume" class="content2"></div>
<div id="link" class="hidden" style="position:absolute; left:300px; margin-top:-700px;">
<img alt="A Link" src="pictures/link.png" height="420" width="420">
</div>
<div id="about" class="hidden">
<div class="content3">
<p>This is the about section.</p>
<p>It is currently still being worked on.</p>
</div>
</div>
</body>
</html>
CSS:
body {
background-image:url('http://www.nsgaming.us/pictures/nebula.png');
background-repeat: no-repeat;
background-size: 100% auto;
background: url('http://www.nsgaming.us/pictures/nebula.png') fixed 100% 100%;}
/*Text styling*/
.text_header {
font-size:72px
}
.title {
margin-top:-30px;
margin-left:auto;
margin-right:auto;
text-align: center;
color:#ffffee;
width:600px;
border-radius:8px;
background-color:#000000;
background:rgba(0,0,0,.9);
padding-bottom:1px;
}
/*Top Button styling*/
.button {
border:2px solid black;
background: #3B3B3B; /*#8C8C8C*/
padding: 3.5px 5px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
color: white;
font-size: 18px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
}
.button:hover {
background: #770819;
color: #ffffff;
text-decoration:none;}
.button:active {
background: #590819;}
.content {
margin-top:40px;
border: 1px solid black;
border-radius:8px;
Opacity:0.8;
background:#222222;
width:175px;
height:400px;
padding-left:20px;
padding-top: 0px;}
.content2 {
background-color:#222222;
border-radius:4px;
width:800px;
height:650px;
padding:5px;
padding-left:40px;
margin-top:-401px;
margin-left:auto;
margin-right:auto;
}
.content3 {
background-color:#FFFFFF;
width:750px;
height:600px;
padding:5px;
padding-left:40px;
margin-top:-635px;
margin-left:auto;
margin-right:auto;
}
.hidden {
display: none; }
.unhidden {
display: block; }
container {
align:right;}
opener {
align:left;}
You could do like this, if you want to display and hide particular div on click of button.
<style>
.hidden{
display:none;
}
.unhidden{
display:block;
}
</style>
<script type="text/javascript">
function unhide(clickedButton, divID) {
var item = document.getElementById(divID);
if (item) {
if(item.className=='hidden'){
item.className = 'unhidden' ;
clickedButton.value = 'hide'
}else{
item.className = 'hidden';
clickedButton.value = 'unhide'
}
}}
</script>
<body>
<div id="about" class="hidden">
<div class="content3">
<p>This is the about section.</p>
<p>It is currently still being worked on.</p>
</div>
</div>
<input type="button" onclick="unhide(this, 'about') " value="unhide">
</body>
UPDATE: Pass the other div id which you want to make disappear on click of div one. Please update your code with below's code.
SCRIPT
<script type="text/javascript">
function unhide(divID, otherDivId) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
document.getElementById(otherDivId).className = 'hidden';
}
</script>
HTML
<p style="padding-top:20px">
This is a link<br><br>
About
</p>
I don't understand your question properly. But if you are trying to make different div elements visible upon clicking different links, then this is what you should do:
<div id = "anchor-div">
<ul>
<li> <a id="about-anchor" href="javascript:;"> About</a> </li>
<li> <a id="help-anchor" href="javascript:;"> Help </a> </li>
</ul>
</div>
<div id="content-div">
<div id="about-content"></div>
<div id="help-content"></div>
</div>
$(document).ready(function(){
//if you wish to keep both the divs hidden by default then dont forget to hide //them
$("#help-content").hide();
$("#about-content").hide();
$("#about-anchor").click(function(){
$("#help-content").hide();
$("#about-content").show();
});
$("#help-anchor").click(function(){
$("#help-content").show();
$("#about-content").hide();
});
});
Also don't forget to add jQuery library.
Here is the what i have created fiddle, my question is when the red,green,blue div is clicked, i need a new div sliding downwards and displaying its contents, how can i achieve it using Java script.
here is the fiddle
HTML
<div class="profileimage">
</div>
<div class="about">
</div>
<div class="profile">
</div>
<div class="contact">
</div>
</div>
CSS :
body
{
margin:0;
padding0;
background:#262626;
}
.content
{
width: 860px;
height: 483px;
background-color: #fff;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.profileimage
{
width:407px;
height:150px;
background:#ececec;
float:left;
border-right:1px solid #fff;
}
.about
{
width:150px;
height:150px;
background:#F26B6B;
float:left;
border-right:1px solid #fff;
}
.profile
{
width:150px;
height:150px;
background:#A8D324;
float:left;
border-right:1px solid #fff;
}
.contact
{
width:150px;
height:150px;
background:#50C0E9;
float:left;
}
this might be easier
jquery
$('.about, .profile, .contact').on('click', function() {
$(this).children('.inner').slideToggle().parent().siblings().children('.inner:visible').slideUp();
});
html
<div class="content">
<div class="profileimage"></div>
<div class="about">
<div class="inner">some stuff1</div>
</div>
<div class="profile">
<div class="inner">some stuff2</div>
</div>
<div class="contact">
<div class="inner">some stuff3</div>
</div>
</div>
css
html, body{margin:0;padding:0}
.content, .inner{width:860px;position:absolute}
.content {
height: 483px;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.profileimage,.about,.profile,.contact {
height:150px;
float:left;
border-right:1px solid #FFFFFF
}
.about,.profile,.contact{width:150px}
.profileimage{width:405px}
/* bg */
body{background-color:#262626}
.content{background-color: #FFFFFF}
.profileimage{background-color:#ececec}
.about{background-color:#F26B6B}
.profile{background-color:#A8D324}
.contact{background-color:#50C0E9}
/* added*/
.inner{top:150px;left:0;height:333px;display:none;background-color:#000000;color:#FFFFFF}
made a fiddle: http://jsfiddle.net/filever10/gTN8W/
Here's a working fiddle with what you have requested.
Basically the JS you need is something like this:
$(document).ready(function(){
$('.contact,.profileimage,.about').click(function(){
$('#hiddenDiv').slideDown();
});
});
Basically what the javascript is saying is the following:
1) When the document is ready (when the website has finished loading) do the following:
2) For the classes "contact","profileimage","about", if any of them are clicked perform the following actions:
3) Select the element with id hiddenDiv $('#hiddenDiv') and slide it down -> $('#hiddenDiv).slideDown()
You can give hiddenDiv any properties you want, keeping in mind that in the css you must add the following line to hiddenDiv -> display:none
Here is a fiddle I've made for you:
http://jsfiddle.net/BHMUq/
I simply added the following jQuery code:
$(".about").click(function() {
if ($("#contents").is(":visible")) {
$("#contents").slideUp();
} else {
$("#contents").slideDown();
}
});
I also added a div containing content with the id contents and styled it with this:
#contents {display:none; height:40px;clear:both}