I have a Big Cartel website, and I integrated PhotoSwipe for the images on the web (mobile has its own gallery system). However, as you click on the images they get squished down. I can't seem to figure out why this is happening.
Here is a link to my site as an example:
https://shop.vegasanalog.com/product/mirrorball-puzzle
I tried to see if the use was height: auto but did not seem to solve it.
Related
I'm learning about SEO (Search engine optimization )
I have a website that I created using asp.net everything works just fine but
when I open the page inspector using chrome under network and click on the HTML code I noticed that there is no styling and no images
see picture :
can someone please explain what's the reason for that and what I can do about it?
for example if i inspect the source of SO the page is fully loaded with all the css and images
I tried to google it and I didn't find anything useful
Click on the area circled with red on the image to get all of the resources like styling(CSS), images etc. You can also click on the individual CSS or the Image button to only see styling or images.
missing css file? You may go to CSS blade to see the details. Opening F12 window then refresh your page.
My client's site usesfancybox to load a lightbox for an embedded YouTube video. Clicking on the "play" image button in the middle of the video launches an embedded YouTube video.
This works fine on desktop, but will not work on my iPhone X (iOS 12). It will sometimes work for other iphone users after 3-4 clicks on the play button, but I cannot load it at all.
What should I be looking at to fix this on iOS? This is driving me crazy!
Page in question: https://www.maternlawgroup.com/
First, fancybox works fine, you can clearly see on the homepage or any other demo.
Secondly, in situations like this, you should start by checking output of browser console. There are a lots of JS errors on your page (not related to fancybox) and any JS issue can prevent further execution of the code. So, start by fixing them.
And last, I could not find fancybox on your page. It looks like you are using buggy custom JS code.
I am having a problem with making my mobile app home screen look like the image below, I have tried using grids but everything aligns to the left.
Has anyone successfully used grids in jquery mobile as home screen with icons?
I created a quick example that should help you on how to create such a home screen.The reason everything aligns to the left in your trys might be because you added style="text-align: left" to your grids? Cant really tell without any code from your side. Here is the
Example
I'm using Jquery Fileupload plugin to upload files to server. While it works well on the desktop. It doesn't work as expected on the mobile browser. Of the several images selected for upload, only few images get uploaded, the remaining images get uploaded once the user touches or swipes across the screen. In essence an additional physical touch or scroll on the mobile screen is required to complete the image upload. Please click here to see the video.
Can someone please suggest how I can get all the images to upload without having to physically touch or scroll on the mobile screen.
This answer may help others in the future.
In the plugin look for the file 'jquery.fileupload-ui.js' and change autoupload option from 'false' to 'true.
My upcoming mobile web project requires viewing dynamically chosen pdf files inside the webpage. I am using iFrame to display the pdf file and the file can be scrolled using two-finger scrolling. But the problems I am facing are:
The first page of the file is not displayed completely on the iPad and gets cut off along the width unlike when I view it on the desktop browsers where the first page of the pdf is always entirely displayed although zoomed out to fit in the iFrame area.
There is no visual indication for the users that the pdf document can be scrolled, i.e., there is no scroll bar on the pdf document.
The controls (page navigation, zoom etc.) for the pdf viewer (Adobe reader) don't appear on the document unlike when I see it on the desktop browsers.
What is the best way to achieve what I am trying to do? Do any of you experts know any solutions/workarounds to the problems I am facing? An entirely different approach using anything other than iFrame can also be considered.
The reason why the pdf should be inside the html page is that, the list of pdf files will be on a menu bar on the left side of the page and the user can click on any of them to view on the same page. Ideally, they will have the capability to toggle between full screen view and that view.
Any help is appreciated.
I created a tiny JavaScript module that helps you to show a PDF inline and be able to scroll it. But I also couldn't figure out a way to make it fit the total width of the parent container.
Check it out: https://github.com/williamrjribeiro/ipdf-scroll
Cheers.
I came across this Recommended way to embed PDF in HTML? while researching on the web to find an answer.
The mentioned link discusses about some options that I can use and the google document viewer works for me though don't know if there is anything (like data limit) I need to be aware of before using it on the website. Also I have no idea if it is a good solution (though the full screen mode is not available, but zoom-in/zoom-out and next/prev page buttons are there are show up in the mobile safari on the iPad) to use for an web app that will be run on the iPad.
Anyway, I will keep researching for a better solution and if i don't find any, I'll stick to the google document viewer.
The issue appears to be a bug with Safari on the IPad.
I didn't find a solution for embedding the pdf in html but I did find this:
If you return FileStreamResult from your controller action instead of a view, the pdf will open in a new tab, it's not embedded html but at least your user is not having to download files and open them manually.
I had the same problem of the pdf not being displayed completely. The only thing I found to fix this was the change the size of the div containing the pdf.
For example if the element containing the pdf is a div then I change its width to any value and the rollback to the value it had before. Changing Width or height any one works.
Sometimes I had to wait a little using a setTimeout before calling my resizable method