How to eliminate the flicker from this JQuery/CSS3 Animation - javascript

I'm trying to do an animation using css3/JQuery while clicking the side bar, the current div slides to the left and disappears, while another div which was hidden slides in sort of like a page transition.
this is what i've ATM : fiddle
HTML:
<div id='wrap'>
<header></header>
<div id='content'>
<div id='contentMenu'></div>
<div id='page1'>
<div id='left'></div>
<div id='right'></div>
</div>
<div id='page2'></div>
</div>
<footer></footer>
</div>
CSS:
* {
margin:0;
padding:0;
}
html, body, #wrap {
height:100%;
}
header {
height:15%;
background: #0080FF;
}
#content {
width:100%;
height:75%;
min-height:75%;
}
#contentMenu {
width:2%;
height:100%;
background:black;
display:inline-block;
}
#page1 {
width:97%;
height:100%;
display:inline-block;
-webkit-transition:height 5s;
}
#page1 div {
display:inline-block;
}
#left {
width:50%;
height:100%;
background:#FF8000;
}
#right {
width:40%;
height:100%;
background:grey;
display:none;
}
#page2 {
width:49%;
height:100%;
background:purple;
display:none ;
}
footer {
background: #58D3F7;
height:10%;
z-index:99;
}
.dis{
display:inline-block !important;
}
Script:
$('#contentMenu').click(function () {
$('#page1').toggle('fast', 'swing', function () {
$('#page2').toggleClass('dis');
});
});
but when the hidden div is given visibility, you can see a flicker in the footer.
is there anyway to eliminate this?
if i remove -webkit-transition:height 5s;, the div is animated from top right to bottom left ( toggle() animates height , width and opacity at same time) is it possible to disable the change in height and animate simply from right to left?
is there anyway to avoid the jQuery and achieve this using pure css3?
Any other ways to achieve the same using css animations also would be greatly appreciated :)

Adding overflow: hidden on #content should fix your problem :
#content {
overflow: hidden;
width:100%;
height:75%;
min-height:75%;
}
( updated JSFiddle here )

I like the overflow hidden idea as well. Also, you could get rid of most of the jquery by using css for the animation. Using transition position the div absolutely outside of the div with overflow:hidden. Then set .active to the position where you want it.

Related

Shift down / up position fixed elements in HTML

I'm working on a HTML framework that most of it's pages constructed from two section. first section (TopPanel) is a sliding panel that could slide down or up (with jQuery as well). second section is the Main part of page that could contain any sort of HTML document.
<!doctype html>
<html>
<head>
<!--Meta scripts & more-->
</head>
<body>
<div class="TopPanel">
<!--Panel's Contents-->
</div>
<div class="Main">
<!--Some standard HTML docs here-->
</div>
</body>
</html>
When the TopPanel is sliding down, all elements of the Main section must move down. But it's possible to exist some position:fixed element in the Main section. so it's clear that they won't move unless we gave them some margin-top: [$('.TopPanel').height()] px;. But it's not what I'm looking after!
I'm looking for a way to shift down and shift up all content of the Main section with a smooth effect and without changing of all elements attributes.
Have you thought about using a CSS transform:translateY(20px) on the body tag? If you are using fixed position on the other element, it shouldn't actually affect it although I haven't tested that.
You can then use transitions to get the smooth movement you are after.
body{
padding:10px;
overflow:hidden;
background:#fff;
height:100%;
transition:all .2s;
}
body.active{
transform: translateY(60px);
}
Example:
http://codepen.io/EightArmsHQ/pen/gpwPPo
Lookout for this kind of stuff though : Positions fixed doesn't work when using -webkit-transform
JSFIDDEL version
(UPDATED) Try this:
$('.main').click(function(){
$('.main').toggleClass('toggle');
})
.main{
width:20%;
height: 10%;
background-color: rgba(100,100,100,0.7);
text-align: center;
position: fixed;
top: 12%;
transition:all 1.0s
}
.top{
width: 20%;
height: 10%;
text-align: center;
background-color: rgba(300,50,50,0.7);
position: absolute;
}
.toggle{
transform: translateY(100px);
transition:all 1.0s
}
<div class="content">
<div class="top">
Top
</div>
<div class="main">
Main
</div>
</div>
It would need some tweaking but it still does what you are looking for.
I think you are looking for is maybe this:
I have used JQuery UI 1.9.2 for making the toggle ease effect. For more i have created the Fiddle
JQuery
$("button").click(function(){
$(".topPanel").toggleClass("height", 300);
$(".main").toggleClass("top", 300);
});
CSS
body { margin:0; }
.topPanel
{
width:100%;
height:50px;
background:#333;
}
.main
{
top:50px;
bottom:0px;
width:100%;
position:absolute;
background:#ddd;
}
.height { height:100px; }
.top { top:100px; }
p { font-weight:bold; }
HTML
<div class="topPanel">
</div>
<div class="main">
<center><button>Click Me!</button></center>
<p>Hey look at me, i am moving along when you click button!</p>
</div>

