I was wondering how I could slide up a banner at the bottom of my page that is hidden.
For instance:
Page loads
3 seconds later, the banner slides up from bottom of page
I want to be able to do this without any scrollbars appearing (no change in page height) and without revealing the banner prior to it sliding up.
I looked at slideUp() and slideToggle(), but I couldn't find a way to make it work to my liking :-/
Here's what I originally tried:
$(document).ready(function() {
$('.serverad').delay(3000).slideToggle('slow', function() {
// Animation complete.
});
});
And the CSS was visiblity: hidden;
use a position:fixed on the banner ad, and animate the bottom attribute to 0
have the initial bottom attribute be the a negative of its height.
<style>
.serverad
{
height:60px;
position:fixed;
left:0px;
bottom:-60px;
}
</style>
<script>
$(document).ready(function() {
$('.serverad').delay(3000).animate({bottom:"0px"},600);
});
</script>
I think you may want something along these lines:
HTML:
<body>
<div class="serveraddcontainer">
<div class="serveradd"></div>
</div>
</body>
CSS:
body{
overflow: hidden;
}
.serveraddcontainer{
width: 100%;
height: 80px;
position: absolute;
bottom: -80px;
}
.serveradd{
width: 400px;
height: 80px;
background-color: red;
margin: auto;
}
Javascript:
setTimeout(function(){
$('.serveraddcontainer').animate({'bottom': '0'});
}, 3000);
Example JSFiddle Here
Animate the height property instead of top:
In you CSS:
.serverad {
...
height: 0;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
visiblity: visible;
overflow: hidden;
...
}
And in your JS, change the animation code to:
$(document).ready(function() {
$('.serverad').delay(3000).animate({height: '30px'}, 'slow', function() {
// Animation complete.
});
});
Here's one approach:
var stepDurations = 3000;
var reveal = window.setTimeout(
function(){
$('#banner').animate(
{
'height' : '30px'
}, stepDurations,
function(){
$(this).animate(
{
'bottom' : $(window).height() - $(this).height()
}, stepDurations);
});
},stepDurations);
JS Fiddle demo.
Turned the above into a function:
function slideReveal(target, height, stepDuration, revealName){
if (!target) {
return false;
}
else {
var height = height || '30px',
stepDuration = stepDuration || 2000,
revealName = revealName || 'reveal';
revealName = window.setTimeout(
function(){
$(target).animate(
{
'height' : height
}, stepDuration,
function(){
$(this).animate(
{
'bottom' : $(window).height() - $(this).height()
}, stepDuration);
});
},stepDuration);
}
};
// call with:
slideReveal($('#banner'), '3em', 100, 'revelation');
JS Fiddle demo.
Related
So basically I'd like to remove the class from header after the user scrolls down a little and add another class to it. Trying to figure out the simplest way of doing this but I can't make it work here is the code
$(function() {
var $sectionBox = $(".J_section-box"),
$navbarBox = $(".J_nav-bar-con"),
navHeight = $(".J_nav-bar-con").height();
$(window).on("scroll", function() {
$(window).scrollTop() >= $sectionBox.offset().top - navHeight ? $navbarBox.addClass("J_fixNavbar") : $navbarBox.removeClass("J_fixNavbar")
});
});
For simplicity, I would suggest to use toggleClass, what makes it a bit easier and better to maintain.
$(function() {
var $navbarBox = $(".J_nav-bar-con");
var navHeight = $(".J_nav-bar-con").height();
$(window).on("scroll", function() {
$navbarBox.toggleClass("J_fixNavbar", $(this).scrollTop() >= $(".J_section-box").offset().top - navHeight);
});
});
.content {
width: 100%;
height: 10000px;
}
.J_nav-bar-con {
width: 100%;
height: 100px;
background: gray;
position: fixed;
top: 0;
}
.J_section-box {
width: 100%;
height: 100px;
margin-top: 200px;
}
.J_fixNavbar {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="J_nav-bar-con"></div>
<div class="J_section-box"></div>
<div class="content"></div>
I have a script that displays fixed element on the bottom-right corner of the screen. This element must appear from bottom to top, as it does in Chrome and Firefox, but in IE it goes from top to bottom..
CSS:
.questionnaire {
position: fixed;
right: 25px;
z-index: 150;
display: none;
}
and JS:
(function($) {
$(document).ready(function() {
var cookie = $.cookie('smth');
resizeContent();
if (cookie == 'que') {
$('.questionnaire').css('display', 'block').animate({ top: collapsed }, 2000);
$('.questionnaire span').addClass('collapsed');
} else {
$.cookie('smth', 'que', { path: '/', expires: 1000*60*20 });
$('.questionnaire').css('display', 'block').animate({ top: expanded }, 2000);
$('.questionnaire span').removeClass('collapsed');
}
});
function resizeContent() {
windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
expanded = windowHeight - $('.questionnaire').height() + 'px';
collapsed = windowHeight - $('.questionnaire').height() + 238 + 'px';
}
})(jQuery);
Thanks in advance for any help!
Actually you do not need to do your animation in jQuery. You can limit your code to add remove class. CSS is more optimal way, no inline code and grater performance.
$("#col").click(function() {
$('.questionnaire').removeClass('expanded');
});
$("#ex").click(function() {
$('.questionnaire').addClass('expanded');
});
.questionnaire {
position: fixed;
background-color: red;
right: 25px;
bottom: 0px;
height: 0px;
z-index: -150; /* remove minus */
display: block;
width: 500px;
transition: height 2s;
-webkit-transition: height 2s;
}
.expanded {
height: 230px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="col">Collapse</button>
<button type="button" id="ex">Expand</button>
<div class="questionnaire"></div>
Since this element is fixed there is no need to set it's display to none. This works the same on any browser that support transition.
For my own portfolio I have an one-page website. To make it more personal i've created a low poly version of my head which is the fixed image.
But how do i change its position depending on which section is currently being viewed?
Example: When somebody is visiting the website and click on "About" the page would scroll down and the image would animate to the left so there will be more space for the content I want to display.
The CSS of the image:
img.imgPerson{
position: fixed;
z-index:2;
top: 48%;
left: 50%;
margin-top: -242px;
margin-left: -175px;
}
What I've tried with Javascript already:
$(window).scrollTop() > 450 {
$('.imgPerson').animate({
"left": '350px'
}, 300);
}
Working fiddle.
You should use if keyword and you've to wrap your code by scroll event :
var animate_right = true;
var animate_left = true;
$(window).on('scroll', function(){
if( $(window).scrollTop() > 450 ){
if(animate_right){
animate_right=false;
animate_left=true;
$('.imgPerson').animate({"left": '550px'}, 300);
}
}else{
if($('.imgPerson').css('left')=='550px'){
animate_left=false;
animate_right=true;
$('.imgPerson').animate({"left": '250px'}, 300);
}
}
})
Hope this helps.
var animate_right = true;
var animate_left = true;
$(window).on('scroll', function(){
if( $(window).scrollTop() > 450 ){
if(animate_right){
animate_right=false;
animate_left=true;
$('.imgPerson').animate({"left": '550px'}, 300);
}
}else{
if($('.imgPerson').css('left')=='550px'){
animate_left=false;
animate_right=true;
$('.imgPerson').animate({"left": '250px'}, 300);
}
}
})
body{
height: 1000px;
}
img.imgPerson{
position: fixed;
z-index:2;
top: 48%;
left: 50%;
margin-top: -242px;
margin-left: -175px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src='http://android-foundry.com/wp-content/uploads/signup2-img.png' class='imgPerson'/>
Please see this fiddle http://jsfiddle.net/rabelais/6bt70uhj/9/
$('#name-a').click(function() {
$('#bio-line-1').animate({width: 'toggle'});
window.setTimeout(function (){$('#bio-line-2').slideToggle( "slow" ); }, 300);
When clicking the link the first lines slides in from the left, and then when that is finished the second line slides in from the top. When it slides back to be hidden, the first line slides aways before the second line does.
How can I change it so the second line slides away before the first line slides away?
$('#name-a').click(function () {
if ($('#bio-line-1').css('display') == 'none') {
$('#bio-line-1').animate({ width: 'toggle' });
window.setTimeout(function () {
$('#bio-line-2').slideToggle("slow");
}, 300);
}
else {
$('#bio-line-2').slideToggle("slow");
window.setTimeout(function () {
$('#bio-line-1').animate({ width: 'toggle' });
}, 300);
}
});
DEMO
I think this is what you want:
$('#name-a').click(function () {
window.setTimeout(function () {
$('#bio-line-2').slideToggle("slow", function () {
$('#bio-line-1').animate({
width: 'toggle'
});
});
}, 300);
});
Demo: https://jsfiddle.net/tusharj/6bt70uhj/11/
I think you can do
var $l2 = $('#bio-line-2'),
$l1 = $('#bio-line-1');
var $a = $('#name-a').click(function() {
$a.toggleClass('visible');
var visible = $a.hasClass('visible'),
$f = visible ? $l1 : $l2,
$s = visible ? $l2 : $l1;
$f.animate({
width: 'toggle'
});
window.setTimeout(function() {
$s.slideToggle("slow");
}, 300);
});
#name-a {
left: 38px;
position: fixed;
top: 38px;
z-index: 1;
}
#bio-line-1 {
left: 150px;
position: fixed;
top: 35px;
width: 633px;
z-index: 1;
}
#bio-line-1 p {
color: #333333;
display: block;
float: right;
font-size: 16px;
line-height: 21px;
width: 552px;
}
#bio-line-2 {
left: 150px;
margin-top: 20px;
position: fixed;
top: 38px;
width: 633px;
z-index: 1;
}
#bio-line-2 p {
color: #333333;
display: block;
float: right;
font-size: 16px;
line-height: 21px;
width: 552px;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="name-a">
John Love
</div>
<div id="bio-line-1" class="hidden">
<p>holds a Master's Degree from the University of the Arts</p>
</div>
<div id="bio-line-2" class="hidden">
<p>London and currently works in London.</p>
</div>
$('#name-a').click(function() {
if($("#bio-line-2").is(":visible")){
window.setTimeout(function (){
$('#bio-line-1').animate({width: 'toggle'});
}, 300);
$('#bio-line-2').slideToggle( "slow" );
}
else{
window.setTimeout(function (){
$('#bio-line-2').slideToggle( "slow" );
}, 300);
$('#bio-line-1').animate({width: 'toggle'});
}
});
i have made some condition that while showing the lines, line number 1 will appear first and then line number 2 will appear. and while hiding lines, line number 2 will hide first and then line number 1 will hide... i think this is what you trying
Here is fiddle link
Thank You
I'd do something like this. I would also not use a setTimeout as it is not a reliable way to trigger consecutive animations. The timer can trigger at different times depending on what is happening in the UI thread and therefore ruining the effect you are trying to create. You should use the animate success callback of each animation in order to trigger the next one at the exact right time.
http://jsfiddle.net/6bt70uhj/23/
var $line1 = $('#bio-line-1'),
$line2 = $('#bio-line-2');
$('#name-a').click(function() {
if (!$line1.is(":visible")) {
$line1.animate({
width: 'toggle'
}, 300, function () {
$line2.slideToggle("slow");
});
} else {
$line2.slideToggle("slow", function() {
$line1.animate({
width: 'toggle'
});
});
}
});
I work on my personnal website and I've a problem with the plugin Juicyslider. I work on it for 3 days but I can't find the solution ... I'm a beginner :/
So, I put images of the problem below.
I use Juicyslider to make gallery image of my work. Everything is ok but except one thing. The first image load don't fit to the page. BUT, after using the navigation (previous or after) and when I go back to the first image, this one fit to page ... First of all I thought that was a problem with position:absolute, display:none and width:100%, and after I thought that was a problem in JS with the order of functions. But everything I try don't work
HTML
<div class="description-project">
<div id="myslider_project" class="juicyslider">
<ul>
<li><img src="img.jpg"></li>
<li><img src="img1.jpg"></li>
<li><img src="im2.jpg"></li>
</ul>
<div class="nav prev"></div>
<div class="nav next"></div>
</div>
</div>
CSS
.juicyslider {
position: relative;
padding:0;
margin: 0;
border: 0;
}
.juicyslider ul {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
list-style: none outside none;
padding:0;
margin:0;
}
.juicyslider li {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
display: none; /* all hidden initially */
}
.juicyslider li:first-child {
position: absolute;
width: 100%;
height: 100%;
right: 0;
left: 0;
display: block;
}
.juicyslider .nav {
position: absolute;
top: 45%;
padding: 20px;
cursor: pointer;
z-index: 500;
background-image: url(../img/nav-40.png);
.juicyslider img.maxw {
width: 100%;
height: auto;
position: absolute;
filter: inherit; /* for ie8 to inherit parent opacity */
}
.juicyslider img.maxh {
width: auto;
height: 100%;
position: absolute;
filter: inherit; /* for ie8 to inherit parent opacity */
}
And the JS file
(function($) {
$.fn.juicyslider = function(options) {
var
settings = $.extend({
// these are the defaults.
mode: "cover", // "cover" or "contain"
width: 'null', // set null to make the slider as wide/tall as the window,
height: 'null', // otherwise set any other values in px or % unit
mask: "none", // "raster", "square", "strip" or "none"
bgcolor: "#000",
autoplay: 0, // 0 for no autoplay, any other postive number for play interval in (ms)
shuffle: false, // set true to shuffle the picture order
show: {effect: 'fade', duration: 300}, // effect params refer to jQuery UI
hide: {effect: 'fade', duration: 300}, // try 'puff' or 'drop' for the effect arg
}, options),
slides = this.find('li'),
amount = slides.length,
current = 0,
theWindow = $(window),
viewport = this;
turnSlide = function(event) {
var step = 1;
if (event) {
event.preventDefault();
step = event.data.step;
}
if (settings.shuffle)
step = Math.floor(Math.random()*(amount - 1) + 1);
$(slides[current]).hide(settings.hide);
current = (((current + step) % amount) + amount) % amount;
// must make displayable before detecting the dimension
$(slides[current]).css({display: 'block', overflow: 'hidden'});
resizeImg();
$(slides[current]).css({display: 'none'});
$(slides[current]).show(settings.show);
},
// set bg color
this.css('background-color', settings.bgcolor);
// set the next button
this.find('.nav.next').click({step:1}, turnSlide);
this.find('.nav.prev').click({step:-1}, turnSlide);
// set autoplay interval
if (settings.autoplay > 0)
setInterval(turnSlide, settings.autoplay);
/*
* handling bg images resize
*/
function resizeImg() {
// set width and height of the slider
viewport.width(settings.width == null ? theWindow.width() : settings.width);
viewport.height(settings.height == null ? theWindow.height() : settings.height);
vieww = viewport.width();
viewh = viewport.height();
viewRatio = vieww / viewh;
bgimg = $(slides[current]).find("img"); // the current visible image
var doResize = function() {
imgRatio = bgimg.width() / bgimg.height();
if ((viewRatio < imgRatio && settings.mode == 'contain') || (viewRatio >= imgRatio && settings.mode == 'cover')) {
bgimg.removeClass('maxh').addClass('maxw').css({
/* get new height after adjust above */
top: (viewh - vieww / imgRatio) / 2,
left: 0
});
} else {
bgimg.removeClass('maxw').addClass('maxh').css({
/* get new width after adjust above */
top: 0,
left: (vieww - imgRatio * viewh) / 2
});
}
};
bgimg.get(0).complete ? doResize() : bgimg.load(doResize);
}
theWindow.resize(resizeImg).trigger('resize');
And to finish, here images :
Before using navigation (the slider fit perfectly in the page but a part of the image is cropped because don't fit in the slider)
http://i.stack.imgur.com/jbbpb.jpg
After using navigation and go back to the first image (everything work ...)
http://i.stack.imgur.com/ScXTE.jpg
So I think something happen during the navigation event which not happen during the loading of the slider (the resize function for example ...)
Thanks !
Ok, after few days I found a solution, not the perfect one but it works.
I just add theWindow.load(resizeImg).trigger('resize'); at the end of JS file ...
The easier solution may be the best.
If you are any better solution, do not hesitate !