Develop Reference

Change image opacity when using GetElementById

Part of my Uni module requires me to make a webstory that uses random elements to mix up the story. I'm using GetElementById in JS to embed one random image from an array into a div, which works perfectly fine. The image becomes the background of the div, and I then have text on top of the image - again this all works perfectly fine.
However the issue is that I want the image to be slightly transparent so that the text is easier to read, however no matter what solution I try, I can't get it to work.
I've tried making the div transparent in both CSS and JS, however then the whole div including the text is effected which defeats the point. Then when I try the RGBA style in CSS, the image isn't effected.
So what I need is the image that is loaded into the div through JS to be slightly transparent, whilst the text that is also in the div in the HTML doument to remain untouched.
This is the JS I'm using to randomly select an image:
function randomGun() {
var imgCount = 3;
var dir = 'img/';
var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
var images = new Array
images[1] = "gun1.jpg",
images[2] = "gun2.jpg",
images[3] = "gun3.jpg",
document.getElementById("left").style.backgroundImage = "url(" + dir + images[randomCount] + ")";
}
<div id="container">
<div id="left">
<a id="message">Drive a bit closer to see if anybody is there.</a>
</div>
<script>
window.onload = randomGun()
</script>
</div>

Use a nested div with semi-transparent white background.
<div id="container">
<div id="left">
<div id="nested" style="width:100%;height:100%; background-color: rgba(255,255,255,0.5)">
<a id="message">Drive a bit closer to see if anybody is there.</a>
</div>
</div>
<script>window.onload = randomGun()</script>
</div>
In addition, I would set everything relative to style in a stylesheet, or at least inside a <style></style>.

UPDATE
Added your JS and fixed it a little. Note the adjustment to the random expression.
Perhaps this'll help you.
Use an element that'll contain 2 other elements, give the container position:relative and z-index:-2
Then the 2 elements inside should have position:absolute.
Next give the top element z-index:-1, background:url(http://image-host.com/path/to/img.jpg), and opacity:.5
Then the second element should have text and whatever else you want visible. Give this element z-index:1.
The reason why opacity wasn't working the way you expected to work is because opacity applies to everything within the element as well. Here in the Snippet, we layered an element with content and an element with a background image separately.
REFERENCE: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index
SNIPPET
function randomBG() {
var imgCount = 3;
var path = 'http://imgh.us/';
var randomCount = Math.round(Math.random() * (imgCount));
var images = ['solar_system.jpg', 'kowloon.jpg', 'transparent-map.png'];
document.getElementById("fader").style.backgroundImage = "url(" + path + images[randomCount] + ")";
}
window.onload = randomBG;
html,
body {
height: 100%;
width: 100%;
font: 400 16px/1.5 Verdana;
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#base {
position: relative;
z-index: -2;
width: 100vw;
height: 100vh;
}
#content {
position: absolute;
z-index: 1;
padding: 20px;
margin: 0 auto;
width: 75%;
height: auto;
top: 0;
left: 0;
background: none;
}
#fader {
position: absolute;
z-index: -1;
padding: 20px;
margin: 0 auto;
min-width: 75%;
min-height: 75%;
/*background: url(http://imgh.us/Lenna.png);*/
opacity: .5;
}
<main id='base'>
<section id='fader'></section>
<article id='content'>
<h1>This is the Text</h1>
</article>
</main>

JavaScript: setting main div tag height to zero which makes all the sub divs have a height of zero

