We Keep Coding

How to reload a html element by resizing page without refresh the page?

I would like to reload a html element (a canvas) when I resize my page, without refesh the entire page. Is that possible ?
Thank's !

It's hard to know exactly what your html element you need to reload is, but it should be possible.
Here's an example of a jQuery function that will check when the page is resized.
$(window).on('resize', function(){
var win = $(this); //this = window
if (win.height() >= 820) { /* ... */ }
if (win.width() >= 1280) { /* ... */ }
});
Javascript example:
window.onresize = function() {
if (window.innerHeight >= 820) { /* ... */ }
if (window.innerWidth <= 1280) { /* ... */ }
}
And inside the if statement of your desired window height or width, you could call the function to reload your canvas.

You could add an event listener
window.onresize = function(){
var oldcanv = document.getElementById('canvas');
document.removeChild(oldcanv)
var canv = document.createElement('canvas');
canv.id = 'canvas';
document.body.appendChild(canv);
}

$(window).width() if statement running when it shouldn't

Hey guys I am having an issue with $(window).width if statements in jQuery. For some reason my function is running even when the window width is smaller than 991 pixels however my if statement states that it should run if the window width is greater than 991.
function ctaFixTop() {
var mn = $("#new-car-offer-cta");
var offerHead = $('#new-car-offer-head');
mns = "new-car-offer-cta-active";
var hdr = 0;
var ctaHeight = $("#new-car-offer-cta").height();
$('.header-wrapper, #top-bar, #new-car-back, #new-car-offer-head').each(function() {
hdr += $(this).outerHeight();
});
if ($(window).width() > 991) {
$(window).scroll(function() {
if ($(this).scrollTop() > hdr) {
offerHead.css('margin-bottom', ctaHeight);
mn.addClass(mns);
} else {
offerHead.css('margin-bottom', 0);
mn.removeClass(mns);
}
});
}
}
$(window).resize(ctaFixTop);
ctaFixTop();
As you can see the ctaFixTop function is being called twice, once on initial load and whenever the window is resized. When I initially load the page with a window width below 991px the function works how it should however if I then increase the windows size past 911px and size it back down under 911px the $(window).scroll function will be called even when it's wrapped in the if statement that states that it should only run if the window width is greater than 991.
Any idea why this might be happening as I have tried trouble shooting this and simply can't understand why the function is being called even with the if statement around it.
Thanks

