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]
Related
I have a css animation that essentially slides two images with a high z-index off the screen revealing the website content below it on the home page. It is only on the home page and not on any other pages.
What I would like to do is have this animation run only the first time the page is accessed during a session. So if the user navigates to another page and then comes back to the home page, I don’t want the animation to run again.
The only solution I can think of is to create an HTML5 session storage object on the first page load that is checked every time the home page is loaded and use jquery to hide div that contains animation if the value of the object is set.
This seems a bit overkill for such a simple task. Any suggestions on a simpler way of just removing the div that is persistent across page reloads during the session? You don’t have to write the code for me, just point me in a simpler direction if possible. Like is there a way to do this with just CSS. Or if I remove the element using JavaScript will it remain removed after navigating to another page within site and then coming back to home page. Please and thanks!
P.S. This is a custom WordPress theme so I’m open to a PHP solution as well.
You can check the referrer URL and run the animation only if the referrer is not the site itself. But this time the animation won't be shown if the visitor first opens another page and then navigates to the homepage.
Another option would be using cookies.
A question about the Fullpage plugin: http://alvarotrigo.com/fullPage/
You can open the site in any section. For example this link opens the site in the fourth section:
http://alvarotrigo.com/fullPage/#4thpage
This means the site immediately starts to scroll once you opened the site (it scrolls down to the fourth section).
However, I have a script (it loads a chat box) that slows down this process. Although I added my chat script AFTER the Fullpage.js initialization script, my site first loads the chat box and after that Fullpage scrolls to the right section.
I want the page first to scroll down to the right section on site open, and once the site has opened and has scrolled to the right section, then the chat box script needs to start to run (for as long as the site is open).
How to accomplish that? I tried to place my chat script in the afterLoad and afterRender, but for some reason that makes my chat box not showing up at all. Is there a way to perform some actions after Fullpage has loaded and after the first scroll (on site open) to the right section?
As I said in a previous comment:
Probably what's taking time is the loading of the JS, CSS or SWF files required for that script to run. Fullpage.js waits until all elements from the site have loaded to scroll to the section. The reason to do this is due to the use of images in section when using scrollOverflow:true, as fullpage.js needs to determine if the section needs scroll bar or not depending on the size of the loaded image.
To solve it you can load the element dynamically by using jQuery or ajax.
Otherwise, you can edit fullPage.js and change line 536 this:
$window.on('load', function() {
scrollToAnchor();
});
To this:
scrollToAnchor();
The only problem with that is that you'll have to remember to change that line every time you update fullpage.js.
Feel free to open an issue in fullPage.js github forum and a solution might be implement in future versions.
I have this small toolbar-like html page:
Currently, a user clicks on a link and this page opens in a new tab at the size shown. The user places this at the top of their screen then opens another tab below it taking up the rest of their screen. The user mainly works out of the larger window and interacts with this "toolbar" periodically.
This setup is obviously not ideal. Especially since you cant hide the chrome frame or the address bar which make the toolbar twice the height it needs to be.
What I'd like to do is make this an actual tool bar in Chrome, something like:
I did see How to make a toolbar in Google Chrome? but I'm not sure which method would best suit my needs.
A few details:
The toolbar must remain visible anytime its turned on/opened (as I
understand it 'infobars' close themselves when not active? not 100%
on that though)
Navigating to a new page should not close the bar
Navigating to a new page should not reload / render the bar (as I understand it using content scripts would reload the bar every time the user goes to a new page,)
I guess we could use a content scripts / local storage type solution to render the bar then set it up as it was on the previous page, seems hacky though.
Am I missing a better way to do this?
Could anyone help me get started down the right path to achieve this result?
A toolbar is an extension.
use content script. The easiet way would be to download a sample from official google chrome's developper site.. and you will be able to change it the way you want.
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.
I have been trying to solve this problem for a while now and have looked on numerous forums to find a solution. Here is my setup. Any help would be greatly appreciated!
I currently have a index page that loads a JavaScript header and footer above and below my "content" section. I also have a list of navigation links inside of the header. My music player is located in the footer. It does not load automatically (for those that are bothered by that), and i don't want it to reload every time someone clicks on one of the navigation links on the side. I don't want to use frames for this; I have read that frames will allow me to only refresh the "content" section of my page, but that when indexing a site, most search engines will not work well with a site that has frames. I also do not want to use a pop-up for my music as most browsers and users have pop-ups blocked.
Basically i am looking for a code or something that will allow for a header and footer (doesn't have to be a JS header and footer) to not refresh when someone clicks on the navigation links located in my header. Thanks again to anyone that has a solution to this problem.
Do it like Facebook - use JavaScript to intercept link navigation, load the content using XMLHttpResponse, and then update the portions of the page that need to change.
This keeps the static integrity of the page for search engines, allows most of the site to still work just fine for users with scripting disabled, and avoids resetting the music for everyone else.
What Shog9 said, but also make sure to change location.hash whenever you change the content and make it so that visiting the website with that hash will redirect you to the correct page.
Here's another example of a band that uses the AJAX method to reload the page content, while keeping the player going...
http://jonandroy.ca/
The URL hashtag gets updates each time you click on something, and if you copy that URL, when you visit it, you'll see the homepage load for a split second, and then it loads the content of the page specified by the hashtag. Not perfect, but an overall good solution to this age-old problem.
You might want to look at how thesixtyone.com works. They have non-interrupted music by using AJAX to rebuild the page when a link is clicked rather than load a new one. This is achieved by having all links be anchors for the current page (i.e. all links are relative and start with a hash character).