when not on mobile use the jquery - javascript

I have a jquery function for a fixed sidebar. but i only want to use the scrolling function for desktop. so if it's opened on a mobile phone i want him to do nothing. when i'm on desktop i want him to print this code:
<script type="text/javascript">
$(function() {
var offset = $("#sidebar").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
},200);
} else {
$("#sidebar").stop().animate({
marginTop: 0
},200);
};
});
});
</script>
I tried to do it like this, but this didn't work. then it will never go with you when you scroll down the page.
<script>
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
if(isMobile.any()){
document.write('')
} else {
document.write('<script type="text/javascript">
$(function() {
var offset = $("#sidebar").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
},200);
} else {
$("#sidebar").stop().animate({
marginTop: 0
},200);
};
});
});
</script>')
}</script>

Related

HTML input Search bar is not focusable when clicked by mouse but can only focus by TAB

The Search bar is not focusable when clicked by mouse but can only focus by TAB
The script i got it form here CODEPEN DEMO
The input search bar i used is given below
<input class="searchbar" id="searchbar" name="search" autocomplete="off" type="text" placeholder="Find a name for your idea"/>
I'm using this js scripts in the headers
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery‌​.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.mi‌​n.js"></script>
<script src="https://dl.dropboxusercontent.com/s/zkhrhwpagv1cxqg/jqu‌​ery.hammer.js"></scr‌​ipt>
I'm using this Javascript, which i think this is the problem maker!
I'm using scroll hijacking.
The only problem maker is this javascript given below.
If I removed this js It works perfect.
Please someone help me solve this behavior.
function l(o) {
console.log(o)
}
$(document).ready(function() {
var sections = $('.box').toArray();
var scroll = {
activeSection: 0,
sectionCount: sections.length - 1,
isThrottled: false,
throttleDuration: 1000,
target: $(sections[0]).position().top
}
function setSizes() {
for (var i = 0; i < sections.length; i++) {
$(sections[i]).css({
'top': window.innerHeight * i,
'height': window.innerHeight,
'width': window.innerWidth
});
}
}
setSizes();
$('body').on('resize', setSizes());
function downSection() {
var positionFromTop = $(sections[scroll.activeSection + 1]).position().top;
$("body, html").animate({
"scrollTop": positionFromTop
}, 300);
++scroll.activeSection;
}
function upSection() {
var positionFromTop = $(sections[scroll.activeSection - 1]).position().top;
$("body, html").animate({
"scrollTop": positionFromTop
}, 300);
--scroll.activeSection;
}
$("body").hammer({
preventDefault: true
}).on("swipe", function(event) {
if (event.gesture.direction == 'up') {
if (scroll.activeSection != sections.length - 1) {
downSection();
l('SWIPED UP');
}
} else if (event.gesture.direction == 'down') {
if (scroll.activeSection != 0) {
upSection();
l('SWIPED DOWN');
}
}
});
$(window).on('scroll', function(e) {
e.preventDefault();
});
$(window).on('mousewheel', function(event) {
event.preventDefault();
if (scroll.isThrottled) {
return;
}
scroll.isThrottled = true;
setTimeout(function() {
scroll.isThrottled = false;
}, scroll.throttleDuration);
if (event.originalEvent.wheelDelta > 0) {
if (scroll.activeSection === 0) return false;
upSection();
l('WHEELED DOWN');
} else {
if (scroll.activeSection >= scroll.sectionCount) return false;
downSection();
l('WHEELED UP');
}
});
$(window).keydown(function(e) {
if (e.keyCode == 40 && (scroll.activeSection != sections.length - 1)) {
downSection();
l('ARROW DOWN');
} else if (e.keyCode == 38 && (scroll.activeSection != 0)) {
upSection();
l('ARROW UP');
}
});
}); // end doc ready
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input class="searchbar" id="searchbar" name="search" autocomplete="off" type="text" placeholder="Find a name for your idea" />

How to make jquery script work after Ajax dom append?