I just want to use some css to make the height of a div 0 which also makes all the heights of the sub divs 0. I then want to call a javascript function which when clicked it makes the height of the main div 100%.
Here is the code that I have written:
HTML
<div class="menuTitle" id="ButtonsTopStyle" onclick="ButtonsTop">CONNECTING RODS</div>
<div class="buttonsTop" >
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
</div>
<div class="menuTitle" id="ButtonsBottomStyle" onclick="ButtonsBottom">CRANKSHAFTS</div>
<div class="buttonsBottom">
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
<img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
</div>
CSS
.smallButtons {
box-sizing: border-box;
margin-left: 10px;
height: 50px;
width: 50px;
margin-top: 15px;
background-color: white;
}
.menuTitle {
color: white;
font-family: "Arial";
text-align: center;
font-size: 30px;
padding-bottom: 30px;
padding-top: 30px;
}
.buttonsTop {
margin-left: 23px;
}
.buttonsBottom {
height: 0;
margin-left: 23px;
}
The css I have written doesnt make the height of the .buttonBottom zero they are still being displayed on the page. I don't want them to be displayed on the page
JAVASCRIPT
function ButtonsBottom() {
document.getElementById("ButtonsTopStyle").style.height = "0";
document.getElementById("ButtonsBottomStyle").style.height = "100%";
}
function ButtonsTop() {
document.getElementById("ButtonsBottomStyle").style.height = "0";
document.getElementById("ButtonsTopStyle").style.height = "100%";
}
As you can see I want the buttonsBottom to not be visible on the page when it loads but when you click on the onclick="ButtonBottom" div it makes the height 100% and makes the onclick="ButtonsTop" div have a height of 0

Add an
overflow:hidden;
to your .buttonsBottom div
Your div is expanding in height to accommodate your content.
What I'd suggest is adding an additional class of
.hidden {
height: 0;
overflow: hidden;
}
to your CSS and then modifying your JavaScript to add/remove this class as needed.
The other option would be to use display: none; and display: block; instead of height. Which would be my preferred method as long as you aren't aiming for a transition effect on height when clicked.

try this :
function ButtonsBottom() {
document.getElementById("ButtonsTopStyle").style.height = "0";
document.getElementById("ButtonsBottomStyle").style.height = "0%";
}
function ButtonsTop() {
document.getElementById("ButtonsBottomStyle").style.height = "0";
document.getElementById("ButtonsTopStyle").style.height = "0%";
}

Scrolling image gallery without jQuery

I have a scrolling image gallery as follows. The CSS lays out the images in a row that scrolls horizontally. Underneath, I have a row of the same images, but as thumbnails. I want to be able to click on a thumbnail, and scroll the correct image into view.
HTML:
<div class="images_container">
<img id="image_1" src="/image1.jpg">
<img id="image_2" src="/image2.jpg">
<img id="image_3" src="/image3.jpg">
</div>
<div class="images_container thumbnails">
<img src="/image1.jpg" class="thumbnail">
<img src="/image2.jpg" class="thumbnail">
<img src="/image3.jpg" class="thumbnail">
</div>
CSS:
.images_container {
overflow-x: scroll;
overflow-y: hidden;
max-height: 50rem;
white-space: nowrap;
}
.images_container.thumbnails {
max-height: 10rem;
}
.images_container img {
vertical-align: top;
height: 50rem;
}
.images_container.thumbnails img {
height: 10rem;
}
This works up to a point, but jumping to the id of the image is problematic. If the larger image is even a few pixels into the visible viewport, it can't 'jump' to it, as it seems to be technically on the screen.
Is there a way I can use Javascript to 'scroll' the whole image into view when I click on it's corresponding thumbnail? I don't have access to jQuery on this project, but am happy to use JavaScript to make this work.

You can try this , no change in CSS, i add an id in html and call to scrollTo function :
<script>
function scrollTo(image_id){
var topLeft = document.getElementById(image_id).offsetTop;
document.getElementById('container').scrollLeft = topLeft;
}
</script>
<div id="container" class="images_container">
<img id="image_1" src="/image1.jpg" height="500px" width="500px">
<img id="image_2" src="/image2.jpg" height="500px" width="500px">
<img id="image_3" src="/image3.jpg" height="500px" width="500px">
</div>
<div class="images_container thumbnails">
<img src="/image1.jpg" class="thumbnail" onclick="scrollIntoView('image_1')">
<img src="/image2.jpg" class="thumbnail" onclick="scrollIntoView('image_2')">
<img src="/image3.jpg" class="thumbnail" onclick="scrollIntoView('image_3')">
</div>

