On the zepto project website i see no version of IE as being supported, not even 9.
I am considering using zepto in a webapp (not mobile) but i want to support IE 9+
Is that possible? What features / methods of zepto do not work on IE9?
Out of curiosity I just loaded up the following page and tested in current versions of Chrome, Firefox, Safari and IE9. In all but IE9 I was greeted with the alert() message. IE9 gave me no alert and contained two errors in the console. Here's the code I used, with the Zepto library in the same folder.
<!doctype html>
<h1>Zepto Browser Support Test</h1>
<script src="zepto.min.js"></script>
<script>
$(function () {
alert('Zepto Ready Successful!');
});
</script>
So, unfortunately for your web app, if you are trying to support IE9, it doesn't look like Zepto is going to work for you.
Although, what the good folks at Zepto encourage if you are trying to reach IE users is to fallback to jQuery. They even give you the code to do so.
If you need to support Internet Explorer, you can fall back on jQuery. Note that conditional comments are no longer supported starting on IE 10, so we recommend the following document.write approach:
<script>
document.write('<script src=' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>
I found this in the Zepto docs near the top of the page.
Hope that helps and good luck!
Related
I copied the navbar default sample from from the samples but without any changes it appears to be doing what I think is mobile format. The only thing I see is the brand tag to the left and the button to the right. My monitor is pretty big so it can handle the menu and it does when I view it online which you can visually see here. I can only assume that since I cut and paste from the demo code I have a setting somewhere else that is wrong but I have no idea where to look. I did make sure to run nuget and get the latest version of the code so I should match what is on the demo. Any ideas?
Update
The issue appears to be with VS2012 and debug mode. Using Visual Studio Development Server seems to be the problem. If I publish locally it works as expected. I thought it might be IE8 but realized it was VS2012 after I published the site.
Is there a way to work around this while using the debugger in VS2012?
Update 2
And somehow it is not working in IE8 again even after being published. Chrome seems to work fine. Must be something picky about IE8 that I need to code around.
Try to copy all the page html, then if it works cut unnecessary code.
Use this instead of your local bootstrap:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Looks like this was an issue with IE8 all along. I didn't think it was a browser issue so I never looked for IE8 nav problems but here is a link that documents the issue.
We have a mobile version of our Joomla site using mobile Joomla and everything was working fine until we introduced the jquery UI for the autocompletion functionality into the equation. We now get the following error "Uncaught TypeError: Object 0 has no method 'match'" which after googling seems to indicate it being a conflict between Mobile Joomla and jQuery UI.
We can prove this if we remove the UI it runs fine again.
Any help would really be appreciated.
Thanks
Richard
Use $.noConflict(); and inside (document).ready(function() put $ inside (function()
Example:
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery is still working!");
});
});
I am working on converting my existing MVC website to be Mobile friendly. I am having issues when clicked on links, it is showing empty page. If I remove following links in _Layout.Mobile.cshtml
#System.Web.Optimization.Scripts.Render("~/bundles/jquery")
#System.Web.Optimization.Scripts.Render("~/bundles/jquerymobile")
Then it works fine but I loose all the styling and the text on webpage displays very tiny.
I am using Opera Mobile emulator for testing.
The links are local and are like "localhost:62234/Articles/10".
Just to give some more background I am converting my Framework 4.5 MVC website to be Mobile friendly. I have added all the libraries needed and main page works fine. I am having issues when links are pressed on main page. Initially clicking on links was doing nothing, then I did some research and discovered that I have to add tag rel="external" to the links to make them work. Now links work but displays empty page. Any help is greatly appreciated.
Here is solution I found which solved my problem finally.
Here is how my code looks now..in _Layout.Mobile.cshtml
#System.Web.Optimization.Scripts.Render("~/bundles/jquery")
#System.Web.Optimization.Scripts.Render("~/bundles/jquerymobile")
<script type=”text/javascript” src=”#Url.Content("~/Scripts/jquery-2.0.2.min.js")"></script>
<script type=”text/javascript”>
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script type=”text/javascript” src=”#Url.Content("~/Scripts/jquery.mobile-1.3.1.min.js")"></script>
I found some more information with this problem Here.
Hope this helps others
Does anybody know of a way to make jQuery Mobile load only on pages with certain screen resolutions? I don't want jQuery Mobile to load if somebody is viewing the page from a desktop/laptop browser because I want to use HTML5 Boilerplate.
For example, if somebody visits my page from their iPhone, I want jQuery Mobile to format the site with the theme I have created, but if they view it from their desktop, I don't want jQuery Mobile to add all the extra tags and stuff.
Thanks
<script type="text/javascript">
<!--
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", "js/jqueryMobile.js")
if (screen.width <= 480) {
document.getElementsByTagName("head")[0].appendChild(fileref);
}
//-->
</script>
<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "mobile/index.html";
}
//-->
</script>
This piece of script will recognize the screen size, in this case 699 px, and will then tell the server to load a different folder than the root. Just create a folder in on your server named mobile for your jquery mobile site and thats it. cheers!
jQM Docs:
http://jquerymobile.com/test/docs/api/mediahelpers.html
Note: This feature was deprecated in beta, and removed in 1.0rc1. We
recommend using CSS3 Media Queries instead. To support older versions
of Internet Explorer, check out respond.js, a fast & lightweight
polyfill for min/max-width CSS3 Media Queries.
If you still need this feature, you can find the code here:
jquery.mobile.media.classes.js
Already found this page with some helpful hints.
Problem is I need to debug a web application on a CMS using an iPad and Safari.
So far I haven't been able to make firebug-lite work. I am working in a secured environment having no internet acces, but can copy files using a USB-key.
I have copied firebug-lite.js to the local server and included the file in a script tag in the head:
<script type="text/javascript" src="http://my_server/js/firebug-lite.js"></script>
Unfortunatly when I open the page in the CMS I cannot see the firebug-lite-button on the page. Verifying the source code firebug-lite should have been loaded on the page. There is no way to get a right click menu to inspect anything.
What can I do to make firebug-lite work on the iPad? What am I doing wrong?
Start Firebug Lite already opened, as per http://getfirebug.com/firebuglite#Options :
<script type="text/javascript" src="proto://path/to/firebug-lite.js#startOpened=true"></script>
I think you won't be able to inspect elements, but you can navigate to the elements in the DOM tree provided by Firebug Lite.
It looks like Firebug-lite has problems with the iPad browser since late 2010.
The problem (ticket on official tracker) has not been yet solved.
Have you tested the problematic page in Safari/Chrome/Chromium for desktop? Since they use Webkit, the same system used with mobile Safari/Chrome, you may be able to duplicate the error and find its solution. You can open Chrome's debugger with right click, Inspect element.