刷新JavaScript而不重新加载页面

Question

I am facing a problem where i have used custom scroll from JavaScript which will calculate the block's width and height from JS. the problem is, when the viewport is reduced, the particular block is hidden so from there if the window size is increased, the block with custom scroll won't show up because it wasn't able to calculate current width and height. if i refresh the page, it works fine. is there anything i can work out to refresh this particular block without reloading the page? http://narkosi.com/test_copy here is the link to the fresh copy of the site. try resizing it to mobile view and back to desktop version, you will notice right and left column hidden but however if refreshed the page, it works fine. Thank you in advance.

Answer 1

Try $( window ).resize(); function it will run when you viewport is change

$( window ).resize(function() {
  your code
});

for more details check https://api.jquery.com/resize/

for plain javascript use onresize="myFunction()" on body for more details check http://www.w3schools.com/jsref/event_onresize.asp

Answer 2

If above code is not working try

$([document, window]).on('ready resize', function (e) {
alert("hi");
});

Answer 3

The answer is extually exist in the plugin's docs

General API Information (from the docs)

jcf.replaceAll( [context] ) - Replace elements on the whole page. Optional argument is context to use (can be CSS selector, or DOM/jQuery object). Add class jcf-ignore on the element to prevent its customization.

jcf.replace( elements [, moduleName] [, customOptions] ) - Replace certain element or multiple elements

jcf.destroyAll( [context] ) - Destroy all custom form elements instances and restore original form elements. Optional argument is context to use (can be CSS selector, or DOM/jQuery object).

jcf.destroy( elements ) - Destroy certain element or multiple form elements. Should be applied to native form controls.

So you can just destroy and do replace again (I tried to do it on your site and it works).

$(window).resize(function() {
    /* I do this for all elements 
       but it's better for you to refresh only the elements you need to */
    setTimeout(function() {
       jcf.destroyAll();
       jcf.replaceAll();
    }, 0);
});

Why the setTimeout needed? Well, It doesn't work without it ;)

A good explanation for this you can find in this question - Why is setTimeout(fn, 0) sometimes useful?

In short:

The solution is to "pause" the JavaScript execution to let the rendering threads catch up. And this is the effect that setTimeout() with a timeout of 0 does