That is because the scroll event is already attached to the window and you are not removing it. What you need to do is put the
if ($(window).width() > 991) {
inside the .scroll() method like this.
$(window).scroll(function() {
if ($(window).width() > 991) {
if ($(this).scrollTop() > hdr) {
offerHead.css('margin-bottom', ctaHeight);
mn.addClass(mns);
} else {
offerHead.css('margin-bottom', 0);
mn.removeClass(mns);
}
}});

function triggers on window width but will not turn off if bigger than set width

Here is what I have now it will work but if window width is under 1024 it will still trigger even though it is only set to trigger if over 1024
$(function () {
$('#hamburger').click(function () {
$('div.burger_nav').slideToggle();
});
$(window).resize(function () {
if ($(window).width() < 1024) {
$('.nav_shown').hide();
$('div.footerdiv_2').hide();
$('div.hidden_nav').hide();
$('div.burger_btn').show();
$('#ft').removeClass('footerdiv_3').addClass('footer_img_clear');
} //end of if
else {
$(".nav_shown").show();
$('.footerdiv_2').show();
$('div.burger_btn').hide();
$('#ft').removeClass('footer_img_clear').addClass('footerdiv_3');
$(document).scroll(function () {
var headerShow = $(this).scrollTop();
if (headerShow > 200) {
$('div.hidden_nav').fadeIn();
$(".nav_shown").hide();
} else {
$('div.hidden_nav').fadeOut();
$(".nav_shown").show();
}
});
} //end of else
});
});

It looks like you want to modify the document when the window reaches a certain breakpoint, in this case 1024 pixels. This is known as responsive web design.
Instead of updating the screen every time on resize, it's useful to set a flag for triggering a breakpoint.
$(function() {
$('#hamburger').click(function(){
$('div.burger_nav').slideToggle();
});
var currentlySmall = false;
function update() {
if ($(window).width() < 1024 && !currentlySmall) {
currentlySmall = true;
console.log('Less than 1024');
$('.nav_shown').hide();
$('div.footerdiv_2').hide();
$('div.hidden_nav').hide();
$('div.burger_btn').show();
$('#ft').removeClass('footerdiv_3').addClass('footer_img_clear');
}
else if ($(window).width() >= 1024 && currentlySmall) {
currentlySmall = false;
console.log('More than 1024');
$(".nav_shown").show();
$('.footerdiv_2').show();
$('div.burger_btn').hide();
$('#ft').removeClass('footer_img_clear').addClass('footerdiv_3');
}
}
//Calling this in the else part above will bind a new scroll event each time
//Instead, if this should only happen when the screen is large, use the
//flag you created
$(document).scroll(function () {
if (!currentlySmall) {
var headerShow = $(this).scrollTop();
if (headerShow > 200) {
$('div.hidden_nav').fadeIn();
$(".nav_shown").hide();
} else {
$('div.hidden_nav').fadeOut();
$(".nav_shown").show();
}
}
});
$(window).resize(update);
update(); //Force initial calculation since resize won't be called when page loads
});
Now the changes you make in the above update() function will only occur when the screen sizes changes past that 1024 breakpoint instead of every time the screen is resized.
Fiddle: http://jsfiddle.net/25nfqxzk/1/
Edit
Expanding off blgt's comment, I don't believe you need to bind the scroll event in the if-else. It can be assigned outside and also use the same trigger flags.

How to check if browser window is fully resized or not?

I want to execute one function, after my window is fully resized.
window.resizeTo('792','115');
myFunction();
My question :
1.Does the myFunction() method will be called only after the window is fully resized ?
2.If yes mean no problem for me, else I want the below scenario ?
My need :
I need a pure Javascript solution.
if(windowIsFullyResized){
myFunction();
}else{
// wait for window resize and again call myFunction();
}
How can I achieve this?

Like it says here, you can do this :
I prefer to create an event:
$(window).bind('resizeEnd', function() {
//do something, window hasn't changed size in 500ms
});
Here is how you create it:
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
You could have this in a global javascript file somewhere.

You can do like this maybe:
$( window ).resize(function() {
var windowWidth = $(window).width();
var windowHeight = $(window).height();
if(windowWidth == 792 && windowHeight == 115) myFUnction();
});

Javascript/Jquery rotating image that re-sizes when window is resized

i can not get this to work, Please help! . it's a mess. What i am trying to do is, make this image blur out and blur a new one in ever few seconds, and if the window size is greater than a defined size, it will use a larger image. Also it needs to check if the window has been re-sized so i can change the image on the go. so i will need something like this:
$(window).resize(function(){
change size
});
this is the main bit of code that i'm having troubles with:
$(document).ready(function() {
var index = 1;
function rotateImage()
{
$('.dp1').fadeOut('slow', function()
{
if($(window).width() > 1312 ) {
$('.dp1').css({'background-image' : 'url(../img/display_banner' + index + '.jpg)'});
}
else {
$('.dp1').css({'background-image' : 'url(../img/display_banner' + index + '_big.jpg)'});
}
$(this).fadeIn('slow', function()
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
$(document).ready(function()
{
setInterval (rotateImage, 4000);
});
});

First, you only need one .ready() method. :)
To address your question, you can take advantage of .resize() to calculate the window width. Just start with a variable that contains the width, and then recalculate on resize. For example:
$(document).ready(function () {
var index = 1,
width = $(window).width(); // SET THE WIDTH ON DOCUMENT READY
function rotateImage () {
//...
if(width > 1312){ // USE THE "width" variable here in this comparison
//...
}
//SET THE "width" variable on window resize
$(window).resize(function(){
width = $(this).width();
//... RESIZE OR CHANGE OUT IMAGES HERE...
});
});