i want to check (on resize) the window width and then load a special part of a script. when the browser window is < 500px width i want to scroll to the top of the div (when clicking on a menu link) and when the browser window is > 500px i want to scroll to the vertical middle of the div when i click on a menu link. it somehow works but it's slow and buggy.
first i create the "resize" function
then i check the browser width
(function($){
// on load
$(window).resize(function(){
var current_width = $(window).width(); //check width
$('.go').click(function (e) {
if(current_width > 700){ // when min-width 700px than go to center of DIV
e.preventDefault();
var $box = $('.box').eq($(this).data('rel') - 1);
$('html, body').animate({
scrollTop: $box.offset().top - ($(window).height() - $box.outerHeight(true)) / 2 // scroll to verticall middle of div
}, 200);
}
else if(current_width < 700){ // when max-width 700px than go to top of DIV
e.preventDefault();
var $box = $('.box').eq($(this).data('rel') - 1);
$('html, body').animate({
scrollTop: $box.offset().top + 0 // scroll to top of div
}, 200);
}
});
});
})(jQuery);
when id do it with "document ready" everything works fine ... but "document resize" makes problems.
fiddle here
update - got it working this way:
$(".go").click(function(){
if ($(window).width() < 800) { // if window smaller than 800px
var $box = $('.box').eq($(this).data('rel') - 1);
$('html, body').animate({
scrollTop: $box.offset().top - 0
}, 200);
}
if ($(window).width() > 800) { // if window bigger than 800px
var $box = $('.box').eq($(this).data('rel') - 1);
$('html, body').animate({
scrollTop: $box.offset().top - ($(window).height() - $box.outerHeight(true)) / 2
}, 200);
}
});
It would be better to attach the event handlers like this:
var resizeTimeout; //the timeout prevents triggering the resize event more than once
$(function () {
$(window).resize(function () {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(resize, 500);
});
$('.go').click(function (e) {
});
});
function resize() {
if ($(window).width() > 700) {
} else {
}
}
Maybe a bad idea but you can try something like this in css:
#media screen and (min-width: 480px){
$("body").css({"position":"absolute", "top":"12px", "left":"12px"}); //Set your x and y
}
#media screen and (min-width: 768px){
$("body").css({"position":"absolute", "top":"22px", "left":"22px"}); //Set other stuff
}
No javascript needed :)
PS: NOT tested!
Related
Can anyone tell me how to disable my parallax effect on mobile? Thank you for your help in advance!
Here is my code:
$(document).scroll(function() {
var y = $(document).scrollTop(), header = $(".page-nav"); if(y >= 528)
{ header.css({position: "fixed", "top" : "0", "left" : "0"}); } else
{header.css("position", "relative"); } });
function EasyPeasyParallax() {
scrollPos = $(this).scrollTop();
$('.landing-page-hero').css({
'background-position' : '50% ' + (-scrollPos/4)+"px"
});
$('.hero-content').css({
'margin-top': (scrollPos/4)+"px",
'opacity': 1-(scrollPos/250)
});
}
$(document).ready(function(){
$(window).scroll(function() {
EasyPeasyParallax();
});
});
I'd recommend making use of window.matchMedia():
$(document).ready(function(){
var mq = window.matchMedia("(min-width: 600px)"); // Your desired breakpoint
if (mq.matches) {
$(window).scroll(function() {
EasyPeasyParallax(); // Only parallax on devices at least 600px wide
}
});
});
Hope this helps! :)
Grab the viewport width on load. Inside a scroll handler, check to make sure that the width is above mobile, and only call your EasyPeasyParallax() method if the width is greater than 768 (or whatever your breakpoint for mobile is).
var $vpwidth = $( window ).width();
$( window ).scroll(function() {
if ($vpwidth >= 768){
EasyPeasyParallax();
}
});
I'm trying to trigger the mousewheel to scroll left to right on desktop and top to bottom on window width below 768px.
This is what I've got so far:
jQuery(document).ready(function($) {
if( $(this).width() > 768 ) {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 40);
e.preventDefault();
});
}
$(window).resize(function() {
if( $(this).width() > 768 ) {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 40);
e.preventDefault();
});
}
});
});
Works fine when page loads but doesn't change when resized, so I guess there's something up with the resize part of the snippet.
Try making a function and then running that function each time on resize:
jQuery(document).ready(function($) {
function mouseScroll(){
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 40);
e.preventDefault();
});
}
if( $(window).width() > 768 ) {
mouseScroll();
}
$(window).resize(function() {
if( $(window).width() > 768 ) {
mouseScroll();
}
});
});
$(document).ready(function() {
$("#Wrapper").click(function () {
var th = $(this);
if (!th.hasClass('down')) {
console.log("ret");
th.addClass('down').stop(true).animate({
"top": "50px"
}, 1000, function() {
$('body').scrollTop(th.height());
});
} else {
console.log("sdffsdsff");
th.removeClass('down').stop(true).animate({
"top": "-400px"
}, 1000, function() {
$('body').scrollTop(th.scrollTop());
});
}
});
});
I have this jquery code for scroll from top to bottom and bottom to top when click on wrapper. this code works but i want this should scroll slowly from top top bottom and bottom to top when click on "wrapper" div
this is my original fiddle
http://jsfiddle.net/HtTXB/17/
how to do that? Thank you
Try this:
$("#Wrapper").click(function () {
var h= $(this).height(),
top= $(window).scrollTop(),
pos= top > h/2 ? 0 : h;
$('html, body').stop().animate({
scrollTop: pos
},1000);
});
scrollTop is set to 0 when the window is scrolled more than half-way, and it's set to the height of Wrapper when scrolled less than half-way.
Working Fiddle
I have 50 divs,But in my window it shows only 25,I do drag and drop activity on these divs.So If i drag my first div near 25th div,It should scroll automatically to show the remaining divs.How do i do this in jquery? any idea?
I am using Nestable not draggable()
This will need some fine tuning depending on your specific use case but it seems to work fairly well.
Working Example
$('.dd').nestable({ /* config options */
});
$(window).mousemove(function (e) {
var x = $(window).innerHeight() - 50,
y = $(window).scrollTop() + 50;
if ($('.dd-dragel').offset().top > x) {
//Down
$('html, body').animate({
scrollTop: 300 // adjust number of px to scroll down
}, 600);
}
if ($('.dd-dragel').offset().top < y) {
//Up
$('html, body').animate({
scrollTop: 0
}, 600);
} else {
$('html, body').animate({
});
}
});
Related API documentation:
.mousemove()
.innerHeight()
.scrollTop()
.offset()
.animate()
If you want to know bottom of window you can check
$(window).height()
and $(window).scrollTop();
I know this is an old topic but since this feature keeps in standby, I just improved apaul34208's code, hope it helps
$(window).mousemove(function (e) {
if ($('.dd-dragel') && $('.dd-dragel').length > 0 && !$('html, body').is(':animated')) {
var bottom = $(window).height() - 50,
top = 50;
if (e.clientY > bottom && ($(window).scrollTop() + $(window).height() < $(document).height() - 100)) {
$('html, body').animate({
scrollTop: $(window).scrollTop() + 300
}, 600);
}
else if (e.clientY < top && $(window).scrollTop() > 0) {
$('html, body').animate({
scrollTop: $(window).scrollTop() - 300
}, 600);
} else {
$('html, body').finish();
}
}
});
A bit of an improvement on Mencey's code. A caveat it might have is that it's based on an interval fired every 16 milliseconds instead of mousemove(). I don't know how taxing this may be, so feel free to increase the number of milliseconds or fire a clearInterval at some point. The benefit from this is the scrolling is continuous, instead of having to wiggle the mouse as 1j01 pointed out.
You may also change the speed and zone variables, zone being an area in pixels at the top and the bottom of the window where you can drag the item. As you get closer to the top or the bottom of the window, the scrolling speed goes up as it compares the distance between the position of the mouse and the actual edge of the window, giving some control to the user on the scrolling speed.
var mouseY;
var speed = 0.15;
var zone = 50;
$(document).mousemove(function(e){
mouseY = e.pageY - $(window).scrollTop();
}).mouseover();
var dragInterval = setInterval(function(){
if ($('.dd-dragel') && $('.dd-dragel').length > 0 && !$('html, body').is(':animated')) {
var bottom = $(window).height() - zone;
if (mouseY > bottom && ($(window).scrollTop() + $(window).height() < $(document).height() - zone)) {
$('html, body').animate({scrollTop: $(window).scrollTop() + ((mouseY + zone - $(window).height()) * speed)},0);
}
else if (mouseY < zone && $(window).scrollTop() > 0) {
$('html, body').animate({scrollTop: $(window).scrollTop() + ( (mouseY - zone) * speed) },0);
} else {
$('html, body').finish();
}
}
},16);
i have div.triangle on my page at opacity 0
i want it to fade into opacity .95 once the bottom of the page is hit
then after that, i want it to scroll to the top of $(".container") once $(".triangle") is clicked again
i have this so far, i think i've got most of it right other than the event?
<script type="text/javascript">
$(document).ready(function(){
$(".container").scroll(function(){
var currentPosition = $(document).scrollTop();
var totalHeight = $(document).offsetHeight;
var visibleHeight = $(document).clientHeight;
if (visibleHeight + currentPosition >= totalHeight){
$(".triangle").fadeTo("slow",.95);
}
});
$(".triangle").click(function(){
$(".container").animate({scrollTop:0}, 'slow');
$(".triangle").fadeTo("slow",0);
});
});
</script>
try this:
$(document).ready(function(){
var bottom = ($(window).outerHeight() - $(window).height()) - 50; // 50 pixel to the bottom of the page;
$(window).scroll(function(){
if ($(window).scrollTop() >= bottom ) {
$(".triangle").fadeTo("slow",.95);
} else {
$(".triangle").fadeOut("slow");
}
});
$(".triangle").click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
$(".triangle").fadeOut("slow");
});
});