Issue: Horizontal scrolling effect with Skrollr

I want to create an horizontal animation controlled by the skrollr.
Scrolling down, the elements of my page have to move from left to right of my container.
Assuming that my elements have all the same width, I set the scrolling data from 100% to 0% and it works.
But what if my images have different widths?
Also I want to preserve the opacity animation that create this fade-in fade-out effect.
Here's HTML code:
<div id="container">
<div class="bg" style="background-color:red"
data-0="transform:translate3d(0%,0%,0); opacity:1"
data-5000="transform:translate3d(-100%,0%,0); opacity:0">
</div>
<div class="bg" style="background-color:green;"
data-0="transform:translate3d(100%,0%,0); opacity:0"
data-5000="transform:translate3d(0%,0%,0);opacity:1"
data-10000="transform:translate3d(-100%,0%,0);opacity:0">
</div>
<div class="bg" style="background-color:orange"
data-5000="transform:translate3d(100%,0%,0); opacity:0"
data-10000="transform:translate3d(0%,0%,0); opacity:1">
</div>
</div>
And the CSS:
#container {
background-color:black;
width:500px;
height:300px;
overflow:hidden;
}
div {
position:fixed;
}
.bg {
width:500px;
height:300px;
}
Here's a Demo in Fiddle
Just set the widths to 100% and contain your images within:
#container {
background-color:black;
width:100%;
height:300px;
overflow:hidden;
}
div {
position:fixed;
}
.bg {
width:100%;
height:300px;
}
Here's a Demo in Fiddle
I don't see how the different width would be a problem. You could set all width to 100% and overflow: hidden; or use jQuery to check the best way to fit the image in the container.

Applying Hover effect to responsive height image

I have three column layout. The left and right columns are full background images that I need hover effects for. I couldn't achieve this in CSS so I'm attempting jQuery, but I'm having an issue when it comes to position: absolute on both elements.
It requires I put a height on the image, but I need it to stay responsive. I tried position relative but there is now a noticeable jump when hovering. Here's my fiddle:
http://jsfiddle.net/faumX/4/
Here's an example of my code,
html:
<div class="one-third">
<div class="bg-image">
<img src="http://placehold.it/429x900&text=left+up" id="leftUp" />
<img src="http://placehold.it/429x900&text=left+over" id="leftOver" style="display:none;" />
</div>
</div>
css:
.one-third {
display:inline;
float:left;
width:33.332%;
max-width: 420px;
position: relative;
min-height:10px;
height:auto;
max-height:900px;
overflow:hidden;
}
.bg-image {
position: relative;
min-height:10px;
height:auto;
max-height:900px;
overflow:hidden;
}
.bg-image img {
display: block;
width: 100%;
max-width: 420px;
min-height:10px;
height:auto;
max-height:900px;
overflow:hidden;
}
#leftUp {
position:relative;
top:0;
left:0;
}
#leftOver {
position:relative;
top:0;
left:0;
}
js:
$('#leftUp').mouseenter(mouseEnterLeft);
$('#leftOver').mouseleave(mouseLeaveLeft);
var mouseEnterLeft = function(){
$('#leftUp').fadeOut();
$('#leftOver').fadeIn();
}
var mouseLeaveLeft = function(){
$('#leftUp').fadeIn();
$('#leftOver').fadeOut();
}
I'm realtively new to this, if there is a CSS solution to this that is better, I'm open to any suggestions.
Thanks for the help.
I changed a few things on your fiddle the problem is when you fade things out they dissapear and opacity is better for this.
I placed the overlay image above the default one and set it to absolute, this way it will be over it but it's hidden on start.
The focus is on the parent div not the image, since it dissapears when you hover it.
Play around with it and see if you can understand what I did, let me know if this is what you were looking for.
$(document).ready(function(){
$('#rightUp').mouseenter(mouseEnterRight);
$('#rightOver').mouseleave(mouseLeaveRight);
$('#left').mouseenter(mouseEnterLeft);
$('#left').mouseleave(mouseLeaveLeft);
});
var mouseEnterRight = function(){
$('#rightUp').fadeOut();
$('#rightOver').fadeIn();
}
var mouseLeaveRight = function(){
$('#rightUp').fadeIn();
$('#rightOver').fadeOut();
}
var mouseEnterLeft = function(){
$('#leftUp').animate({opacity:0});
$('#leftOver').fadeIn();
}
var mouseLeaveLeft = function(){
$('#leftUp').animate({opacity:1});
$('#leftOver').fadeOut();
}
http://jsfiddle.net/faumX/14/

