How do you test your html on mobile? - html

I use Brackets editor to develop, I can check website on Chrome in desktop with :
http://127.0.0.1:49371/index.html
But it won't load on my iPhone (same wifi)
(I know I can play with the window on chrome, I need actual mobile device)
Couldn't find a way to do this.

ngrok is good for this, it allows you to publicly share local urls https://ngrok.com/

This is really hard to do. One solution that is easy, however, is to code on codepen.io and view your projects in debug view on mobile.

Related

Why Is My HTML and CSS Code Not Running Properly On The Internet?

I recently added some text effects to my website in HTML and CSS. It runs perfectly on VS Code live sever but whenever I upload the code files on to my cpanel, the effects just seem to go away when I actually click and go on my website and I am not sure why. Does anyone know a fix for this? Here is my website julianwsanchez.com
And this how it is supposed to look:
How It Looks When I open it:
The output I'm seeing on your site matches the output of the code snippet here, effects and all.
Check to see if you have some browser extension that affects the way a site might look (e.g. a dark mode extension). Also, try going to your site in a different browser and/or in Incognito mode.
it Works for me just fine, both the link given, and the files running on localhost
You might need to do a hard reload.
try Ctrl-Shift-R on chrome when viewing the page.
This clears the browsers cache for that webpage,
alternative: open the web page in another browser.

How to test a site for mobile friendliness?

I am working on writing my first serious website as a personal project and would like to test it for mobile friendliness and compatibility before I go through the process of actually configuring the FTP, etc. Is there a way to do this using just the files locally on my computer? I've tried to research a way to just upload all the site files and view how everything would look on a mobile browser, but I have not been able to find anything. Or, is there a way to open the HTML files on my phone in a browser, i.e. Chrome?
the best way -> https://www.google.com/webmasters/tools/mobile-friendly/
Google Offers Tips to optimize your site template and a higher quality of mind
You can test your website using google webmaster tool here.
If you wanted to test it locally then you can try different extension for different browsers.
for chrome check this extension it will help you a lot.
In addition to others - http://www.mobilephoneemulator.com/.
And of course, you can test your website with your smartphone.

Run single page HTML and JavaScript page offline in iPad 1 safari

I am coaching my son's flag football team this winter and I'd like to make a little one pager app with jquery which will display and animate for the team some plays during huddles. I have been researching this quite a bit and it seems there is no way for safari to load local files. Some have suggested using goodreader, the app, but according to their manual they use a simplified browser rather than safari.
Not sure what else to try. The iPad is wifi only using ios5.
Safari is not capable of loading local files.
You have a few different options. You can:
Upload the file to Dropbox, and use it's offline mode to view it.
Use a native / hybrid container (like Appcelerator, PhoneGap, etc)
to bundle your HTML/Javascript into a "native" app.
No Safari can not load local files. You can't run local applications from there. What you can do is develop an actual app for your iphone using dreamweaver/jQuery. You could make pre-recorded videos and play them on your iPad as well. Goodreader, from what I can tell, is for reading local PDFs, which has nothing to do with apps... (but I don't really know)
This page should give you a general idea of using JQuery (mobile) to develop and actual app:
http://jquerymobile.com/
Edit: I just thought of a simpler approach that should work. Open a drop-box account at dropbox.com and put the website/Jquery in the public folder. Get the URL for the public folder and use that. Open the website on your iPad and then don't close the window. Even when the network connections stops it should still work.
I ended up using HTML5 built in APPCACHE: http://www.html5rocks.com/en/tutorials/appcache/beginner/
We went undefeated BTW :)

Lightbox to implement album in a web application

We are trying to implement a lightbox based album viewer in our web application. However, we are struggling to get it working for IE. Can you please suggest the remedy? It would be great if you can suggest some other alternatives for implementing the picture slide show for album too.
FancyBox is a jQuery plugin similar to lightbox. Works with IE and supports different media in the dialog (e.g. videos, ajax calls)
Slimbox claims to have IE6 compatibility. I don't have access to an IE6 machine to test today but it might be worth checking out their demo page.
The beauty of scripts like lightbox is that you can write the page to work on really old browsers, then the script just makes it work much better. Your page should already work before you add the lightbox script (i.e. the thumbs should already link to the full size image, or open it in a new window).
I would suggest lightbox2 and then there is jQuery Popeye what is IMHO by far better. Check out a demo installation here.

How do you add a link that will add an event to your iPhone calendar from safari?

This seems like it should be simple but after a couple hours of googling I have not figured it out. I know I can add iCal links using ICS files, but this does not work on the iPhone.
BTW, when I say iPhone I would like it to work on the touch also. Anyone have any luck with this?
You can get iPhone to download the .ics file (using Safari on a mobile web page) by using the webcal protocol:
webcal://website.mobi/mymeeting.ics
As of iOS 5, if you create a simple http link to an .ics file, Mobile Safari will offer to open it up in Calendar.
According to the iPhone documentation there is no URL scheme for the Calendar application. (There are URL schemes for Mail, Phone, Map, YouTube and iTunes.)
Of course there could be something undocumented, but I'm not sure that using it would be a good idea even if you can find it.
Of course it is possible but only if your JavaScript application is installed on the device. Look at http://tetontech.wordpress.com to see how to make calls from JavaScript to Objective-C. You can then use this and the Calendar Store Programming Guide from the documentation in Xcode to do what you want.
It is not possible. Apple does not want you to do this.
Now, what you could do is bookmark a javascript bookmarklet that checks the user-agent of the browser invoking it, and if the user is on Safari on their laptop or desktop Mac, then invoke the iCal using standard method (ICS file).
The user on iPhone could bookmark your page into a home screen bookmark with a useful (and perhaps custom) icon that said "Event" and title of "Meet Mary at 8:15". They could then, when they have synced their bookmarks, be reminded of the event and invoke it on their desktop browser.
Significant barriers here to educating users how to use this system, but it would work if you could convince people to do it, I think.