resizing of grid when resizing browser window - javascript

I used a fill whole window example as a default.
Tried to resize browser window: but area, that is used for grid is the same. Need to reload page so that it fits.
How can I archive this without reloading page ?
Edited
Interesting fact that when I change order of columns grid is resized.

This works fine for me. Maybe the resizeCanvas() function is a new feature in slick grid.
The code is CoffeeScript.
$(window).resize -> grid.resizeCanvas()

This works better than just changing .slick-viewport height.
$(window).resize(function(){
var h=$(window).height();
$('#myGrid').css({'height':(h-65)+'px'});
grid.resizeCanvas();
});

did this way :
$(window).resize(function () {
$("#grid").height($("<container for grid>").height());
$(".slick-viewport").height($("#grid").height());
});
Thanks to jQuery and its height() function

This seems to work just fine:
$( window ).resize( function() {
grid.resizeCanvas();
});

Related

How can you disable resize for a popup?

I was wondering if it is possible to enable no-resize for a popup window (in Chrome).
I am aware that there have been several changes as far as the rules for this type of thing goes, which is most-likely why most of the posts I found didn't work.
I am not sure how I could achieve this, but I'm assuming it is possible.
If I run window.onresize = () => window.resizeTo(500, 500); in a popup, it works, but since the user resizes it then it pops back it doesn't look so great. Is there a way to just disable resizing as a whole?
Thanks!
Can't you just use fixed width and height for the pop-up and overflow:hidden on his parent?
Not sure though!
update
Forget what i have said!
Try this:
window.addEventListener('load', () => {
const popup = window;
console.log(popup);
popup.addEventListener("resize", () => {
popup.resizeTo(500, 500);
})
});

does the jquery trigger('resize') function works only once?

I have this 2 pieces of code
function fixFooter() {
var wrapper = $('#disqus_wrapper').height();
if ( wrapper > 200 ) {
$(window).trigger('resize');
}
};
var element = $('#disqus_wrapper');
new ResizeSensor(element, function() {
fixFooter();
});
The expected effect is that the window will resize every time the div#disqus_wrapper changes height. (to fix comments and footer overlapping)
Well the code works, but only once after the page loads. I need it to resize each time the div changes in height. I tried switching the trigger('resize') function with an alert and everything works perfectly. Any idea why the trigger('resize') only works once and how can I fix it?
Update ;
The html is just this because I am loading the Disqus comment system
<div id="disqus_wrapper"><div id="disqus_thread"></div></div>
For detecting the div height change I am using this library
https://github.com/marcj/css-element-queries (the ResizeSensor.js)
You need to call your function fixFooter() in window resize event.
$( window ).resize(function() {
fixFooter();
});

How can I correctly discover and print the browser window width using JQuery? Why it can't work?

I am pretty new in JQuery and I have the following problem.
My page have to be differently rendered if the browser have specific width (I need it to fix an issue on mobile devices that have a smaller screen)
So as first step I am trying to discover the browser window width (so if it is less to a specific value I consider that the page is showed into a smartphone and I fix my issue).
So I am trying to do something like this:
$(document).ready(function () {
var windowWidth = $(window).width();
alert(windowWidth);
}
I am trying into JSFiddle link
But it seems don't work because I don't see any output. Why? What is wrong? How can I correctly discover and print the browser windows width?
I think you are missing jquery also add this in your head tag.
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
You are missing ) add it at end of your code.
$(document).ready(function () {
var windowWidth = $(window).width();
alert(windowWidth);
});
Fiddle:Demo here
Hello AndreaNobili I have updated yourjsFiddle here
https://jsfiddle.net/ayjq1ke0/1/
Basically you didn't click your document ready function.
you just needed ); at the end of your code for it to work :) oohh Also in jsFiddle you need to select what plugin to load, on your jsFiddle you didn't have jQuery selected, so I have added it for ya

How to make script rerun on window resize?

