How to reload a codepen.io page with either JS/Jquery during runtime?

Hi all.
I’m sure somebody here has run into this issue.
I tried :

location.reload()
history.go(0)
location.href = location.href
location.href = location.pathname
location.replace(location.pathname)
location.reload(false)

but I think it’s a codepen.io issue, as someone here says:
Stackoverflow post

Codepen just replaces location.reload() by location.removedByCodePen() .

So how can I easily solve this?

Thanks

window.history.go(0);

1 Like

Thanks. That works for a while, I can scroll up/down a few times, and open a collapsed window , but then it fails suddenly : ‘not found’.

given is a codepen project, please share the url with your progress and I am sure we can find a solution once I understand what we want to achieve

1 Like

I’m trying to reload the page when the user scrolls to the top (as seen in the same page ubereats.com)

My codepen

Thanks :slight_smile:

It isn’t, it can with windows.location.reload() or one of the other options it would,
I commented it out as it’s not working correctly in codepen .

No stackoverflow mentioned that it’s not possible to use any of these methods on a codepen.io page.
I’m still trying to find an alternative to use on codepen (to reload my codepen page)
Thanks

Considering it’s a React app I don’t see why they would refresh the page. The header changes based on the scroll position but that has nothing to do with a page refresh.

Reloading the page every time the user scrolls to the top also seems like an odd/annoying UX decision and is likely not what you want.

What exactly are you trying to achieve by reloading the page?


Anyway, if you need the page reload use a different site like Stackblitz or a host like Netlify instead of Codepen.

1 Like

In order to reload the background, without the white header at the top?

Yes, the header needs to reload to the background image?
When a user scrolls down the header becomes white, and then when a user scrolls up all the way to the top it becomes the regular background again.

It’s been more than a year since I dealt with JS/Jquery so considering that I’m doing pretty well.

Thanks

You do not use a page refresh for that. You change the styles applied to the header based on the scroll position.

It starts out transparent and when the page is scrolled down it gets a white background which again is removed when you scroll to the top.

Some random examples

1 Like

Yes, I have no problem adding the white header, just removing it.
I could try addClass and removeClass maybe, I will try this later today.

Thanks!

You should be able to just set the styles as well

$("#uber-header").css({ background: 'transparent'});

Inside your if(scroll < 100) condition.


Although using classes instead of inline styles is not a bad idea.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.