im trying to fade in a video after 5 seconds, then fade out a video after pressing a button, which then scrolls the page to the next section.
At the next section, it should animate some divs, then....pressing the button to go to the next section, fade out animates the previously animated divs, THEN goes to the next section.
The 3rd scroll button doesn't work at all.
Only the last 2 scroll buttons work....I can't figure out why only these last 2, and not the first 3 week.
NOTE: Id also like to kill the scrollbar on the page, and have the page navigated via the scroll buttons. Here is my code that is giving me trouble:
<script>
$(document).ready(function(){
//Kill Page Scrollbar
$('html, body').css({
'overflow': 'hidden',
'height': '100%'
});
//animate the registration video fading in
$('#Video').fadeTo(3000, 1);
//Make scrollbutton clickable
$('.ScrollButton_White1').click(function(){
//Fade Video out
$('#Video').fadeTo(3000, 0), (function(){
//define the variable "diamonds"
var diamonds = $('#PresenterContainer').children()
//animate the scrolling of the page down to the anchor point//
$('html, body').animate({
scrollTop: $("#PresenterContainer_AnchorPoint").offset().top
}, 5000,
function() {
diamonds.show();
});
});
});
<!--scroll button 2-->
$('.ScrollButton_Gold1').click(function(){
diamonds.hide();
$('html, body').animate({
scrollTop: $("#YouAskedForIt_AnchorPoint").offset().top
}, 5000
);
});
<!--scroll button 3-->
$('.ScrollButton_White3').click(function(){
$('html, body').animate({
scrollTop: $("#ReturnChampion_AnchorPoint").offset().top
}, 5000
);
});
<!--scroll button 4-->
$('.ScrollButton_Gold1').click(function(){
$('html, body').animate({
scrollTop: $("#YouAskedForIt_AnchorPoint").offset().top
}, 5000);
});
<!--scroll button 5-->
$('.ScrollButton_Gold2').click(function(){
$('html, body').animate({
scrollTop: $("#WhatYouWillLearn_AnchorPoint").offset().top
}, 5000);
});
<!--animate presenter diamond buttons-->
<!--$(window).scroll(function(event) {
<!--$('#Diamond_DarrenHardy').addClass('animate_rf');
<!--$('#Diamond_RobertKiyosaki').addClass('animate_rf');-->
<!--});
<!--end jquery script-->
});
</script>
You appear to have a typo in your code
$('#Video').fadeTo(3000, 0), (function() {
//define the variable "diamonds"
var diamonds = $('#PresenterContainer').children()
//animate the scrolling of the page down to the anchor point//
$('html, body').animate({
scrollTop: $("#PresenterContainer_AnchorPoint").offset().top
}, 5000,
function() {
diamonds.show();
});
});
At $('#Video').fadeTo(3000, 0), (function() { If you are looking to use the callback functionality of fadeTo it should be
$('#Video').fadeTo(3000, 0, function() {
//define the variable "diamonds"
var diamonds = $('#PresenterContainer').children()
//animate the scrolling of the page down to the anchor point//
$('html, body').animate({
scrollTop: $("#PresenterContainer_AnchorPoint").offset().top
}, 5000,
function() {
diamonds.show();
});
});
Related
For the site I'm working on I want people to be able to click on a topic, go to that page, then have a button at the bottom of that page which will take them back to where they were browsing before.
The below script did work for that:
$(document).ready(function() {
$('html, body').hide();
if (window.location.hash) {
setTimeout(function() {
$('html, body').scrollTop(0).hide();
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top - 100
}, 100)
}, 0);
}
else {
$('html, body').show();
}
});
However, it's not the nicest UX. When it loads in it either jumps uncomfortably fast to the place I'm trying to get them to or you have to watch it scroll slowly which isn't fun either.
I do have to make it scroll because otherwise it breaks other animations on the page, so I thought I would just hide the entire thing while it's scrolling, then show it or fade it in when it's done.
I wrote the below to do that, and it does hide it, it does show it, and the console log triggers... But it no longer scrolls down to where I want it go.
Any help?
$(document).ready(function() {
$('html, body').hide();
if (window.location.hash) {
setTimeout(function() {
$('html, body').scrollTop(0).hide();
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top - 100
}, 100, function() {
$('html, body').show();
console.log("JHjlkjl");
})
}, 0);
}
else {
$('html, body').show();
}
});
I have problem with a menu. The menu items is a combination of on page #sections and new pages target links. Now for the on page # targets i have a nice scroll animation. But in combo with the page target it doesn't work
I am able to jump to all the section and pages, but i like the scroll to work
This is the scroll javascript
$('a.page-scroll').bind('click', function(event) {
//alert('lets scroll');
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: -160 + $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
I have a div with 100% height of the screen and i want it to scroll like this website. One little scroll should take me to the end of a division.
$('html, body').animate({
scrollTop: $("#target-element").offset().top
}, 1000);
I was using this code but its not working. Help
This code should works:
$( "body" ).scroll(function() {
$('html, body').animate({
scrollTop: $("#target-element").offset().top
}, 1000);
});
I want to click the about section on my new website and when it scrolls down, instead of it sliding the about section up and aligning the top of the "about" section with the top of the screen, I want to align the bottom of the "about" section with the bottom of the screen.
I'm not sure if this has to be done with javascript or if it can be done with HTML. What are your thoughts?
Here is the function used to scroll to the top. ( Here Is A JSFiddle )
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('.page-scroll a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
Do I just change it to:
//jQuery for page scrolling (to bottom) feature - requires jQuery Easing plugin
$(function() {
$('.page-scroll a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollBottom: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
There is no scrollBottom, so you'll need to calculate the appropriate scrollTop:
$(function() {
$('.page-scroll a').bind('click', function(event) {
var $anchor = $(this);
var $section = $($anchor.attr('href'));
var scrollPos = $section.offset().top + $section.outerHeight() - $(window).height();
$('html, body').stop().animate({
scrollTop: scrollPos
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
http://jsfiddle.net/YjgdS/6/
My question is a little tricky to explain, but I will try anyway. I have two horizontal tabs which, when you click on them, open a text box content. I'm trying to "focus" on them when they get clicked on. I've found a lot of material online but nothing works except for this code I'm showing below:
$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 500);
});
$(".accordionButtonone").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 500);
If I only click on the first accordionButton it works. If I click on the second accordionButton for first, it works. If I click on the first accordionButton after I've clicked on the second it works, but if I click on the second accordionButton after I click on the first it doesn't work: the focus remains at the bottom of the page. I don't know what could be the problem, I'm making some attempt with the animate function (jQuery tutorial) and the offset function (jQuery tutorial) but I would be grateful even only to know what is going wrong...
UPDATE: a partial solution is
$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 500);
});
$(".accordionButtonone").click(function() {
$('html, body').scrollTop(0);
});
$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).nextAll('div .accordionContent').offset().top
}, 500);
});
$(".accordionButtonone").click(function() {
$('html, body').animate({
scrollTop: $(this).nextAll('div .accordionContentone').offset().top
}, 500);
})
You have to put all that into a callback
$('.accordionContent').slideUp('normal', function(){
$(".accordionButtonone").click(function() {
$('html, body').animate({
scrollTop: $(this).nextAll('div .accordionContentone').offset().top
}, 500);
})
});
The solution is NOT elegant, but it works:
$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 10);
});
$(".accordionButtonone").click(function() {
$('html, body').scrollTop(458);
});
You are making it scroll down by using offset. remove the offset and it will stop scrolling down. also, instead of using individual selectors, why don't you write some code that utilizes jquery's 'this'
$(this)