Response title
This is preview!
- Screen name: mapsv3
mapsv3's Profile
5 Posts
0 Responses
0
Followers
Activity Trend
Last 30 days
Loading Chart...
Show:
- Expanded view
- List view
- 11-Jan-2013 04:59 AM
- Forum: jQuery Mobile
I am working on JqueryMobile listview, before this i has problem with there is a slight gap which is causing the border bottom and border top to appear as a 2px width border instead of 1px. I manage to fix it withmargin-bottom: -1px !important;
my html code<div data-role="fieldcontain"> <ul data-theme="f" data-role="listview" data-inset="false" id="listview"></ul> </div>
.ui-btn-up-f { border: 1px solid #bbb /*{f-bup-border}*/; margin-bottom: -1px !important; /* border-bottom: 1px dashed #bbb; */ background: #ffffff /*{f-bup-background-color}*/; font-weight: normal; color: #333 /*{f-bup-color}*/; text-shadow: 0 /*{f-bup-shadow-x}*/ 1px /*{f-bup-shadow-y}*/ 0 /*{f-bup-shadow-radius}*/ #fff /*{f-bup-shadow-color}*/; background-image: -webkit-gradient(linear, left top, left bottom, from( #ffffff /*{f-bup-background-start}*/), to( #ffffff /*{f-bup-background-end}*/)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient( #ffffff /*{f-bup-background-start}*/, #ffffff /*{f-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient( #ffffff /*{f-bup-background-start}*/, #ffffff /*{f-bup-background-end}*/); /* FF3.6 */ background-image: -ms-linear-gradient( #ffffff /*{f-bup-background-start}*/, #ffffff /*{f-bup-background-end}*/); /* IE10 */ background-image: -o-linear-gradient( #ffffff /*{f-bup-background-start}*/, #ffffff /*{f-bup-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient( #ffffff /*{f-bup-background-start}*/, #ffffff /*{f-bup-background-end}*/); }
- 08-Nov-2012 11:32 PM
- Forum: Using jQuery UI
I am new to android and jquerymobile
I am using fullcalendar in jquerymobile. here is my code at jsfiddle
as you can see the event title is bold and blur, the fullcalendar header also not fits perfectly when test at samsung galaxy II. The original fullcalendar fonts is nice and sharp.
If i test remove this jquerymobile theme css it will work fine, I guess is jquerymobile css crash with fullcalendar css. Sorry, I have not much experience in css.- <link rel="stylesheet" href="http://dl.dropbox.com/u/41465102/android-theme.min.css" />
- how to make event title font exactly like the original
- the full calendar header is fits perfectly in mobile
- any nice font recommend for jquerymobile because this fonts not sharp enough. eg.Roboto?
Thanks in advanced
- 29-Oct-2012 09:27 PM
- Forum: Using jQuery UI
I am new to mobile development. My goal is to include a FullCalendar into JQueryMobile. I have followed this guide but when I run it with the Android Emulator, it loads the event dialog page with input text "title" and "color" like the image below.
How can I make it load a full calendar view first instead of an event dialog?
I have copied all js & css. Here is my index.html code- <html>
<head>
<link rel='stylesheet' type='text/css' href='resources/css/jquery-ui-1.8.13.custom.css'/>
<link rel='stylesheet' type='text/css' href='resources/css/fullcalendar.css'/>
<link rel='stylesheet' type='text/css' href='resources/css/application.css'/>
<script type='text/javascript' src='resources/js/jquery-1.5.1.min.js'></script>
<script type='text/javascript' src='resources/js/jquery-ui-1.8.13.custom.min.js'></script>
<script type='text/javascript' src='resources/js/fullcalendar.min.js'></script>
<script type='text/javascript' src='resources/js/underscore.js'></script>
<script type='text/javascript' src='resources/js/backbone.js'></script>
<script type='text/javascript' src='resources/js/application.js'></script>
</head>
<body>
<div id='calendar'></div>
<div id='eventDialog' class='dialog ui-helper-hidden'>
<form>
<div>
<label>Title:</label>
<input id='title' class="field" type="text"></input>
</div>
<div>
<label>Color:</label>
<input id='color' class="field" type="text"></input>
</div>
</form>
</div>
</body>
</html>
Please advise how to load full calendar view instead of the event dialog coming first. Thanks.- 29-Oct-2012 03:53 AM
- Forum: Developing jQuery Mobile
I am newbie to JQueryMobile, When I test at jsfiddle its work fine, but when i run at Android Emulator, it become like this
The date and time picker is missingBelow is my sample code,- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="resources/css/my.css" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<!-- Optional Mousewheel support: http://brandonaaron.net/code/mousewheel/docs -->
<script type="text/javascript" src="resources/js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<style>
/* App custom styles */
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="resources/js/my.js"></script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-theme="b" data-role="header">
<a data-role="button" data-inline="true" data-transition="slide" data-theme="b" href="#page1" class="ui-btn-left">
Calendar
</a>
<a data-role="button" data-inline="true" data-transition="slide" href="#page1" class="ui-btn-right">
Save
</a>
<h4>
Edit Event
</h4>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="txtTitle">
Title
</label>
<input name="" id="txtTitle" placeholder="" value="" type="text" />
</div>
<div data-role="fieldcontain">
<label for="link1">Start Time*</label>
<input name="link1" type="text" data-role="datebox" data-options='{"mode": "timebox"}' id="link1" />
<label for="link3">End Time*</label>
<input name="link3" type="text" data-role="datebox" data-options='{"mode": "timebox"}' id="link3" />
<label for="mydate">Date*</label>
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox"}'>
</div>
</div>
</div>
<script>
//App custom javascript
</script>
</body>
</html>
- I am new to mobile development. My goal is to include a FullCalendar into JQueryMobile. I have followed this guide but when I run it with the Android Emulator, it loads the event dialog page with input text "title" and "color" like the image below.How can I make it load a full calendar view first instead of an event dialog?
I have copied all js & css. Here is my index.html code- <html>
<head>
<link rel='stylesheet' type='text/css' href='resources/css/jquery-ui-1.8.13.custom.css'/>
<link rel='stylesheet' type='text/css' href='resources/css/fullcalendar.css'/>
<link rel='stylesheet' type='text/css' href='resources/css/application.css'/>
<script type='text/javascript' src='resources/js/jquery-1.5.1.min.js'></script>
<script type='text/javascript' src='resources/js/jquery-ui-1.8.13.custom.min.js'></script>
<script type='text/javascript' src='resources/js/fullcalendar.min.js'></script>
<script type='text/javascript' src='resources/js/underscore.js'></script>
<script type='text/javascript' src='resources/js/backbone.js'></script>
<script type='text/javascript' src='resources/js/application.js'></script>
</head>
<body>
<div id='calendar'></div>
<div id='eventDialog' class='dialog ui-helper-hidden'>
<form>
<div>
<label>Title:</label>
<input id='title' class="field" type="text"></input>
</div>
<div>
<label>Color:</label>
<input id='color' class="field" type="text"></input>
</div>
</form>
</div>
</body>
</html>
Please advise how to load full calendar view instead of the event dialog coming first. Thanks. - <html>
© 2012 jQuery Foundation
Sponsored by 
and others.