I'm coding a website that is based around SWIPER JS (where each section of the page is a swiper slide, swiping vertically). The issue is that I have a nav with links to specific slides on other pages, and when I use a traditional link (eg. Link)the new page loads to the correct section and will swipe down but not up from that slide.
Looking for a solution that works with SWIPER JS, ideally.
Some Notes:
After some testing, I've found that a traditional link loads the correct slide, but gives it an index of 0 instead of the correct one (for example 1).
When I swipe all the way down through the final slide, SWIPER JS seems to reload and then reads that it's the final slide and then works fine (the animation is that of the pagination coming down from the top). if someone can identify what function this is calling, this may work as the solution
I added "hashNavigation: true" from the API, as well as added "data-hash = "whichever" and everything seemed to work then.
Related
I'm working on a project and using AOS animation but all div blocks that have an animation on them disappear whenever I refresh the page. I want to trigger a function whenever the page is refreshed so I can use the AOS.refresh(). Is there any way to do this in nuxt.js or maybe a way to go around this AOS bug?
UPDATE:
here's an example this is how the page looks before reloading:
then after reloading:
As you can see. the elements that still appear after the reloading are the ones without AOS animation.
Additionally, if you focus your eyes on the sidebar, notice I have a home page. this problem happens literally everywhere except the home page. When I go to the home page then I go back to other pages the problem basically disappears.
Not sure where is your bug coming from but so far, the homepage of the library achieves to have an animation on a page refresh. Maybe it is a lifecycle code issue at some point. Maybe post some for us to help you debug this one.
To my knowledge, there is no way of watching if your webpage is actually refreshed because there is nothing related to state before this. The only somehow useful thing that may be used sometime is this.$router.history._startLocation, which will give you the first path your webapp was loaded on.
Not sure if it may help you anyhow.
Also, you can maybe give a shot to this library in VueJS and wire it to Nuxt. Should behave pretty much the same.
I would like to know if Docusaurus has the following feature. For example in https://themes.3rdwavemedia.com/demo/prettydocs/start.html, the content of the document is in one page. When we scroll down, we see the change in the sidebar. Whereas in Docusaurus, it seems that we need to click on "Next" to see the next part and the change in the sidebar.
Is it possible to make a sidebar in Docusaurus that allows to navigate in one page?
(I'm new to Docusaurus. I have posted the same question in Discord app, but nobody replied.)
Docusaurus maintainer here. There's no way to achieve this now without reimplementing such logic in your own docs plugin. Why not just write all your docs on a single page? The table of contents on the right will be the same as the left table of contents in the website you linked.
I recently uploaded custom html and css for one page on my big commerce store.The page is responsive, and mobile optimized. It works on desktops, but is over ridden by the generic mobile theme that is installed when I view it on my phone. How can I stop this page from being over ridden by the mobile version, without disabling the mobile theme completely?
Thanks,
There are 2 methods off the top of my head.
First method
Any HTML file on BigCommerce, with a mobile/responsive theme, has 2 copies of some part of the HTML page. The mobile HTML/CSS is simply triggered by an HTML class mobile on the HTML copy that is there to be only seen on mobile, which contains one copy of relevant HTML (ie, menus, logo, shopping cart icon and link, etc).
Another HTML block has class desktop and is only triggered for certain screen sizes (similar to mobile), and only shows it's desktop version of the HTMl when the screen size conditions are met.
So if screen is small, in your responsive.css file, .mobile is display:none;, while desktop class has all the proper visible CSS.
On the reverse, on desktop-sized screens, the desktop HTML is properly styled, while the mobile class HTML block is display:none.
So, in this first solution, you would simply place a copy of your custom HTMl and style it properly for display on mobile screens. This way, the mobile-styled version will only show up on mobile devices, while the desktop properly-styled version will only show up on dektop size screens. As far as BC goes, I think this is the optimal method.
Second method
You can make a custom template for the page in question. So if it's product.html and you want it custom for some specific product(s), you would create a product-custom.html and place it in your WebDav "/template/Panels" folder.
Now, on your product(s) which must use the new custom HTML, go to their page and scroll to the bottom and you will see a template file selection box, which should say product.html. Change that to your new product-custom.html.
Now, as for the custom file, simply edit the HTML/CSS rules revolving around .desktop and .mobile class (possibly just removing them all together) so that when a page is loaded on a small screen, the CSS rule to hide the desktop version won't apply. At the same time, you should delete the duplicate .mobile class HTML as it will no longer be needed.
This second method is much more flexible but also takes more work and is generally much more messy and requires much more maintenance.
I strongly recommend method #1.
Let me know if this helps and if you have nay other questions.
I am trying to recreate some effects similar to the div loading effects on this site i.e. there is no visible content when you load the page but upon clicking on a navigation link, it dynamically loads the divs.
http://worldofmerix.com
It is for a film studio website and I would like it to be interactive like this site. Does anyone know how I could achieve these effects with Javascript and/or jQuery?
Thanks for all the help in advance!
Have you used jQuery before or looked at the docs? This is really quite simple using jQuery's built-in animation effects such as fadeIn. The site you've linked to doesn't dynamically load the content - it's all part of the same page and simply displayed and hidden as appropriate.
Here's a rough fiddle showing how it works. Of course, you'd need to work out the styles and quirks in animations.
i have done 'everything' that manual says.
included all files, adding it properly to html structure, loaded images,..
please, you can view live problem here
You are using ajaxpage to load the div with id=slider for certain categories for page.php. However, Nivo slider is looking for a div after the primary page has loaded (the $(window).load function).
Somehow, you need to attach the .load function call to the page being loaded by ajaxpage.
You might try adding the $(window).load call to the bottom of each page whenever you are setting up a Nivo slideshow.
If you were using jQuery's ajax library/module calls, you might be able to attach the load action to fire when the ajax has loaded.
I looked at the source of one of your page.php pages with Nivo and I think that you set up the HTML correctly, but the Nivo module just has not been started, partly because of the way the page is pulling in the content using ajax.
This is a clever way of doing things, but just needs a different trick to starting Nivo.