Thank you for giving me the opportunity to be helped.
I would like to create a toggle footer (slide pannel).
I found the code below which works fine but I want to be able to close the footer with two different buttons: the same image I used to open (#footer_button) AND another image (a cross) placed inside the content (#footer_content).
How should I proceed to integrate the same function on this image (#footer_button_2) with this code?
Many thanks in advance!
Here is a printscreen: http://hpics.li/cb5b88a.
Here is the code I use:
<script type="text/javascript">
jQuery(function($) {
var slide = false;
var height = $('#footer_content').height();
$('#footer_button').click(function() {
var docHeight = $(document).height();
var windowHeight = $(window).height();
var scrollPos = docHeight - windowHeight + height;
$('#footer_content').animate({ height: "toggle"}, 1000);
if(slide == false) {
if($.browser.opera) { //Fix opera double scroll bug by targeting only HTML.
$('html').animate({scrollTop: scrollPos+'px'}, 1000);
} else {
$('html, body').animate({scrollTop: scrollPos+'px'}, 1000);
}
slide = true;
} else {
slide = false;
}
});
});
</script>
You can separate them with comas like in CSS: $('#footer_button, #CrossImgID') :)
<script type="text/javascript">
jQuery(function($) {
var slide = false;
var height = $('#footer_content').height();
$('#footer_button, #CrossImgID').click(function() {
var docHeight = $(document).height();
var windowHeight = $(window).height();
var scrollPos = docHeight - windowHeight + height;
$('#footer_content').animate({ height: "toggle"}, 1000);
if(slide == false) {
if($.browser.opera) { //Fix opera double scroll bug by targeting only HTML.
$('html').animate({scrollTop: scrollPos+'px'}, 1000);
} else {
$('html, body').animate({scrollTop: scrollPos+'px'}, 1000);
}
slide = true;
} else {
slide = false;
}
});
});
</script>
Related
I need to load 2 different animated graphic on window scroll up/down on a website by triggering some functions, it's working but its buggy as the functions are triggered too many times when scrolling:
$(window).scroll(function() {
var scroll = $(window).scrollTop(),
headerHeight = $('.navbar').outerHeight();
if(scroll > headerHeight) {
loadLogoAnimeDown();
}else{
loadLogoAnimeUp();
}
});
You need a way to check if the functions have been called (and logo has been loaded), so you can use a variable for that. After the logo has been loaded, you set the variable as false, which prevents them from loading more than once.
var downNotLoaded = true;
var upNotLoaded = true;
$(window).scroll(function() {
var scroll = $(window).scrollTop(),
headerHeight = $('.navbar').outerHeight();
if(scroll > headerHeight) {
if(downNotLoaded){
loadLogoAnimeDown();
downNotLoaded = false;
}
}else{
if(upNotLoaded){
loadLogoAnimeUp();
upNotLoaded = false;
}
}
});
I think you might find this is a very hacky way to do it, but this should work.
var animated;
$(window).scroll(function() {
var scroll = $(window).scrollTop(),
headerHeight = $('.navbar').outerHeight();
if(scroll > headerHeight) {
if (animated == true) {
loadLogoAnimeDown();
animated = false;
}
} else{
if (animated == false) {
loadLogoAnimeUp();
animated = true;
}
}
});
I have an animation on scroll page in jQuery, in mobile look wired.
How i can set-up jQuery for not show the animation in mobile browser?
Tin the main.js i have other function that want keep for both browser.
If help this are the animation:
$(function() {
var $elems = $('.animateblock');
var winheight = $(window).height();
var fullheight = $(document).height();
$(window).scroll(function() {
animate_elems();
});
function animate_elems() {
wintop = $(window).scrollTop();
$elems.each(function() {
$elm = $(this);
if ($elm.hasClass('animated')) {
return true;
}
topcoords = $elm.offset().top;
if (wintop > (topcoords - (winheight * .90))) {
$elm.addClass('animated');
}
});
}
});
Thanks!
Have created a sticky menu, which is working fine for desktop and mobiles.
But there is a small issue with mobiles, when ever scrolling the page and the finger is still on the screen then
after reaching to the position of the container where the menu needs to stick it is not happening.
When I removed the finger from the screen, then it is taking a second time and the menu is getting fixed.
is there any solution for this, kindly help me with a sample demo.
Demo
JS:
var menuSection = $('.section') , navLists = $('.menu ul li'),
navLists_height = navLists.outerHeight(), headerOffset = $('.top_layer').offset().top;
$(window).on('scroll', function () {
var window_top = $(window).scrollTop() + 12;
if (window_top > headerOffset) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
var cur_position = $(this).scrollTop()+70;
menuSection.each(function() {
var top = $(this).offset().top - navLists_height,
bottom = top + $(this).outerHeight();
if (cur_position >= top && cur_position <= bottom) {
navLists.find('a').removeClass('active');
menuSection.removeClass('active');
$(this).addClass('active');
navLists.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
}
});
});
navLists.find('a').on('click', function () {
var $el = $(this)
, id = $el.attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top - navLists_height
}, 500);
return false;
});
I have a navigation bar that repositions after scrolling down. It works with position:fixed, but while scrolling I want it to move up like all the other content that follow on the site . I the user stops scrolling it should reposition on top:
Heres a demo:
http://jsfiddle.net/gvjeyywa/7/
But I want it to be position:absolute (especially for the scrolling on the Ipad)
http://jsfiddle.net/gvjeyywa/5/
How do i let the JS overide my CSS? Here is my JS:
var isInAction = false;
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
if (!isInAction){
isInAction = true;
$( "#navigation" ).animate({
top: "-" + $("#navigation").innerHeight() + "px"
}).delay(1000).animate({
top: "0px"
}, 800, function() {
isInAction = false;
});
}
}
lastScrollTop = st;
});
In the first look i think it's impossible but after some tries this code was created.
I spent long time to write this code and use several techniques and hope to be helpful.
Maybe there are simpler solutions too !!
var bitFlag = false;
var lastScrollTop = 0;
var timeoutId;
$navigation = $("#navigation");
$(window).scroll(function (event) {
var intWindowTop = $(window).scrollTop();
var intElementBottom = $navigation.offset().top + $navigation.innerHeight();
if (intWindowTop > lastScrollTop) {
if (!bitFlag) {
$navigation.css("position", "absolute").css("top", intWindowTop + "px");
bitFlag = true;
}
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(function () {
if (intWindowTop > intElementBottom) {
intDelayTime = setTimeout(function () {
$navigation.animate({
top: intWindowTop + "px"
}, 800);
}, 500);
}
}, 100);
} else {
$navigation.css("position", "fixed").css("top", "0px");
bitFlag = false;
}
lastScrollTop = intWindowTop;
});
The }, 500); section control Delay time in milliseconds and the }, 800); section control the slide down animation speed.
Check JSFiddle Demo
When you get to the limit of document, you can keep scrolling and can see an background behing the document before it bounces back (overscrolling).
How can I force the window to overscroll like this with javascript?
This is not the ultimate solution since I think the animation is imperfect and it's really only for desktops, but it can at least get you started. What I have done is increase the height of the body for animation on scroll.
$(document).on('scroll mousewheel', function (e) {
//Check for mousewheel scrolling down (or not used at all)
if (!e.originalEvent || !e.originalEvent.wheelDeltaY
|| e.originalEvent.wheelDeltaY < 0) {
if ($(window).height() + $(this).scrollTop() == $(this).height()) {
//Prevent simultaneous triggering of the animation
if (!$("body").data('bouncing')) {
$("body").height(function (_, h) { return h + 15; })
.data('bouncing', true);
$("body, html").animate({
'scrollTop': '+=15'
}, 125).animate({
'scrollTop': '-=15'
}, {duration: 125, complete: function () {
$(this).height(function (_, h) { return h - 15; })
.data('bouncing', false);
}});
}
}
}
}).on('keydown', function (e) {
//The "down" arrow; still bounces when pressed at the bottom of the page
if (e.which == '40') {
$(this).trigger('scroll');
}
});
I've been playing with this version that imitates the effect using a div, that slides in and out of view at the bottom of the page. If you have a high res monitor, you may need to increase the height of the main div to test it.
<div id="main" style="background:#f5f5f5;height:1000px"></div>
<div id="overscroll" style="background:#666666;height:120px"></div>
<script type="text/javascript">
var $doc = $(document);
$doc.ready(function () {
var $wnd = $(window),
$oscroll = $('#overscroll'),
block = false;
$wnd.bind('scroll', function () {
if (!block) {
block = true;
var scrollTop = $wnd.scrollTop(),
wndHeight = $wnd.height(),
docHeight = $doc.height();
try {
if (scrollTop + (wndHeight + 120) > docHeight) {
$oscroll.slideUp('slow');
}
else if ($oscroll.css('display') === 'none'
&& (scrollTop + (wndHeight + 120) < docHeight)) {
$oscroll.slideDown();
}
} finally {
block = false;
}
}
});
});
</script>