Javascript: Hover over Issues & How can I structure the html efficiently? - javascript

I've written a Javascript that triggers upon a person interacting an image, but I have some difficulty tackling the issues that I'm having. Please take a look :)
Heres what the Javascript written is suppose to do:
1) When person opens page, all they see are a collection of images.
2) When the cursor / mouse is hovered over the image 2a) info text fadesIn on the bottom and right (.rotate) of the image, 2b) the grayscale effect lowers from 100% to 10%, and 2c) .detail fadesIn at a fixed position on the bottom right corner of the page.
3) All images are associated with a number. That number is then used so that each image can have its own content & text / position: / color: / etc.
And here are the problems I'm facing with:
1) When an image that has its position set as bottom, it moves up when a curser hovers over it.
2) Upon hovering, when the cursor hovers over the images text, it for some reason repeatedly fadesIn and fadesOut.
3) How can I set the .detail to be positioned to the bottom right of the page for all images?
4) How can the image number (set as .rotate) placed outside of the image and be vertically centered from the images height?
Here is a jsfiddle for visual / functionality reference: jsfiddle
Thank you in advance!
JS
$('.targetDiv').hide();
$('.show').mouseover(function () {
$('.targetDiv').hover();
$('.info' + $(this).attr('target')).fadeIn();
});
$('.show').mouseout(function () {
$('.targetDiv').fadeOut();
$('.info' + $(this).attr('target')).fadeOut();
});
HTML
<div class="show" id="subject01" target="01">
<div class="frontpage-img-wrap">
<img src="http://i61.tinypic.com/fw3tpc.jpg" width="250" height="auto" alt="" />
</div>
<div class="targetDiv info01">
<h2>Name</h2>
<h4>Text</h4>
<p class="rotate">Image Number</p>
<p class="detail">Image Detail
<br/>Detail
<br/>More Detail.</p>
</div>
</div>
<!-- END 01 -->
<div class="show" id="subject02" target="02">
<div class="frontpage-img-wrap">
<img src="http://i59.tinypic.com/ogeybn.jpg" width="150" height="auto" alt="" />
</div>
<div class="targetDiv info02">
<h2>Name</h2>
<h4>Text</h4>
<p class="rotate">Image Number</p>
<p class="detail">Image Detail
<br/>Detail
<br/>More Detail.</p>
</div>
</div>
<!-- END 02 -->
CSS
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td {
margin:0;
padding:0
}
fieldset, img {
border:0
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal
}
a img {
border:none
}
p, li h2, body, h4, h4 a {
font-family:"Courier New", Courier, monospace;
font-size: 12px;
line-height: 18px;
font-weight: normal;
letter-spacing: 1px;
overflow-x: hidden;
}
h2 {
font-family:"Apercu Bold", sans-serif;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
font-size: 11px;
text-align: center;
}
h4 {
text-transform: uppercase;
text-align: center;
}
a {
color: red;
text-decoration: none;
}
header a:hover {
border-bottom: 1px solid;
}
.frontpage-img-wrap, .img-placeholder, .image-wrapper-inner {
margin: 0 0 18px;
}
.entry {
text-align: center;
position: absolute;
}
.frontpage-img-wrap {
position: relative;
}
.frontpage-img-wrap img {
margin: 0;
display: block;
}
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
position: absolute;
right: -45px;
top:50%;
font-size: 12px;
line-height: 18px;
font-family: monospace;
letter-spacing: 1px;
margin: 0;
}
.frontpage-img-wrap {
display:block;
}
#subject01 {
left: 50px;
top: 50px;
position: fixed;
}
#subject02 {
right: 50px;
bottom: 100px;
position: fixed;
}
h6 {
position: fixed;
top:40%;
margin: 0 auto;
text-align: center;
font-family: helvetica;
font-size: 100px;
font-weight: bold;
font-style: normal;
}

