jQuery scrollTop only working while scrolling with mouse - javascript

I have a navigationbar that decreases in size when I scroll down on the page and then it takes its normal size when scroll is at the top. It all works fine when scrolling with the mousescrollwheel, but when I manually click and drag the scrollbar on the page its as if it doesnt recognise the scrollTop value. It takes approx 5 seconds or so for it to realise that its on the top and then applies the style, whereas with the mousescrollwheel it works flawlessly.
$(window).scroll(function () {
var scrollPosition = $(document).scrollTop();
if (scrollPosition > "1") {
$("#topNav").animate({
height: "30px"
}, 90, function () {
});
$("#topNav li").animate({
padding: "5px 0 0 0"
}, 90, function () {
});
} else if (scrollPosition <= "1") {
$("#topNav").animate({
height: "50px"
}, 90, function () {
});
$("#topNav li").animate({
padding: "15px 0 0 0"
}, 90, function () {
});
}
});
What am I missing?

Please try this code:
$(window).on('scroll mousedown mouseup mousemove',function(){
var scrollPosition = $(document).scrollTop();
if (scrollPosition > "1") {
$("#topNav").animate({
height: "30px"
}, 90, function () {
});
$("#topNav li").animate({
padding: "5px 0 0 0"
}, 90, function () {
});
} else if (scrollPosition <= "1") {
$("#topNav").animate({
height: "50px"
}, 90, function () {
});
$("#topNav li").animate({
padding: "15px 0 0 0"
}, 90, function () {
});
}
})

From what i can see, scroll function is called whenever your mouse is over the scroll bar, even without click/drag event. It might be this is causing you the trouble.
Fiddle here
$(window).scroll(function () {
var scrollPosition = $(document).scrollTop();
if (scrollPosition > "1") {
alert('a');
} else if (scrollPosition <= "1") {
alert('a');
}
});

I gave up and decided to go with CSS classes instead, using transitions and it worked wonders. Now what the scroll does is just add and remove class to the li elements and nav. Thansk for all the answers!

Related

ScroolToTop show and hide based on user's scroll

