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);
})
});
Related
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
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
I want a website to execute a certain jquery script (which allows me to stretch the height of a vertical menu to the height of my browser window) when the page loads and when it is resized.
So I have written a jquery of this kind:
jQuery(document).ready(function ($) {
$(window).on('resize', function() {
<code to execute>
}).trigger('resize');
});
My problem is that this code works well when somebody loads the page or when he resizes it, but it doesn't work when one hits the refresh button. How could I make the code work also in that case?
Thank you in advance for your help.
Try this:
var myFn = function() { console.log('hello world') };
jQuery(document).ready(function ($) {
myFn();
$(window).on('resize', function() {
myFn();
});
});
jQuery(document).ready(function ($) {
function Resize(){
$(window).on('resize', function() {
<code to execute>
}).trigger('resize');
}
});
call this Resize() whenever you need. Either on load or on click.
It turned out that the way I described in my own question was more than right. It worked perfectly well that way, even onRefresh. What was not making my script work properly was the fact that one of the variables I was using would change after the page had finished loading, so when I was hitting "refresh", it would give a different value than in the beginning.
So for every user of stackoverflow.com, please note that whenever you want to set an event onLoad, onResize AND onRefresh, the easiest and best possible way is:
jQuery(document).ready(function ($) {
$(window).on('resize', function() {
<code to execute>
}).trigger('resize');
});
In fact, what glortho was suggesting could work, but that was using another variable, and in my humble opinion, that would make the whole thing a little more redundant.
Thank you everybody for your help and for reading.
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();
});
I am having difficulties to code a simple jquery enlarge image feature on a image however i do not want plugins. So when you click on a image it pops up and enlarges the image size and when you click on "x" it closes the enlarge image.
Just us www.fancybox.net. If you really not want to use any plugin you will still endup with the samecode as one plugin.
Do something like this if you really want not to use a plugin.
$(document).ready(function () {
$("img").toggle(function () {
var width = $(this).attr("width");
var height = $(this).attr("height");
// Add function for displaying
}, function () {
// Add function for closing
})
})
You could use zoom css for this (but not supported in all browsers yet)
$('#myImage').css({zoom: '200%'})