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.
3 Answers
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
1 Comment
Lucian
Thank you for the answer but i tried this already but this didn't work in my case. you may want to check the current version in the link i posted in the above comment
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
If above code is not working try
$([document, window]).on('ready resize', function (e) {
alert("hi");
});
2 Comments
Matt Komarnicki
Edit your previous answer instead of creating a new one.
Lucian
this didn't work either. the problem is because the width of parent is changed to
0 on resize so when we resize it back to desktop view, it js isn't able to calculate the width and height without refresh.
custom scrolldo you mean that your are using a library (or plugin) I guess. Which library are you using?