We Keep Coding

Disable Javascript Parallax Effect on Mobile

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();
}
});

If statement works on resize, not ready?

I am trying to accomplish two things:
The main content div will be dynamically sized to fit the exact height of the window. I accomplish that goal with this function:
$(document).on( 'ready', function() {
panelsResize();
$(window).on( 'resize', panelsResize );
});
function panelsResize() {
var screenHeight = $(window).height();
var screenWidth = $(window).width();
if (screenWidth > 768) {
$( ".panels" ).css( "height", screenHeight );
}
};
The class .panels is applied to the main content area.
This works swell.
I am trying to fill the .panels with the images in.large. These images need to retain aspect ratio while being scalable. I have based my code on this answer.
This works, but not on ready. I have to resize the screen, dropping below the media query that switches the display for .large to none. When I resize to the higher media query, switching display to block, the functionality works perfect.
Any ideas?
Here's the function (and markup):
$(document).on( 'ready', function() {
bgResize();
$(window).on( 'resize', bgResize );
});
function bgResize(){
$( '.large' ).each(function() {
var th = $(window).height(),//box height
tw = $(window).width(),//box width
im = $(this).children('img'),//image
ih = im.height(),//inital image height
iw = im.width();//initial image width
if ( iw < tw ) {
im.css( { "width" : "100%", "height" : "auto" } );
}
else if ( ih < th ) {
im.css( { "height" : "100%", "width" : "auto" } );
}
var nh = im.height(),//new image height
nw = im.width(),//new image width
hd = (nh-th)/2,//half dif img/box height
wd = (nw-tw)/2;//half dif img/box width
if (nh<nw) {
im.css({marginLeft: '-'+wd+'px', marginTop: 0});//offset left
} else {
im.css({marginTop: '-'+hd+'px', marginLeft: 0});//offset top
}
});
};
This is the HTML:
<ul id="homePanels">
<li id="cat1" class="panels">
<div class="large">
<img src="#" alt="" />
</div>
<div class="small">
<img src="#" alt="" />
</div>
</li>
</ul>
The CSS:
#homePanels {
list-style: none;
margin:0;
padding:0;
overflow: hidden;
}
.large {
width:100%;
height:100%;
}
#media (min-width: 768px) {
.large{display: block;}
.small{display:none}
}
#media (max-width: 768px) {
.small {display:block;}
.large {display:none;}
}

i think it will work if you use jQuery ready() function.
$(document).ready(function() {
bgResize();
$(window).on('resize', bgResize );
});

You just need to change
$(document).on( 'ready', function()
for
$(document).ready( function()

Thanks! I made the change to the ready event.
I realized that using the image's width and height were causing the issue, since I was grabbing, basically, two 0s. So, since I knew the aspect ratio of the images, I used that to scale the images on screen resize.
var screenHeight = $(window).height(),
screenWidth = $(window).width(),
aspectRatio = 0.57066014669927,
screenAspectRatio = screenHeight / screenWidth;
if ( screenAspectRatio < aspectRatio ){
$("img").css({"width" : "100%" , "height" : "auto"});
} else if ( screenAspectRatio > aspectRatio ){
$("img").css({"width" : "auto" , "height" : "100%"});
}
But it's solved now. Thanks for your help!

How to block all the events when the animation is not yet finished in jquery

I want users can't do anything when the animation is not yet finished. For example: can't drag it again.
Here is my javascript source code:
$( document ).ready(function() {
var top_ = $(".drag").position().top ;
$(".drag").draggable({
containment : "#box" ,
stop: function(){
$(this).stop(true,false).animate({
top : top_ ,
width : '100%'
},1500,'easeOutCirc');
},
drag: function(event, ui){
$(this).stop()
.css( "width", (100 - (ui.position.top / 10 ) + '%' ))
.css('float' , 'right');
}
});
});
HTML
<body>
<div id = "box" style= "width : 100% ; height :500px">
<div class = "drag" style= "border: 2px solid ; width : 100% ; height : 30px">
</div>
</div>
</body>
And JsFiddle:
http://jsfiddle.net/apss/CzkBu/102/
How to solve?

You can stop dragging following way while animating:
$( document ).ready(function() {
var top_ = $(".drag").position().top ;
$(".drag").draggable({
containment : "#box" ,
stop: function(){
$(this).stop(true,false).animate({
top : top_ ,
width : '100%'
},1500, function() {$('.drag').draggable('enable');});
$('.drag').draggable( 'disable' );
},
drag: function(event, ui){
$(this).stop()
.css( "width", (100 - (ui.position.top / 10 ) + '%' ))
.css('float' , 'right');
}
});
});
Check Fiddle here..
After that you can start dragging $('.drag').draggable( 'enable' ); after animation finished.
Hope it helps.

Angularizing: Vertically Centering Text in Textarea

I'm trying to replicate the functionality found in this codepen example.
Primarily, I'd like to include this code:
$( function() {
var $wrap = $('#wrap');
var $textarea = $('textarea');
var $dummy = $('.dummy');
function positionTextarea() {
var h = $wrap.height();
var top = Math.max( 0, ( h - $dummy.height() ) * 0.5 );
$textarea.css({
paddingTop: top,
height: h - top
});
}
$textarea.on( 'keyup change', function( event ) {
var html = formatDummyText( $textarea.val() );
$dummy.html( html );
positionTextarea();
}).trigger('change');
// should debounce this
$( window ).on( 'resize', positionTextarea );
});
in a directive. I'll have a textarea with a dummy div nearby with 0 opacity. What's the best way to include this functionality in a directive?

dynamic margin based on jQuery window.width()

I have a little problem with a jQuery function. I need to add a margin to some element when the window.width is < 580px and i need to remove it when the window.width is larger. Here is the problem, the first part of the function work well, not the second.
var Wwidth= $(window).width();
if ( Wwidth < 582) {
$( window ).resize(function() {
var nWwidth=$( document ).width();
var marginL = (nWwidth - 292)/2;
$('.hub-item').css('margin-left',marginL +'px');
});
}
else {
$( window ).resize(function() {
$('.hub-item').css('margin-left','0px');
});
}
I have no mystakes in the console but the margin are not to 0.
Thanks u all!
EDIT :
Correct code :
$(window).resize(function() {
var Wwidth= $(this).width();
if (Wwidth < 582) {
var nWwidth=$( window ).width();
var marginL = (nWwidth - 292)/2;
$('.hub-item').css('margin-left',marginL +'px');
}
else {
$('.hub-item').css('margin-left','0px');
}
});
Thanks all!

You need to put your if statement within the $(window).resize() function, and recalculate Wwidth every time:
$(window).resize(function() {
var Wwidth = $(this).width();
if (Wwidth < 582) {
...
}
else {
...
}
});