I'm trying to combine the .toggle() method with an animation. I've followed the methods laid out in this fiddle as well as in this SO post, but the second click isn't returning my div to the original position.
The behavior should be:
Click the title
Content expands
Slide up over the headline
Click again
Content contracts
Slide back down to the original position <-- This isn't happening
HTML
<div id="headline">
<h1>This is the headline</h1>
</div>
<div id="page-wrap"> <!-- contains more than one article, need the whole thing to slide -->
<article class="post">
<div class="title"><h1>Feedback</h1></div>
<div class="content">
<p>Videos can be more than direct instruction. Currently, how do you give feedback on assignments?</p>
<p>It takes a lot of time, right?</p>
<p>Video can be used to give direct feedback to the student because it communicates areas of improvement more effectively than written feedback alone.</p>
</div>
</article>
</div>
CSS
#headline {
position:fixed;
top:10px;
left:10px;
width:380px;
}
#page-wrap {
position:relative;
top:200px;
}
.post {
width:300px;
}
.post .title {
cursor: pointer;
}
.post .content {
display:none;
}
Script
$(".title").click(function() {
$title = $(this);
$content = $title.next();
$content.toggle(
function() {
$("#page-wrap").animate({"margin-top":"200px"}, 'fast')
},
function () {
$("#page-wrap").animate({"margin-top":"-200px"}, 'fast')
}
)
});
CodePen Demo
Here's a live page for more context.
Related
I have this snippet.
The welcome div is for a welcome animation on the page that lasts 3.5 seconds and then disappears.
The problem is that the overflow is visible, being able to see the elements that I would like to be visible only after the welcome animation is finished.
As a solution to this problem, I thought of javascript, inserting another function for setTimeOut for body with hidden overflow
setTimeout (function () {
document.querySelector ('. body'). style.overflow = 'hidden';
}, 3500);
But it does not work.
I want the animation to last x seconds and then all the elements of the page to be visible, not during the animation.
Do you have solutions?
Is this method as effective for a beginning animation as other modern sites have?
setTimeout(function() {
document.querySelector('.welcome').style.display ='none' ;
},3500) ;
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.welcome{
background:black;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}
<div class = "welcome">
</div>
<div class = "header">
<div class = "developedbar">
<h2 class ="developed1">Developed</h2>
<h2 class ="developed2">Developed</h2>
</div>
Just wrap the content you want to appear after, inside a div or section (say, with an id #mainContent) and initially set its's display to none. When you change the display of .welcome to none, you can also change the display of #mainContent to block like this:
setTimeout(function() {
document.querySelector('.welcome').style.display ='none';
document.querySelector('#mainContent').style.display ='block' ;
},3500) ;
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.welcome{
background:black;
height:50vh;
display:flex;
align-items:center;
justify-content:center;
color: #FFF;
}
#mainContent {display: none;}
<div class="welcome">
<h1>Welcome</h1>
</div>
<div id="mainContent">
<div class="header">
<div class= "developedbar">
<h2 class="developed1">Header</h2>
</div>
</div>
<div class="body">
<p>Body content and other text here</p>
<p>Body content and other text here</p>
<p>Body content and other text here</p>
<p>Body content and other text here</p>
</div>
<div class="footer">
<h2 class="developed1">Footer</h2>
</div>
</div>
Main page would only have several buttons that will show the user designated content.
Those buttons in #home is not in header, so buttons will be only shown on #home only.
<section id="home">
content
something
someelse
</section>
<section id="content">
<section id="something">
<section id="someelse">
I found :target method on css which seems very easy to use and works ok, but #home is not displaying.
It seems like it would only work when I have a fixed header outside section
section {
display: none;
}
section:target {
display: block;
}
Each section other than #home will have back button which will send user to #home as well. This was fairly easy on :target method because I just used a href="#", and it worked.
What other method would I be able to use ?
I can't think of any pure CSS ways to do this, but it can easily be done with a little JavaScript to check if the hash is empty, and then show #home and hide it when there is a value.
window.onhashchange = checkHash;
checkHash();
function checkHash() {
var home = document.getElementById('home');
//Check if the hash is empty
if (window.location.hash.substring(1) == '') {
home.style.display = 'block';
} else {
home.style.display = 'none';
}
}
.section {
display: none;
}
.section:target {
display: block !important;
}
<div id="home" class="section">
Content
Somthing Else
<h3>Home</h3>
</div>
<div id="content" class="section">
Home
<h3>Content</h3>
</div>
<div id="somthingElse" class="section">
Home
<h3>Somthing Else</h3>
</div>
Fade
I used position: absolute so they will stack on top of each other. z-index: -1 will keep all the rest of the sections to the clear back to stop pointer events from overlapping. opacity: 0 was obviously used for the fade.
I changed the JS script to simplify my CSS. Now when you go to example.com/html.html you get redirected to example.com/html.html#home (without a history change for the back button).
window.onhashchange = checkHash;
checkHash();
function checkHash() {
//Check if the hash is empty
if (window.location.hash.substring(1) == '') {
history.replaceState(undefined, undefined, "#home")
}
}
.section {
position: absolute;
z-index: -1;
opacity: 0;
transition: opacity 0.5s;
}
.section:target {
z-index: 1;
opacity: 1;
}
<div id="home" class="section">
Content
Somthing Else
<h3>Home</h3>
</div>
<div id="content" class="section">
Home
<h3>Content</h3>
</div>
<div id="somthingElse" class="section">
Home
<h3>Somthing Else</h3>
</div>
CSS code:
div.albumTitleBackground {
position:absolute;
z-index:1;
background-color:whitesmoke;
/*top:2.5%;
left:2.5%;
right:2.5%;
bottom:2.5%;*/
top:0;
left:0;
bottom:0;
right:0;
opacity:0;
transition:all 0.25s ease-in-out;
}
div.albumTitleText {
display:inline-block;
font-family:'Times New Roman';
font-size:6em;
position:absolute;
z-index:2;
color:darkgray;
top:50%;
left:5%;
}`
HTML code:
<div class="albumTitleBackground"></div>
<div class="albumTitleText">
#albumPreviewPhoto.ParentAlbumTitle
</div>
Problem: the idea is that background of the 'albumTitleBackground' div should be animated when user enters inside the element and must remain the same when user hovers the 'albumTitleText' div. Which way is the easiest one (and cross-browser as like) to achive that?
There are three ways to do this:
Two involve changing your HTML
1) As #melwynpawar says, you need to wrap your title div inside your background div.
<div class="albumTitleBackground">
<div class="albumTitleText">
#albumPreviewPhoto.ParentAlbumTitle
</div>
</div>
And use CSS:
.albumTitleBackground:hover {
/* Animations Here */
}
2) You could wrap it all in a container div. Like so:
<div class="container">
<div class="albumTitleBackground"></div>
<div class="albumTitleText">
#albumPreviewPhoto.ParentAlbumTitle
</div>
</div>
And CSS:
.container:hover .albumTitleBackground {
/* Animations Here */
}
And then without changing your HTML
3) Two CSS rules
<div class="albumTitleBackground"></div>
<div class="albumTitleText">
#albumPreviewPhoto.ParentAlbumTitle
</div>
And CSS:
.albumTitleBackground:hover {
/* Animations Here */
}
.albumTitleText:hover .albumTitleBackground {
/* Animations Here */
}
This last one is not recommend because you will have to consistently check that the two rules are the same. Note that the animation will probably restart when you move from one div to the other.
Change your HTML structure to
<div class="albumTitleBackground">
<div class="albumTitleText">
#albumPreviewPhoto.ParentAlbumTitle
</div>
</div>
You need to wrap the title text inside the Title background div
I am using Sidebar.js and would like to add an CSS opacity setting to the main container section when the sidebar is revealed. (Similar to hypebeast.com when you click the three bar icon).
I not sure whether to add an overlay div and then hide/show it with jQuery or whether a function can be added to the sidebar js to do it (this seems the way to go).
I would like to control the opacity with CSS but if it's in the js then that's fine as well.
Any help welcomed.
My html:
<div class="wrapper jsc-sidebar-content jsc-sidebar-pulled">
<nav>
</nav>
<section>
<!--content with opacity on clicking above nav-->
</section>
</div>
<nav class="sidebar jsc-sidebar" id="jsi-nav">
<!-- nav bar content -->
</nav>
Side bar js and jquery
<script src="js/lib/jquery.min.js"></script>
<script src="js/sidebar.js"></script>
<script>
$('#jsi-nav').sidebar({
trigger: '.jsc-sidebar-trigger',
scrollbarDisplay: true,
pullCb: function () { console.log('pull'); },
pushCb: function () { console.log('push'); }
});
$('#api-pull').on('click', function (e) {
e.preventDefault();
$('#jsi-nav').data('sidebar').push();
});
$('#api-push').on('click', function (e) {
e.preventDefault();
$('#jsi-nav').data('sidebar').pull();
});
</script>
demo - http://jsfiddle.net/victor_007/79sb2rq9/
add and remove class for wrapper and using pseudo add a overlay
.wrapper.overlay {
position:relative;
}
.wrapper.overlay:before {
content:'';
background:black;
opacity:.5;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
z-index:1;
}
i want to make a simple jquery slider, i dont know jquery very well, so i decided to ask u guys, here is some inf about slider:
javascript:
setInterval(function() {
$('#scroll').animate({top: -200}, 500);
},1000);
html:
<div id="slider">
<div id="scroll">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
</div>
and css:
#slider { height:200px; width:200px; background:#dfdfdf; overflow:hidden; position:relative; }
#scroll { position:absolute; }
.content { height:200px; width:200px; color:#000; }
the only thing it does, just animate from 1st to 2nd div, but i need to animate it endlessly, and not only from 1 to a 2 but also to 3rd one. then from 3 to a 1st and etc.. pls smb help!
Try these (carousels)
http://www.1stwebdesigner.com/freebies/jquery-carousel-plugins-tutorials/
http://bxslider.com/