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.
Related
i have website with 200 post and each one have +50 pictures without text content and that slow down the loading of my website .. i want to split the loading of picture using a button when the user click on it will be loaded more 10 picture and so on till the end and i don't know how to add the js function to the word-press
i found some plugin but split to many pagy with <--next page -->
but i need some thing like that to keep the user in the some page
"Lazy Loading" might be able to do what you need, although not exactly what you would like to do with a button and javascript. It is an optimization technique that only loads a picture when it's visible on the area of the browser, and delay loading the rest of the pictures until you scroll down or when they should become visible.
You can configure that when a page loads, only the pictures that are "Above the Fold" (printed on the top half of a browser without scrolling down) should load, and delay loading the rest until a user scrolls down to reveal them.
You can check this document How to Implement WordPress Lazy Load on Images and Videos.
Check out these lazy load plugins:
https://wpneon.com/best-wordpress-lazy-load-plugins/
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.
I have a pre-loader implemented into my site and when I load the site to activate the pre-loader there is a scroll bar on the side. This is because the website is scrolling in the background while my pre-loader and full-size background is in-front.
Is there any way I can make my pre-loader the main focus until it disappears then the scroll bar can appear for my main page?.
I am using HTML, CSS and JS for this loader.
From what I can tell, your preloader script seems to work by fixing an element over the entire page until the rest of the page has loaded.
In this case, adding style='overflow-y: hidden;' to the body would work.
Once your page loads, you will need to remove that style to allow the user to scroll and see the scrollbar again. It depends on the loader you are using. There should be a way to hook in javascript upon page load.
I used what you said and then just removed the Attr once the page loaded.
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 working on a project where the client wants a way of transitioning between content that basically works like page turning on an e-reader app. When you click on a link to go forward, the current content slides to the left and new content is revealed as it slides. If you click on a link to go backwards, the content slides in from the left and is superimposed. (If you're jumping to a page further off it's fine for the page to reload.)
There needs to be a distinct URL for each content block, and ideally this should work all the way down to IE7. Assume there are at least 50 pages, each with at least 2-300 words.
I know there are lots of jQuery page transition options, but most of the ones that I've looked at slide in the new content while the old content is sliding off or fades in the new content after the old content is gone (think slide.js). What I need is basically curtain.js that is vertical, triggered by a link instead of scrolling, and doesn't need to load in all of the content on the page at once.
Here's one way I've come up with possibly building this:
Current content is loaded in from the database (or whatever)
Content for the previous and next pages are also loaded in and stored in hidden divs
When a link is clicked, the current page slides off (or the previous page slides in)
The content that's no longer needed is deleted
New content is "preloaded" with AJAX and hidden
Local URL also changes with AJAX
Here's a crude diagram
That seems really inelegant, though. Is what I've outlined above possible to do? What would be a better way of doing this?
I am okay with JS/jQuery and PHP, learning AJAX.
I'd suggest jQuery UI tabs
No need to deal with AJAX. Just get the server to spit out the 50 pages of texts once and that's a wrap.
It's pretty straightforward to hook into the API, which gives you more control over the entire procedure. Enough control to hook up a function that updates the address bar when you tab through.