Currently working on a website for a family member, I have created a section that starts off hidden (display: none) and fades in when the user clicks anywhere on the page.
The functionality is smooth on Chromium, however, when testing it on Iceweasel 31.2, the CSS for the fading-in section fails to load.
This is the JavaScript function triggered by the click event:
var openGallery = function(){
$('section, nav, #topleft').fadeOut(400);
$('#gallerie').toggle();
}
Here's the associated CSS:
#gallerie {
position: relative;
height: 874px;
width: 1152px;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
margin: auto;
text-align: center;
}
#gallerie img:first-of-type {
max-width: 1100px;
max-height: 720px;
display: block;
margin-left: auto;
margin-right: auto;
}
.close {
display: inline-block;
position: absolute;
right: 5px;
top: 5px;
}
.left, .right {
position: static;
top: 746px;
}
Lastly, here's the HTML content that appears and disappears (note that the JS part is generated by some PHP):
<div id="gallerie">
<script type="text/javascript">
var collection = [
// "FILENAME" | "NAME" | WIDTH | HEIGHT
["6ème arrondissement-73 X 60.JPG","6ème arrondissement",1535,1832],
(more data...)
["Sur la neige-55 X 46.JPG","Sur la neige",1853,1562]
]
</script>
<h3>Gallery</h3>
<figure>
<img src="data/paintings/6ème arrondissement-73 X 60.JPG" class="big" title="6ème arrondissement" alt="0">
<figcaption>6ème arrondissement</figcaption>
<img src="images/left.png" alt="left" class="left" title="left"><img src="images/right.png" alt="right" class="right" title="right">
</figure>
<img src="images/close.png" class="close" title="Close window">
</div>
If anyone has insight on where the issue might be coming from, your assistance would be greatly appreciated. Thank you.