Ye, i know about "on" method and most of answers here about "on" are not specific. Can someone help me with this code?
$(function(){
var pagePositon = 0,
sectionsSeclector = 'article#sector',
$scrollItems = $(sectionsSeclector),
offsetTolorence = 30,
pageMaxPosition = $scrollItems.length - 1;
//Map the sections:
$scrollItems.each(function(index,ele) { $(ele).attr("debog",index).data("pos",index); });
// Bind to scroll
$(window).bind('scroll',upPos);
//Move on click:
$(document).keypress(function(e) {
if (e.which == 100 && pagePositon+1 <= pageMaxPosition) {
pagePositon++;
$('html, body').stop().animate({
scrollTop: $scrollItems.eq(pagePositon).offset().top
}, 300);
}
if (e.which == 97 && pagePositon-1 >= 0) {
pagePositon--;
$('html, body').stop().animate({
scrollTop: $scrollItems.eq(pagePositon).offset().top
}, 300);
return false;
}
});
//Update position func:
function upPos(){
var fromTop = $(this).scrollTop();
var $cur = null;
$scrollItems.each(function(index,ele){
if ($(ele).offset().top < fromTop + offsetTolorence) $cur = $(ele);
});
if ($cur != null && pagePositon != $cur.data('pos')) {
pagePositon = $cur.data('pos');
}
}
});
When you press "d" or "a" it goes to next or prev with id="sector" and that's fine. But occasionally, after Ajax Call and after append of new articles, script can't move to them. I know that they are not binded (after dom refresh) and how to make that script work after Ajax dom change?
Solved:
$(function(){
var pagePositon = 0,
sectionsSeclector = 'article#sector',
$scrollItems = $(sectionsSeclector),
offsetTolorence = 30,
pageMaxPosition = $scrollItems.length - 1;
//Map the sections:
// Bind to scroll
//Move on click:
$(document).on('keypress', function(e) {
$scrollItems = $(sectionsSeclector);
pageMaxPosition = $scrollItems.length - 1;
$scrollItems.each(function(index,ele) { $(ele).attr("debog",index).data("pos",index); });
$(window).bind('scroll',upPos);
if (e.which == 100 && pagePositon+1 <= pageMaxPosition) {
pagePositon++;
$('html, body').stop().animate({
scrollTop: $scrollItems.eq(pagePositon).offset().top
}, 300);
}
if (e.which == 97 && pagePositon-1 >= 0) {
pagePositon--;
$('html, body').stop().animate({
scrollTop: $scrollItems.eq(pagePositon).offset().top
}, 300);
return false;
}
});
//Update position func:
function upPos(){
var fromTop = $(this).scrollTop();
var $cur = null;
$scrollItems.each(function(index,ele){
if ($(ele).offset().top < fromTop + offsetTolorence) $cur = $(ele);
});
if ($cur != null && pagePositon != $cur.data('pos')) {
pagePositon = $cur.data('pos');
}
}
});

Need help about this jQuery code

This code works perfectly but I need it to work when I open my browser. Also when I resize my browser to have mobile menu both functions work hover and toggle.
$(window).on('resize', function(event) {
var windowWidth = $(window).width();
if (windowWidth < 1024) {
$(document).ready(function() {
$(".menu-item-has-children").hover(function() {
$(".sub-menu").css("display", "block");
}, function() {
$(".sub-menu").css("display", "none");
});
});
} else if (windowWidth > 1024) {
jQuery(document).ready(function() {
$('.menu-item-has-children').click(function() {
$(this).find('.sub-menu').toggle();
});
});
}
});
My best approach will be replacing the code with:
var reszFn = function(event) {
var windowWidth = $(window).width();
if (windowWidth < 1024) {
$(document).ready(function() {
$(".menu-item-has-children").hover(function() {
$(".sub-menu").css("display", "block");
}, function() {
$(".sub-menu").css("display", "none");
});
});
} else if (windowWidth > 1024) {
jQuery(document).ready(function() {
$('.menu-item-has-children').click(function() {
$(this).find('.sub-menu').toggle();
});
});
}
};
$(document).on('ready', reszFn);
$(window).on('resize', reszFn);
Just trigger the resize function
$(window).on('resize', function(event) {
var windowWidth = $(window).width();
if (windowWidth < 1024) {
$(document).ready(function() {
$(".menu-item-has-children").hover(function() {
$(".sub-menu").css("display", "block");
}, function() {
$(".sub-menu").css("display", "none");
});
});
} else if (windowWidth > 1024) {
jQuery(document).ready(function() {
$('.menu-item-has-children').click(function() {
$(this).find('.sub-menu').toggle();
});
});
}
}).resize();