How to make resizable, scrollable sidebar like Facebook's "Chat/Event Ticker"?

I am trying to design a collapsible/hide-able sidebar for my web application, in the vain of Facebook's Chat/Event Ticker. It needs to have two separate sections, separated vertically, and both independently scrollable.
I have tried to implement this using jakiestfu's Snap.js plugin.
https://github.com/jakiestfu/Snap.js/
While this works great, it moves the content on my page out of view, and breaks my position: fixed header elements due to CSS transform: tranlate3d().
Since there's no good fix the these CSS issues, I was wondering if anyone knew of a solution to mimic functionality of the Facebook Chat/Event Ticker sidebar.
I've done something similar using CSS3 resizing on the fixed sidebar (mine was on the left) and adjusting the main page's margin-left when the sidebar size changed. You could likely do something similar on the sidebar first, then split the sidebar in two the same way.
var sizeme = 200,
sizeItBro = function () {
if ($("#sidebar").width() != sizeme) {
sizeme = $("#sidebar").width() + 40;
$("#main").css("margin-left", sizeme + "px").text(sizeme + " pixels of margin.");
}
};
window.setInterval(sizeItBro, 150);
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body {
margin:0;
padding:0;
}
#main {
margin-left:200px;
min-height:100%;
padding:20px;
}
#sidebar {
position:fixed;
top:0;
bottom:0;
left:0;
background:#ffa;
width:200px;
min-width:100px;
max-width:500px;
resize:horizontal;
overflow:auto;
border-right:2px ridge #fe9;
padding:20px;
}
#tophalf {
background:#fe9;
height:300px;
min-height:100px;
max-height:500px;
resize:vertical;
overflow:auto;
border-bottom:2px ridge #fe9;
margin:-20px -20px 20px;
padding:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">Main Content</div>
<div id="sidebar">
<div id="tophalf">Sidebar A</div>
<p>Sidebar B</p>
</div>

Create a dimmed background on-click

Hopefully not too vague. All I want to do is make the entire page go dim after clicking a link. I would imagine having div style="height:100%; width=100%;" with a high z-index. to cover the webpage. My question is toggling this div. I'm not sure what I should even use to accomplish this.
Demos using jQuery or using bog-standard Javascript, both showing how you can toggle the element.
HTML You didn't say how you want to toggle this. Using a button?
<button onclick="dim();">Dim</button>
<div id="dimmer"></div>
but bear in mind the dimmer will go over the button
CSS
#dimmer
{
background:#000;
opacity:0.5;
position:fixed; /* important to use fixed, not absolute */
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:9999; /* may not be necessary */
}
N.B. Use position: fixed as 100% height is only the window height and if your document is larger, using position: absolute doesn't dim the whole document - you can scroll to see there are contents visible.
Javascript
function dim(bool)
{
if (typeof bool=='undefined') bool=true; // so you can shorten dim(true) to dim()
document.getElementById('dimmer').style.display=(bool?'block':'none');
}
dim(true); // on
dim(false); // off
You can do it with a simple JavaScript
Demo
HTML
Click me
<div id="toggle_div"></div>
Hello World
JavaScript
function dim_div() {
document.getElementById("toggle_div").style.display="block";
}
CSS
#toggle_div {
background-color: rgba(255, 255, 255, .6);
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 999;
}
HTML
<div id="initial_opacity_zero"></div>
<button id="button_to_adjust_opacity" onclick="func_onclick();"></button>
CSS
div#initial_opacity_zero{
opacity:0;
display:block;
position:fixed;
top:0px; right:0px; bottom:0px; left:0px;
}
JavaScript:
function func_onclick(){
document.getElementById("initial_opacity_zero").style.opacity="0.6";
}

Categories