To keep DOM cleaner I got this solution which requires only adding js
var elms = document.getElementsByClassName("thumbnail");
for (var i = 0; i < elms.length; i++) {
elms[i].onclick = function(event) {
event.preventDefault();
event.stopPropagation();
var id = this.parentNode.href.substr(this.parentNode.href.lastIndexOf('/') + 2);
var v = document.getElementById(id).getBoundingClientRect().left;
document.getElementsByClassName("images_container")[0].scrollLeft += v;
}
}
See on jsfiddle

Here's my attempt at a no (well, minimal) JS solution to a scrolling gallery. You could, in fact, remove the Javascript all together if you replaced the .active class with the :target pseudo-selector, allowing you to click your thumbnails to do the scrolling. It's just easier for me to do it this way through a fiddle
function removeClass(element, className) {
var classes = element.className.split(' ');
var key = classes.findIndex(function(name) {
return name == className
});
classes.splice(key, 1);
element.className = classes.join(' ');
}
function addClass(element, className) {
var classes = element.className.split(' ');
classes.push(className);
element.className = classes.join(' ');
}
setInterval(function() {
var current = document.querySelector('.images .image.active');
var next = current.nextElementSibling;
if (!next) {
next = document.querySelector('.images .image:first-child');
}
removeClass(current, 'active');
addClass(next, 'active');
}, 1500);
body {
margin: 0;
padding: 0;
width: 500px;
height: 500px;
}
.images {
width: 100%;
height: 100%;
position: relative;
overflow-x: hidden;
}
.image {
width: 100%;
height: 100%;
top: 0px;
position: absolute;
left: -100%;
float: left;
transition: 1s;
}
.image.active {
left: 0%;
}
.image.active ~ .image {
left: 100%;
}
.black {
background-color: black;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
<div class='images'>
<div class='image black active'></div>
<div class='image red'></div>
<div class='image blue'></div>
<div class='image yellow'></div>
</div>
Essentially the way it works is by making the div.images container a certain height and width, and therefore all images inside it can be positioned as you want. We initially set all .image to left: -100%, so that they're completely off screen to the left. We then set .image.active as left: 0 so that it's on screen. We then use the ~ selector to say that all siblings that come after the current (.image.current ~ .image) should be left: 100%, so completely to the right. Add in a transition, and you have a completely CSS scrolling gallery. The JS only acts as a way to change what the current active image is, and you can replace that with :target if you want.
I used div's, instead of img tags because it's easier to provide a POC with div's and background colors, but it's worked well with images in the past. Just put an <img> tag inside those <div class='image'></div> tags

how to i get the image to center in my gallery

I have made a simple slider gallery for my site but have found that when I click next the image updates but it does not centre until I have done a full cycle of the images
how can i get the images to align from the start?
HERE IS THE JS FIDDLE > http://jsfiddle.net/8pScd/4
HTML
<div class="view_gallery">view gallery</div>
<div class="prev control"><<</div>
<div class="next control">>></div>
<div class="gallery">
</div>
<div class="overlay"></div>
CSS
.overlay{
display: none;
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.8);
z-index: 100;
}
.gallery{
z-index: 200;
padding: 10px;
position: absolute;
left: 50%;
background: #fff;
}
.control{
position: absolute;
top: 200px;
z-index: 300;
color: #fff;
text-transform: capitalize;
font-size: 2em;
cursor: pointer;
}
.prev{left: 0;}
.next{right:0;}
JQUERY
//images
var pics = new Array();
pics[0] = "cars.jpg";
pics[1] = "cats.png";
pics[2] = "dogs.png";
pics[3] = "bus.jpg"
//total amount of pictures to display
var pictot = pics.length-1;
var nxt = $(".next"),
prv = $(".prev"),
view = $(".view_gallery"),
gal = $(".gallery"),
overlay = $(".overlay"),
num = 0;
//view gallery
view.click(function(){
overlay.show();
gal.show();
// Start gallery off on the first image
gal.html('<img src="' + pics[0] + '" />');
});
nxt.click(function(){
// If on the last image set value to 0. Else add 1
if (num == pictot){num = 0;}else{num++;};
update();
});
prv.click(function(){
// If on first image set value to last image number. Else minus 1
if (num == 0){num = pictot;}else{num--;}
update();
});
function update () {
// update image with next/previous
gal.html('<img src="' + pics[num] + '" />');
//center image (not working very well)
var x = gal.width()/2;
gal.css("marginLeft", -x);
};
//hide
overlay.click(function(){
gal.hide();
$(this).hide();
});

