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.
Related
I am replacing the src of an image when the user has scrolled to a certain point of the page with this jQuery code:
jQuery(function() {
var sticky = jQuery(".sticky-icon-white");
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 115) {
jQuery("#sticky-icon").attr("src", "https://dummyimage.com/100x100/000/fff");
} else {
jQuery("#sticky-icon").attr("src", "https://via.placeholder.com/100/");
sticky.removeClass('not-sticky-icon-white').addClass('sticky-icon-white');
}
if (scroll >= 300) {
sticky.removeClass('sticky-icon-white').addClass('not-sticky-icon-white');
} else {
sticky.removeClass('not-sticky-icon-white').addClass('sticky-icon-white');
}
});
});
This is my HTML:
<div class="sticky-icon-white">
<img id="sticky-icon" src="https://via.placeholder.com/100/">
</div>
The replacing is working fine but I want to apply a slide or push (not sure what to call it) animation on it. Like this one: https://gosimple.com (the leaf icon in the middle).
But I couldn't figure out how. Could someone help me to find a solution, please?
Here is a JSFiddle: http://jsfiddle.net/bzqad296/
Thanks in advance!
I have tried with slideUp(); or slideDown(); but it doesn't work.
EDIT:
In this image, you can see the effect. How the icon changes from white background, green leafs to green background, white leafs:
https://prnt.sc/lgwr3f
The things here are like this (long story but I have a point)
I have a menu with buttons that look like this:
*******
***B***
*******
An when you hover it expands
*************
***Button****
*************
Now, when the screen is for mobile, no more hexagons, they stack up like normal buttons, with the complete text showing instead of having to hover to read.
my markup is as follows:
S<span class="comptxt">ervicios</span>
C<span class="comptxt">ontacto</span>
F<span class="comptxt">aq</span>
B<span class="comptxt">log</span>
And I'm using jQuery to show and hide the span tags on hover and css to handle the width of the anchor tag.
$('a.btn').hover(function() {
$(this).children('span').fadeIn(500);
$('img').css('opacity', 0.5);
}, function() {
$(this).children('span').fadeOut(200);
$('img').css('opacity', 1);
});
so fade in on hover fade out when not hover.
BUT I put this javascript on an IF conditional, if the screen resizes to mobile (i'm using 500px and below as mobile) this code shouldn't run, here is the if conditional:
$(window).resize(function() {
if ($(window).width() < '501') {
$('a.btn').hover(function() {
$(this).children('span');
$('img').css('opacity', 0.5);
}, function() {
$(this).children('span');
$('img').css('opacity', 1);
});
};
if ($(window).width() > '500') {
$('a.btn').hover(function() {
console.log($(window).width());
$(this).children('span').fadeIn(500);
$('img').css('opacity', 0.5);
}, function() {
//this part of the code runs even if the window is below 500
$(this).children('span').fadeOut(200);
$('img').css('opacity', 1);
});
};
});
It's freaking me out that the conditional doesn't met and the code still runs.
Tha problem with this is that when the buttons are normal and you hover over them after the resize, the text fades out
Other thing: when you load the page and the screen is below 500 it works as it should, no fading out. The problem arises when you resize above 500 and resize back down below 500, then the fadeout happens again.
On the resize event you never remove the previous event handler from when the window was at a larger size. You can achieve this using off():
$(window).resize(function() {
if ($(window).width() < '501') {
$('a.btn').off('hover').hover(function() {
// rest of your code...
});
};
if ($(window).width() > '500') {
$('a.btn').off('hover').hover(function() {
// rest of your code...
});
};
});
A better solution may be to instead check the size of the window within the hover handler itself as detaching/attaching events for every single pixel that the window is resized is going to end up being very slow. Try this:
$(function() {
$('a.btn').hover(function() {
var opacity = $(window).width() < 501 ? 0.5 : 1;
$('img').css('opacity', opacity);
}, function() {
var opacity = $(window).width() < 501 ? 1 : 0.5;
$('img').css('opacity', opacity);
});
});
.hover(), like .click() and other functions, are additive with jQuery.
Every time the window is resised, you bind an additional function on hover.
I mean, if the window is resized by 200 pixels, you bind the function 200 times, and it will actually be executed 200 times on hover.
It's also true when you expand the window : hover functions will continue to be bond. So, on hover, 200 "small screen" functions will be executed, and 200 "large screen" functions will be executed. This is a terrible design.
At least, you have to unbind hover() before applying a new one :
$('a.btn').unbind('mouseover mouseout').hover(
Your code does not run, because you put it inside $(window).resize. It will only run when the screen is resized, but never on hover.
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 ?
Im trying to make my tooltip bounce onmouse hover,
I have the following that works with sporadic results, as in the the tooltip bounces fast for 3 seconrds ro so, then slow for 3 seconds etc... I also need to stop this function on mouseout, Can somebody see where im going wrong to get the variation in bounce speed?
// Tooltip title
$('.male').mouseover(function(e) {
var tiptitle = $(this).find('.highlight');
setInterval(function(){
tiptitle.animate({top:'-85px'}, 100, function() {
tiptitle.animate({top:'-75px'}, 100);
});
},200);
}).mouseout(function() {
});
if you choose to go the route of the effects plugin bounce effect use this code , then use stop() on mouseout
$('.male').mouseover(function(e) {
var tiptitle = $(this).find('.highlight');
tiptitle.effect("bounce", { times:3 }, 300);
}).mouseout(function() {
$(this).find('.highlight').stop();
});
otherwise , I believe you are getting sporadic speeds of bounce because of -85px and -75px both at 100
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 ;-)