i was trying to make my code in html and for some reasong when i try to run my code inside the html document, this is not working, but i was trying same code on http://jsfiddle.net
and my code it is working http://jsfiddle.net/gPfBC/
by any chance can somebody try this code and give it to me the complete html code?
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
var p=0;
$("#myProgressBar").progressbar({value:0});
var timer = setInterval(function(){
//This animates the bar
$("#myProgressBar .ui-progressbar-value").animate({width: p+"%"}, 500);
//This does static sets of the value
//$("#myProgressBar").progressbar("option","value",p);
p = p +3;
if(p>33.33){
$("#myProgressBar .ui-progressbar-value").animate({width: "33.33%"}, 500);
//$("#myProgressBar").progressbar("option","value",100);
clearInterval(timer);
}
},500);
});
</script>
<style type="text/css">
</style>
</head>
<body style=" background:url(ebay-bar/images/1.jpg) top left no-repeat; width:1099px; height:1050px;">
<div style="width:954px; position:absolute; top:606px; left: 67px; height: 45px;">
<div id="myProgressBar" style="height:43px;"></div>
</div>
</body>
</html>
You're running the script on jsFiddle with jQuery 1.3.2 and jQuery UI 1.7.2, but your html page has included jQuery 1.5.
Replace
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
with
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Your script is probably using functions that are deprecated in jQuery 1.5 or there is some problem between jQuery 1.5 and jQuery UI 1.8. Try using the latest versions of both jQuery and jQuery UI.
Related
In this example,
http://jsfiddle.net/7Ev43/2/ the inclusion of the first <script> line (<script src="http://www.polymer-project.org/platform.js"></script>) causes the jQueryMobile events pagebeforecreate and pageinit events not to fire, in Safari and Firefox. However, it works in Chrome.
Any ideas on how to amend this?
Further investigation:
It appears that on Firefox and Safari, platform.js is overriding addEventListener
At this point I'm not sure how to proceed further, any suggestions would be most welcome.
full example:
<!DOCTYPE >
<html>
<head>
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js" type="text/javascript"></script>
<script>
$(document).on('mobileinit', '#mainpage', function(){
console.log("mobileinit");
})
$(document).delegate("#mainpage", "pagebeforecreate", function(){
console.log("pagebeforecreate")
})
$(document).on("pageinit", '#mainpage', function()
{
console.log("pageinit")
});
console.log('end of script')
</script>
</head>
<body>
<div id="mainpage" data-role="page" data-theme="b">
</div>
</body>
</html>
I am trying to build a small mobile app with JQuery Mobile and EmberJS.
This is actually a Rhodes Application (Rhomobile).
This is my Layout.erb:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Todo</title>
<!-- Ember Libraries -->
<script src="/public/js/libs/handlebars-1.0.0.js"></script>
<script src="/public/js/libs/ember.js"></script>
<script src="/public/js/libs/ember-data.js"></script>
<!-- Ember Application -->
<script src="/public/js/application.js"></script>
<script src="/public/js/router.js"></script>
<script src="/public/js/models/todo.js"></script>
<script src="/public/js/controllers/todos_controller.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.loadingMessage = false;
$.mobile.loadingMessageDelay = 300; // in ms
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
$.mobile.ajaxEnabled = false;
$.mobile.pushStateEnabled = false;
$.mobile.loadingMessageDelay = 50; // in ms
});
</script>
<link rel="stylesheet" href="/public/jqmobile/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="/public/css/jqmobile-patch.css">
<script src="/public/jqmobile/jquery.mobile-1.3.1.min.js"></script>
<script src="/public/js/jqmobile-patch.js"></script>
</head>
<body data-platform="<%= Rho::System.getProperty('platform') %>">
<%= #content %>
</body>
</html>
As you can see I have disabled Ajax and PushState and stuff. This is my index.erb:
<script type="text/x-handlebars" data-template-name="todos">
<div data-role="page">
//My Template
</div>
</script>
Now when I try it, I just get a blank grey page. But no error in console or in Ember-Console (extension of Chrome). It even detects my views and controllers properly.
Then I try commenting the JqueryMobile CSS files and what I get is a page's height worth of blank space with "Loading" message and then I see my application below and it works fine. And if I remove JqueryMobile JS, I get the stuff but its not styled.
What is the problem?
It's kind of hard to say without seeing some more code of your app. If you only have the one template defined ('todos') it may be the case that Ember doesn't know how to kickstart the rendering of your app. You may need to define an 'application' template. It might be as simple as:
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
I'm building a jQuery Mobile page that incorporates a Google map (API v3). So far I have been successful displaying the map and implementing a lot of functionality. My problem is that the zoom feature on the google map does not render properly (it looks broken up and pixely).
The code at the bottom of the page demonstrates a basic implementation of a Google map in jQuery Mobile. If you test it on the latest version of Firefox you should see the zoom problem. Notice if you comment any of the three libraries below the zoom feature renders properly but the jQuery mobile functionality is lost.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
The research I've done indicates that the libraries implemented in these examples might fix the issue, but it will require me re-writing a large number of methods. Can any one advise me on a simpler way to fix this.
Sample Code:
<head>
<style type="text/css">
#map_canvas {
height: 375px;
width: 550px;
padding:10px;
border:1px solid gray;
margin:10px;
}
</style>
<link rel="stylesheet" href="../_assets/css/jqm-docs.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="//maps.googleapis.com/maps/api/js?sensor=false&libraries=places"
type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body onload="initialize()">
<script type="text/javascript">
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(37.332619, -121.88440100000003),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
</script>
<div data-role="page">
<div data-role="header"></div>
<div data-role="content">
<div id="map_canvas"></div>
</div>
</div>
</body>
I am using the plugin you mentioned (http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html) and recommend you to use this with jQM.
The plugin also struggles with some rendering failures on jQM and recommends to refresh all maps on pageshow.
Leads to code like:
jQuery(document).bind('pageshow', function(e, data) {
var page = jQuery(e.target);
page.find('.gmap').gmap('refresh');
});
You should try to do this somehow without the plugin.
I have this simple code, like that on the official site.
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="jquery.ui.all.css">
<script src="jquery-1.6.2.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
</head>
<body>
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
</div>
</body>
</html>
Obviously in the same folder I've moved the interested files and all works ok.
But the layout is awful, because sure miss something.
My output is this:
http://imageshack.us/photo/my-images/854/wrongdate.png/
How can I solve this problem?
Thank you.
I dare say it's the style file: you probably have an incorrect path for the file or the file is corrupted. See the following two examples:
without css: http://jsfiddle.net/william/5Xa8f
with css: http://jsfiddle.net/william/5Xa8f/2/
To confirm it is the problem, simply replace jquery.ui.all.css with http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css, and see if the problem is fixed.
Why the following code doesn't work? (if I change remote source there to local, then it works well)
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("input#autocomplete").autocomplete({
source: "http://jqueryui.com/demos/autocomplete/search.php",
minLength: 2,
select: function( event, ui ) {
}
});
});
</script>
<style>
.ui-autocomplete-loading { background: white url('http://jqueryui.com/demos/autocomplete/images/ui-anim_basic_16x16.gif') right center no-repeat; }
</style>
</head>
<body style="font-size:62.5%;">
<input id="autocomplete" />
</body>
</html>
same origin policy as the source requires a script from another site to be run.
http://en.wikipedia.org/wiki/Same_origin_policy
You could change the source to use a jquery ajax call to another site which can return jsonp.
See this for an example: http://jqueryui.com/demos/autocomplete/#remote-jsonp
or ensure that the source url given returns jsonp.