You can solve all your issues with CSS only JSBin here
New CSS
.rotate {
display:block;
position:absolute;
font-size: 12px;
line-height: 18px;
font-family: monospace;
letter-spacing: 1px;
margin: 0;
text-align: center;
top:45%;
left:95%;
height:18px;
visibility: hidden;
opacity:0;
-webkit-transition: all 250ms linear;
-o-transition: all 250ms linear;
transition: all 250ms linear;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.targetDiv {
position:absolute;
width:100%;
visibility: hidden;
opacity:0;
-webkit-transition: all 250ms linear;
-o-transition: all 250ms linear;
transition: all 250ms linear;
}
.show:hover .targetDiv {
visibility: visible;
opacity:1;
}
.show:hover .rotate {
visibility: visible;
opacity:1;
}
HTML Changes
Take <p class="rotate"> ... </p> out of targetDiv and move it into frontpage-img-wrap
Notes
position:absolute;width:100% solves the bottom positioned div from jumping up on hover
fade in/out effects are done with transition opacity and visibility
easier to debug since you can now for the :hover state in developer tools
The position of rotate is inexact - you may need to calculate image height with JS, then set the rotate div's HEIGHT as the images width

Addressing only your fadeIn/Out issues:
I'd really suggest using pure CSS for this. The JS just complicates it:
.targetDiv { opacity: 0; transition: opacity 0.5s linear; }
.frontpage-img-wrap:hover + .targetDiv { opacity: 1; }
So don't hide() (creates display: none;) your text at all, but just drop opacity to 0, set a transition (for that nice fade effect... make sure to use vendor prefixes with transition), then raise opacity to 1 whenever .frontpage-img-wrap is hovered.
Edit
As far as your bottom-aligned elements: it is because of the $('.targetDiv').hide(); (translated display: none;) that is pops up when hovered... it needs to maintain size. Doing my CSS trick of just turning off the opacity will let the text keep its size. But if you must do it with JS, you need to set the size of the whole .show element so it doesn't resize on hover.

Related

Enable hover for touch/click on mobile

Everything works the way it should on desktop view but the DIV which shows on hover in desktop doesn't show in mobile view. I want to show that DIV on touch/click in mobile/tablet.
As per some suggestions, I tried with :active after :hover too but that doesn't work.
I don't mind JS or jQuery answers too.
DEMO: https://jsfiddle.net/ovg6xzhu/
HTML:
<div class="hoverEffect hoverEffect-first">
<img src="https://via.placeholder.com/150" />
<div class="mask">
<h2>Web Services!</h2>
<p>We are going to build another sets of css hover image effects with CSS3 animations.<br />View All</p>
</div>
</div>
CSS:
.hoverEffect {
width: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
border-radius: 2px;
margin-bottom: 30px;
}
.hoverEffect .mask {
width: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.hoverEffect img {
display: block;
position: relative
}
.hoverEffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
padding: 10px;
margin: 20px 0 0 0
}
.hoverEffect p {
position: relative;
color: #fff;
padding: 0px 20px 20px;
text-align: center
}
.hoverEffect-first img {
transition: all 0.2s linear;
width:100%;
height:auto;
}
.hoverEffect-first .mask {
opacity: 0;
background-color: rgba(61, 90, 128, 0.95);
transition: all 0.4s ease-in-out;
width: 100%;
height: 100%;
}
.hoverEffect-first h2 {
margin: 10px 40px;
transform: translateY(-100px);
opacity: 0;
transition: all 0.2s ease-in-out;
}
.hoverEffect-first p {
transform: translateY(100px);
opacity: 0;
transition: all 0.2s linear;
}
.hoverEffect-first:hover img, .hoverEffect-first:active img {
transform: scale(1.1);
}
.hoverEffect-first:hover .mask, .hoverEffect-first:active .mask {
opacity: 1;
}
.hoverEffect-first:hover h2,
.hoverEffect-first:hover p,
.hoverEffect-first:active h2,
.hoverEffect-first:active p {
opacity: 1;
transform: translateY(0px);
}
.hoverEffect-first:hover p, .hoverEffect-first:active p {
transition-delay: 0.1s;
}
.hoverEffect-first:hover a.info, .hoverEffect-first:active a.info {
transition-delay: 0.2s;
}
Your code is working. Always make sure to clear your browser cache. A quick trick to do this on mobile would be to add " /?random " at the end of your url to get a fresh load. Make sure to change " random " to anything you wish per refresh so it keeps sending you a fresh load. That said I would also have to agree with ehab's answer, it's not very intuitive to show/hide your content upon hovering on mobile. Add visual indicators like a button or let the animation take place naturally when it enters the viewport.
You dont need js for this purpose: css should be enough, and active should do the job, The code you posted is working fine - maybe u had a cache problem. That being said its not the best experience for mobile users, you should not emulate hover effects on mobile, users wont expect they need to click ( and then they are expected to click on another element to make the effect go away).

CSS Navbar Transition is Smooth on Scroll Down but no Transition at all on Scroll Back Up

I am currently working on a website with a navigation bar at the top of the screen that is initially transparent when you first visit the site, but turns into a white bar with black text the moment you start scrolling down. It also shrinks a little. It has a really nice and smooth transition as it changes it's color and shrinks, but when you scroll back to the top of the page, there is no more smooth transition but rather an instant ugly transition. Actually the changing of the color back to transparent seems okay but the resize of the bar lacks the transition. I uploaded a GIF so you can see exactly what's the problem.
There is a second problem I would like to ask for. As you can see in the GIF, there is an underline animation on text hover, however, I cannot get it to work on the white navbar. I want that underline to become black, just like the text and shrink with the rest of the navbar.
Here is the GIF:
https://media.giphy.com/media/5jYbvzN9OzaVm3IRE6/giphy.gif
Also the CSS:
/* -=-=-=-=-= FONT IMPLEMENTATION =-=-=-=-=- */
#import url('https://fonts.googleapis.com/css?family=Quicksand:300|Roboto:100');
/* -=-=-=-= END FONT IMPLEMENTATION =-=-=-=- */
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Roboto",sans-serif;
font-weight: lighter;
}
header.index {
width: 100%;
height: 100vh;
background: url(../res/images/back.png) no-repeat 50% 50%;
background-size: cover;
}
header.page1 {
width: 100%;
height: 100vh;
background: url(../res/images/test.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
}
.logoimg {
position: fixed;
display: inline-block;
float: left;
width: 235px;
height:54px;
margin: 37px 80px;
transition: 0.5s ease-in-out;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
transition: 0.5s ease-in-out;
}
nav ul {
line-height: 100px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 50px;
transition: 0.5s ease-in-out;
}
nav ul li {
display: inline-block;
padding: 16px 20px;
transition: 0.5s ease-in-out;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 24px;
transition: 0.5s ease-in-out;
}
nav ul li a.current{
font-weight: 600;
}
nav.scrolled{
background: #fff;
min-height: 20px;
line-height: 40px;
transition: 0.5s ease-in-out;
}
nav.scrolled ul li a{
text-decoration: none;
color: #000;
font-size: 20px;
line-height: 40px;
transition: 0.5s ease-in-out;
}
nav.scrolled img{
width: 180px;
height: 41px;
margin: 27px 80px;
transition: 0.5s ease-in-out;
}
/* -=-=-=-=-= MENU ITEM HOVER ANIMATION =-=-=-=-=- */
.menu a {
transition: color 0.1s, background-color 0.1s;
}
.menu a {
position: relative;
display: block;
transition: color 0.1s,background-color 0.1s,padding 0.2s ease-in;
color: #fff;
}
.menu a::before {
content: '';
display: block;
position: absolute;
bottom: 24px;
left: 0;
height: 2px;
width: 100%;
background-color: #fff;
transform-origin: right top;
transform: scale(0, 1);
transition: color 0.1s,transform 0.2s ease-out;
}
.menu a:active::before {
background-color: #fff;
}
.menu a:hover::before, a:focus::before {
transform-origin: left top;
transform: scale(1, 1);
}
.menu.scrolled {
color: #000;
background-color:
}
/* -=-=-=-=-= END MENU ITEM HOVER ANIMATION =-=-=-=-=- */
And the JS:
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('scrolled');
}
else {
$('nav').removeClass('scrolled');
}
})
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop()> 2) {
$('.logo img').attr('src', 'res/logos/main.png');
}
if ($(this).scrollTop() < 2) {
$('.logo img').attr('src', 'res/logos/main_light.png');
}
});
});
And the important HTML:
<header class="index">
<nav class="navbar">
<div class="logo">
<a href="#">
<img class="logoimg" src="res/logos/main_light.png">
</a>
</div>
<div class="menu">
<ul>
<li><a class="current" href="index.html">Home</a></li>
<li>Company</li>
<li>Services</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
Note that .scrolled is the one that changes the navbar once you scrolled. May your road lead you to warm sands!
You're setting the transition for the a elements twice. First as .menu a and then as nav ul li a. The nav bar animates when scrolling up, but the transition lasts 0.1s, as declared for the selector .menu a.
You can either change .menu a to .menu nav ul li a or redesign your classes.
For the underline animation, just add the nav.scrolled selector to the classes you already have, for instance: nav.scrolled .menu a::before and change the background color. You will probably also need to re position the ::before element.

