I have just upgraded jquery mobile from 1.1.0 to 1.1.1 and my navbar is messed up now. Googling I've discovered that, in 1.1.1, the .ui-mini class is added by default.
Unfortunately the documentation isn't up to date so I don't know how to get back the "classic" style for my tabs.
I've tried data-mini="false", data-full="true" but it doesn't works.
Any idea?
Navbar with 1.1.1 Styles:
Seems to be working fine except for the extra margins around the buttons - http://jsfiddle.net/nirmaljpatel/Mc3be/
The .ui-mini class only adds some margin... you can get rid of that:
HTML:
<div id="myNavBar" data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div><!-- /navbar -->
CSS:
#myNavBar.ui-mini {
margin: 0 0;
}
Navbar with .ui-mini margin removed:
Related
I've installed a Angular UI Bootstrap 2.5.0 package in my visual studio and I'm trying to perform a carousel operation, but it doesn't work at all. Following is my code.
<div class="panel-body" id="tblSubs" ng-controller="ControllerName">
<carousel interval="myInterval">
<slide ng-repeat="id in code">
<h3 class="text-center">{{id.Name}}</h3>
<p>{{id.Contact}}</p>
<p>{{id.Info}}</p>
</slide>
</carousel>
</div>
I'm able to get the data but the data doesn't come in carousel.
Any help would be appreciated.
Since version 0.14.0 you need to add the uib prefix to some of the directives, enter uib-carousel instead of carousel etc..
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</div>
</div>
I am using Phonegap 3.3 and Jquery mobile 1.4 for my app.
I have a link that opens a pop and JQM 1.4 displays the background icon thanks to the css pseudo-class :after, it works on my desktop browser but I can't see the icon nor the ::after in the html on Android (Phonegap).
my HTML :
<div id="blink">Enter <span> size </span>
Learn more:
</div>
<div data-role="popup" id="popupInfo" data-theme="b" style="max-width:350px;">
<p>blabla</p>
</div>
my CSS:
#welcome-page #leveldata .ui-alt-icon.ui-icon-info:after, #welcome-page #leveldata .ui-alt-icon .ui-icon-info:after {
background-image: url("../images/info-custom.svg");
}
And the HTML produced by JQM doesn't have the ::after, see screenshot below :
Can you help ?
I am trying to implement the new external panel offered in jQuery mobile 1.4 rc1. I am able to get the panel to enter and dismiss across all pages as it should, however the panel does not inherit the styles from the default theme (c) nor will it if a theme is defined using data-theme=a. The panel will load an unstyled list view unless I navigate the to #app-menu in the url then the styles appear. Does anyone know why this might be?
<script id="panel-init">
$(function () {
$("body > [data-role='panel']").panel();
});
</script>
<div data-role="panel" id="app-menu" data-display="push" data-position="left">
<ul data-role="listview">
<li data-role="list-divider">Menu</li>
<li data-icon="home" data-bind="click: navTo.bind($data, 'location-map', 'flip', false)">current party</li>
</ul>
</div>
Note: data-theme attribute should be added to External panel as it doesn't inherit style/theme from parent container. Internal panel inherit styles/theme from page div containing it.
jQuery Mobile now offer external panel and toolbar. Those widgets aren't being initiated automatically by jQM. They need to be initiated manually and followed by .enhanceWithin() to enhace contents within.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
Demo
I'm not allowed to comment but in the demo #Omar provide the many data-icon="home" icons are not showing up and if I add class="ui-btn ui-icon-arrow-l" to the Anchor, it doesn't show up either so there appears to be something more that needs to be done.
With a little investigation, I found that adding adding ui-btn-icon-left like so will fix anchors
Anchor
adding these classes to the <li data-icon="home" doesn't quite work but changing <li data-icon="home">item</li> to <li class="ui-btn ui-icon-home ui-btn-icon-left ui-corner-all">item</li> will get the icon to show up but will not move the text over so it still looks bad.
I have developed an application using Phonegap, jquery jquery-1.6.4 and jquery mobile-1.0.1. Application is working fine on IOS, Android and BlackBerry 10. Now I am trying to port my app for windows 8 phone but $.mobile.changePage("#pageid"); is not working.
My HTML code is:
<div data-role="page" id="emergency_Numbers" class="custom-background-image-college">
<div data-role="header" data-position="fixed" >
<a href="javascript:void(0)" data-role="none" class="custom-button" onclick="goBack()" >Back</a>
<h1>Emergency</h1>
</div>
<div data-role="content" style="padding:5px;">
<ul id="ul_emergency_Numbers" data-role="listview" data-inset="true"></ul>
</div>
</div>
And I am calling from java script :
function displayEmergencyPage() {
var EmregencyNo = "";
EmregencyNo += "<li class='ui-btn ui-bar-f' data-role='list-divider' style='font-size:16px;'>Phone Numbers</li>";
$.each(UIEmergencyObject, function(key, val) {
if(val.enabled == true) {
teleNo = val.number;
EmregencyNo += "<li data-theme='d'><a href='tel:"+teleNo+"' ><label class='modifiedH3text' >"+val.name+"</label><p class='modifiedH4text'>"+val.number+"</p></a></li>";
}
});
$("#ul_emergency_Numbers").html(EmregencyNo);
$.mobile.changePage("#emergency_Numbers");
}
I think there will be some different way to load page in windows 8.
Any help will be appreciated.
I found the solution for this: I changed jquery version to jquery-1.8.2 and jquery mobile version to jquery.mobile-1.3.0 and it worked fine.
$.mobile.changePage as I can recall wont work for jquery 1.6.4,try upgrading jquery and jquery mobile and see if that makes any difference.Thanks
Could you please guide me (an example is much appreciated) as to how i can achieve the Slide up effect on a tag like the one in jQuery 1.9.1 using jQuery MOBILE 1.3.0.
I need to do like the 1st example in this page http://api.jquery.com/slideUp/
I read the slideup but how to do it for a tag.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html
I know this would be simple but i am new to jQuery. Just couldn't get it done in the mobile API.
Is this what are you looking for? Demo
Markup
<a data-role="button" id="clickme">Click here</a>
<br/>
// this div will slideup.
<div id="test">
<img src="anyimg.jpg" alt="" />
</div>
Code
$('#clickme').click(function () {
$('#test').slideUp('slow'); // or fast, or leave it blank
});