I'm a beginner and I'm trying to use photoswiper in a PhoneGap app. I'm trying to use this example :
[http://jsfiddle.net/Gajotres/PFqVs/][1]
that works great in any browser, but just don't work on any device.
When I open, it's like I have a css issue since I don't see any king of style and when I touch any image, I just see it full size but can't swipe to see the next one.
Any help will be appreciated!
May be you should mention all sites with external resources in the WhiteList?
Related
I have been working on adding background music to a Glitch project. I followed the Aframe.io documents to create a sound component and set it to automatically play upon running, however, when I try to run the project, the sound does not play automatically on my laptop. I have to open the Aframe inspector and un-pause my project for the music to begin. For some reason, I have not encountered this issue when I tried the same project on my phone. The sound played as expected once the program is up and running. I am not sure what is causing the sound to malfunction but any help is greatly appreciated. Here is the project I am working on: https://glitch.com/edit/#!/animation-animate?path=index.html%3A15%3A23
when working with sounds natively with Aframe, I had the same problem and one of the recommendations that I can give you is to play sounds with the HowlerJS sound library, which is compatible with most frameworks and also compatible with A-Frame
I share their page and the documentation, this library is very easy to use and implement to the project
https://howlerjs.com/
https://github.com/goldfire/howler.js#documentation
Autoplay audio on most modern browsers requires user interaction before enabling audio. You can put a div in front of your scene that upon click starts playing your background audio.
Check out a related SO question / answer for video autoplay that should help:
Autoplaying videosphere from A-frame is not working on any browser(Safari/Chrome)
Another user on A-Frame discord provided this example demo:
https://aframe-autoplay-background-music.glitch.me/
I have WordPress page whose theme seems to be loading an undesirable CSS background-image. I want to try to locate the code that is responsible for loading this image but first I have to find its name. I was wondering if there is some tool that allows coders to list and identify the urls of all css-background images that a page calls.
Obviously finding background-images is trivial if all of the page's CSS is controlled only by inline code and directly linked CSS-stylesheets: a text search "find" operation for "background-image" will allow you to find all bg images. But the task becomes complicated if styling is js dependent, and in this case, it was at times.
For those of you who immediately wonder why I need would want to go this route instead of simply using development tools in Chrome or Firefox, below is a list of reasons why.
Why I want a way to automatically extract the background-image urls:
The unwanted ghost images only loads on my mobile phone, so I can't inspect the element to find the image in using my desktop development environment. This is true even if I set the developer tools to "mobile".
I don't have a development environment for my phone that will let me inspect the relevant element.
I tried downloading the exact html loaded by the mobile phone in my browser, but the css ghost image will not appear on my desktop even when use the code my phone had loaded.
The ghost image is not from a virus in my mobile phone browser, because the ghost image loads on my phone even when I used a different browser.
Any help will be greatly appreciated!
Thanks
UPDATE: I figured out the cause of the ghost image using the free trial provided by Browserstack, a mobile emulator. At allows you to view interactive content and inspect it with dev tools. I learned about it from this question: test mobile website in desktop browser.
My problem turned out to be that the css-image in the theme was pointing to my local address, which different from what it should have been on my remote server. The issue turned out not to be a desktop vs. mobile problem, but rather local vs. remote. The emulator reproduced my issue, and it allowed me to inspect and find the problematic code. Still I would love to know if there is a such a css-crawling tool, so I will leave this question open.
Is there is any way to test website on IPAD AIR only. Without having it.
Also what media queries i need to do for fixing css issues.
i found IPAD AIR is having resolution of 2048x1536
Can anybody help me out
Thanks
There are many websites that provide this sort of service!
This website (Mobilephoneemulator) does this service, it seems to support the Ipad Air at the resolution that you specified.
To use it, first select the rough size of your desktop monitor, then select 'Ipad Air' on the devices pulldown on the right. You can then navigate to your website using the url bar right below it.
Just go here and type in your website address: http://www.modelmanagement.com/models/male/ukraine?page=2
There are many sites like this.
To fix css issues with media queries learn to use bootstrap See this tutorial.
I am at a loss with why one page on a site that just went live is misbehaving on iPhone (and possibly others at 320 to 480 px wide.
I have used various simulators that have never let me down before (screenfly & iphone5 simulator) plus I have tested the responsiveness using browser resize and for some reason none of these methods can replicate the issue so I cannot find a way to correct the problem. I have cleared my cache and tried from a different phone.
The Problem:
Visit (site removed) from a phone and notice that this is the only page on the website that does not fill the devices screen. Visit any other page and you will see that the rest all fill the page normally.
If someone can point me in a direction to reproduce the problem (not on a phone) where I can access developer tools I should be able to correct the problem on my own.
I have tried reviewing my code to see what is different about that page in comparison to every other page and cannot find what appears to be causing the problem.
Some help would be gratefully appreciated.
Thank you in advance.
In Google Chrome on Phone it's ok!
Check your settings about responsive and specific browsers settings in CSS..
Good Luck, please give photo from Phone.
Okay, I found the issue. Was able to find a div element with in the contact form that had a fixed width and although the content within the form was properly set the div was pushing the entire page over.
Im trying to implement a mini browser in adobe air. The browser should work in the same ways as a mobile phone browser, i.e. fit the width of the website to a certain width(specified within the html component) and leave the height to be scrollable.
I have managed to do a mini browser by using the scaleX,scaleY properties of the mx:HTML component however these make the websites look unreadable.
I have also tried setting the css3 zoom property, and that works fine, but it only zooms out certain elements, therefore messing up the site layout.
My question is: Is there a way to make a mini web browser which shows the full content of the website?
Thanks for your help
Air browser cannot be scaled without have an horrible look (no anti-aliasing).
A few years later but here is what I ended up doing:
The requirement was to show the full website that person B was looking at so that person A could guide them through the site. Due to all the limitations of the Adobe AIR Browser we ended up using IECapt (http://iecapt.sourceforge.net/) within an external process to capture the screenshot and send it back to AIR.
This is all well and good, but IECapt is quite out of date as well so recently we have started to look at the using Chromium (http://www.magpcss.net/cef_downloads/) as an ANE within our application and with that we can alter the zoom and dimensions of the page while still being able to keep it up-to-date.