I am trying to create an animated sidebar. Initially i have a top navbar, a sidebar and a content div. Sidebar and content divs are inside a container div which has display flex row property. I am confused about transition. I want the sidebar show and hide when nav home is clicked which has a sliding effect. Right now I have a sliding sidebar but the content div is not getting full width of its parent when sidebar hides. How can I do this? Should I apply transition on flex or on transform? Any help is appreciated.
<body>
<nav>
<ul>
<li><button id="home">Home</button></li>
<li><button>Services</button></li>
<li><button>Operations</button></li>
<li><button>About</button></li>
<li><button>Contact</button></li>
</ul>
</nav>
<div class="container">
<div id="sidebar" class="sidebar visible">
<ul>
<li><button>Inventories</button></li>
<li><button>Employees</button></li>
<li><button>Feedback</button></li>
<li><button>Projects</button></li>
</ul>
</div>
<div class="content" id="content">
LOrem issum dolor sit amet
</div>
</div>
</body>
nav{
width: 100%;
display: flex;
justify-content : center;
}
.container{
display: flex;
flex-direction: row;
}
.sidebar{
flex:1;
background-color: rgb(40,100,250);
height: 100vh;
transition: transform 0.5s linear;
transform: translatex(-100%);
}
.visible{
transform: translatex(0);
flex: 1;
}
.content{
background-color: rgb(33,31,31);
flex: 5;
text-align: center;
color: #fff;
transition: flex 0.5s ease-in-out;
}
.afterContent{
flex: 10;
}
const homeButton = document.getElementById("home");
const sidebarDiv = document.getElementById("sidebar");
const content = document.getElementById("content");
homeButton.addEventListener("click", () => {
if (sidebarDiv.classList.contains("visible")) {
sidebarDiv.classList.remove("visible");
if(!content.classList.contains("afterContent")){
content.classList.add("afterContent");
}
} else {
sidebarDiv.classList.add("visible");
if(content.classList.contains("afterContent")){
content.classList.remove("afterContent");
}
}
});
Problem is that you just transform element, transforming will not change layout structure, it only affects element that you apply transform to and all its children.
Usually to achieve the result you want padding and position: absolute.
You have your sidebar element, that is position: absolute; top: 0; bottom: 0; left: 0;. To hide it you just transform it to the left. And then you have your content element that offsets menu with padding-left.
Here is a simple demo:
<html>
<head>
<style>
html, body {margin: 0; padding: 0}
.header {
width: 100%;
height: 100px;
background-color: red;
}
.body {
position: relative;
}
.sidebar {
position: absolute;
background-color: blue;
top: 0;
bottom: 0;
left: 0;
width: 300px;
transition: transform 0.2s;
}
.content {
padding-left: 300px;
min-height: 500px;
background-color: teal;
transition: padding-left 0.2s;
}
.menu-closed > .sidebar {
transform: translateX(-300px);
}
.menu-closed > .content {
padding-left: 0px;
}
</style>
</head>
<body>
<div class="header">header menu</div>
<div id="body" class="body">
<nav class="sidebar">sidebar menu</nav>
<div class="content"><button onclick="menu()">nav</button> content</div>
<div>
<script>
const body = document.getElementById("body");
let menuClosed = false;
function menu() {
menuClosed ? body.classList.remove("menu-closed") : body.classList.add("menu-closed");
menuClosed = !menuClosed;
}
</script>
</body>
</html>
Related
I am 95% of the way done with what I would like to have this webpage do. On this page I am looking to have my search bar filter the boxed options and fill them towards the top left. Right now, the boxes filter correctly and fill upwards (not quite sure why they filter upwards), but they don't fill upwards AND to the left. Any help would be greatly appreciated!
Note: The snippet runs, but there is no container for the boxes where as squarespace naturally makes these.
function search_topics() {
let input = document.getElementById('searchbar').value
input = input.toLowerCase();
let x = document.getElementsByClassName('text');
let y = document.getElementsByClassName('overlay-image _b1')
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
y[i].style.display = "none";
} else {
y[i].style.display = "table-cell";
}
}
/* Main container */
.overlay-image {
position: relative;
width: 100%;
}
/* Original image */
.overlay-image .image {
display: block;
width: 100%;
height: auto;
}
/* Original text overlay */
.overlay-image .text {
color: #fff;
font-size: 2.0em;
text-shadow: 2px 2px 2px #000;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
/* Text on hover formatting */
.overlay-image .text_2 {
color: #fff;
font-size: 0.75em;
line-height: 1.5em;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
/* New overlay on hover */
.overlay-image .hover {
position: absolute;
top: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: rgba(0, 0, 0, 0.5);
}
/* New overlay appearance on hover */
.overlay-image:hover .hover {
opacity: 1;
}
.overlay-image .normal {
transition: 0.5s ease;
}
.overlay-image:hover .normal {
opacity: 0;
}
#searchbar{
margin-left: 15%;
padding:15px;
border-radius: 10px;
width: 70%;
}
<body>
<input id="searchbar" onkeyup="search_topics()" type="text"
name="search" placeholder="Search topics....">
</body>
<div class=" overlay-image _b1 ">
<a href="url for block">
<img class=" image _b2 " src="https://i.redd.it/m3u40szpez231.jpg" />
<div class=" normal _b4 ">
<div class="text">Title of a block</div>
</div>
<div class=" hover _b3 ">
<div class=" text_2 ">Test that appears when block is hovered</div>
</div>
</a>
</div>
<div class=" overlay-image _b1 ">
<a href="url for block">
<img class=" image _b2 " src="https://i.redd.it/m3u40szpez231.jpg" />
<div class=" normal _b4 ">
<div class="text">Title of a block 2</div>
</div>
<div class=" hover _b3 ">
<div class=" text_2 ">Test that appears when block is hovered</div>
</div>
</a>
</div>
Your items move upward because the rows above are emptied of displayed content, allowing them to collapse. They don't move to the left because there are still table cells there. The problem you're having is that you're using a table to do work that tables were not designed to do. Css has a tool to do what you want called flexbox. Here's an example: https://codesandbox.io/s/tender-sky-9yyxf
<body>
<input id="search" type="text" placeholder="search"></input>
<div id="options">
<div value="coriander">Coriander</div>
<div value="anise">Anise</div>
<div value="lavender">Lavender</div>
<div value="fennel">Fennel</div>
<div value="ginger">Ginger</div>
<div value="sage">Sage</div>
<div value="cinnamon">Cinnamon</div>
</div>
<script src="src/index.js"></script>
</body>
import "./styles.css";
const search = document.getElementById("search");
if (search) {
search.addEventListener("change", event => {
if (event.target.value) {
// Normalize the search term.
const value = event.target.value.toLowerCase();
console.log(value);
// Hide all non matching elements.
document
.querySelectorAll(`#options :not([value*=${value})`)
.forEach(item => {
item.classList.add("hidden");
});
// Show all matching elements.
document.querySelectorAll(`#options [value*=${value}]`).forEach(item => {
item.classList.remove("hidden");
});
} else {
// If there are no search terms, show all elements.
document.querySelectorAll(`#options div`).forEach(item => {
item.classList.remove("hidden");
});
}
});
}
#options {
/* Set the options to fit three items in a row, and wrap them. */
display: flex;
flex-direction: row;
/* Setting max-width instead of width will allow your list to automatically adjust to smaller screen sizes. */
max-width: 70em;
flex-wrap: wrap;
}
#options div {
/* Set the items to a fixed width */
width: 20em;
border: 1px solid red;
margin: 0.5em;
text-align: center;
}
#options div.hidden {
/* Add a style to hide items when they don't apply to the search. */
display: none;
}
I want to expand a div to full screen on clicking on it. Just like
this Fiddle js link here
I want to animate the same from its position. if I click the box it feels like expanding from its position please help me to achieve that
$('.myDiv').click(function(e){
$(this).toggleClass('fullscreen');
});
.myDiv{background:#cc0000; width:100px; height:100px;float:left:margin:15px;}
.myDiv.fullscreen{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv">
my div
<button>Full Screen</button>
</div>
<div class="myDiv">
my div 2
<button>Full Screen</button>
</div>
Fullscreen animation
Now making a element fullscreen is pretty simple. It could be done with css alone.
.content {
display: inline-grid;
width: 150px;
height: 100px;
background-color: cornflowerblue;
border-radius: 3px;
transition: width 2s, height 2s;
margin: 10px;
}
.content button {
display: inline-block;
justify-self: center;
align-self: center;
height: 2em;
}
.content:hover {
width: 100vw;
height: 1200vh;
}
<div class="container">
<div class="content">
<button>Fullscreen</button>
</div>
</div>
<div class="content"></div>
Just adding a transition will make the element brake the layout.
To not break a layout you need:
Replace the element. (Below the Visibility : hidden element).
Give it an Absolute position.
Then set its width to fullscreen and animate its position so it can cover it.
Added an animation, transition
//Function is run on page load
$(function() {
var full = $(".fullscreen");
//Loops over all elements that have the class fullscreen
full.each(function(index, elem) {
$(elem).click(fullscreenClick);
});
function fullscreenClick() {
//The button is this
//We want to clone the parent
var box = $(this).parent();
//create a holder box so the layout stays the same
var holder = $(box).clone(false, true);
//and make it not visible
$(holder).css({
"visibility": "hidden"
});
//Get its position
var pos = $(box).position();
//Substitute our box with our holder
$(box).before($(holder));
//Set the position of our box (not holder)
//Give it absolute position (eg. outside our set structure)
$(box).css({
"position": "absolute",
"left": pos.left + "px",
"top": pos.top + "px",
});
//Set class so it can be animated
$(box).addClass("fullscreen");
//Animate the position
$(box).animate({
"top": 0,
"left": 0,
}, 3000);
}
});
* {
margin: 0;
padding: 0;
}
.container {
display: inline-block;
}
.container .element {
display: inline-block;
background-color: cornflowerblue;
margin: 5px;
padding: 10px;
width: 70px;
height: 30px;
transition: width 3s, height 3s;
;
}
.container .element.fullscreen {
width: calc(100vw - 30px);
height: calc(100vh - 30px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
</div>
You can add animation on all styles changes adding next properties to myDiv class:
/* Animate all changes */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
I will show the changes on your example:
$('.myDiv').click(function(e)
{
$(this).toggleClass('fullscreen');
});
.myDiv{
background:#cc0000;
width:100px;
height:100px;
float:left:
margin:15px;
/*Animations*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.myDiv.fullscreen{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv">
my div 1
<button>Full Screen</button>
</div>
<div class="myDiv">
my div 2
<button>Full Screen</button>
</div>
It's a bit of a complicated task, but this should give you an idea of how it's done. This code will run into some issues (clicking quickly will stack setTimeout) but does the basics.
The idea is that you calculate the current position of the element with getBoundingClientRect() and set initial position values with that, so that when you adjust the position to fixed, it will look as though it's still in the same spot - then when you override those values with the .fullscreen css, the transition property will allow them to animate.
The biggest issue here, which you'll notice if you click on the first div, is that it disappears from the layout and causes the second div to jump up to where it was, you'd probably need a way of preserving the layout. Hopefully this is helpful as a starting point anyway.
function getPosition(elem){
const rect = elem.getBoundingClientRect()
return {
top: rect.top,
left: rect.left,
width: rect.width,
height: rect.height
}
}
function toPx(val){
return [val, 'px'].join('')
}
$('.myDiv').click(function(e){
if(this.classList.contains('fullscreen')){
this.classList.remove('fullscreen')
setTimeout(e => this.style.position = 'static', 1000)
//close
} else {
//open
let pos = getPosition(this)
this.style.width = toPx(pos.width)
this.style.height = toPx(pos.height)
this.style.top = toPx(pos.top)
this.style.left = toPx(pos.left)
console.log(pos)
this.classList.add('fullscreen')
this.style.position = 'fixed'
}
});
.myDiv{background:#cc0000; width:100px; height:100px;float:left:margin:15px;}
.myDiv.fullscreen{
z-index: 9999;
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
}
.animateTransitions {
transition: all 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv animateTransitions">
my div
<button>Full Screen</button>
</div>
<div class="myDiv animateTransitions">
my div 2
<button>Full Screen</button>
</div>
Here's how i made it:
JQuery: 3.6.0
Css preprocessor: SCSS
CSS Framework: Bootstrap 5.1.0
See it in action:
https://codepen.io/illegalmexican/pen/NWYNVvg
Please note that i was answering a JQuery post. The fowlloing could be made in Vanilla Javascript for better performance. Also keep in mind that this could also be improved in terms of Accessibility standars by having a close button.
Html:
<div class="myDiv-Container">
<div class="row">
<div class="col-6">
<div class="d-flex flex-wrap position-relative">
<div class="myDiv w-50">
<div class="front bg-primary top-left">
<h1>Hello<br>World</h1>
</div>
</div>
<div class="myDiv w-50">
<div class="front bg-success top-right">
<h1>Hello<br>World</h1>
</div>
</div>
<div class="myDiv w-50">
<div class="front bg-danger bottom-left">
<h1>Hello<br>World</h1>
</div>
</div>
<div class="myDiv w-50">
<div class="front bg-warning bottom-right">
<h1>Hello<br>World</h1>
</div>
</div>
</div>
</div>
</div>
</div>
SCSS:
.myDiv-Container {
height: 500px;
width: 500px;
position: relative;
}
.front {
position: relative;
text-align: center;
display: flex;
&.position-absolute {
z-index: 1;
}
&.top-left {
top: 0;
left: 0;
}
&.bottom-left {
bottom: 0;
left: 0;
}
&.top-right {
top: 0;
right: 0;
}
&.bottom-right {
bottom: 0;
right: 0;
}
}
JQuery:
document.addEventListener('DOMContentLoaded', function () {
jQuery('.myDiv').each(function () {
var frontElem = jQuery(this).find('.front');
jQuery(this).on("click", function () {
if (jQuery(this).hasClass('active')) {
jQuery(this).removeClass('active');
jQuery(frontElem).animate(
{
width: jQuery(this).width(),
height: jQuery(this).height(),
},
500, function() {
jQuery(frontElem).removeClass('position-absolute');
jQuery(frontElem).css({
width: '100%',
height: '100%',
});
});
} else {
jQuery(frontElem).css({
width: jQuery(this).width(),
height: jQuery(this).height(),
});
jQuery(frontElem).addClass('position-absolute');
jQuery(this).addClass('active');
jQuery(frontElem).animate({
'width': '100%',
'height': '100%',
}, 500);
}
});
});
});
My team and I are having trouble stacking a Dropdown component on our page. Essentially, we want the Dropdown to slide down underneath the top-nav when the button is clicked, but as it slides down, it should be positioned above everything else: the sub-nav and the content below.
Currently, the Dropdown is positioned as absolute and the animation is performed with a transform: translateY(). We've tried positioning the elements outside of it as relative (the outer <ul>, <nav>, and <div id="top-nav"> elements that are bolded) with a higher z-index to ensure the dropdown stays below it, but so far it hasn't worked.
We're also not able to modify any of the CSS or structure of the div#content below, but we do have flexibility as to where we can place the Dropdown structurally in the #header.
EDIT: Tried my best to recreate the scenario with JSFiddle here: https://jsfiddle.net/4zaas4sq/
Here's roughly what our markdown looks like:
<body>
<div id="header">
<div>
**<div id="top-nav">**
<div>
**<nav>**
<ul></ul>
**<ul>**
<li>
<DROPDOWN>
<button onClick={toggleDropdown}>Log In</button>
<div className={(this.state.show && 'show})>
<ul></ul>
</div>
...
</DROPDOWN>
</li>
<li></li>
</ul>
</nav>
</div>
</div>
<div id="sub-nav">
...
</div>
</div>
</div>
<div id="content">
</div>
</body>
Here's a wireframe depicting the final state of the dropdown.
Any help or suggestions would be appreciated!
I used max-height property.I didn't change a lot of things in your code.In JS code you will see main changes.Let me know if this solution is what you want.Thanks :)
In html code add class="hideItem" in the divider with id="dropdown" like this:
<div id="dropdown" class="hideItem">
JS code
$(document).ready(function() {
$('#dropdown-button').click(function() {
if( $("#dropdown").hasClass( 'hideItem' )){
$( "#dropdown" ).css( 'max-height' , '100%' );
$("#dropdown").removeClass( 'hideItem' );
$("#dropdown").addClass( 'showItem' );
}else{
$( "#dropdown" ).css( 'max-height' , '0' );
$("#dropdown").addClass( 'hideItem' );
$("#dropdown").removeClass( 'showItem' );
}
});
});
css code
html, body {
height: 100%;
}
#top-nav {
background-color: mediumpurple;
width: 100%;
}
.nav {
display: flex;
justify-content: space-between;
}
.inner-left-nav {
list-style: none;
display: flex;
}
.inner-left-nav li {
padding: 5px;
border: 1px solid black;
}
.inner-right-nav {
display: flex;
list-style: none;
margin: 0;
}
.inner-right-nav li {
align-items: center;
padding: 0 5px;
}
.dropdown-container {
display: flex;
align-items: center;
height: 100%;
}
#dropdown {
position: absolute;
top: 70px;
right: 100px;
max-height: 0;
overflow-y: hidden;
transition: max-height 1s ease-in-out;
background-color: mediumseagreen;
}
#dropdown.show {
visibility: visible;
transform: translateY(0%);
transition: visibility 0s, transform 0.3s;
}
#dropdown-button {
border: 1px solid black;
background: transparent;
padding: 0 20px;
cursor: pointer;
}
.dropdown-list {
padding: 0;
list-style: none;
}
#sub-nav {
display: flex;
justify-content: space-between;
background-color: grey;
}
#content {
background-color: azure;
width: 100%;
height: 100%;
}
i have to used many overlay so
when i close the overlay either right or left my page moves up and comes from start.
it can be easily checked by open the last two overlay.
this is the code.
i dont know where is mistake. or what should i add more in css.
as i selected the position fixed , may be this is the error but if changed it than more errors occur.
$(document).ready(function(){
left side overlay
$("#left-click1").click(function(){
$("#image").prop("src","C:/Users/Ahsan/Documents/sublime/nature1.jpg");
$("#para").text("1111ABCD");
});
$("#left-click2").click(function(){
$("#image").prop("src","C:/Users/Ahsan/Documents/sublime/nature2.jpg");
$("#para").text("2222ABCDEF");
});
right side overlay
$("#right-click1").click(function(){
$("#image1").prop("src","C:/Users/Ahsan/Documents/sublime/nature3.jpg");
$("#para1").text("3333ABCDEF");
});
$("#right-click2").click(function(){
$("#image1").prop("src","C:/Users/Ahsan/Documents/sublime/nature4.jpg");
$("#para1").text("4444ABCDEF");
});
$("#right-click3").click(function(){
$("#image1").prop("src","C:/Users/Ahsan/Documents/sublime/nature5.jpg");
$("#para1").text("4444ABCDEF");
});
function openAnimeleft(){
document.getElementById("left").style.width = "60%";
}
function closeAnimeleft(){
document.getElementById("left").style.width = "0";
}
right side animation
function openAnimeright(){
document.getElementById("right").style.width = "60%";
}
function closeAnimeright(){
document.getElementById("right").style.width = "0";
}
<div id="left" class="left-styles">
×
<div>
<div>
<img id="image">
</div>
<div>
<p id="para"></p>
</div>
</div>
</div>
left side animation div
<div id="mains"><p>00000001</p>
<span id="left-click1" onclick="openAnimeleft()"> »» left-open1</span>
</div>
<div id="mains"><p>00000002</p>
<span id="left-click2" onclick="openAnimeleft()"> »» left-open2</span>
</div>
right side animation div
<div id="right" class="right-styles">
×
<div>
<div>
<img id="image1">
</div>
<div>
<p id="para1"></p>
</div>
</div>
</div>
<div id="mains"><p>00000003</p>
<span id="right-click1" onclick="openAnimeright()">«« right-open1</span>
</div>
<div id="mains"><p>00000004</p>
<span id="right-click2" onclick="openAnimeright()">«« right-open2</span>
</div>
<div id="mains">
<p>00000005</p>
<span id="right-click3" onclick="openAnimeright()">«« right-open3</span>
</div>
css code
.left-styles {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111000;
overflow: hidden;
transition: 0.5s;
padding-top: 60px;
}
.left-styles a ,.right-styles a{
text-decoration: none;
color: white;
transition: 1s;
}
#right-click1,#right-click2,#right-click3,#left-click1,#left-click2{
font-size: 30px;
cursor: pointer;
}
#media screen and (max-height: 450px)
{
.left-styles {padding-top: 15px;}
.left-styles a {font-size: 18px;}
.right-styles {padding-top: 15px;}
.right-styles a {font-size: 18px;}
}
.right-styles {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111000;
overflow: hidden;
transition: 0.5s;
padding-top: 60px;
}
.right-styles .cross-button, .left-styles .cross-button {
position: absolute;
top: 10px;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.right-styles a:hover, .left-styles a:hover{
color: green;
}
#para,#para1{
color: green;
font-size: 20px;
margin: 5vw;
}
#image,#image1{
width: 50vw;
height: 50vh;
margin-left: 6%;
}
#left,#right{
overflow: scroll;
}
#mains{
height: 200px;
}
If I understand you correctly, when you click the close button the page jumps to the top of the scroll window. If that is the problem, you need to use event.preventDefault();. This will stop the a tag behaving like a link.
$("#left-click1").click(function(event){
event.preventDefault();
$("#image").prop("src","C:/Users/Ahsan/Documents/sublime/nature1.jpg");
$("#para").text("1111ABCD");
});
I've created a gallery using just CSS that when a thumbnail is hovered on, the title slides into view. It sort of works on touch screens that if the button is touched and held, the title appears. I would like to make it so that a tap brings up the title and a second tap enters the gallery. I've tried all sorts of jQuery code but nothing seems to enable the second tap. I'd also wouldn't mind if it was one tap with a second or two delay to read the title before entering the gallery. I'm new to javascript and this site so I apologize if I don't ask this properly. Thanks for your help!
Here's my code:
<head>
<script src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$("target").click(function(){ $(this).toggleClass("titleBox"); });
</script>
</head>
<body ontouchstart="" class="no-touch">
<div class="wrap">
<!-- Define all of the tiles: -->
<div class="box">
<div class="boxInner">
<a href="buildings/colorclock.html">
<img src="images/buildings/thumbs/06.jpg" alt="Color Clock House">
<div class="titleBox">Color Clock House</div>
</a>
</div>
</div>
<div class="box">
<div class="boxInner">
<a href="buildings/treetriangle.html">
<img src="images/buildings/thumbs/07.jpg" alt="Tree Triangle House">
<div class="titleBox">Tree Triangle House</div>
</a>
</div>
</div>
</div>
</body>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.wrap {
overflow: hidden;
margin: auto;
padding: 0 10%;
margin-top: 40px;
}
.box {
float: left;
position: relative;
width: 20%;
padding-bottom: 20%;
}
.boxInner {
position: absolute;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
overflow: hidden;
}
.boxInner img {
width: 100%;
}
.boxInner .titleBox {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-bottom: -50px;
font-size: .9em;
background: #fff;
background-size: 105%;
color: #A59E97;
padding: 5px;
text-align: center;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
margin-bottom: 0;
}
.boxInner:focus {
cursor: pointer;
}
I was finally able to solve the click once, activate hover, click twice to to open the link on touch screens. If anyone is interested in the code here it is.
jQuery(function($) {
$('.boxInner').on("touchstart", function (e) {
'use strict'; //satisfy code inspectors
var link = $(this); //preselect the link
if (link.hasClass('hover')) {
return true;
} else {
link.addClass('hover');
$('a.taphover').not(this).removeClass('hover');
e.preventDefault();
return false;
}
});