I have a responsive site where I'm using a javascript to create a sticky sidebar.
I'm also using media queries to change from a multi-column layout to a single-column layout when the browser size is less than 768px.
I need to figure out how to disable the sticky menu script in the single-column layout. Essentially, I need something like a media query for the script statement.
This is the code I'm using to enable the script:
<script>
jQuery('#info').containedStickyScroll({
duration: 0,
unstick: false
});
</script>
Is there something I can add to it to only have it trigger if the window is 768px wide or wider?
EDIT: I'm looking for a solution that will work if the user resizes the window on the fly.
Try this.
$(function(){
$(window).resize(function(){
if($(this).width() >= 768){
jQuery('#info').containedStickyScroll({
duration: 0,
unstick: false
});
}
})
.resize();//trigger resize on page load
});
Try this code:
var height = $(window).height(); //I'm assuming you mean height, you can try .width() if yo u need it
if (height < 768) {
jQuery('#info').containedStickyScroll({
duration: 0,
unstick: false
});
}
Hope that helps.
Check this out:
var targetWidth = 768;
if ( $(window).width() >= targetWidth) {
//Add your javascript for screens wider than or equal to 768 here
jQuery('#info').containedStickyScroll({
duration: 0,
unstick: false
});
}
else {
//Add your javascript for screens smaller than 768 here
console.log(`am less than ${targetWidth}`)
}
Related
I have roughly around 50 video thumbnails on a set page.
I would like to resize them depending on the resolution.
What I have tried was using #media query in css that did not work as expected then I moved over to this.
$(document).ready(function(event) {
var width = $(window).width();
// Change thumbnail size if browser width changes (should be in real-time)
if (width <= 1300) {
console.log(width);
$('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
} else {
$('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
}
});
After inserting that script the video thumbnail size changes but as I adjust the browser the jQuery does not load and resize the thumbnail unless the page is refreshed ?
Im not sure as to why the jQuery is not loading the script in real time as the size (browser) changes.
Languages that I am using in this project : PHP, jQuery
you need to catch window resize event with jQuery and also write your code there.
$(window).resize(function() {
var width = $(window).width();
// Change thumbnail size if browser width changes (should be in real-time)
if (width <= 1300) {
console.log(width);
$('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
} else {
$('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
}
});
To reduce code repetition you can make a function and call it in both $(window).resize() and $(document).ready()
function onResize() {
var width = $(window).width();
if (width <= 1300) {
$('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
} else {
$('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
}
}
$(document).ready(onResize);
$(window).resize(onResize);
This should work, but it would be much better if it were done with css. Would love you help you with that if you want to post what you tried. If you do it with css, you will not have the jumping on the page that'll occur when the js loads and changes those classes in and out.
You can do smth like this.
Note: this is untested code
function updateSizes(){
var width = $(window).width();
if (width <= 1300) {
$('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
} else {
$('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
}
}
$(document).ready(function(event) {
updateSizes();
// do other stuff here
});
$( window ).resize(function() {
updateSizes();
// do other stuff here
});
I have an animation where three images rotate up and down. JSfiddle: http://jsfiddle.net/rLgkyzgc/1/
$(window).load(function() {
// Load images in BG that have been hidden by CSS
$('.banners').show();
// Create an empty array
var banners = [];
// Fill array with banner ids
$('.banners').each(function () {
var banner = $(this).attr('id');
banners.push(banner);
});
function switchBanners(){
var $firstBanner = $('#' + banners[0]);
var $secondBanner = $('#' + banners[1]);
var firstBannerHeight = $firstBanner.height();
var secondBannerHeight = $secondBanner.height();
$firstBanner.animate({ bottom: -firstBannerHeight }, 1200);
$secondBanner.animate({ bottom: 0 }, 1200, function(){
b = banners.shift(); banners.push(b);
setTimeout(function(){
switchBanners();
}, 4000);
});
};
// Delay initial banner switch
setTimeout(function(){
switchBanners();
}, 4000);
});
This is great for the desktop view, but on mobile, I want to stop the animation and just show one static image.
So my questions. How can I :
Only start the animation on page load if the window width is > 940px
Stop (reset) the animation if the page is resized to be < 940px wide
THEN restart the animation if the page resized to be > 940px wide
You should use window.matchMedia (see the documentation) to detect the viewport size on document.ready and when the window is resized, so something like this:
function resetAnimation() {
$firstBanner.stop(true, true);
$secondBanner.stop(true, true);
if(window.matchMedia("(min-width: 940px)").matches) {
//Start the animations here
}
}
$(document).ready(function() {
resetAnimation();
}
$(window).resize(function() {
resetAnimation();
}
Note that you don't really need to stopthe animations on document.ready, but this way you have a single function to reset the animations and then restart them only if necessary, which is something you typically want to do every time you resize the browser window, regardless of the viewport size.
I'll reference these in order:
1. Only start the animation on page load if the window width is > 940px
In your window load function, grab your browser width with $(window).width(). Then check that against your 940 (leave off the "px"), and perform necessary actions.
So:
if ($(window).width() > 940){ *actions* }
2. Stop (reset) the animation if the page is resized to be < 940px wide
To do this, you'll need to use the window resize function ($(window).resize()) and check your 940 against the browser width.
So:
$(window).resize(function(){
if ($(window).width() <= 940){
*stop (reset) animation*
}
});
3. THEN restart the animation if the page resized to be > 940px wide
This logic is essentially the same as #2, just reversed:
$(window).resize(function(){
if ($(window).width() > 940){
*restart animation*
}
});
We have following code (addition, the presence of the plugin DataTables)
$('#myTable').dataTable( {
"scrollY": height, <-- auto height here
"scrollCollapse": true,
} );
I dont' know so well jquery and I have a problem with the automatic changing values.
I have a div element where the height is a percentage (for example: 50%) and
and I want to get this height in pixels. Ofcourse the height is changing as many times as the browser window is changed.
Unfortunately, I don't know how to do, Someone here can help? (preferably an example)
Update 1:
I tried so like that
var ch = $('#dataTableWrapper').height() - 110; // I subtracted the value of the height of my static elements in a div
$('#dataTableID').dataTable( {
"scrollY": ch,
"scrollCollapse": true,
} );
$(window).resize(function(){
ch = $('#dataTableWrapper').height() - 110; // same as above
$('.dataTables_scrollBody').css('height', ch);
});
Apparently it works, but if anyone had a more elegant solution I would ask about throwing code.
You can do like this:
$( window ).resize(function() {
var scroll = $("#yourDiv").height();
});
This might be a dumb thing to suggest, but are you just looking for a simple refactoring?
function getTableHeight() {
return $('#dataTableWrapper').height() - 110;
}
$('#dataTableID').dataTable( {
"scrollY": getTableHeight(),
"scrollCollapse": true,
} );
$(window).resize(function(){
$('.dataTables_scrollBody').css('height', getTableHeight());
});
I have a slide script where you can set the ammount of visible images and need to change the ammount when I reach a browser size.
When browser width is smaller than 768px show 4 items.
Is this possible to combine below 2 scripts?
FIDDLE
Slider script:
$('.logo-slide').wmuSlider({
touch: Modernizr.touch,
animation: 'slide',
items: 5
});
Browser width script:
$(window).resize(function() {
if ($(window).width() < 767) {
$(".nav-wide").hide();
}
else {
$(".nav-wide").show();
}
});
I try to combine these like below script, but it doesn't work
$(window).resize(function() {
if ($(window).width() < 768) {
$('.logo-slide').wmuSlider({
items: 4
});
}
else {
$('.logo-slide').wmuSlider({
items: 5
});
}
});
Your window.width and resize methods are spot on for detecting the different screen sizes.
The jquery plugin is probably developed to be called only once on page load.
A plugin like this might be a better option where you can have minimum and maximum item numbers?
http://www.woothemes.com/flexslider/ (see // Carousel Options minItems and maxItems)
Try CSS3
#media screen and (max-width: 767px) {
.logo-slide { display: none; }
}
I'm using jQuery to add some make some elements on a page transition (via the jQuery Transit plugin) when hovered upon. Since I'm trying to design responsively, I want these transitions to only happen when the browser is a certain size or larger.
I've written the following code as an attempt to do this:
$(document).ready(function(){
var $window = $(window);
var $logo = $('.logo');
function checkWidth() {
windowsize = $window.width();
}
checkWidth();
$(window).resize(checkWidth);
if (windowsize >= 768) {
$logo.hoverIntent(
function(){
$logo.transition({
perspective: '600px',
rotateY: '-10deg'
});
},
function(){
$logo.transition({
perspective: '600px',
rotateY: '0deg'
});
}
);
}
});
If I load the page in a large browser, it works as expected--the hover effect is active. If I resize the browser, making it smaller (past the breakpoint) and refresh, then it works--the hover effect is disabled. But if I resize the window without refreshing in between, then the effect doesn't respond--it either remains disabled (if resizing from a small to a large screen) or active (if resizing from large to small).
It's a minor quirk, to be sure, but I can't exactly figure out why it's happening. As far as I can tell, when the window resizes, it should be updating the windowsize variable, which should be checked in the if statement. What am I overlooking that makes this not the case?
All checkWidth currently does is assign a value to windowsize. You need to move the code that actually reads windowsize into checkWidth.
$(document).ready(function(){
var $window = $(window);
var $logo = $('.logo');
function checkWidth() {
windowsize = $window.width();
if (windowsize >= 768) {
$logo.hoverIntent(
function(){
$logo.transition({
perspective: '600px',
rotateY: '-10deg'
});
},
function(){
$logo.transition({
perspective: '600px',
rotateY: '0deg'
});
}
);
}
}
// can trigger the resize handler instead of
// explicitly calling checkWidth()
$(window).resize(checkWidth).resize();
});