Problems with CSS and javascript animation

I am building a website and have come across a stumbling point. I'm trying to include some animated image/caption on hover, but I can't, for the life of me, get it to work.. I'm getting very annoyed at this problem as it should not be a problem, I must be failing to see where I'm going wrong.
My website is:
theystolemybaby.uk.undo.it, and the the picture towards the bottom of the page is supposed to animate like in the demo.. but it doesnt!
The HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Author: Jamie Lindsey -->
<head>
<meta name="google-site-verification" content="1z0df9M7OshAE_NKuk-F46UbwLY9e4MabbypjmTCu_w" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:url" content="http://theystolemybaby.uk.undo.it/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Coming Soon | theystolemybaby.uk.undo.it" />
<meta property="og:description" content="Our aim is provide a place to share the damage UK Social Services are causing thousands of families each year, a place to connect with others, to motivate, to inform, a network of thousands of bereaved parents, children, supporters, carers, whistleblowers. We need you all to be a part of what is to…" />
<meta property="og:image" content="http://theystolemybaby.uk.undo.it/images/blue-eyes-baby-bg1.jpg" />
<meta property="og:updated_time" content="1443911486" />
<meta content="2015-10-06T12:21:00+01:00" property="og:article:published">
<title>Social Services Are Stealing Babies UK</title>
<meta content="The UK is the only country in Europe, and one of a tiny minority of countries in the world, that actively participates in Forced Adoption." name="description"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="theystolemybaby.uk.undo.it,Social services scandal,UK,Child Trafficking,Baby snatching,stealing,crime without punishment,forced adoption,Family,Social,Stealing Babies,Uk Social Services,Child,Services,Uk,Social,Care,Forced,Adoption,Children,Countdown Below Social,Court,Means,Local,Many,Social Services,Parents,Local,Authorities,Adoption,Again,Down Adoption Statistics,Birth,Uk,Only Country,Authorities" />
<!--css-->
<link rel="stylesheet" href="web/css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="web/css/TimeCircles.css" type="text/css"/>
<link rel="stylesheet" href="web/css/header-effects.css" type="text/css"/>
<link rel="stylesheet" type="text/css" href="web/css/component1.css" />
<style type="text/css">
/*<![CDATA[*/
div.c1 {width: 100%;}
/*]]>*/
</style>
<!--/css-->
<!--javascript-->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="web/js/TimeCircles.js"></script>
<script type="text/javascript" src="web/js/waypoints.min.js"></script>
<script type="text/javascript" src="web/js/toucheffects.js"></script>
<!--/javascript-->
<!--fonts-->
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css' />
<!--/fonts-->
</head>
<body>
<div class="container1">
<!-- start wrap -->
<!-- start content -->
</div>
<header id="ha-header" class="ha-header content-header">
<div class="ha-header-perspective">
<div class="ha-header-front">
<h1>
<span>theystolemybaby.uk</span>
</h1>
<nav>
<!-- TODO create simple nav menu -->
</nav>
</div>
<div class="ha-header-bottom">
<nav>
<a>Dalliance</a>
<a>Inglenook</a>
<a>Lagniappe</a>
<a>Mellifluous</a>
<a>Erstwhile</a>
<a>Wafture</a>
<a>Serendipity</a>
<a>Love</a>
</nav>
</div>
</div>
</header>
<br><br><br><br>
<div class="article-section-1">
<section>
<h2>Have UK Social Services stolen your child?</h2>
<p>This website is currently under construction but we are in the final stages of development.</p>
<p>(see the countdown below)</p>
<br>
</section>
<section class="article-section-1">
<h2>Social Services Are Stealing Babies in the UK!!</h2>
<p>Our aim is provide a place to share the damage UK Social Services are causing to thousands of families each year, a place to connect with others, to motivate, to inform, a network of thousands of bereaved parents, children, supporters, carers, whistleblowers.</p>
<p>The scandal is affecting too many of us to just sit back and do nothing.</p>
<p>Our voices - Your voices - need to be heard.</p>
<p>We need you all to be a part of what is to come!!</p>
</section>
</div>
<br>
<div class="article-section-2">
<section class="ha-waypoint" data-animate-down="content-header-solid" data-animate-up="content-header">
<h2>The ugly truth!</h2>
<p>The UK is the <b>only</b> country in Europe, and one of a tiny minority of countries in the world, that actively participates in <b>Forced Adoption</b>. This Draconian act means taking a child away from his family without - and usually against - the agreement of all family members. Apparantly this is very much a last resort in a desperate situation, undergone when there is no safe way for children to stay with their immediate family. However, there’s no denying that this is done expeditiously and it is extremely brutal for those involved.</p>
<p>It is being claimed that the number of children with an Adoption Order has dramatically fallen. What this actually means is that there are still just as many children in the care system - for instance, being fostered - but fewer who have been recommended by local authorities to be placed for adoption by strangers. This basically means that because there is a massive profit to be made from fostering children - normally around £400 per week per child fostered - and the fact that so many people are aware of what is happening, Local Authorities are bending the rule books again and choosing to foster children off to starngers instead, this brings down adoption statistics and gets the attention away from the Local Authorities.This year alone, the number of children in care with an Adoption Plan fell again, by 37 per cent. For many of these parents, and children, cast adrift in a sea of uncertainty, this is a depressing state of affairs.</p>
<p>The key reason for this results from judgments made by the Supreme Court and the Court of Appeal which reminded local authorities and courts of the huge significance of adoption. Adoption legally and permanently severs the child’s legal relationship with their birth family. Again, the UK is the <b>only</b> country in Europe to do this, however often contact does continue with both siblings, grandparents and sometimes birth parents. <b>Forced Adoption</b> is more accurately referred to in the care sector as ‘contested adoption’.</p>
</section>
</div>
<br>
<div class="fb-like" data-href="https://http://theystolemybaby.uk.undo.it" data-width="100" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true"></div>
<section class="ha-waypoint" data-animate-down="ha-header-rotateBack" data-animate-up="content-header-solid">
<div class="timer-box">
<div class="timer-header">
<h2>We're counting the days 'til we're live..</h2>
<div id="DateCountdown" data-date="2016-01-12 01:00:00" style="width: 100%;">
</div>
</div>
</div>
</section>
<section class="ha-waypoint" data-animate-down="ha-header-rotate" data-animate-up="ha-header-rotateBack">
<div class="clear"></div>
<ul class="grid cs-style-4">
<li>
<figure>
<div><img src="web/images/5.png" alt="img05"></div>
<figcaption>
<h3>Safari</h3>
<span>Jacob Cummings</span>
Take a look
</figcaption>
</figure>
</li>
<!-- TODO
<li>
<figure>
<div><img src="web/images/6.png" alt="img06"></div>
<figcaption>
<h3>Game Center</h3>
<span>Jacob Cummings</span>
Take a look
</figcaption>
</figure>
</li>
<li>
<figure>
<div><img src="web/images/2.png" alt="img02"></div>
<figcaption>
<h3>Music</h3>
<span>Jacob Cummings</span>
Take a look
</figcaption>
</figure>
</li>
<li>
<figure>
<div><img src="web/images/4.png" alt="img04"></div>
<figcaption>
<h3>Settings</h3>
<span>Jacob Cummings</span>
Take a look
</figcaption>
</figure>
</li>
<li>
<figure>
<div><img src="web/images/1.png" alt="img01"></div>
<figcaption>
<h3>Camera</h3>
<span>Jacob Cummings</span>
Take a look
</figcaption>
</figure>
</li>
<li>
<figure>
<div><img src="web/images/3.png" alt="img03"></div>
<figcaption>
<h3>Phone</h3>
<span>Jacob Cummings</span>
Take a look
</figcaption>
</figure>
</li>
TODO END -->
</ul>
<!-- start notify-->
<div class="notify">
<form>
<input type="text" class="textbox" value="Type your email here..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}"/>
<input class="md-trigger md-setperspective" data-modal="top-scorll" type="button" value="Subscribe"/>
</form>
</div>
</section>
<!--End notify-->
<!--start social icons-->
<div class="social-icons">
<h3>Social Sharing on the web</h3>
<ul>
<li><img src="web/images/facebook.png" title="Share on Facebook" alt="Facebook Share Icon" /></li>
<li><img src="web/images/twitter.png" title="Share on Twitter" alt="Twitter Share Icon" /></li>
<li><img src="web/images/g+.png" title="Share on Google+" alt="Google+ Share Icon" /></li>
<li><img src="web/images/rss.png" title="Rss" alt="RSS Feed Icon" /></li>
</ul>
</div>
<!-- End social icons-->
<!-- start copy right -->
<div class="copy-right">
<p>Design by Jamie Lindsey</p>
<br>
</div>
<!-- End copy right -->
<!-- End Content -->
<!--End wrap -->
</body>
<!--js-->
<script type="text/javascript">
$("#DateCountdown").TimeCircles({
"animation": "smooth",
"bg_width": 0.4,
"fg_width": 0.04,
"circle_bg_color": "#6cb7f9",
"time": {
"Days": {
"text": "Days",
"color": "#f9f68a",
"show": true
},
"Hours": {
"text": "Hours",
"color": "#99CCFF",
"show": true
},
"Minutes": {
"text": "Minutes",
"color": "#BBFFBB",
"show": true
},
"Seconds": {
"text": "Seconds",
"color": "#FF9999",
"show": true
}
}
});
</script>
<script type="text/javascript">
var $head = $( '#ha-header' );
$( '.ha-waypoint' ).each( function(i) {
var $el = $( this ),
animClassDown = $el.data( 'animateDown' ),
animClassUp = $el.data( 'animateUp' );
$el.waypoint( function( direction ) {
if( direction === 'down' && animClassDown ) {
$head.attr('class', 'ha-header ' + animClassDown);
}
else if( direction === 'up' && animClassUp ){
$head.attr('class', 'ha-header ' + animClassUp);
}
}, { offset: '100%' } );
} );
</script>
<script type="application/x-javascript">
<![CDATA[
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
]]>
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!--TODO <script src="web/js/toucheffects.js"></script> -->
<!--js-->
</html>`
And the CSS:
/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0px;padding:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{ vertical-align:baseline;}/* vertical align baseline */
.vertical-top{ vertical-align:top;}/* vertical align top */
nav.vertical ul li{ display:block;}/* vertical menu */
nav.horizontal ul li{ display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
body{
background: url(../images/blue-eyes-baby-bg2.jpg) no-repeat #E7E7E7;
background-color: #10CAD1;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 1400px ;
font-family: 'Ubuntu', sans-serif;
/*background-position: top left bottom right;*/
/* *** this will pan the background***
-webkit-animation: mymove 180s infinite;
/* Chrome, Safari, Opera */
/* ***animation: mymove 180s infinite;*/
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
75% {background-position: center;}
}
/* Standard syntax */
#keyframes mymove {
75% {background-position: center;}
}
body:after {
background: rgba(134,6,71,0.7);
}
.container1{
/*width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: transparent url(../images/pattern.png) repeat top left;
z-index: 2;--*/
}
/*end reset*/
#font-face {
font-family: 'Ubuntu', sans-serif;
font-weight: normal;
font-style: normal;
}
.wrap{
width:80%;
margin:0 auto;
}
/* ---------- TIMER ---------- */
.timer-box {
background-color: #92D9E1;
}
.timer-header h2{
color: #fff;
font-size: 4em;
font-weight: inherit;
border-bottom: 1px solid #fff;
}
/*---start-content-header----*/
.content-header {
background: rgba(228, 133, 186, 0.66);
height: 65px;
font-size: 12px;
}
.content-header h1{
padding: 0;
color: #fff;
font-size: 4em;
font-weight: inherit;
border-bottom: 1px solid #fff;
position:fixed;
top: 0px;
margin:auto;
z-index:100000;
width:100%;
text-align: left;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.content-header a {
color: #FFF;
font-size: 23px;
font-weight: inherit;
float: right;
position:fixed;
margin-right: 5px;
}
.article-section-1 h2 {
color: #FFF;
font-size: 46px;
font-weight: 500;
text-align: center;
text-decoration: underline;
}
.article-section-1 {
color: #FFF;
font-size: 24px;
font-weight: inherit;
text-align: center;
margin-top: 100px;
padding-right: 50px;
padding-left: 50px;
}
.article-section-2 {
color: #FFF;
font-size: 24px;
font-weight: inherit;
text-align: center;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
margin-right: 10%;
margin-left: 10%;
}
.article-section-2 h2 {
color: #FFF;
font-size: 46px;
font-weight: 500;
text-align: left;
background-color: rgba(146, 217, 225, 0.79);
}
//*---start-notify-form----*/
.notify{
text-align: center;
background: rgba(0, 0, 0, 0.36);
width: 50%;
margin: 2em auto 0 auto;
padding: 0.5em 2em 2em 2em;
font-family: 'Ubuntu', sans-serif;
}
.notify h3{
font-size: 1em;
color: #FFF;
text-transform: uppercase;
padding: 1em 0;
word-spacing: 2px;
}
.notify input[type="text"]{
width:80%;
padding:12px;
border:none;
outline:none;
font-family: 'Ubuntu', sans-serif;
}
.notify input[type="button"]{
padding:12px;
border:none;
outline:none;
font-family: 'Ubuntu', sans-serif;
background: #10CAD1 none repeat scroll 0% 0%;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
color:#FFF;
cursor:pointer;
}
.notify input[type="button"]:hover{
padding:12px;
border:none;
outline:none;
font-family: 'Ubuntu', sans-serif;
background: #fff none repeat scroll 0% 0%;
background-color: #fff;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
color: #10CAD1;
cursor: pointer;
}
.notify {
width: 50%;
margin: 0 auto;
text-align: center;
background: rgba(0, 0, 0, 0.31);
background-color: #fff;
padding: 2em;
margin-top: 2em;
}
.notify input[type="submit"]:hover{
background:#fff;
color:#000;
}
.notify input[type="submit"]:active{
background:#fff;
color:#000;
-webkit-animation: swing 1s ease;
-moz-animation: swing 1s ease;
-ms-animation: swing 1s ease;
-o-animation: swing 1s ease;
animation: swing 1s ease;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/*---start-socail-icons----*/
.social-icons h3{
color: #FFF;
font-size: 1em;
margin: 1em 1em 0.5em 1em;
word-spacing: 4px;
}
.social-icons ul li{
display:inline-block;
}
.social-iconsl ul li a{
display:block;
}
.social-icons ul li img{
display:block;
}
.social-icons ul li a{
background: rgba(54, 239, 254, 0.25) none repeat scroll 0% 0%;
padding: 10px;
border-radius: 30em;
margin: 5px;
display: block;
-webkit-transition: all 1s cubic-bezier(0.2,0.77,0.75,0.48) 0s;
-moz-transition: all 1s cubic-bezier(0.2,0.77,0.75,0.48) 0s;
-ms-transition: all 1s cubic-bezier(0.2,0.77,0.75,0.48) 0s;
-o-transition: all 1s cubic-bezier(0.2,0.77,0.75,0.48) 0s;
transition: all 1s cubic-bezier(0.2,0.77,0.75,0.48) 0s;
}
.social-icons ul li a:hover{
background: rgba(252, 246, 246, 0.56) none repeat scroll 0% 0%;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.social-icons ul li a:active{
-webkit-transform: scale(1.8);
-moz-transform: scale(1.8);
-ms-transform: scale(1.8);
-o-transform: scale(1.8);
transform: scale(1.8);
}
.social-icons {
text-align: center;
}
/*----start-copy-right-----*/
.copy-right{
text-align:center;
padding-top:1em;
background: rgba(126, 146, 149, 0.53);
}
.copy-right p{
color: #fff;
font-size: 1em;
font-weight: inherit;
word-spacing: 0.2em;
}
.copy-right p a{
color: #10CAD1;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.copy-right p a:hover{
color:#fff;
}
/*-----start-responsive-design------*/
#media (max-width: 1440px){
#counter {
width: 67%;
margin-left: 25%;
}
.digit {
top: 9px!important;
}
.notify {
width: 39%;
}
.notify input[type="text"] {
width: 76%;
}
}
#media(max-width:1024px){
.content-header h1 {
color: #fff;
font-size: 3.4em;
margin:0 0 0.3em 0;
}
.notify {
width: 50%;
}
}
#media(max-width:768px){
.content-header h1 {
font-size: 2.5em;
margin: 0 0 0.2em;
}
.content-header p {
color: #fff;
font-size: 0.85em;
}
.notify {
width: 57%;
}
.notify input[type="text"] {
width: 71%;
}
}
#media(max-width:640px){
.content-header h1 {
font-size: 2em;
}
.notify {
width: 75%;
}
}
#media(max-width:480px){
.content-header h1 {
font-size: 1.5em;
margin:0 0 0.5em;
}
.content-header p {
font-size: 0.8em;
line-height: 1.6em;
}
.notify {
width: 71%;
padding: 1em;
margin-top: 1em;
}
.notify input[type="text"] {
width: 52%;
}
.copy-right p {
font-size: 0.7em;
}
}
#media(max-width:320px){
.content-header h1 {
font-size: 1.2em;
margin: 0 0 0.5em;
line-height: 1.6em;
}
.content-header p {
font-size: 0.7em;
line-height: 1.6em;
}
.content-header {
margin-top: 5em;
}
.notify {
width: 77%;
}
}
The Tutorial and source for the Caption Hover Effects is:
On codrops here
I think it may be better not to include all the code as there is quite a lot and all the resources can be found in the links.
The Question..
Why is the animation not working?
I have linked all my css and javascripts correctly as far as I can tell (although I havent slept for 48 hours so I might be missing something stupid). Please ask if you require any more info and I will be happy to edit my question to include anything relevant. Thanks in advance.

Responsive navigation stays hidden on window resize (pure JS)

I have been looking for a solution for over ten hours, today only, and have searched many more days before that. I'm asking a question here because I'll be ripping my hair out very soon if this goes on.
My problem : I have a responsive navigation which looks like a regular navbar on desktop sized screens that converts to a dropdown menu when window shrinks or device width gets too small. On the media queries front, I think I've got everything covered.
The Javascript is what is causing problems. Let me explain :
Desktop nav shrinks when window is resized
clicking to open/close the shrunk menu makes the list items pop out/hide without problem
when window is resized to its original width (with menu closed) the navigation stays hidden
Here are two examples to illustrate what I mean.
Responsive menu hidden on window resize
Responsive navigation hidden on window resize
I know what people might suggest : just make it work with jQuery there are many working examples. While that may be true, I'm not familiar with jQuery at all and if I could, I would rather not use a whole library just for this. I'm not very experienced in JavaScript either, but I prefer the pure JS approach.
HTML
<header class="header" id="return">
<div class="floatWrapper">
<nav class="grid70" >
<input type="button" onclick="toggle(navi)"/>
<ul class="allGrids navigation grid1" id="navi">
<li><a data-scroll href="#profil">About</a></li>
<li><a data-scroll href="#competences">Skills</a></li>
<li><a data-scroll href="#parcours">Work</a></li>
<li><a data-scroll href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
CSS
*,
:after,
:before{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing:border-box;
box-sizing: border-box;
word-wrap:break-word;
}
html, body{
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
font-size: 100%;
}
ul, li{
list-style-type: none;
padding:0;
margin:0;
}
a{
text-decoration: none;
}
.floatWrapper{
width: 90%;
max-width: 1120px;
margin:0 auto;
}
.floatWrapper:before,
.floatWrapper:after {
content:"";
display:block;
}
.floatWrapper:after {
clear:both;
}
.allGrids{
height: auto;
float:left;
margin: 1% 0%;
display:block;
}
.grid1{
width: 100%;
margin:1% 0;
}
.grid70{
width: 66%;
}
.header{
position: fixed;
top: 0;
left:0;
width:100%;
z-index: 100000;
padding:0;
height: auto;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.header input{
display:none;
}
.header .floatWrapper .grid70{
float:right;
}
.navigation{
margin:0;
padding: 0;
}
.navigation li{
float:left;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
width: 24%;
margin-left: .3%;
padding-top:0;
border-radius: 0 0 10px 10px;
}
.navigation li:nth-child(odd) a{
background: orange;
}
.navigation li a{
display: block;
color: black;
background-color: lightblue;
text-decoration: none;
word-wrap: normal;
padding-right: 8%;
height:4em;
line-height: 5.5em;
text-align : right;
border-radius: 0 0 10px 10px;
-moz-transition-proprety: background-color height;
-moz-transition-duration : 1s;
-webkit-transition-proprety: background-color height;
-webkit-transition-duration : 1s;
-ms-transition-proprety: background-color height;
-ms-transition-duration : 1s;
-o-transition-proprety: background-color height;
-o-transition-duration : 1s;
transition-proprety: background-color height;
transition-duration : 1s;
}
.navigation li:hover a{
box-shadow: 1px 2px 4px black;
height:6em;
line-height: 8.5em;
-moz-transition-proprety: background-color height;
-moz-transition-duration : 1s;
-webkit-transition-proprety: background-color height;
-webkit-transition-duration : 1s;
-ms-transition-proprety: background-color height;
-ms-transition-duration : 1s;
-o-transition-proprety: background-color height;
-o-transition-duration : 1s;
transition-proprety: background-color height;
transition-duration : 1s;
}
#media screen and (max-width: 769px) {
.header{
padding:0;
position:fixed;
background-color: #22313F;
border-top:none;
}
.header .floatWrapper{
padding-top: 1em;
padding-bottom: 1em;
position: relative;
z-index:15000;
width: 100%;
}
.header .floatWrapper .grid70{
width: 2em;
height: 2em;
padding:0;
float:right;
margin-right: 5%;
}
.header .floatWrapper .grid70 input{
display:block;
color:#22313F;
width: 100%;
height: 100%;
background-color: #6C7A89;
padding:0;
margin: 0;
}
.header .floatWrapper .grid70 .navigation{
position:absolute;
top:70%;
left:0%;
display:none;
padding-top: 15px;
}
.header .floatWrapper .grid70:hover .navigation {
max-height: 1000px;
display:block;
}
.navigation li{
width: 100%;
padding:0;
border-radius:0;
margin-left: 0;
}
.navigation li a {
text-align: left;
height: auto;
line-height: 40px;
border-radius:0;
word-wrap:break-word;
padding:1.5%;
font-size: 18px;
}
.navigation li:hover a{
box-shadow: none;
color:black;
height: auto;
line-height: 40px;
}
}
JavaScript
var is_touch_device = 'ontouchstart' in document.documentElement;
if(is_touch_device){
//code for touch devices
function toggle(navi) {
var tag=document.getElementById("navi");
tag.style.display = tag.style.display === 'block' ? 'none' : 'block';
// set as defaut oposite defaut active value in document
// here defaut is set to block cause it is none in CSS
}
}
I am very well aware that what is causing problems is non other than this very JS snippet. On mobile, it works like a charm.
As the hover is still enabled on .grid70 it works on Desktops browsers aswell, but only on Firefox. Chrome, IE and Opera detect the touch and make the nav unusable after a few clicks (when window is resized).
Here is a JSbin : http://jsbin.com/ziqij/1/edit?html,css,js,output
The reason hover is still working is because I thought the touchscreen detection would work ... and wanted to go with hover on desktop / onclick on mobile.
I realize now, I'd better use a click only solution and account for desktop touchscreens aswell.
Any help / insight would de greatly appreciated.
Desperately,
Phil

Full height doesn't work of Overlay

Live site- http://uposonghar.com/new-video/
There is a Embeded YouTube video, if you mouse over on that video(center of the video) Facebook + Twitter share button appears on the left, like this-
But that is only working when anyone mouse over center part of embedded YouTube video box, not in whole part. I want to style it like when anyone when mouse over the video box(no matter where) share button appears, share button will be alignment center vertically i any video box height.
My code-
HTML-
<div id="video-container">
<iframe src="//www.youtube.com/embed/-Jkd9GDSyPc" width="600" height="400" allowfullscreen="" frameborder="0"></iframe>
<ul class="share-video-overlay" id="share-video-overlay">
<li class="facebook" id="facebook">Facebook</li>
<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check+this+video&url=http%3A//www.youtube.com/watch%3Fv%3D-Jkd9GDSyPc">Tweet</a</li>
</ul>
</div>
CSS-
#share-video-overlay {
position: relative;
top: -225px;
list-style-type: none;
display: block;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .4s, top .25s;
-moz-transition: opacity .4s, top .25s;
-o-transition: opacity .4s, top .25s;
transition: opacity .4s, top .25s;
z-index: 500;
}
#share-video-overlay:hover {
opacity:1;
filter:alpha(opacity=100);
}
.share-video-overlay li {
margin: 5px 0px 5px 0px;
}
#facebook {
color: #ffffff;
background-color: #3e5ea1;
width: 70px;
padding: 5px;
}
.facebook a:link, .facebook a:active, .facebook a:visited {
color:#fff;
text-decoration:none;
}
#twitter {
background-color:#00a6d4;
width: 70px;
padding: 5px;
}
.twitter a, .twitter a:link, .twitter a:active, .twitter a:visited, .twitter a:hover {
color:#FFF;
text-decoration:none;
}
I rewrote your CSS, perhaps this is what you need?
#video-container {
display: block;
position: relative;
width: 600px; //set the video container to the same width/height as the embedded video
height: 400px;
}
#video-container:after {
clear: both;
}
#share-video-overlay {
display: none;
position: absolute; //absolute positioning to force the element over the iframe
lef: 0;
top: 225px;
}
#video-container:hover #share-video-overlay {
display: block; //clear the float. See http://www.positioniseverything.net/easyclearing.html
}
.share-video-overlay li {
margin: 5px 0px 5px 0px;
}
#facebook {
color: #ffffff;
background-color: #3e5ea1;
width: 70px;
padding: 5px;
}
.facebook a:link, .facebook a:active, .facebook a:visited {
color:#fff;
text-decoration:none;
}
#twitter {
background-color:#00a6d4;
width: 70px;
padding: 5px;
}
.twitter a, .twitter a:link, .twitter a:active, .twitter a:visited, .twitter a:hover {
color:#FFF;
text-decoration:none;
}
In a nutshell: set the container to match the width/height of the youtube video, then position the overlay using absolute positioning. Because it is inside the video container, it will position itself inside the limits of the container.
And: set the hover on the video container, and not the overlay. As said, the overlay is inside the container, so you can easily make the overlay visible on a hover on the container. (#video-container:hover #share-video-overlay { })
I have put the example in a Fiddle so you can test if this is what you need.
Its because of the height of the share-video-overlay class. Increase height of this class you will get the result. Change the css of share-video-overlay like this
top:-435px;
padding-top:215px;
Set this css as you want and give height to share-video-overlay class height:500px; .
I am sure it will work.

Categories