Trying to implement a simple slider menu. jQuery Mobile renders fine on the main page but on the menu div, no jQuery Mobile is being applied. Read all related examples but none of them solve the problem I'm having. Any feedback is much appreciated.
test.html.erb
<head>
<title>FB Style Menu</title>
<meta id="extViewportMeta" name="viewport" content="width=device-width, initial- scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="css/jquery.mobile-1.0rc2.min.css" />
<link rel="stylesheet" href="css/main.css?v=31" />
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<div data-role="page" class="pages" id="home">
<div data-role="header">
Menu
<h1>FB Style Menu</h1>
</div><!-- /header -->
<div data-role="content">
<p><strong>Note: You can swipe right/left to show/close menu.</strong></p>
</div>
</div>
<div id = "menu">
<h3>Menu</h3>
<ul>
<li class="active">Home </li>
<li>About </li>
<li>Portfolio </li>
<li>Contact </li>
</ul>
</div>
test.js
$(function(){
var menuStatus;
$("a.showMenu").click(function(){
if(menuStatus != true){
$(".ui-page-active").animate({
marginLeft: "250px",
}, 300, function(){menuStatus = true});
return false;
} else {
$(".ui-page-active").animate({
marginLeft: "0px",
}, 300, function(){menuStatus = false});
return false;
}
});
$('.pages').live("swipeleft", function(){
if (menuStatus){
$(".ui-page-active").animate({
marginLeft: "0px",
}, 300, function(){menuStatus = false});
}
});
$('.pages').live("swiperight", function(){
if (!menuStatus){
$(".ui-page-active").animate({
marginLeft: "165px",
}, 300, function(){menuStatus = true});
}
});
$("#menu li a").click(function(){
var p = $(this).parent();
if($(p).hasClass('active')){
$("#menu li").removeClass('active');
} else {
$("#menu li").removeClass('active');
$(p).addClass('active');
}
});
});
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>fuseGap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">if (window.location.hash == '#_=_')window.location.hash = '';</script>
<link rel="stylesheet" href="arc2theme.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
You do not need to place the var p inside the jQuery selector syntax.
p.hasClass(....
Should be good enough.
regarding the mobile, I believe jQuery mobile looks for divs with data-role = page, your menu div is outside of that.
Try adding data-role = page to your menu div .
Related
I replace a listview item in a jQuery mobile page based on some condition (date of the month, whatever) and I appear to be able to apply the styling only partially. The example below formats the new listview item partially correct, the link is missing its styling. What I am missing here?
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../js/jquery.mobile-1.4.0-beta.1.min.css"/>
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/jquery.mobile-1.4.0-beta.1.min.js"></script>
<script type="text/javascript">
$(document).delegate("#index", "pageinit", function() {
var newItem;
if (false) {
newItem = $("#templ1")[0].innerHTML
} else {
newItem = $("#templ2")[0].innerHTML
}
$("#item1")[0].innerHTML = newItem;
$("#item1").parent().listview("refresh");
});
</script>
<meta charset="utf-8">
</head>
<body>
<div data-role="page" id="index">
<script id="templ1" type="text/template">
<li id="item1">item1 templ1</li>
</script>
<script id="templ2" type="text/template">
<li id="item1">item1 templ2</li>
</script>
<div data-role="header" data-position="fixed">
<h1>test</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">divider 1</li>
<li id="item1">item1</li>
</ul>
</div>
</div>
</body>
</html>
I am using the instagram ruby gem. If i do more than 2 requests below is what the error i get.
Now, for the first two request it shows this
Processing by HomesController#index as JS
Processing by HomesController#index as */*
So when the third request happens now, it erros into (as said above) this
Completed 500 Internal Server Error in 4525ms
JSON::ParserError (757: unexpected token at '<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" class="hl-en not-logged-in ">
<head>
<meta charset="UTF-8" />
<title>Page Not Found • Instagram</title>
<meta name="robots" content="noimageindex" />
<link rel="Shortcut Icon" type="image/x-icon" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/favicon.ico" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon-precomposed" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/apple-touch-icon-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/apple-touch-icon-144x144-precomposed.png" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<script type="text/javascript" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/scripts/jquery.js"></script>
<script type="text/javascript" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/scripts/bluebar.js"></script>
<script type="text/javascript" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/strings/strings_en.js"></script>
<script>
window._csrf_token = 'NOTPROVIDED';
window._jscalls = [
];
</script>
<script type="text/javascript" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/polyfills/polyfill_old.js"></script>
<script data-main="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/modules/main.js" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/scripts/require.js"></script>
<link rel="stylesheet" type="text/css" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/bluebar/bluebar_new.css" />
<link rel="stylesheet" type="text/css" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/distillery/dialog-main.css"/>
</head>
<body class=" p-error dialog-404">
<div class="root">
<div class="page">
<header class="top-bar top-bar-new">
<div class="top-bar-wrapper">
<h1 class="logo">Instagram</h1>
<div class="top-bar-left">
<ul class="top-bar-actions">
<li>
<a class="top-bar-home" href="/" label=Home><i></i></a>
</li>
</ul>
<div class="top-bar-search" id="top-bar-search">
</div>
</div>
<div class="top-bar-right account-state" id="top_bar_right">
<ul class="top-bar-actions">
<li id="link_profile" class="link-signin">
<a href="javascript:;" class="loginLink">
<i></i>
<strong>Log in</strong>
</a>
</li>
</ul>
</div>
</div>
</header> <!-- .top-bar -->
<div class="main">
<div class="error-container">
<h2>Page Not Found</h2>
<p>This page could not be found.<br />You might have followed an incorrect link.</p>
</div>
</div> <!-- .main -->
</div> <!-- .page -->
<footer class="page-footer" role="contentinfo">
<div class="wrapper">
<nav>
<ul>
<li>About us</li>
<li>Support</li>
<li>Blog</li>
<li>API</li>
<li>Jobs</li>
<li>Privacy</li>
<li>Terms</li>
</ul>
</nav>
<p class="copyright">© 2013 Instagram</p>
</div>
</footer>
<div id="reactModalMountPoint"></div>
</div> <!-- .root -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-18105282-1']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>'
I think something is wrong with the header? Since I am doing the process via ajax, how can I force it to process it through JS? since thats what seems to work here I believe.
Here is my ajax code
{
$.ajax({
url: /home,
method: "post",
data: {
// data goes here
},
success: function(html)
{
if(html)
{
// html goes here
}else
{
// html goes here</center>');
}
}
I think instagram is blocking your request if you do to many request in a specific time
Instagram is serving up an error page instead of the JSON you expect. You need to check the response's status code (in this case it would be 404 instead of 200) to find out if the payload is JSON or HTML in the case of the error page.
After so much work on this, I found out for my case that it is because something in the content of the JSON data is screwing things around. That was my situation (and I hate how 500 status is so vague about the error, too)
I am tryign to implement a random answer on a page loaded via an ajax call. I am using jquery mobile inclusive layout. Therefore I added a simple java script in the div data-roll container and initialized it via $(document).live or $(document).on or $(document).bind, like it should be according to many answers or suggestions here. Everything works fine, when I use a normal alert function. Like this
<script>
$(document).live('pageinit', "#answerPage", function (event) {
alert("Page Initialized");
});
</script>
Also my script works fine, when I add it to a normal html page.
So when I instead using an alert I use function getanswer() it doesn`t work. What do I do wrong here? Thanks for your help.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="answerPage" data-theme="b" data-add-back-btn="true">
<script>
$(document).on("pageinit", "#answerPage", function(event) {
function getanswer() {
var r_text = new Array ();
r_text[0] = "A";
r_text[1] = "B";
r_text[2] = "C";
r_text[3] = "D";
r_text[4] = "E";
r_text[5] = "F";
r_text[6] = "G";
var i = Math.floor(7*Math.random());
document.getElementById("ShowAnswer").innerHTML = r_text[i];
};
});
</script>
<div data-role="header" data-position="fixed" data-theme="b">
<div id="ShowAnswer"> </div>
</div>
</div>
</body>
</html>
you forgot to call your function getanswer()...
see working example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="answerPage" data-theme="b" data-add-back-btn="true">
<div data-role="header" data-position="fixed" data-theme="b">
<div id="ShowAnswer"></div>
</div>
</div>
<script>
$(document).on("pageinit", "#answerPage", function(event) {
getanswer();
});
function getanswer() {
var r_text = new Array ();
r_text[0] = "A";
r_text[1] = "B";
r_text[2] = "C";
r_text[3] = "D";
r_text[4] = "E";
r_text[5] = "F";
r_text[6] = "G";
var i = Math.floor(7*Math.random());
document.getElementById("ShowAnswer").innerHTML = r_text[i];
};
</script>
</body>
</html>
I'm trying to create a slide out panel for my navigation for an ios app using phonegap. The problems occur when I get to the page below and the JSON starts loading. First of all I get this error in the console of xcode:
ImageIO: <ERROR> JPEG Corrupt JPEG data: premature end of data segment
After all the images load, my css3 transition is really choppy, even though it runs smoothly on every other page. What I'm wondering is if the AJAX script is constantly going out and trying to retrieve those images that have errors. Therefore I have an unending script that is causing ios to run choppy. Is there a way to close the script after it retrieves the images or do you have another idea on how to fix this? Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link type="text/css" rel="stylesheet" href="styles/iphone.css" />
<link href="styles/slideshow.css" type="text/css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript" charset="utf-8" src="scripts/jquery.js"></script>
<script src="scripts/retina.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/phonegap.js"></script>
<link rel="stylesheet" media="all and (orientation:landscape)" href="styles/iphone-lan.css">
</head>
<body>
<div id="overlay"></div>
<div class="wrapper">
<img src="img/events.png" width="280" height="57" class="retina welcome" />
<div id="events">
</div>
</div>
<div id="nav-wrapper">
<ul>
<li class="home"><div><img src="img/home-icon-white.png" /></div>Home</li>
<li class="where"><div><img src="img/where-icon-gray.png" /></div>Where</li>
<li class="series"><div><img src="img/watch-icon-gray.png" /></div>Series</li>
<li class="events"><a class="active" href="events.html"><div><img src="img/events-icon-gray.png" /></div>Events</a></li>
<li class="more" ><a href="javascript:void(0)" id="more-toggle" ><div><img src="img/more-icon.png" /></div>More</a></li>
<li id="more-panel">
<a class="more-link" href="" style="border-top: none">READ 2012</a>
<a class="more-link" href="">Blog</a>
<a class="more-link" href="">Facebook</a>
<a class="more-link" href="">Twitter</a>
</li>
</ul>
</div>
<script>
$('#more-toggle').click(function() {
$('#overlay').toggleClass("activated");
$('#nav-wrapper').toggleClass("expanded");
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('img').retina();
});
$.ajax({
url: "http://www.lcbcchurch.com/mobileJSON/events",
dataType: "json",
success:function(data){
results(data);
}
});
function results(data) {
for(var i = 0; i<data.length;i++){
// this will log all of the images url
console.log(data[i].slideshow_image); // just access the part you want by it's name.
$("#events").append("<img src='"+data[i]["event-image"]+"'></a>");
}
picsReady();
}
</script>
<script type="text/javascript" src="scripts/klass.min.js"></script>
<script type="text/javascript" src="scripts/code.photoswipe-3.0.4.min.js"></script>
<script type="text/javascript">
function picsReady() {
(function(window, Util, PhotoSwipe){
$(document).ready(function(e){
var instance;
instance = PhotoSwipe.attach(
window.document.querySelectorAll('#slider a'),
{
target: window.document.querySelectorAll('#PhotoSwipeTarget')[0],
loop: true,
preventHide: true,
autoStartSlideshow: true,
captionAndToolbarHide: true,
margin: 0,
}
);
instance.show(0);
}, false);
}(window, window.Code.Util, window.Code.PhotoSwipe));
}
</script>
</body>
</html>
The html below generates a google map. However, when I hover over the map, the cursor does not change from an arrow to a hand like the one in the jquery mobile example http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#basic_map. I am testing on Safari under the iPhone user agent.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon" />
<link href="/assets/gmaps4rails.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/gmaps4rails/googlemaps.js" type="text/javascript"></script>
</head>
<body>
<div class="container" id="container">
<div class="page" data-role="page">
<header data-role="header" data-position="inline" data-theme="b" data-position="fixed"></header>
<div data-role="content">
<div id="map" class="gmaps4rails_map"></div>
</div>
<footer data-role="footer" data-theme="b">
</footer>
<script type="text/javascript" src="//maps.google.com/maps/api/js?v=3.5&sensor=false&libraries=geometry"></script>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js"></script>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.5/src/markerclusterer_packed.js"></script>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js"></script>
<script type="text/javascript" charset="utf-8">
Gmaps.map = new Gmaps4RailsGoogle();
Gmaps.load_map = function() {
Gmaps.map.map_options.center_latitude = "37.7668452";
Gmaps.map.map_options.center_longitude = "-122.2537803";
Gmaps.map.map_options.disableDefaultUI = true;
Gmaps.map.map_options.draggable = true;
Gmaps.map.initialize();
Gmaps.map.markers = [{"title":"Test","lat":"37.7668452","lng":"-122.2537803"}];
Gmaps.map.create_markers();
Gmaps.map.adjustMapToBounds();
Gmaps.map.callback();
};
window.onload = function() { Gmaps.loadMaps(); };
</script>
</div>
</div>
</body>
</html>
What is the code missing and/or is Google-Maps-for-Rails mobile enabled?
Thanks!
Google-Maps-for-Rails is mobile enabled. The map that appears on mobile is an image and can't be dragged on a desktop safari browser.