How can show and hide a dive of scrolltotop.
Condition:
1. when user scrool down to 80 px it will be shown
2.if user clicks on it it it will take user to the top.
3. if a user stay 2 or more seconds in a certain position(it may maby 200px or more or less), the scroolbar also hidden. If he scroll up or down, the scroolbar visible then.
$(document).ready(function () {
$("#scrollup").hide('slow')
$(window).scroll(function (e) {
e.preventDefault();
if ($(window).scrollTop() > 80) {
$("#scrollup").show('slow');
}
if ($(window).scrollTop() < 80) {
$("#scrollup").hide('slow');
}
});
$(".scrollup").click(function () {
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});
i have done 1 and 2 condition , but how can i implement no 3?
Add setInterval(function(){ $("#scrollup").hide('slow'); }, 2000); and clear it on scroll
var idleInterval=null;
$(document).ready(function () {
$("#scrollup").hide('slow');
$(window).scroll(function (e) {
if(idleInterval != null)
clearTimeout(idleInterval);
idleInterval = setInterval(function(){ $("#scrollup").hide('slow'); }, 2000);
idleTime = 0;
e.preventDefault();
if ($(window).scrollTop() > 80) {
$("#scrollup").show('slow');
}
if ($(window).scrollTop() < 80) {
$("#scrollup").hide('slow');
}
});
$(".scrollup").click(function () {
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});
Demo:-
var idleInterval=null;
$(document).ready(function () {
$("#scrollup").hide('slow');
$(window).scroll(function (e) {
if(idleInterval != null)
clearTimeout(idleInterval);
idleInterval = setInterval(function(){ $("#scrollup").hide('slow'); }, 2000);
idleTime = 0;
e.preventDefault();
if ($(window).scrollTop() > 80) {
$("#scrollup").show('slow');
}
if ($(window).scrollTop() < 80) {
$("#scrollup").hide('slow');
}
});
$(".scrollup").click(function () {
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});
#pagewrap{
height:1000px;
}
#scrollup {
position: fixed;
color: white;
padding: 10px 30px;
background: red;
bottom: 30px;
right: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pagewrap">
<h1>Demo</h1>
<h2>Animated Scroll to Top</h2>
<div id="scrollup">
scroll to top
</div>
</div>

Make cursor go transparent on timer (0.5)

Here's the code, but instead of it completely disappears, is there some way to make it go 0.5 opacity? Help on this would be much appreciated.
$(function () {
var timer;
var fadeInBuffer = false;
$(document).mousemove(function () {
if (!fadeInBuffer) {
if (timer) {
console.log("clearTimer");
clearTimeout(timer);
timer = 0;
}
console.log("fadeIn");
$('.fade-object').fadeIn();
$('html').css({
cursor: ''
});
} else {
fadeInBuffer = false;
}
timer = setTimeout(function () {
console.log("fadeout");
$('.fade-object').fadeOut()
$('html').css({
cursor: 'none'
});
fadeInBuffer = true;
}, 2000)
});
});
You can use fadeTo(). Hope this helps.
$(function () {
var timer;
var fadeInBuffer = false;
$(document).mousemove(function () {
if (!fadeInBuffer) {
if (timer) {
clearTimeout(timer);
timer = 0;
}
$('.fade-object').fadeTo('slow', 1);
$('html').css({
cursor: ''
});
} else {
fadeInBuffer = false;
}
timer = setTimeout(function () {
$('.fade-object').fadeTo('slow', 0.5)
$('html').css({
cursor: 'none'
});
fadeInBuffer = true;
}, 2000)
});
});
.fade-object{
height: 300px;
background: red;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fade-object"></div>
** UPDATED **
Try using setInterval instead of setTimeout, and vary from 10 to 0 to disapear and from 0 to 10 to reapear (according to filenames).
Do this by changing trhough custom png cursors with alfas from 0 to 100 in 10 phases.
Here are some images I prepared: , , , , , , , , , , << last one is 0%
Remember that your cursor (mouse pointer) WON'T change its custom image IF it is NOT moving **, so .. you will need to translate cursor at least 10px programatically while iterating trhough the 10 images.
** UPDATE 2 **
Here you can feel the idea.
//codepen.io/jjyepez/pen/xEQAXZ
PS (forget about translating cursor .. it is not necessary whatsoever)

calling functions and click animations

I have one rectangle, 2 functions that animates different this rectangle at different window widths, and im calling the functions with a click. it Must work when screen resizes as well.
Problems:
1- it seems like when I load one function then the other cant work, only the first.
2- It doesn't work on the first click.
3- I have to write the same code for when the document is ready and when the document resize.
How can I fix this 3 points. thx. code below.
$(document).ready(function () {
function lateralMove() {
$(".rectangle-1").off("click").click(function () {
$(this).animate({
left: "+=50"
}, 500);
})
}
function horizontalMove() {
$(".rectangle-1").off("click").click(function () {
$(this).animate({
top: "+=50"
}, 500);
})
}
$(window).resize(function () {
screenWidth = $(this).width()
})
$(".rectangle-1").click(function () {
if (screenWidth > 300) {
lateralMove()
} else if (screenWidth <= 300) {
horizontalMove()
}
})
screenWidth = $(window).width()
if (screenWidth > 300) {
blackMove()
} else if (screenWidth <= 300) {
horizontalMove()
}
})
.rectangle-1 {
position: relative;
background-color: #000;
height: 100px;
width: 100px;
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!doctype html>
<html>
<head></head>
<body>
<div>
<div class="rectangle-1"></div>
</div>
</body>
</html>
just cal a different function depending n a screen width:
function do_mobile(){
//do
}
function do_desktop(){
//do
}
$(".rectangle-1").on("click", function(){
if( $(window).width() > 300 ){
do_desktop();
}
else{
do_mobile();
}
})
This was just a matter of cleaning up your code (you had a function call to a function called blackMove() that was undefined) and you also needed to wrap the "assign movement" portion of your code in a function and call it on document ready and on window resize.
Here's the code pen:
http://codepen.io/nhmaggiej/full/azXgqw/
$(document).ready(function () {
function verticalMove() {
$(".rectangle-1").off("click").click(function () {
$(this).animate({
left: "+=50"
}, 500);
})
}
function horizontalMove() {
$(".rectangle-1").off("click").click(function () {
$(this).animate({
top: "+=50"
}, 500);
})
}
function assignMovement() {
screenWidth = $(this).width()
if (screenWidth > 600) {
verticalMove()
} else if (screenWidth <= 600) {
horizontalMove()
}
};
$(window).resize(function () {
assignMovement();
})
assignMovement();
});
This will move the square onload, onresize and when the square is clicked.
jsFiddle
function lateralMove(elementX) {
elementX.animate({
left: "+=50"
}, 500);
}
function horizontalMove(elementX) {
elementX.animate({
top: "+=50"
}, 500);
}
function elementMove() {
screenWidth = $(window).width();
elementX = $(".rectangle-1");
if (screenWidth > 300) {
lateralMove(elementX);
} else if (screenWidth <= 300) {
horizontalMove(elementX);
}
}
//move on resize
//Use a Timeout to ensure that the resize event is only fired once per change.
$(window).resize(function () {
clearTimeout(this.id);
this.id = setTimeout(elementMove, 500);
});
//move on click
$(".rectangle-1").click(function () {
elementMove();
})
//move on load
elementMove();

A close button for Lightbox_me

I've googled for a script for a close button for Lightbox_me, however all I've been able to find are scripts for bare-bones lightboxes.
(function ($) {
$.fn.lightbox_me = function (options) {
return this.each(function () {
var
opts = $.extend({}, $.fn.lightbox_me.defaults, options),
$overlay = $(),
$self = $(this),
$iframe = $('<iframe id="foo" style="z-index: ' + (opts.zIndex + 1) + ';border: none; margin: 0; padding: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; filter: mask();"/>');
if (opts.showOverlay) {
//check if there's an existing overlay, if so, make subequent ones clear
var $currentOverlays = $(".js_lb_overlay:visible");
if ($currentOverlays.length > 0) {
$overlay = $('<div class="lb_overlay_clear js_lb_overlay"/>');
} else {
$overlay = $('<div class="' + opts.classPrefix + '_overlay js_lb_overlay"/>');
}
}
/*----------------------------------------------------
DOM Building
---------------------------------------------------- */
$('body').append($self.hide()).append($overlay);
/*----------------------------------------------------
Overlay CSS stuffs
---------------------------------------------------- */
// set css of the overlay
if (opts.showOverlay) {
setOverlayHeight(); // pulled this into a function because it is called on window resize.
$overlay.css({
position: 'absolute',
width: '100%',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: (opts.zIndex + 2),
display: 'none'
});
if (!$overlay.hasClass('lb_overlay_clear')) {
$overlay.css(opts.overlayCSS);
}
}
/*----------------------------------------------------
Animate it in.
---------------------------------------------------- */
//
if (opts.showOverlay) {
$overlay.fadeIn(opts.overlaySpeed, function () {
setSelfPosition();
$self[opts.appearEffect](opts.lightboxSpeed, function () {
setOverlayHeight();
setSelfPosition();
opts.onLoad()
});
});
} else {
setSelfPosition();
$self[opts.appearEffect](opts.lightboxSpeed, function () {
opts.onLoad()
});
}
/*----------------------------------------------------
Hide parent if parent specified (parentLightbox should be jquery reference to any parent lightbox)
---------------------------------------------------- */
if (opts.parentLightbox) {
opts.parentLightbox.fadeOut(200);
}
/*----------------------------------------------------
Bind Events
---------------------------------------------------- */
$(window).resize(setOverlayHeight)
.resize(setSelfPosition)
.scroll(setSelfPosition);
$(window).bind('keyup.lightbox_me', observeKeyPress);
if (opts.closeClick) {
$overlay.click(function (e) {
closeLightbox();
e.preventDefault;
});
}
$self.delegate(opts.closeSelector, "click", function (e) {
closeLightbox();
e.preventDefault();
});
$self.bind('close', closeLightbox);
$self.bind('reposition', setSelfPosition);
/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*----------------------------------------------------
Private Functions
---------------------------------------------------- */
/* Remove or hide all elements */
function closeLightbox() {
var s = $self[0].style;
if (opts.destroyOnClose) {
$self.add($overlay).remove();
} else {
$self.add($overlay).hide();
}
//show the hidden parent lightbox
if (opts.parentLightbox) {
opts.parentLightbox.fadeIn(200);
}
if (opts.preventScroll) {
$('body').css('overflow', '');
}
$iframe.remove();
// clean up events.
$self.undelegate(opts.closeSelector, "click");
$self.unbind('close', closeLightbox);
$self.unbind('repositon', setSelfPosition);
$(window).unbind('resize', setOverlayHeight);
$(window).unbind('resize', setSelfPosition);
$(window).unbind('scroll', setSelfPosition);
$(window).unbind('keyup.lightbox_me');
opts.onClose();
}
/* Function to bind to the window to observe the escape/enter key press */
function observeKeyPress(e) {
if ((e.keyCode == 27 || (e.DOM_VK_ESCAPE == 27 && e.which == 0)) && opts.closeEsc) closeLightbox();
}
/* Set the height of the overlay
: if the document height is taller than the window, then set the overlay height to the document height.
: otherwise, just set overlay height: 100%
*/
function setOverlayHeight() {
if ($(window).height() < $(document).height()) {
$overlay.css({
height: $(document).height() + 'px'
});
$iframe.css({
height: $(document).height() + 'px'
});
} else {
$overlay.css({
height: '100%'
});
}
}
/* Set the position of the modal'd window ($self)
: if $self is taller than the window, then make it absolutely positioned
: otherwise fixed
*/
function setSelfPosition() {
var s = $self[0].style;
// reset CSS so width is re-calculated for margin-left CSS
$self.css({
left: '50%',
marginLeft: ($self.outerWidth() / 2) * -1,
zIndex: (opts.zIndex + 3)
});
/* we have to get a little fancy when dealing with height, because lightbox_me
is just so fancy.
*/
// if the height of $self is bigger than the window and self isn't already position absolute
if (($self.height() + 80 >= $(window).height()) && ($self.css('position') != 'absolute')) {
// we are going to make it positioned where the user can see it, but they can still scroll
// so the top offset is based on the user's scroll position.
var topOffset = $(document).scrollTop() + 40;
$self.css({
position: 'absolute',
top: topOffset + 'px',
marginTop: 0
})
} else if ($self.height() + 80 < $(window).height()) {
//if the height is less than the window height, then we're gonna make this thing position: fixed.
if (opts.centered) {
$self.css({
position: 'fixed',
top: '50%',
marginTop: ($self.outerHeight() / 2) * -1
})
} else {
$self.css({
position: 'fixed'
}).css(opts.modalCSS);
}
if (opts.preventScroll) {
$('body').css('overflow', 'hidden');
}
}
}
});
};
$.fn.lightbox_me.defaults = {
// animation
appearEffect: "fadeIn",
appearEase: "",
overlaySpeed: 250,
lightboxSpeed: 300,
// close
closeSelector: ".close",
closeClick: true,
closeEsc: true,
// behavior
destroyOnClose: false,
showOverlay: true,
parentLightbox: false,
preventScroll: false,
// callbacks
onLoad: function () {},
onClose: function () {},
// style
classPrefix: 'lb',
zIndex: 999,
centered: true,
modalCSS: {
top: '100px'
},
overlayCSS: {
background: 'black',
opacity: .3
}
}
$('.trigger').click(function (e) {
$('.lightbox').lightbox_me();
e.preventDefault();
});
})(jQuery);
This is the jsfiddle with the script for Lightbox_me.
I tried to incorporate the close-button scripts for the bare-bones lightboxes into Lightbox_me, but I simply don't know where to start. Would I have to format a close button onto each of the lightboxed divs individually and simply bind closeLightbox();? Or is there a more elegant way to do it involving only the script?
By default the script has these defined:
$.fn.lightbox_me.defaults = {
// animation
appearEffect: "fadeIn",
appearEase: "",
overlaySpeed: 250,
lightboxSpeed: 300,
// close
closeSelector: ".close",
closeClick: true,
closeEsc: true,
// behavior
destroyOnClose: false,
showOverlay: true,
parentLightbox: false,
preventScroll: false,
// callbacks
onLoad: function () {},
onClose: function () {},
// style
classPrefix: 'lb',
zIndex: 999,
centered: true,
modalCSS: {
top: '100px'
},
overlayCSS: {
background: 'black',
opacity: .3
}
}
You'll notice in the close section that it defaults to looking for elements with the class "close".
So if you stick a div with that class inside your lightbox, style as you please then it will trigger the close action.
The logic for closing based on the script:
if (opts.closeClick) {
$overlay.click(function (e) {
closeLightbox();
e.preventDefault;
});
}
$self.delegate(opts.closeSelector, "click", function (e) {
closeLightbox();
e.preventDefault();
});
This part of the logic informs lightbox_me that if closeClick is true within the list of options passed to it, that it will setup clicks on the overlay to close the lightbox.
As well it will bind current and future elements with the value defined in opts.closeSelector to also initiate the closeLightbox function when clicked.
Simple example fiddle: http://jsfiddle.net/zn2hg7L8/1/

JQuery smooth animation

I have this animation that makes some buttons on screen 'beat'. It works fine exept one thing, the animation is too 'sharp' and not smooth, how can I smooth it?
function myFunction() {
setInterval(function () {
tstFnc();
}, 1000);
}
var flag = true;
function tstFnc() {
var numM = Math.floor((Math.random() * 10) + 1);
var stringM = '#mgf_main' + numM + ' img';
$(stringM).animate({
width: '80px',
height: '80px'
}, 150, function () {
$(stringM).animate({
width: '68px',
height: '68px'
}, 150, function () {
// nothing
});
});
};
You can set the easing property on the animate options.
http://api.jquery.com/animate/
http://easings.net/
Try this here, animatethis is a function and target element is the id of element and speed is depend on you.. and marginleft is a example, you should try your code.
function animatethis(targetElement, speed) {
$(targetElement).animate({ width: "+=10px", height: "+=10px"},
{
duration: speed,
complete: function () {
targetElement.animate({width: "+=10px", height: "+=10px" },
{
duration: speed,
complete: function () {
animatethis(targetElement, speed);
}
});
}
});
}

Categories

Resources