Callback function to add newly loaded images to a roll

Hi I'm working on a site with a infinite scroll script and am trying to figure out how to add a callback for Image Lightbox:
http://osvaldas.info/image-lightbox-responsive-touch-friendly
I've managed to get the images on the second page to work with image light box and have them styled with the same variables using this:
$(function () {
$('a[data-imagelightbox="d"]').imageLightbox({
onStart: function () {
overlayOn();
},
onLoadStart: function () {
captionOff();
activityIndicatorOn();
},
onLoadEnd: function () {
captionOn();
activityIndicatorOff();
},
onEnd: function () {
captionOff();
overlayOff();
activityIndicatorOff();
}
});
});
My problem is that while the images from "page two" can be viewed within the lightbox, they are not added to the gallery/roll for the user to cycle/navigate through. When the user views an image from "page two" and attempts to cycle through they can only view images from "page one".
Anyone know what script I should be using to get the images refreshed/added after infinite scroll loads more content? Thanks in advance!!
Here is the full js for the Image Lightbox:
var cssTransitionSupport = function () {
var s = document.body || document.documentElement,
s = s.style;
if (s.WebkitTransition == '') return '-webkit-';
if (s.MozTransition == '') return '-moz-';
if (s.OTransition == '') return '-o-';
if (s.transition == '') return '';
return false;
},
isCssTransitionSupport = cssTransitionSupport() === false ? false : true,
cssTransitionTranslateX = function (element, positionX, speed) {
var options = {}, prefix = cssTransitionSupport();
options[prefix + 'transform'] = 'translateX(' + positionX + ')';
options[prefix + 'transition'] = prefix + 'transform ' + speed + 's linear';
element.css(options);
},
hasTouch = ('ontouchstart' in window),
hasPointers = window.navigator.pointerEnabled || window.navigator.msPointerEnabled,
wasTouched = function (event) {
if (hasTouch) return true;
if (!hasPointers || typeof event === 'undefined' || typeof event.pointerType === 'undefined') return false;
if (typeof event.MSPOINTER_TYPE_MOUSE !== 'undefined') {
if (event.MSPOINTER_TYPE_MOUSE != event.pointerType) return true;
} else if (event.pointerType != 'mouse') return true;
return false;
};
$.fn.imageLightbox = function (options) {
var options = $.extend({
selector: 'id="imagelightbox"',
allowedTypes: 'png|jpg|jpeg|gif',
animationSpeed: 250,
preloadNext: true,
enableKeyboard: true,
quitOnEnd: false,
quitOnImgClick: false,
quitOnDocClick: true,
onStart: false,
onEnd: false,
onLoadStart: false,
onLoadEnd: false
},
options),
targets = $([]),
target = $(),
image = $(),
imageWidth = 0,
imageHeight = 0,
swipeDiff = 0,
inProgress = false,
isTargetValid = function (element) {
return $(element).prop('tagName').toLowerCase() == 'a' && (new RegExp('\.(' + options.allowedTypes + ')$', 'i')).test($(element).attr('href'));
},
setImage = function () {
if (!image.length) return true;
var screenWidth = $(window).width() * 0.8,
screenHeight = $(window).height() * 0.9,
tmpImage = new Image();
tmpImage.src = image.attr('src');
tmpImage.onload = function () {
imageWidth = tmpImage.width;
imageHeight = tmpImage.height;
if (imageWidth > screenWidth || imageHeight > screenHeight) {
var ratio = imageWidth / imageHeight > screenWidth / screenHeight ? imageWidth / screenWidth : imageHeight / screenHeight;
imageWidth /= ratio;
imageHeight /= ratio;
}
image.css({
'width': imageWidth + 'px',
'height': imageHeight + 'px',
'top': ($(window).height() - imageHeight) / 2 + 'px',
'left': ($(window).width() - imageWidth) / 2 + 'px'
});
};
},
loadImage = function (direction) {
if (inProgress) return false;
direction = typeof direction === 'undefined' ? false : direction == 'left' ? 1 : -1;
if (image.length) {
if (direction !== false && (targets.length < 2 || (options.quitOnEnd === true && ((direction === -1 && targets.index(target) == 0) || (direction === 1 && targets.index(target) == targets.length - 1))))) {
quitLightbox();
return false;
}
var params = {
'opacity': 0
};
if (isCssTransitionSupport) cssTransitionTranslateX(image, (100 * direction) - swipeDiff + 'px', options.animationSpeed / 1000);
else params.left = parseInt(image.css('left')) + 100 * direction + 'px';
image.animate(params, options.animationSpeed, function () {
removeImage();
});
swipeDiff = 0;
}
inProgress = true;
if (options.onLoadStart !== false) options.onLoadStart();
setTimeout(function () {
image = $('<img ' + options.selector + ' />')
.attr('src', target.attr('href'))
.load(function () {
image.appendTo('body');
setImage();
var params = {
'opacity': 1
};
image.css('opacity', 0);
if (isCssTransitionSupport) {
cssTransitionTranslateX(image, -100 * direction + 'px', 0);
setTimeout(function () {
cssTransitionTranslateX(image, 0 + 'px', options.animationSpeed / 1000)
}, 50);
} else {
var imagePosLeft = parseInt(image.css('left'));
params.left = imagePosLeft + 'px';
image.css('left', imagePosLeft - 100 * direction + 'px');
}
image.animate(params, options.animationSpeed, function () {
inProgress = false;
if (options.onLoadEnd !== false) options.onLoadEnd();
});
if (options.preloadNext) {
var nextTarget = targets.eq(targets.index(target) + 1);
if (!nextTarget.length) nextTarget = targets.eq(0);
$('<img />').attr('src', nextTarget.attr('href')).load();
}
})
.error(function () {
if (options.onLoadEnd !== false) options.onLoadEnd();
})
var swipeStart = 0,
swipeEnd = 0,
imagePosLeft = 0;
image.on(hasPointers ? 'pointerup MSPointerUp' : 'click', function (e) {
e.preventDefault();
if (options.quitOnImgClick) {
quitLightbox();
return false;
}
if (wasTouched(e.originalEvent)) return true;
var posX = (e.pageX || e.originalEvent.pageX) - e.target.offsetLeft;
target = targets.eq(targets.index(target) - (imageWidth / 2 > posX ? 1 : -1));
if (!target.length) target = targets.eq(imageWidth / 2 > posX ? targets.length : 0);
loadImage(imageWidth / 2 > posX ? 'left' : 'right');
})
.on('touchstart pointerdown MSPointerDown', function (e) {
if (!wasTouched(e.originalEvent) || options.quitOnImgClick) return true;
if (isCssTransitionSupport) imagePosLeft = parseInt(image.css('left'));
swipeStart = e.originalEvent.pageX || e.originalEvent.touches[0].pageX;
})
.on('touchmove pointermove MSPointerMove', function (e) {
if (!wasTouched(e.originalEvent) || options.quitOnImgClick) return true;
e.preventDefault();
swipeEnd = e.originalEvent.pageX || e.originalEvent.touches[0].pageX;
swipeDiff = swipeStart - swipeEnd;
if (isCssTransitionSupport) cssTransitionTranslateX(image, -swipeDiff + 'px', 0);
else image.css('left', imagePosLeft - swipeDiff + 'px');
})
.on('touchend touchcancel pointerup pointercancel MSPointerUp MSPointerCancel', function (e) {
if (!wasTouched(e.originalEvent) || options.quitOnImgClick) return true;
if (Math.abs(swipeDiff) > 50) {
target = targets.eq(targets.index(target) - (swipeDiff < 0 ? 1 : -1));
if (!target.length) target = targets.eq(swipeDiff < 0 ? targets.length : 0);
loadImage(swipeDiff > 0 ? 'right' : 'left');
} else {
if (isCssTransitionSupport) cssTransitionTranslateX(image, 0 + 'px', options.animationSpeed / 1000);
else image.animate({
'left': imagePosLeft + 'px'
}, options.animationSpeed / 2);
}
});
}, options.animationSpeed + 100);
},
removeImage = function () {
if (!image.length) return false;
image.remove();
image = $();
},
quitLightbox = function () {
if (!image.length) return false;
image.animate({
'opacity': 0
}, options.animationSpeed, function () {
removeImage();
inProgress = false;
if (options.onEnd !== false) options.onEnd();
});
};
$(window).on('resize', setImage);
if (options.quitOnDocClick) {
$(document).on(hasTouch ? 'touchend' : 'click', function (e) {
if (image.length && !$(e.target).is(image)) quitLightbox();
})
}
if (options.enableKeyboard) {
$(document).on('keyup', function (e) {
if (!image.length) return true;
e.preventDefault();
if (e.keyCode == 27) quitLightbox();
if (e.keyCode == 37 || e.keyCode == 39) {
target = targets.eq(targets.index(target) - (e.keyCode == 37 ? 1 : -1));
if (!target.length) target = targets.eq(e.keyCode == 37 ? targets.length : 0);
loadImage(e.keyCode == 37 ? 'left' : 'right');
}
});
}
$(document).on('click', this.selector, function (e) {
if (!isTargetValid(this)) return true;
e.preventDefault();
if (inProgress) return false;
inProgress = false;
if (options.onStart !== false) options.onStart();
target = $(this);
loadImage();
});
this.each(function () {
if (!isTargetValid(this)) return true;
targets = targets.add($(this));
});
this.switchImageLightbox = function (index) {
var tmpTarget = targets.eq(index);
if (tmpTarget.length) {
var currentIndex = targets.index(target);
target = tmpTarget;
loadImage(index < currentIndex ? 'left' : 'right');
}
return this;
};
this.quitImageLightbox = function () {
quitLightbox();
return this;
};
return this;
};
Firstly,
$(function () {
window.lightbox = $('a[data-imagelightbox="d"]').imageLightbox();
});
At the end of your "imagelightbox.js", Add the below code.
this.quitImageLightbox = function() {
quitLightbox();
return this;
};
this.loadImages = function(images_array) {
targets = images_array;
console.log(targets);
console.log(targets.length);
return this;
};
And when you get newly loaded images
windows.lightbox.loadImages(images_array)
and it should be working...!

