We Keep Coding

Display Fancybox3 with large content (width)

I have an issue with fancybox3. If you have a bigger content width, e.g. 2500px, the display of the box proceeds not as normal. To see this fancybox you will have to scroll down.
Here is my code:
<div style="height: 800px;">
<a data-fancybox data-src="#hidden-content" href="javascript:;">
Trigger the fancyBox width 500px;
</a>
<br>
<a data-fancybox data-src="#hidden-content2" href="javascript:;">
Trigger the fancyBox width 2500px;
</a>
</div>
<div style="display: none;" id="hidden-content">
<h2>Hello</h2>
<div style="width: 500px;">
... some stuff ...
</div>
</div>
<div style="display: none;" id="hidden-content2">
<h2>Hello</h2>
<div style="width: 2500px;">
... some more stuff ...
</div>
</div>
I've a codepen for this issue. Any ideas?
https://codepen.io/anon/pen/EQmgjK

fancyBox uses inline-block trick for vertical and horizontal centering. This is the best option for centering in the unknown, but unfortunately there are some drawbacks. By forcing extra wide content, you are breaking it.
You have several options, for example:
Make content scrollable:
#hidden-content2 {
max-width: calc(100% - 80px);
overflow: auto;
}
https://codepen.io/anon/pen/vdmyRo
Hide pseudo element
.fancybox-slide.wide:before {
display: none;
}
(You can set custom class name by setting data-slide-class="wide" attribute)
https://codepen.io/anon/pen/vdmydo?editors=1100

CSS transparent colour overlay fade not working on iOS

I have made a grid of images and when you hover over them a semi-transparent overlay fades in and out and some text appears
I wanted this to work similarly on mobile devices, only instead of it fading in when you hover, it fades in when you tap
I have managed to get this working on android but not on mobiles.
I will show my code and a few examples of solutions I have tried. I have tried so many but I am rather new to javascript (I have some functioning javascript working on my site though!) and nothing is working on iOS devices.
Js fiddle:
https://jsfiddle.net/49h450g9/
I am using bootstrap and less. My grid HTML code:
<div class="col-sm-5 col-xs-5"><div class="image-wrap">
<img src="assets/images/image1.jpg">
<div class="overlay purple2">
<br>
<h3>image 1</h3>
<hr>
<p>description</p>
<br>
View Website
</div>
</div>
</div>
<div class="col-sm-3 col-xs-3"><div class="image-wrap">
<img src="assets/images/image2.jpg">
<div class="overlay blue">
<h3>image 2</h3>
<hr>
<p>description</p>
<br>
View Website
</div>
</div>
</div>
<div class="col-sm-4 col-xs-4"><div class="image-wrap">
<img src="assets/images/image4.jpg">
<div class="overlay purple1">
<h3>image 3</h3>
<hr>
<p>description</p>
<br>
View Website
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-7 col-xs-7"><div class="image-wrap">
<img src="assets/images/image5.jpg">
<div class="overlay blue">
<h3>image 5</h3>
<hr>
<p><strong>description</p>
<br>
View Website
</div>
</div>
</div>
<div class="col-sm-5 col-xs-5"><div class="image-wrap">
<img src="assets/images/image6.jpg">
<div class="overlay purple2">
<h3>Image 6</h3>
<hr>
<p>description</p>
<br>
View Website
</div>
</a>
</div>
</div>
</div>
</div>
CSS:
.image-wrap {
display: inline-block;
position: relative;
}
.overlay {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
color:white;
opacity: 0;
transition:opacity .5s ease-out;
text-align: center;
hr {
border: 1px solid #fff;
width: 10%;
}
}
.image-wrap:hover .overlay {
opacity: 1;
}
.red {
background: rgba(102,67,154,0.7);
}
.blue {
background: rgba(23,56,179,0.7);
}
.purple1 {
background: rgba(140,23,179,0.7);
}
.purple2 {
background: rgba(71,13,142,0.7);
}
Solutions I have tried include:
adding
onclick=""
to the image wrap div element
2 adding the JS line to my js file:
$('body').bind('touchstart', function() {});
Adding the following js to my js file:
2 adding the JS line to my js file:
$(document).ready(function(){
$(".overlay").hover(function(){
//On Hover - Works on ios
$("p").hide();
}, function(){
//Hover Off - Hover off doesn't seem to work on iOS
$("p").show();
})
});
However, on iOS none of my solutions are working, when I tap no text or semi-transparent overlay fades in
I have been working on this for nearly a week and have looked at many questions on here but I cannot find a solution that works for me
Any help would be massively appreciated :)
Thanks!

use :active pseudo class instead of :hover. In touch mobile devices, once an hover is triggered, it will not get removed once you take your finger off. It need you to tap on somewhere else on the screen.
similarly in jquery you can use mousedown() and mouseup() for the same purpose. on mousedown() you may show the overlay and mouseup() you may hide it.