The problem you have is that the "update" function is called immediately after clicking on prev/next. The image has not yet been loaded, so the code does not actually know the new gal.width yet. That's why it works after a full round: the images are now in the cache, and therefore already available.
The best solution would be to use javascript Image objects to preload the pictures; an easier way but possibly problematic is to use the 'load' event (it may not work well in all browsers).

You can align your gallery div with some simple css hack.
1)first define width. (you can define dynamic width with jquery).
2)add position:absolute;
3)add left:0 , right:0;
4)add margin:0 auto;
final code looks like this.
.gallery {
background: none repeat scroll 0 0 #FFFFFF;
left: 0;
margin: 0 auto !important;
padding: 10px;
position: absolute;
right: 0;
width: 600px;
z-index: 200;
}

your math is wrong, look at this example http://jsfiddle.net/8pScd/6/
i've just need to change your math at
var x = $('body').width()/2 - gal.width()/2;
gal.css("margin-left", x + 'px');
and i removed this line at your css
left: 50%;
.gallery{
z-index: 200;
padding: 10px;
position: absolute;
background: #fff;
}

Knowing that .gallery is 920px wide, set left: 50%; margin-left: -470px. Also remove the line in javascript which updates margin-left of the gallery container - gal.css("marginLeft", -x);

Change Element Content But Not The Size

I have a page that displays images at a set width. The height is variable so the image keeps it's aspect ratio. On mouse over, the image changes, but so does the height. How can I keep the height and width the same and just have the new image use a max-height / max-width of the last image so the container is not resized.
See Here - http://jsfiddle.net/z3sxc/11/
<style>
li {
width: 190px;
border: 1px solid black;
list-style: none;
}
li img{
width: 100%;
}
</style>
<body>
<ul>
<li onmouseover="clip_1.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg'" onmouseout="clip_1.src='http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg'">
<img src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" name="clip_1">
</li>
<li onmouseover="clip_2.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg'" onmouseout="clip_2.src='http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg'">
<img src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" name="clip_2">
</li>
</ul>​
</body>

You can try this - DEMO
$("li")
.on("mouseover", function() {
var h = $(this).height();
$(this).find("img").prop("src", "http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg");
$(this).height( h );
})
.on("mouseout", function() {
$(this).find("img").prop("src", "http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg");
});

No JavaScript/jQuery is needed to achieve this effect.
Simply define the background image of a block element (e.g. <div />, <span style="display: inline-block" />, etc.) in a css class, then change the background image on :hover.
See here: http://jsfiddle.net/adamb/z3sxc/15/
HTML:
<div class="picture" />
CSS:
.picture {
background: url(http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg) no-repeat;
background-size: 190px;
width: 190px;
height: 190px;
border: 1px solid black;
}
.picture:hover {
background: url(http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg) no-repeat;
background-size: 190px;
}

You could add a Javascript function to change the CSS on the element:
function changeImage() {
clip_1.style.maxWidth = clip_1.width + 'px';
clip_1.style.maxHeight = clip_1.height + 'px';
clip_1.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg';
}​
<li onmouseover="changeImage()" ... />
(Live here)

Here's something that might get you started.
The first adjustment I made was to wrap your image in a <div> with a generic CSS class name:
<li onmouseover="clip_1.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg'" onmouseout="clip_1.src='http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg'">
<div class="clip">
<img src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" name="clip_1">
<div>
</li>​
And then you can give that class some style which will help with the sizing:
.clip {
overflow: hidden;
}
And then with a little jQuery on top:
$(function() {
$('.clip img').load(function() {
$(this).parent('.clip').css({
width: $(this).width(),
height: $(this).height()
});
$(this).unbind('load'); // only do this once
});
});​
​DEMO