I have following definition of auto-complete list embedded with Search text box:
<div data-role="page" id="page1">
<div data-role="content">
<font size="6px">
Customer:
<ul id="autocomplete_customer" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a customer..." data-filter-theme="d"></ul>
</font>
</div>
</div>
The problem is that Search text box size is very small. How can I enlarge it? may be some jquery or css trick?
Thanks.
I think this is what you're after -
<div data-role="page" id="page1">
<div data-role="content">
<div style='font-size:18px;padding-bottom:15px;'>Customer:</div>
<ul id="autocomplete_customer" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a customer..." data-filter-theme="d">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
</ul>
</div>
</div>
$(function () {
$('form input[data-type="search"]').css('height', '75px');
});
jsFiddle Demo Here
Related
I make a test.html file like below:
<body>
<div data-role="page">
<!--Head of the main web-->
<div data-role="header" data-position="fixed">
<h2><img src="pic/jquery-logo.png" alt="1"></h2>
</div>
<div role="main" class="ui-content">
<div data-role="tabs" id="tabs">
<!--3 row navbar--!>
<div data-role="navbar">
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
</div>
<!--first nav bar of the 3-->
<div id="one" class="ui-body-d ui-content">
<ul data-role="listview" data-inset="true">
<li><img src="pic/business_standard_room.png"></li>
</ul>
</div>
<div id="two">
<ul data-role="listview" data-inset="true" class="ui-alt-icon">
</ul>
</div>
<div id="three">
<ul data-role="listview" data-inset="true" data-divider-theme="a">
</ul>
</div>
</div>
<!--footer of the page-->
<div data-role="footer" data-position="fixed">
<h5>Powered by Atek</h5>
</div>
</div>
I put the order.html and the test.html in the same folder.but when I click the link in the first tab.it returns me error.here is the error the chrome developer console showed
XMLHttpRequest cannot load file:///media/IRM_CCSA_X6/Mobile%20Website/Hotel/order.html. Received an invalid response. Origin 'null' is therefore not allowed access.
jQuery Mobile uses AJAX for the navigation inside the website, so when you press the link an AJAX call is done in order to get the new page.
I suppose that you are not using a server to test your website (just the file:/// protocol), and I think that is the problem. It has been reported a bug that local files are not loaded correctly using AJAX on Chrome, so you should use other browser or deploy a server to test it on Chrome.
Or in case you don't want to use the AJAX navigation, you could add the atribute data-ajax to the link in order to disable it:
<a href="order.html" data-ajax="false">
Hope this helps!
My page is having a dialog and I'm dynamically shows it via javascript. It works fine in IE,FF,Safari but not in chrome and opera. If this is a known bug and has workarounds let me know, I'll post the code if you need more specification.
this is the dialog:-
<div id="infoDialog" data-role="page" data-overlay-theme="b">
<div id="headerConfirmation" data-role="header" data-theme="b">
<h1>Invalid Action</h1>
</div>
<div id="contentConfirmation" data-role="content" data-theme="b">
<p>Please increase the adults count first</p>
<a href='#' onclick='$(".ui-dialog").dialog("close");' data-role='button' data-theme='c'>Close</a>
</div>
this dialog is being loaded into an Iframe's body by this
jQuery.getJSON(url, function(data) {
$("body").html(data["html"]);
and this is how I load it via Javascript
$.mobile.changePage("#infoDialog", { transition: "pop",role: "dialog" });
The code is too much complex to add here this works fine in IE,FF,Safari
Thanks in Advance.
Thought of answering my own question. The problem resolves when I navigate to another page and come back again. Then the dialog closes properly everytime. So I add this code before all jquery mobile library:-
$("#firstLoad").bind("pagecreate",function()
{
$.mobile.changePage("#selectDates");
});
and then add a fake jquery mobile page like this
:-
<div id="firstLoad" data-theme="c" data-role="page" >
<!-- <div id="firstLoadHeader" data-role="header">
<h1>Welcome</h1>
</div>
<div id="contentSelectDates" data-role="content">
</div>
<div id="footerSelectDates" data-role="footer">
<h1>Travel Gateway</h1>
</div> -->
</div>
So my actual page that I want to show comes after this.
:-
<div id="selectDates" data-theme="c" data-role="page">
<div id="headerSelectDates" data-role="header">
<h1>Select Dates</h1>
</div>
<div id="contentSelectDates" data-role="content">
</div>
</div>
This is what I have in my layout view. Home tab and To Do tab.
And codes in my html:
<div id="tabs">
<ul>
<li id="li_tab1" onclick="HomeTab"><a>Home</a></li>
<li id="li_tab2" onclick="ToDoTab"><a>To Do</a></li>
</ul>
<div id="Content_Area">
<div id="HomeTab">
<p>Home tab content goes here.</p>
</div>
<div id="ToDoTab" style="display: none;">
<p>To Do tab content goes here.</p>
The problem here is I tried to click on the To Do tab but it seems that the onclick is not working. Please help! Thanks.
//use this code istead of that..
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="tabs">
<ul>
<li id="li_tab1">Home</li>
<li id="li_tab2">To Do</li>
</ul>
<div id="Content_Area">
<div id="HomeTab">
<p>Home tab content goes here.</p>
</div>
<div id="ToDoTab" style="display: none;">
<p>To Do tab content goes here.</p></div
Use this code it will work
Use this javascript it will work to hide the content
<script type="text/javascript">
var showcont = [];
var showcont_containers = [];
$('#tabs ul li a').each(function () {
// note that this only compares the pathname, not the entire url
// which actually may be required for a more terse solution.
if (this.pathname == window.location.pathname) {
showcont.push(this);
showcont_containers.push($(this.hash).get(0));
};
});
$(showcont).click(function(){
$(showcont_containers).hide().filter(this.hash).fadeIn();
});
</script>
You can use JQuery UI:
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tabs-1">
<p>Content of Tab 1</p>
</div>
<div id="tabs-2">
<p>Content of Tab 2</p>
</div>
</div>
Check out this link for more information
am using IE9.
The following code works fine in FireFox 12
var sst;
sst = '<li>test12</li>';
$.mobile.changePage('#ChooseProg', { transition: "slideup" });
$('#RepData').html(sst);
This is what the ChoosProg page looks like:
<div data-role="page" id="ChooseProg" data-title="Choose Prog">
<div data-role="header" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<h1>Select Program</h1>
</div>
<div data-role="content">
<ul id="RepData" data-role="listview" data-filter="false" data-inset="true">
<li>
</ul>
<p> </p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
</div>
</div> <!-- /page -->
In IE9, it gives no errors and I doesn't seem to go to the ChooseProg page.
I'm new and i have a question about CSS3 and :empty pseudo-class.
I create a web ajax application. In my page layout I've got a sidebar and i want to hide this if is empty. So i wrote:
#my_sidebar:empty { display:none;}
For display it when isn't empty i wrote
#my_sidebar:not(:empty) { display:block; }
This is working but with chrome the sidebar appear only after one click on the page or on a link. Why?
Can someone help me?
Thanks! (excuse me for my terryfing english!!)
EDIT:
the html page:
<body id='body'>
<!-- Header -->
<header id="top" class="cf">
<div id="branding">
<h1>Project Management</h1>
</div>
<nav id="nav-user">
<ul>
<li><a id="user" href="profilo"><span id="username"></span><img id="avatar" class="avatar"></a></li>
<li><a id="company" href="azienda">Azienda</a></li>
<li><a id="logout" href="logout">Logout</a></li>
</ul>
</nav>
<nav id="nav-main">
<ul class="cf">
<li>
<button id="back" onClick="javascript: history.back();" href="#" />←</button></li>
</ul>
<!--popup con task finiti -->
<div id="task-ended" class="cf">
<div class="triangle-border top">
<div class="clear"></div>
</div>
</div><!--task-ended-->
<!--popup con task finiti -->
</nav>
</header>
<!-- Main Body -->
<div id="container" class="cf">
<div id="loading" style="display:none"><img src="images/loading.gif" /></div>
<div id="my_sidebar" class="sidebar"></div>
<div id="main" class="main"></div>
</div>
<footer class="cf" id="footer">
Mentis Project Management
</footer>
</body>
and css:
.sidebar {
float:right;
width: 36%;
text-align:left;
}
The Chrome bug apparently only happens with the display property, so you can instead set visibility: hidden; to make it invisible and position: absolute; to prevent the space from being reserved. This doesn't require the use of :not(:empty).
As always, whenever you find yourself pushing browsers to their limits, stop and ask yourself if there's a simpler way to do the job. Depending on what you need, simple calls to jQuery's show() and hide() method could work just as well. :)