We Keep Coding

Revolution Slider - Load slider when on screen only

I have this site: http://362.a07.myftpupload.com/
The password is: aynhoe_park
I need to fix it so that the Revolution Sliders on each Section to only load when its scrolled onto. Can anyone suggest / give me some jQuery to force this to only start the sliders when the user is on the page with it. You will see that the site is a parallax and it has multiple sliders on the parallax.
I have tried this code below, from the people at Revolution Slider, which doesn't seem to work:
revapi5.on('revolution.slide.onloaded', function() {
// slider reaches top of screen
jQuery(this).waypoint(function(direction) {
// slider scrolled into view
if(direction === 'up') {
jQuery(this).revresume();
}
// slider scolled out of view
else {
jQuery(this).revpause();
}
}, {offset: function() {
return -jQuery(this).height();
// slider reaches bottom of screen
}}).waypoint(function(direction) {
// slider scrolled into view
if(direction === 'down') {
jQuery(this).revresume();
}
// slider scrolled out of view
else {
jQuery(this).revpause();
}
}, {offset: function() {
return jQuery(window).height();
}});
});
So If someone can help me out that would be great! As I would love just one bit of code not one for each slider to force it to run the slider only when it is in the screen, not before hand.
Thanks in advance.
Chris

The code is so far correct. Please make sure that you change the "revapi5" against to the correct references.
If i check your site, i see revapi1, revapi2, revapi25, revapi26, revapi3, revapi4, ...28, ...29. No revapi5 which would exactly declare why this not working for you. Changing your example above from revapi5 to revapi1 i.e. would start/stop the First slider on the page dependent on the scroll position.
In case you wish to drive all your sliders in the page, you will need to add for each one an individual script based on the example above, or a script which takes care of all sliders in one go like this:
jQuery('.rev_slider').each(function() {
jQuery(this).waypoint(function(direction) {
// slider scrolled into view
if(direction === 'up') {
jQuery(this).revresume();
}
// slider scolled out of view
else {
jQuery(this).revpause();
}
}, {offset: function() {
return -jQuery(this).height();
// slider reaches bottom of screen
}}).waypoint(function(direction) {
// slider scrolled into view
if(direction === 'down') {
jQuery(this).revresume();
}
// slider scrolled out of view
else {
jQuery(this).revpause();
}
}, {offset: function() {
return jQuery(window).height();
}});
});
hope this helps you further ?

Scrolling on webpage with mouse location - hover on side elements

So I have this layout here .
<div class="content">
<div class="direction_left"></div>
<div class="direction_right"></div>
<div class="direction_up"></div>
<div class="direction_down"></div>
</div>
<div id="game">
<div id="pos"></div>
</div>
4 divs, if I hover on top it (should) scroll top, if I hover on bottom it (should) scroll bot, left scrolls left and right scrolls right!
On mouse hover on any of the four divs inside the content will scroll the page accordingly.
Important h_amount is horizontal and v_amount is for vertical
function scroll_h() {
console.log('scrolling left and right'+h_amount);
$('#game').animate({
scrollLeft: h_amount
}, 100, 'linear',function() {
if (h_amount != '') {
scroll_h();
}
});
}
function scroll_v() {
console.log('scrolling up and down'+v_amount);
$('#game').animate({
scrollTop: v_amount
}, 100, 'linear',function() {
if (v_amount != '') {
scroll_v();
}
});
}
and then on hover I call
$('.direction_right').hover(function() {
console.log('scroll right');
h_amount = '+=50';
scroll_h();
}, function() {
h_amount = '';
});
$('.direction_up').hover(function() {
console.log('scroll up');
v_amount = '-=50';
scroll_v();
}, function() {
v_amount = '';
});
FULL fiddle here
The problem, I cannot understand why it does not work for up and down. I think my script is correct so am thinking maybe css which is a general weakness of mine might be wrong :D help!

I think I found my answer, please correct me if I am wrong!
Found this question here which asks why his scrollTop() wont animate, and the answer says that window does not have a scrollTop() property, and to use body or html instead (depends on browser, so use both).
Therefore I think my #game div does not have a scrollTop() property either! So I replaced it with html,body and its now working :D.
*
P.S. Don't really know if its actually working or "working".
*
new fiddle here
Also changed that gradient background because it made me dizzy!

Javascript object fixed scrolling

