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.
PDF's display in-line in my application. They work nicely on a desktop or laptop. On an iPad however, only the first page displays and there are no navigation bars so the user can not move beyond the first page.
I have tested both Chrome and Safari, with the same result.
Here's the code. (It's part of a vue.js component.)
<object :data="rawCvLink" type="application/pdf" width="868px" height="800px">
<p>There was a problem loading this CV.</p>
<p>Otherwise, try loading the CV <a :href="cvDocumentLink" target="_blank">here</a></p>
</object>
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 working on a Ruby on Rails web app using Font-awesome and Glyphicons icons on top of Bootstrap. The icons do not show up on Chrome. I can actually get them to show up by hovering over them OR start the inspector (i.e. inspect element). Has anyone seen this issue before? I am losing my mind here....
As you can see, the first two icons are showing because I hovered over them, the rest are not showing up!
Thank you in advance for your help.
I have an html page, and a link to the video in my code. Can I start buffering the video as soon as I've opened page, and show the 'play' button only when the video is completely buffered? Important, thet I should put this video dynamicly via innerHTML() when it's loaded. Before that, the video tag shouldn't be on the page at all.
For solution I have used video.js jquery plugin.