I loaded this jQuery-snippet for sliding a page via anchorLinks.
http://www.position-absolute.com/articles/better-html-anchor-a-jquery-script-to-slide-the-scrollbar/
In my case I have a fixed block (position:fixed) on the top of the page. Due to that I need a delta value for sliding down. If I don't use such a delta value the page is sliding to deep so that my anchorLink is hidden by the fixed block.
Has anybody an idea how to fix this issue?
Thx
The original Plugin:
jQuery.fn.anchorAnimate = function(settings) {
settings = jQuery.extend({
speed : 1100
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
window.location.hash = elementClick
});
return false;
})
})
}
Modified:
jQuery.fn.anchorAnimate = function(settings) {
settings = jQuery.extend({
speed : 1100,
offset: 0
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination+settings.offset}, settings.speed, function() {
window.location.hash = elementClick
});
return false;
})
})
}
Note that I've just added an offset option. So if your fixed div has a height of 60px then just call it with $('#whatever').anchorAnimate({offset: 60});
There must be a solution by editing this line:
window.location.hash = elementClick
Changing the duration value helps to slide to right position. But then the window "jumps" the offset-value at the end of the sliding.
Solution: I fixed the problem by removing line:
window.location.hash = elementClick
Related
So I am trying to get my header to change its size to become smaller after the user scrolls a certain distance down the page, the animations for the header to get bigger and smaller execute at the right time. Only issue is on the animation to make the header bigger, the animation happens as it should but as soon as it has finished animated the header reverts back to its original size for some reason. Not sure if this makes any difference but the header has its position set to fixed in the css. I have never come across an issue like this so have no idea what is going wrong, and googling it hasn't helped me either.
You can view the issue here: http://eventrem.com
Full Javascript:
function getScrollOffsets() {
var doc = document, w = window;
var x, y, docEl;
if ( typeof w.pageYOffset === 'number' ) {
x = w.pageXOffset;
y = w.pageYOffset;
} else {
docEl = (doc.compatMode && doc.compatMode === 'CSS1Compat')?
doc.documentElement: doc.body;
x = docEl.scrollLeft;
y = docEl.scrollTop;
}
return {x:x, y:y};
}
var IsHeaderBig;
window.onload = function() {
var offset = getScrollOffsets();
if (offset.y > 100) {
IsHeaderBig = false;
animateHeaderSmall(0);
} else {
IsHeaderBig = true;
animateHeaderBig(0);
}
}
window.addEventListener('scroll', function(){
var offset = getScrollOffsets();
if (offset.y > 100) {
//Make Small
if (IsHeaderBig) {
IsHeaderBig = false;
animateHeaderSmall(300);
}
} else {
//Make Big
if (!IsHeaderBig) {
IsHeaderBig = true;
animateHeaderBig(300);
}
}
});
function animateHeaderBig(speed) {
var header = $("#headerContainer");
var buffer = $("#homeBuffer");
header.animate({
height:'548px'
}, speed, function() {});
buffer.animate({
height:'470px'
}, speed, function() {});
}
function animateHeaderSmall(speed) {
var header = $("#headerContainer");
var buffer = $("#homeBuffer");
header.animate({
height:'100px'
}, speed, function() {});
buffer.animate({
height:'100px'
}, speed, function() {});
}
The easy solution is to handle the complete function and set the values there.
function animateHeaderBig(speed) {
var header = $("#headerContainer");
var buffer = $("#homeBuffer");
header.animate({
height:'548px'
}, {
duration: speed,
complete: function() {
$(this).css('height', '548px');
}
});
buffer.animate({
height:'470px'
}, {
duration: speed,
complete: function() {
$(this).css('height', '470px');
}
});
The problem is that it keeps scrolling endlessly with no end i tried to terminate it using exit but it's not working, any solution ?
Learn More
<script>
var marginY = 0;
var destination= 0;
var speed = 10;
var scroller = null;
function initScroll(elementId)
{
destination= document.getElementById(elementId).offsettop;
scroller = setTimeout(function(){initScroll(elementId);},1);
marginY = marginY + speed;
if(marginY >= destination)
{
clearTimeout(scroller);
}
window.scroll(0,marginY);
}
</script>
JavaScript is CaSe SeNsItIvE! It is offsetTop and not offsettop:
destination = document.getElementById(elementId).offsetTop;
On a different note, I am not sure how that does work. If you are trying a smooth scroll, you can also use jQuery by:
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
I am having a weird kind of issue in Firefox.
I have applied some js to the header of this site http://devignstudios.nl/ so the header is alway sticky when user scroll down the page.
The sticky header works fine in all browsers except firefox.
I tried to find the solution but couldn't find a proper answer.
Following is the js
var stickyNavTop = $('#header').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#header').addClass('sticky');
} else {
$('#header').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
Any help here will be highly appreciated.
Thanks in advance!
It has something to do with the scrollTop function which doesn't work in all cases on firefox when applied to id and classes.
Try this: http://jsfiddle.net/rHmAA/7/
This is the modified version of your sticky div thing. (for future reference)
The script uses a #stickyheader as a wrapper.
$(document).ready(function () {
$('a[href^="#"]').bind('click.smoothscroll', function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
var offset;
if ($('#stickyheader').css('position') == 'relative') {
offset = $('#stickyheader').outerHeight(true) * 2;
} else {
offset = $('#stickyheader').outerHeight(true);
}
console.log("offset: " + offset);
var $parent = $target.offsetParent();
console.log("$target.offset().top " + $target.offset().top);
$('#wrapper').animate({
'scrollTop': $target.offset().top - offset
}, 1500, function(){
window.location.hash = target;
});
});
});
I have built a site for a client and when the user clicks on a navigation link, the content of the linked page is dynamically loaded and transitioned in with JQuery, instead of loading the new page.
The problem I am having is that because it is not loading a new page, $(document).ready doesn't fire again and any JS on the individual pages gets broken. For example, if you visit http://www.woodlandexotica.com/species.php the page works correctly, but if you try to navigate to the page from http://www.woodlandexotica.com/index_dev.php, the JS won't work.
I'm not an expert in JS and I really appreciate any and all help!
The problem is that when you call ".load()", you're using a URL string and a selector suffix to extract from the loaded content. When you use ".load()" that way, jQuery strips out all the scripts and does not run them. There's nothing you can do about that other than to implement your own version of ".load()" yourself, or (better) have the other pages you load not be complete HTML pages. If you use ".load()" without the selector suffix on the URL string, then jQuery does run the scripts.
See jQuery bug 6307 for more. The bug will not be fixed but hopefully the documentation will be improved.
The way you organized this code is wrong
Keep only binding's inside document.ready and move the logic outside to a functions..which can be accessed by any page.
$(document).ready(function() {
//////////////////////////////////////////////////
//////////////////////////////////////////////////
// CONTENT BG SLIDESHOW
//////////////////////////////////////////////////
var photos = ["images/bg01.jpg", "images/bg02.jpg", "images/bg03.jpg"];
var slideshowSpeed = 8000;
var interval;
var activeContainer = 1;
var currentImg = 0;
var navigate = function(direction) {
currentImg++;
if(currentImg == photos.length + 1) {
currentImg = 1;
}
// Check which container we need to use
var currentContainer = activeContainer;
if(activeContainer == 1) {
activeContainer = 2;
} else {
activeContainer = 1;
}
showImage(photos[currentImg - 1], currentContainer, activeContainer);
};
var currentZindex = 1;
var showImage = function(photoObject, currentContainer, activeContainer) {
// Make sure the new container is always on the background
currentZindex--;
// Set the background image of the new active container
$("#bgimg" + activeContainer).css({
"background-image" : "url(" + photoObject + ")",
"display" : "block",
"z-index" : currentZindex
});
// Fade out the current container
// and display the header text when animation is complete
$("#bgimg" + currentContainer).fadeOut(function() {
setTimeout(function() {
animating = false;
}, 500);
});
$("#bgimg" + currentContainer).css({
"z-index" : "1"
});
currentZindex = 1;
};
function photoLoaded() {
if(!--numPhotosLeft) {
navigate("next");
interval = setInterval(function() {
navigate("next");
}, slideshowSpeed);
$('#bg_load').fadeOut('fast');
$('#page_bg').animate({opacity: 1, marginLeft: '-=860'}, 500);
}
}
var photos = ["images/bg01.jpg", "images/bg02.jpg", "images/bg03.jpg"];
var numPhotosLeft = photos.length;
for(var i = 0; i < photos.length; ++i) {
var img = new Image();
img.onload = photoLoaded;
img.src = photos[i];
}
//////////////////////////////////////////////////
//////////////////////////////////////////////////
//////////////////////////////////////////////////
//////////////////////////////////////////////////
// PAGE TRANSITION
//////////////////////////////////////////////////
// ADJUST FOR DEEPLINKING
var hash = window.location.hash.substr(1);
var href = $('a.link').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-4)){
var toLoad = hash+'.php #page_bg';
$('#page_bg').load(toLoad)
}
});
$('a.link').click(function() {
var toLoad = $(this).attr('href')+' #page_bg';
$('#page_bg').animate({opacity: 0.25, marginLeft: '-=875'}, 500, loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4); //MODIFY FOR DEEP LINKING
function loadContent() {
$('#page_wrap').prepend('<span id="load">LOADING...</span>');
$('#load').fadeIn('fast');
$('#page_bg').css('marginLeft', 860);
$('#page_bg').css('backgroundImage', 'none');
$('#page_bg').load(toLoad,'',hideLoader);
}
function hideLoader() {
$('#load').fadeOut('fast', showNewContent);
}
function showNewContent() {
$('#page_bg').animate({opacity: 1, marginLeft: '-=860'}, 500);
}
return false;
});
//set initial position and opacity
$('#page_bg').css('marginLeft', 860);
$('#page_bg').css('opacity', 0.25);
$('#page_wrap').prepend('<span id="bg_load">LOADING...</span>');
$('#bg_load').fadeIn('fast');
//////////////////////////////////////////////////
//////////////////////////////////////////////////
});
I'm using a jquery plugin on my page, vTicker, "for easy and simple vertical news automatic scrolling". I'm using it in combination with an rss jquery plugin. It's working fine, but I need to create a button that will do a manual scroll. Can anyone tell me how to do this? I'm guessing I need to call the moveUp function from the vTicker file, but because of the way the function is created, as well as how the vticker itself is created, I'm not really sure how to do it.
I create my vTicker like this:
$('#ticker1').rssfeed(uRL).ajaxStop(function() {
$('#ticker1 div.rssBody').vTicker();
})
And here is the vTicker code:
/*
* Tadas Juozapaitis ( kasp3rito#gmail.com )
*/
(function($){
$.fn.vTicker = function(options) {
var defaults = {
speed: 700,
pause: 15000,
showItems: 3,
animation: '',
mousePause: true,
isPaused: false
};
var options = $.extend(defaults, options);
moveUp = function(obj2, height){
if(options.isPaused)
return;
var obj = obj2.children('ul');
var iframe = $('#iFrame2');
first = obj.children('li:first').clone(true);
second = obj.children('li:odd:first').clone(true);
iframe.attr('src', (second.children('h4').children('a').attr("href")));
obj.animate({top: '-=' + height + 'px'}, options.speed, function() {
$(this).children('li:first').remove();
$(this).css('top', '0px');
});
if(options.animation == 'fade')
{
obj.children('li:first').fadeOut(options.speed);
obj.children('li:last').hide().fadeIn(options.speed);
}
first.appendTo(obj);
};
return this.each(function() {
var obj = $(this);
var maxHeight = 0;
obj.css({overflow: 'hidden', position: 'relative'})
.children('ul').css({position: 'absolute', margin: 0, padding: 0})
.children('li').css({margin: 0, padding: 0});
obj.children('ul').children('li').each(function(){
if($(this).height() > maxHeight)
{
maxHeight = $(this).height();
}
});
obj.children('ul').children('li').each(function(){
$(this).height(maxHeight);
});
obj.height(maxHeight * options.showItems);
var interval = setInterval(function(){ moveUp(obj, maxHeight); }, options.pause);
if(options.mousePause)
{
obj.bind("mouseenter",function(){
options.isPaused = true;
}).bind("mouseleave",function(){
options.isPaused = false;
});
}
});
};
})(jQuery);
Thanks for reading.
The short answer is, you can't. The moveUp function is totally isolated within the scope of the plugin, and you cannot call it directly.
To modify the plugin so that you can manually scroll, add this just before the line return this.each(function() {:
$.fn.extend({
vTickerMoveUp: function() {
var obj = $(this);
var maxHeight = 0;
obj.children('ul').children('li').each(function(){
if($(this).height() > maxHeight) maxHeight = $(this).height();
});
moveUp(obj, maxHeight);
}
});
Then, to scroll, do this:
var ticker = $('#ticker1 div.rssBody').vTicker();
ticker.vTickerMoveUp();
Since the moveup declaration is missing a var that means moveup() would be statically defined as a property of window (ie, global) once vTicker has been called. And thus I would think you could call moveup() from anywhere after that.