I have a function to set a top in a div, for show the notices.
Now i just want to put a delay to this function (effect), because the "top" is set to fast, and it's so horrible.
var rolarbaixo = function() {
var newtop = $('.plugin-noticias-rolar').position().top - 80;
$('.plugin-noticias-rolar').css('top', newtop + 'px').delay( 800 );
}
I tried to use .delay, but doesn't work.
Any help?
I gues what you want here is animate() to keep a smooth transition, try this:
var rolarbaixo = function() {
var newtop = $('.plugin-noticias-rolar').position().top - 80;
$('.plugin-noticias-rolar').animate({top : newtop + 'px'},800);
}
Related
I have implemented an onscroll function for a div that worked like this:
window.onscroll = function () {
document.getElementById("faceExtractor").style.top = (($(window).scrollTop()) + 50) + "px";
};
That worked fine. Now I made the div element also draggable, which means after someone dragged the div a but down and then scrolled the div was put again 50px below the top of the page due to the onscroll function. I wanted to solve that, so that the div keeps it position while scrolling even when someone drageed it a a specific position and I tried this:
window.onscroll = function () {
topDistance = document.getElementById("faceExtractor").getBoundingClientRect().top;
if (topDistance < 50){
document.getElementById("faceExtractor").style.top = (($(window).scrollTop()) + 50) + "px";
} else {
var gap = ($(window).scrollTop()) + topDistance;
document.getElementById("faceExtractor").style.top = gap + "px";
}
};
But then the onscroll doesn't work at all. How can I modify my onscroll so that the div keeps it position and is not always put to the top of the page or a static position?
window.onscroll = function () {
positionFromTop = document.getElementById("faceExtractor").offsetTop;
topDistance = document.body.parentElement.scrollTop+positionFromTop;
if (topDistance < 50){
document.getElementById("faceExtractor").style.top = topDistance+ "px";
} else {
var gap = topDistance;
document.getElementById("faceExtractor").style.top = gap + "px";
}
};
Try this method. And, give 'position:absolute' for 'faceExtractor' Div.
The below function mostly works - it moves the backgrounds as I need, however I would like the function to run on any element with a class of "animate", rather than having to call each element down the bottom. I tried $('.animate').load(function(){}; but it just wont work... Thanks
JAVASCRIPT
$(window).load(function(){
(function(){
$.fn.move = function(){
var $this = $(this);
var offset = $this.offset().top;
var start = 0;
var end = offset + $this.height();
var speed = $this.attr("speed");
return this.each(function(){
$(window).bind('scroll', function() {
var windowPos = $(window).scrollTop();
if((windowPos >= start) && (windowPos <= end)) {
var newCoord = windowPos * speed;
$this.css({'background-position': '0 '+ newCoord + 'px'});
};
});
});
};
})(jQuery);
$('.animate').move();
});
HTML
<div class="welcome_6"></div>
<div class="welcome_5"></div>
<div class="welcome_4"></div>
<div class="welcome_3"></div>
<div class="welcome_2 animate" speed="-1"></div>
<div class="welcome_1 animate" speed="0"></div>
EDIT:
When I scroll the page the elements move according to the scroll location. Each element moves at a different speed (set as html attribute). This code moves them all at the same speed.. I'm assuming the $('.animate') should be somewhere up the top replacing the $.fn.move but i cant figure it out..
Should be $('.animate') instead of $('animate') note the dot at the start of the query which says to the jQuery that you are looking for a class.
I think the issue is with the way you are using the immediately invoked function inside the load function and you are passing in jQuery at the bottom and not into the immediately invoke function. This will update the background position as long as you script tag is placed after the jquery script tag
Here is a link to js fiddle:
UPDATE: https://jsfiddle.net/kriscoulson/pnrx34wp/1/
I do not have your exact code for styling so I improvised but if you inspect the elements the background position is being updated;
AND UPDATE :
$.fn.move = function() {
var $this = $(this);
var offset = $this.offset().top;
var start = 0;
var end = offset + $this.height();
return this.each(function(index, element) {
var $element = $(element);
var speed = $element.attr("speed");
$(window).bind('scroll', function() {
var windowPos = $(window).scrollTop();
if ((windowPos >= start) && (windowPos <= end)) {
var newCoord = windowPos * speed;
$element.css({
'background-position': '0 ' + newCoord + 'px'
});
};
});
});
};
$(document).ready(function() {
$('.animate').move();
});
EDIT: Your 'this' binding was off and your speed was declared outside of the this.each
I am trying to make this function works only when the screen size is above 1024px.
//Parallax background image
var velocity = 0.5;
function update(){
var pos = $(window).scrollTop();
$('.parallax').each(function() {
var $element = $(this);
var height = $element.height();
$(this).css('background-position', '40%' + Math.round((height - pos) * velocity) + 'px');
});
};$(window).bind('scroll', update); update();
Here is what I have tried to do:
//Parallax background image
var velocity = 0.5;
$(window).on("ready resize", function() {
if ($(window).width() < 770) {
function update(){
var pos = $(window).scrollTop();
$('.parallax').each(function() {
var $element = $(this);
var height = $element.height();
$(this).css('background-position', '40%' + Math.round((height - pos) * velocity) + 'px');
});
};});$(window).bind('scroll', update); update();
I really don't know what I am doing wrong...
You haven't stated what the problem you're coming across is. If it's "my code doesn't work", then perhaps you should check your syntax first. Your braces are messed up.
//Initialize velocity and empty update function
var velocity = 0.5;
var update = function () {};
//When window is ready (content loaded) OR resized, execute the following function
$(window).on("ready resize", function () {
if ($(window).width() >= 1024) { //Check if window width is 1024px wide or larger
update = function () { //Set update to run this function when executed.
var pos = $(window).scrollTop(); //Get scrollbar position https://api.jquery.com/scrollTop/
//For each element with 'parallax' class, execute the following function
$('.parallax').each(function () {
var $element = $(this); //Get the current parallax-classed element
var height = $element.height(); //Save the current height of this element
//Set the CSS of this parallax-classed element set the background position
$(this).css('background-position', '40% + ' + Math.round((height - pos) * velocity) + 'px');
});
};
} else { //Execute if screen width is < 1024px
update = function () {}; //Set update to do nothing
}
});
//When window is scrolled through, run the update function
$(window).bind('scroll', update);
//update();
Last line is unnecessary, as resize will handle function value, and scroll will handle the execution.
You were missing a + or - within the background-position setting.
So for example, if the result of your Math.round() was "30", then Javascript would interpret that line as $(this).css('background-position', '40%30px'); which obviously would cause issues. I'm sure you wanted it to say something like $(this).css('background-position', '40% + 30px');.
I have multiple sections showing different backgrounds, each section has a basic parallax background image. As the backgrounds vary in height, I cannot seem to work out how to stop the background image position once the image bottom is reached.
Background position change begins if the section offset().top is equal to or greater than $(window).scrollTop().
It would seem that the btmOffset is incorrect but I can't see why.
Any help greatly appreciated.
Live example
http://demo.dwweb.co.uk
What I have so far
$window = $(window);
var winWid = $window.width();
$('.portfolioSection').each(function(){
var $bgobj = $(this);
var speed = 2.4;
var bg = $(this).css('background-image').replace('url("','').replace('")','');
var tmpImg = new Image();
tmpImg.src = bg;
var orgW = tmpImg.width;
var orgH = tmpImg.height;
var imgResizedRatio = winWid/orgW;
var resizedH = orgH * imgResizedRatio;
var btmOffset = (resizedH - $(this).height()) + $bgobj.offset().top;
$(window).scroll(function() {
if($(window).scrollTop() > $bgobj.offset().top && $(window).scrollTop() < btmOffset){
var yPos = -(($window.scrollTop()-$bgobj.offset().top) / speed);
var coords = '0 '+ yPos + 'px';
$bgobj.css({ backgroundPosition: coords });
} else if($(window).scrollTop() < $bgobj.offset().top) {
$bgobj.css({ backgroundPosition: '0 0' });
} else {
$bgobj.css({ backgroundPosition: '0 '+resizedH+'px' });
}
});
});
orgH and orgW will be 0 on execution, since you are creating a new Image asynchronously, while executing your code synchronously:
var tmpImg = new Image();
tmpImg.src = bg;
//...
This means, you would have to use the onload event (and maybe cover the onerror event too), like this:
tmpImg.onload = function(ev) {
var orgW = tmpImg.width;
var orgH = tmpImg.height;
//and the rest of your code...
}
This is very inefficient, since you are loading all these (big) images again.
I would add data-attributes to each .portfolioSection, like data-bgmaxscroll="1000" (which is the height of the image).
This would be a bit more hardcoded, but i think it's the easiest and the most performant way.
I'm trying to make a jquery thumbnail scroller with buttons that work on mousedown and mouseup events . I can do the scrolling but when i try to make a function out of it to use it again n again , it dont work . Here is my code for the scroller
var $wrapper = $('.my_ul');
var $div = $('.my_div');
var $ul = $('.my_ul');
function scrollRight()
{
var divLeft = $ul.css('marginLeft');
divLeft = Math.abs(parseInt(divLeft)) - 60;
var width = $div.width();
var ulwid = $ul.width();
var ulWidth = $ul.width() - width;
if(divLeft >= ulWidth){stopScrolling();}
else{
// contintually increase scroll position*/
$wrapper.animate({'margin-left' : '-=10'}, 1, scrollRight);}
}
function scrollLeft()
{
var divLeft = $ul.css('marginLeft');
divLeft = parseInt(divLeft);
if(divLeft >= 0){stopScrolling();}
else{
// contintually increase scroll position*/
$wrapper.animate({'margin-left' : '+=10'}, 1, scrollLeft);}
}
function stopScrolling()
{
// stop increasing scroll position
$wrapper.stop();
}
$('.scroll_right').mousedown(scrollRight).mouseup(stopScrolling);
$('.scroll_left').mousedown(scrollLeft).mouseup(stopScrolling);
I need to make a function using parameters but when i try that , it dont work . Moreover , The animation gets slow because of the recursive calls . If anyone have any better solutions , please let me know .
This should work:
function scrollingStuff($right, $left, $wrapper, $div, $ul) {
$right.mousedown(scrollRight).mouseup(stopScrolling);
$left.mousedown(scrollLeft).mouseup(stopScrolling);
... put functions here ...
}
Call it with the result of a jQuery selector for the elements.
scrollingStuff($(".scroll_right"), $(".scroll_left"), ...);
This would move twice as fast:
$wrapper.animate({'margin-left' : '+=20'}, 1, scrollLeft);}
I would use a little delay. This is 1/60 sec:
$wrapper.animate({'margin-left' : '+=10'}, 16, scrollLeft);}
I also think you can move this part out of the function and not call jQuery twice. It doesn't change during the scrolling or even after loading the div and the ul's:
var width = $div.width();
var ulwid = $ul.width();
var ulWidth = ulwid - width;