I have a curious bug. I have a bar at the top that's fixed via CSS. Simple. However, opening a jQuery dropdown within this bar is buggy as it doesn't scroll, when i do. The dropdown stays at it's current position.
So, i tried to fix that with jQuery:
$(document).ready(function () {
var dropdownMenu = $('.dropdownMenu'),
top = $('#topMenu').height();
$(window).on('scroll click', function () {
$(dropdownMenu).css('position', 'fixed');
$(dropdownMenu).css('top', top + 7 + 'px');
});
});
If i open the dropdown at the very top of the page and scroll, it works as expected. But when scrolling down and open the dropdown, it's positioned everywhere, but not where i expect it. As soon, as i scroll, it fixes it's position.
So my problem is, that on click, it opens on the wrong position. Not more, not less.
Any idea?

A quick and dirty hack:
$(function() {
WCF.Dropdown.init();
$('.dropdownToggle').click(reposition);
$(window).on('scroll click', reposition);
});
function reposition() {
var dropdownMenu = $('.dropdownMenu'),
top = $('#topMenu').height();
setTimeout(function() {
$(dropdownMenu).css('position', 'fixed');
$(dropdownMenu).css('top', top + 7 + 'px');
}, 10);
}

vertical autoscroll on mouseover - like deviantart.com "Project giveaway" has

http://www.deviantart.com/ is vertically scrolling the content of one of their container upwards when you move your cursor over it. and on mouseleave, it scrolling back down.
You can see it in action on their main page - right now at least - in a container with the text "Project Giveaway: 100 point giveaway #4". I'm wondring how they do this?
Found this line of code trough firebug:
onmouseout="if (window.LitBox) LitBox.out(this)" onmouseover="if (window.LitBox) LitBox.hover(this, true)".
So I tried to google for "LitBox" - but didn't get any luck. All I found was lightbox and listbox...
The exact effect is what I'm looking for.
Anyone know how?

$(document).ready(function () {
if ($('.content').height() > $('.container').height()) {
$(".content").hover(function () {
animateContent("down");
}, function () {
animateContent("up");
});
}
});
function animateContent(direction) {
var animationOffset = $('.container').height() - $('.content').height();
var speed = "slow";
if (direction == 'up') {
animationOffset = 0;
speed = "fast";
}
$('.content').animate({
"marginTop": animationOffset + "px"
}, speed);
}
See in JSFiddle
my code based on this code :)

Well.. it's really not that difficult to implement with jquery or css3. With jquery, on mouseover you start running a function to scroll the div up, using animate() perhaps. Then on mouseleave you stop the animation and run another animation to scroll it back.
With css 3, you can achieve it with transitions.
You can check out http://www.w3schools.com/css3/css3_transitions.asp.

jQuery animate() to position issue

I'm just working on my personal website, giving it a bit of a revamp.
I've implemented a sort of 'accordion' menu feature, where if a menu button is clicked, the "non-clicked" buttons disappear, and then the clicked button is moved to the top of the list, where then a panel animates down in which I will be putting text content.
In Firefox this works perfectly, however in IE and Chrome the button jumps to the top of the page and then animates to position, instead of animating from where it started from.
Anyone any ideas how to fix this?
Offending code:
function Accordion(e)
{
var o =
{
init: function()
{
o.button = e;
o.addClickHandler();
},
addClickHandler: function()
{
o.button.click(function(){
o.button.removeClass('unselected');
o.button.addClass('selected');
o.fader();
});
},
fader: function()
{
$j('.unselected').animate({opacity:0}, 1000);
var wait = setInterval(function() {
if(!$j('.unselected').is(":animated") ) {
clearInterval(wait);
o.shifter();
}
}, 100);
},
shifter: function()
{
o.button.css({'position':'absolute'});
o.button.animate({top:91}, 500, o.createInfoBox);
},
createInfoBox: function()
{
var buttonParent = o.button.parent();
buttonParent.append("<div class='infoBox'></div>");
$j('.infoBox').animate({height:390});
}
}
o.init();
return o;
}
}
The issue lies within the shifter function, where I'm setting the position to absolute and then animating so the desired effect can be achieved. I understand why it's doing this (presume it's just resetting itself to top:0 and then animating to top:91) but does anyone have a quick solution? It's late and it's doing my head in.
Much appreciated,
Dave

HAve you tried using the current position of the element when you switch it to absolute... for example:
function() {
var currentp = $(this).offset();
o.button.css({'position':'absolute', top: currentp.top});
o.button.animate({top:91}, 500, o.createInfoBox);
}
Note there are two different offset functions and im not sure which one you want use here so you might want to review the docs on that.
Also you could always just re-theme the jQuery-ui accordian and save yourself the trouble ;-)