Angular - detect click background div but not on divs within

On ollynural.github.io, in the portfolio page i'm trying to simulate a pop-up div giving more information on the project you clicked on. To go back off the pop-up, I've added an ng-click so when you click on the main portfolio-pop-up container, the pop-up is removed.
Is it possible to only have the parts of the portfolio-pop-up div that are exposed (not on the photo nor the description white box) removing the main div once clicked? So you can click freely on the picture and the white box
<div class="portfolio-pop-up container" ng-click="losePortfolioFocus()">
<div class="row">
<div class="col-xs-12">
<img class="portfolio-image portfolio-image-popup" src="{{portfolioImageClass}}">
</div>
<div class="col-xs-12 pop-up-container">
<div class="pop-up-row">
<div class="col-xs-9" style="background: red">
<h1>
{{portfolioTitle}}
</h1>
<p>
{{portfolioDescription}}
</p>
</div>
<div class="col-xs-3" style="background: cyan">
Click me
<div ng-repeat="tech in portfolioTech">
{{tech}}
</div>
</div>
</div>
</div>
</div>
</div>
JS
$scope.losePortfolioFocus= function() {
angular.element('.portfolio-pop-up').css("display", "none");
}
CSS
.portfolio-pop-up {
display: none;
position: absolute;
width: 100%;
height: 100%;
/* color with alpha transparency */
background-color: rgba(0, 0, 0, 0.70);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Any help would be appreciated, can post more css or code if needed

You can stop the propagation of the click event on the element that wraps the pop-up's content like this:
<div class="portfolio-pop-up container" ng-click="losePortfolioFocus()">
<div class="row" ng-click="$event.stopPropagation()">
...
</div>
</div>
This way the clicks inside the popup will not trigger the losePortfolioFocus() handler.

I suggest you crawl up the event chain from you event' target and check whether your pop-up-container is in there. This way, you'll have a way to distinguish click in the pop-up or out of it.

How to create sliding images on hover with Bootstrap 3?

I want the images to slide when I move my cursor over the image. Let's say I will have 3 pictures.
The images will slide only if I am on the DIV.
I am pretty sure that this could be achieved with carousel but I am not sure if it is the best way.
My code
<div class="container products">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<!-- Reveal Up Full -->
<div class="image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/1" class="img-responsive"/>
<span class="title">Caption <br / ><br / > with some more info</span>
</div>
</div>
<div class="col-md-4">
<!-- Reveal Up Full -->
<div class="image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/2" class="img-responsive"/>
<span class="title">Caption <br / ><br / > with some more info</span>
</div>
</div>
<div class="col-md-4">
<!-- Reveal Up Full -->
<div class="image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/3" class="img-responsive"/>
<span class="title">Caption <br / ><br / > with some more info</span>
</div>
</div>
</div>
</div>
</div>
</div>
Demo : http://codepen.io/anon/pen/xbbNPM
Also I want the div to be clickable when my mouse is over.

I am pretty sure that this could be achieved with carousel but I am
not sure if it is the best way.
Why not? Because of you already use Bootstrap you should use its features in the first place.
also read http://getbootstrap.com/javascript/#carousel and find out that you can use multiple carousels on the same page:
Carousels require the use of an id on the outermost container (the
.carousel) for carousel controls to function properly. When adding
multiple carousels, or when changing a carousel's id, be sure to
update the relevant controls.
Cause you want to slide the carousal on mouseover(hover) you do not need any control, each of your carousels can code like that shown below:
<div class="col-md-4">
<!-- Reveal Up Full -->
<div id="carouse1" class="carousel slide" data-ride="carousel" data-interval="false">
<div class=" carousel-inner" role="listbox">
<div class="item active image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/1">
<div class="carousel-caption">>Caption <br / ><br / > with some more info</div>
</div>
<div class="item image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/2">
<div class="carousel-caption">>Caption <br / ><br / > with some more info</div>
</div>
<div class="item image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/3">
<div class="carousel-caption">>Caption <br / ><br / > with some more info</div>
</div>
</div>
</div>
</div>
Notice that i'm not sure why you wrap your 3 md-4 columns in a md-12 column, you do not need a img-responsive class for your carousel's images.
After creating your HTML you should create a JavaScript trigger for the mouseover (i use mouse enter here):
<script>
$('.carousel').on('mouseenter',function(){ $( this ).carousel('next');})
</script>
Also I want the div to be clickable when my mouse is over.
As you can see in the above i have wrapped the images in a a tag. The only possible issue left will be that the .carousel-caption is not clickable and overlay the images. Use the following CSS code to make the .carousel-caption clickable:
<style>
.carousel-caption {
pointer-events: none;
}
</style>
Demo: http://www.bootply.com/bmLVbymbhj
update
The caption doesn't slide up anymore. Actually code has changed dramatically. I think I > need to integrate it to your code.
Yes, you should integrate the revealUpFull class. Let me know if you found any troubles by doing this, or formulate a new question on SO.
You should use something like that shown below:
.carousel-caption {
width: 100%;
height: 100%;
position: absolute;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
text-align: center;
padding: 5px 0 4px;
font-size: 14px;
color: white;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
/* make image clickable */
pointer-events: none;
/* override bootstrap */
left: 0;
right: 0;
}
/* REVEAL UP FULL */
div.image.revealUpFull .carousel-caption {
height: 100%;
width: 100%;
bottom: -150px;
}
div.image.revealUpFull:hover img {
top: 0;
}
div.image.revealUpFull:hover .carousel-caption {
bottom: 0;
}
.carousel-caption {
pointer-events: none;
}
The left and right arrows which helps to slide are removed. This is what I want but
their blocks remains. So there is a space on the left and right.
I expect that the above issue is not related to the removed arrows but will be due to the size of the images. You are using image with a 360px width. As mentioned before the carousal's images are responsive by default. The CSS code sets a max-width:100% for these images, which means that they should not display larger than their original size. You can solve this by using larger images or give the image a with of 100% (mostly scaling up images will have quality issues). You can use the code that shown beneath:
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
max-width: none;
width: 100%;
}
What I want is when my mouse is over the DIV, 3 pictures will slide automatically with
infinite loop. Between each of them there will be 2 secs
In fact you should be able to use the following:
$('.carousel').on('mouseenter',function(){ $( this ).carousel('cycle',{interval:2000});});
$('.carousel').on('mouseleave',function(){ $( this ).carousel('pauze')});});
But the carsousel already pause on mouseenter. I will post a solution for that later on.
The carousel api has a pause option (hover by default), you can set this option to an empty string to prevent the carousel stop cycling on hover.
You should remove the carousel data-attribute in your HTML to enable explicit JavaScript initialization:
The data-ride="carousel" attribute is used to mark a carousel as animating starting at page >load. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript >initialization of the same carousel.
After that you can use:
$('.carousel').on('mouseenter',function(){ $( this ).carousel({interval:2000,pause:''}); });
$('.carousel').on('mouseleave',function(){ $( this ).carousel('pause'); });
When putting above three point together you will get something look like that show in the following demo: http://www.bootply.com/acGNORR3it

