CSS transparent colour overlay fade not working on iOS - javascript

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.

Related

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.

Trying to rotate several divs over top of each other

I am sorry if this is covered somewhere else but I have not been able to find it. I am trying to create an area of my page with three <div>s that rotate on top of each other. I have written this css and code:
#block {
width:1202px;
height: 402px;
overflow: hidden;
margin: auto;
}
.content {
width:1200px;
height:400px;
margin: auto;
}
<div id="block">
<div class="content">
<a name=image1></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
<div class="content">
<a name=image2></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
<div class="content">
<a name=image3></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
</div>
<table style="margin: auto; width:20px;">
<tr>
<td>&#8226</td>
<td>&#8226</td>
<td>&#8226</td>
</tr>
I have not yet played with the formatting as right now it is just theory, but can you tell me how to make the 3 content divs rotate so that each displays for 10 seconds then moves to the next eventually rotating back to the beginning.I know this will likely require php or jquery, but I am uneducated in both.
Thank you for any help that you can offer.

Multiple overlay on a image

I'm creating two overlay in an image.
One overlay is fixed over the bottom of image,Second overlay will be displayed on mouse hover.
My problem is second overlay is displayed on first overlay but it should not display over the fixed one.
Sample partial Demo is here. Please find the screenshot too.
Please help me or guid me to the right way to solve the issue or implement the design..
HTML
<section id="s-explore">
<div class="pagebreak"><span>The Lifestyle</span> <i class="down"><</i>
</div>
<div class="wrapper layout">
<div class="col">
<div class="media">
<img id="d1" src="http://placekitten.com/300/300" />
<div class="contenthover">
<p>Lorem ipsum
</p>
</div>
</div>
</div>
CSS
.contenthover{
color:#fff;
}
.mybutton{
padding:20px;
color:#fff;
background-color:#000;
margin:10px;
}
Jquery
$(function () {
$(' #d1').contenthover({
overlay_width: 300,
overlay_height: 150,
effect: 'slide',
slide_direction: 'bottom',
overlay_x_position: 'center',
overlay_y_position: 'bottom',
overlay_background: '#000',
overlay_opacity: 0.8
});
});
Its just about the z-index of the third layer. You have to set the position of the media content to relative, position the 3 layer with absolute to the bottom and set z-index to bottom layer. That's it.
FIDDLE
html
<section id="s-explore">
<div class="pagebreak"><span>The Lifestyle</span> <i class="down"><</i>
</div>
<div class="wrapper layout">
<div class="col">
<div class="media">
<img id="d1" src="http://placekitten.com/300/300" />
<div class="contenthover">
<p>Lorem ipsum
</p>
</div>
<div class="bottom_layer">colors</div>
</div>
</div>
css
.contenthover{
color:#fff;
}
.mybutton{
padding:20px;
color:#fff;
background-color:#000;
margin:10px;
}
.bottom_layer{
position:absolute;
bottom: 0;
background:red;
z-index: 10;
width: 300px;
}
.media{
position:relative;
}

Muliple hidden fullscreen divs?

I'm working on my portfolio website, but can't solve the following problem.
The website is basically just pictures, if you click on one,
a semi-transparent fullscreen div opens with information (more pics and some text).
If you click again the div will close.
jQuery for hiding and showing:
<script>
$(function()
{
$('.masonryImage').click(function()
{
$('.hiddenDiv').show();
$("body").css("overflow", "hidden");
});
$('.hiddenDiv').click(function()
{
$('.hiddenDiv').hide();
$("body").css("overflow", "auto");
});
});
</script
HTML:
<div class="masonryImage">
<img src="images/pic1.jpg" alt="">
</div>
<div class="hiddenDiv">
<div class="text">
<p>Lorem ipsum...</p>
</div>
<div class="pics">
<img src="images/pic2.jpg" alt="">
</div>
</div>
So far it works with one picture, but when I'm adding another,
the new hidden text will overlay the first one, same with the pictures.
Is it because I'm using the same class ("masonryImage")?
Or isn't my Javascript removing the divs properly?
Many thanks.
Edit: CSS might be usefull:
.hiddenDiv {
position:fixed;
top:0;
left:0;
background:rgba(255,255,255,0.8);
z-index:900;
width:100%;
height:100%;
display:none;
overflow: scroll;
}
.masonryImage {
margin: 20px 20px 20px;
display: inline-block;
cursor: pointer;
}
here is how I modified your code :
DEMO
HTML
<div class="masonryImage">
<img src="..." alt="">
<div class="hiddenDiv">
<div class="text">
<p>Lorem ipsum...</p>
</div>
<div class="pics">
<img src="..." alt="">
</div>
</div>
</div>
I put the hiddenDiv inside the masonryImage so every masonryImage will have a custom hiddenDiv to show/hide.
JQUERY
$('.masonryImage').click(function()
{
if ($(this).find('.hiddenDiv').toggle().is(":visible")) {
//alert('hiddenDiv is visible !');
$("body").css("overflow", "hidden");
}
else {
//alert('hiddenDiv is hidden !');
$("body").css("overflow", "auto");
}
});
You can just use .toogle() to show/hide the div. $(this) refers to the clicked masonryImage and .find('.hiddenDiv') to its child (you can also use .children('.hiddenDiv') ).
Then you can test if the clicked div is hidden or visible with .is(":visible"), to apply your body custom css :)
Hope I helped you.

Making an Image a Hyperlink in Nivo Slider

I am working with NivoSlider and have been unable to make the Image a link. I know, i can use captions to create a link. But, that isn't enought. For better accessibility, i want the image to be a link too.
There is one similar question on StackOverflow, but it is for a very old version of Nivo.
I am using this syntax for the slider.
<div class="slider-wrapper theme-default container">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<div class='slide'><a href='#'><img src='abc.png'></a>
</div>
<div class='slide'><a href='http://google.com'><img src='google.png' title=''></a>
</div>
</div>
</div>
Everything works perfectly. The slideshow, transition, captions, etc. But, I am unable to make the anchor link work on the entire image. :(
If anyone knows how to make it work, then please let me know.
EDIT: Here is the only piece of CSS written by me:
.slider-wrapper {
margin: auto;
margin-top: 15px;
background: fade(white,80%);
padding-top: 15px;
margin-bottom: 40px;
}
.slide-title {
.font;
color: #ddd;
}
I am very late to party. it may be useful for someone
HTML
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img title="#htmlcaption1" src="images/01.png" alt="">
<img title="#htmlcaption2" src="images/02.png" alt="">
</div>
</div>
CSS
.nivoSlider a.nivo-imageLink {
background:white;
filter: alpha(opacity=0);
opacity: 0;
z-index: 8;
width: 100%;
height: 100%;
position: absolute;
}
If you remove the wrapper divs with class "slide" it will work just fine.
For example this is from nivo slider's demo
<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
<img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" />
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
or checkout this thread,
NIVO SLIDER - Make a slide a link?

Categories