Develop Reference

jQuery add class on click not working

Probably a simple solution. I would like to expand an embedded video underneath the "Watch the video" when it is clicked. Pretty straight forward, however I can't get this code to add the "expanded" class on click to the video__player div for the life of me. Any help here is greatly appreciated, thanks.
Code:
$(".video").click(function() {
$(".video__player").addClass("expanded");
});
.video__player {
display: none;
width: 80vw;
max-width: 560px;
max-height: 315px;
height: 0;
transition: 0.5s;
margin: auto;
}
iframe {
width: 100%;
height: 100%;
}
.expanded {
height: 45vw !important;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video__container animated fadeInDownShort slow">
<a class="h6 video clickable">Watch the video <img class="play-btn" src="assets/kbd-icon-play.svg"></a>
</div>
<div class="video__player">
<br><br>
<iframe src="https://www.youtube.com/embed/SIaFtAKnqBU" frameborder="0" allowfullscreen></iframe>
</div>

One, as the comment says, you might not have wrapped it in a $(document).ready(function() {}); handler. Two, your allowFullScreen hasn't set a value. Unset, it's default is false. If you want to allow it fullscreen, set it to true.
Posting your full code through a JSFiddle or a repl.it would help as well, as it could be something else.
In the stackoverflow interpreter, your code seems to be working fine. Perhaps it's something with whatever interpreter you're using?

How to make images move into available whitespace

I'm creating a picture gallery page, but I'm running into issues with the images not moving into available whitespace. Heres an example:
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: auto;
}
div {
width: 50%;
margin: 0 auto;
}
img {
float: left;
}
.lscape {
width: 33%;
}
.port {
width: 33%;
}
<div>
<img src="https://i.ytimg.com/vi/c7oV1T2j5mc/maxresdefault.jpg" class="lscape">
<img src="https://i.ytimg.com/vi/c7oV1T2j5mc/maxresdefault.jpg" class="lscape">
<img src="http://www.cat-portraits.com/Images/cat_portrait_painting_in_pastels.jpg" class="port">
<img src="http://www.cat-portraits.com/Images/cat_portrait_painting_in_pastels.jpg" class="port">
<img src="https://i.ytimg.com/vi/c7oV1T2j5mc/maxresdefault.jpg" class="lscape">
<img src="https://i.ytimg.com/vi/c7oV1T2j5mc/maxresdefault.jpg" class="lscape">
</div>
Any help would be greatly appreciated!

There are two great sources to solve this problem:
1.Masonry - a JavaScript grid layout library. This will help with the layout.
2.Isotope - which is from the same author but you can also add filtering options.
Hope that these solve your problem!

Try "Masonry" - a JavaScript grid layout library by Dave DeSandro. It works like charm Masonry.

Multiple Images coming from one image

I am designing a webpage and want multiple images coming from one image using Javascript, CSS or Jquery whatever is required.
<img src="main.png" >
<img src="submain1.png" >
<img src="submain2.png" >
<img src="submain3.png" >
I am new to javascript and so it's getting difficult to solve it.
main.png is the main image and I want submain1.png, submain2.png, submain3.png images to come from the main.png one after the other as soon as the page loads.

As others have suggested, we think you are asking about sprite sheets. Now that you know a more common term for what you might be after you could try some searches. There are lots of CSS sprite issues on this site:
CSS Sprite Issues On StackOverflow
This is a quick demo:
#full { width: 389px; height: 186px; }
#window1 { background-position: 369px -11px; }
#window2 { background-position: 194px -91px; }
.iconback {
border: solid 1px;
background-image: url(http://www.icons-land.com/images/products/VistaPlayStopPauseIcons.jpg);
}
.window { width: 80px; height: 80px; margin: 1em; }
<div id="full" class="iconback"></div>
<div id="window1" class="iconback window"></div>
<div id="window2" class="iconback window"></div>

Simple css not working in Iceweasel 31.2

So I am making a website for a relative, I have made a which isn't displayed at first (display : none) and fades in when the user click somewhere on the page.
It works very well with Chromium, but when I try with Iceweasel 31.2 the CSS for the part of the page that is supposed to fade-in doesn't load.
The javascript function that is called upon clicking the button :
var openGallery = function(){
$('section, nav, #topleft').fadeOut(400);
$('#gallerie').toggle();
}
This is the CSS involved
#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;
}
And finally, the HTML that fades in/out (note that the JS part of it comes from 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>Gallerie</h3>
<figure>
<img src="data/tableaux/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="Fermer la fenetre">
</div>
I really don't know where the bug might come from. Thanks for helping me out.

Personally, I would use JQuery to toggle through the class events and use those to do the transitions etc. Right now, CSS3 is pretty good across browsers.
Instead of:
$('section, nav, #topleft').fadeOut(400);
I would add CSS that handles the fade with a transition.
Check out the pen I made here to see the effect. You can add toggleClass(); addClass(); or removeClass(); should you choose.
http://codepen.io/brycesnyder/pen/LEPJZg
EDIT: .toggle(); will cause a stupid effect, I meant .toggleClass();

New image when hovering on link

<div id="social-links">
<div><img src="pictures/facenh.png"/></div>
<div> <img src="pictures/twitternh.png" /></div>
<div> <img src="pictures/ytnh.png" /></div>
<div> <img src="pictures/mailnh.png" /> </div>
</div>
This is the code I'm using. The thing I want to do is to make another image appear when hovering over the image/link. I'm not sure how to do it, so i would love some help please.
#social-links {
float: left;
width: 100px;
height: 500px;
margin-left: -20px;
}
If you need to know the css for social-links, it's right there. All i want to do is to make another image appear when hovering over the links/the images. Perhaps Javascript is needed?

No JavaScript required, you can just use CSS.
It's not great practice to use images for links as search engines won't read them or get any context from them. Much better to have a text link that you replace with an image in the CSS - e.g.
<div id="social-links">
<div><span>Facebook</span></div>
...
</div>
Then, in your CSS, simply hide the text, and replace with image for both standard and hover.
#social-links {
float: left;
width: 100px;
height: 500px;
margin-left: -20px;
}
#social-links a span {
display: none;
}
#facebookLink {
display: block;
background: url('path-to-facebook-image.jpg');
width: 50px;
height: 50px;
}
#facebookLink:hover {
background: url('path-to-facebook-hover-image.jpg');
}

Here is a jQuery solution. Fiddle Here.
$("#facebook").hover( function () {
$(this).find("img").attr('src', "http://placehold.it/150x150/ff0000/000000");
}, function () {
$(this).find("img").attr('src', 'http://placehold.it/150x150');
});
I really think this Link from #talemyn is what you are looking for also. Either way should get the job done.