It looks like we don't need carousel for this simple feature. Javascript way will be easiest and fastest.
<script language="JavaScript">
var i = 0; var path = new Array();
// LIST OF IMAGES
path[0] = "http://lorempixel.com/750/375/sports/1/";
path[1] = "http://lorempixel.com/750/375/sports/2/";
path[2] = "http://lorempixel.com/750/375/sports/3/";
function swapImage() { document.slide.src = path[i];
if(i < path.length - 1) i++;
else i = 0; setTimeout("swapImage()",3000);
} window.onload=swapImage;
</script>
<img height="200" name="slide" src="" width="400" />
Demo: http://codepen.io/anon/pen/emmqYJ
Let me know if any easier solution exists.

Angular-masonry - expanding an item

In a nutshell, what I want to achieve using the Angular-masonry directive (http://passy.github.io/angular-masonry/) is something like this: http://codepen.io/desandro/pen/htsui
I have tried a number of different methods, but the bigger div just spreads out over the top of the next div along.
This is the HTML:
<div class="row" ng-controller="DemoCtrl">
<div class="span12">
<div masonry >
<div class="masonry-brick" ng-repeat="brick in bricks">
<div ng-class="brick.cssClass" ng-click="changeBrick($index)">
<img ng-src="{{brick.src}}" alt="A masonry brick" >
<span>Here is a load of text to see what fits in here and such </span>
</div>
</div>
</div>
</div>
</div>
This is a snippet of the angular code:
app.controller('DemoCtrl', function ($scope, $timeout,$element) {
..
$scope.changeBrick= function changeBrick(i) {
$scope.bricks[i].cssClass = 'big';
$element.masonry();
$element.masonry('layout');
}
}
The styles are just this for testing:
.small{
width: 200px;
background-color: lime;
}
.big{
width: 400px;
background-color: red;
}
Ate the moment, the div just spreads out to right over the top of the next div along - I really want masonry to do its thing and rearrange the other divs.

Try broadcasting the masonry.reload message to get angular-masonry to refresh the layout. I ran into a semi-similar problem and this seems to work: https://stackoverflow.com/a/27967782/3191599
function refresh() {
common.$timeout(function () { $scope.$broadcast('masonry.reload'); }, 100);
}