Refresh javascript without reloading the page

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.

So some code what you done so far so that we can see your problem. — Chonchol Mahmud, Dec 08 '15 at 06:09
Welcome to StackOverflow. When you say `custom scroll` do you mean that your are using a library (or plugin) I guess. Which library are you using? — Mosh Feu, Dec 08 '15 at 06:34
fiddle might not be possible in this case so i have created a fresh copy of the website and published here [http://narkosi.com/test_copy] @Mosh I have used plugin. you may take a look from the link i have posted — Lucian, Dec 09 '15 at 03:34
A. You link is broken, it should be http://narkosi.com/test_copy/ (It's better for you to update the question and add this link and explanation to it. B. I can't find the scroller. Do you? — Mosh Feu, Dec 09 '15 at 05:33
i noticed the broken link and yes it should be http://narkosi.com/test_copy and about the scroll, it's kind of hidden but the scroller works if you try to scroll. i have updated the content so you could find the scroll working. my problem is when you resize the window to mobile view and back to wide view. — Lucian, Dec 09 '15 at 05:50
Are you using [jsf plugin](https://www.psd2html.com/js-custom-forms/#demo) for the scroller? **p.s.** If you comment back to me, please follow this [question](http://meta.stackexchange.com/questions/43019/how-do-comment-replies-work) so I will be notified about this comment. — Mosh Feu, Dec 09 '15 at 08:13
@MoshFeu it's `jcf` and yes i am using that plugin for scroller. also thank you for the suggestion, i am new here anyway :) — Lucian, Dec 10 '15 at 02:51
It's look like this plugin take care about window resizing and even content changed. In other words, even in your case or if you add a text the plugin "knows" to recalculate the width and the height. Check this [fiddle](http://output.jsbin.com/nonoho). You can resize the window and see that in any case the scroller works good. **Maybe** you need to upgrade the version of this plugin. — Mosh Feu, Dec 10 '15 at 09:23
@MoshFeu sorry i was busy with other stuffs lately so couldn't check this one. the example in your fiddle has it's fixed width and height, in such case there won't be any problem but in my case i have dynamic height controlled by js and width is also dynamic so it's not helping — Lucian, Dec 17 '15 at 02:58

score 1 · Answer 1 · answered Dec 08 '15 at 06:36

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

answered Dec 08 '15 at 06:36

ganesh satpute

391
2
10

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 – Lucian Dec 09 '15 at 03:37

score 0 · Answer 2 · answered Dec 09 '15 at 05:45

0

If above code is not working try

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

answered Dec 09 '15 at 05:45

ganesh satpute

391
2
10

1

Edit your previous answer instead of creating a new one. – Matt Komarnicki Dec 09 '15 at 06:01
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. – Lucian Dec 09 '15 at 06:13

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

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

Thank you. this worked for me. maybe i overlooked the methods but missed the documentation itself. thank you very much, you really saved my big trouble. — Lucian, Dec 18 '15 at 03:04

Refresh javascript without reloading the page

3 Answers3