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!
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
I need to create menu for mobile. I chose mmenu jquery.
So, menu works well, but after inserting this code:
var config = {
"#slide-menu": {
pageSelector: "mm-page",
offCanvas: {
position : "left",
zposition : "front"
}
}
};
for (var selector in config) {
if (jQuery(selector)[0]) {
jQuery(selector).mmenu(config[selector]);
jQuery('#close-slide-menu').on('click', function() {
jQuery(selector).trigger('close.mm');
});
jQuery(document).on('keyup', function(e) {
if (e.keyCode === 27) { // ESC
jQuery(selector).trigger('close.mm');
}
});
}
}
, there was a problem with double scroll.
I cannot slide from top to bottom with 1 touch. On the center my sliding stop.
p.s. sorry for my English
thank you in advance
Mind sharing your html so that i may better understand what is happening. Might be that your content is overflowing your container which causes the double scrollbar. Would usually be something like margin or padding causing the issue.
I am building a one-page website where I need to detect when an element scrolls into view. Essentially trying to build a black/white colour changing menu based on the opposite of the element's background color.
I found a javascript utility called in-view that seems to do what I want. But there are issues;
It works when scrolling down... but...
It wont work when scrolling back up. This is due to giving it an offset of the window height (because I want it to trigger once it reaches the menu).
Panels < height of the page don't trigger the plugin when you reach the bottom.
This is my JS code:
var winHeight = $(window).height()-75;
inView.offset(winHeight);
inView('.panel-content')
.on('enter', function(el){
var color = $(el).attr('data-color');
if (color === 'dark') {
$('#masthead').removeClass('light').addClass('dark');
} else if (color === 'light') {
$('#masthead').removeClass('dark').addClass('light');
} else {
$('#masthead').removeClass('light').addClass('dark');
}
});
...and this is the structure of my HTML:
Note the panel height depend on content but vary from about 400 – 900.
<div id="masthead">logo, nav etc...</div
<div class="panel-content" data-color="light" style="background-colour:#222"></div>
<div class="panel-content" data-color="dark" style="background-colour:#ddd"></div>
<div class="panel-content" data-color="dark" style="background-colour:#ddd"></div>
<div class="panel-content" data-color="light" style="background-colour:#222"></div>
<div class="panel-content" data-color="dark" style="background-colour:#ddd"></div>
<div class="panel-content" data-color="light" style="background-colour:#222"></div>
<div class="panel-content" data-color="dark" style="background-colour:#ddd"></div>
Thanks in advance for any help :-)
I found the solution! I first tried detecting the scroll direction; so if scrolling down the page set the offset to the window height, otherwise set offset to 0... – and that worked.
The need to detect the direction led me back to the in-view documentation because I thought there had to be a better way. Turns out you can also specify an object containing the bounds (top, right, bottom, left), otherwise it uses the single value for each values! Which explains why I had the issues.
My final JS code:
jQuery(function($) {
var $target = $('#masthead');
var winHeight = $(window).height()-1; //1px less so it triggers using nav links
inView.offset({
top: 0,
right: 0,
bottom: winHeight,
left: 0
});
inView('.panel-content')
.on('enter', function(el){
var color = $(el).attr('data-color');
if (color === 'dark') {
$target.removeClass('light').addClass('dark');
} else if (color === 'light') {
$target.removeClass('dark').addClass('light');
} else {
$target.removeClass('light').addClass('dark');
}
});
});
note that the HTML is as before.
Hope this helps others who are trying to achieve a similar colour changing nav, or similar.
I have the heading fading out according to the scroll position, however I would like to attach the fadeout to when the user scrolls to the sticky navigation bar to create a better effect.
I tried the following but no luck!
<script>
$(".l-subheader.at_bottom").scroll(function() {
$(".l-titlebar-content").css("opacity", 1 - $(".l-subheader.at_bottom").scrollTop() / 220);
});
</script>
Should be pretty straight forward but I'm a JS novice!
http://scottdavy.co.uk/our-care-plans/
http://scottdavy.co.uk/our-pricing/
Thanks for your help.
Check if the header becomes position:fixed; then apply the fade effect.
<script>
$(".l-subheader.at_bottom").scroll(function() {
if( $(this).css('position') == 'fixed' )
{
$(".l-titlebar-content").css("opacity", 1 - $(".l-subheader.at_bottom").scrollTop() / 220);
}
});
</script>
Try the Following Demo... Smooth Scroll Header & Subheader
https://jsfiddle.net/pratikgavas/D3DDp/38/
JS Code:-
$(window).on("scroll", function(e) {
if ($(window).scrollTop() >= $("#Header").height()) {
$("#Header").fadeOut(500);
$("#SubHeader").css('top','0px');
}else {
$("#Header").fadeIn(500);
$("#SubHeader").css('top','100px');
}
});
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.