So, I have a website I'm working on using javascript / jquery. It acts similar to an accordion, but for the whole site.. Links are positioned on the left side of the screen and when you click on one (let's say "about me") the current content (maybe the "home" or "contact" page) slides off screen and the "about me" content slides on screen. My issue lies when refreshing the page.
If the "about me" or "contact" content is being viewed and you click refresh, it resets and shows the "home" page content. I want the current content (if different than the "home" content) to remain visible when the page is refreshed.
Any suggestions on how to complete this? I've been playing with the "hashchange" event/function and can get my URL to update, but I still need the refresh to load the current content rather than the home page content every time.
Thanks for any help!
There are a couple of ways to keep something even if the browser gets refreshed:
1- Url parameters. In this case you add the current selected menu on the url like:
localhost?currentMenu=about
No when doing this you have to have a script to check that and select the corresponding menu onLoad.
2- localStorage
localStorage.setItem('currentMenu', 'about');
And then check it onLoad:
currentMenu = localStorage.setItem('testObject');
3- coockies
document.cookie = "currentMenu=about";
Remember all of these options require to do additional checking on load.
Related
I'm trying to figure out how to refresh the contents of an iFrame on a page. I did quite a bit of Googling and hunting around through old posts, but all of the solutions offered are for reloading an iFrame to the initial src URL, and not the active URL.
For example, I have an iFrame that contains my Freshdesk client portal embedded into my main website. If I click around to a couple of different pages within the iFrame, I then want to be able to intercept a page refresh and simply refresh the iFrame to the active page.
Current Behavior:
Freshdesk Home --> Knowledgebase --> New Ticket --> Refresh --> Back to home
Desired Behavior:
Freshdesk Home --> Knowledgebase --> New Ticket --> Refresh --> Back to new ticket screen (the last page visited in the iFrame before triggering the refresh)
The refresh doesn't have to be triggered by an f5 refresh, I can use an inline button on the page, but it needs to reload the iFrame to the same page that it was last on, not the original src URL. I tried the following code, but it refreshes to the home page of my Freshdesk every time:
document.getElementById('iframeid').src = document.getElementById('iframeid').src
and
document.getElementById('some_frame_id').contentWindow.location.reload();
So, how can I refresh my iFrame without restarting back to the original src URL?
You can use the onbeforeunload event https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload to detect that the page is going to be closed or refreshed.
So you can then compare the active src and the original src of the iframe to know if the user navigated to some page inside the iframe.
Then choose your favourite message passing system to make sure the portal has a way to know that src after it loaded again: url parameter, local storage, cookie, something else...
With the help of Shilly and a bit of brainstorming, I figured out a solution to my problem, and am posting it here for anyone else in my situation. Turns out that Freshdesk (the website inside the iframe) allows you to use custom javascript. Using this functionality, I came up with the following:
1) use parent.postMessage on first page load to send the URL of the currently active page to my main website.
2) use sessionStorage to store the URL of the current Freshdesk page on my website
3) on first page load of my main website, check to see if a sessionStorage value is set, and if so, set the iFrame's src to this value.
It's not quite a true "only on refresh" solution, however it does make the last iFrame page visited persist throughout the remainder of the user's session, which means they won't lose their place if refreshing or navigating away temporarily. Thanks to the use of sessionStorage, this will also reset back when the user closes the page, meaning on their next visit they'll restart at the Freshdesk home page (or whatever other website you're hosting inside the iFrame).
I am working on a website and I have a design issue coming up. I have a navigation bar where 3 dropdowns are present. Whenever I click on the dropdown and select an item, the page completely reloads and the whole structure of webpage fully refreshes and need to scroll down again and again for checking that clicked option. Is there something that can stop it from reloading each time and when a menu item is clicked the page stays right at there?
Don't use About
Use About
If you point the href to an html file then it will reload the page but if you use a section's id then it will go to that section of the page without reloading.
I'm developing a multi-browser extension using the Crossrider framework.
Is there a solution to show an html horizontal menu on the top of each page ?
The menu will embed a JS script which uses some external libraries.
Indeed, I can prepend my html content to the "body" tag but each time the user clicks on a link on the webpage, the whole page is reloaded which makes the horizontal bar disapear and then reappear on the next page when the loading is completed.
I thought of putting the website content into an iframe but some websites (ex: amazon) send a header with the "X-Frame-Options" set to "DENY" or "SAMEORIGIN". This is something which Crossrider cannot modify (at least I didn't find how to do that).
Is there an other way to show a PERMANENT menu on top of each page ?
EDIT :
My toolbar won't contain any link but it will record the mouse position. My problem is that each time the user will click on a website link (ex : to see a product on the amazon website), the toolbar will be reloaded and so the mouse position won't be recorded until the next page has finished its loading.
Page reload is normal behavior when clicking on a link on Amazon sites and hence the toolbar redrawing when the page loads is normal and correct.
Based on the information provided and assuming I have understood what you are trying to acheive, it appears that you are going about this the wrong way. I would first think about why do you need a toolbar at all? For example, if you are only recording the mouse position when a link in the page is clicked, I think it makes more sense to register to mouse click events of the links you are interested in.
I suggest you rethink your approach and take in to consideration the issues you have to handle, such as the page reload and handling the click event before the page reloads.
[Disclosure: I am a Crossrider employee]
I am trying to make a simple website which has it's pages rendered by Javascript, for example:
<script>
function openPage(page) {
if(page == "Page2") document.getElementById('page').innerHTML = "You are on Page2";
}
</script>
Page2
This works, however my problem is that after Page2 shows up, the back button doesn't go back to the initial page. How can I make it go back to the default Page1 when the back button is pressed?
I have also tried:
Page2
But it does the same thing.
The browser's back button works on URL changes, so if the URL doesn't change, the browser assumes you are on the same page. Luckily you can change the URL in javascript without causing a full page reload by either setting location.hash or by using the html5 history api (will only work on newer browsers). You'll have to also have some javascript to handle those events.
in your code you have a button that change content of element with id : page
when you click this button you don't change the page, you change only the DOM element of the same page, this means you stay in the initial page
The Facebook chat window remains open, unchanged, to refresh the page, or even when we change page. How to reproduce something similar? Tried with frameset, but it did not work.
How to keep a div open a window similar to the internal, even after refreshing the page or clocar on a website link?
Like them, you can try -
The data is shared between facebook pages. Probably HTML5 localStorage? Cookies? I'm not sure.
If you notice, they don't "refresh" the page, they ajax-refresh the content on the page for subsequent loads. (unless you manually navigate to the same page, of course.)
Finally, its all CSS mainly some z-index put to use.
I hope those 3 are enough to get you started.
I don't think the whole page of Facebook is loaded. Every link has it's own 'target'. Most of them fetch a page (I think with simply AJAX) to show, others to just change some partials of the screen. So let's say, you have two divs. One div is the chat-div. Positioning fixed and all, z-index on 100, it will always stay on top. The rest of the page is the other div. Within this div, you can load certain pages with AJAX, without the whole screen to refresh.
As with reloads of the screen: you can easily save (also with AJAX) whether the user closed the chat screen or has it opened. Just create a table in a database called 'chats' or something, then when a chatscreen is opened you put an entry in that table with 'person_1', 'person_2' 'lastmessage' and 'active'. When they close the chat, you can put the 'active'-field to false. Then, whenever someone loads the entire website, you check the table chats for active chats, and shows them when there are any.
I would look into qjuery-qjax: https://github.com/defunkt/jquery-pjax
From their docs:
pjax works by grabbing html from your server via ajax and replacing the content of a container on your page with the ajax'd html. It then updates the browser's current url using pushState without reloading your page's layout or any resources (js, css), giving the appearance of a fast, full page load. But really it's just ajax and pushState.