Why do I get this JQuery error: $(".left_hand_icon").button is not a function

This is my jS code:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
<script src="js/mr_lp_minimizr.js"></script>
<script>
$(document).ready(function(){
if(!Modernizr.input.placeholder){
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
});
</script>
<script type="text/javascript">
jQuery.fn.extend({
slideRightShow: function(speed) {
return this.each(function() {
$(this).show('slide', {direction: 'right'}, +speed || 1000);
});
},
slideLeftHide: function(speed) {
return this.each(function() {
$(this).hide('slide', {direction: 'left'}, +speed || 1000);
});
},
slideRightHide: function(speed) {
return this.each(function() {
$(this).hide('slide', {direction: 'right'}, +speed || 1000);
});
},
slideLeftShow: function(speed) {
return this.each(function() {
$(this).show('slide', {direction: 'left'}, +speed || 1000);
});
}
});
$(document).ready(function () {
$("#slides :first-child").addClass("currentSlide");
$("#slides :not(:first-child)").hide();
$(".left_hand_icon").button().click(function () { //This is the line where issue is
currentSlide = $("#slides .currentSlide");
if(currentSlide.prev().prev().size() < 1) {
// The incoming slide is the first - disable Left button
$(".left_hand_icon").button("disable");
}
currentSlide.prev().addClass("currentSlide");
currentSlide.removeClass("currentSlide");
currentSlide.prev().slideLeftShow();
currentSlide.slideRightHide();
$(".right_hand_icon").button("enable");
}).button("disable");
$(".right_hand_icon").button().click(function () {
currentSlide = $("#slides .currentSlide");
if(currentSlide.next().next().size() < 1) {
// The incoming slide is the last - disable Right button
$(".right_hand_icon").button("disable");
}
currentSlide.next().addClass("currentSlide");
currentSlide.removeClass("currentSlide");
currentSlide.next().slideRightShow();
currentSlide.slideLeftHide();
$(".left_hand_icon").button("enable");
});
});
</script>
I add this comment to the line for which the error shows: //This is the line where issue is
You haven't included jQuery ui widget. There is where the button is.
http://api.jqueryui.com/category/widgets/

Categories

Resources