I think the question is pretty much self explanatory...
I've got a script that is drawing some graphics across the window. Currently, if I resize the window (like taking it full screen) the script continues to affect only the windows' initial size. It should rerun, responding to the new dimensions.
I've tried adding this to my script.
$(window).resize(function() {
});
It did run whenever I resized it... but ONLY when I resized it! No more on load... as it also should.
I think I'm on the right path, but what am I missing?
Codepen here.
drawingFunction function(){
// your drawling code;
}
$(window).resize(function() {
console.log('window is resized');
drawingFunction();
});
$( document ).ready(function() {
drawingFunction(); // for onload
});
function drawStuff() {
// move here the drawing code ............
};
// call it where the loading process is
drawStuff();
// call it on resize , too
$(window).resize(function() {
drawStuff();
});
To call on loading
If you are using jQuery:
$(function(){
drawStuff();
})
if not, try this.
window.onload = function(){
drawStuff();
}
All is ok, but when I maximize or restore window, resize event is fired 2 times. When I press F11 in Firefox to go fullscreen, browser's toolbar is sliding up slowly and resize event is fired up to 40 times. My proposal is to use delay:
var timeout;
$(window).resize(function() {
clearTimeout(timeout);
timeout = setTimeout(onResizeOnly, 500);
});
function onResizeOnly()
{
//your code here
}
In the tag :
<body onresize="drawStuff()">
IMHO, it's the easiest way.

Disabling jQuery click function at certain window size

I'm designing a responsive website and am using media queries to handle the responsiveness. However along with the CSS I want to disable certain jQuery click functions at a certain window width.
Right now I can do this successfully on page load but I want to also be able to do it assuming the user resized the window.
(paragraph 3) So for example if the user starts off with a really big window on his/her computer and he/she resizes it to be a very small window he/she should not be able to activate the click functions anymore. Conversely if a user starts off with a very small window on his/her computer and resizes it to be very big he/she should be able to activate the click functions.
I have tried multiple solutions but none seem to work.
Basically I want to make some clickable objects not clickable anymore or at least have them click and do nothing at a certain window width.
Simply checking at page load and no other time makes it so that what should happen in paragraph 3 doesn't happen.
$(document).ready(function(){
if($(window).width() > 992){
$('#portclick').click(function(){
$('#pagecont').slideToggle(500);
$('#icons').slideToggle(500);
})}})
$(document).ready(function(){
if($(window).width() > 992){
$('#name').click(function(){
$('#projects').slideToggle(500);
})}})
I tried remove the id attribute that I'm using to call the function on at certain window widths and readd them at the width but this doesn't seem to work either. Removing the id doesn't seem to disable to click function at all.
And my most recent solution which comes the closest is just to bind the click function to window resize. So far this works but it is extremely buggy so when you get to a width where the click function works and you try clicking it will do the toggle function about 100 times before it stops. But it does sustain the condition described in paragraph 3.
$(document).ready(function() {
$(window).resize();
});
$(window).resize(function(){
if($(window).width() > 992){
$('#portclick').click(function(){
$('#pagecont').slideToggle(500);
$('#icons').slideToggle(500);
})}
else return})
$(window).resize(function(){
if($(window).width() > 992){
$('#name').click(function(){
$('#projects').slideToggle(500);
})}
else return})
Does anybody have an idea for a working solution that would work flawlessly like css media queries do? I don't think this is that complicated of a problem to work around so I'm hoping for some good answers! Thank you guys so much in advance!
Several problems here. First, resize fires almost constantly while the window is moving, so don't actually trigger anything on that. Second, you should only bind your event handlers once (or if you must bind more than once, make sure you clear out the old ones.) You can simplify thusly:
$(document).ready(function() {
var isLargeWindow;
$(window).on('resize', function() {
isLargeWindow = $(this).width() > 992;
});
$('#whatever').on('click', function(e) {
if (isLargeWindow)
// do large window stuff
else
// do small window stuff
});
});
My simplest way of doing that is not using the resize event at all just attach
the click event and add an early return term if the window size doesn't suite your needs.
Example code:
$('#portclick').click(function(){
winWidth = $(window).width();
/* You can add an height value too */
winHeight = $(window).height();
if ( winWidth < 992 ) return;
/* Youe Code Executes */
});
If you want the if statement to be called after the resize has happened then do something like this:
http://jsfiddle.net/sLk5ro6c/1/
$(window).resize(function (e) {
window.resizeEvt;
$(window).resize(function () {
clearTimeout(window.resizeEvt);
window.resizeEvt = setTimeout(function () {
doneresizing();
}, 250);
});
});
function doneresizing() {
if ($(window).width() > 500) {
// DO SOMETHING HERE
alert('example');
}
}
This way the code won't be called every time during the resizing of the window

Categories

Resources