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>
Related
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.
I have an HTML page that loads an embedded pdf on the page dynamically via an ajax call.
The below iframe code is pasted onto the Html page from the ajax method
<iframe src="${pdfpath}" width="1000" height="500">
It works well the first time it is called, however in subsequent calls there is an issue. The PDF loads fine, its the other contents on the page that disappears. This issue only happens in IE11, works fine in Chrome, Firefox and even IE9.
One thing odd I noticed is, when I open up the F12 developer tools, the remaining contents of the page appears again. Keep in mind that these contents have already been loaded the first time the page was loaded, the ajax method just inserts the iframe element onto the html page.
Below is a sample of how the ajax method inserts the data
$("#pdfDiv").empty().html(data);
Any help is appreciated on how to resolve this issue.
Thanks.
I was able to resolve this issue by replacing the iframe element with an object element
<object data="${pdfpath}" type="application/pdf">
<embed src="${pdfpath}" type="application/pdf" />
</object>
Thanks.
Since internet explorer 11 came up, everyone seems to have troubles when wanting to display or download pdf files, and me too. Personnaly, i just stopped using pdf. But, here is something for you, i don't know if it will help :
http://answers.microsoft.com/en-us/ie/forum/ie11-windows_7/internet-explorer-11-windows-7-pdf-files-will-not/3882b9cb-05ff-45de-acc6-0f6b8b752ed6?auth=1
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 using the following line of code to embed a YouTube player onto a new webpage. I've got over 200 videos online from 50 or so different performers. I'd like to create a page with all of the performers listed and then when you click on that performer's name their playlist will pop into a solo YouTube player. I can't seem to find a way to exchange the list=PLplaylist_ID to a variable that can be passed when the viewer clicks on a particular name. I need to use the tag due to the flash-not-playing-on-iPad-issue :)
iframe id="ytplayer" type="text/html" width="853" height="480"
src="http://www.youtube.com/embed/?listType=playlist&list=PLplaylist_ID&modestbranding=1&rel=0&autohide=1"
frameborder="0" />
Any help would be appreciated!
Ron
iframe never will play video for you.
It is just HTML container. What u need is launch html page inside iframe with YouTube player code inside.
For that You can try native Video TAG with fallback to flash (long way, reinvent bicycle ) or you can try to load in iframe : http://flowplayer.org. or http://videojs.com/
I have jquerytools tabs on my page, and one of the panes is displaying a video using jwplayer.
The video will not appear, nor will the preview graphic, in any browser (actually, IE9 shows the preview img but nothing else.)
When I take the jwplayer code out of the jquerytools panes, it loads and displays properly, so it's not the jwplayer syntax.
I've also tried swapping jwplayer in favor of videojs, with the exact same result.
Any ideas?